/* ==========================================================================
   IBCSC Webmail — thin accent layer over Elastic's native dark mode.
   Elastic dark provides the polished base; here we only shift the accent
   from Elastic blue (#37beff / #00acff) to IBCSC cyan (#11bfff) + green,
   sharpen corners, and brand a few surfaces. Scoped to html.dark-mode.
   ========================================================================== */

:root {
    --ib-cyan: #11bfff;
    --ib-cyan-soft: #5dd6ff;
    --ib-cyan-deep: #0a86c4;
    --ib-green: #8eea35;
    --ib-ink: #00131e;
    --ib-glow: rgba(17, 191, 255, .12);
    --ib-glow-soft: rgba(17, 191, 255, .07);
}

/* Bootstrap primary variable used across dialogs/buttons */
html.dark-mode { --primary: #11bfff; }

/* ---- Accent text (links, folder/task accents, icons) ---- */
html.dark-mode a { color: var(--ib-cyan); }
html.dark-mode a:hover { color: var(--ib-cyan-soft); }
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .folderlist li.selected > a { color: var(--ib-cyan-soft) !important; }

/* ---- Selected task / folder: cyan tint + left bar (was grey #374549) ---- */
html.dark-mode #taskmenu a.selected,
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .listing li.selected > a,
html.dark-mode table.listing tbody tr.selected > td {
    background-color: var(--ib-glow) !important;
    box-shadow: inset 2px 0 0 0 var(--ib-cyan);
}
html.dark-mode #taskmenu a.selected { color: var(--ib-cyan-soft) !important; }

/* ---- Compose button: filled cyan (brand action) ---- */
html.dark-mode #taskmenu a.compose,
html.dark-mode a.button.compose {
    background-color: var(--ib-cyan) !important;
    color: var(--ib-ink) !important;
    border-color: var(--ib-cyan) !important;
}
html.dark-mode #taskmenu a.compose:hover,
html.dark-mode a.button.compose:hover {
    background-color: var(--ib-cyan-soft) !important;
    border-color: var(--ib-cyan-soft) !important;
}

/* ---- Primary / main-action buttons: filled cyan ---- */
html.dark-mode .btn-primary,
html.dark-mode button.btn-primary,
html.dark-mode button.mainaction,
html.dark-mode .formbuttons .btn.mainaction,
html.dark-mode a.button.mainaction {
    background-color: var(--ib-cyan) !important;
    border-color: var(--ib-cyan) !important;
    color: var(--ib-ink) !important;
}
html.dark-mode .btn-primary:hover,
html.dark-mode button.mainaction:hover {
    background-color: var(--ib-cyan-soft) !important;
    border-color: var(--ib-cyan-soft) !important;
    color: var(--ib-ink) !important;
}

/* ---- Sharp corners everywhere ---- */
html.dark-mode .btn,
html.dark-mode button,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog *,
html.dark-mode .contactphoto,
html.dark-mode img.contactphoto,
html.dark-mode .image-attachment,
html.dark-mode .boxtitle,
html.dark-mode .menu.toolbar,
html.dark-mode .listing tbody tr td { border-radius: 0 !important; }

/* ---- Focus ring: IBCSC green ---- */
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode a.button:focus-visible,
html.dark-mode button:focus-visible {
    outline: 2px solid var(--ib-green) !important;
    outline-offset: 1px;
    border-color: var(--ib-cyan) !important;
}

/* ---- Unread messages: green marker + brighter subject ---- */
html.dark-mode #messagelist tr.unread td.subject a,
html.dark-mode #messagelist tr.unread span.subject,
html.dark-mode .messagelist tr.unread .subject {
    color: #f4f7f9 !important;
    font-weight: 600;
}
html.dark-mode #messagelist tr.unread td.flag span,
html.dark-mode #messagelist tr.unread .msgicon,
html.dark-mode .messagelist .unread td.subject::before {
    color: var(--ib-green) !important;
}
/* the leading unread dot Elastic draws */
html.dark-mode .messagelist tr.unread td.subject .msgicon.status,
html.dark-mode .messagelist tr.unread .flagged .flag { color: var(--ib-green) !important; }

/* ---- Toolbar active / hover accents ---- */
html.dark-mode .toolbar a.button.active,
html.dark-mode .toolbar a.active,
html.dark-mode ul.toolbar a.active { color: var(--ib-cyan-soft) !important; }
html.dark-mode .toolbar a.button:hover { color: var(--ib-cyan-soft) !important; }

/* ---- Checkboxes / radios checked → cyan ---- */
html.dark-mode input[type="checkbox"]:checked,
html.dark-mode input[type="radio"]:checked {
    background-color: var(--ib-cyan) !important;
    border-color: var(--ib-cyan) !important;
}

/* ---- Search bar focus accent ---- */
html.dark-mode .searchbar input:focus,
html.dark-mode #searchmenulink.active { color: var(--ib-cyan-soft) !important; }

/* ---- Quota bar → cyan/green gradient ---- */
html.dark-mode .quota .bar,
html.dark-mode .quota-widget .bar { background-image: linear-gradient(90deg, var(--ib-cyan), var(--ib-cyan-soft)) !important; }

/* ---- Message header: sender name / links accent ---- */
html.dark-mode .message-partheaders a,
html.dark-mode #messageheader .rcmContactAddress a { color: var(--ib-cyan) !important; }

/* ---- Login screen: filled cyan button + green focus (Elastic dark base) ---- */
html.dark-mode #login-form button.mainaction,
html.dark-mode #login-form button.btn-primary,
html.dark-mode #login-form button[type="submit"] {
    background-color: var(--ib-cyan) !important;
    border-color: var(--ib-cyan) !important;
    color: var(--ib-ink) !important;
    font-weight: 650;
    letter-spacing: .02em;
}
html.dark-mode #login-form .input-group-text { color: var(--ib-cyan) !important; }

/* ---- Logout stays red (Elastic default) — leave as is ---- */

/* ---- Selection highlight / links in composer ---- */
html.dark-mode ::selection { background: rgba(17, 191, 255, .35); }