/* ============================================================
   SmartOS Design System — theme.css
   Single source of truth for all tokens, fonts, shell layout,
   and shared component classes.

   Colour palette from Smart Outdoor Brand Guidelines 2025:
     Shadow   #1a083c  — darkest dark
     Fuschia  #7225b1  — primary brand accent
     Illicit  #c175f9  — accent bright / gradient end
     Pouty    #e6d5f1  — soft accent tint

   Typefaces:
     Display / UI headings : Space Grotesk (Google Fonts)
     Body / secondary      : Poppins (Google Fonts)
     System fallback       : Aptos, sans-serif
     Monospace             : system ui-monospace stack
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  /* Fonts */
  --font-display: 'Space Grotesk', Aptos, sans-serif;
  --font-body:    'Poppins', Aptos, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', 'Fira Mono', 'Courier New', monospace;

  /* Dark chrome — sidebar, topbar */
  --ink-900: #1a083c;   /* Shadow — primary dark bg */
  --ink-800: #25104f;   /* raised dark (inputs on dark bg) */
  --ink-700: #2e1460;   /* hover states on dark */
  --ink-600: #3d1d7a;
  --ink-400: #8a7aaa;   /* muted text on dark */
  --ink-300: #c4b8e0;   /* body text on dark */
  --ink-100: rgba(255,255,255,0.08); /* subtle divider on dark */

  /* Light canvas — main content area (SmartSurf "Smart OS" palette: cool white + lilac) */
  --canvas:          #FAFAFA;   /* cool near-white page bg */
  --canvas-raised:   #FFFFFF;   /* cards, tables, modals */
  --canvas-sunken:   #F3EEF9;   /* table headers, hover rows, wells (light lilac) */
  --hairline:        #E5DDF0;   /* default borders (lilac-grey) */
  --hairline-strong: #D9CDEB;   /* button borders, emphasised dividers */

  /* Text on light canvas (plum-toned) */
  --text-primary:   #241638;
  --text-secondary: #6B5D7E;
  --text-tertiary:  #8E82A6;
  --text-dim:       #8E82A6;   /* alias for --text-tertiary (legacy template strings) */
  --text-muted:     #8E82A6;   /* alias for --text-tertiary (used by template strings) */

  /* Brand accent — Smart Outdoor purple + lilac ladder */
  --accent:       #7020B0;   /* primary accent */
  --accent-hover: #5a1a90;   /* pressed / hover */
  --accent-ink:   #FFFFFF;   /* text on accent */
  --accent-soft:  #e6d5f1;   /* Pouty — tinted backgrounds */
  --accent-light: #C77DFF;   /* Illicit — gradient end, highlights */
  --accent-l:     #9D4EDD;   /* ladder: mid */
  --accent-xl:    #C77DFF;   /* ladder: light */
  --accent-lilac: #E0AAFF;   /* ladder: pale */
  --accent-tint:  #F5EDFB;   /* pale tint — row hover, chips */

  /* Neo Purple Gradient (sidebar flourish, icon bg) */
  --gradient-brand: linear-gradient(160deg, #1a083c 0%, #7225b1 60%, #c175f9 100%);

  /* Status colours (WCAG AA on light canvas) */
  --status-live:        #2E8B5C;
  --status-booked:      #B8860B;
  --status-available:   #4A6FA5;
  --status-maintenance: #A04545;

  /* Radii */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 14px;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --logo-h-sidebar: 20px;
  --logo-h-light:   26px;

  /* Breakpoints (reference only — CSS doesn't evaluate custom props in @media).
     Convention across the app:
       <  640px  → mobile: card-list transforms, bottom tab bar, bottom sheets.
       640–1024  → tablet: keep desktop density (sidebar + tables).
       ≥ 1024px  → desktop.
     Use these exact values in media queries so the breakpoints stay consistent. */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;

  /* Mobile shell dimensions */
  --mobile-topbar-h: 50px;
  --mobile-tabbar-h: 56px;
}

