/* ============================================
   snaw.cc Dark Theme for Roundcube (Elastic)
   ============================================ */

:root {
    --snaw-bg: #141418;
    --snaw-card: #1a1a20;
    --snaw-border: #2a2a32;
    --snaw-accent: #FF5C7C;
    --snaw-accent-hover: #FF7E98;
    --snaw-accent-active: #FF3C5E;
    --snaw-text: #e0e0e8;
    --snaw-text-dim: #808090;
    --snaw-surface: #1e1e26;
    --snaw-input-bg: #16161c;
    --snaw-hover: #222230;
    --snaw-selected: rgba(255, 92, 124, 0.10);
    --snaw-selected-border: rgba(255, 92, 124, 0.25);
    --snaw-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --snaw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ---- Base / Global ---- */

html, body,
html.dark-mode, html.dark-mode body {
    background: var(--snaw-bg) !important;
    color: var(--snaw-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
}

/* Force dark mode styles always - override elastic's light/dark toggling */
html, html.dark-mode {
    color-scheme: dark !important;
}

/* ---- Scrollbars ---- */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--snaw-bg); }
::-webkit-scrollbar-thumb { background: var(--snaw-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--snaw-text-dim); }

/* ---- LOGIN PAGE ---- */

/* Login page layout */
body.task-login {
    background: var(--snaw-bg) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

body.task-login #layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}

body.task-login h1.voice {
    color: var(--snaw-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    letter-spacing: 0 !important;
    opacity: 0.6;
    order: 2;
}

body.task-login #layout-content {
    background: var(--snaw-card) !important;
    border: 1px solid var(--snaw-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--snaw-shadow-lg), 0 0 80px rgba(255, 92, 124, 0.03) !important;
    max-width: 400px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 48px 40px 40px !important;
    position: relative;
}

/* Branding on login */
body.task-login #layout-content::before {
    content: "snaw.cc";
    display: block;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--snaw-accent);
    margin-bottom: 8px;
    letter-spacing: -1.5px;
}

body.task-login #layout-content::after {
    content: "Webmail";
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--snaw-text-dim);
    margin-bottom: 32px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Hide elastic logo on login */
body.task-login #logo {
    display: none !important;
}

/* Login form */
body.task-login .propform {
    background: transparent !important;
}

body.task-login .propform table {
    width: 100%;
}

body.task-login .propform td.title {
    display: block;
    padding: 0 0 6px 0;
}

body.task-login .propform td.input {
    display: block;
    padding: 0 0 16px 0;
}

body.task-login .propform label {
    color: var(--snaw-text-dim) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

body.task-login .propform .form-control,
body.task-login input.form-control {
    background: var(--snaw-input-bg) !important;
    border: 1px solid var(--snaw-border) !important;
    border-radius: 10px !important;
    color: var(--snaw-text) !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.task-login .propform .form-control:focus,
body.task-login input.form-control:focus {
    border-color: var(--snaw-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 92, 124, 0.12) !important;
    outline: none !important;
}

body.task-login .propform .form-control::placeholder {
    color: var(--snaw-text-dim) !important;
}

/* Login button */
body.task-login #rcmloginsubmit,
body.task-login .button.mainaction.submit {
    background: var(--snaw-accent) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 8px !important;
    transition: background 0.2s, transform 0.1s !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 4px 12px rgba(255, 92, 124, 0.25) !important;
}

body.task-login #rcmloginsubmit:hover,
body.task-login .button.mainaction.submit:hover {
    background: var(--snaw-accent-hover) !important;
    box-shadow: 0 6px 16px rgba(255, 92, 124, 0.3) !important;
}

body.task-login #rcmloginsubmit:active,
body.task-login .button.mainaction.submit:active {
    background: var(--snaw-accent-active) !important;
    transform: translateY(1px) !important;
}

/* Login footer */
body.task-login #login-footer {
    color: var(--snaw-text-dim) !important;
    font-size: 12px !important;
    text-align: center !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--snaw-border) !important;
}

body.task-login #login-footer a {
    color: var(--snaw-accent) !important;
}

/* Noscript warning */
body.task-login .noscriptwarning {
    color: var(--snaw-accent) !important;
    text-align: center !important;
    margin-top: 20px;
}


