/* Load parent elastic skin layout first */
@import url("../../elastic/styles/styles.min.css");

/* S-Tech dark green theme for Roundcube */

:root,html[data-theme='stech']{--st-bg:#060906;--st-bg2:#0c140c;--st-bg3:#111c11;--st-g:#00ff41;--st-g2:#00e639;--st-t1:#e8f5e8;--st-t2:#7aaa7a;--st-t3:#3d6b3d;--st-bd:rgba(0,255,65,.12);--st-bd2:rgba(0,255,65,.22);--st-warn:#ffaa00;--st-danger:#ff5555;}
html[data-theme='light'],html[data-theme='auto']{--st-bg:#eae6df;--st-bg2:#ffffff;--st-bg3:#f0f2f5;--st-g:#00a884;--st-g2:#008f72;--st-t1:#111b21;--st-t2:#3b4a54;--st-t3:#667781;--st-bd:rgba(0,0,0,.10);--st-bd2:rgba(0,0,0,.18);--st-warn:#b8791a;--st-danger:#d3402f;}
html[data-theme='dark']{--st-bg:#0b141a;--st-bg2:#202c33;--st-bg3:#2a3942;--st-g:#00a884;--st-g2:#06cf9c;--st-t1:#e9edef;--st-t2:#aebac1;--st-t3:#8696a0;--st-bd:rgba(255,255,255,.10);--st-bd2:rgba(255,255,255,.18);--st-warn:#ffb454;--st-danger:#f15c6d;}
/* auto = day/night by local clock; dark at night (data-tod set by the stech_theme plugin JS) */
html[data-theme='auto'][data-tod='night']{--st-bg:#0b141a;--st-bg2:#202c33;--st-bg3:#2a3942;--st-g:#00a884;--st-g2:#06cf9c;--st-t1:#e9edef;--st-t2:#aebac1;--st-t3:#8696a0;--st-bd:rgba(255,255,255,.10);--st-bd2:rgba(255,255,255,.18);--st-warn:#ffb454;--st-danger:#f15c6d;}


/* ---- Base -------------------------------------------------- */
html, body {
    background-color: var(--st-bg) !important;
    color: var(--st-t1) !important;
}

/* ---- Main layout panels ------------------------------------ */
#layout,
#layout-list,
#layout-content,
#layout-sidebar {
    background-color: var(--st-bg) !important;
}

#layout-sidebar,
#layout-list {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

#layout-menu {
    background-color: var(--st-bg) !important;
    border-right: 1px solid var(--st-bd) !important;
}

/* layout split borders */
#layout > div + div {
    border-color: var(--st-bd) !important;
}

/* ---- Task menu (left icon bar) — elastic uses #taskmenu ---  */
#layout-menu,
#taskmenu {
    background-color: var(--st-bg) !important;
}

#taskmenu a,
#taskmenu button {
    color: var(--st-t3) !important;
    background: transparent !important;
    border-bottom-color: var(--st-bd) !important;
}

#taskmenu a:hover,
#taskmenu button:hover,
#taskmenu a:focus,
#taskmenu button:focus {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}

/* Active / selected task button */
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu button.selected,
#taskmenu button.selected:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 12%,transparent) !important;
    border-left: 2px solid var(--st-g) !important;
}

/* Compose action button (blue in elastic) */
#taskmenu .action-buttons a,
#taskmenu .action-buttons button {
    color: var(--st-g) !important;
    background: transparent !important;
}
#taskmenu .action-buttons a:hover,
#taskmenu .action-buttons button:hover {
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}

/* Logout stays red-ish as a warning colour */
#taskmenu a.logout,
#taskmenu a.logout:hover {
    color: var(--st-danger) !important;
}

/* Special bottom buttons area */
#taskmenu .special-buttons {
    background-color: var(--st-bg) !important;
    border-top: 1px solid var(--st-bd) !important;
}
#taskmenu .special-buttons a,
#taskmenu .special-buttons button {
    color: var(--st-t3) !important;
    border-bottom: none !important;
}
#taskmenu .special-buttons a:hover,
#taskmenu .special-buttons button:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}

/* Notification badge on task icons */
#taskmenu .button span.badge,
#layout-menu .button span.badge {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
}

/* ---- Toolbars & headers ------------------------------------ */
.toolbar,
#header,
.searchbar,
.pane-header,
.header,
#quicksearchbar,
.content-frame-navigation {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t1) !important;
}

