/* ================================================================
   WindCore Design System — Theme & Accessibility
   ----------------------------------------------------------------
   Three modes: Light (default), Dark, Night
   Night mode optimized for first responders working in darkness.

   Usage on .page element:
     data-bs-theme="light"                        → Light
     data-bs-theme="dark"                         → Dark
     data-bs-theme="dark" data-wind-mode="night"  → Night
   ================================================================ */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */

:root {
    /* Typography */
    --wind-font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --wind-font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --wind-font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    --wind-text-xs: 0.75rem;
    --wind-text-sm: 0.8125rem;
    --wind-text-base: 0.9375rem;
    --wind-text-lg: 1.125rem;
    --wind-text-xl: 1.5rem;
    --wind-text-2xl: 2rem;
    --wind-text-3xl: 2.5rem;

    --wind-weight-normal: 400;
    --wind-weight-medium: 500;
    --wind-weight-semibold: 600;
    --wind-weight-bold: 700;

    /* Geometry */
    --wind-radius-xs: 0.25rem;
    --wind-radius-sm: 0.375rem;
    --wind-radius-md: 0.5rem;
    --wind-radius-lg: 0.75rem;
    --wind-radius-xl: 1rem;
    --wind-radius-full: 9999px;

    /* Motion */
    --wind-duration-fast: 120ms;
    --wind-duration-base: 200ms;
    --wind-duration-slow: 350ms;
    --wind-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── LIGHT MODE (default) ─── */

    /* Surfaces */
    --wind-bg-base: #f6f5f2;
    --wind-bg-surface: #ffffff;
    --wind-bg-elevated: #f0efeb;
    --wind-bg-sidebar: #f3f2ee;
    --wind-bg-input: #ffffff;
    --wind-bg-hover: #eae9e3;
    --wind-bg-active: #e0dfd8;
    --wind-bg-overlay: rgba(30, 28, 24, 0.45);

    /* Text */
    --wind-text-primary: #1a1a1f;
    --wind-text-secondary: #58564e;
    --wind-text-muted: #8e8b82;
    --wind-text-on-accent: #ffffff;
    --wind-text-link: #2c5a8c;
    --wind-text-link-hover: #1d4872;

    /* Semantic */
    --wind-accent: #2c5a8c;
    --wind-accent-hover: #23497a;
    --wind-accent-subtle: rgba(44, 90, 140, 0.08);
    --wind-success: #287838;
    --wind-success-subtle: rgba(40, 120, 56, 0.08);
    --wind-warning: #96780e;
    --wind-warning-subtle: rgba(150, 120, 14, 0.08);
    --wind-danger: #b22828;
    --wind-danger-subtle: rgba(178, 40, 40, 0.08);
    --wind-info: #286898;
    --wind-info-subtle: rgba(40, 104, 152, 0.08);

    /* Borders */
    --wind-border: #dbd9d2;
    --wind-border-subtle: #e7e5de;
    --wind-border-strong: #c2c0b8;

    /* Elevation */
    --wind-shadow-sm: 0 1px 3px rgba(30, 28, 24, 0.06);
    --wind-shadow-md: 0 3px 10px rgba(30, 28, 24, 0.08);
    --wind-shadow-lg: 0 10px 30px rgba(30, 28, 24, 0.12);

    /* Focus */
    --wind-focus-ring: 0 0 0 2px var(--wind-bg-surface), 0 0 0 4px var(--wind-accent);
}

/* ═══════════════════════════════════════════
   DARK MODE
   Modern dark with warm undertones
   ═══════════════════════════════════════════ */

