/* ============================================================
   Lawdex Email — Scarlet Edge Brand Skin
   CSS overlay on Roundcube 1.6.x Elastic skin

   Selectors verified against live DOM at webmail.cloudvaultbox.com
   via curl inspection of HTML structure and compiled styles.min.css

   Palette (Scarlet Edge):
     Pure White     #FFFFFF
     Vivid Red      #FF0033
     Deep Crimson   #33040E
     Dark Charcoal  #2D2D2D
     Ash Gray       #696969
     Blush Pink     #FFF0F2
     Warm Red       #C41230
     Light Silver   #E9E9E9
     Soft Gray      #F4F4F4
   ============================================================ */


/* =============================================================
   1. LOGIN PAGE
   Verified: body.task-login, #layout-content.selected.no-navbar,
   <img id="logo" src="skins/elastic/plugins/lawdex_theme/images/logo.svg">,
   <button class="button mainaction submit">
   ============================================================= */

/* Login background — deep crimson */
body.task-login #layout-content,
#layout-content.login,
#layout.login #layout-content {
  background: #33040E !important;
}

/* Login card — white with shadow */
#login-form {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* Login button — verified class="button mainaction submit" (NOT btn-primary) */
#login-form .btn-primary,
#login-form button.mainaction,
#login-form input[type="submit"] {
  background: #FF0033 !important;
  border-color: #FF0033 !important;
  color: #FFFFFF !important;
  border-radius: 8px;
}

#login-form .btn-primary:hover,
#login-form button.mainaction:hover,
#login-form input[type="submit"]:hover {
  background: #C41230 !important;
  border-color: #C41230 !important;
}

/* Login logo — red LAWDEX text on white card */
body.task-login #logo,
#layout-content.login #logo,
#layout.login #logo {
  max-height: 48px;
  width: auto;
}


/* =============================================================
   2. LEFT NAVIGATION BAR (#layout-menu / #taskmenu)
   Verified: #layout-menu has Elastic teal background in compiled CSS
   #layout-menu .popover-header has Elastic teal with !important
   #taskmenu .special-buttons has Elastic teal background
   #layout-menu .popover-header img has max-height:58px;max-width:78px
   ============================================================= */

/* Override the Elastic teal with deep crimson #33040E — nuke everything */
#layout-menu,
#layout-menu .popover,
#layout-menu .popover-body,
#layout-menu .popover-header,
#layout-menu .content,
#layout-menu .scroller,
#layout-menu h2,
#layout-menu div,
#layout-menu span,
#taskmenu,
#taskmenu .action-buttons,
#taskmenu .special-buttons {
  background-color: #33040E !important;
  background: #33040E !important;
  border-color: #33040E !important;
}

/* Buttons inside layout-menu: transparent bg by default, inherit crimson */
#taskmenu a,
#taskmenu a.button {
  background-color: transparent !important;
  background: transparent !important;
}

/* Selected task menu button — white icon, NO visible background */
#taskmenu a.selected,
#taskmenu a.button.selected {
  color: #FFFFFF !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* Logo in layout-menu — compact white "L" icon */
#layout-menu #logo,
#layout-menu .popover-header img {
  max-width: 36px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 4px;
}

/* Task menu buttons — white icons on crimson */
#taskmenu a {
  color: #FFFFFF !important;
}

#taskmenu a:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Selected taskmenu — icon stays white, subtle red bg tint */
#taskmenu a.selected {
  color: #FFFFFF !important;
  background-color: rgba(255, 0, 51, 0.15) !important;
}

/* Compose button — white icon like all others (not red)
   Verified: #taskmenu .action-buttons a has Elastic blue in compiled CSS */
#taskmenu a.compose,
#taskmenu .action-buttons a,
#taskmenu .action-buttons a.compose {
  color: #FFFFFF !important;
}

#taskmenu a.compose:hover,
#taskmenu .action-buttons a:hover,
#taskmenu .action-buttons a.compose:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Floating action button (mobile compose)
   Verified: .floating-action-buttons a.button has Elastic blue background */
