/* ============================================================
   Encore Console v2 skin
   ------------------------------------------------------------
   Activated by `html.v2` (user menu → "Try the new design",
   persisted in localStorage). Every rule is scoped under .v2 so
   the legacy look is untouched until a user opts in — and
   flipping back is instant.

   Design direction (agreed 2026-08-15): warm paper ground
   instead of flat white; cards drawn with hairline borders, not
   shadows; one confident type scale; quiet uppercase labels;
   status pills with dots; roomier tables with tabular numerals;
   accent stays the venue's brand colour (runtime-overridden).
   ============================================================ */

html.v2 {
  /* Palette sampled from the reference design (2026-08-16):
     pure white ground, cool #f8f8f8 sidebar, white cards separated by
     hairlines + a whisper of shadow. The earlier warm paper was ours,
     not theirs — Dan called it. */
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-sidebar: #f8f8f8;
  --bg-header: #ffffff;
  --bg-hover: #f4f4f3;
  --bg-active: #ededeb;
  --bg-input: #ffffff;
  --bg-table-header: #ffffff;

  --text-primary: #191b20;
  --text-secondary: #565a64;
  --text-muted: #8d919d;

  --border: #e8e8e5;
  --border-subtle: #f0f0ee;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 12px;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(25, 27, 32, 0.04);
  --shadow-md: 0 4px 14px rgba(25, 27, 32, 0.07);
  --shadow-lg: 0 14px 36px rgba(25, 27, 32, 0.12);

  /* Design direction (Dan, 2026-08-16): the accent is a deep slate,
     used sparingly — dark pill CTAs, the active chart bar, segmented
     pill actives. Venue branding (auth.js applyBranding) still wins
     when a tenant sets a primary colour. */
  --accent: #1f2b3d;
  --accent-hover: #2b3a52;
  --accent-subtle: rgba(31, 43, 61, 0.08);
  --accent-text: #1f2b3d;

  /* Aliased app-token leaks follow the v2 palette too */
  --bg-base: var(--bg-page);
  --bg-elevated: var(--bg-hover);
  --bg-surface: var(--bg-card);
  --bg-panel: var(--bg-card);
}

/* ── Dark palette ───────────────────────────────────────────
   Applied as html.v2.dark (the Appearance toggle resolves
   Light/Dark/System to the .dark class before first paint).
   Values track the KDS/till dark family so Encore feels like one
   product across surfaces. Accent stays venue-brandable — the
   runtime override on documentElement wins over both palettes. */
html.v2.dark {
  --bg-page: #131418;
  --bg-card: #1b1d22;
  --bg-sidebar: #17181d;
  --bg-header: #17181d;
  --bg-hover: #23252c;
  --bg-active: #2a2d35;
  --bg-input: #1b1d22;
  --bg-table-header: #1b1d22;

  --text-primary: #edeef2;
  --text-secondary: #a4a8b3;
  --text-muted: #6c7080;
  --text-inverse: #14151a;

  --border: #2c2e36;
  --border-subtle: #24262d;

  --accent: #a9bad3;
  --accent-hover: #c0cee2;
  --accent-subtle: rgba(169, 186, 211, 0.14);
  --accent-text: #a9bad3;

  --success: #34d399;
  --success-subtle: rgba(52, 211, 153, 0.13);
  --warning: #fbbf24;
  --warning-subtle: rgba(251, 191, 36, 0.12);
  --danger: #f0596a;
  --danger-subtle: rgba(240, 89, 106, 0.13);
  --info: #60a5fa;
  --info-subtle: rgba(96, 165, 250, 0.13);

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);

  --bg-base: var(--bg-page);
  --bg-elevated: var(--bg-hover);
  --bg-surface: var(--bg-card);
  --bg-panel: var(--bg-card);

  color-scheme: dark;
}

/* The default Encore logo asset is black-on-transparent — invert it on
   dark. Tenant-uploaded logos (different src) are left alone. */
html.v2.dark img[src*="encore_logo_black"] { filter: invert(1); }