/* ---- MAIN UI - HEADER / TOOLBAR ---- */

#layout {
    background: var(--snaw-bg) !important;
}

.header,
#layout > .header,
.menu.toolbar,
#layout > div > .header {
    background: var(--snaw-card) !important;
    border-bottom: 1px solid var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

/* Task menu (top nav bar) */
#taskmenu,
.toolbar.menu {
    background: var(--snaw-card) !important;
}

#taskmenu a,
#taskmenu a.button,
.toolbar.menu a {
    color: var(--snaw-text-dim) !important;
}

#taskmenu a:hover,
#taskmenu a.button:hover,
.toolbar.menu a:hover {
    color: var(--snaw-text) !important;
    background: var(--snaw-hover) !important;
}

#taskmenu a.selected,
#taskmenu a.button.selected {
    color: var(--snaw-accent) !important;
    background: var(--snaw-selected) !important;
}

#taskmenu a::before,
#taskmenu a.button::before {
    color: inherit !important;
}

/* Toolbar buttons */
.toolbar a.button,
a.button.icon {
    color: var(--snaw-text-dim) !important;
}

.toolbar a.button:hover,
a.button.icon:hover {
    color: var(--snaw-text) !important;
    background: var(--snaw-hover) !important;
}

.toolbar a.button.disabled,
a.button.icon.disabled {
    color: var(--snaw-border) !important;
    opacity: 0.5;
}

/* Toolbar icons inherit color */
.toolbar a.button::before,
a.button.icon::before {
    color: inherit !important;
}


/* ---- SIDEBAR ---- */

#layout-sidebar,
.layout-sidebar,
#layout > .sidebar {
    background: var(--snaw-card) !important;
    border-right: 1px solid var(--snaw-border) !important;
}

#layout-sidebar .header,
.layout-sidebar .header {
    background: var(--snaw-card) !important;
    border-bottom: 1px solid var(--snaw-border) !important;
}

/* Searchbar in sidebar */
.searchbar {
    background: var(--snaw-surface) !important;
    border-color: var(--snaw-border) !important;
}

.searchbar input {
    background: transparent !important;
    color: var(--snaw-text) !important;
}


/* ---- MAILBOX LIST ---- */

#mailboxlist li,
.listing li {
    border-bottom: none !important;
}

#mailboxlist li a,
#mailboxlist li div.treetoggle,
.listing li a,
.listing td {
    color: var(--snaw-text) !important;
}

#mailboxlist li a:hover,
.listing li a:hover,
.listing tr:hover td {
    background: var(--snaw-hover) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > div,
.listing li.selected > a,
.listing li.selected > div,
.listing tr.selected td {
    background: var(--snaw-selected) !important;
    color: var(--snaw-accent) !important;
}

#mailboxlist li a::before,
.listing li a::before {
    color: var(--snaw-text-dim) !important;
}

#mailboxlist li.selected > a::before {
    color: var(--snaw-accent) !important;
}

/* Folder unread count */
#mailboxlist .unreadcount,
.listing .unreadcount {
    background: var(--snaw-accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 1px 8px !important;
    font-size: 11px !important;
}

/* ---- MESSAGE LIST ---- */

#messagelist,
.messagelist,
#layout-list,
.layout-list {
    background: var(--snaw-bg) !important;
}

#layout-list .header {
    background: var(--snaw-card) !important;
    border-bottom: 1px solid var(--snaw-border) !important;
}

#messagelist tr,
.messagelist tr {
    border-bottom: 1px solid rgba(42, 42, 50, 0.5) !important;
}

#messagelist tr td,
.messagelist tr td {
    color: var(--snaw-text) !important;
    background: transparent !important;
}

#messagelist tr:hover td,
.messagelist tr:hover td {
    background: var(--snaw-hover) !important;
}

#messagelist tr.selected td,
.messagelist tr.selected td {
    background: var(--snaw-selected) !important;
}

#messagelist tr.focused td,
.messagelist tr.focused td {
    box-shadow: inset 0 0 0 1px var(--snaw-accent) !important;
}

#messagelist tr.unread td {
    font-weight: 600 !important;
}

