/* =====================================================================
   KenexMail — Roundcube child skin (extends Elastic) — DUAL MODE
   ---------------------------------------------------------------------
   LIGHT MODE : Elastic's stock light theme (white surfaces, dark text)
                + KenexMail brand accents (gradient buttons, blue accent).
   DARK MODE  : full KenexVault dark treatment, scoped html.dark-mode.
   LOGIN      : always dark-branded, both modes (brand moment).
   The dark/light toggle is Elastic's native one and works.
   Brand: blue #1d6fff → cyan #00d4ff · dark base #04060f
   ===================================================================== */

@import "_elastic.css";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ═════════════════════ TOKENS (flip per mode) ═════════════════════ */
:root {
  /* constants */
  --kv-blue:  #1d6fff;
  --kv-cyan:  #00d4ff;
  --kv-grad:  linear-gradient(135deg, #1d6fff 0%, #00d4ff 100%);
  --kv-red:   #ef4444;
  --kv-gold:  #f59e0b;
  --kv-green: #10b981;
  /* light-mode adaptive values (readable on white) */
  --kv-accent:       #1d6fff;
  --kv-accent-soft:  rgba(29,111,255,0.08);
  --kv-focus:        rgba(29,111,255,0.18);
  --kv-glow:         rgba(29,111,255,0.28);
}
html.dark-mode {
  /* dark-mode adaptive values */
  --kv-accent:       #00d4ff;
  --kv-accent-soft:  rgba(0,212,255,0.12);
  --kv-focus:        rgba(0,212,255,0.22);
  --kv-glow:         rgba(0,212,255,0.35);
  /* dark surfaces */
  --kv-bg:      #04060f;
  --kv-bg-1:    #070b16;
  --kv-bg-2:    #0b1120;
  --kv-panel:   #0e1526;
  --kv-panel-2: #121a2e;
  --kv-hover:   #16203a;
  --kv-border:  #1b2438;
  --kv-border-2:#232f49;
  --kv-text:    #e7ebf5;
  --kv-text-2:  #b6bfd4;
  --kv-muted:   #7f8aa3;
  --kv-dim:     #5a647d;
  color-scheme: dark;
}

/* ═════════════════ UNIVERSAL BRAND LAYER (both modes) ═════════════ */

body { font-family: 'DM Sans', system-ui, sans-serif !important; }
* { -webkit-font-smoothing: antialiased; }

::selection { background: var(--kv-accent-soft); }

/* logo */
#logo, img.logo {
  height: 30px !important; width: auto !important;
  filter: drop-shadow(0 2px 8px var(--kv-glow));
}

/* primary buttons → brand gradient (looks right on white and dark) */
.btn-primary, button.btn.btn-primary, input.button.mainaction,
.formbuttons .btn.btn-primary, a.button.primary,
#rcmloginsubmit, button.save, .btn.save {
  background: var(--kv-grad) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(29,111,255,0.30) !important;
}
.btn-primary:hover, #rcmloginsubmit:hover, button.save:hover, .btn.save:hover {
  filter: brightness(1.08);
}

/* unread / count badges → gradient pill */
.unreadcount, span.unreadcount, .badge:not(.bg-secondary) {
  background: var(--kv-grad) !important;
  color: #fff !important;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  border-radius: 999px !important;
}

/* focus ring (inputs) */
input:not([type=checkbox]):not([type=radio]):focus,
textarea:focus, select:focus, .form-control:focus {
  border-color: var(--kv-accent) !important;
  box-shadow: 0 0 0 3px var(--kv-focus) !important;
  outline: none !important;
}

/* selected folder / task — soft tint + accent bar (both modes) */
#mailboxlist li.selected > a,
.listing li.selected > a {
  background: var(--kv-accent-soft) !important;
  box-shadow: inset 3px 0 0 0 var(--kv-accent);
  border-radius: 8px;
}
#taskmenu a.selected,
#taskmenu a.selected:hover {
  background: var(--kv-accent-soft) !important;
  box-shadow: inset 3px 0 0 0 var(--kv-accent);
}