/* Filter chips invert their active state colours cleanly on dark via
   tokens; scrollbar thumbs likewise. Chart canvases and pages with
   hardcoded light hexes are tokenised page-by-page in the v2 sweep. */

/* ── App chrome ─────────────────────────────────────────── */
html.v2 body { background: var(--bg-page); }

html.v2 .app-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}
html.v2 .sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
}
html.v2 .nav-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
html.v2 .nav-item {
  border-radius: 8px;
  font-weight: 500;
}
html.v2 .nav-item.active {
  /* Reference design: the active destination is a raised white card, not a
     coloured wash — ink stays ink. Border only RECOLOURS (see base
     rule) so the row keeps its exact size. */
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
html.v2.dark .nav-item.active { background: var(--bg-hover); }

/* ── v2 shell: full-height sidebar, top bar spans content only ── */
@media (min-width: 769px) {
  html.v2 .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 150;
  }
  html.v2 .app-header { margin-left: var(--sidebar-width); }
  html.v2 .app-body { margin-left: var(--sidebar-width); }
  html.v2 .menu-toggle { display: none; }
}

/* ── v2 top bar: breadcrumb + alerts, chrome moves to sidebar ── */
/* The header must sit ABOVE the fixed sidebar (z 150): the venue and
   user dropdowns are its children, and a stacking context lower than
   the sidebar buried them — "switcher hiding behind the menu". */
html.v2 .app-header { background: var(--bg-header); position: relative; z-index: 300; }
html.v2 .app-header .logo { display: none; }
html.v2 #venue-switcher-btn { display: none !important; }  /* beats its inline display:flex */
/* The switcher container must stay in the DOM (it hosts the dropdown,
   and classic anchors the panel to it) but takes no space in the bar. */
html.v2 #venue-switcher { width: 0; padding: 0; margin: 0; border: 0; overflow: visible; }
/* User identity lives in the sidebar card now — hide the header
   button's visuals but keep the element: it hosts the dropdown. */
html.v2 #user-menu-btn > .user-avatar,
html.v2 #user-menu-btn > .user-name,
html.v2 #user-menu-btn > svg { display: none; }
/* The switcher and account panels live INSIDE the sidebar in v2
   (app.js moves the nodes in) and expand in place — their items are
   menu items, same as the nav tree. No popouts, no positioning, and
   mobile gets the identical behaviour inside the drawer for free. */