[data-bs-theme="dark"] {
    --wind-bg-base: #111115;
    --wind-bg-surface: #19191f;
    --wind-bg-elevated: #212127;
    --wind-bg-sidebar: #0d0d11;
    --wind-bg-input: #19191f;
    --wind-bg-hover: #272730;
    --wind-bg-active: #2e2e38;
    --wind-bg-overlay: rgba(0, 0, 0, 0.6);

    --wind-text-primary: #dbd8d0;
    --wind-text-secondary: #98958c;
    --wind-text-muted: #68655c;
    --wind-text-on-accent: #ffffff;
    --wind-text-link: #7c9ec6;
    --wind-text-link-hover: #98b4d4;

    --wind-accent: #6890c2;
    --wind-accent-hover: #7ca0ce;
    --wind-accent-subtle: rgba(104, 144, 194, 0.1);
    --wind-success: #58985a;
    --wind-success-subtle: rgba(88, 152, 90, 0.1);
    --wind-warning: #c2a248;
    --wind-warning-subtle: rgba(194, 162, 72, 0.1);
    --wind-danger: #c25656;
    --wind-danger-subtle: rgba(194, 86, 86, 0.1);
    --wind-info: #5888a8;
    --wind-info-subtle: rgba(88, 136, 168, 0.1);

    --wind-border: #28282e;
    --wind-border-subtle: #202026;
    --wind-border-strong: #383840;

    --wind-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --wind-shadow-md: 0 3px 10px rgba(0, 0, 0, 0.35);
    --wind-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

    --wind-focus-ring: 0 0 0 2px var(--wind-bg-surface), 0 0 0 4px var(--wind-accent);
}

/* ═══════════════════════════════════════════
   NIGHT MODE
   Ultra-dim for first responders in darkness.
   Warm amber accents. No bright areas. No flashing.
   ═══════════════════════════════════════════ */

[data-wind-mode="night"] {
    --wind-bg-base: #07070a;
    --wind-bg-surface: #0c0c10;
    --wind-bg-elevated: #141418;
    --wind-bg-sidebar: #050508;
    --wind-bg-input: #0c0c10;
    --wind-bg-hover: #1a1a20;
    --wind-bg-active: #202026;
    --wind-bg-overlay: rgba(0, 0, 0, 0.78);

    --wind-text-primary: #a8a49a;
    --wind-text-secondary: #706c62;
    --wind-text-muted: #464340;
    --wind-text-on-accent: #dcd8cc;
    --wind-text-link: #806e42;
    --wind-text-link-hover: #968258;

    --wind-accent: #72643e;
    --wind-accent-hover: #82744e;
    --wind-accent-subtle: rgba(114, 100, 62, 0.1);
    --wind-success: #3e623a;
    --wind-success-subtle: rgba(62, 98, 58, 0.08);
    --wind-warning: #625420;
    --wind-warning-subtle: rgba(98, 84, 32, 0.08);
    --wind-danger: #562828;
    --wind-danger-subtle: rgba(86, 40, 40, 0.08);
    --wind-info: #384e66;
    --wind-info-subtle: rgba(56, 78, 102, 0.08);

    --wind-border: #161618;
    --wind-border-subtle: #101014;
    --wind-border-strong: #242428;

    --wind-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --wind-shadow-md: 0 3px 10px rgba(0, 0, 0, 0.6);
    --wind-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);

    --wind-focus-ring: 0 0 0 2px var(--wind-bg-surface), 0 0 0 4px var(--wind-accent);

    /* Override FluentUI design tokens for ultra-dim night */
    --neutral-fill-layer-rest: var(--wind-bg-base);
    --neutral-foreground-rest: var(--wind-text-primary);
    --neutral-fill-rest: var(--wind-bg-elevated);
    --neutral-stroke-rest: var(--wind-border);

    /* Override Bootstrap dark-mode variables for night */
    --bs-body-bg: var(--wind-bg-base);
    --bs-body-color: var(--wind-text-primary);
    --bs-border-color: var(--wind-border);
    --bs-link-color: var(--wind-text-link);
    --bs-link-hover-color: var(--wind-text-link-hover);
    --bs-emphasis-color: var(--wind-text-primary);
    --bs-secondary-bg: var(--wind-bg-elevated);
    --bs-secondary-color: var(--wind-text-secondary);
    --bs-tertiary-bg: var(--wind-bg-hover);
    --bs-tertiary-color: var(--wind-text-muted);
    --bs-card-bg: var(--wind-bg-surface);
    --bs-card-border-color: var(--wind-border);
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */

html, body, main {
    font-family: var(--wind-font-body);
    font-size: var(--wind-text-base);
    font-weight: var(--wind-weight-normal);
    line-height: 1.6;
    color: var(--wind-text-primary);
    background: var(--wind-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--wind-font-display);
    font-weight: var(--wind-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--wind-text-primary);
}

/* ═══════════════════════════════════════════
   BOOTSTRAP COMPONENT OVERRIDES
   Bridge Bootstrap to our design tokens
   ═══════════════════════════════════════════ */