/* unread dot on subjects */
#messagelist tr.unread td.subject { position: relative; }
#messagelist tr.unread td.subject::before {
  content: ''; position: absolute; left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kv-accent);
  box-shadow: 0 0 8px var(--kv-glow);
}

/* selected message row — soft tint (text colors handled per-mode) */
#messagelist tbody tr.selected,
#messagelist tbody tr.selected td {
  background: var(--kv-accent-soft) !important;
}

/* flagged subject */
#messagelist tr.flagged td.subject { color: var(--kv-gold) !important; }

/* search pill */
.searchbar, #quicksearchbar, .search-input, input.search {
  border-radius: 999px !important;
}

/* ═════════════════ DARK MODE — full KenexVault theme ══════════════ */

html.dark-mode, html.dark-mode body {
  background: var(--kv-bg) !important;
  color: var(--kv-text) !important;
}

/* layout regions */
html.dark-mode #layout,
html.dark-mode #layout > .menu,
html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode .content,
html.dark-mode .scroller,
html.dark-mode .contentframe,
html.dark-mode iframe {
  background-color: var(--kv-bg) !important;
  border-color: var(--kv-border) !important;
}
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list { background-color: var(--kv-bg-1) !important; }

/* task rail */
html.dark-mode #layout-menu,
html.dark-mode .task-menu,
html.dark-mode #taskmenu {
  background: linear-gradient(180deg,#070c18 0%,#04060f 100%) !important;
  border-right: 1px solid var(--kv-border) !important;
}
html.dark-mode #taskmenu a { color: var(--kv-muted) !important; }
html.dark-mode #taskmenu a:hover { color: var(--kv-text) !important; }
html.dark-mode #taskmenu a.selected { color: #fff !important; }

/* toolbars / headers */
html.dark-mode .menu,
html.dark-mode .toolbar,
html.dark-mode .header,
html.dark-mode .topbar,
html.dark-mode .footer,
html.dark-mode #layout .header,
html.dark-mode .boxtitle,
html.dark-mode .pagenav,
html.dark-mode .messageheaderbox,
html.dark-mode .uibox .boxtitle {
  background-color: var(--kv-bg-1) !important;
  border-color: var(--kv-border) !important;
  color: var(--kv-text) !important;
}
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode .boxtitle, html.dark-mode .header-title,
html.dark-mode .listing-title { color: var(--kv-text) !important; }

/* toolbar buttons */
html.dark-mode a.button,
html.dark-mode .toolbar a.button,
html.dark-mode .menu a.button,
html.dark-mode button.btn:not(.btn-primary):not(.save),
html.dark-mode .btn:not(.btn-primary):not(.save) {
  color: var(--kv-text-2) !important;
  background-color: transparent !important;
}
html.dark-mode a.button:hover,
html.dark-mode .toolbar a.button:hover {
  color: #fff !important;
  background-color: var(--kv-hover) !important;
}
html.dark-mode a.button.selected,
html.dark-mode a.button:active { color: var(--kv-accent) !important; }
html.dark-mode .btn-secondary,
html.dark-mode .btn.cancel,
html.dark-mode a.button.cancel {
  background: var(--kv-panel) !important;
  border: 1px solid var(--kv-border-2) !important;
  color: var(--kv-text-2) !important;
}