.toolbar a.button,
.toolbar button,
a.button.icon,
button.btn:not(.btn-primary):not(.btn-danger) {
    color: var(--st-t2) !important;
}

.toolbar a.button:hover,
.toolbar button:hover,
a.button.icon:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 6%,transparent) !important;
}

.toolbar a.button.disabled,
.toolbar button.disabled,
.toolbar button[disabled] {
    color: var(--st-t3) !important;
    opacity: 0.5;
}

/* ---- Folder / contact list --------------------------------- */
.folderlist li a,
.listing li a,
.listing td,
.listing tr td {
    color: var(--st-t2) !important;
    background-color: transparent !important;
}

.listing li,
.listing tr {
    border-color: var(--st-bd) !important;
}

.listing li:hover > a,
.listing tr:hover td {
    background-color: color-mix(in srgb,var(--st-g) 4%,transparent) !important;
    color: var(--st-t1) !important;
}

.listing li.selected > a,
.listing tr.selected td,
.listing li.focused > a {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    color: var(--st-g) !important;
}

.folderlist li.selected > a,
.folderlist li > a:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}

/* unread badge on folder */
.folderlist li .unreadcount {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
    font-weight: 700;
}

/* folder sub-item indents */
.folderlist li li a {
    color: var(--st-t3) !important;
}

/* ---- Message list ------------------------------------------ */
.messagelist tr td {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t2) !important;
}

.messagelist tr:hover td {
    background-color: color-mix(in srgb,var(--st-g) 4%,transparent) !important;
}

.messagelist tr.selected td {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    color: var(--st-t1) !important;
}

/* subject column */
.messagelist td.subject a {
    color: var(--st-t2) !important;
}

.messagelist tr.unread td.subject a {
    color: var(--st-t1) !important;
    font-weight: 700;
}

.messagelist tr.selected td.subject a {
    color: var(--st-g) !important;
}

/* secondary info (sender, date) */
.messagelist td.date,
.messagelist td.from,
.messagelist td.to {
    color: var(--st-t3) !important;
}

/* focus indicator line */
.messagelist tr.focused td:first-child {
    border-left-color: var(--st-g) !important;
}

/* flagged */
.messagelist span.flagged:before { color: var(--st-warn) !important; }

/* thread toggle */
.messagelist tr.thread td.threads div:before {
    color: var(--st-t3) !important;
}

/* ---- Message header & content ----------------------------- */
#message-header,
.message-header,
#messageheader {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t1) !important;
}

.message-header .header-title,
#message-header .header-title {
    color: var(--st-t3) !important;
}

#messagecontent {
    background-color: var(--st-bg) !important;
}

/* attachment list — container AND items */
.attachmentslist,
ul.attachmentslist,
div.attachments {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

.attachmentslist li,
ul.attachmentslist li {
    background-color: var(--st-bg3) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t1) !important;
}

/* Inline image-attachment preview block */
p.image-attachment,
div.image-attachment,
.attachment-preview {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

/* Each message part section (wraps attachments + html body) */
.message-part {
    background-color: var(--st-bg) !important;
    border-color: var(--st-bd) !important;
}

/* ---- Compose --------------------------------------------- */
#compose-headers,
.compose-header,
#compose-subject {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

.compose-header label {
    color: var(--st-t3) !important;
}

/* recipient tags */
.recipient-input li.tag,
.tagedit-list li.tagedit-listelement-old {
    background-color: color-mix(in srgb,var(--st-g) 12%,transparent) !important;
    border-color: var(--st-bd2) !important;
    color: var(--st-g) !important;
}

/* ---- Forms & Inputs --------------------------------------- */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select {
    background-color: var(--st-bg2) !important;
    color: var(--st-t1) !important;
    border-color: color-mix(in srgb,var(--st-g) 20%,transparent) !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
    border-color: var(--st-g) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--st-t3) !important;
}

/* input group addon */
.input-group-text,
.input-group span.icon {
    background-color: var(--st-bg3) !important;
    border-color: color-mix(in srgb,var(--st-g) 20%,transparent) !important;
    color: var(--st-t3) !important;
}

/* checkboxes */
input[type=checkbox], input[type=radio] {
    accent-color: var(--st-g) !important;
}

/* form labels */
label, .form-group label {
    color: var(--st-t2) !important;
}

.form-control-plaintext {
    color: var(--st-t1) !important;
}

