/* ============================================
   OSP Unified Design Tokens — Light + Dark Mode
   Shared across all OSP apps (Intranet, NZA, RMS)
   ============================================ */

/* Flash-Prevention: No transitions during initial load */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
    transition: none !important;
}

/* ── Light Mode (Default) ─────────────────── */
:root {
    --color-primary: #0080C9;
    --color-primary-dark: #006699;
    --color-primary-deep: #003366;
    --color-primary-light: #38BDF8;
    --color-accent: #DC500F;
    --color-accent-dark: #B8420C;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    --color-purple: #6f42c1;

    --color-bg: #F8FAFC;
    --color-card: #FFFFFF;
    --color-bg-light: #F1F5F9;
    --color-border: #E2E8F0;
    --color-border-light: #F1F5F9;
    --color-text: #1E293B;
    --color-text-muted: #475569;
    --color-text-lighter: #94A3B8;

    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-loading-bg: rgba(255, 255, 255, 0.9);
    --color-hover-row: #f0f7fc;
    --color-table-stripe: #f8f9fa;

    --shadow-unified: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-hover-unified: 0 4px 12px rgba(0, 128, 201, 0.15);
    --color-input-border: #E2E8F0;
    --shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px rgba(0, 128, 201, 0.15);
}

/* ── Dark Mode ────────────────────────────── */
html.dark {
    --color-primary: #38BDF8;
    --color-primary-dark: #0EA5E9;
    --color-primary-deep: #0284C7;
    --color-primary-light: #7DD3FC;
    --color-accent: #FB923C;
    --color-accent-dark: #F97316;
    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-danger: #F87171;
    --color-info: #22D3EE;
    --color-purple: #A78BFA;

    --color-bg: #0F172A;
    --color-card: #1E293B;
    --color-bg-light: #253349;
    --color-border: #475569;
    --color-border-light: #334155;
    --color-text: #F1F5F9;
    --color-text-muted: #CBD5E1;
    --color-text-lighter: #94A3B8;

    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-loading-bg: rgba(15, 23, 42, 0.9);
    --color-hover-row: rgba(56, 189, 248, 0.08);
    --color-table-stripe: rgba(30, 41, 59, 0.5);

    --shadow-unified: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-hover-unified: 0 4px 12px rgba(0, 0, 0, 0.4);
    --color-input-border: #475569;
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* ── Smooth Transitions ───────────────────── */
body,
header,
main,
footer,
.app-card,
.kpi-card,
.chart-card,
.chart-container,
.modal-content,
.table-section,
.status-bar,
.quicklink,
input,
select,
textarea {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* ── Theme Toggle Button ──────────────────── */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.theme-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ── Shared Header Buttons (NZA + RMS) ───── */
.header-link {
    color: white;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    font-size: .82rem;
    font-weight: 600;
    transition: background 0.2s ease;
}

.header-link:hover {
    background: rgba(255,255,255,.22);
    text-decoration: none;
}

.header-btn-primary {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: var(--color-accent);
    color: white;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.header-btn-primary:hover {
    background: var(--color-accent-dark);
}

.header-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    color: white;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
}

.header-select option {
    background: var(--color-card);
    color: var(--color-text);
}

/* ── Print: Force Light Mode ──────────────── */
@media print {
    html.dark {
        --color-primary: #0080C9;
        --color-primary-dark: #006699;
        --color-bg: #FFFFFF;
        --color-card: #FFFFFF;
        --color-bg-light: #F1F5F9;
        --color-border: #E2E8F0;
        --color-text: #1E293B;
        --color-text-muted: #475569;
    }

    .theme-toggle-btn {
        display: none !important;
    }
}