/* =====================================================
   REQ-OPS-008: Dark/light mode - smooth transition layer
   and supplementary dark-mode overrides.

   Core CSS custom property overrides live in zenohr-design.css
   under [data-theme="dark"]. This file adds:
   1. Smooth transition on theme swap for all elements
   2. Additional dark-mode brand color adjustments per design-tokens.md
   3. Form, modal, scrollbar, and selection dark variants
   ===================================================== */

/* ── Smooth theme transition ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Opt out of transition for elements that need instant updates */
.no-theme-transition,
.no-theme-transition *,
canvas,
video,
iframe {
    transition: none !important;
}

/* ── Dark mode brand color adjustments (design-tokens.md) ──────────────── */
[data-theme="dark"] {
    /* Brand colors - lighter for dark backgrounds per design-tokens.md */
    --brand-primary: #8a684f;
    --brand-primary-hover: #9b7459;
    --brand-primary-active: #a47864;
    --brand-accent: #5d473e;
    --brand-accent-hover: #71574c;
    --brand-accent-subtle: #2d211b;

    /* Text */
    --text-on-accent: #ffffff;
    --text-link: #ddc9bc;
    --text-link-hover: #f2e7df;
    --text-on-sidebar: #e4d9d2;

    /* Borders - focus ring for dark mode */
    --border-focus: #8a684f;
    --border-error: #f87171;

    /* Semantic - brighter for dark mode contrast */
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #60a5fa;

    /* Shadows - focus ring */
    --shadow-focus: 0 0 0 3px rgba(138, 104, 79, 0.35);

    /* Table stripe for dark */
    --bg-table-stripe: #1d140f;
}

/* ── Form inputs ──────────────────────────────────────────────────────────── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}

[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
    background-color: var(--bg-input-disabled);
    color: var(--text-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .btn-primary {
    background: var(--brand-primary);
    color: var(--text-on-primary);
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--brand-primary-hover);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}

/* ── Modals & elevated surfaces ───────────────────────────────────────────── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] table th {
    background: var(--bg-table-header);
    color: var(--text-secondary);
    border-color: var(--border-default);
}

[data-theme="dark"] table td {
    border-color: var(--border-subtle);
}

[data-theme="dark"] table tr:nth-child(even) {
    background: var(--bg-table-stripe);
}

[data-theme="dark"] table tr:hover {
    background: var(--bg-surface-hover);
}

/* ── Scrollbar (Webkit) ───────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-page);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Text selection ───────────────────────────────────────────────────────── */
[data-theme="dark"] ::selection {
    background: rgba(138, 104, 79, 0.35);
    color: #f1f5f9;
}

/* ── Glassmorphism dark variant (per design-tokens.md) ────────────────────── */
[data-theme="dark"] .glass-card {
    background: rgba(93, 71, 62, 0.16);
    border-color: rgba(138, 104, 79, 0.2);
}

/* ── Blazor error UI dark mode ────────────────────────────────────────────── */
[data-theme="dark"] #blazor-error-ui {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
}