/* folder list */
html.dark-mode #mailboxlist li a,
html.dark-mode .listing li a,
html.dark-mode .treelist li a { color: var(--kv-text-2) !important; }
html.dark-mode #mailboxlist li a:hover,
html.dark-mode .listing li a:hover {
  background: var(--kv-hover) !important;
  color: #fff !important;
  border-radius: 8px;
}
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .listing li.selected > a { color: #fff !important; }
html.dark-mode #mailboxlist li.unread > a { color: #fff !important; font-weight: 600; }

/* message list */
html.dark-mode #messagelist,
html.dark-mode table.messagelist { background: transparent !important; color: var(--kv-text-2) !important; }
html.dark-mode #messagelist thead th,
html.dark-mode .messagelist thead th,
html.dark-mode table.listing thead td {
  background: var(--kv-bg-1) !important;
  color: var(--kv-muted) !important;
  border-color: var(--kv-border) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
}
html.dark-mode #messagelist tbody tr,
html.dark-mode .messagelist tbody tr {
  background: transparent !important;
  border-bottom: 1px solid var(--kv-border) !important;
  color: var(--kv-text-2) !important;
}
html.dark-mode #messagelist tbody tr:hover { background: var(--kv-hover) !important; }
html.dark-mode #messagelist td,
html.dark-mode #messagelist td.subject span,
html.dark-mode #messagelist td.subject span a { color: var(--kv-text-2) !important; }
html.dark-mode #messagelist td.date { color: var(--kv-muted) !important; }
html.dark-mode #messagelist tr.unread td,
html.dark-mode #messagelist tr.unread td a,
html.dark-mode #messagelist tr.unread td.subject span a { color: #fff !important; font-weight: 600; }
html.dark-mode #messagelist tr.selected td,
html.dark-mode #messagelist tr.selected td a { color: #fff !important; }
html.dark-mode .messagelist .flag,
html.dark-mode .messagelist .status { color: var(--kv-muted) !important; }

/* reading pane */
html.dark-mode .message-partheaders,
html.dark-mode .message-headers,
html.dark-mode #messageheader,
html.dark-mode .messageheaderbox {
  background: var(--kv-bg-1) !important;
  border-color: var(--kv-border) !important;
  color: var(--kv-text) !important;
  border-radius: 12px;
}
html.dark-mode .message-headers td.header,
html.dark-mode .rcmContactAddress a,
html.dark-mode a.rcmaddcontact { color: var(--kv-text-2) !important; }
html.dark-mode .message-headers .rcmContactAddress a:hover { color: var(--kv-accent) !important; }
/* A1: message body = light "document card" in dark mode (Outlook-style). */
html.dark-mode #messagecontent {
  background: var(--kv-bg) !important;
  padding: 16px !important;
}
html.dark-mode #messagebody,
html.dark-mode .message-part,
html.dark-mode .messagecontent {
  background: #ffffff !important;
  color: #16223a !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}
html.dark-mode .message-part pre { color: var(--kv-text) !important; }
html.dark-mode blockquote {
  border-left: 3px solid var(--kv-blue) !important;
  color: var(--kv-text-2) !important;
}

/* attachments */
html.dark-mode .attachmentslist li,
html.dark-mode #attachment-list li,
html.dark-mode .attachmentslist a {
  background: var(--kv-panel) !important;
  border: 1px solid var(--kv-border-2) !important;
  color: var(--kv-text-2) !important;
  border-radius: 8px;
}
html.dark-mode .attachmentslist li:hover { border-color: var(--kv-accent) !important; color: #fff !important; }

/* compose */
html.dark-mode .compose-headers,
html.dark-mode #composeview-left,
html.dark-mode .composeoptions,
html.dark-mode #compose-content {
  background: var(--kv-bg-1) !important;
  border-color: var(--kv-border) !important;
}
html.dark-mode .recipient-input,
html.dark-mode .compose-recipient { background: var(--kv-panel) !important; }
html.dark-mode .recipient-input .recipient {
  background: var(--kv-accent-soft) !important;
  color: #fff !important; border-radius: 999px;
}
html.dark-mode .mce-panel, html.dark-mode .mce-toolbar,
html.dark-mode .mce-edit-area, html.dark-mode .mce-tinymce,
html.dark-mode textarea#composebody {
  background: var(--kv-panel) !important;
  border-color: var(--kv-border) !important;
  color: var(--kv-text) !important;
}

/* inputs / forms */
html.dark-mode input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
html.dark-mode .ac-input {
  background: var(--kv-panel) !important;
  border: 1px solid var(--kv-border-2) !important;
  color: var(--kv-text) !important;
  border-radius: 8px !important;
}
html.dark-mode ::placeholder { color: var(--kv-dim) !important; }
html.dark-mode label,
html.dark-mode .col-form-label,
html.dark-mode legend { color: var(--kv-text-2) !important; }