/* --- Links --- */
a {
    color: var(--wind-text-link);
    transition: color var(--wind-duration-fast) var(--wind-easing);
}
a:hover {
    color: var(--wind-text-link-hover);
}

/* --- Cards --- */
.card {
    background: var(--wind-bg-surface);
    border-color: var(--wind-border);
    border-radius: var(--wind-radius-lg);
    box-shadow: var(--wind-shadow-sm);
}
.card-header {
    background: var(--wind-bg-elevated);
    border-bottom-color: var(--wind-border);
}

/* --- Tables --- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wind-border-subtle);
    color: var(--wind-text-primary);
}
.table > thead {
    color: var(--wind-text-secondary);
}
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: var(--wind-bg-hover);
    color: var(--wind-text-primary);
}

/* --- Forms --- */
.form-control, .form-select {
    background-color: var(--wind-bg-input);
    border-color: var(--wind-border);
    color: var(--wind-text-primary);
    border-radius: var(--wind-radius-sm);
    transition: border-color var(--wind-duration-fast), box-shadow var(--wind-duration-fast);
}
.form-control:focus, .form-select:focus {
    background-color: var(--wind-bg-input);
    border-color: var(--wind-accent);
    box-shadow: var(--wind-focus-ring);
    color: var(--wind-text-primary);
}
.form-control::placeholder {
    color: var(--wind-text-muted);
}
.form-label {
    color: var(--wind-text-secondary);
    font-weight: var(--wind-weight-medium);
    font-size: var(--wind-text-sm);
}
.form-check-input:checked {
    background-color: var(--wind-accent);
    border-color: var(--wind-accent);
}
.form-check-input:focus {
    box-shadow: var(--wind-focus-ring);
}

/* --- Buttons --- */
.btn {
    border-radius: var(--wind-radius-sm);
    font-weight: var(--wind-weight-medium);
    transition: all var(--wind-duration-fast) var(--wind-easing);
}
.btn:focus-visible {
    box-shadow: var(--wind-focus-ring);
}
.btn-primary {
    background-color: var(--wind-accent);
    border-color: var(--wind-accent);
    color: var(--wind-text-on-accent);
}
.btn-primary:hover {
    background-color: var(--wind-accent-hover);
    border-color: var(--wind-accent-hover);
}

/* --- Alerts --- */
.alert {
    border-radius: var(--wind-radius-md);
}

/* --- Badges --- */
.badge {
    font-weight: var(--wind-weight-medium);
}

/* --- Modals --- */
.modal-content {
    background: var(--wind-bg-surface);
    border-color: var(--wind-border);
    border-radius: var(--wind-radius-lg);
    box-shadow: var(--wind-shadow-lg);
}
.modal-header {
    border-bottom-color: var(--wind-border);
}
.modal-footer {
    border-top-color: var(--wind-border);
}

/* --- Dropdowns --- */
.dropdown-menu {
    background-color: var(--wind-bg-surface);
    border-color: var(--wind-border);
    box-shadow: var(--wind-shadow-md);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--wind-bg-hover);
}

/* --- Nav pills --- */
.nav-pills .nav-link.active {
    background-color: var(--wind-accent);
    color: var(--wind-text-on-accent);
}

/* ═══════════════════════════════════════════
   WINDAPP UI COMPONENTS
   ═══════════════════════════════════════════ */

/* Skip-to-content link (hidden until focused) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--wind-accent);
    color: var(--wind-text-on-accent);
    font-family: var(--wind-font-display);
    font-weight: var(--wind-weight-semibold);
    font-size: var(--wind-text-sm);
    text-decoration: none;
    border-radius: 0 0 var(--wind-radius-md) 0;
    transition: top var(--wind-duration-fast) var(--wind-easing);
}
.skip-link:focus {
    top: 0;
    outline: none;
    color: var(--wind-text-on-accent);
}

/* Notification bell */
.wind-notification-btn {
    background: var(--wind-bg-elevated);
    border: 1px solid var(--wind-border);
    color: var(--wind-text-primary);
    border-radius: var(--wind-radius-sm);
}
.wind-notification-btn:hover {
    background: var(--wind-bg-hover);
}

