/* Brand palette as space-separated RGB channels so both Tailwind utilities
   and the custom classes below resolve from one source. Tailwind config uses
   rgb(var(--brand-600) / <alpha-value>); custom classes use rgb(var(--brand-600)).
   Default = teal; the tenant's accent is applied via [data-accent] blocks below. */
:root {
  --brand-50:  240 253 250;
  --brand-100: 204 251 241;
  --brand-200: 153 246 228;
  --brand-300: 94 234 212;
  --brand-400: 45 212 191;
  --brand-500: 20 184 166;
  --brand-600: 13 148 136;
  --brand-700: 15 118 110;
  --brand-800: 17 94 89;
  --brand-900: 19 78 74;
  --ink-900:   #0f172a;
  --ink-800:   #1e293b;
  --accent:    #f59e0b;
}

/* ---- Selectable accent palettes (Settings → Organization) ---- */
:root[data-accent="blue"] {
  --brand-50: 239 246 255; --brand-100: 219 234 254; --brand-200: 191 219 254; --brand-300: 147 197 253;
  --brand-400: 96 165 250; --brand-500: 59 130 246; --brand-600: 37 99 235; --brand-700: 29 78 216;
  --brand-800: 30 64 175; --brand-900: 30 58 138;
}
:root[data-accent="indigo"] {
  --brand-50: 238 242 255; --brand-100: 224 231 255; --brand-200: 199 210 254; --brand-300: 165 180 252;
  --brand-400: 129 140 248; --brand-500: 99 102 241; --brand-600: 79 70 229; --brand-700: 67 56 202;
  --brand-800: 55 48 163; --brand-900: 49 46 129;
}
:root[data-accent="green"] {
  --brand-50: 236 253 245; --brand-100: 209 250 229; --brand-200: 167 243 208; --brand-300: 110 231 183;
  --brand-400: 52 211 153; --brand-500: 16 185 129; --brand-600: 5 150 105; --brand-700: 4 120 87;
  --brand-800: 6 95 70; --brand-900: 6 78 59;
}
:root[data-accent="red"] {
  --brand-50: 255 241 242; --brand-100: 255 228 230; --brand-200: 254 205 211; --brand-300: 253 164 175;
  --brand-400: 251 113 133; --brand-500: 244 63 94; --brand-600: 225 29 72; --brand-700: 190 18 60;
  --brand-800: 159 18 57; --brand-900: 136 19 55;
}
:root[data-accent="amber"] {
  --brand-50: 255 251 235; --brand-100: 254 243 199; --brand-200: 253 230 138; --brand-300: 252 211 77;
  --brand-400: 251 191 36; --brand-500: 245 158 11; --brand-600: 217 119 6; --brand-700: 180 83 9;
  --brand-800: 146 64 14; --brand-900: 120 53 15;
}
:root[data-accent="violet"] {
  --brand-50: 245 243 255; --brand-100: 237 233 254; --brand-200: 221 214 254; --brand-300: 196 181 253;
  --brand-400: 167 139 250; --brand-500: 139 92 246; --brand-600: 124 58 237; --brand-700: 109 40 217;
  --brand-800: 91 33 182; --brand-900: 76 29 149;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Hero gradient + subtle grid — glows follow the brand accent so the fixed public
   pages (login, landing) stay cohesive with the teal buttons/logo instead of clashing. */
.hero-gradient {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgb(var(--brand-500) / .35), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgb(var(--brand-600) / .20), transparent 55%),
    linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
}
.grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.10);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgb(var(--brand-600) / .35); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:.7rem; transition:all .16s ease; }
.btn-primary { background: rgb(var(--brand-600)); color:#fff; }
.btn-primary:hover { background: rgb(var(--brand-700)); box-shadow: 0 10px 24px -10px rgb(var(--brand-700) / .6); }
.btn-ghost { background:#fff; color: var(--ink-800); border:1px solid #e5e7eb; }
.btn-ghost:hover { border-color: rgb(var(--brand-500)); color: rgb(var(--brand-600)); }

/* Sidebar link (light theme) */
.nav-link { display:flex; align-items:center; gap:.7rem; padding:.55rem .75rem; border-radius:.6rem; color:#475569; font-weight:500; font-size:.9rem; transition:all .14s ease; }
.nav-link i { font-size:1.05rem; width:1.2rem; text-align:center; color:#94a3b8; transition:color .14s ease; }
.nav-link:hover { background:#f1f5f9; color:#0f172a; }
.nav-link:hover i { color:#475569; }
.nav-link.nav-active { background: rgb(var(--brand-600)); color:#fff; box-shadow: 0 8px 18px -10px rgb(var(--brand-600) / .7); }
.nav-link.nav-active i { color:#fff; }

/* Filter chips (All / Today / Upcoming …) */
.chip { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .85rem; border-radius:999px; font-size:.8rem; font-weight:600; color:#475569; background:#fff; border:1px solid #e2e8f0; transition:all .14s ease; cursor:pointer; }
.chip:hover { border-color:#cbd5e1; }
.chip-active { background: rgb(var(--brand-600)); color:#fff; border-color: rgb(var(--brand-600)); }

/* Select2 — match the app's input styling */
.select2-container--default .select2-selection--single { height:42px; border:1px solid #cbd5e1; border-radius:.5rem; display:flex; align-items:center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:normal; padding-left:12px; color:#0f172a; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:40px; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: rgb(var(--brand-500)); box-shadow:0 0 0 3px rgb(var(--brand-500) / .25); }
.select2-dropdown { border-color:#cbd5e1; border-radius:.5rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgb(var(--brand-600)); }

/* Status pills */
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; }

/* KPI value */
.kpi-value { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; letter-spacing:-.03em; }

/* Reveal on scroll (progressive enhancement) */
.reveal { opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }

/* Marquee */
.marquee { display:flex; gap:3rem; animation: scroll 26s linear infinite; }
@keyframes scroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* Sidebar section label */
.nav-section {
  padding: 14px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.6);
}

/* Form field helpers (used by the newer module templates) */
.lbl {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  margin-bottom: 0.375rem;
}
.inp {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  outline: none;
  background: #fff;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.inp:focus {
  border-color: rgb(var(--brand-500));
  box-shadow: 0 0 0 3px rgb(var(--brand-500) / 0.25);
}

/* Admin sidebar active (indigo accent) */
.nav-link.nav-active-indigo { background:#4f46e5; color:#fff; box-shadow:0 8px 18px -10px rgba(79,70,229,.7); }
.nav-link.nav-active-indigo i { color:#fff; }

/* Table helpers */
.tbl-head { background:#f8fafc; color:#94a3b8; text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }

/* =========================================================================
   Mobile responsiveness helpers (desktop is unchanged — everything here is
   scoped to < lg or to mobile-only components hidden with .lg:hidden).
   ========================================================================= */

/* Images never overflow their container */
img { max-width: 100%; }

/* --- Mobile bottom navigation (visible only under lg via .lg:hidden) --- */
.mobile-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 16px -10px rgba(16, 24, 40, .18);
  /* iPhone home-indicator safe area */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 2px;
  font-size: 10px; font-weight: 600; line-height: 1;
  color: #64748b;
  background: none; border: 0; cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mbn-item i { font-size: 1.2rem; line-height: 1; }
.mbn-item span { line-height: 1.1; }
.mbn-item:active { background: #f1f5f9; }
.mbn-active { color: rgb(var(--brand-600)); }
.mbn-active i { color: rgb(var(--brand-600)); }

/* Bottom-sheet panel picks up the safe-area inset too */
.more-sheet-foot { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }

/* Reserve space at the bottom of app pages so the fixed nav never covers content.
   Scoped to pages that actually render the bottom nav, and only on mobile widths. */
@media (max-width: 1023px) {
  body:has(#app-bottom-nav) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
   THEME SELECTOR CONTROL (Light / Dark / System) — used in the topbar and the
   mobile More sheet. Works in both themes; /js/theme.js toggles .theme-opt-active.
   ========================================================================= */
.theme-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 6px;
  background: transparent; color: #64748b;
  font-size: .9rem; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.theme-opt:hover { background: #f1f5f9; color: #0f172a; }
.theme-opt-active, .theme-opt-active:hover { background: rgb(var(--brand-600)); color: #fff; }

/* =========================================================================
   DARK THEME
   Pure additive override layer. Nothing here affects the default (light) theme
   or the desktop layout — every rule is scoped to [data-theme="dark"], which is
   set on <html> before first paint by the inline script in fragments/head.html.
   The existing light-theme design, spacing, typography and layouts are untouched;
   this only remaps colour tokens so every module is legible in dark mode.
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;                 /* native scrollbars, date pickers, selects, etc. */
  --bg:          #0b1220;             /* page background (was slate-50)   */
  --surface:     #141d2e;             /* cards, sidebar, topbar, menus    */
  --surface-2:   #1b2740;             /* raised: hovers, table head, chips*/
  --surface-3:   #24324c;
  --border:      #2b3b58;
  --border-soft: #223049;
  --text:        #e6eaf1;
  --text-strong: #f4f7fb;
  --text-muted:  #9fb0c7;
  --text-faint:  #7e8fa8;
}

/* Default border colour for elements using a bare `border` utility (no colour
   class). The whole selector is wrapped in :where() → zero specificity, so every
   explicit border-* utility still wins and accent borders stay untouched. */
:where([data-theme="dark"] *, [data-theme="dark"] ::before, [data-theme="dark"] ::after) { border-color: var(--border-soft); }

/* ---- Surfaces ---- */
html[data-theme="dark"] body,
html[data-theme="dark"] .bg-slate-50   { background-color: var(--bg); }
html[data-theme="dark"] .bg-white      { background-color: var(--surface); }
html[data-theme="dark"] .bg-slate-100  { background-color: var(--surface-2); }
html[data-theme="dark"] .bg-slate-200  { background-color: var(--surface-3); }
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/80  { background-color: rgba(20, 29, 46, .85); }
html[data-theme="dark"] .bg-slate-50\/40,
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="dark"] .bg-slate-50\/60,
html[data-theme="dark"] .bg-slate-50\/70 { background-color: rgba(255, 255, 255, .03); }

/* ---- Text ---- */
html[data-theme="dark"] .text-ink-900,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800 { color: var(--text-strong); }
html[data-theme="dark"] .text-ink-800,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 { color: var(--text); }
html[data-theme="dark"] .text-slate-500 { color: var(--text-muted); }
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 { color: var(--text-faint); }

/* ---- Borders ---- */
html[data-theme="dark"] .border-slate-50,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200 { border-color: var(--border-soft); }
html[data-theme="dark"] .border-slate-300 { border-color: var(--border); }

/* ---- Core components (custom classes) ---- */
html[data-theme="dark"] .card { background: var(--surface); border-color: var(--border-soft); }

html[data-theme="dark"] .inp {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .inp::placeholder { color: var(--text-faint); }
html[data-theme="dark"] .lbl { color: var(--text); }

html[data-theme="dark"] .btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .nav-link { color: var(--text-muted); }
html[data-theme="dark"] .nav-link i { color: var(--text-faint); }
html[data-theme="dark"] .nav-link:hover { background: var(--surface-2); color: var(--text-strong); }
html[data-theme="dark"] .nav-link:hover i { color: var(--text); }
html[data-theme="dark"] .nav-section { color: var(--text-faint); }

html[data-theme="dark"] .tbl-head { background: var(--surface-2); color: var(--text-faint); }
html[data-theme="dark"] .chip { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .chip:hover { border-color: var(--border); }

html[data-theme="dark"] .mobile-nav { background: var(--surface); border-top-color: var(--border); }
html[data-theme="dark"] .mbn-item { color: var(--text-muted); }
html[data-theme="dark"] .mbn-item:active { background: var(--surface-2); }

/* Native form controls that don't use .inp */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: var(--text); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-faint); }

/* Theme-toggle in dark */
html[data-theme="dark"] .theme-opt { color: var(--text-muted); }
html[data-theme="dark"] .theme-opt:hover { background: var(--surface-2); color: var(--text-strong); }
html[data-theme="dark"] .theme-opt-active, html[data-theme="dark"] .theme-opt-active:hover { color: #fff; }

/* ---- Select2 ---- */
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background: var(--surface-2); border-color: var(--border);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); }
html[data-theme="dark"] .select2-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--text); }
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--surface-2); border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background: var(--surface-2); border-color: var(--border); }

/* ---- Accent tints (KPI cards, pills/badges, alerts) ----
   Light -50/-100 backgrounds become translucent accents over the dark surface;
   their dark -600/-700 text is lifted to a lighter shade so contrast holds. */
html[data-theme="dark"] .bg-brand-50,   html[data-theme="dark"] .bg-brand-50\/40   { background-color: rgb(var(--brand-500) / .12); }
html[data-theme="dark"] .bg-brand-100   { background-color: rgb(var(--brand-500) / .20); }
html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-emerald-50\/40, html[data-theme="dark"] .bg-emerald-50\/50 { background-color: rgba(16, 185, 129, .12); }
html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, .20); }
html[data-theme="dark"] .bg-amber-50,   html[data-theme="dark"] .bg-amber-50\/40   { background-color: rgba(245, 158, 11, .12); }
html[data-theme="dark"] .bg-amber-100   { background-color: rgba(245, 158, 11, .20); }
html[data-theme="dark"] .bg-rose-50,    html[data-theme="dark"] .bg-rose-50\/40    { background-color: rgba(244, 63, 94, .12); }
html[data-theme="dark"] .bg-rose-100    { background-color: rgba(244, 63, 94, .20); }
html[data-theme="dark"] .bg-indigo-50   { background-color: rgba(99, 102, 241, .12); }
html[data-theme="dark"] .bg-indigo-100  { background-color: rgba(99, 102, 241, .20); }
html[data-theme="dark"] .bg-sky-50      { background-color: rgba(14, 165, 233, .12); }
html[data-theme="dark"] .bg-sky-100     { background-color: rgba(14, 165, 233, .20); }
html[data-theme="dark"] .bg-teal-100    { background-color: rgba(20, 184, 166, .20); }

html[data-theme="dark"] .text-brand-700,   html[data-theme="dark"] .text-brand-600   { color: rgb(var(--brand-300)); }
html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-600 { color: #6ee7b7; }
html[data-theme="dark"] .text-amber-700,   html[data-theme="dark"] .text-amber-600   { color: #fcd34d; }
html[data-theme="dark"] .text-rose-700,    html[data-theme="dark"] .text-rose-600    { color: #fda4af; }
html[data-theme="dark"] .text-indigo-700,  html[data-theme="dark"] .text-indigo-600  { color: #a5b4fc; }
html[data-theme="dark"] .text-sky-700,     html[data-theme="dark"] .text-sky-600     { color: #7dd3fc; }

html[data-theme="dark"] .border-brand-100,   html[data-theme="dark"] .border-brand-200   { border-color: rgb(var(--brand-500) / .35); }
html[data-theme="dark"] .border-emerald-100, html[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, .35); }
html[data-theme="dark"] .border-amber-100,   html[data-theme="dark"] .border-amber-200   { border-color: rgba(245, 158, 11, .35); }
html[data-theme="dark"] .border-rose-200     { border-color: rgba(244, 63, 94, .35); }
html[data-theme="dark"] .border-indigo-200   { border-color: rgba(99, 102, 241, .35); }

/* ---- Common hover backgrounds ---- */
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--surface-2); }
html[data-theme="dark"] .hover\:bg-brand-50:hover    { background-color: rgb(var(--brand-500) / .16); }
html[data-theme="dark"] .hover\:bg-emerald-50:hover  { background-color: rgba(16, 185, 129, .16); }
html[data-theme="dark"] .hover\:bg-rose-50:hover     { background-color: rgba(244, 63, 94, .16); }