/* settings */
html.dark-mode .propform, html.dark-mode .formcontent,
html.dark-mode fieldset, html.dark-mode .boxpad {
  background-color: transparent !important;
  border-color: var(--kv-border) !important;
  color: var(--kv-text-2) !important;
}
html.dark-mode .settings #settings-menu a.selected {
  background: var(--kv-accent-soft) !important; color: #fff !important;
}

/* dialogs / popups */
html.dark-mode .ui-dialog, html.dark-mode .popupmenu,
html.dark-mode .popover, html.dark-mode .ui-menu,
html.dark-mode .toolbarmenu {
  background: var(--kv-panel) !important;
  border: 1px solid var(--kv-border-2) !important;
  color: var(--kv-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
html.dark-mode .popupmenu li a,
html.dark-mode .toolbarmenu li a { color: var(--kv-text-2) !important; }
html.dark-mode .popupmenu li a:hover,
html.dark-mode .toolbarmenu li a:hover {
  background: var(--kv-hover) !important; color: #fff !important;
}

/* search bar colors */
html.dark-mode .searchbar, html.dark-mode #quicksearchbar,
html.dark-mode .search-input, html.dark-mode input.search {
  background: var(--kv-panel) !important;
  border: 1px solid var(--kv-border-2) !important;
}

/* toasts */
html.dark-mode .toast.success, html.dark-mode .toast.confirmation {
  background: rgba(16,185,129,.15) !important; color: #7ff0c8 !important;
  border: 1px solid rgba(16,185,129,.4) !important;
}
html.dark-mode .toast.error {
  background: rgba(239,68,68,.15) !important; color: #ffb4b4 !important;
  border: 1px solid rgba(239,68,68,.4) !important;
}
html.dark-mode .toast.warning {
  background: rgba(245,158,11,.15) !important; color: #ffd591 !important;
  border: 1px solid rgba(245,158,11,.4) !important;
}

/* links + borders */
html.dark-mode a:not(.button):not(.btn) { color: var(--kv-accent); }
html.dark-mode a:not(.button):not(.btn):hover { color: #67e3ff; }
html.dark-mode hr, html.dark-mode .separator,
html.dark-mode td, html.dark-mode th { border-color: var(--kv-border) !important; }

/* scrollbars */
html.dark-mode * { scrollbar-width: thin; scrollbar-color: #22314f transparent; }
html.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #22314f; border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
html.dark-mode ::-webkit-scrollbar-track { background: transparent; }

/* empty mailbox watermark — dim on dark only */
html.dark-mode .watermark,
html.dark-mode #layout-content .watermark {
  opacity: 0.15 !important;
  filter: brightness(0.6) contrast(0.8) !important;
}

/* ── replace Roundcube empty-state watermark with KenexMail mark ── */
.watermark {
  background: url(../images/kenexmail-mark.png) center no-repeat !important;
  background-size: 200px auto !important;
  opacity: 0.9 !important;
  filter: none !important;
}
.watermark > * { display: none !important; }   /* hide the stock graphic */
html.dark-mode .watermark {
  opacity: 0.85 !important;
  filter: drop-shadow(0 8px 30px rgba(0,212,255,0.25)) !important;
}

/* ── single unread indicator: drop custom dot, brand Elastic's ── */
#messagelist tr.unread td.subject::before {
  content: none !important;
  display: none !important;
}
#messagelist span.msgicon.status,
.messagelist span.msgicon.status,
#messagelist td.subject span.status {
  color: var(--kv-accent) !important;
}

/* ═════════════ LOGIN — LIGHT PREMIUM (KenexMail) ═════════════ */
body.task-login, body.action-login,
html.dark-mode body.task-login, html.dark-mode body.action-login {
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(29,111,255,.07), transparent 60%),
    radial-gradient(800px 520px at 105% 108%, rgba(0,212,255,.08), transparent 55%),
    linear-gradient(160deg,#f8fbff 0%,#eef3fb 60%,#eaf7ff 100%) !important;
}
body.task-login #layout, body.task-login .content, body.task-login #layout-content,
html.dark-mode body.task-login #layout, html.dark-mode body.task-login .content,
html.dark-mode body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-menu { display: none !important; }

/* big full logo above the card */
body.task-login #logo, body.task-login img.logo {
  display: block; margin: 4vh auto 22px;
  height: 170px !important; width: auto !important; max-width: 80vw;
  filter: drop-shadow(0 10px 26px rgba(29,111,255,.16));
}