.floating-action-buttons a.button {
  background-color: #FF0033 !important;
  border-color: #FF0033 !important;
  box-shadow: 0 0 5px 5px rgba(255, 0, 51, 0.1) !important;
}

.floating-action-buttons a.button:hover {
  background-color: #C41230 !important;
  border-color: #C41230 !important;
}

/* Task menu label text — clean white, no background box */
#taskmenu a .inner {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Task menu links — no background at all (clean text on crimson) */
#taskmenu a,
#taskmenu a.button {
  background: transparent !important;
  background-color: transparent !important;
}

/* Bottom links in layout-menu
   Verified: #taskmenu .special-buttons has Elastic teal background */
#taskmenu .special-buttons {
  background-color: #33040E !important;
}

#layout-menu .footer,
#layout-menu > .footer {
  background: #33040E !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

#layout-menu .footer a,
#layout-menu .special-buttons a,
#layout-menu a.about,
#layout-menu a.logout,
#taskmenu a.logout,
#taskmenu a.about {
  color: #FFFFFF !important;
}

/* Bottom buttons hover — subtle lighten, no red */
#layout-menu .footer a:hover,
#layout-menu .special-buttons a:hover,
#taskmenu a.logout:hover,
#taskmenu a.about:hover,
#taskmenu a.theme:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Hide Dark mode toggle and About button from taskmenu.
   Upstream menu.html: <a class="theme dark"> for dark mode, <a class="about"> for about.
   display:none removes from a11y tree + tab order (per WebAIM) — no aria-hidden needed.
   Logout (a.logout) is unaffected. */
#taskmenu a.theme,
#taskmenu a.about,
#layout-menu a.theme,
#layout-menu a.about,
#layout-menu .darkmode,
#layout-menu a.darkmode {
  display: none !important;
}

/* Drag layer — verified: #rcmdraglayer has Elastic teal background */
#rcmdraglayer {
  background-color: #33040E !important;
}


/* =============================================================
   3. SIDEBAR (#layout-sidebar) — folder list panel
   Verified: #layout-sidebar has background-color:#fff in compiled CSS
   Per brand spec D-14: sidebar uses deep crimson #33040E
   ============================================================= */

/* Sidebar and ALL children must be crimson — scroller/folderlist/footer had white from Elastic */
#layout-sidebar,
#layout-sidebar .scroller,
#layout-sidebar #folderlist-content,
#layout-sidebar .footer,
#layout-sidebar .footer.small,
#layout-sidebar .column-resizer,
#layout-sidebar .listing,
#layout-sidebar ul.treelist,
#layout-sidebar .folderlist,
#layout-sidebar .quota-widget {
  background: #33040E !important;
  background-color: #33040E !important;
}

/* Sidebar header */
#layout-sidebar > .header,
#layout-sidebar .header {
  background: #33040E !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

#layout-sidebar .header .header-title,
#layout-sidebar .header .header-title.username {
  color: #FFFFFF !important;
}

#layout-sidebar .header a,
#layout-sidebar .header a.button {
  color: #FFFFFF !important;
}

/* Sidebar search bar */
#layout-sidebar .searchbar {
  background: #33040E !important;
  border-color: transparent !important;
}

#layout-sidebar .searchbar input {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

#layout-sidebar .searchbar input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Folder list items — white text, no dividing lines */
#layout-sidebar .listing li a,
#layout-sidebar .listing li span,
#layout-sidebar ul.treelist li a,
#layout-sidebar ul.treelist li > div > a,
#layout-sidebar .folderlist li a {
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Remove ALL white borders/dividers between folder items */
#layout-sidebar .listing li,
#layout-sidebar .listing li a,
#layout-sidebar ul.treelist li,
#layout-sidebar ul.treelist li a,
#layout-sidebar .folderlist li,
#layout-sidebar .folderlist li a,
#layout-sidebar .listing,
#layout-sidebar ul.treelist,
#layout-sidebar .folderlist {
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  border-top-color: transparent !important;
}