/* ---- Buttons ---------------------------------------------- */
.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary {
    background-color: var(--st-g) !important;
    border-color: var(--st-g) !important;
    color: var(--st-bg) !important;
    font-weight: 700 !important;
}

.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover {
    background-color: var(--st-g2) !important;
    box-shadow: 0 0 16px color-mix(in srgb,var(--st-g) 30%,transparent) !important;
}

.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary,
a.btn:not(.btn-primary):not(.btn-danger),
button.btn:not(.btn-primary):not(.btn-danger) {
    background-color: transparent !important;
    border-color: var(--st-bd2) !important;
    color: var(--st-t1) !important;
}

.btn-secondary:hover,
a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover {
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
    color: var(--st-g) !important;
}

.btn-danger,
a.btn.btn-danger,
button.btn.btn-danger {
    background-color: var(--st-danger) !important;
    border-color: var(--st-danger) !important;
    color: #fff !important;
}

.btn-danger:hover { background-color: var(--st-danger) !important; }

/* ---- Links ----------------------------------------------- */
a:not([class*="btn"]):not(.button) {
    color: var(--st-g) !important;
}
a:not([class*="btn"]):not(.button):hover {
    color: var(--st-t2) !important;
}

/* ---- Popovers / dropdowns / context menus --------------- */
.popover,
.popover-content,
.dropdown-menu {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd2) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.7) !important;
}

.popover .menu li a,
.dropdown-menu .menu-item a,
.popover .menu a {
    color: var(--st-t1) !important;
}

.popover .menu li a:hover,
.dropdown-menu .menu-item a:hover {
    background-color: color-mix(in srgb,var(--st-g) 8%,transparent) !important;
    color: var(--st-g) !important;
}

.popover .menu li + li,
.popover .separator {
    border-color: var(--st-bd) !important;
}

/* mobile popover header */
.popover .popover-header {
    background-color: var(--st-bg3) !important;
    color: var(--st-g) !important;
    border-color: var(--st-bd) !important;
}

/* ---- Dialogs --------------------------------------------- */
.ui-dialog {
    background-color: var(--st-bg2) !important;
    border: 1px solid var(--st-bd2) !important;
    box-shadow: 0 16px 64px rgba(0,0,0,.8) !important;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: var(--st-bg3) !important;
    border-bottom: 1px solid var(--st-bd) !important;
    color: var(--st-g) !important;
}

.ui-dialog .ui-dialog-content {
    background-color: var(--st-bg2) !important;
    color: var(--st-t1) !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background-color: var(--st-bg2) !important;
    border-top: 1px solid var(--st-bd) !important;
}

.ui-widget-overlay {
    background-color: rgba(0,0,0,.75) !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: var(--st-t3) !important;
}

/* ---- Notifications / alerts ------------------------------- */
.ui.alert,
#messagestack > div {
    background-color: var(--st-bg3) !important;
    border-left: 3px solid var(--st-g) !important;
    color: var(--st-t1) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
}

.ui.alert.error,   #messagestack > div.error   { border-left-color: var(--st-danger) !important; }
.ui.alert.warning, #messagestack > div.warning { border-left-color: var(--st-warn) !important; }
.ui.alert.success, #messagestack > div.confirmation { border-left-color: var(--st-g) !important; }
.ui.alert.loading, #messagestack > div.loading { border-left-color: var(--st-t3) !important; }

/* ---- Status bar / footer ---------------------------------- */
#footer,
.statusbar,
#statusbar {
    background-color: var(--st-bg2) !important;
    border-top: 1px solid var(--st-bd) !important;
    color: var(--st-t3) !important;
}

/* ---- Search bar ------------------------------------------ */
.searchbar input[type=text],
.searchbar input[type=search],
#quicksearchbar input {
    background-color: color-mix(in srgb,var(--st-g) 4%,transparent) !important;
    color: var(--st-t1) !important;
    border-color: color-mix(in srgb,var(--st-g) 15%,transparent) !important;
}

/* ---- Tables (contacts, settings) -------------------------- */
table.compact-table th,
table.propform th,
table tr.thead th {
    background-color: var(--st-bg3) !important;
    color: var(--st-t3) !important;
    border-color: var(--st-bd) !important;
}

table.compact-table td,
table.propform td,
table tr td {
    background-color: var(--st-bg) !important;
    color: var(--st-t1) !important;
    border-color: var(--st-bd) !important;
}