/* white card */
#login-form, .task-login .formcontent {
  max-width: 430px !important;
  background: #ffffff !important;
  border: 1px solid #e3e9f4 !important;
  border-radius: 22px !important;
  padding: 36px 36px 28px !important;
  box-shadow: 0 24px 60px rgba(23,43,99,.10), 0 2px 8px rgba(23,43,99,.05) !important;
  backdrop-filter: none !important;
}
#login-form .box-inner { background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; }

#login-form::before {
  content: 'Welcome back';
  display: block; text-align: center;
  font-size: 19px; font-weight: 700; color: #16223a;
  margin-bottom: 22px;
}
#login-form::after {
  content: '\00a9 2026 KenexVault (Pty) Ltd \00b7 Secure business email';
  display: block; text-align: center;
  font-size: 12px; color: #8b97ad; margin-top: 20px;
}

#login-form label {
  font-size: 13px; font-weight: 600; color: #33415c !important;
  margin-bottom: 6px; display: block; text-transform: none;
}
#login-form .form-group { margin-bottom: 14px !important; }

/* clean fields: drop Elastic's icon squares */
#login-form .input-group-text, #login-form .input-group-prepend,
#login-form .input-group-append { display: none !important; }
#login-form .input-group { display: block !important; }

#login-form input[type=text], #login-form input[type=password],
#rcmloginuser, #rcmloginpwd, #rcmloginhost {
  width: 100% !important; padding: 13px 14px !important; font-size: 15px !important;
  background: #f7f9fd !important; border: 1px solid #d8e0ef !important;
  border-radius: 12px !important; color: #16223a !important;
}
#login-form input::placeholder { color: #9aa6bd !important; }
#login-form input:focus {
  background: #fff !important; border-color: #1d6fff !important;
  box-shadow: 0 0 0 4px rgba(29,111,255,.13) !important;
}

#rcmloginsubmit, #login-form input[type=submit], #login-form .btn-primary {
  width: 100% !important; margin-top: 14px !important;
  padding: 14px !important; font-size: 15px !important; font-weight: 600 !important;
  border-radius: 12px !important; border: none !important; color: #fff !important;
  background: linear-gradient(135deg,#1d6fff 0%,#00b8ff 100%) !important;
  box-shadow: 0 10px 24px rgba(29,111,255,.26) !important;
  transition: filter .15s ease;
}
#rcmloginsubmit:hover { filter: brightness(1.06); }

/* no Roundcube self-branding */
body.task-login .productname, body.task-login #bottomline, body.task-login .homelink,
body.task-login .support-link, body.task-login .minoritext,
#login-form .productname, #login-form .support-link { display: none !important; }

body.task-login .toast, body.task-login #message .box, body.task-login #messagestack .notice, body.task-login #messagestack .error, body.task-login #messagestack .warning, body.task-login #messagestack .confirmation {
  max-width: 430px; margin: 0 auto 14px; border-radius: 12px !important;
}
/* login toast visibility — light bg */
body.task-login #messagestack .notice, body.task-login #messagestack .confirmation {
  background: rgba(16,185,129,0.12) !important; color: #065f46 !important;
  border: 1px solid rgba(16,185,129,0.4) !important; font-weight: 500;
}
body.task-login #messagestack .error {
  background: rgba(239,68,68,0.10) !important; color: #991b1b !important;
  border: 1px solid rgba(239,68,68,0.35) !important; font-weight: 500;
}
body.task-login #messagestack .warning {
/* login loading text */
body.task-login #messagestack .loading, body.task-login #messagestack div {
  background: rgba(29,111,255,0.08) !important; color: #1e40af !important;
  border: 1px solid rgba(29,111,255,0.25) !important; font-weight: 500;
  border-radius: 12px !important; max-width: 430px; margin: 0 auto 14px;
}
  background: rgba(245,158,11,0.10) !important; color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.35) !important; font-weight: 500;
}