/* ── Reset basics ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Focus rings ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Shell layout ─────────────────────────────────────────── */
.so-shell {
  display: flex;
  min-height: 100dvh;
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* Sidebar */
.so-sidebar {
  width: var(--sidebar-w);
  min-height: 100dvh;
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease;
}

/* Desktop sidebar collapse */
.so-sidebar.collapsed {
  width: 60px !important;
}
.so-sidebar.collapsed .so-brand-logo { display: none; }
.so-sidebar.collapsed .so-brand-icon { display: block; }
.so-sidebar.collapsed .so-brand-text  { display: none; }
/* Hide every label, section heading, footer email, and the "Sign out" text. */
.so-sidebar.collapsed .so-nav-item .nav-label,
.so-sidebar.collapsed .so-nav-item > span:not(.nav-icon),
.so-sidebar.collapsed .so-nav-section,
.so-sidebar.collapsed .so-user-email,
.so-sidebar.collapsed .so-signout span,
.so-sidebar.collapsed .so-signout-label { display: none !important; }
.so-sidebar.collapsed .so-nav-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
.so-sidebar.collapsed .so-nav-item .nav-icon {
  width: 24px;
  height: 24px;
  margin: 0;
}
.so-sidebar.collapsed .so-nav-item .nav-icon svg {
  width: 22px;
  height: 22px;
}
.so-sidebar.collapsed .so-sidebar-footer { padding: 10px 0; display: flex; justify-content: center; }
.so-sidebar.collapsed .so-brand { justify-content: center; padding: 14px 8px; }
/* Pad the bottom of the sidebar so nav items don't sit underneath the
   floating toggle button. */
.so-sidebar { padding-bottom: 64px; }

/* Collapse toggle button — appended to <body> with position:fixed so it
   can't be hidden behind the sidebar's "Sign out" link or clipped by
   overflow:hidden. Sits at the bottom-left corner of the sidebar.
   Uses explicit colours (no CSS var fallbacks) so it renders identically
   on every browser/OS, including Windows Edge/Chrome where var() with
   long fallback chains has been observed to render the button invisible. */
.sidebar-collapse-btn {
  position: fixed !important;
  bottom: 16px;
  left: 224px; /* var(--sidebar-w) is 240; place 16px in from the right edge */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #2B1066; /* SmartOutdoor primary so it always pops against any bg */
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #2B1066;
  z-index: 99999;
  transition: left 0.2s ease, background 0.15s, color 0.15s;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  /* Belt-and-braces against parent transforms / opacity */
  opacity: 1 !important;
  visibility: visible !important;
}
.sidebar-collapse-btn:hover {
  color: #ffffff;
  background: #2B1066;
}
/* When collapsed, the sidebar is 60px wide. Position the button just inside
   its right edge. */
.so-sidebar.collapsed ~ #sidebar-collapse-btn,
body:has(.so-sidebar.collapsed) #sidebar-collapse-btn {
  left: 44px;
}
/* Mobile-tablet: hide because mobile uses the bottom drawer instead. */
@media (max-width: 767px) {
  .sidebar-collapse-btn { display: none !important; }
}

.so-brand {
  padding: 18px 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--ink-100);
  flex-shrink: 0;
}
.so-brand-icon, .so-brand-glyph {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block; /* always visible — pairs with .so-brand-text */
}
.so-brand-logo {
  height: var(--logo-h-sidebar);
  width: auto;
  object-fit: contain;
}

/* Two-tone text branding: "Smart" (white) + "Estate Planning" (accent light) */
.so-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 0;
}
.so-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
}
.so-brand-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: #c175f9;
  letter-spacing: 0.03em;
}

.so-nav {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 8px;
  flex: 1;
}
.so-nav li { margin: 2px 0; }
.so-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-300);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.so-nav-item .nav-icon {
  font-size: 15px;
  width: 20px;
  height: 20px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.so-nav-item .nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.so-nav-item:hover {
  background: var(--ink-700);
  color: #fff;
}
.so-nav-item.active {
  background: var(--ink-700);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--accent);
}

