/* Existing component colors are the dark fallbacks. Light mode supplies semantic
   colors here so tables, charts, forms and dialogs share the same palette. */
:root {
    color-scheme: dark;
}

:root[data-theme="light"] {
    color-scheme: light;
    --background: #f3f6fb;
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-light: #eaf0f8;
    --border: #ced9e7;
    --text: #182b49;
    --muted: #526783;
    --cyan: #006d91;
    --blue: #2264cc;
    --purple: #7139c6;
    --green: #11794d;
    --orange: #9a5800;
    --red: #c32f4b;
    --theme-ink: var(--text);
    --theme-muted: var(--muted);
    --theme-link: var(--cyan);
    --theme-purple: var(--purple);
    --theme-success: var(--green);
    --theme-warning: var(--orange);
    --theme-danger: var(--red);
    --theme-on-accent: #ffffff;
    --theme-panel: #ffffff;
    --theme-panel-soft: #edf3fa;
    --theme-success-soft: #e2f4e9;
    --theme-danger-soft: #fce9ee;
    --theme-hover: rgba(24, 55, 92, .045);
    --theme-line: #b8c9dd;
    --theme-grid: #cbd7e7;
    --theme-shadow: rgba(27, 49, 80, .14);
}

.ainoc-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 7px;
    min-height: 34px;
    padding: 6px 10px;
    margin-right: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.ainoc-theme-toggle:hover { background: var(--surface-light); }
.ainoc-theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ainoc-theme-toggle:disabled { opacity: .6; cursor: wait; }
.ainoc-login-theme { position: fixed; top: 18px; right: 14px; z-index: 1400; }
.ainoc-switch-to-dark { display: none; }
:root[data-theme="light"] .ainoc-switch-to-light { display: none; }
:root[data-theme="light"] .ainoc-switch-to-dark { display: inline; }

/* Native dropdowns and date fields follow the selected theme too. */
input, select, textarea { color-scheme: inherit; }
select option, select optgroup { background: var(--surface); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

@media (max-width: 900px) {
    .ainoc-appbar .ainoc-theme-toggle span { display: none; }
    .ainoc-appbar .ainoc-theme-toggle { width: 34px; padding: 6px; margin-right: 4px; }
}

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