/* Selected folder — deeper red tint (pilot: rgba(255,0,51,0.2) on crimson) */
#layout-sidebar .listing li.selected > a,
#layout-sidebar .listing li.selected > div > a,
#layout-sidebar ul.treelist li.selected > a,
#layout-sidebar ul.treelist li.selected > div > a,
#layout-sidebar .folderlist li.selected > a {
  background: #550413 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* Folder hover — unselected */
#layout-sidebar .listing li > a:hover,
#layout-sidebar ul.treelist li > a:hover,
#layout-sidebar ul.treelist li > div > a:hover,
#layout-sidebar .folderlist li > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Folder hover — selected: keep dark red, don't flash white */
#layout-sidebar .listing li.selected > a:hover,
#layout-sidebar ul.treelist li.selected > a:hover,
#layout-sidebar ul.treelist li.selected > div > a:hover,
#layout-sidebar .folderlist li.selected > a:hover {
  background: #550413 !important;
}

/* Folder icons — white on dark sidebar */
#layout-sidebar .listing li a::before,
#layout-sidebar ul.treelist li a::before,
#layout-sidebar .folderlist li a::before {
  filter: brightness(0) invert(1);
}

/* Unread count badges — vivid red pill
   Verified: .folderlist li.mailbox .unreadcount has Elastic blue background
   .folderlist li.mailbox.recent>a>.unreadcount has Elastic blue background */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
#layout-sidebar .listing li .unreadcount,
#layout-sidebar ul.treelist li span.unreadcount {
  background: #FF0033 !important;
  color: #FFFFFF !important;
  border-radius: 10px;
  font-weight: 700;
}

/* Sidebar quota display */
#layout-sidebar .quota-widget {
  color: #FFFFFF !important;
}

#layout-sidebar .quota-widget .bar {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Quota widget value — SKIN-08
   Verified: .quota-widget .value has Elastic blue background */
.quota-widget .value {
  background-color: #FF0033 !important;
}

/* Sidebar footer */
#layout-sidebar .footer,
#layout-sidebar > .footer {
  background: #33040E !important;
  border-color: transparent !important;
}

#layout-sidebar .footer a {
  color: #FFFFFF !important;
}

/* Sidebar tree toggle arrows */
#layout-sidebar .treetoggle,
#layout-sidebar ul.treelist li div.treetoggle {
  color: rgba(255, 255, 255, 0.5) !important;
}


/* =============================================================
   4. ALL CONTENT AREA HEADERS & TOOLBARS — PURE WHITE (SKIN-05)
   Verified: #layout>div>.header has background-color:#f4f4f4 in
   compiled CSS (appears TWICE — once base, once in media query)
   #layout>div>.footer has background-color:#f4f4f4
   ============================================================= */

/* Main header selector — exclude sidebar (it's also a direct child of #layout) */
#layout > div:not(#layout-sidebar):not(#layout-menu) > .header {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E9E9E9 !important;
  color: #2D2D2D !important;
}

/* Additional content headers — exclude #layout-sidebar which also has .listbox */
#layout-content > .header,
#layout-list > .header,
#layout-content .header,
#layout-list .header,
.content > .header,
.listbox:not(#layout-sidebar) > .header,
#mailview-top > .header,
#mailview-right > .header {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E9E9E9 !important;
}

/* Search bar area — verified: .searchbar has background-color:#fbfbfb */
.searchbar,
#layout-list .searchbar,
#layout-content .searchbar,
#mailview-top .searchbar {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Toolbar container */
.toolbar,
.menu.toolbar,
#mailtoolbar {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Select button icon — checkbox instead of mouse cursor */
a.select::before,
.toolbar a.select::before,
.menu.toolbar a.select::before {
  content: "\f14a" !important; /* fa-check-square (Font Awesome 5) */
}