/* Message list header row */
#messagelist thead tr,
#messagelist thead td,
#messagelist thead th {
    background: var(--snaw-card) !important;
    color: var(--snaw-text-dim) !important;
    border-bottom: 1px solid var(--snaw-border) !important;
}

/* Thread toggle */
#messagelist td.threads .listmenu,
#messagelist td.subject span.msgicon,
.messagelist td.subject span.msgicon {
    color: var(--snaw-text-dim) !important;
}

/* Flagged / starred */
#messagelist td.flag span.flagged,
.messagelist td.flag span.flagged {
    color: var(--snaw-accent) !important;
}


/* ---- CONTENT AREA ---- */

#layout-content,
.layout-content,
#layout > .content {
    background: var(--snaw-bg) !important;
}

/* When not login page, reset login-specific styles */
body:not(.task-login) #layout-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body:not(.task-login) #layout-content::before,
body:not(.task-login) #layout-content::after {
    display: none !important;
}


/* ---- MESSAGE VIEW ---- */

.message-part,
.message-htmlpart,
#message-header,
.message-header {
    background: var(--snaw-card) !important;
    color: var(--snaw-text) !important;
}

#message-header,
.message-header {
    border-bottom: 1px solid var(--snaw-border) !important;
    padding: 16px !important;
}

.message-header .subject {
    color: var(--snaw-text) !important;
    font-weight: 600 !important;
}

.message-header td.header-title {
    color: var(--snaw-text-dim) !important;
}

.message-header td.header {
    color: var(--snaw-text) !important;
}

/* Attachment list */
#attachment-list li,
.attachmentslist li {
    background: var(--snaw-surface) !important;
    border: 1px solid var(--snaw-border) !important;
    border-radius: 6px !important;
    color: var(--snaw-text) !important;
}

#attachment-list li a,
.attachmentslist li a {
    color: var(--snaw-accent) !important;
}


/* ---- COMPOSE ---- */

#compose-content,
.compose-content {
    background: var(--snaw-bg) !important;
}

#composebody,
.mce-content-body,
textarea.form-control {
    background: var(--snaw-card) !important;
    color: var(--snaw-text) !important;
    border: 1px solid var(--snaw-border) !important;
}

/* Compose headers */
#compose-content .compose-headers,
.compose-headers {
    background: var(--snaw-card) !important;
    border-bottom: 1px solid var(--snaw-border) !important;
}

.compose-headers input,
.compose-headers .input-group-text {
    background: var(--snaw-input-bg) !important;
    border-color: var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

/* TinyMCE editor iframe override */
.mce-tinymce,
.tox.tox-tinymce {
    border-color: var(--snaw-border) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow,
.tox .tox-menubar {
    background: var(--snaw-card) !important;
    border-bottom-color: var(--snaw-border) !important;
}

.tox .tox-tbtn {
    color: var(--snaw-text-dim) !important;
}

.tox .tox-tbtn:hover {
    background: var(--snaw-hover) !important;
    color: var(--snaw-text) !important;
}

.tox .tox-tbtn svg {
    fill: var(--snaw-text-dim) !important;
}

.tox .tox-tbtn:hover svg {
    fill: var(--snaw-text) !important;
}


/* ---- SETTINGS ---- */

#sections-table,
#identities-table,
.listing.iconized {
    background: var(--snaw-card) !important;
}

#sections-table tr td,
#identities-table tr td,
.listing.iconized li a {
    color: var(--snaw-text) !important;
}

#sections-table tr:hover td,
#identities-table tr:hover td,
.listing.iconized li a:hover {
    background: var(--snaw-hover) !important;
}

#sections-table tr.selected td,
#identities-table tr.selected td,
.listing.iconized li.selected a {
    background: var(--snaw-selected) !important;
    color: var(--snaw-accent) !important;
}

/* Settings form */
.propform,
fieldset {
    background: var(--snaw-card) !important;
    border-color: var(--snaw-border) !important;
}

fieldset legend,
.propform legend {
    color: var(--snaw-text) !important;
}

.propform td.title label,
.propform .col-form-label {
    color: var(--snaw-text-dim) !important;
}


/* ---- CONTACTS ---- */

#contacts-table,
.contactslist {
    background: var(--snaw-bg) !important;
}

#contacts-table tr td,
.contactslist tr td {
    color: var(--snaw-text) !important;
    border-bottom: 1px solid rgba(42, 42, 50, 0.5) !important;
}

#contacts-table tr:hover td,
.contactslist tr:hover td {
    background: var(--snaw-hover) !important;
}

#contacts-table tr.selected td,
.contactslist tr.selected td {
    background: var(--snaw-selected) !important;
}

/* Contact photo placeholder */
.contactphoto {
    background: var(--snaw-surface) !important;
    border-color: var(--snaw-border) !important;
}


/* ---- FORMS / INPUTS (Global) ---- */

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
select.form-control,
select.custom-select,
textarea {
    background: var(--snaw-input-bg) !important;
    border: 1px solid var(--snaw-border) !important;
    color: var(--snaw-text) !important;
    border-radius: 8px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--snaw-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 92, 124, 0.12) !important;
    outline: none !important;
    background: var(--snaw-input-bg) !important;
    color: var(--snaw-text) !important;
}

.form-control::placeholder,
input::placeholder {
    color: var(--snaw-text-dim) !important;
}

/* Select dropdown */
select option {
    background: var(--snaw-card) !important;
    color: var(--snaw-text) !important;
}

/* Input groups */
.input-group-text,
.input-group-prepend .btn,
.input-group-append .btn {
    background: var(--snaw-surface) !important;
    border-color: var(--snaw-border) !important;
    color: var(--snaw-text-dim) !important;
}

/* Checkboxes and custom switches */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--snaw-accent) !important;
    border-color: var(--snaw-accent) !important;
}

