/* ===========================
   LIGHT MODE (DEFAULT) — Brochure Aesthetic
   =========================== */
:root{
  /* Backgrounds — warm cream/sand palette */
  --base:#faf7f0;
  --card:#FFFFFF;
  --surface:#f0ebe2;
  --surface-alt:#e8e2d6;

  /* Borders & overlays — warm tint */
  --border:rgba(11,26,42,.10);
  --border-s:rgba(11,26,42,.18);
  --over:rgba(11,26,42,.03);
  --over-h:rgba(11,26,42,.06);

  /* Component-specific */
  --header-bg:rgba(11,26,42,.95);
  --nav-bg:rgba(11,26,42,.97);
  --sidebar-bg:rgba(11,26,42,.98);
  --sidebar-text:rgba(200,210,225,.55);
  --sidebar-text-hover:rgba(255,255,255,.85);
  --sidebar-active:var(--gold);
  --sidebar-active-bg:rgba(196,162,78,.10);
  --sidebar-w:56px;
  --sidebar-w-open:165px;
  --tab-pill:rgba(255,255,255,.10);
  --modal-bg:rgba(255,255,255,.99);
  --input-bg:rgba(11,26,42,.04);
  --input-focus:rgba(196,162,78,.06);
  --dropdown-bg:#FFFFFF;

  /* Gold accent — brochure warm gold */
  --gold:#c4a24e;
  --gold-l:#d4b462;
  --gold-d:rgba(196,162,78,.12);
  --gold-glow:rgba(196,162,78,.25);

  /* Scrollbar thumb — independent from --gold so users can tint the
     scrollbar without changing every button and focus ring in the app. */
  --scrollbar-thumb:#c4a24e;

  /* Highlight / selection accent — used by active filter pills, tab
     selection indicators, and any "selected" marker text. Independent
     from --gold so you can have gold buttons but a different highlight. */
  --highlight-text:#c4a24e;

  /* Profile avatar accent — used by the user-photo ring + initials
     background in the sidebar. Independent from --gold. */
  --avatar-color:#c4a24e;

  /* Semantic — warmer variants */
  --green:#1A8438;  --green-d:rgba(26,132,56,.10);
  --red:#C42B22;    --red-d:rgba(196,43,34,.10);
  --amber:#A86400;  --amber-d:rgba(168,100,0,.10);
  --blue:#0055B8;   --blue-d:rgba(0,85,184,.10);

  /* Text — warm navy hierarchy */
  --t1:#0b1a2a;
  --t2:#3a4a5e;
  --t3:#7a8a9a;

  /* Navy palette */
  --navy:#0b1a2a;
  --navy-light:#1a3a52;
  --navy-lighter:#2a5070;

  /* Shadows — warm undertone */
  --sh1:0 1px 3px rgba(11,26,42,.07),0 1px 2px rgba(11,26,42,.04);
  --sh2:0 4px 14px rgba(11,26,42,.09),0 2px 5px rgba(11,26,42,.04);
  --sh3:0 12px 40px rgba(11,26,42,.11),0 4px 12px rgba(11,26,42,.05);
  --sh4:0 24px 60px rgba(11,26,42,.15),0 8px 20px rgba(11,26,42,.07);

  /* Typography — Outfit primary, serif display */
  --f:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --fd:'Manrope',sans-serif;
  --fs:'Plus Jakarta Sans',sans-serif;
  --fn:'Plus Jakarta Sans',sans-serif;

  /* Radius */
  --r1:8px;--r2:12px;--r3:16px;--r4:20px;--r5:28px;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* ── Legacy compat vars used in app.js inline styles ── */
  --primary:#1a3a52;--primary-light:#2a5070;--primary-lighter:#3a6a8e;
  --accent:var(--gold);--accent-light:var(--gold-l);
  --bg-body:var(--base);--bg-card:var(--card);
  --bg-surface:var(--surface);--bg-surface-alt:var(--surface-alt);
  --text-primary:var(--t1);--text-secondary:var(--t2);--text-muted:var(--t3);
  --border-light:var(--border);
  --success:var(--green);--success-bg:var(--green-d);
  --danger:var(--red);--danger-bg:var(--red-d);
  --warning:var(--amber);--warning-bg:var(--amber-d);
  --info:var(--blue);--info-bg:var(--blue-d);
  --shadow-sm:var(--sh1);--shadow-md:var(--sh2);--shadow-lg:var(--sh3);--shadow-xl:var(--sh4);
  --radius-sm:var(--r1);--radius-md:var(--r2);--radius-lg:var(--r3);--radius-xl:var(--r4);
  --font-body:var(--f);--font-display:var(--fd);
  --transition:all .22s var(--ease);
}