/* Error boundary card */
.wind-error-card {
    border: none;
    overflow: hidden;
}
.wind-error-header {
    background: var(--wind-danger);
    color: var(--wind-text-on-accent);
    font-family: var(--wind-font-display);
}
.wind-error-body {
    background: var(--wind-danger-subtle);
    color: var(--wind-text-primary);
}
.wind-error-icon {
    font-size: 3rem;
    color: var(--wind-warning);
}

/* Footer badges */
.wind-badge-active {
    background: var(--wind-accent) !important;
    color: var(--wind-text-on-accent) !important;
}
.wind-badge-inactive {
    background: var(--wind-bg-elevated) !important;
    color: var(--wind-text-secondary) !important;
    border: 1px solid var(--wind-border);
}

/* Theme toggle */
.wind-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--wind-border);
    border-radius: var(--wind-radius-full);
    background: var(--wind-bg-elevated);
    color: var(--wind-text-secondary);
    cursor: pointer;
    transition: all var(--wind-duration-fast) var(--wind-easing);
}
.wind-theme-toggle:hover {
    background: var(--wind-bg-hover);
    color: var(--wind-text-primary);
    border-color: var(--wind-border-strong);
}
.wind-theme-toggle:focus-visible {
    box-shadow: var(--wind-focus-ring);
}

/* Sidebar */
.wind-sidebar-bg {
    background: var(--wind-bg-sidebar) !important;
}

/* Admin nav section */
.wind-admin-header {
    background: var(--wind-success) !important;
}
.wind-admin-link {
    color: var(--wind-text-on-accent) !important;
}
.wind-admin-item {
    background: var(--wind-success-subtle) !important;
    border-color: var(--wind-success) !important;
}

/* Nav helpers */
.wind-nav-icon {
    font-size: 1em;
}
.wind-nav-caret {
    font-size: 0.7rem;
}

/* Footer */
.wind-footer {
    color: var(--wind-text-muted);
}
.wind-footer a {
    color: var(--wind-text-link);
}
.wind-footer-divider {
    border-color: var(--wind-border);
}

/* Brand */
.wind-brand-text {
    font-family: var(--wind-font-display);
    font-weight: var(--wind-weight-semibold);
}

/* Tooltip (global) */
#tooltip {
    background: var(--wind-bg-surface);
    color: var(--wind-text-primary);
    border: 1px solid var(--wind-border);
    border-radius: var(--wind-radius-sm);
    padding: 0.375rem 0.625rem;
    box-shadow: var(--wind-shadow-md);
    font-size: var(--wind-text-sm);
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════ */

/* Reduced motion: disable ALL animations */
@media (prefers-reduced-motion: reduce) {
    .wiggle, .spin, .elastic-spin, .pulse, .flash,
    .hithere, .grow, .fade-in, .fade-out, .bounce, .bounce2,
    .shake, .flip, .swing, .wobble, .gelatine,
    .fade-in-down, .fade-in-left, .fade-out-down, .fade-out-right,
    .bounce-in, .bounce-in-right, .bounce-out, .bounce-out-down,
    .rotate-in-down-left, .rotate-in-up-left,
    .hinge, .roll-in, .roll-out, .cardshine, .flash-border {
        animation: none !important;
    }
    .zoom {
        transition: none !important;
    }
}

/* Night mode: disable flashing/pulsing (keep functional animations) */
[data-wind-mode="night"] .flash,
[data-wind-mode="night"] .flash-border,
[data-wind-mode="night"] .pulse,
[data-wind-mode="night"] .hithere,
[data-wind-mode="night"] .gelatine,
[data-wind-mode="night"] .cardshine {
    animation: none !important;
}

/* Night mode: smooth transitions for status changes */
[data-wind-mode="night"] .card,
[data-wind-mode="night"] .badge,
[data-wind-mode="night"] .alert,
[data-wind-mode="night"] .btn {
    transition: background-color var(--wind-duration-slow) var(--wind-easing),
                color var(--wind-duration-slow) var(--wind-easing),
                border-color var(--wind-duration-slow) var(--wind-easing);
}

/* High contrast override */
@media (prefers-contrast: more) {
    :root {
        --wind-border: #8a8880;
        --wind-border-strong: #5a5850;
        --wind-text-secondary: #3a3830;
    }
    [data-bs-theme="dark"] {
        --wind-border: #6a6a72;
        --wind-border-strong: #8a8a92;
        --wind-text-secondary: #c0bdb5;
    }
    [data-wind-mode="night"] {
        --wind-border: #484848;
        --wind-border-strong: #686868;
        --wind-text-primary: #c8c4b8;
        --wind-text-secondary: #908c80;
    }
}