/* Toolbar buttons — verified: .menu.toolbar a has color:#2c363a */
.menu.toolbar a,
.menu.toolbar a.button {
  color: #2D2D2D !important;
}

.menu.toolbar a:hover,
.menu.toolbar a.button:hover {
  color: #FF0033 !important;
}

.menu.toolbar a:not(.disabled):hover {
  background-color: #FFF0F2 !important;
}

.menu.toolbar a.selected {
  color: #FF0033 !important;
}

.menu.toolbar a .inner {
  color: inherit !important;
}

/* Header title text — exclude sidebar (Groups, Settings titles should be white) */
#layout > div:not(#layout-sidebar):not(#layout-menu) > .header .header-title,
#layout-list .header .header-title,
#layout-content .header .header-title {
  color: #2D2D2D !important;
}

/* Header buttons — exclude sidebar */
#layout > div:not(#layout-sidebar):not(#layout-menu) > .header a.button,
#layout-list .header a.button,
#layout-content .header a.button {
  color: #2D2D2D !important;
}


/* =============================================================
   5. MESSAGE LIST (#messagelist — NO hyphen)
   Verified: table id is "messagelist" (no hyphen) from Elastic DOM
   ============================================================= */

/* Message list container background */
#messagelist {
  background: #FFFFFF !important;
}

/* Selected row */
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td,
#messagelist tr.selected td {
  background: #FFF0F2 !important;
}

/* Hovered row — blush pink like pilot mockup */
.listing tr:hover td,
#messagelist tr:hover td {
  background: #FFF0F2 !important;
}

/* Selected + hovered */
#messagelist tr.selected:hover td {
  background: #FFF0F2 !important;
}

/* Focus indicator (left border)
   Verified: html:not(.touch) .listing.focus tbody tr.focused>td:first-child
   uses border-left with blue color */
html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td,
html:not(.touch) #messagelist.focus tbody tr.focused > td:first-child {
  border-left-color: #FF0033 !important;
}

/* Column header borders */
#messagelist thead tr td,
.listing thead tr td {
  border-bottom-color: #E9E9E9 !important;
}

/* Alternating rows */
#messagelist tr:nth-child(even) td {
  background: #FAFAFA;
}

#messagelist tr.selected:nth-child(even) td {
  background: #FFF0F2 !important;
}


/* =============================================================
   6. PREVIEW PANE / MESSAGE CONTENT FRAME
   Verified: watermark.html is loaded via blankpage env as
   "skins/elastic/watermark.html" which references images/logo.svg
   CSS cannot cross iframe boundary — watermark handled via
   Dockerfile COPY replacement of skins/elastic/images/logo.svg
   ============================================================= */

#messagecontframe {
  background: #FFFFFF !important;
}

/* Message content area background */
#layout-content .content,
#layout-content .content-frame-wrapper,
.content-frame-wrapper {
  background: #FFFFFF !important;
}


/* =============================================================
   7. BOTTOM STATUS BAR / PAGINATION (SKIN-08)
   Verified: .menu.pagenav is the pagination selector
   .menu.pagenav a has color:#2c363a
   .menu.pagenav .pagenav-text has color:#737677
   .menu.pagenav.pagenav-list has background-color:#fbfbfb
   #layout>div>.footer has background-color:#f4f4f4
   ============================================================= */

/* Footer/status bar — override gray defaults */
#layout > div > .footer,
#layout-list > .footer,
#layout-list .listbox-footer,
.listbox > .footer,
#countcontrols {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-top: 1px solid #E9E9E9 !important;
  color: #2D2D2D !important;
}

/* Pagination nav — verified selector: .menu.pagenav */
.pagenav,
.menu.pagenav,
.menu.pagenav.pagenav-list {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-top: 1px solid #E9E9E9 !important;
  color: #2D2D2D !important;
}

/* Pagenav list expanded companion */
.menu.pagenav.pagenav-list + .navlist {
  background-color: #FFFFFF !important;
}

