/* ============================================================
   Flavor Skin — Dark Mode Overrides
   ============================================================ */

html.dark-mode {
    --f-primary: #818cf8;
    --f-primary-dark: #6366f1;
    --f-primary-light: #4f46e5;
    --f-primary-bg: rgba(129, 140, 248, 0.14);
    --f-primary-glow: rgba(129, 140, 248, 0.25);
    --f-sidebar-bg: #020617;
    --f-sidebar-hover: #0f172a;
    --f-sidebar-text: #64748b;
    --f-surface: #1e293b;
    --f-surface-alt: #0f172a;
    --f-surface-hover: #334155;
    --f-border: #334155;
    --f-border-light: #1e293b;
    --f-text: #e2e8f0;
    --f-text-secondary: #94a3b8;
    --f-text-muted: #64748b;
    --f-accent-green: #34d399;
    --f-accent-amber: #fbbf24;
    --f-accent-rose: #fb7185;
    --f-accent-sky: #38bdf8;
    --f-accent-violet: #a78bfa;
    --f-accent-pink: #f472b6;
    --f-accent-teal: #2dd4bf;
    --f-accent-orange: #fb923c;
    --f-shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --f-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --f-shadow-md: 0 8px 24px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.2);
    --f-shadow-lg: 0 20px 40px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.25);
}

/* --- Base --- */
html.dark-mode body {
    background-color: var(--f-surface-alt) !important;
    color: var(--f-text);
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .header-title, html.dark-mode .boxtitle {
    color: var(--f-text);
}

/* --- Sidebar --- */
html.dark-mode #layout-menu {
    background: var(--f-sidebar-bg) !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4);
}

html.dark-mode #layout-menu .menu a {
    color: var(--f-sidebar-text) !important;
}

html.dark-mode #layout-menu .menu a:hover {
    color: #e2e8f0 !important;
    background: var(--f-sidebar-hover) !important;
}

html.dark-mode #layout-menu .menu a.selected,
html.dark-mode #layout-menu .menu a.active {
    background: linear-gradient(135deg, var(--f-primary-dark), var(--f-accent-violet)) !important;
    color: #ffffff !important;
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .header {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

/* --- Headers --- */
html.dark-mode .header,
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
    background: var(--f-surface) !important;
    border-bottom-color: var(--f-border) !important;
}

html.dark-mode .toolbar a,
html.dark-mode .toolbar button {
    color: var(--f-text-secondary) !important;
}

html.dark-mode .toolbar a:hover,
html.dark-mode .toolbar button:hover {
    background: var(--f-primary-bg) !important;
    color: var(--f-primary) !important;
}

/* --- Panels --- */
html.dark-mode #layout-sidebar {
    background: var(--f-surface) !important;
    border-right-color: var(--f-border) !important;
}

html.dark-mode #layout-list {
    background: var(--f-surface) !important;
    border-right-color: var(--f-border) !important;
}

html.dark-mode #layout-content {
    background: var(--f-surface-alt) !important;
}

html.dark-mode #layout {
    background: var(--f-surface-alt) !important;
}

/* --- Cards --- */
html.dark-mode .box-inner,
html.dark-mode .formcontent,
html.dark-mode .propform,
html.dark-mode #message-header,
html.dark-mode .message-part,
html.dark-mode .contact-header,
html.dark-mode .uibox .boxcontent {
    background: var(--f-surface) !important;
    border-color: var(--f-border) !important;
}

/* --- Message list --- */
html.dark-mode table.messagelist tr:hover,
html.dark-mode .listing tbody tr:hover {
    background: var(--f-surface-hover) !important;
}

html.dark-mode table.messagelist tr.selected,
html.dark-mode .listing tbody tr.selected {
    background: var(--f-primary-bg) !important;
}

html.dark-mode table.messagelist tr {
    border-bottom-color: var(--f-border) !important;
}

html.dark-mode table.messagelist td.subject span {
    color: var(--f-text);
}

html.dark-mode table.messagelist td.date,
html.dark-mode table.messagelist td.size {
    color: var(--f-text-muted);
}

/* --- Folder list --- */
html.dark-mode .listing.treelist li a:hover,
html.dark-mode .listing.folderlist li a:hover {
    background: var(--f-surface-hover) !important;
}