table.compact-table tr:hover td,
table.propform tr:hover td {
    background-color: color-mix(in srgb,var(--st-g) 4%,transparent) !important;
}

/* ---- Settings / Preferences panels ----------------------- */
#settings-menu,
.section-header {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

.section-header h3 {
    color: var(--st-g) !important;
}

/* ---- Datepicker ------------------------------------------ */
.ui-datepicker {
    background-color: var(--st-bg2) !important;
    border: 1px solid var(--st-bd2) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}

.ui-datepicker-header {
    background-color: var(--st-bg3) !important;
    color: var(--st-g) !important;
    border-color: var(--st-bd) !important;
}

.ui-datepicker td a {
    color: var(--st-t1) !important;
}

.ui-datepicker td a:hover {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
}

.ui-datepicker td.ui-datepicker-today a {
    color: var(--st-g) !important;
    font-weight: 700;
}

.ui-datepicker td.ui-datepicker-current-day a {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
}

/* ---- Quota bar ------------------------------------------- */
.quota-widget .bar {
    background-color: color-mix(in srgb,var(--st-g) 8%,transparent) !important;
    border: 1px solid var(--st-bd) !important;
}

.quota-widget .bar div {
    background-color: var(--st-g) !important;
}

.quota-widget .value,
.quota-widget a {
    color: var(--st-t2) !important;
}

/* ---- Drag layer ------------------------------------------ */
#drag-layer,
.drag-layer {
    background-color: var(--st-bg2) !important;
    border: 1px solid var(--st-g) !important;
    color: var(--st-t1) !important;
    box-shadow: 0 4px 16px color-mix(in srgb,var(--st-g) 20%,transparent) !important;
}

/* ---- Splitter / resize handle ---------------------------- */
.splitter {
    background-color: var(--st-bd) !important;
}

.splitter:hover,
.splitter.active {
    background-color: var(--st-g) !important;
}

/* ---- Scrollbars ------------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--st-t3) var(--st-bg);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--st-bg); }
::-webkit-scrollbar-thumb { background: var(--st-t3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--st-g); }

/* ---- Text selection -------------------------------------- */
::selection {
    background-color: color-mix(in srgb,var(--st-g) 25%,transparent) !important;
    color: var(--st-t1) !important;
}

/* ---- Misc overrides -------------------------------------- */

/* login page */
#login-form {
    background-color: var(--st-bg2) !important;
    border: 1px solid var(--st-bd) !important;
}

/* watermark / logo on empty content pane */
#watermark {
    opacity: 0.3;
    filter: hue-rotate(90deg) saturate(2);
}

/* print button area */
#printmessage a { color: var(--st-g) !important; }

/* badge count (unread mail count in browser tab etc) */
.badge {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
}

/* progress bar (upload) */
.progress-bar {
    background-color: var(--st-g) !important;
}
.progress {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    border-color: var(--st-bd) !important;
}

/* spell-check suggestions */
.googie_list {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd2) !important;
}

.googie_list li a {
    color: var(--st-t1) !important;
}

.googie_list li a:hover {
    background-color: color-mix(in srgb,var(--st-g) 8%,transparent) !important;
    color: var(--st-g) !important;
}

/* TinyMCE editor toolbar (compose rich text) */
.tox .tox-toolbar, .tox .tox-toolbar__primary {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

.tox .tox-tbtn { color: var(--st-t2) !important; }
.tox .tox-tbtn:hover { background-color: color-mix(in srgb,var(--st-g) 8%,transparent) !important; color: var(--st-g) !important; }
.tox .tox-edit-area { border-color: var(--st-bd) !important; }

/* ---- Contact / user avatar -------------------------------- */
/* Override elastic's dynamic inline background-color on initials avatar */
.contact-photo,
span.contact-photo,
.contact-photo.contact-initials,
#layout-menu .contact-photo,
.pane-header .contact-photo,
#layout-list .header .contact-photo,
#layout-sidebar .header .contact-photo {
    background-color: var(--st-bg3) !important;
    color: var(--st-g) !important;
    border-color: var(--st-bd) !important;
}

/* Elastic sets inline style="background-color: #xxxxxx" — defeat it */
span.contact-photo[style] {
    background-color: var(--st-bg3) !important;
}

/* ---- Remaining elastic dark-blue bleed -------------------- */
/* var(--st-bg2) (task menu default), var(--st-bg2) (dark inputs), var(--st-bg2) (dark bg) */
/* These show through when elastic's light-mode rules win specificity */