html.v2 .sidebar #venue-dropdown,
html.v2 .sidebar #user-dropdown {
  position: static !important;
  min-width: 0 !important;
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 12px 6px !important;
  flex: none;
}
html.v2 .sidebar .venue-dd-label { padding: 4px 10px 3px; }
html.v2 .sidebar .venue-dd-item { padding: 7px 10px; font-size: 13px; }
html.v2 .sidebar .venue-dd-tile { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
html.v2 .sidebar #user-dropdown::before {
  content: "Account";
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px 3px;
}
html.v2 .sidebar #user-dropdown button {
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}
html.v2 .sidebar #user-dropdown button:hover { background: var(--bg-hover) !important; }
html.v2 .sidebar #user-dropdown > div[style*="height:1px"] { margin: 5px 4px; }
html.v2 .topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted);
}
html.v2 .topbar-breadcrumb .crumb-sep { opacity: 0.5; }
html.v2 .topbar-breadcrumb .crumb-current { color: var(--text-primary); font-weight: 650; }
html.v2 .topbar-alerts {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
}
html.v2 .topbar-alerts:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── v2 sidebar: brand row + venue switcher card ───────────── */
html.v2 .sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 18px 8px;
  flex: none;
}
html.v2 .sidebar-brand img { height: 21px !important; }
html.v2 .sidebar-brand-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html.v2 .sidebar-venue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 2px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  flex: none;
}
html.v2 .sidebar-venue:hover { background: var(--bg-hover); }
/* Single-venue org: the card is a static identity, not a switcher. */
html.v2 .sidebar-venue.single-venue { cursor: default; }
html.v2 .sidebar-venue.single-venue:hover { background: transparent; }
html.v2 .sidebar-venue.single-venue > svg { display: none; }
html.v2 .sidebar-venue-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
html.v2 .sidebar-venue-meta { min-width: 0; flex: 1; }
html.v2 .sidebar-venue-name { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .sidebar-venue-sub { font-size: 11px; color: var(--text-muted); }

/* ── v2 sidebar: search, density, labels, user card ───── */
html.v2 .sidebar { display: flex; flex-direction: column; }
html.v2 .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; }
html.v2 .sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 4px;
  padding: 7px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  flex: none;
}
html.v2 .sidebar-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-primary);
  width: 100%;
}
html.v2 .sidebar-search:focus-within { border-color: var(--text-muted); }
html.v2 .nav-section { margin-bottom: 2px; }
html.v2 .nav-section-title {
  display: block;
  padding: 8px 12px 2px;
}
html.v2 .nav-item {
  font-size: 13px;
  padding: 6px 10px;
  gap: 9px;
  color: var(--text-secondary);
  /* Every row carries an invisible border so becoming active only
     recolours it — the row never changes size, so the menu below
     never shifts when selection moves. */
  border: 1px solid transparent;
}
html.v2 .nav-item svg:first-child { width: 16px; height: 16px; opacity: 0.75; }
html.v2 .sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 12px;
  padding: 9px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  flex: none;
}
html.v2 .sidebar-user:hover { background: var(--bg-hover); }
html.v2 .sidebar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
html.v2 .sidebar-user-meta { min-width: 0; flex: 1; }
html.v2 .sidebar-user-name { font-size: 12.5px; font-weight: 650; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .sidebar-user-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── v2 menu: inline tree submenus ──────────────────────
   Submenus expand in place under their trigger (app.js takes the
   mobile-inline branch when html.v2 is set) and draw as a tree with
   connector ticks, like the v2 sidebar. */
html.v2 .nav-flyout-parent .nav-flyout {
  position: static !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 2px 0 6px 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-height: none !important;
}
html.v2 .nav-flyout-item {
  position: relative;
  margin-left: 27px;
  padding: 6px 10px 6px 13px;
  font-size: 12.5px;
  /* 2px tree line on EVERY row (only the colour changes when active)
     so selection never resizes a row or shifts its siblings. */
  border: 0;
  border-left: 2px solid var(--border-subtle);
  border-radius: 0 8px 8px 0;
  white-space: normal;
}
html.v2 .nav-flyout-item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--border);
}
html.v2 .nav-flyout-item:hover { background: var(--bg-hover); }
html.v2 .nav-flyout-item.active {
  background: var(--bg-card);
  border-left-color: var(--accent);
  color: var(--text-primary);
  font-weight: 650;
  box-shadow: 0 1px 3px rgba(25, 27, 32, 0.08);
}
/* The group you're inside reads as a soft filled chip, not just bold */
html.v2 .nav-flyout-parent:has(.nav-item.active) > .nav-flyout-trigger {
  background: var(--bg-active);
}
html.v2 .nav-flyout-parent:has(.nav-item.active) > .nav-flyout-trigger svg:first-child { opacity: 1; }
html.v2 .nav-flyout-trigger > svg:last-child { transition: transform 140ms ease; }
html.v2 .nav-flyout-parent.open > .nav-flyout-trigger > svg:last-child { transform: rotate(90deg); }
/* An open or active group's trigger reads as ink, not a colour wash */
html.v2 .nav-flyout-parent.active > .nav-flyout-trigger,
html.v2 .nav-flyout-parent:has(.nav-item.active) > .nav-flyout-trigger {
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Page header / type scale ───────────────────────────── */
html.v2 .page-title {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
html.v2 .page-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 68ch;
}

/* ── Cards ──────────────────────────────────────────────── */
html.v2 .card,
html.v2 .stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* White-on-white ground: the hairline does the separating, the
     whisper of shadow does the lifting (matches the shot). */
  box-shadow: 0 1px 2px rgba(25, 27, 32, 0.04);
}
html.v2 .stat-value {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
html.v2 .stat-label { font-size: 12px; color: var(--text-secondary); }

/* ── Buttons ────────────────────────────────────────────── */
html.v2 .btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 16px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
html.v2 .btn-sm { padding: 6px 12px; }
/* Icon buttons are fixed-width squares: the pill padding above squashed
   their SVG to a 2px sliver (the "invisible actions" bug on the
   non-refactored list pages). Restore square padding + give the ghost
   icons enough contrast to be seen at rest. */
html.v2 .btn-icon { padding: 6px; width: 30px; height: 30px; }
html.v2 .btn-icon.btn-sm { padding: 4px; width: 26px; height: 26px; }
html.v2 .btn-ghost { color: var(--text-secondary); }
html.v2 .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
html.v2 .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
html.v2 .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
html.v2.dark .btn-primary { background: #dfe5ee; border-color: #dfe5ee; color: #171b22; }
html.v2.dark .btn-primary:hover { background: #cdd6e3; border-color: #cdd6e3; }
html.v2 .btn-secondary,
html.v2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
html.v2 .btn:not(.btn-primary):not(.btn-danger):hover { background: var(--bg-hover); }
html.v2 .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Tables ─────────────────────────────────────────────── */
html.v2 .data-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 13px 16px 9px;
  border-bottom: 1px solid var(--border);
}
html.v2 .data-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}
html.v2 .data-table tbody tr:hover { background: var(--bg-hover); }
html.v2 .data-table tbody tr:last-child td { border-bottom: 0; }

/* ── Badges → status pills with a dot ───────────────────── */
html.v2 .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
html.v2 .badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* ── Forms ──────────────────────────────────────────────── */
html.v2 .form-input,
html.v2 .form-select,
html.v2 .form-textarea {
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 120ms ease;
}
html.v2 .form-input:focus,
html.v2 .form-select:focus,
html.v2 .form-textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-subtle);
}
html.v2 .form-label { font-size: 12.5px; font-weight: 600; }

