/**
 * CSS Custom Properties (Variables)
 * Shared across all pages for consistent theming
 */

:root {
    /* Primary Colors */
    --primary-color: #0d6efd;
    --primary-dark: #0b5ed7;
    --primary-light: #6ea8fe;

    /* Brand Colors — repointed 2026-07-30 to a green/amber palette (from the EDR/Bel-Cafe Digital
       training material's design language, adopted deliberately). Kept as a separate token from
       --primary-color so the legacy Bootstrap-blue utility classes below don't silently recolor. */
    --brand-color: #1a6b3a;
    --brand-dark: #0f4424;
    --brand-light: #2d9a56;
    --brand-color-rgb: 26, 107, 58;

    /* "-text" variants (added 2026-08-18) — same color in light mode (just aliases via var()), but
       given a brighter, dark-mode-only override below. Use these instead of the base token ONLY for
       foreground usage (outline-button text/border, bare icon color, .trend-* badges) — anywhere the
       color sits directly on --bg-card/--bg-primary with nothing behind it. Never use them for a
       filled background (solid button, status-badge pill, SweetAlert confirmButtonColor): the base
       --brand-color/--status-success/--status-danger/--status-secondary values are deliberately dark
       enough to keep white text readable on top, and the brighter -text values would fail that same
       check if used as a fill. See the dark-mode block below for why a single shared token can't
       serve both jobs at once. */
    --brand-color-text: var(--brand-color);
    --status-success-text: var(--status-success);
    --status-danger-text: var(--status-danger);
    --status-secondary-text: var(--status-secondary);

    /* Accent Colors (amber — secondary calls-to-action, tips/highlights, warm contrast to the
       green brand color) */
    --accent-color: #f59e0b;
    --accent-light: #fef3c7;
    --accent-dark: #b45309;
    --accent-color-rgb: 245, 158, 11;

    /* Breakpoints (documented values — existing hardcoded @media px values are left as-is,
       CSS custom properties can't be used inside @media conditions) */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;

    /* Secondary Colors */
    --secondary-color: #f8f9fa;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --hover-color: #e2f0ff;
    
    /* Background Colors */
    --bg-primary: #f9fafb;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    
    /* Table Colors */
    --table-odd-row: #edf5ff;
    --table-even-row: #ffffff;
    --table-hover: #e2f0ff;
    
    /* Status Colors */
    --status-success: #198754;
    --status-warning: #fd7e14;
    --status-danger: #dc3545;
    --status-info: #0dcaf0;
    --status-secondary: #6c757d;
    
    /* Room Status Colors */
    --status-vacant-ready: #198754;
    --status-vacant-clean: #20c997;
    --status-vacant-dirty: #fd7e14;
    --status-occupied-ready: #dc3545;
    --status-occupied-clean: #e83e8c;
    --status-occupied-dirty: #6f42c1;
    --status-maintenance: #6c757d;
    --status-unknown: #adb5bd;
    
    /* Occupancy Colors */
    --occ-high: #dc3545;
    --occ-medium: #fd7e14;
    --occ-low: #198754;

    /* Alert colors (light-pastel-bg + dark-text pairs, Bootstrap's classic .alert-* look) - kept
       as tokens rather than hardcoded in components.css's .alert-* rules specifically so dark mode
       (below) can redefine them without fighting a hardcoded value on a more-specific selector. */
    --alert-info-bg: #d1ecf1;
    --alert-info-border: #bee5eb;
    --alert-info-text: #0c5460;
    --alert-warning-bg: #fff3cd;
    --alert-warning-border: #ffeaa7;
    --alert-warning-text: #856404;
    --alert-success-bg: #d4edda;
    --alert-success-border: #c3e6cb;
    --alert-success-text: #155724;
    --alert-danger-bg: #f8d7da;
    --alert-danger-border: #f5c6cb;
    --alert-danger-text: #721c24;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing — modestly widened 2026-07-30 for a less cramped feel (matches the training
       material's ~8-32px rhythm); still additive-only sizes, no layout logic depends on the old
       exact px values */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius — enlarged 2026-07-30 to the training material's more generous, modern card
       radius (16px) */
    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-pill: 999px;

    /* Shadows — softened/enlarged 2026-07-30 to a more diffused, less "hard-edged" look */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark mode (added 2026-08-18, pilot: sales-call/meeting-room - see docs/architecture.md's "Dark
   mode" section). includes/layout/page.php sets data-bs-theme explicitly (from a saved choice or
   the OS preference) before first paint via an inline <head> script, so this only ever needs the
   explicit-attribute selector - no @media (prefers-color-scheme) fallback needed, the attribute is
   always present by the time CSS is parsed. Only the "surface" tokens (text/background/border/
   table/shadow) get redefined; --brand-color/--status-*/--occ-* stay the same in both themes -
   they were already chosen to read fine on both a white and a dark card background.

   Selector is `html[data-bs-theme="dark"]`, deliberately NOT `:root[data-bs-theme="dark"]`, AND
   every declaration below is `!important` - both found necessary via extensive live debugging
   (isolated minimal repros, CDP CSS.getMatchedStylesForNode inspection, real Playwright screenshots
   - not just reading the spec) against a real, reproducible interaction with Bootstrap 5.3's own
   CSS: Bootstrap ships many small `[data-bs-theme=dark]{...}` rules (bare attribute selector, no
   :root) throughout its file for individual components, touching only its own --bs-* vars. Despite
   `:root[data-bs-theme="dark"]` having higher calculated specificity than any of those and the
   selector genuinely matching (confirmed via querySelector), the browser silently failed to apply
   this block's custom properties whenever bootstrap.min.css was also loaded - switching the element
   part from `:root` to `html` alone wasn't sufficient either once the *full* Bootstrap file (not
   just one extracted rule) was back in the mix; only adding `!important` reliably won regardless.
   Root cause not fully explained by spec-level cascade math - treat this as a defensive, verified
   workaround for a real engine quirk, not a decorative !important. Verified against real Playwright
   renders across both pilot modules before trusting this explanation.

   Correction (2026-08-18): the claim above that "--brand-color/--status-*/--occ-* stay the same in
   both themes - they were already chosen to read fine on both a white and a dark card background"
   was wrong for foreground usage. Real screenshots from production_report.php/weekly_comment.php
   showed .btn-outline-brand pills and export buttons reading as barely-visible dark green on
   #1e2126 - measured contrast ~2.5:1 (WCAG needs 4.5:1), same problem for --status-success/-danger/
   -secondary used as plain text/icon color. Backgrounds (.btn-brand, .status-badge fills,
   confirmButtonColor) were fine as-is - white text on the dark base color is what those colors were
   actually tuned for. So instead of changing the base tokens (which would break every solid-fill
   usage the other way), only the new --*-text tokens declared above get a brighter override here;
   --status-warning-text/--status-info-text were not added since the base warning/info colors already
   measure comfortably above 4.5:1 on a dark card. */