/* Sidebar / list headers that elastic colours dark-blue */
.pane-header,
#layout-sidebar > .header,
#layout-list > .header,
#layout-menu > .header {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

/* (taskmenu active/special rules live in the #taskmenu block above) */

/* Elastic's input-group addon uses a light grey — override */
.input-group-addon,
.input-group-text {
    background-color: var(--st-bg3) !important;
    border-color: color-mix(in srgb,var(--st-g) 20%,transparent) !important;
    color: var(--st-t3) !important;
}

/* Hover row in folder/contact listing */
.listing li > a:hover,
.listing li:hover > a {
    background-color: color-mix(in srgb,var(--st-g) 5%,transparent) !important;
}

/* Active / focused list item dot (focus indicator line on left) */
.messagelist tr.focused > td:first-child {
    box-shadow: inset 2px 0 0 var(--st-g);
}

/* Recipient-input background (compose To/CC fields) */
.recipient-input {
    background-color: var(--st-bg2) !important;
    border-color: color-mix(in srgb,var(--st-g) 20%,transparent) !important;
}

/* Select2 / chosen dropdowns if used */
.select2-container .select2-selection,
.select2-dropdown {
    background-color: var(--st-bg2) !important;
    border-color: color-mix(in srgb,var(--st-g) 20%,transparent) !important;
    color: var(--st-t1) !important;
}
.select2-results__option--highlighted {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    color: var(--st-g) !important;
}

/* Code mirror (raw HTML editor) */
.CodeMirror {
    background-color: var(--st-bg) !important;
    color: var(--st-t1) !important;
    border-color: color-mix(in srgb,var(--st-g) 20%,transparent) !important;
}
.CodeMirror-cursor { border-left-color: var(--st-g) !important; }
.CodeMirror-selected { background: color-mix(in srgb,var(--st-g) 15%,transparent) !important; }

/* Task-menu separator line */
#layout-menu hr {
    border-color: var(--st-bd) !important;
}

/* Elastic colours the unread dot bright blue — make it green */
.messagelist span.msgicon.status:before,
.messagelist span.msgicon.unread:before {
    color: var(--st-g) !important;
}

/* Folder collapse arrow */
.folderlist li .branch-toggle:before {
    color: var(--st-t3) !important;
}
.folderlist li .branch-toggle:hover:before {
    color: var(--st-g) !important;
}

/* Quota / storage bar bottom of sidebar */
#quota-display,
.quota-widget {
    border-top: 1px solid var(--st-bd) !important;
    background-color: var(--st-bg2) !important;
}

/* Elastic theme-color meta — update so browser chrome matches */
body {
    color-scheme: dark;
}

/* ── Bottom footer bar (elastic uses #layout>div>.footer, bg:#fff) ── */
#layout > div > .footer,
#layout > div > .footer.small {
    background-color: var(--st-bg2) !important;
    border-top: 1px solid var(--st-bd) !important;
    color: var(--st-t2) !important;
}

/* Pagenav inside footer — elastic colours text var(--st-bg2) (near-black) */
.menu.pagenav a,
.menu.pagenav button {
    color: var(--st-t2) !important;
    background: transparent !important;
}
.menu.pagenav a:hover,
.menu.pagenav button:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}
.menu.pagenav .pagenav-text {
    color: var(--st-t3) !important;
}
/* Current page input box */
.menu.pagenav input {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
    border: none !important;
    font-weight: 700;
}

/* Quota display inside footer */
.quota-widget,
#quotadisplay {
    color: var(--st-t3) !important;
}
.quota-widget .bar,
#quotadisplay .bar {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    border: 1px solid var(--st-bd) !important;
}
.quota-widget .bar div,
#quotadisplay .bar div {
    background-color: var(--st-g) !important;
}

/* ── Email message chrome (the part outside the email iframe) ── */
/* White/light bar between message header and email iframe */
.message-htmlpart,
.message-part {
    background-color: var(--st-bg) !important;
    border-top-color: var(--st-bd) !important;
}

/* rcmBody wrapper around email iframe */
.message-htmlpart div.rcmBody,
.message-part div.rcmBody {
    background-color: var(--st-bg) !important;
}

/* Blockquote chrome (quoted-reply expand/collapse button) */
.message-htmlpart blockquote span.blockquote-link,
.message-part blockquote span.blockquote-link {
    background: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t3) !important;
}

/* Privacy / remote-resources warning bar */
.message-partheaders,
.partheaders {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t1) !important;
}