.custom-control-label::before {
    background-color: var(--snaw-surface) !important;
    border-color: var(--snaw-border) !important;
}


/* ---- BUTTONS (Global) ---- */

/* Primary / main action buttons */
.btn-primary,
.button.mainaction,
a.button.mainaction,
.mainaction.btn {
    background: var(--snaw-accent) !important;
    border-color: var(--snaw-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
.button.mainaction:hover,
a.button.mainaction:hover,
.mainaction.btn:hover {
    background: var(--snaw-accent-hover) !important;
    border-color: var(--snaw-accent-hover) !important;
}

.btn-primary:active,
.button.mainaction:active,
a.button.mainaction:active,
.mainaction.btn:active {
    background: var(--snaw-accent-active) !important;
    border-color: var(--snaw-accent-active) !important;
}

.btn-primary:focus,
.button.mainaction:focus {
    box-shadow: 0 0 0 3px rgba(255, 92, 124, 0.25) !important;
}

/* Secondary buttons */
.btn-secondary,
.btn,
.button,
a.button {
    background: var(--snaw-surface) !important;
    border: 1px solid var(--snaw-border) !important;
    color: var(--snaw-text) !important;
    border-radius: 8px !important;
}

.btn-secondary:hover,
.btn:hover,
.button:hover,
a.button:hover {
    background: var(--snaw-hover) !important;
    border-color: var(--snaw-accent) !important;
    color: var(--snaw-text) !important;
}

/* Danger buttons */
.btn-danger {
    background: #cc3344 !important;
    border-color: #cc3344 !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: #dd4455 !important;
    border-color: #dd4455 !important;
}


/* ---- LINKS ---- */

a {
    color: var(--snaw-accent) !important;
}

a:hover {
    color: var(--snaw-accent-hover) !important;
}


/* ---- DROPDOWNS / POPUPS / MENUS ---- */

.popupmenu,
.dropdown-menu,
.popup,
.ui-dialog,
.ui-widget-content {
    background: var(--snaw-card) !important;
    border: 1px solid var(--snaw-border) !important;
    box-shadow: var(--snaw-shadow-lg) !important;
    border-radius: 10px !important;
    color: var(--snaw-text) !important;
}

.dropdown-menu .dropdown-item,
.popupmenu li a,
.popup li a,
.listing li a {
    color: var(--snaw-text) !important;
}

.dropdown-menu .dropdown-item:hover,
.popupmenu li a:hover,
.popup li a:hover {
    background: var(--snaw-hover) !important;
    color: var(--snaw-text) !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: var(--snaw-selected) !important;
    color: var(--snaw-accent) !important;
}

.dropdown-divider {
    border-color: var(--snaw-border) !important;
}


/* ---- DIALOGS ---- */

.ui-dialog {
    border-radius: 12px !important;
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--snaw-card) !important;
    border-bottom: 1px solid var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

.ui-dialog .ui-dialog-content {
    background: var(--snaw-card) !important;
    color: var(--snaw-text) !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: var(--snaw-card) !important;
    border-top: 1px solid var(--snaw-border) !important;
}

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


/* ---- NOTIFICATIONS / ALERTS ---- */

#messagestack,
.ui-notification {
    z-index: 10000;
}

#messagestack div,
.notice,
.ui-notification {
    background: var(--snaw-card) !important;
    border: 1px solid var(--snaw-border) !important;
    color: var(--snaw-text) !important;
    border-radius: 10px !important;
    box-shadow: var(--snaw-shadow-lg) !important;
}

#messagestack div.error,
.error {
    border-color: #cc3344 !important;
    background: rgba(204, 51, 68, 0.1) !important;
}

#messagestack div.confirmation,
#messagestack div.notice {
    border-color: var(--snaw-accent) !important;
    background: rgba(255, 92, 124, 0.08) !important;
}

#messagestack div.loading {
    border-color: var(--snaw-border) !important;
}