html[data-bs-theme="dark"] {
    --secondary-color: #22252a !important;
    --text-color: #e8eaed !important;
    --text-muted: #9aa0a6 !important;
    --border-color: #3c4043 !important;
    --hover-color: #2a3138 !important;

    --bg-primary: #16181c !important;
    --bg-card: #1e2126 !important;
    --bg-header: #1e2126 !important;

    --table-odd-row: #23262b !important;
    --table-even-row: #1e2126 !important;
    --table-hover: #2a3138 !important;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5) !important;

    --alert-info-bg: #17313a !important;
    --alert-info-border: #234855 !important;
    --alert-info-text: #7fd4e8 !important;
    --alert-warning-bg: #3d3418 !important;
    --alert-warning-border: #57491f !important;
    --alert-warning-text: #ffd97a !important;
    --alert-success-bg: #17331f !important;
    --alert-success-border: #204a2b !important;
    --alert-success-text: #7fd99a !important;
    --alert-danger-bg: #3a1b1e !important;
    --alert-danger-border: #532529 !important;
    --alert-danger-text: #f0a3a8 !important;

    --brand-color-text: #3cb371 !important;
    --status-success-text: #3cb371 !important;
    --status-danger-text: #ea868f !important;
    --status-secondary-text: #a7acb1 !important;
}