/* "Allow" button in privacy bar */
.ui.alert.warning .btn,
.message-partheaders .btn {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
    border-color: var(--st-g) !important;
}

/* ── Popup / navlist bottom bar (pagenav inside list popover) ── */
.menu.pagenav.pagenav-list,
.menu.pagenav.pagenav-list + .navlist {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}

/* ---- Logo replacement ------------------------------------- */
/* Strategy: keep the <img> in flow (so #logo keeps its natural size)
   but make it invisible, then paint our SVG as a background-image on
   the #logo container.  No ::after tricks needed — works everywhere.  */
#logo img,
#logo > img {
    opacity: 0 !important;          /* visually hidden but still sizes parent */
    pointer-events: none !important;
}

#logo {
    background-color: var(--st-bg) !important;   /* match task-menu bg */
    background-image: url("../images/logo.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 44px auto !important;
    opacity: 1 !important;
    display: inline-block !important;       /* match elastic default */
    min-width: 48px !important;
    min-height: 48px !important;
}

/* ---- Black / dark text fixes ------------------------------ */
/* Catch any element that still has hardcoded dark text on our dark bg */

/* Generic dark text colours used by elastic in light mode */
.rcmScrollBox,
.scroller,
.ui-widget,
.ui-widget-content,
.ui-helper-reset {
    color: var(--st-t1) !important;
    background-color: transparent !important;
}

/* Breadcrumb / pagenav text */
.pagenav a,
.pagenav span,
#countdisplay,
#messagecount {
    color: var(--st-t2) !important;
}

/* Pagination buttons */
.pagenav a.button,
.pagenav button {
    color: var(--st-t2) !important;
    background: transparent !important;
    border-color: var(--st-bd) !important;
}
.pagenav a.button:hover,
.pagenav button:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}

/* Current page indicator in pagination */
.pagenav input[type=text],
#rcmrow input {
    background-color: var(--st-g) !important;
    color: var(--st-bg) !important;
    border-color: var(--st-g) !important;
    font-weight: 700;
}

/* Message subject/sender text that might inherit black */
.messagelist td,
.messagelist td a,
.messagelist td span {
    color: var(--st-t2) !important;
}
.messagelist tr.unread td,
.messagelist tr.unread td a {
    color: var(--st-t1) !important;
}
.messagelist tr.selected td,
.messagelist tr.selected td a {
    color: var(--st-g) !important;
}

/* Message view body area — do NOT force dark on email content iframe,
   only on the chrome around it */
#message-header *,
.message-header * {
    color: inherit;
}
#message-header .header-title {
    color: var(--st-t3) !important;
}
#message-header .header-value,
#message-header .subject {
    color: var(--st-t1) !important;
}

/* Settings / about page text */
#aboutcontent,
#aboutcontent p,
#aboutcontent td,
.formcontent p,
.formcontent label,
.formcontent td {
    color: var(--st-t1) !important;
}

/* Table headings in settings */
.compact-table thead th,
.propform thead th {
    color: var(--st-t3) !important;
    background-color: var(--st-bg3) !important;
}

/* Elastic renders some helper text in var(--st-bg2) (near-black) */
.hint, .form-text, small.hint, p.hint {
    color: var(--st-t3) !important;
}

/* Column header / sort arrows in message list */
.messagelist thead th,
.messagelist thead th a {
    color: var(--st-t3) !important;
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
}
.messagelist thead th.sorted a {
    color: var(--st-g) !important;
}

/* Search/filter result count */
#search-filter,
.searchbar .search-filter-value {
    color: var(--st-t2) !important;
}

/* Quota label text */
.quota-widget .label {
    color: var(--st-t3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ELASTIC BLEED-THROUGH FIXES
   Elastic uses var(--st-g) (blue) as accent and var(--st-bg2) (dark teal) as
   default text. These rules beat any remaining elastic rules —
   including ones with !important — by matching the exact selector
   so our later-declared !important wins the cascade.
   ══════════════════════════════════════════════════════════════════ */

/* ── Default body text: elastic sets color:var(--st-bg2) on body ── */
body,
html body {
    color: var(--st-t1) !important;
}

/* ── Toolbar links: .menu.toolbar a { color: var(--st-bg2) } ── */
.menu.toolbar a,
.menu.toolbar button,
.menu .buttons button,
.searchbar a,
.menu.listing a {
    color: var(--st-t2) !important;
}
.menu.toolbar a:hover,
.menu.toolbar button:hover,
.menu .buttons button:hover {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 7.000000000000001%,transparent) !important;
}

/* Selected toolbar button */
.menu.toolbar a.selected,
.menu.toolbar button.selected {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
}

/* ── Panel / dialog headers: #layout>div>.header { color:var(--st-bg2); bg:#f4f4f4 } ── */
#layout > div > .header,
.pane-header,
.content-frame .header {
    background-color: var(--st-bg2) !important;
    border-color: var(--st-bd) !important;
    color: var(--st-t1) !important;
}
#layout > div > .header a.button {
    color: var(--st-t2) !important;
}
#layout > div > .header a.button:hover {
    color: var(--st-g) !important;
}