.so-nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color .15s ease;
}
.so-nav-section:hover { color: var(--ink-300, #b9a8d6); }
.so-nav-section .nav-sec-chevron {
  display: inline-flex;
  opacity: .55;
  transition: transform .18s ease;
}
.so-nav-section .nav-sec-chevron svg { width: 13px; height: 13px; }
.so-nav-section.collapsed .nav-sec-chevron { transform: rotate(-90deg); }
/* mobile drawer section header: not clickable, no chevron affordance needed */
.mdrawer-section { cursor: default; justify-content: flex-start; }
.mdrawer-section .nav-sec-chevron { display: none; }

.so-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--ink-100);
  flex-shrink: 0;
}
.so-user-email {
  display: block;
  font-size: 11.5px;
  color: var(--ink-400);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-signout {
  font-size: 12px;
  color: var(--ink-400);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
}
.so-signout:hover { color: var(--ink-300); }

/* Canvas — right of sidebar */
.so-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Top bar — LIGHT, matching the rest of the suite.
   The sidebar stays dark ink; the bar sits on the canvas tone so the white action
   cards read as cards. Anything mounted into it (nav.js's bell, Apps and Team
   Directory buttons) is styled for a light ground in nav.js — keep the two in step,
   because an icon that inherits a white colour here disappears entirely. */
.so-topbar {
  height: var(--topbar-h);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 16px;
}
.so-breadcrumb {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.so-breadcrumb .bc-parent {
  color: var(--text-tertiary);
  font-weight: 400;
}
.so-breadcrumb .bc-sep {
  color: var(--text-tertiary);
  margin: 0 6px;
}
.so-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Main content */
.so-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Light shell — client-facing pages (no sidebar) */
.so-light-shell {
  min-height: 100dvh;
  background: var(--canvas);
  font-family: var(--font-body);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.so-light-header {
  height: 60px;
  background: var(--canvas-raised);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  padding: 0 32px;
}
.so-light-header img { height: var(--logo-h-light); width: auto; }
.so-light-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* Responsive — slightly tighter sidebar on narrow laptops */
@media (max-width: 1280px) {
  :root { --sidebar-w: 200px; }
  .so-main { padding: 20px; }
  .so-topbar { padding: 0 18px; }
}

/* Narrow widths: the bar degrades instead of overflowing its own box.
   The breadcrumb yields first — it is the one thing here that is also stated in the page heading
   directly below it — then the action cluster scrolls within itself so every control stays
   reachable and the page body never scrolls sideways. (Pages carrying several of their own topbar
   buttons still can't fit them all under ~700px; the proper answer is the .mtopbar mobile shell,
   which these desk pages do not currently opt into.) */
@media (max-width: 900px) {
  .so-breadcrumb { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .so-topbar { gap: 10px; }
  .so-topbar-actions {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .so-topbar-actions::-webkit-scrollbar { display: none; }
}

/* Below 768px (tablets / phones) collapse sidebar to icon strip with
   the billboard mark only. Desktop & laptop always show full sidebar. */
@media (max-width: 767px) {
  .so-sidebar { width: 60px; }
  .so-brand-logo,
  .so-brand-text,
  .so-nav-item > span,
  .so-nav-item .nav-label,
  .so-nav-section,
  .so-user-email,
  .so-signout { display: none; }
  .so-brand-icon { display: block; } /* show icon glyph only when sidebar is narrow */
  .so-brand { justify-content: center; padding: 14px 8px; }
  .so-nav-item { justify-content: center; padding: 10px; }
  .so-nav-item .nav-icon { width: auto; }
  .so-main { padding: 16px; }
}

/* ── Cards ────────────────────────────────────────────────── */
.so-card {
  background: var(--canvas-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px;
}
.so-card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 6px;
}
.so-card-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.so-card-value.hero { color: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────── */
.so-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.12s, opacity 0.12s;
  white-space: nowrap;
}
.so-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Primary — solid brand purple (SmartSurf) */
.so-btn-primary { background: var(--accent); color: var(--accent-ink); }
.so-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

/* Accent — alias of primary (brand moments) */
.so-btn-accent  { background: var(--accent); color: var(--accent-ink); }
.so-btn-accent:hover:not(:disabled) { background: var(--accent-hover); }

/* Ghost / secondary — white with hairline, purple on hover (SmartSurf) */
.so-btn-ghost {
  background: var(--canvas-raised);
  border: 1px solid var(--hairline-strong);
  color: var(--text-primary);
}
.so-btn-ghost:hover:not(:disabled) { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
/* Ghost buttons sitting on the dark topbar need light text/border to be legible
   (the default dark text disappears against --ink-900). */
/* Ghost buttons on the light topbar are white cards (SURF style) so they read
   as raised against the canvas tone, and hover reaches for the accent. */
.so-topbar .so-btn-ghost { background: var(--canvas-raised); color: var(--text-secondary); border-color: var(--hairline); }
.so-topbar .so-btn-ghost:hover:not(:disabled) { background: var(--canvas-raised); border-color: var(--accent); color: var(--accent); }

/* Danger */
.so-btn-danger { background: #dc2626; color: #fff; }
.so-btn-danger:hover:not(:disabled) { background: #b91c1c; }

/* Size variants */
.so-btn-sm { font-size: 12px;   padding: 5px 11px; }
.so-btn-md { font-size: 13.5px; padding: 7px 15px; } /* default */
.so-btn-lg { font-size: 15px;   padding: 10px 20px; }

/* Pill modifier — fully-rounded action buttons (used for inline row/panel actions) */
.so-btn-pill { border-radius: 100px; }
/* A row of pill actions: wrap cleanly with a small gap, no text separators */
.so-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Tab strip ─────────────────────────────────────────────
   Seven pages each defined their own, in three variants: Admin's was underline-only with 2px of
   padding, four used 14px padding, and two added an icon gap. The same control looked different
   depending on where you met it.

   It SCROLLS rather than wraps. Five of the seven set flex-wrap:wrap, so Admin's fourteen tabs broke
   onto a second row and read as a layout bug rather than a choice. */
.so-tabs, .tabs {
  display: flex; gap: 4px; align-items: stretch;
  border-bottom: 1px solid var(--hairline);
  margin: 16px 0 20px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;                      /* the tabs are the affordance; a bar under them is noise */
}
.so-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { height: 0 }
.so-tab, .tab {
  flex: 0 0 auto;                             /* never squash a label to fit — scroll instead */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 0; background: none;
  font: 600 13px var(--font-display);
  color: var(--text-secondary); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; border-radius: 8px 8px 0 0;
}
.so-tab:hover, .tab:hover { color: var(--text-primary); background: var(--canvas-sunken) }
.so-tab.on, .tab.on { color: var(--accent); border-bottom-color: var(--accent); background: none }
.so-tab:disabled, .tab:disabled { opacity: .5; cursor: not-allowed }

/* ── Segmented switcher ────────────────────────────────────
   Copied into seven pages with five different paddings and radii. Five agreed on this pill form, so
   that is the canonical one.

   survey.html and survey-run.html deliberately override it with 48px full-width targets for tapping
   on site, and a page's own <style> loads after this file, so that override still wins. */
.seg {
  display: inline-flex; border: 1px solid var(--hairline-strong);
  border-radius: 100px; overflow: hidden; background: var(--canvas-raised);
}
.seg button {
  appearance: none; border: 0; background: none;
  font: 600 12.5px var(--font-display); color: var(--text-secondary);
  padding: 7px 15px; cursor: pointer; white-space: nowrap;
}
.seg button:not(.on):hover { background: var(--canvas-sunken); color: var(--text-primary) }
.seg button.on { background: var(--accent); color: #fff }
.seg button:disabled { opacity: .55; cursor: not-allowed }

/* ── Tables ───────────────────────────────────────────────── */
.so-table-wrap {
  background: var(--canvas-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  /* overflow-x:auto, not overflow:hidden. `hidden` was presumably there to clip the rounded corners,
     and it did — along with every column that did not fit. A wide table simply lost its right-hand
     columns with no scrollbar and no way to reach them, which is how the Edit button on the Finance
     tables was rendered, measured 45x28, and still unreachable outside the viewport.
     overflow-y stays hidden so the corners are still clipped. */
  overflow-x: auto;
  overflow-y: hidden;
}
.so-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.so-table thead tr {
  background: var(--canvas-raised);
  border-bottom: 1px solid var(--hairline);
}
.so-table th {
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  text-align: left;
  white-space: nowrap;
}
.so-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-primary);
  vertical-align: middle;
}
.so-table tbody tr:last-child td { border-bottom: none; }
.so-table tbody tr:hover td { background: var(--accent-tint); }
.so-table .mono { font-family: var(--font-mono); font-size: 12.5px; }
.so-table .muted { color: var(--text-secondary); }

/* Row actions — hidden at rest, shown on row hover */
.so-table .row-actions { visibility: hidden; }
.so-table tbody tr:hover .row-actions { visibility: visible; }

/* ── Status tags ──────────────────────────────────────────── */
.so-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.so-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.so-tag-live        { color: var(--status-live);         background: #E4F3EB; }
.so-tag-booked      { color: var(--status-booked);       background: #FDF3D8; }
.so-tag-available   { color: var(--status-available);    background: #E8EEF7; }
.so-tag-maintenance { color: var(--status-maintenance);  background: #F5E8E8; }
.so-tag-draft       { color: var(--text-tertiary);       background: var(--canvas-sunken); }

/* ── Forms / inputs ───────────────────────────────────────── */
.so-input,
.so-select,
.so-textarea {
  font-family: var(--font-body);
  font-size: 13.5px;
  background: var(--canvas-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.so-input:focus,
.so-select:focus,
.so-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.so-input::placeholder,
.so-textarea::placeholder { color: var(--text-tertiary); }

/* Date/time inputs — strip Safari/WebKit's native control chrome so they match a plain
   .so-input box in height and don't spread the dd/mm/yyyy segments across the field or sit
   taller than the neighbouring selects (SmartFeedback #8). Blink honours the same rules, so
   Chrome and Safari render identically. Height/padding/width stay with the base + any modifier. */
.so-input[type="date"],
.so-input[type="datetime-local"],
.so-input[type="time"],
.so-input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 0;                 /* kill Safari's intrinsic min-height */
  line-height: 1.25;
}
.so-input[type="date"]::-webkit-date-and-time-value,
.so-input[type="datetime-local"]::-webkit-date-and-time-value,
.so-input[type="time"]::-webkit-date-and-time-value,
.so-input[type="month"]::-webkit-date-and-time-value { text-align: left; margin: 0; padding: 0; }
.so-input[type="date"]::-webkit-datetime-edit,
.so-input[type="datetime-local"]::-webkit-datetime-edit,
.so-input[type="time"]::-webkit-datetime-edit,
.so-input[type="month"]::-webkit-datetime-edit { padding: 0; line-height: 1.25; }
.so-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.so-input::-webkit-inner-spin-button,
.so-input::-webkit-clear-button { display: none; -webkit-appearance: none; }
.so-input::-webkit-calendar-picker-indicator { margin: 0 0 0 6px; padding: 0; opacity: .5; cursor: pointer; }
.so-input::-webkit-calendar-picker-indicator:hover { opacity: .8; }

.so-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Page section headers ─────────────────────────────────── */
.so-page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.so-page-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

/* Toolbar row (search + filters + actions) */
.so-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.so-toolbar .so-input { max-width: 280px; }

/* Stat card grid */
.so-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
/* KPI tiles — 3px top-accent cycling the purple ladder (SmartSurf signature). */
.so-stat-grid > .so-card { border-top: 3px solid var(--accent); }
.so-stat-grid > .so-card:nth-child(4n+2) { border-top-color: var(--accent-l); }
.so-stat-grid > .so-card:nth-child(4n+3) { border-top-color: var(--accent-xl); }
.so-stat-grid > .so-card:nth-child(4n+4) { border-top-color: var(--ink-900); }

/* Two-column layout utility that collapses to a single column on mobile
   (the <640 override lives in mobile.css). Use in place of hand-rolled
   `grid-template-columns:1fr …` blocks so every page stacks consistently. */
.so-cols { display: grid; gap: 16px; align-items: start; }
.so-cols-1-1 { grid-template-columns: 1fr 1fr; }
.so-cols-1-330 { grid-template-columns: 1fr 330px; }
.so-cols-1-360 { grid-template-columns: 1fr 360px; }

/* ── Divider ──────────────────────────────────────────────── */
.so-divider {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 20px 0;
}

/* ── Toast / notification strip ──────────────────────────── */
.so-toast-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* Individual toast (used by utils.js via #so-toast-host) */
.so-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #fff;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(26, 8, 60, 0.45);
  pointer-events: auto;
  max-width: min(420px, 90vw);
  transition: opacity .2s ease;
}
.so-toast-success { border-left: 3px solid var(--status-live); }
.so-toast-error   { border-left: 3px solid #dc2626; }
.so-toast-info    { border-left: 3px solid var(--accent-light); }

/* ── Empty states ─────────────────────────────────────────── */
.so-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
  background: var(--canvas-raised);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
}
.so-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.so-empty-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.so-empty-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 16px;
}

/* ── Stale data / info banner ─────────────────────────────── */
.so-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #FDF3D8;
  color: #6b4a00;
  font-size: 13px;
  border-bottom: 1px solid #F0D98A;
}
.so-banner .so-banner-close {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: inherit;
  opacity: 0.6;
}
.so-banner .so-banner-close:hover { opacity: 1; }

/* ── Generic modal (.modal-bg + .modal) ─────────────────────
   Used by admin.html, poi-search.html and any page that wants a
   centred dialog. CSS lives globally so any page that includes
   theme.css renders it correctly. */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 9000;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--canvas-raised, #fff);
  border: 1px solid var(--hairline-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-lg, 10px);
  padding: 24px;
  max-width: 500px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  position: relative;
}
.modal h3 {
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 700;
  color: var(--text-primary, #18211d);
  margin: 0 0 12px;
  font-size: 16px;
}
.modal .close-btn {
  background: none; border: none;
  color: var(--text-tertiary, #888);
  cursor: pointer;
  font-size: 22px; line-height: 1;
  position: absolute; top: 12px; right: 14px;
}
.modal .close-btn:hover { color: var(--text-primary, #000); }

/* ── Branded modal header (Quick-Plan style) ────────────────
   Add <div class="so-modal-head"><h3>Title</h3><div class="sub">…</div></div>
   as the first child of .modal for a full-bleed gradient header. */
.so-modal-head {
  margin: -24px -24px 18px;
  padding: 18px 24px;
  background: linear-gradient(160deg, #1a083c 0%, #7225b1 60%, #c175f9 100%);
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
  color: #fff;
}
.so-modal-head h3 { margin: 0; color: #fff; font-size: 18px; font-family: var(--font-display); font-weight: 700; }
.so-modal-head .sub { margin-top: 3px; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: rgba(255,255,255,0.82); }
.modal:has(.so-modal-head) .close-btn { color: rgba(255,255,255,0.85); }
.modal:has(.so-modal-head) .close-btn:hover { color: #fff; }

/* Consistent field spacing + labels in any form/modal */
.field { margin-bottom: 12px; }
.field > .so-label { display: block; margin-bottom: 5px; }

/* Right-aligned modal footer with a divider */
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--hairline, #e4e2d8);
}
@media (max-width: 639px) {
  .so-modal-head { margin: -20px -20px 16px; padding: 16px 20px; }
}

/* ════════════════════════════════════════════════════════════
   P12.F — Premium polish (additive; same SmartOS brand)
   Layered depth, smoother motion, calmer tables, nicer empties.
   ════════════════════════════════════════════════════════════ */
:root {
  --shadow-xs: 0 1px 2px rgba(26, 8, 60, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 8, 60, 0.06), 0 1px 2px rgba(26, 8, 60, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 8, 60, 0.08), 0 1px 3px rgba(26, 8, 60, 0.05);
  --shadow-lg: 0 12px 32px rgba(26, 8, 60, 0.14);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Cards: soft elevation + hairline; clickable cards lift on hover. */
.so-card { box-shadow: var(--shadow-sm); transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.so-card:hover { box-shadow: var(--shadow-md); }
.so-card[href], a.so-card, .so-card.clickable { cursor: pointer; }
.so-card[href]:hover, a.so-card:hover, .so-card.clickable:hover { transform: translateY(-2px); border-color: var(--accent-soft); }
.kpi-card { box-shadow: var(--shadow-xs); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.kpi-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* Buttons: spring on press, accent gets a subtle branded shadow. */
.so-btn { transition: background .14s var(--ease), box-shadow .14s var(--ease), transform .08s var(--ease), opacity .14s var(--ease); }
.so-btn:active:not(:disabled) { transform: translateY(1px); }
.so-btn-accent { box-shadow: 0 2px 8px rgba(114, 37, 177, 0.24); }
.so-btn-accent:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(114, 37, 177, 0.30); }
.so-btn-pill:hover:not(:disabled) { box-shadow: var(--shadow-sm); }

/* Tables: quieter header, gentle row hover, comfortable rhythm. */
.so-table thead th { background: var(--canvas-raised); color: var(--text-tertiary); font: 600 11px var(--font-mono, monospace); letter-spacing: .04em; text-transform: uppercase; }
.so-table tbody tr { transition: background .12s var(--ease); }
.so-table tbody tr:hover { background: var(--accent-tint); }
.crm-table.dense tbody tr:hover { background: var(--accent-tint); }

/* Inputs: a touch more presence on focus (token already sets ring). */
.so-input, .so-select, .so-textarea { transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease); }

/* Empty states: centred, calm, a little bigger. */
.so-empty { text-align: center; padding: 34px 20px; color: var(--text-tertiary); }
.so-empty-title { font: 600 14px var(--font-display, sans-serif); color: var(--text-secondary); }
.so-empty-sub { font-size: 12.5px; margin-top: 4px; }

/* Chips/pills: hairline for definition on light surfaces. */
.crm-chip { box-shadow: inset 0 0 0 1px rgba(26, 8, 60, 0.05); }

/* Page headers: tighten the type rhythm. */
.so-page-title { letter-spacing: -0.01em; }
.so-page-sub { color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .so-card, .so-btn, .kpi-card, .so-table tbody tr, .so-input, .so-select, .so-textarea { transition: none; }
  .so-card[href]:hover, a.so-card:hover, .so-card.clickable:hover, .kpi-card:hover, .so-btn:active:not(:disabled) { transform: none; }
}