/* Oracle night mode, brand v2. The screen's tokens turn to their night values; the invoice sheet keeps its paper
   palette in both themes (.invoice-print below), so a preview always matches the issued document. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font: 500 13px var(--font-sans);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--subtle); border-color: var(--control-edge); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-toggle [data-theme-status], .theme-toggle [data-layout-status] { margin-left: auto; font: 500 12px var(--font-mono); color: var(--text-2); }
.theme-toggle .theme-icon-sun { display: none; }
.login-card .theme-toggle { align-self: flex-start; }

/* Checkboxes and radios take the brand's violet in both themes. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

@media screen {
    html[data-theme="dark"] {
        color-scheme: dark;
        --canvas: #0C0B17;
        --surface: #15142A;
        --subtle: #1C1B34;
        --selected: #2A2457;
        --inverse: #F1F0FA;
        --border: #2A2846;
        --border-strong: #3C3961;
        --control-edge: #6E6A93;
        --focus: #9A8BFF;
        --text: #EFEEF9;
        --text-2: #ABA7C9;
        --text-3: #8C88AD;
        --on-primary: #0C0B17;
        --link: #A99CFF;
        --primary: #9A8BFF;
        --primary-hover: #B1A6FF;
        --success: #4ADBB0;
        --success-bg: #10302A;
        --warning: #F7B955;
        --warning-bg: #3A2A0E;
        --danger: #FF7A8E;
        --danger-bg: #3A1520;
        --neutral: #C3C0DC;
        --neutral-bg: #23223A;
        --info: #8FAAFF;
        --info-bg: #15224A;
        --chart-direct: #9A8BFF;
        --chart-rnd: #4FD8BF;
        --chart-grid: #24223D;
        /* the older names that are not aliases of the ones above */
        --black: #000000;
        --grey-800: #DAD8EE;
        --grey-700: #C3C0DC;
        --grey-400: #6E6A93;
        --grey-50: #18172F;
        --accent-deep: #B1A6FF;
        --accent-soft: rgba(154, 139, 255, .14);
        --accent-glow: rgba(154, 139, 255, .30);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
    }

    html[data-theme="dark"] .modal-overlay,
    html[data-theme="dark"] .sidebar-backdrop { background: rgba(0, 0, 0, .62); }
    html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
    html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
    html[data-theme="dark"] .login-brand-panel { box-shadow: inset -1px 0 0 var(--border); }
}

/* The invoice sheet on screen is paper: the Exergy letterhead's palette, the same in both themes. No colour of
   its own here: INVOICE_DOC_CSS (oracle-core.js) owns the sheet's ink, and this selector would outrank it. */
.invoice-print {
    color-scheme: light;
    --black: #081109;
    --grey-950: #0f2113;
    --grey-900: #13271e;
    --grey-800: #27322b;
    --grey-700: #3e4942;
    --grey-600: #566058;
    --grey-500: #5c6a63;
    --grey-400: #9ca8a1;
    --grey-300: #c2cec6;
    --grey-200: #dce4dd;
    --grey-100: #f1f4ef;
    --grey-50: #f4f7f5;
    --white: #ffffff;
    --canvas: #fdfdfb;
    --vault: #112613;
    --accent: #1c6b45;
    --accent-deep: #124e32;
    --accent-bright: #2f9d63;
    --accent-soft: rgba(28, 107, 69, .12);
    --accent-glow: rgba(47, 157, 99, .4);
    --success: #21623c;
    --warning: #8c5814;
    --danger: #c2403a;
    --info: #1c6b45;
    background: #fff;
}

@media print {
    .theme-toggle { display: none !important; }
}