/* ===========================
   DARK MODE — Navy-based
   =========================== */
body.dark-mode{
  --base:#0b1a2a;
  --card:rgba(255,255,255,.04);
  --surface:rgba(255,255,255,.03);
  --surface-alt:rgba(255,255,255,.05);

  --border:rgba(255,255,255,.10);
  --border-s:rgba(255,255,255,.18);
  --over:rgba(255,255,255,.03);
  --over-h:rgba(255,255,255,.065);

  --header-bg:rgba(7,14,24,.94);
  --nav-bg:rgba(7,14,24,.97);
  --sidebar-bg:rgba(7,14,24,.98);
  --sidebar-text:rgba(200,210,225,.55);
  --sidebar-text-hover:rgba(255,255,255,.85);
  --sidebar-active:var(--gold);
  --sidebar-active-bg:rgba(212,180,98,.12);
  --tab-pill:rgba(255,255,255,.07);
  --modal-bg:rgba(8,16,28,.99);
  --input-bg:rgba(255,255,255,.05);
  --input-focus:rgba(196,162,78,.06);
  --dropdown-bg:rgba(10,20,34,.98);

  --gold:#d4b462;
  --gold-l:#e8cc7a;
  --gold-d:rgba(212,180,98,.14);
  --gold-glow:rgba(212,180,98,.28);
  --scrollbar-thumb:#d4b462;
  --highlight-text:#d4b462;
  --avatar-color:#d4b462;

  --green:#30D158;  --green-d:rgba(48,209,88,.12);
  --red:#FF453A;    --red-d:rgba(255,69,58,.12);
  --amber:#FF9F0A;  --amber-d:rgba(255,159,10,.12);
  --blue:#007AFF;   --blue-d:rgba(0,122,255,.12);

  --t1:#f5f0e8;
  --t2:#c8c0b0;
  --t3:#78706a;

  --navy:#0b1a2a;
  --navy-light:#1a3a52;
  --navy-lighter:#2a5070;

  --sh1:0 1px 4px rgba(0,0,0,.35);
  --sh2:0 4px 20px rgba(0,0,0,.45);
  --sh3:0 12px 50px rgba(0,0,0,.55);
  --sh4:0 24px 80px rgba(0,0,0,.65);

  /* Legacy compat — make visible on dark bg */
  --primary:#4a8ab8;--primary-light:#5aa0d0;--primary-lighter:#70b8e8;
}

/* ===========================
   MAC MODE — Apple-inspired cool translucency
   =========================== */
body.mac-mode{
  /* Cool gray backgrounds like macOS */
  --base:#f5f5f7;
  --card:#ffffff;
  --surface:#ececee;
  --surface-alt:#e4e4e8;

  /* Apple-style borders */
  --border:rgba(0,0,0,.08);
  --border-s:rgba(0,0,0,.14);
  --over:rgba(0,0,0,.02);
  --over-h:rgba(0,0,0,.04);

  /* Component surfaces — frosted glass */
  --header-bg:rgba(255,255,255,.78);
  --nav-bg:rgba(255,255,255,.82);
  --sidebar-bg:rgba(245,245,247,.92);
  --tab-pill:rgba(0,0,0,.04);
  --modal-bg:rgba(255,255,255,.95);
  --input-bg:rgba(0,0,0,.03);
  --input-focus:rgba(0,122,255,.04);
  --dropdown-bg:rgba(255,255,255,.95);

  /* Gold accent stays but softened for cool palette */
  --gold:#a08030;
  --gold-l:#b89840;
  --gold-d:rgba(160,128,48,.10);
  --gold-glow:rgba(160,128,48,.18);
  --scrollbar-thumb:#a08030;
  --highlight-text:#a08030;
  --avatar-color:#a08030;

  /* Apple semantic colors */
  --green:#34c759;  --green-d:rgba(52,199,89,.10);
  --red:#ff3b30;    --red-d:rgba(255,59,48,.10);
  --amber:#ff9500;  --amber-d:rgba(255,149,0,.10);
  --blue:#007aff;   --blue-d:rgba(0,122,255,.10);

  /* Apple text hierarchy */
  --t1:#1d1d1f;
  --t2:#6e6e73;
  --t3:#aeaeb2;

  --navy:#1d1d1f;
  --navy-light:#3a3a3c;
  --navy-lighter:#636366;

  /* Apple shadows — very subtle */
  --sh1:0 0.5px 1px rgba(0,0,0,.05),0 0 0.5px rgba(0,0,0,.04);
  --sh2:0 2px 8px rgba(0,0,0,.08),0 0.5px 2px rgba(0,0,0,.04);
  --sh3:0 8px 30px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
  --sh4:0 20px 50px rgba(0,0,0,.14),0 4px 14px rgba(0,0,0,.06);

  /* Legacy compat */
  --primary:#3a3a3c;--primary-light:#636366;--primary-lighter:#8e8e93;
}