/* Pagination buttons */
.pagenav a,
.menu.pagenav a,
.pagenav .button,
#countcontrols a {
  color: #2D2D2D !important;
}

.pagenav a:hover,
.menu.pagenav a:hover,
#countcontrols a:hover {
  color: #FF0033 !important;
}

/* Page text */
.pagenav .pagenav-text,
.menu.pagenav .pagenav-text,
.pagenav input {
  color: #696969 !important;
}

/* Message count text */
#countdisplay,
.countdisplay {
  color: #696969 !important;
}


/* =============================================================
   8. PRIMARY BUTTONS & LINKS
   Verified: .btn-primary has Elastic blue background and border
   .btn-primary:focus has Elastic blue background
   .btn-primary:hover has Elastic blue background
   .btn-primary.disabled has Elastic blue background
   ============================================================= */

a {
  color: #FF0033;
}

.btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary {
  background: #FF0033 !important;
  border-color: #FF0033 !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: #C41230 !important;
  border-color: #C41230 !important;
}

.btn-primary:focus {
  background: #C41230 !important;
  border-color: #C41230 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.5) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background: #FF0033 !important;
  border-color: #FF0033 !important;
  opacity: 0.65;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: #C41230 !important;
  border-color: #C41230 !important;
}

/* Link-styled buttons (e.g., "Open in new window") — red, not blue */
.btn-link,
a.btn-link,
a.btn.btn-link {
  color: #FF0033 !important;
  text-decoration-color: #FF0033 !important;
}

.btn-link:hover,
a.btn-link:hover {
  color: #C41230 !important;
  text-decoration-color: #C41230 !important;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none !important;
}

.btn-secondary,
button.btn-secondary {
  border-color: #E9E9E9 !important;
  color: #2D2D2D !important;
}

.btn-secondary:hover,
button.btn-secondary:hover {
  border-color: #FF0033 !important;
  color: #FF0033 !important;
}


/* =============================================================
   9. MESSAGE VIEW
   ============================================================= */

.message-header .header-title {
  color: #2D2D2D;
}

.message-header .header-title a {
  color: #FF0033;
}

#message-objects a {
  color: #FF0033;
}

.message-header,
#message-header {
  background: #FFFFFF !important;
}

/* Message body/content area — white like Gmail, not gray */
#messagebody,
#message-content,
.message-htmlpart,
.message-part,
.message-content,
div.rcmBody,
#layout-content .content,
#layout-content .content-frame-wrapper,
.content-frame-wrapper,
.iframe-wrapper,
#messagecontframe {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}


/* =============================================================
   10. COMPOSE WINDOW
   ============================================================= */

.compose-headers .btn,
#composebody-toolbar button {
  color: #2D2D2D !important;
}

.compose-headers .btn:hover,
#composebody-toolbar button:hover {
  color: #FF0033 !important;
}

/* Toolbar icons in compose/mail — keep dark charcoal, not red */
.menu.toolbar a,
.menu.toolbar a.button {
  color: #2D2D2D !important;
}

#compose-content,
.compose-content {
  background: #FFFFFF !important;
}


/* =============================================================
   11. SETTINGS & LISTS
   ============================================================= */

#sections-table tr.selected td,
.listing.iconized li.selected > a {
  background: #FFF0F2 !important;
  color: #FF0033 !important;
}

.listing.iconized li > a:hover {
  background: #F4F4F4 !important;
}

#sections-table,
.preferences-table {
  background: #FFFFFF !important;
}


/* =============================================================
   12. CONTEXT MENUS / POPUPS / POPOVERS
   Verified: .popupmenu .listing li>a:not(.disabled):hover
   has Elastic blue hover background
   .popupmenu .listing li.selected has Elastic blue background
   .popover .menu li a:not(.disabled):hover has Elastic blue background
   .popover .menu .dropbutton a.dropdown:hover has Elastic blue background
   ============================================================= */

.popupmenu .listing li a:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.popupmenu .listing li.selected > a {
  background: #FFF0F2 !important;
  color: #FF0033 !important;
}