/* ── jQuery UI autocomplete / context menu active item ── */
/* elastic: .ui-menu .ui-state-active { background-color:var(--st-g) !important } */
.ui-menu .ui-state-active,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background-color: color-mix(in srgb,var(--st-g) 15%,transparent) !important;
    color: var(--st-g) !important;
    border-color: transparent !important;
}

/* ── jQuery UI datepicker ── */
/* elastic: .ui-datepicker a.ui-state-active { background:var(--st-g) !important } */
.ui-datepicker a.ui-state-active,
.ui-datepicker .ui-state-active {
    background: var(--st-g) !important;
    border-color: var(--st-g2) !important;
    color: var(--st-bg) !important;
    font-weight: 700 !important;
}

/* elastic: .ui-datepicker .ui-state-highlight { bg:color-mix(in srgb,var(--st-g) 12%,transparent); color:var(--st-g) } */
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    color: var(--st-g) !important;
    border-color: var(--st-bd) !important;
}

/* ── Input group focus border ── */
/* elastic: .input-group-text input:focus { border-color:var(--st-g) !important } */
.input-group-text input:focus {
    border-color: var(--st-g) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--st-g) 25%,transparent) !important;
}

/* ── TinyMCE editor focus ── */
/* elastic: div.tox.focused { border-color:var(--st-g) !important } */
div.tox.focused {
    border-color: var(--st-g) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--st-g) 15%,transparent) !important;
}

/* TinyMCE dialog footer button */
div.tox .tox-dialog__footer .tox-button {
    color: var(--st-t1) !important;
    background: transparent !important;
    border-color: var(--st-bd2) !important;
}
div.tox .tox-dialog__footer .tox-button:hover {
    background-color: color-mix(in srgb,var(--st-g) 8%,transparent) !important;
    color: var(--st-g) !important;
}

/* ── Popover header in layout-menu ── */
/* elastic: #layout-menu .popover-header { background-color:var(--st-bg2) !important } */
#layout-menu .popover-header {
    background-color: var(--st-bg3) !important;
    color: var(--st-g) !important;
    border-color: var(--st-bd) !important;
}

/* ── Floating action button (compose FAB on mobile) ── */
.floating-action-buttons a.button {
    background: var(--st-g) !important;
    color: var(--st-bg) !important;
    box-shadow: 0 0 8px 4px color-mix(in srgb,var(--st-g) 15%,transparent) !important;
}
.floating-action-buttons a.button:hover {
    background: var(--st-g2) !important;
}

/* ── Popover menu hover ── */
/* elastic: .popover .menu li a:not(.disabled):hover { bg:var(--st-g) } */
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover {
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
    color: var(--st-g) !important;
}

/* ── jQuery UI slider active handle ── */
.ui-slider .ui-slider-handle.ui-state-active {
    background: var(--st-g) !important;
    border-color: var(--st-g2) !important;
}

/* ── Listing selection: elastic dark-mode uses var(--st-bg2) + var(--st-g) ── */
.listing li.selected > a,
.listing li.selected,
.listing tr.selected td {
    color: var(--st-g) !important;
    background-color: color-mix(in srgb,var(--st-g) 10%,transparent) !important;
}

/* ── Dialog button text ── */
/* elastic: .ui-dialog-buttonset button.btn-secondary { color:var(--st-bg2) } */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a {
    color: var(--st-t1) !important;
    background: transparent !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary {
    background: var(--st-g) !important;
    color: var(--st-bg) !important;
}

/* ── Focus outline ── */
*:focus-visible {
    outline-color: var(--st-g) !important;
}

/* ── Firefox select focus ring ── */
select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 var(--st-t1) !important;
}