/* ═════════ LIGHT MODE — PREMIUM POLISH (match login) ═════════ */

/* brand rail: dark navy in BOTH modes */
#layout-menu, #taskmenu, .task-menu {
  background: linear-gradient(180deg,#0b1224 0%,#070b16 100%) !important;
  border-right: 1px solid #10182b !important;
}
#taskmenu a { color:#7f8aa3 !important; }
#taskmenu a:hover { color:#ffffff !important; }
#taskmenu a.selected, #taskmenu a.selected:hover {
  color:#ffffff !important;
  background: rgba(0,212,255,.10) !important;
  box-shadow: inset 3px 0 0 0 #00d4ff;
}

/* canvas + columns */
html:not(.dark-mode) body, html:not(.dark-mode) #layout { background:#f3f6fc !important; }
html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list { background:#ffffff !important; border-color:#e6ebf5 !important; }
html:not(.dark-mode) #layout-content { background:#ffffff !important; }

/* headers / toolbars */
html:not(.dark-mode) .header, html:not(.dark-mode) .toolbar,
html:not(.dark-mode) .menu, html:not(.dark-mode) .boxtitle,
html:not(.dark-mode) .pagenav, html:not(.dark-mode) .footer {
  background:#ffffff !important; border-color:#e6ebf5 !important; color:#16223a !important;
}
html:not(.dark-mode) a.button,
html:not(.dark-mode) .toolbar a.button { color:#33415c !important; }
html:not(.dark-mode) a.button:hover { background:#f1f5fc !important; color:#16223a !important; }
html:not(.dark-mode) a.button.selected { color:#1d6fff !important; }

/* search */
html:not(.dark-mode) .searchbar, html:not(.dark-mode) #quicksearchbar,
html:not(.dark-mode) input.search {
  background:#f4f7fc !important; border:1px solid #dfe6f2 !important;
}

/* folders */
html:not(.dark-mode) #mailboxlist li a,
html:not(.dark-mode) .listing li a { color:#33415c !important; }
html:not(.dark-mode) #mailboxlist li a:hover { background:#f1f5fc !important; color:#16223a !important; border-radius:8px; }
html:not(.dark-mode) #mailboxlist li.selected > a { color:#1d6fff !important; font-weight:600; }
html:not(.dark-mode) #mailboxlist li.unread > a { color:#16223a !important; font-weight:700; }

/* message list */
html:not(.dark-mode) #messagelist thead th { background:#ffffff !important; color:#8b97ad !important; border-color:#e6ebf5 !important; }
html:not(.dark-mode) #messagelist tbody tr { border-bottom:1px solid #eef2f8 !important; color:#33415c !important; }
html:not(.dark-mode) #messagelist tbody tr:hover { background:#f4f7fd !important; }
html:not(.dark-mode) #messagelist td,
html:not(.dark-mode) #messagelist td.subject span,
html:not(.dark-mode) #messagelist td.subject span a { color:#33415c !important; }
html:not(.dark-mode) #messagelist td.date { color:#9aa6bd !important; }
html:not(.dark-mode) #messagelist tr.unread td,
html:not(.dark-mode) #messagelist tr.unread td a { color:#16223a !important; font-weight:700; }

/* reading pane */
html:not(.dark-mode) #messageheader, html:not(.dark-mode) .message-headers {
  background:#f7f9fd !important; border:1px solid #e6ebf5 !important; border-radius:12px;
}
html:not(.dark-mode) #messagebody,
html:not(.dark-mode) .message-part { color:#16223a !important; }

/* attachments */
html:not(.dark-mode) .attachmentslist li, html:not(.dark-mode) #attachment-list li {
  background:#f7f9fd !important; border:1px solid #d8e0ef !important; color:#33415c !important; border-radius:8px;
}

/* inputs match the login fields */
html:not(.dark-mode) input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html:not(.dark-mode) textarea, html:not(.dark-mode) select,
html:not(.dark-mode) .form-control {
  background:#f7f9fd !important; border:1px solid #d8e0ef !important;
  color:#16223a !important; border-radius:10px !important;
}
html:not(.dark-mode) label, html:not(.dark-mode) .col-form-label { color:#33415c !important; }

/* compose */
html:not(.dark-mode) .compose-headers, html:not(.dark-mode) #compose-content,
html:not(.dark-mode) .composeoptions { background:#ffffff !important; border-color:#e6ebf5 !important; }
html:not(.dark-mode) textarea#composebody { background:#ffffff !important; }

/* dialogs / popups */
html:not(.dark-mode) .ui-dialog, html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .toolbarmenu {
  background:#ffffff !important; border:1px solid #e3e9f4 !important;
  border-radius:12px !important; color:#16223a !important;
  box-shadow:0 18px 48px rgba(23,43,99,.14) !important;
}
html:not(.dark-mode) .popupmenu li a:hover { background:#f1f5fc !important; }

/* scrollbars */
html:not(.dark-mode) * { scrollbar-width:thin; scrollbar-color:#c9d4e8 transparent; }
html:not(.dark-mode) ::-webkit-scrollbar-thumb { background:#c9d4e8; border-radius:8px; }

/* ═══ LOGIN TOASTS — CATCH-ALL VISIBILITY ═══ */
body.task-login #messagestack,
body.task-login #messagestack > * {
  background: rgba(29,111,255,0.08) !important;
  color: #1e3a5f !important;
  border: 1px solid rgba(29,111,255,0.25) !important;
  border-radius: 12px !important;
  max-width: 430px !important;
  margin: 8px auto !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
body.task-login #messagestack > .error {
  background: rgba(239,68,68,0.10) !important;
  color: #991b1b !important;
  border-color: rgba(239,68,68,0.35) !important;
}
body.task-login #messagestack > .warning {
  background: rgba(245,158,11,0.10) !important;
  color: #92400e !important;
  border-color: rgba(245,158,11,0.35) !important;
}
body.task-login #messagestack > .confirmation,
body.task-login #messagestack > .notice {
  background: rgba(16,185,129,0.12) !important;
  color: #065f46 !important;
  border-color: rgba(16,185,129,0.4) !important;
}

/* fix double border — parent container should be invisible */
body.task-login #messagestack {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══ FORCE LIGHT MODE AS DEFAULT ═══ */
/* Override prefers-color-scheme: dark — only apply dark when user explicitly toggles */
@media (prefers-color-scheme: dark) {
  html:not(.dark-mode) body,
  html:not(.dark-mode) #layout { background: #f3f6fc !important; }
  html:not(.dark-mode) #layout-content,
  html:not(.dark-mode) .content,
  html:not(.dark-mode) .scroller { background: #ffffff !important; color: #16223a !important; }
}


/* Dark mode message view: single light surface, no nested frames. */
html.dark-mode #messagecontent,
html.dark-mode .messagecontent {
  background: var(--kv-bg-1) !important;
  padding: 16px !important;
}
html.dark-mode .rcmBody {
  background: #ffffff !important;
  color: #16223a !important;
  border-radius: 0 !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}
html.dark-mode .message-htmlpart,
html.dark-mode div[id^="message-htmlpart"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* Square off the message reading-pane container (override Elastic's radius) */
html.dark-mode #messagecontent,
html.dark-mode .messagecontent,
html.dark-mode #messagepreview,
html.dark-mode .uibox.messageview,
html.dark-mode #message-content {
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE FIXES  (append to end of styles.css)
   1. Input text always black — beats browser autofill (-webkit-text-fill-color)
   2. Toasts: solid high-contrast (replaces the washed-out rgba 0.08–0.12 sets)
   3. Toast SVG icons made explicitly visible
   Scoped to body.task-login so in-app toasts are untouched.
   Placed last => wins the cascade over blocks at 516 and 635.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. INPUT TEXT: force black in every state, including autofill ── */
body.task-login #login-form input[type=text],
body.task-login #login-form input[type=password],
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd,
body.task-login #rcmloginhost {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;  /* the key: overrides autofill paint */
  caret-color: #0f172a !important;
  opacity: 1 !important;
}
/* Chrome autofill repaints bg yellow/white + text; pin both */
body.task-login #login-form input:-webkit-autofill,
body.task-login #login-form input:-webkit-autofill:hover,
body.task-login #login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  -webkit-box-shadow: 0 0 0 1000px #f7f9fd inset !important;  /* keep your field bg */
  caret-color: #0f172a !important;
  transition: background-color 9999s ease-in-out 0s;           /* freeze autofill bg flash */
}
body.task-login #login-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset,
                      0 0 0 4px rgba(29,111,255,.13) !important; /* preserve focus ring */
}
/* placeholder stays soft grey (unchanged intent), but ensure it's not the same as text */
body.task-login #login-form input::placeholder {
  color: #9aa6bd !important;
  -webkit-text-fill-color: #9aa6bd !important;
  opacity: 1 !important;
}

/* ── 2. TOASTS: solid, high-contrast card + strong colored accent ── */
/* Parent container stays invisible (matches existing intent at 664). */
body.task-login #messagestack {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Each toast: SOLID white card, dark text, thick colored left bar, real shadow. */
body.task-login #messagestack > div,
body.task-login #messagestack .notice,
body.task-login #messagestack .confirmation,
body.task-login #messagestack .error,
body.task-login #messagestack .warning,
body.task-login #messagestack .loading {
  background: #ffffff !important;
  color: #0f172a !important;                       /* near-black text, always readable */
  border: 1px solid #e2e8f0 !important;
  border-left-width: 5px !important;               /* colored accent bar */
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.14) !important;
  max-width: 430px !important;
  margin: 8px auto !important;
  padding: 13px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* Type accents (left bar + subtle tint, but background stays solid white-ish) */
body.task-login #messagestack > .confirmation,
body.task-login #messagestack .confirmation,
body.task-login #messagestack > .notice,
body.task-login #messagestack .notice {
  border-left-color: #10b981 !important;           /* green */
}
body.task-login #messagestack > .error,
body.task-login #messagestack .error {
  border-left-color: #ef4444 !important;           /* red */
  color: #7f1d1d !important;
}
body.task-login #messagestack > .warning,
body.task-login #messagestack .warning {
  border-left-color: #f59e0b !important;           /* amber */
  color: #78350f !important;
}
body.task-login #messagestack .loading {
  border-left-color: #1d6fff !important;           /* blue */
  color: #1e3a8a !important;
}

/* ── 3. TOAST ICONS (SVG or img) — make them solid, sized, visible ── */
body.task-login #messagestack svg,
body.task-login #messagestack .icon,
body.task-login #messagestack img {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  opacity: 1 !important;
}
body.task-login #messagestack svg,
body.task-login #messagestack svg * {
  fill: currentColor !important;                   /* icon takes the toast's text color */
  stroke: currentColor !important;
  color: inherit !important;
}
body.task-login #messagestack .confirmation svg,
body.task-login #messagestack .notice svg { color: #10b981 !important; }
body.task-login #messagestack .error svg    { color: #ef4444 !important; }
body.task-login #messagestack .warning svg  { color: #f59e0b !important; }
body.task-login #messagestack .loading svg  { color: #1d6fff !important; }

/* ── Toolbar logo: larger, stays within the bar ── */
#logo, img.logo {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
}

/* ── Toolbar logo: larger, stays within the bar ── */
#logo, img.logo {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
}