.popupmenu {
  background: #FFFFFF !important;
  border-color: #E9E9E9 !important;
}

/* Popover menus — verified selector from compiled CSS */
.popover .menu li a:not(.disabled):hover {
  color: #FFFFFF !important;
  background-color: #FF0033 !important;
}

.popover .menu .dropbutton a.dropdown:hover {
  background-color: #FF0033 !important;
}


/* =============================================================
   13. DIALOGS / MODALS
   Verified: .ui-dialog .ui-dialog-titlebar has background-color:#f4f4f4
   .ui-dialog .ui-dialog-buttonpane has background-color:#f4f4f4
   ============================================================= */

.ui-dialog .ui-dialog-titlebar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E9E9E9 !important;
  color: #2D2D2D !important;
}

.ui-dialog .ui-dialog-buttonpane {
  background: #FFFFFF !important;
}

.ui-dialog .ui-dialog-buttonpane .btn-primary,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary {
  background: #FF0033 !important;
  border-color: #FF0033 !important;
  color: #FFFFFF !important;
}

/* jQuery UI active states
   Verified: .ui-menu .ui-state-active has Elastic blue background with !important */
.ui-menu .ui-state-active {
  border: 0 !important;
  background-color: #FF0033 !important;
  color: #FFFFFF !important;
}

/* jQuery UI slider
   Verified: .ui-slider .ui-slider-handle.ui-state-active has Elastic blue background */
.ui-slider .ui-slider-handle.ui-state-active {
  background: #FF0033 !important;
  border-color: #C41230 !important;
}

/* jQuery UI datepicker
   Verified: various .ui-datepicker selectors use Elastic blue */
.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
  background: #FFF0F2 !important;
  color: #FF0033 !important;
}

.ui-datepicker a.ui-state-active {
  background: #FF0033 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}


/* =============================================================
   14. TABS (compose, settings)
   ============================================================= */

.tabsbar {
  background: #FFFFFF !important;
}

.tabsbar a.tablink.selected {
  border-bottom-color: #FF0033 !important;
  color: #FF0033 !important;
}

.tabsbar a.tablink:hover {
  color: #FF0033 !important;
}


/* =============================================================
   15. FORM ELEMENTS
   Verified: .formcontent.raweditor .CodeMirror-focused has Elastic blue border
   .multi-input>.content.focused has Elastic blue border
   ============================================================= */

/* Focus ring — kill ALL blue focus outlines */
*:focus-visible {
  outline-color: #FF0033 !important;
}

*:focus {
  outline-color: #FF0033 !important;
}

/* ALL input focus borders — the main source of blue in compose */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
input.form-control:focus,
.custom-select:focus {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
}

/* Bootstrap .form-control focus (Elastic uses Bootstrap 4) */
.form-control:focus {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
}

/* Recipient input container — .focus class is on the parent ul, not input */
.recipient-input.focus,
ul.form-control.focus,
ul.recipient-input.focus,
.recipient-input:focus-within {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
  outline-color: #FF0033 !important;
}

input[type="checkbox"]:checked {
  accent-color: #FF0033;
}

input[type="radio"]:checked {
  accent-color: #FF0033;
}

/* Custom select focus — Bootstrap custom-select uses blue */
.custom-select:focus,
select.form-control:focus,
select:focus {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
}

/* Bootstrap custom checkbox/switch — blue when checked */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #FF0033 !important;
  border-color: #FF0033 !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
  border-color: #FF0033 !important;
}

/* Roundcube custom toggle (switch) — blue dot when enabled */
.switch input:checked + .slider,
.switch input:checked + .slider::before {
  background-color: #FF0033 !important;
}

/* Links inside settings/preferences — red not blue */
.formcontent a:not(.btn),
.propform a:not(.btn),
#preferences-details a:not(.btn),
#identity-details a:not(.btn) {
  color: #FF0033 !important;
}