/* ---- TABS (Bootstrap) ---- */

.nav-tabs {
    border-bottom-color: var(--snaw-border) !important;
}

.nav-tabs .nav-link {
    color: var(--snaw-text-dim) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--snaw-text) !important;
    border-color: var(--snaw-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--snaw-accent) !important;
    background: var(--snaw-card) !important;
    border-color: var(--snaw-border) var(--snaw-border) var(--snaw-card) !important;
}


/* ---- CARDS / PANELS / FRAMES ---- */

.card,
.panel {
    background: var(--snaw-card) !important;
    border-color: var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

.card-header,
.panel-heading {
    background: var(--snaw-surface) !important;
    border-bottom-color: var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

/* Frames (iframes in content) */
iframe {
    border-color: var(--snaw-border) !important;
}


/* ---- WATERMARK / EMPTY STATE ---- */

.watermark {
    opacity: 0.3 !important;
}


/* ---- SEARCH ---- */

.searchbar,
#quicksearchbar,
.searchbox {
    background: var(--snaw-surface) !important;
    border-color: var(--snaw-border) !important;
    border-radius: 8px !important;
}

.searchbar input,
#quicksearchbar input,
.searchbox input {
    background: transparent !important;
    color: var(--snaw-text) !important;
}

.searchbar .icon,
#quicksearchbar .icon,
.searchbar a,
#quicksearchbar a {
    color: var(--snaw-text-dim) !important;
}


/* ---- QUOTA ---- */

.quota-widget .bar {
    background: var(--snaw-surface) !important;
}

.quota-widget .bar .value {
    background: var(--snaw-accent) !important;
}


/* ---- RESPONSIVE / MOBILE ---- */

@media (max-width: 768px) {
    body.task-login #layout-content {
        margin: 20px auto !important;
        padding: 32px 24px !important;
    }

    body.task-login #layout-content::before {
        font-size: 28px;
    }
}

/* ---- ELASTIC SKIN SPECIFIC OVERRIDES ---- */