/* Mac mode — sidebar becomes light frosted glass */
body.mac-mode .sidebar{
  background:rgba(245,245,247,.88);
  backdrop-filter:blur(40px) saturate(1.8);
  -webkit-backdrop-filter:blur(40px) saturate(1.8);
  border-right:1px solid rgba(0,0,0,.08);
}
body.mac-mode{
  --sidebar-text:rgba(0,0,0,.45);
  --sidebar-text-hover:rgba(0,0,0,.7);
  --sidebar-active:#007aff;
  --sidebar-active-bg:rgba(0,122,255,.08);
}
body.mac-mode .sidebar-logo-text span{color:#1d1d1f}
body.mac-mode .sidebar-logo-text small{color:rgba(0,0,0,.3)}
body.mac-mode .sidebar-logo{border-bottom-color:rgba(0,0,0,.08)}
body.mac-mode .sidebar-logo img{filter:none;opacity:.6}
body.mac-mode .sidebar-user-name{color:rgba(0,0,0,.75)}
body.mac-mode .sidebar-user-role{color:rgba(0,0,0,.35)}
body.mac-mode .sidebar-user-role .role-value-new{color:#a08030}
body.mac-mode .sidebar-section-label{color:rgba(0,0,0,.2)}
/* mac sidebar footer uses the variables now */
body.mac-mode .sidebar-badge{background:#ff3b30}
body.mac-mode .sidebar-badge.warn{background:#ff9500}
body.mac-mode .sidebar-badge.doc{background:#007aff}

/* Mac mode — clock positions */
body.mac-mode .clock-sf-time{color:rgba(0,0,0,.5)}
body.mac-mode .clock-sf-date{color:rgba(0,0,0,.25)}
body.mac-mode .clock-sidebar-footer{border-top-color:rgba(0,0,0,.06)}
body.mac-mode .sidebar-user{border-top-color:rgba(0,0,0,.06)}
body.mac-mode .sidebar-footer{border-top-color:rgba(0,0,0,.06)}

/* Mac mode — buttons */
body.mac-mode .btn-primary{color:#fff}
body.mac-mode .mbtn-primary{color:#fff}
body.mac-mode .settings-btn-primary{color:#fff}
body.mac-mode .alert-btn-primary{color:#fff}

/* Mac mode — chat bubbles (iMessage style) */
body.mac-mode .chat-message.outgoing .chat-bubble{background:#007aff;color:#fff}
body.mac-mode .chat-send-btn{background:#007aff;color:#fff}
body.mac-mode .chat-send-btn:hover{background:#0066d6}

/* Mac mode — login stays dark navy (looks great on all themes) */

/* Mac mode — select options */
body.mac-mode .fmodal-input option{background:#fff;color:#1d1d1f}
body.mac-mode .language-select option{background:#fff;color:#1d1d1f}
body.mac-mode .form-group select option{background:#fff;color:#1d1d1f}
body.mac-mode select option,body.mac-mode select optgroup{background:#fff;color:#1d1d1f}

/* Dark mode — select & dropdown styling
   Without these, native browser <select> dropdowns inherit a light/grey colour
   on a white background — unreadable in dark mode. We force the popup options
   to use the dark theme's card colour with high-contrast text. The select
   element itself already picks up the dark theme via .fmodal-input rules. */
body.dark-mode .fmodal-input option,
body.dark-mode .language-select option,
body.dark-mode .form-group select option,
body.dark-mode select option,
body.dark-mode select optgroup{
  background:#1a2638;
  color:#f5f0e8;
}
body.dark-mode .fmodal-input,
body.dark-mode .language-select,
body.dark-mode .form-group select,
body.dark-mode select{
  color:#f5f0e8;
  background:rgba(255,255,255,.05);
}
body.dark-mode .fmodal-input::placeholder{color:rgba(245,240,232,.5)}

/* Mac mode — ambient gradient */
body.mac-mode::before{
  background:
    radial-gradient(ellipse 60% 40% at 25% 0%,rgba(0,122,255,.03) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 100%,rgba(160,128,48,.03) 0%,transparent 55%);
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Pin html to viewport so the body can never scroll. All scrolling
     happens inside .dashboard-main (see its own overflow-y:auto).
     This guarantees the window never shows a native OS scrollbar with
     arrow buttons — which webkit custom scrollbar rules can't always
     override on Windows. */
  height:100vh;
  overflow:hidden;
}

/* ===== BASE ===== */
body{
  font-family:var(--f);
  background:var(--base);
  color:var(--t1);
  height:100vh;
  min-height:100vh;
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
  overflow:hidden;
  caret-color:transparent;
}
input,textarea,select,[contenteditable="true"],.ql-editor{
  caret-color:auto;
}

/* ===== THEMEABLE SCROLLBAR =====
   One consistent scrollbar across every scrollable container in the
   app. The thumb colour is driven by a dedicated CSS variable
   `--scrollbar-thumb`, INDEPENDENT from --gold — so the user can tint
   the scrollbar via the custom theme editor without touching buttons,
   focus rings, or any other gold-accented element.

   Design goals:
     - Thin (7px) and unobtrusive
     - Rounded pill thumb with subtle inset highlight for depth
     - Transparent track (no visible groove)
     - No up/down arrow buttons at the ends
     - Soft glow on hover, brightness lift on active drag
     - Theme-aware via --scrollbar-thumb (Light, Dark, Mac, Custom)
   Firefox gets a thin themed bar using scrollbar-width + scrollbar-color. */
/* ====================================================================
   SCROLLBAR — hidden entirely (for now)
   ====================================================================
   Several Chromium-on-Windows builds render scrollbar arrow buttons
   by default in webkit custom scrollbar mode, and there's no reliable
   way to hide them via CSS (display:none, width:0, etc. are all
   ignored on ::-webkit-scrollbar-button for those builds). The only
   guaranteed way to get rid of the arrows is to hide the ENTIRE
   scrollbar with display:none on the main pseudo-element.

   Content is still fully scrollable via mouse wheel, touchpad,
   keyboard arrows, and Page Up/Down — you just can't SEE the bar.

   If you want to re-enable a visible bar later (e.g. if the Windows
   accessibility setting was the real cause), change the rule below
   to `width:5px;height:5px` (or your preferred size). */
*::-webkit-scrollbar{
  display:none;
}
/* NOTE about scrollbar arrow buttons:
   In modern webkit custom scrollbar mode, if you DON'T define any
   ::-webkit-scrollbar-button rule, Chrome/Edge simply doesn't render
   the buttons. Counter-intuitively, defining a `display: none` rule
   on the button pseudo-element actually ACTIVATES it in the render
   tree, and the display:none doesn't always unmake it on some
   Chromium builds. The correct fix is to say nothing about buttons
   at all — let webkit omit them by default. */
*::-webkit-scrollbar-track{
  background:transparent;
}
/* Default state: thumb is fully transparent (invisible). Fades in to
   the themed color when the JavaScript scroll listener adds the
   .scrolling class (see app.js — 80ms debounce after the last scroll
   event, scope is the entire document via capture phase).
   Universal selector catches every scrollable element — no hand-
   curated list to maintain. */
*::-webkit-scrollbar-thumb{
  background-color:transparent;
  border-radius:999px;
  transition:background-color .12s ease,box-shadow .2s var(--ease);
}
.scrolling::-webkit-scrollbar-thumb{
  background-color:var(--scrollbar-thumb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
/* On direct thumb hover — brightness lift for feedback */
*::-webkit-scrollbar-thumb:hover{
  filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 6px rgba(0,0,0,.12);
}
/* Firefox — `scrollbar-width: none` hides the scrollbar entirely on
   Firefox, matching the webkit display:none above. Content still
   scrollable via all normal input methods, just no visible bar. */
html{
  scrollbar-width:none;
}

/* Subtle ambient gradient — warm light */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%,rgba(196,162,78,.06) 0%,transparent 55%),
    radial-gradient(ellipse 55% 45% at 80% 100%,rgba(11,26,42,.04) 0%,transparent 55%);
  pointer-events:none;z-index:0;
  transition:background .3s;
}
body.dark-mode::before{
  background:
    radial-gradient(ellipse 90% 70% at 15% -5%,rgba(26,58,82,.45) 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 105%,rgba(196,162,78,.06) 0%,transparent 55%);
}

.container{max-width:1440px;margin:0 auto;padding:0 28px;position:relative;z-index:1}