/* Selection highlight in settings lists */
.listing.iconized li.selected > a,
#sections-table tr.selected td {
  background: #FFF0F2 !important;
  color: #FF0033 !important;
}

#layout-content .searchbar input,
#layout-list .searchbar input {
  border-color: #E9E9E9;
}

#layout-content .searchbar input:focus,
#layout-list .searchbar input:focus {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
}

/* Code editor focus ring */
.formcontent.raweditor .CodeMirror-focused {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
}

/* Multi-input focus (To/Cc/Bcc fields in compose) */
.multi-input > .content.focused,
.multi-input > .content:focus-within {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
}

.progress-bar {
  background: #FF0033 !important;
}

/* --- Kill remaining blue links — scoped, not global --- */

/* Links in compose area, settings, dialogs — NOT message list, NOT buttons */
#compose-content a:not(.btn),
.compose-content a:not(.btn),
#message-objects a:not(.btn),
.formcontent a:not(.btn),
.propform a:not(.btn),
.ui-dialog a:not(.btn),
.message-part a:not(.btn),
.message-htmlpart a:not(.btn),
#message-header a:not(.btn),
.watermark a:not(.btn),
.content-frame-wrapper a:not(.btn),
.footer a:not(#layout-sidebar .footer a):not(#layout-menu .footer a):not(.btn) {
  color: #FF0033 !important;
}

/* Attachment area buttons — green/teal borders to brand red */
.attachmentslist a,
#attachment-list a,
.compose-attachments a,
.droparea,
.file-upload,
.attachmentslist .btn,
.buttons.compose a {
  color: #FF0033 !important;
  border-color: #FF0033 !important;
}

/* Attachment upload area (dashed border box) — brand color */
.file-upload .attachmentslist,
#upload-dialog .hint,
.compose-attachments .hint {
  color: #696969 !important;
}

/* Toggle switches — Elastic uses blue for checked toggles */
.switch input:checked + .slider,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #FF0033 !important;
  border-color: #FF0033 !important;
}

/* Badge/label colors that may be blue */
.badge-primary,
.badge-info {
  background-color: #FF0033 !important;
}


/* =============================================================
   16. BODY & LAYOUT BORDERS
   ============================================================= */

body {
  color: #2D2D2D;
}

/* Layout borders */
#layout,
#layout > div,
.layout > div {
  border-color: #E9E9E9 !important;
}

/* Main content areas — white background */
#layout-content,
#layout-list,
#layout-list .scroller,
#layout-content .scroller {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}


/* =============================================================
   17. CONTACTS PAGE
   ============================================================= */

#directorylist li.selected > a {
  background: #FFF0F2 !important;
  color: #FF0033 !important;
}

#contacts-table tr.selected td {
  background: #FFF0F2 !important;
}


/* =============================================================
   18. ALERTS & NOTIFICATIONS
   Verified: .ui.alert a:not(.btn) has Elastic blue color
   #messagestack .alert-info.information has Elastic blue background
   ============================================================= */

.ui.alert a:not(.btn) {
  color: #FF0033 !important;
}

#messagestack .alert-info.information {
  background-color: #FF0033 !important;
}


/* =============================================================
   19. TINYMCE DIALOGS (compose editor)
   Verified: div.tox .tox-dialog__header has background-color:#f4f4f4
   div.tox .tox-dialog__footer has background-color:#f4f4f4
   ============================================================= */

div.tox .tox-dialog__header {
  background-color: #FFFFFF !important;
}

div.tox .tox-dialog__footer {
  background-color: #FFFFFF !important;
}

/* TinyMCE editor — kill ALL blue borders with maximum specificity */
.tox.tox-tinymce,
.tox-tinymce,
div.tox.tox-tinymce {
  border-color: #E9E9E9 !important;
  outline-color: #FF0033 !important;
}