/* ═══════════════════════════════════════════
   WIND STATUS & MAPS COMPONENTS
   ═══════════════════════════════════════════ */

/* Status card (ViewCustomMode components) */
.wind-status-card {
    background: var(--wind-bg-surface);
    border: 1px solid var(--wind-border);
    border-radius: var(--wind-radius-lg);
    transition: background-color var(--wind-duration-base) var(--wind-easing),
                border-color var(--wind-duration-base) var(--wind-easing);
}

.wind-status-heading {
    color: var(--wind-accent);
}

.wind-status-row-alt {
    background-color: var(--wind-bg-elevated);
    border-radius: var(--wind-radius-xs);
}

/* SVG theming for wind rose elements */
.wind-svg-center {
    fill: rgb(91, 131, 198);
}
.wind-svg-indicator {
    fill: rgb(89, 76, 127);
}
.wind-svg-card-bg {
    fill: rgb(255, 255, 255);
    opacity: 0.5;
}

[data-bs-theme="dark"] .wind-svg-center {
    fill: rgb(104, 144, 194);
}
[data-bs-theme="dark"] .wind-svg-indicator {
    fill: rgb(120, 106, 168);
}
[data-bs-theme="dark"] .wind-svg-card-bg {
    fill: var(--wind-bg-surface);
    opacity: 0.7;
}

[data-wind-mode="night"] .wind-svg-center {
    fill: rgb(114, 100, 62);
}
[data-wind-mode="night"] .wind-svg-indicator {
    fill: rgb(80, 68, 48);
}
[data-wind-mode="night"] .wind-svg-card-bg {
    fill: var(--wind-bg-surface);
    opacity: 0.8;
}

/* Maps cards */
.wind-maps-card {
    height: 16rem;
    background: var(--wind-bg-surface);
    border: 1px solid var(--wind-border);
    border-radius: var(--wind-radius-md);
}

.wind-maps-thumb-wrap {
    height: 11rem;
    background: var(--wind-accent-subtle);
    border-radius: var(--wind-radius-sm);
}

.wind-maps-thumb {
    height: 10rem;
    margin-top: 0.5rem;
}

.wind-maps-placeholder {
    height: 11rem;
    font-size: 5rem;
    background: var(--wind-bg-elevated);
    border-radius: var(--wind-radius-sm);
}

/* ═══════════════════════════════════════════
   WIND MODULE COMPONENT UTILITIES
   Theme-aware classes for Wind module pages
   ═══════════════════════════════════════════ */

/* Elevated container background (replaces inline lightgrey) */
.wind-bg-muted {
    background-color: var(--wind-bg-elevated);
    transition: background-color var(--wind-duration-base) var(--wind-easing);
}

/* Department selector button sizing (replaces inline padding/border-radius) */
.wind-btn-department {
    padding: 1em;
    border-radius: var(--wind-radius-md);
}

/* Status statistics colors */
.wind-stat-success {
    color: var(--wind-success);
    font-weight: var(--wind-weight-bold);
}
.wind-stat-accent {
    color: var(--wind-accent);
    font-weight: var(--wind-weight-bold);
}

/* Muted secondary text (replaces inline color:gray) */
.wind-text-detail {
    color: var(--wind-text-muted);
}

/* Hint text (replaces inline color:lightgray) */
.wind-text-hint {
    color: var(--wind-text-muted);
    font-size: var(--wind-text-sm);
}

/* Truncated text */
.wind-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Large icon (replaces inline font-size:5em) */
.wind-icon-hero {
    font-size: 5em;
}

/* Night mode: smooth transitions for live status containers */
[data-wind-mode="night"] .wind-bg-muted {
    transition: background-color var(--wind-duration-slow) var(--wind-easing);
}

/* Legend container (replaces bg-light for theme-awareness) */
.wind-legend {
    background-color: var(--wind-bg-elevated);
    border-radius: var(--wind-radius-sm);
    padding: 0.5rem;
}

/* Transfer arrow indicators */
.wind-transfer-arrow {
    display: inline-block;
}