/* ========== Privatily Mail Branding ========== */

/* === LOGIN PAGE === */
#layout-content.no-navbar { background: #f5f5f5 !important; }
#login-form {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  padding: 30px !important;
}
#login-form .box-inner { border-top: 3px solid #4632da !important; padding: 20px !important; }
#login-form input.form-control { background: white !important; border: 1px solid #ddd !important; color: #333 !important; }
#login-form .input-group-text { background: #f8f8f8 !important; border: 1px solid #ddd !important; color: #4632da !important; }
#login-form .btn-primary { background-color: #4632da !important; border-color: #4632da !important; border-radius: 6px !important; }
#logo { max-width: 80px; margin: 0 auto 20px; display: block; opacity: 1 !important; filter: none !important; }

/* === BUTTONS === */
.btn-primary, a.btn-primary { background-color: #4632da !important; border-color: #4632da !important; }
.btn-primary:hover, a.btn-primary:hover { background-color: #3828b0 !important; border-color: #3828b0 !important; }

/* === ALL SELECTED/ACTIVE ITEMS - CORAL RED === */
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div,
.listing li.selected > div > a,
.listing li.selected a,
.listing li.selected span,
.listing li.selected a span,
.listing tr.selected,
.listing tr.selected td,
.listing tr.selected td a,
.listing tr.selected td span,
#sections-table tr.selected,
#sections-table tr.selected td,
#sections-table tr.selected td a,
#mailboxlist li.selected,
#mailboxlist li.selected > a,
#mailboxlist li.selected > a span,
.treelist li.selected,
.treelist li.selected > a,
.treelist li.selected > div,
.treelist li.selected > div > a,
.listing li.focused,
.listing li.focused > a,
.listing li.focused > div > a {
  background-color: #fe7b79 !important;
  color: #fff !important;
}

/* Badge/unread count */
.listing .unreadcount, .badge {
  background-color: #fe7b79 !important;
  color: #fff !important;
}

/* Hide default contact photo placeholder */
.contactphoto img[src*="contactpic"],
.contactphoto .contactpic,
img.contactphoto[src*="contactpic"],
.message-partheaders .contactphoto,
#message-header .contactphoto {
  display: none !important;
}

/* === CHECKBOXES === */
input[type="checkbox"]:checked + .custom-control-indicator {
  background-color: #4632da !important;
  border-color: #4632da !important;
}

/* ============ LIGHT MODE ============ */

/* Links */
html:not(.dark-mode) a { color: #4632da; }
html:not(.dark-mode) a:hover { color: #3828b0; }

/* Toolbar - purple bg, white text */
html:not(.dark-mode) .toolbar,
html:not(.dark-mode) .header,
html:not(.dark-mode) #layout > .toolbar {
  background-color: #4632da !important;
}

html:not(.dark-mode) .toolbar a,
html:not(.dark-mode) .toolbar a:before,
html:not(.dark-mode) .toolbar .button,
html:not(.dark-mode) .toolbar .button:before,
html:not(.dark-mode) .toolbar a span,
html:not(.dark-mode) .header a,
html:not(.dark-mode) .header span {
  color: #fff !important;
}

/* Toolbar hover - lighter purple */
html:not(.dark-mode) .toolbar a:hover,
html:not(.dark-mode) .toolbar a:hover:before,
html:not(.dark-mode) .toolbar a:hover span,
html:not(.dark-mode) .toolbar a:focus,
html:not(.dark-mode) .toolbar a:focus:before,
html:not(.dark-mode) .toolbar a:focus span,
html:not(.dark-mode) .toolbar a.selected,
html:not(.dark-mode) .toolbar a.selected:before,
html:not(.dark-mode) .toolbar a.selected span,
html:not(.dark-mode) .toolbar button:hover,
html:not(.dark-mode) .toolbar button:focus,
html:not(.dark-mode) .menu.toolbar .dropbutton:not(.disabled):hover,
html:not(.dark-mode) .menu.toolbar .dropbutton:not(.disabled):hover *,
html:not(.dark-mode) .menu.toolbar .dropbutton a.dropdown:hover,
html:not(.dark-mode) .menu.toolbar .dropbutton a.dropdown:hover *,
html:not(.dark-mode) .menu.toolbar a:not(.disabled):hover,
html:not(.dark-mode) .menu.toolbar a:not(.disabled):hover *,
html:not(.dark-mode) .menu.toolbar a.refresh:hover,
html:not(.dark-mode) .menu.toolbar a.refresh:hover:before,
html:not(.dark-mode) .menu.toolbar a.refresh:hover span,
html:not(.dark-mode) a.button.icon.refresh:hover,
html:not(.dark-mode) a.button.icon.refresh:hover:before,
html:not(.dark-mode) a.button.icon.refresh:hover span {
  background-color: #5a4de6 !important;
  color: #fff !important;
  background-image: none !important;
}

/* Left sidebar - fully purple */
html:not(.dark-mode) #taskmenu,
html:not(.dark-mode) #taskmenu > *,
html:not(.dark-mode) #layout > .menu,
html:not(.dark-mode) #taskmenu .special-buttons,
html:not(.dark-mode) #taskmenu .special-buttons a {
  background-color: #4632da !important;
}

html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #taskmenu a:before,
html:not(.dark-mode) #taskmenu .special-buttons a:before {
  color: #fff !important;
}