/* Override elastic's CSS custom properties */
html, html.dark-mode {
    --main-color: var(--snaw-accent) !important;
    --color-main: var(--snaw-accent) !important;
    --color-main-dark: var(--snaw-accent-active) !important;
    --color-main-light: var(--snaw-accent-hover) !important;

    --color-black: var(--snaw-text) !important;
    --color-font: var(--snaw-text) !important;

    --color-link: var(--snaw-accent) !important;
    --color-link-hover: var(--snaw-accent-hover) !important;

    --color-list: var(--snaw-bg) !important;
    --color-list-selected: var(--snaw-selected) !important;
    --color-list-selected-background: var(--snaw-selected) !important;

    --color-layout-border: var(--snaw-border) !important;
    --color-border: var(--snaw-border) !important;

    --color-layout-header: var(--snaw-card) !important;
    --color-layout-sidebar-background: var(--snaw-card) !important;
    --color-layout-list-background: var(--snaw-bg) !important;

    --color-background: var(--snaw-bg) !important;
    --color-btn-primary: var(--snaw-accent) !important;
    --color-btn-primary-hover: var(--snaw-accent-hover) !important;

    --color-input-border: var(--snaw-border) !important;
    --color-input-border-focus: var(--snaw-accent) !important;

    --color-checkbox: var(--snaw-accent) !important;
    --color-checkbox-checked: var(--snaw-accent) !important;

    --color-toolbar-button-background-hover: var(--snaw-hover) !important;

    --color-datepicker-hover: var(--snaw-accent) !important;

    --color-warning: #FF5C7C !important;
    --color-error: #cc3344 !important;
    --color-success: #44bb77 !important;

    --color-message-background: var(--snaw-card) !important;
}

/* Override elastic layout backgrounds */
#layout > div {
    background: var(--snaw-bg) !important;
}

#layout > .sidebar {
    background: var(--snaw-card) !important;
}

/* Header branding area */
.header > .searchbar + a.button,
.header .header-title {
    color: var(--snaw-text) !important;
}

/* Elastic popover menu */
.popover {
    background: var(--snaw-card) !important;
    border-color: var(--snaw-border) !important;
}

.popover-body {
    color: var(--snaw-text) !important;
}

.popover .arrow::before,
.popover .arrow::after {
    border-color: var(--snaw-card) !important;
}

/* Elastic responsive menu */
#layout > .menu {
    background: var(--snaw-card) !important;
    border-color: var(--snaw-border) !important;
}

/* Table styles */
table, .table {
    color: var(--snaw-text) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(30, 30, 38, 0.5) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--snaw-hover) !important;
}

th, td {
    border-color: var(--snaw-border) !important;
}

/* Pagination */
.page-link {
    background: var(--snaw-surface) !important;
    border-color: var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

.page-link:hover {
    background: var(--snaw-hover) !important;
    color: var(--snaw-accent) !important;
}

.page-item.active .page-link {
    background: var(--snaw-accent) !important;
    border-color: var(--snaw-accent) !important;
    color: #fff !important;
}

/* Badge */
.badge,
.badge-primary {
    background: var(--snaw-accent) !important;
    color: #fff !important;
}

/* Tooltip */
.tooltip-inner {
    background: var(--snaw-card) !important;
    color: var(--snaw-text) !important;
    border: 1px solid var(--snaw-border) !important;
}

/* Progress bar */
.progress {
    background: var(--snaw-surface) !important;
}

.progress-bar {
    background: var(--snaw-accent) !important;
}

/* Modal */
.modal-content {
    background: var(--snaw-card) !important;
    border-color: var(--snaw-border) !important;
    color: var(--snaw-text) !important;
}

.modal-header {
    border-bottom-color: var(--snaw-border) !important;
}

.modal-footer {
    border-top-color: var(--snaw-border) !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Close button */
.close, button.close {
    color: var(--snaw-text-dim) !important;
    opacity: 0.7 !important;
}

.close:hover, button.close:hover {
    color: var(--snaw-text) !important;
    opacity: 1 !important;
}

/* ---- SVG Icon color overrides ---- */
.toolbar a.button svg,
#taskmenu a svg,
a.button.icon svg {
    fill: currentColor !important;
}

/* ---- Loading indicator ---- */
.loading::after,
.loading::before {
    border-color: var(--snaw-accent) transparent transparent transparent !important;
}

/* ---- Splitter / resize handle ---- */
.ui-resizable-handle {
    background: var(--snaw-border) !important;
}

/* ---- Print button area ---- */
body.action-print {
    background: var(--snaw-bg) !important;
    color: var(--snaw-text) !important;
}

/* ---- Ensure all text elements are light ---- */
h1, h2, h3, h4, h5, h6,
p, span, div, li, td, th, label,
.form-group label {
    color: var(--snaw-text);
}

/* But don't override colored elements */
.btn-primary, .btn-primary *,
.badge, .badge *,
.unreadcount, .unreadcount * {
    color: #fff;
}