/* .focused class is added by Roundcube JS, NOT by TinyMCE */
div.tox.focused,
div.tox.tox-tinymce.focused,
.tox-tinymce--focus,
.tox.tox-tinymce--focus,
.tox-tinymce:focus-within,
div.tox.tox-tinymce:focus-within {
  border-color: #FF0033 !important;
  box-shadow: 0 0 0 .2rem rgba(255, 0, 51, 0.25) !important;
  outline-color: #FF0033 !important;
}

.tox .tox-edit-area,
div.tox .tox-edit-area {
  border-color: transparent !important;
  outline: none !important;
}

.tox .tox-edit-area__iframe,
.tox .tox-edit-area__iframe:focus {
  outline: none !important;
  border: none !important;
}

/* TinyMCE toolbar button states */
.tox .tox-tbtn:focus,
.tox .tox-tbtn--enabled,
.tox .tox-tbtn:hover {
  background-color: #FFF0F2 !important;
}

.tox .tox-tbtn--select:focus {
  background-color: #FFF0F2 !important;
}

/* Compose options sidebar ONLY — white text on dark bg.
   SCOPED to #compose-options and sidebar-right to avoid
   breaking Settings, Contacts, and other white-bg pages. */
#compose-options label,
#compose-options .col-form-label,
#layout-sidebar.sidebar-right #compose-options label,
#layout-sidebar.sidebar-right #compose-options .col-form-label {
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

#compose-options,
#compose-options .form-group,
#compose-options .form-check {
  opacity: 1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Compose option dropdowns — black text on white bg */
#compose-options select,
#compose-options input,
#compose-options .custom-select,
#compose-options .form-control {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Settings, Contacts, and all other pages — dark text on white bg */
.formcontent,
.formcontent label,
.formcontent .form-group,
.formcontent .row,
.propform,
.propform label,
.propform td,
#preferences-details,
#preferences-details label,
#identity-details label,
#contact-details,
#contact-frame {
  color: #2D2D2D !important;
  -webkit-text-fill-color: #2D2D2D !important;
}

/* Success/notice toast — brand red instead of green */
#messagestack .notice,
#messagestack .confirmation,
#messagestack div.notice,
#messagestack div.confirmation,
.ui-notification.notice {
  background-color: #FF0033 !important;
  border-color: #C41230 !important;
  color: #FFFFFF !important;
}

/* Error toast stays red (already on-brand) */
#messagestack .error,
#messagestack div.error {
  background-color: #C41230 !important;
  border-color: #33040E !important;
  color: #FFFFFF !important;
}

/* Warning toast — warm red */
#messagestack .warning,
#messagestack div.warning {
  background-color: #C41230 !important;
  border-color: #33040E !important;
  color: #FFFFFF !important;
}

/* Loading/info toast */
#messagestack .loading,
#messagestack div.loading {
  background-color: #2D2D2D !important;
  color: #FFFFFF !important;
}


/* =============================================================
   20. SCROLLBAR (webkit)
   ============================================================= */

#layout-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

#layout-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}


/* =============================================================
   21. RESPONSIVE / MOBILE
   Verified: compiled CSS has separate media queries with
   background-color:#f4f4f4 for headers/footers at mobile sizes
   ============================================================= */

@media screen and (max-width: 768px) {
  #layout-sidebar {
    background: #33040E !important;
  }

  #layout-menu {
    background: #33040E !important;
  }

  /* Mobile header bar — crimson on small screens */
  #layout > div > .header {
    background: #33040E !important;
    color: #FFFFFF !important;
  }

  #layout > div > .header a,
  #layout > div > .header a.button,
  #layout > div > .header .header-title {
    color: #FFFFFF !important;
  }

  /* Mobile footer — white background */
  #layout > div > .footer {
    background: #FFFFFF !important;
    color: #2D2D2D !important;
  }

  /* Mobile menu links */
  .menu a {
    color: #FFFFFF !important;
  }
}

/* Theme color meta tag uses #f4f4f4 by default — override
   in the HTML meta tag is not CSS-accessible, but ensure
   the visual header matches the meta color */