/* Sidebar hover/active - coral red */
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:hover:before,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:before,
html:not(.dark-mode) #taskmenu a:focus,
html:not(.dark-mode) #taskmenu a:focus:before {
  background-color: #fe7b79 !important;
  color: #fff !important;
}

/* Email header - white bg, gray text */
html:not(.dark-mode) .message-partheaders,
html:not(.dark-mode) #message-header .header-content,
html:not(.dark-mode) .message-header,
html:not(.dark-mode) #message-header,
html:not(.dark-mode) .message-headerbox {
  background: #fff !important;
  color: #999 !important;
  border: none !important;
}

html:not(.dark-mode) #message-header .header-title,
html:not(.dark-mode) #message-header .header-title *,
html:not(.dark-mode) .message-partheaders .header-title,
html:not(.dark-mode) .message-partheaders .header-title *,
html:not(.dark-mode) #message-header td,
html:not(.dark-mode) #message-header th,
html:not(.dark-mode) #message-header span,
html:not(.dark-mode) #message-header .fromto,
html:not(.dark-mode) #message-header .fromto *,
html:not(.dark-mode) #message-header .date,
html:not(.dark-mode) #message-header a,
html:not(.dark-mode) .message-partheaders a,
html:not(.dark-mode) .message-headerbox a {
  color: #999 !important;
  background: #fff !important;
}

/* Subject stays black */
html:not(.dark-mode) .message-subject,
html:not(.dark-mode) h2.subject,
html:not(.dark-mode) .subject a {
  color: #000 !important;
}

/* ============ DARK MODE ============ */
html.dark-mode #taskmenu,
html.dark-mode #layout > .menu,
html.dark-mode .header,
html.dark-mode .toolbar {
  background-color: #000 !important;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode .mailbox-list,
html.dark-mode #mailboxlist-container {
  background-color: #0a0a0a !important;
}

html.dark-mode #layout-content,
html.dark-mode .content,
html.dark-mode #messagecontframe,
html.dark-mode body,
html.dark-mode #layout {
  background-color: #000 !important;
}

html.dark-mode .toolbar,
html.dark-mode .header {
  border-color: #1a1a1a !important;
}

/* Sidebar active/hover text background - match coral red */
html:not(.dark-mode) #taskmenu a.selected span,
html:not(.dark-mode) #taskmenu a:hover span,
html:not(.dark-mode) #taskmenu a:focus span {
  background-color: #fe7b79 !important;
  color: #fff !important;
}

/* Fix gray gap in light mode sidebar */
html:not(.dark-mode) #taskmenu,
html:not(.dark-mode) #taskmenu::before,
html:not(.dark-mode) #taskmenu::after,
html:not(.dark-mode) #layout > .menu::before,
html:not(.dark-mode) #layout > .menu::after,
html:not(.dark-mode) #layout > .menu {
  background-color: #4632da !important;
}

/* Force entire left column purple */
html:not(.dark-mode) #layout > :first-child,
html:not(.dark-mode) #layout > .content-frame-navigation,
html:not(.dark-mode) #layout > div:first-child {
  background-color: #4632da !important;
}

/* Unread count badge - purple background */
.listing .unreadcount,
.badge,
#mailboxlist .unreadcount {
  background-color: #4632da !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 2px 6px !important;
}

/* Unread badge stays purple even on selected/active items */
.listing li.selected .unreadcount,
.listing li.focused .unreadcount,
#mailboxlist li.selected .unreadcount,
#mailboxlist li.selected > a .unreadcount {
  background-color: #4632da !important;
  color: #fff !important;
}

/* Dark mode - bottom buttons pure black */
html.dark-mode #taskmenu .special-buttons,
html.dark-mode #taskmenu .special-buttons a,
html.dark-mode #taskmenu .special-buttons a:before,
html.dark-mode #taskmenu > :last-child,
html.dark-mode #layout > .menu > :last-child {
  background-color: #000 !important;
}

/* Logo area - white background in light mode */
html:not(.dark-mode) #taskmenu a.logo,
html:not(.dark-mode) #taskmenu .logo-container,
html:not(.dark-mode) #taskmenu > a:first-child {
  background-color: #fff !important;
}

/* Logo area - white background in light mode */
html:not(.dark-mode) #layout-menu > .popover-header,
html:not(.dark-mode) #layout-menu .popover-header {
  background-color: #fff !important;
}

/* Hide skin selector in settings */
#rcmfd_skin,
.propform tr:has(#rcmfd_skin),
select[name="_skin"],
.skin-select,
tr.skin,
fieldset.skin {
  display: none !important;
}