/* ── Modals / toasts ────────────────────────────────────── */
html.v2 .modal { border-radius: var(--radius-lg); border: 1px solid var(--border); }
html.v2 .modal-header { font-weight: 700; }
html.v2 .toast { border-radius: 10px; }

/* ── Tabs / filter chips ────────────────────────────────── */
html.v2 .filter-tab,
html.v2 .tab-item {
  border-radius: 999px;
  font-weight: 600;
}
html.v2 .filter-tab.active,
html.v2 .tab-item.active {
  background: var(--text-primary);
  color: var(--bg-page);
}

/* ── Empty states ───────────────────────────────────────── */
html.v2 .empty-state { padding: 44px 24px; }
html.v2 .empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
html.v2 .empty-text { max-width: 46ch; margin: 6px auto 0; color: var(--text-secondary); }

/* v2 list-view card styling lives unscoped in components.css — mobile
   card views are a usability fix for every user, not a v2 skin perk. */

/* ── Scrollbars ─────────────────────────────────────────── */
/* Vertical scrollbars go slim and quiet (thumb only, no track);
   horizontal scrollers hide theirs entirely (see components.css). */
html.v2 * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
html.v2 ::-webkit-scrollbar { width: 8px; height: 8px; }
html.v2 ::-webkit-scrollbar-track { background: transparent; }
html.v2 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
html.v2 ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Lock screen on-brand ───────────────────────────────────
   Opaque ground (also stops page content showing through a blur —
   better privacy for an unattended screen), wordmark above the card,
   tile avatar, pill buttons come free from the base rules. */
html.v2 .lock-overlay {
  background: var(--bg-page);
  backdrop-filter: none;
  flex-direction: column;
  gap: 28px;
}
html.v2 .lock-overlay::before {
  content: "";
  width: 132px;
  height: 24px;
  background: url('/assets/encore_logo_black.png') no-repeat center / contain;
}
html.v2.dark .lock-overlay::before { filter: invert(1); }
html.v2 .lock-card {
  border-radius: 16px;
  padding: 34px 30px;
  box-shadow: 0 18px 44px rgba(25, 27, 32, 0.10);
}
html.v2 .lock-avatar {
  border-radius: 12px;
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  html.v2 * { transition: none !important; }
}