html.dark-mode .listing.treelist li.selected > a,
html.dark-mode .listing.treelist li a.selected,
html.dark-mode .listing.folderlist li.selected > a {
    background: var(--f-primary-bg) !important;
    color: var(--f-primary) !important;
}

/* --- Form elements --- */
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="url"],
html.dark-mode input[type="search"],
html.dark-mode input[type="number"],
html.dark-mode input[type="tel"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control {
    background: var(--f-surface-alt) !important;
    border-color: var(--f-border) !important;
    color: var(--f-text) !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode .form-control:focus {
    border-color: var(--f-primary) !important;
    box-shadow: 0 0 0 4px var(--f-primary-bg) !important;
}

/* --- Buttons --- */
html.dark-mode .btn-secondary,
html.dark-mode .btn-default {
    background: var(--f-surface) !important;
    border-color: var(--f-border) !important;
    color: var(--f-text) !important;
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-default:hover {
    background: var(--f-primary-bg) !important;
    border-color: var(--f-primary) !important;
    color: var(--f-primary) !important;
}

/* --- Login dark --- */
html.dark-mode body.task-login {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 40%, #831843 100%) !important;
}

html.dark-mode #login-form {
    background: var(--f-surface) !important;
    box-shadow: var(--f-shadow-lg), 0 0 80px rgba(99, 102, 241, 0.1) !important;
}

html.dark-mode #login-form label,
html.dark-mode #login-form .formlinks,
html.dark-mode #login-form .title {
    color: var(--f-text-secondary);
}

/* --- Dialogs --- */
html.dark-mode .popover {
    background: var(--f-surface) !important;
    border-color: var(--f-border) !important;
}

html.dark-mode .popover .listing li a:hover,
html.dark-mode .popupmenu .listing li a:hover {
    background: var(--f-primary-bg) !important;
    color: var(--f-primary) !important;
}

html.dark-mode .ui-dialog {
    background: var(--f-surface) !important;
}

html.dark-mode .ui-dialog .ui-dialog-titlebar {
    background: var(--f-surface) !important;
    border-bottom-color: var(--f-border) !important;
    color: var(--f-text);
}

html.dark-mode .ui-dialog .ui-dialog-buttonpane {
    background: var(--f-surface-alt) !important;
    border-top-color: var(--f-border) !important;
}

/* --- Notifications dark --- */
html.dark-mode #messagestack .notice {
    background: linear-gradient(135deg, var(--f-primary-dark), var(--f-accent-violet)) !important;
}

html.dark-mode #messagestack .confirmation {
    background: linear-gradient(135deg, #059669, var(--f-accent-teal)) !important;
}

html.dark-mode #messagestack .error {
    background: linear-gradient(135deg, #e11d48, #dc2626) !important;
}

html.dark-mode #messagestack .warning {
    background: linear-gradient(135deg, #d97706, var(--f-accent-orange)) !important;
}

/* --- Searchbar --- */
html.dark-mode .searchbar {
    background: var(--f-surface-alt) !important;
    border-color: var(--f-border) !important;
}

html.dark-mode .searchbar:focus-within {
    border-color: var(--f-primary) !important;
    background: var(--f-surface) !important;
}

html.dark-mode .searchbar input {
    color: var(--f-text) !important;
}

/* --- Misc --- */
html.dark-mode .splitter {
    background: var(--f-border) !important;
}

html.dark-mode .footer,
html.dark-mode .content-frame-navigation {
    background: var(--f-surface) !important;
    border-top-color: var(--f-border) !important;
}

html.dark-mode .listing.iconized li.selected a {
    background: var(--f-primary-bg) !important;
    color: var(--f-primary) !important;
}

html.dark-mode .propform td,
html.dark-mode .propform th {
    border-bottom-color: var(--f-border) !important;
}

html.dark-mode ::selection {
    background: var(--f-primary-dark);
    color: #ffffff;
}

html.dark-mode a {
    color: var(--f-primary);
}

html.dark-mode a:hover {
    color: var(--f-primary-light);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--f-text-muted);
}

html.dark-mode * {
    scrollbar-color: var(--f-text-muted) transparent;
}

html.dark-mode .quota-widget .bar {
    background: linear-gradient(90deg, var(--f-primary), var(--f-accent-violet)) !important;
}

/* --- Attachments --- */
html.dark-mode .attachmentslist {
    background: var(--f-surface-alt);
    border-color: var(--f-border);
}