/* portal.syntriq.no — Apple/iOS-inspired minimal light theme */
:root {
  /* Surfaces — Apple "paper" whites with a hint of cool grey */
  --bg: #F5F5F7;           /* page background (apple.com) */
  --bg-2: #EFEFF1;         /* hover / tinted */
  --bg-3: #E5E5EA;         /* dividers / chips */
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;

  /* Ink — SF system grays */
  --ink: #1D1D1F;          /* primary text */
  --ink-2: #424245;
  --ink-3: #6E6E73;        /* secondary text */
  --ink-4: #A1A1A6;        /* tertiary / placeholders */

  /* Hairlines — true Apple separator colours */
  --line: #D2D2D7;
  --line-2: #EBEBF0;

  /* Accents — keep brand blue but lean slightly toward iOS system blue */
  --accent: #2563B0;
  --accent-2: #1A4E8F;
  --accent-soft: rgba(37, 99, 176, 0.10);
  --brand: #4A85C8;
  --brand-2: #2563B0;
  --warm: #FF9F0A;         /* iOS orange (used sparingly) */
  --olive: #34C759;        /* iOS green (used sparingly) */
  --rose: #AF52DE;         /* iOS purple (used sparingly) */

  /* Status — closer to iOS semantic colours */
  --success: #2D8659;
  --success-bg: #E8F7EE;
  --warning: #B07F2E;
  --warning-bg: #FFF4DE;
  --error: #D7373F;
  --error-bg: #FDECEC;

  /* Admin dark sidebar palette (unchanged hues, kept for staff portal) */
  --admin-bg: #1D1D1F;
  --admin-surface: #2C2C2E;
  --admin-line: #3A3A3C;
  --admin-ink: #FFFFFF;
  --admin-ink-2: #E5E5EA;
  --admin-ink-3: #98989D;
  --admin-accent: #30D158;

  /* Shadows — extremely soft, layered */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);

  /* Radii — Apple favours generous rounding */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 980px;

  /* Type — SF Pro first, then Inter (already loaded), then system */
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  color-scheme: light;
}

/* ============================================================
   Dark mode — html.dark overrides every surface + ink token
   ============================================================ */
html.dark {
  /* Surfaces — slate / neutral-900 inspired */
  --bg:        #0B0B0E;
  --bg-2:      #131318;
  --bg-3:      #1C1C22;
  --surface:   #16161B;
  --surface-2: #1C1C22;

  /* Ink — reversed luminance */
  --ink:       #F4F4F5;
  --ink-2:     #D4D4D8;
  --ink-3:     #A1A1AA;
  --ink-4:     #71717A;

  /* Hairlines — barely-visible separators on dark */
  --line:      #2E2E36;
  --line-2:    #22222A;

  /* Accent soft becomes a translucent wash on dark */
  --accent-soft: rgba(74, 133, 200, 0.18);

  /* Status pills — same hue, lighter background */
  --success-bg: rgba(45, 134, 89, 0.18);
  --warning-bg: rgba(176, 127, 46, 0.18);
  --error-bg:   rgba(215, 55, 63, 0.18);

  /* Shadows — push deeper / longer in dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.5);

  color-scheme: dark;
}
html.dark body { background: var(--bg); color: var(--ink); }
/* Sidebar matches the surface in dark mode; the dark-side class is
   reserved for the LIGHT-mode "dark sidebar" toggle and doesn't kick
   in during full dark mode. */
html.dark .sidebar { background: rgba(19, 19, 24, 0.78); }

/* ───── Dark-mode pastel-tint overrides ─────
   Status backgrounds (.shop-list-row.now, .urgent, the calendar
   event tints, etc.) are hardcoded to pastel-light colors that
   wash out on a dark surface. Translate them to translucent
   tints over the dark bg so the COLOR INTENT survives but the
   readability stays. */
html.dark .shop-list-row.now           { background: rgba(234, 179, 8, 0.10); }
html.dark .shop-list-row.now:hover     { background: rgba(234, 179, 8, 0.16); }
html.dark .shop-list-row.urgent        { background: rgba(220, 38, 38, 0.12); }
html.dark .shop-list-row.urgent:hover  { background: rgba(220, 38, 38, 0.20); }
html.dark .cal-event.seated            { background: rgba(37, 99, 235, 0.18); color: var(--ink); }
html.dark .cal-event.cancelled         { background: rgba(185, 28, 28, 0.18); color: var(--ink); }
/* Bookings list row.now state — same pale-yellow problem on a dark
   weekly calendar (the 19:00 booking on the screenshot). */
html.dark .booking-row.now,
html.dark tr.now,
html.dark .row.now                     { background: rgba(234, 179, 8, 0.12); }
/* Drop-in modal table grid + tenant subs hover */
html.dark .editable-section > .editable-section-toolbar button:last-child:hover {
  background: rgba(220, 38, 38, 0.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -0.011em;       /* tighter, SF-style */
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Calmer scrollbars (WebKit) — keeps the Nordic minimal feel */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border: 2px solid var(--bg);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
*::-webkit-scrollbar-track { background: transparent; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* layout */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bg);
  transition: grid-template-columns .2s ease;
}
/* Collapsed-rail variant — toggled from sidebar.jsx via a body class.
   Lets the main content reclaim ~180px when the host stand wants more
   canvas (e.g. wide Gantt or floor plan). */
body.sidebar-collapsed .app {
  grid-template-columns: 64px 1fr;
}

/* sidebar — frosted paper feel */
.sidebar {
  background: rgba(245, 245, 247, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  /* Sit above .main so the collapsed tenant menu, which pops OUT to the
     right of the rail, paints over the dashboard cards instead of letting
     them bleed through. backdrop-filter + sticky already make the sidebar
     its own stacking context; without an explicit level it landed below
     .main (later in DOM). Kept under the drawer/modal layer (90+/200). */
  z-index: 50;
  padding-top: 4px;    /* tight top inset — tenant-switch carries its own margin */
}
.sidebar.collapsed { padding-top: 8px; }
.sidebar-brand {
  padding: 22px 20px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand-text { line-height: 1.1; }
.brand-text-1 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand-text-2 {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0;
}

.tenant-switch {
  margin: 10px 12px 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.tenant-switch:hover { background: var(--surface); box-shadow: var(--shadow-md); }
.tenant-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.tenant-info { flex: 1; min-width: 0; line-height: 1.15; }
.tenant-name { font-weight: 500; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-domain { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-switch-arrow { color: var(--ink-3); flex-shrink: 0; }
/* Collapse-sidebar control lives inside the tenant-switch card when the
   sidebar is expanded, so it doesn't sit orphaned in its own row at the
   top. Subtle until hovered. */
.tenant-switch-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  background: transparent; border: 0;
  color: var(--ink-4); cursor: pointer;
  border-radius: 6px;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.tenant-switch-collapse:hover { background: var(--bg-2); color: var(--ink-2); }
.tenant-switch-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tenant-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  /* Was z-index 50 — but the sidebar's translucent backdrop-filter and
     transform-on-hover created sibling stacking contexts that let nav
     items paint on top. Bumped + explicit opaque background so the
     menu always covers what's beneath. */
  z-index: 1000;
  isolation: isolate;
}
.tenant-menu-item, .tenant-menu-create { background: var(--surface-2); }
.tenant-menu-item {
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
}
.tenant-menu-item:hover { background: var(--bg-2); }
.tenant-menu-item.active { background: var(--bg-2); }
.tenant-menu-item .tenant-avatar { width: 24px; height: 24px; font-size: 11px; }
.tenant-menu-divider { height: 1px; background: var(--line-2); margin: 4px 0; }
.tenant-menu-create {
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}
.tenant-menu-create:hover { background: var(--bg-2); }

.nav { padding: 6px 8px; flex: 1; overflow-y: auto; }
.nav-section {
  font-size: 10px;
  color: var(--ink-3);
  padding: 16px 14px 6px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--bg-2); color: var(--ink); }
.nav-item.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.nav-item.active svg { opacity: 1; }
.nav-item.active .nav-badge { background: rgba(255,255,255,0.22); color: #fff; }
.nav-item svg { flex-shrink: 0; opacity: 0.7; }
.nav-badge {
  margin-left: auto;
  background: var(--bg-3);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  min-width: 18px;
  text-align: center;
  letter-spacing: 0;
}

.sidebar-shopmode-row {
  margin-top: 8px;
  padding-top: 12px !important;
  border-top: 1px solid var(--line-2);
}
.sidebar-toolrow {
  padding-top: 8px;
}
.sidebar-footer {
  padding: 10px 12px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.user-info { flex: 1; min-width: 0; line-height: 1.15; overflow: hidden; }
/* Long emails (e.g. stale.stokkeland@syntriq.no) were pushing the
   sign-out icon out of the sidebar. Truncate with ellipsis. */
.user-name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-role { font-size: 11px; color: var(--ink-3); text-transform: capitalize; }

/* Collapse toggle sits in its own thin row above the tenant switcher
   so it never overlaps the card. Right-aligned via margin-left:auto. */
.sidebar-collapse-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  margin: 0 8px 6px auto;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--ink-3); border-radius: 6px; cursor: pointer;
  transition: background .12s, color .12s;
}
.sidebar-collapse-toggle:hover { background: var(--surface); color: var(--ink); }

/* Rail mode (.sidebar.collapsed) — hide all text, keep icons clickable */
.sidebar.collapsed .tenant-info,
.sidebar.collapsed .tenant-switch-arrow,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-badge { display: none !important; }

/* Section headers in rail mode collapse into a thin separator line so
   the eye still gets the OPERATIONS / ACCOUNT grouping. */
.sidebar.collapsed .nav-section {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 !important;
  margin: 10px 14px 6px !important;
  height: 1px !important;
  background: var(--line-2) !important;
  overflow: hidden;
}

.sidebar.collapsed .tenant-switch {
  justify-content: center;
  padding: 6px;
  background: transparent;
  box-shadow: none;
}
.sidebar.collapsed .tenant-switch:hover {
  background: var(--bg-2);
  box-shadow: none;
}
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
}
.sidebar.collapsed .sidebar-footer {
  flex-direction: column; gap: 6px;
  padding: 10px 6px;
}
.sidebar.collapsed .sidebar-footer .user-avatar {
  margin: 0 auto;
}
.sidebar.collapsed nav { padding: 6px 0; }
/* In rail mode, the toggle row should centre instead of right-align */
.sidebar.collapsed .sidebar-collapse-toggle { margin-left: auto; margin-right: auto; }
.sidebar.collapsed .tenant-avatar { width: 32px; height: 32px; }

/* Tenant-switcher menu in rail mode: pop OUT to the right of the
   sidebar at a readable width instead of squashing inside the 64px
   rail (which caused text to wrap onto itself and bleed into the
   main content). */
.sidebar.collapsed .tenant-menu {
  position: absolute;
  top: 0;                          /* align with the tenant-switch */
  left: calc(100% + 6px);          /* pop out to the right of the rail */
  right: auto;
  width: 260px;                    /* readable width for the menu */
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
}
/* Each menu item gets its proper 3-column layout back (avatar + info
   + check) even though it's outside the rail. */
.sidebar.collapsed .tenant-menu-item,
.sidebar.collapsed .tenant-menu-create {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 10px;
}
/* Only the text column is unhidden / left-aligned — NOT the avatar or
   admin-logo squares. Forcing display:block on those (the old
   `.tenant-menu-item > div` rule) overrode their grid centring and left
   the popped-out menu looking broken ("full of holes") in rail mode. */
.sidebar.collapsed .tenant-menu-info {
  display: block !important;
  text-align: left;
}
.sidebar.collapsed .tenant-menu .tenant-avatar {
  display: grid !important;
  width: 24px; height: 24px;       /* match the expanded menu, not the 32px rail avatar */
}

/* In rail mode the EN/NO locale toggle is hidden (no good icon-only
   form). Shop-mode keeps a square icon-only button so staff can lock
   the screen to kiosk from rail without expanding first. Dark-mode
   and customisation-lock keep their dedicated icon buttons. */
.sidebar.collapsed .sidebar-tool-locale { display: none !important; }
.sidebar.collapsed .sidebar-shopmode-row {
  padding: 8px 8px 0 !important;
  border-top: 1px solid var(--line-2);
  margin-top: 8px;
}
.sidebar.collapsed .sidebar-shopmode-row button {
  width: 40px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  justify-content: center !important;
  gap: 0 !important;
}
.sidebar.collapsed .sidebar-shopmode-row button > span { display: none !important; }
.sidebar.collapsed .sidebar-shopmode-row button > svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.85 !important;
}
/* Center the surviving icon toggles (dark mode + lock) vertically in
   the rail. */
.sidebar.collapsed .sidebar-toolrow {
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

/* main area */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-left { display: flex; align-items: baseline; gap: 16px; }
.page-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.page-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.page-sub { font-size: 13px; color: var(--ink-3); letter-spacing: -0.005em; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* buttons — iOS capsule */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--bg-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--bg-3); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn.primary {
  background: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-2); }
.btn.primary:focus-visible {
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn.accent {
  background: var(--success);
  color: #fff;
}
.btn.accent:hover { background: #246E4B; }
.btn.danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}
.btn.danger:hover { background: #B62E36; }
.btn.danger:focus-visible {
  box-shadow: 0 0 0 4px rgba(215, 55, 63, 0.22);
}
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
/* danger + ghost combo: ghost zeroes out the red fill, so we need to
   put the red back into the text + border or the button becomes
   invisible white-on-white. */
.btn.danger.ghost {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 50%, transparent);
}
.btn.danger.ghost:hover {
  background: color-mix(in srgb, var(--error) 10%, var(--surface));
  border-color: var(--error);
}
.btn.sm { padding: 5px 12px; font-size: 12px; }
.btn.lg { padding: 11px 22px; font-size: 14px; font-weight: 600; }
.btn.icon { padding: 8px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Keyboard focus for interactive non-button surfaces */
.nav-item:focus-visible,
.tenant-switch:focus-visible,
.tenant-menu-item:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.icon-btn:focus-visible { border-radius: 6px; }

/* content */
.content { padding: 24px 32px 80px; max-width: 1600px; width: 100%; margin: 0 auto; }
.content.compact { padding: 20px 32px 80px; }

/* card — borderless surface, soft shadow */
.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-2);
}
.card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
}
.card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.card-title em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
.card-body { padding: 20px; }

/* stat — clean numeric tile with a subtle accent top stripe.
   Variants (.stat.tint-blue / .tint-green / .tint-amber / .tint-violet
   / .tint-rose) replace the stripe with a tinted band so KPI rows can
   carry a hint of meaning without painting the whole card. */
.stat {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-2);
}
.stat::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent);
  opacity: 0.85;
}
.stat.tint-blue::before   { background: #2563EB; }
.stat.tint-green::before  { background: #10B981; }
.stat.tint-amber::before  { background: #F59E0B; }
.stat.tint-violet::before { background: #8B5CF6; }
.stat.tint-rose::before   { background: #F43F5E; }
.stat.tint-cyan::before   { background: #06B6D4; }
.stat.tint-blue .stat-value   { color: #1E40AF; }
.stat.tint-green .stat-value  { color: #065F46; }
.stat.tint-amber .stat-value  { color: #92400E; }
.stat.tint-violet .stat-value { color: #5B21B6; }
.stat.tint-rose .stat-value   { color: #881337; }
.stat.tint-cyan .stat-value   { color: #0C4A6E; }
html.dark .stat.tint-blue .stat-value   { color: #93C5FD; }
html.dark .stat.tint-green .stat-value  { color: #6EE7B7; }
html.dark .stat.tint-amber .stat-value  { color: #FCD34D; }
html.dark .stat.tint-violet .stat-value { color: #C4B5FD; }
html.dark .stat.tint-rose .stat-value   { color: #FDA4AF; }
html.dark .stat.tint-cyan .stat-value   { color: #67E8F9; }
.stat-label {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.stat-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.delta-up { color: var(--success); }
.delta-down { color: var(--error); }

/* compact stat — denser KPI tile for rows that sit above a list/table
   where vertical space is at a premium (e.g. catering Bestillinger). */
.stat.compact { padding: 12px 16px; }
.stat.compact .stat-label { margin-bottom: 6px; }
.stat.compact .stat-value { font-size: 23px; }
.stat.compact .stat-sub { margin-top: 5px; font-size: 11px; }

/* pill — capsule, low-contrast tinted */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-2);
  text-transform: capitalize;
  letter-spacing: -0.003em;
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3);
}
.pill.confirmed { background: var(--success-bg); color: var(--success); }
.pill.confirmed .dot { background: var(--success); }
.pill.pending { background: var(--warning-bg); color: var(--warning); }
.pill.pending .dot { background: var(--warning); }
.pill.cancelled { background: var(--error-bg); color: var(--error); }
.pill.cancelled .dot { background: var(--error); }
.pill.no_show { background: var(--bg-2); color: var(--ink-3); }
.pill.no_show .dot { background: var(--ink-3); }
.pill.seated { background: var(--accent-soft); color: var(--accent); }
.pill.seated .dot { background: var(--accent); }
.pill.completed { background: rgba(175, 82, 222, 0.12); color: #7B3FBA; }
.pill.completed .dot { background: #AF52DE; }
/* easyTable-inspired intermediate states */
.pill.arrived { background: rgba(8, 145, 178, 0.12); color: #155E75; }
.pill.arrived .dot { background: #06B6D4; }
.pill.early_free { background: rgba(91, 33, 182, 0.12); color: #5B21B6; }
.pill.early_free .dot { background: #8B5CF6; }
.pill.featured { background: rgba(255, 159, 10, 0.14); color: #B26A00; }
.pill.featured .dot { background: #FF9F0A; }

/* tables */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tbl thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tbl tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  vertical-align: middle;
}
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--bg-2); cursor: pointer; }
.tbl tbody tr.selected { background: var(--accent-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* form */
.field { margin-bottom: 14px; }
.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.label .hint { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
  letter-spacing: -0.005em;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.input-lg { padding: 14px 16px; font-size: 16px; border-radius: 12px; }

/* Mobile: prevent iOS zoom-on-focus and let auth screens reflow.
   The portal itself is locked to width=1280, so these only apply on the
   auth screens where AuthShell swaps the viewport to device-width. */
@media (max-width: 600px) {
  .input, .textarea, .select { font-size: 16px; }
  .btn.lg, .btn.primary { min-height: 44px; }
}

/* switch */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--line); border-radius: 99px;
  transition: background .2s;
}
.switch-slider::before {
  content: ""; position: absolute;
  height: 14px; width: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 99px;
  transition: transform .2s;
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }

/* tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 16px;
}
.tab {
  padding: 10px 4px;
  margin: 0 12px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  letter-spacing: -0.01em;
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* drawer */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.34);
  z-index: 90;
  animation: fadeIn .15s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed;
  top: 12px; right: 12px; bottom: 12px;
  width: 460px;
  background: var(--surface);
  z-index: 91;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: slideIn .25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.drawer-body {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
}
.drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  background: var(--bg);
}
.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 10px;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }

/* dashboard layout helpers */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.row { display: flex; gap: 16px; align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 16px; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.muted { color: var(--ink-3); }

/* search — capsule with leading glyph */
.search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.search input {
  padding: 8px 14px 8px 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-size: 13px;
  width: 280px;
  letter-spacing: -0.005em;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.search input:hover { background: var(--bg-3); }
.search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.search svg { position: absolute; left: 12px; color: var(--ink-3); }

/* segmented — iOS segmented control */
.segmented {
  display: inline-flex;
  background: var(--bg-3);
  border-radius: 10px;
  padding: 2px;
  border: 0;
}
.segmented button {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.segmented button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* bookings calendar */
.cal {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.cal-corner, .cal-day-head, .cal-hour, .cal-cell {
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.cal-day-head {
  padding: 10px 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  background: var(--bg);
}
.cal-day-head.today { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.cal-day-head .day-num {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 2px;
}
.cal-day-head.today .day-num { color: var(--ink); }
.cal-hour {
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  padding: 4px 6px;
  background: var(--bg);
}
.cal-cell {
  position: relative;
  height: 56px;
}
.cal-event {
  position: absolute;
  left: 4px; right: 4px;
  background: var(--bg-2);
  border-left: 3px solid var(--ink);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
.cal-event:hover { background: var(--bg-3); z-index: 2; box-shadow: var(--shadow-sm); }
.cal-event.confirmed { background: #ECFDF3; border-left-color: #15803D; }
.cal-event.pending { background: #FEF7E6; border-left-color: #B45309; }
.cal-event.seated { background: #EFF6FF; border-left-color: #2563EB; }
.cal-event.cancelled { background: #FEF2F2; border-left-color: #B91C1C; text-decoration: line-through; opacity: 0.7; }
.cal-event .ev-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event .ev-meta { color: var(--ink-3); font-size: 10px; }

/* content editor */
.content-layout {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 14px;
  height: calc(100vh - 130px);
}
.content-page-list {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 10px 8px;
  overflow-y: auto;
}
.page-list-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 2px;
}
.page-list-item:hover { background: var(--bg-2); }
.page-list-item.active { background: var(--bg-2); }
.page-list-item .count {
  background: var(--bg-3);
  color: var(--ink-2);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.page-list-item.active .count { background: var(--ink); color: #fff; }
.content-blocks {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow-y: auto;
}
.block-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  position: relative;
}
.block-row:hover { background: var(--bg); }
.block-row.active { background: var(--bg-2); border-left: 3px solid var(--ink); padding-left: 15px; }
.block-key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
}
.block-type-tag {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
}
.block-preview {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.block-preview em { font-style: normal; font-weight: 500; color: var(--accent); }
.preview-frame {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-toolbar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  font-size: 12px;
}
.preview-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 99px;
}
.preview-body { flex: 1; overflow-y: auto; background: var(--bg); position: relative; }

/* gallery */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.photo-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  aspect-ratio: 1;
  cursor: pointer;
  transition: transform .15s;
}
.photo-tile.tall { aspect-ratio: 0.7; }
.photo-tile.wide { aspect-ratio: 1.6; grid-column: span 2; }
.photo-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.photo-tile .placeholder {
  width: 100%; height: 100%;
  background: var(--bg-2);
  background-image: repeating-linear-gradient(45deg, rgba(15,39,70,0.04) 0 1px, transparent 1px 8px);
  background-size: 8px 8px;
}
.photo-tile .ph-label {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  background: rgba(15,39,70,0.78);
  color: var(--bg);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
}
.photo-tile .ph-tag {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 500;
}

/* dark sidebar (user-toggleable "Dark sidebar" tweak) */
.dark-side .sidebar {
  background: var(--admin-bg);
  border-right-color: var(--admin-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dark-side .sidebar-brand,
.dark-side .sidebar-footer { border-color: var(--admin-line); }
.dark-side .brand-text-1 { color: var(--admin-ink); }
.dark-side .brand-text-2 { color: var(--admin-ink-3); }
.dark-side .tenant-switch { background: var(--admin-surface); border-color: var(--admin-line); }
.dark-side .tenant-switch:hover { background: #3A3A3C; }
.dark-side .tenant-name { color: var(--admin-ink); }
.dark-side .tenant-domain { color: var(--admin-ink-3); }
.dark-side .tenant-switch-arrow { color: var(--admin-ink-3); }
.dark-side .nav-section { color: var(--admin-ink-3); }
.dark-side .nav-item { color: var(--admin-ink-2); }
.dark-side .nav-item:hover { background: var(--admin-surface); color: var(--admin-ink); }
.dark-side .nav-item.active { background: var(--accent); color: #fff; }
.dark-side .user-name { color: var(--admin-ink); }
.dark-side .user-role { color: var(--admin-ink-3); }
.dark-side .tenant-menu { background: var(--admin-surface); border-color: var(--admin-line); }
.dark-side .tenant-menu-item { color: var(--admin-ink-2); }
.dark-side .tenant-menu-item:hover, .dark-side .tenant-menu-item.active { background: #3A3A3C; }
.dark-side .tenant-menu-divider { background: var(--admin-line); }

/* misc */
.divider { height: 1px; background: var(--line-2); margin: 14px 0; }
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-3);
  font-size: 13px;
}
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
}
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink-2);
}

/* bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 180px;
  padding: 12px 0;
}
.bar {
  flex: 1;
  background: var(--bg-3);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  transition: background .15s;
}
.bar:hover { background: var(--ink-3); }
.bar.accent { background: var(--ink); }
.bar-label {
  position: absolute;
  bottom: -22px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--ink-3);
}

/* heatmap */
.heatmap-row { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.heat-cell {
  aspect-ratio: 1.6;
  background: var(--bg-2);
  border-radius: 3px;
}
.heat-label { font-size: 11px; color: var(--ink-3); display: grid; place-items: center; }

/* funnel */
.funnel-step {
  position: relative;
  background: var(--bg-2);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  overflow: hidden;
}
.funnel-step .funnel-bar {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.07;
  z-index: 0;
}
.funnel-step > * { position: relative; z-index: 1; }
.funnel-step .funnel-label { font-weight: 500; flex: 1; }
.funnel-step .funnel-value { font-family: var(--font-body); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.funnel-step .funnel-pct {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 14px;
  min-width: 60px;
  text-align: right;
}

/* upload */
.uploader {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  background: var(--bg);
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.uploader:hover { border-color: var(--accent); background: var(--bg-2); color: var(--ink-2); }

/* palette tile */
.palette-tile {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color .15s, transform .15s;
}
.palette-tile:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.palette-tile.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(15,39,70,0.08); }
.palette-swatches { display: flex; gap: 6px; margin-bottom: 10px; }
.swatch { flex: 1; height: 48px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); }
.palette-name { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.palette-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* article card */
.article-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  align-items: center;
  cursor: pointer;
}
.article-row:hover { background: var(--bg); }
.article-thumb {
  width: 80px; height: 60px;
  border-radius: 8px;
  background: var(--bg-2);
  overflow: hidden;
  background-image: repeating-linear-gradient(45deg, rgba(15,39,70,0.04) 0 1px, transparent 1px 8px);
  background-size: 8px 8px;
  position: relative;
}
.article-thumb-tag {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(15,39,70,0.55);
}
.article-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.article-title em { font-style: normal; font-weight: 500; color: var(--accent); }
.article-meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 10px; }

/* Plain-text block authoring for articles — each block is a typed
   stack (paragraph / heading / list) so editors never touch HTML. */
.body-blocks { display: flex; flex-direction: column; gap: 8px; }
.body-block {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.body-block:focus-within { border-color: var(--accent); }
.body-block-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
}
.body-block-type {
  height: 30px;
  min-width: 132px; width: auto;
  font-size: 12px; font-weight: 600;
}
.body-block-tools { display: flex; align-items: center; gap: 2px; }
.body-block-tools .icon-btn:disabled { opacity: 0.3; cursor: default; }
.body-block-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  width: 100%;
}
.body-block-input:focus { outline: none; box-shadow: none; }
/* echo the rendered look while typing */
.body-block-h2 .body-block-input { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.body-block-h3 .body-block-input { font-size: 15px; font-weight: 600; }
.body-block-ul .body-block-input { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.body-block-add {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.body-block-add-label { font-size: 12px; color: var(--ink-3); margin-right: 2px; }

/* menu list */
.menu-cat {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.menu-cat-header {
  padding: 12px 18px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
}
.menu-cat-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.menu-cat-title em { font-style: normal; font-weight: 500; color: var(--accent); }
.menu-item-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto auto;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  transition: background .12s, opacity .12s, box-shadow .12s;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.menu-item-row:last-child { border-bottom: 0; }
.menu-item-row:hover { background: var(--bg); }
.menu-item-row:hover .drag-handle { color: var(--ink-2); }
.menu-item-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--bg);
}
/* Sold-out: dim the row but keep it interactive so staff can flip it back. */
.menu-item-row.is-soldout { opacity: 0.55; }
.menu-item-row.is-soldout .menu-item-name-text,
.menu-item-row.is-soldout .menu-item-desc-text,
.menu-item-row.is-soldout .menu-price-display { text-decoration: line-through; }
/* Drop-target indicator — thin accent bar at the top of the row that the
   dragged item would slot above. */
.menu-item-row.is-drag-over::before {
  content: '';
  position: absolute;
  top: -1px; left: 12px; right: 12px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
}

/* Read-only row body (no inputs) */
.menu-item-body { display: flex; flex-direction: column; gap: 2px; }
.menu-item-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.menu-item-name-text {
  font-weight: 500; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.menu-item-desc-text {
  font-size: 12px; color: var(--ink-3); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.menu-item-cat-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-3);
}
.menu-item-cat-text .cat-label {
  font-size: 10px; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Read-only price display matches the price-field look without the
   input chrome. */
.menu-price-display {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink); padding: 4px 8px;
  white-space: nowrap;
}
.menu-price-display .price-num { font-weight: 500; }
.menu-price-display .price-empty { color: var(--ink-4); }
.drag-handle {
  color: var(--ink-4);
  cursor: grab;
  display: grid;
  place-items: center;
  height: 100%;
  padding: 4px 0;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.drag-handle:hover { color: var(--ink-2); background: var(--bg-2); }
.drag-handle:active { cursor: grabbing; }
/* Allergen badge — uses the existing .allergen .allergens classes but
   the rendering context (row vs old admin page) calls for tighter pills.
   Subtle warning hue communicates "info to be aware of" without alarming. */
.menu-item-row .allergens { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.menu-item-row .allergen {
  width: auto; height: 18px; padding: 0 6px;
  background: color-mix(in srgb, #F59E0B 16%, var(--surface));
  color: #92400E;
  border: 1px solid color-mix(in srgb, #F59E0B 35%, var(--line));
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
}
html.dark .menu-item-row .allergen {
  background: color-mix(in srgb, #F59E0B 22%, var(--surface));
  color: #FCD34D;
  border-color: color-mix(in srgb, #F59E0B 45%, var(--line));
}

/* ---------- Allergen picker (in editor drawer) ---------- */
.allergen-picker { position: relative; }
.allergen-picker-input {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.allergen-picker-input:hover { border-color: var(--ink-4); }
.allergen-picker:focus-within .allergen-picker-input {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.allergen-picker-placeholder { color: var(--ink-4); font-size: 13px; flex: 1; }
.allergen-picker-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.allergen-picker-caret { color: var(--ink-3); flex-shrink: 0; }
.allergen-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink);
}
.allergen-chip-code {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  background: color-mix(in srgb, #F59E0B 22%, transparent);
  color: #92400E;
  padding: 1px 4px; border-radius: 3px;
}
html.dark .allergen-chip-code { color: #FCD34D; }
.allergen-chip-x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 14px; line-height: 1;
  padding: 0 2px; margin-left: 2px;
  border-radius: 3px;
}
.allergen-chip-x:hover { background: var(--bg); color: var(--ink); }
/* Position is driven by inline style from the parent (getBoundingClientRect
   based fixed positioning). Without inline style — falls back to absolute
   below the input. The drawer's overflow:hidden would normally clip an
   absolute child, but the fixed positioning lets the menu escape. */
.allergen-picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 200;
  max-height: 280px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.allergen-picker-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
}
.allergen-picker-opt:hover { background: var(--bg-2); color: var(--ink); }
.allergen-picker-opt.is-on { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink); }
.allergen-picker-opt-code {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  width: 28px; text-align: center;
  background: color-mix(in srgb, #F59E0B 18%, transparent);
  color: #92400E;
  padding: 3px 0; border-radius: 4px;
  flex-shrink: 0;
}
html.dark .allergen-picker-opt-code { color: #FCD34D; }
.allergen-picker-opt-label { font-weight: 500; font-size: 13px; }
.allergen-picker-opt-note { font-size: 11px; color: var(--ink-3); }
/* Combined number-input + currency suffix. Looks like one field, behaves
   like two — the suffix is non-editable visual decoration. */
.menu-price-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color .12s, background .12s;
}
.menu-price-field:focus-within {
  border-color: var(--line);
  background: var(--surface);
}
.menu-price-field input {
  width: 64px;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
  color: var(--ink);
  padding: 0;
  outline: 0;
}
.menu-price-field input::placeholder { color: var(--ink-4); }
.menu-price-suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
/* Active (eye-open) availability button — subtle success tint */
.icon-btn.xs.active {
  color: var(--success, #2a8f4a);
}
.menu-item-name { font-weight: 500; font-size: 14px; }
.menu-item-name em { font-style: normal; font-weight: 500; color: var(--accent); }
.menu-item-desc { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.menu-item-price { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 500; }
.allergens { display: flex; gap: 3px; }
.allergen {
  width: 22px; height: 22px;
  background: var(--bg-2);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
}

/* notification banner */
.banner {
  background: var(--surface);
  border: 0;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-2);
  letter-spacing: -0.005em;
}
.banner .banner-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* live preview mini */
.mini-site {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100%;
  padding: 0;
}
.ms-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(15,39,70,0.08);
}
.ms-nav-brand { font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 600; }
.ms-nav-links { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); }
.ms-hero {
  padding: 60px 28px 50px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.ms-hero h1 {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.ms-hero h1 em { font-style: italic; color: var(--accent); }
.ms-hero p {
  font-size: 14px;
  color: var(--ink-2);
  max-width: 380px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.ms-hero .ms-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ms-section { padding: 40px 28px; }
.ms-section h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 16px;
}
.ms-section h2 em { font-style: italic; color: var(--accent); }
.ms-block-highlight {
  outline: 2px dashed var(--ink);
  outline-offset: 4px;
  background: rgba(15,39,70,0.05);
  border-radius: 4px;
  animation: pulse 1.2s ease;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(15,39,70,0.18); }
  100% { box-shadow: 0 0 0 12px rgba(15,39,70,0); }
}

/* settings */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-item {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.settings-nav-item:hover { background: var(--bg-2); }
.settings-nav-item.active {
  background: var(--bg-2);
  color: var(--ink);
  font-weight: 500;
  position: relative;
}
.settings-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--ink);
  border-radius: 99px;
}

/* Shop Mode (kiosk) */
.shop {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.shop-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-brand .brand-mark { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
.shop-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.shop-title em { font-style: normal; font-weight: 500; color: var(--accent); }
.shop-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.shop-clock {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.shop-clock-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; text-align: right; }
.shop-body {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  padding: 16px 24px 24px;
}
.shop-pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shop-pane-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop-pane-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.shop-pane-title em { font-style: normal; font-weight: 500; color: var(--accent); }
.shop-list {
  flex: 1;
  overflow-y: auto;
}
.shop-list-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  align-items: center;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.shop-list-row:hover { background: var(--bg-2); }
/* "Now" — happening right now, highlighted but calm */
.shop-list-row.now {
  background: #FEFCE8;
  border-left-color: #EAB308;
}
.shop-list-row.now:hover { background: #FEF9C3; }
/* "Urgent" — overdue / late / needs attention. Used by every kiosk mode for
   bookings/orders that have passed their scheduled time without action. */
.shop-list-row.urgent {
  background: #FEF2F2;
  border-left-color: #DC2626;
}
.shop-list-row.urgent:hover { background: #FEE2E2; }
.shop-list-row.urgent .shop-time { color: #B91C1C; }
/* Per-status left stripes — pastel hue matching the portal's Gantt
   bars. Now + Urgent take precedence (they override the border-left
   colour). Each status uses a saturated 4px stripe. */
.shop-list-row.status-pending    { border-left-color: #F59E0B; }  /* amber */
.shop-list-row.status-confirmed  { border-left-color: #2563EB; }  /* blue */
.shop-list-row.status-arrived    { border-left-color: #06B6D4; }  /* cyan */
.shop-list-row.status-seated     { border-left-color: #10B981; }  /* green */
.shop-list-row.status-early_free { border-left-color: #8B5CF6; }  /* violet */
.shop-list-row.status-completed  { border-left-color: #9CA3AF; }  /* slate */
.shop-list-row.status-no_show    { border-left-color: #EF4444; }  /* red */
.shop-list-row.status-cancelled  { border-left-color: #D1D5DB; }  /* grey */
.shop-time {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.shop-time-rel { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; font-weight: 500; }
.shop-list-row.now .shop-time-rel { color: #A16207; font-weight: 600; }
.shop-list-row.urgent .shop-time-rel { color: #B91C1C; font-weight: 700; }
.shop-guest-name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.shop-guest-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.shop-party {
  width: 30px; height: 30px;
  border-radius: 99px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.shop-cover-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.shop-cover-stat {
  background: var(--surface);
  padding: 10px 10px;
  text-align: center;
}
.shop-cover-stat .v {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.shop-cover-stat .l { font-size: 10px; color: var(--ink-3); margin-top: 2px; font-weight: 500; }
/* Compact operational KPI strip at the top of the kiosk (above panels). */
.shop-kpis {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.shop-kpi {
  background: var(--surface);
  padding: 5px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}
.shop-kpi .l {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
.shop-kpi .v {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.shop-kpi .v small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.shop-kpi.alert .v { color: #DC2626; }
/* Inline KPI cells living on the top bar (replaces the full-width strip). */
.shop-kpis-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.shop-kpis-inline .k {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 11px;
  line-height: 1.1;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.shop-kpis-inline .k:first-child { padding-left: 4px; }
.shop-kpis-inline .k:last-child { border-right: 0; }
.shop-kpis-inline .l {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.shop-kpis-inline .v {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.shop-kpis-inline .v small { font-size: 10px; font-weight: 500; color: var(--ink-3); }
.shop-kpis-inline .k.alert .v { color: #DC2626; }
.shop-footer-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  gap: 8px;
}
.shop-segment {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 3px;
}
.shop-segment button {
  padding: 6px 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  min-height: 32px;
  cursor: pointer;
}
.shop-segment button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
/* Icon-only variant: square toggles, text moved to tooltip/aria-label. */
.shop-segment-icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 34px;
  min-height: 30px;
}
.shop-segment-icons button.active { color: var(--accent); }
.shop-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.shop-exit:hover { color: var(--ink); border-color: var(--ink-4); }
.lock-icon {
  width: 18px; height: 18px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--ink-3);
  display: inline-grid;
  place-items: center;
}
.shop-pin-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,39,70,0.4);
  z-index: 200;
  display: grid;
  place-items: center;
}
.shop-pin-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 320px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.shop-pin-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 18px 0;
}
.shop-pin-dot {
  width: 14px; height: 14px;
  border-radius: 99px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: background .15s;
}
.shop-pin-dot.filled { background: var(--ink); border-color: var(--ink); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ====================================================================
   Kiosk-scope (.shop) overrides — touch-friendly sizing for all kiosks
   ==================================================================== */

/* Default kiosk buttons stay touch-friendly (44px min) — the on-card
   "Klar for levering" / "Sett" / status-advance actions need real tap
   targets. The `.sm` variant is reserved for toolbar/secondary controls
   (date nav, Setups, Walk-in, New booking) and may compact further. */
.shop .btn,
.shop button.btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}
.shop .btn.sm,
.shop button.btn.sm {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}
.shop .btn.danger {
  background: #DC2626;
  color: #fff;
  border-color: #DC2626;
}
.shop .btn.danger:hover { background: #B91C1C; border-color: #B91C1C; }
.shop .btn.warn {
  background: #F59E0B;
  color: #fff;
  border-color: #F59E0B;
}
.shop .btn.warn:hover { background: #D97706; border-color: #D97706; }

/* Card-style touch chips used by some kiosks (catering filter, salon
   walk-in actions). 44px min, generous tap area. */
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.shop-chip:hover { background: var(--bg-2); border-color: var(--ink-4); }
.shop-chip.active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.shop-chip .shop-chip-count {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--ink-3);
  min-width: 22px;
  text-align: center;
}
.shop-chip.active .shop-chip-count { background: rgba(255,255,255,.18); color: #fff; }
.shop-chip.urgent .shop-chip-count {
  background: #FEE2E2;
  color: #B91C1C;
}
.shop-chip.urgent.active .shop-chip-count {
  background: #DC2626;
  color: #fff;
}

/* Urgent banner — used by every kiosk for "Next up in N min" / "Order
   X is X minutes overdue". Sits between the header and the body. */
.shop-urgent-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: linear-gradient(90deg, #DC2626, #B91C1C);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.shop-urgent-banner .pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: shop-pulse 1.6s infinite;
}
@keyframes shop-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Catering kiosk — KPI strip + LIVE indicator + timers ---------- */

.kiosk-kpi-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.kiosk-kpi-tile {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  gap: 3px;
  min-width: 116px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.kiosk-kpi-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kiosk-kpi-tile.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.kiosk-kpi-value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kiosk-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
/* Tone accents — left bar + value tint */
.kiosk-kpi-tile { position: relative; overflow: hidden; }
.kiosk-kpi-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: transparent;
  transition: background .15s;
}
.kiosk-kpi-tile.tone-today::before { background: #E30613; }
.kiosk-kpi-tile.tone-today .kiosk-kpi-value { color: #B91C1C; }
.kiosk-kpi-tile.tone-prep::before  { background: #9333EA; }
.kiosk-kpi-tile.tone-prep  .kiosk-kpi-value { color: #6D28D9; }
.kiosk-kpi-tile.tone-ready::before { background: #E30613; }
.kiosk-kpi-tile.tone-ready .kiosk-kpi-value { color: #B91C1C; }
.kiosk-kpi-tile.tone-done::before  { background: #2A8F4A; }
.kiosk-kpi-tile.tone-done  .kiosk-kpi-value { color: #14532D; opacity: 0.75; }
.kiosk-kpi-tile.tone-late::before  { background: #DC2626; }
.kiosk-kpi-tile.tone-late {
  background: linear-gradient(180deg, #FEF2F2, var(--surface));
  border-color: #FCA5A5;
}
.kiosk-kpi-tile.tone-late .kiosk-kpi-value { color: #B91C1C; }
.kiosk-kpi-tile.tone-late .kiosk-kpi-label { color: #B91C1C; }
.kiosk-kpi-tile.tone-late .kiosk-kpi-value { animation: kiosk-kpi-blink 1.4s ease-in-out infinite; }
.kiosk-kpi-tile.tone-idle::before  { background: var(--line); }

/* "LIVE" pulse on the right edge of the KPI strip — tells the staff the
   kiosk is wired up to real-time updates, not a stale tab. */
.kiosk-live-indicator {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  color: #B91C1C;
  background: color-mix(in srgb, #EF4444 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #EF4444 35%, var(--line));
  align-self: center;
}
.kiosk-live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: kiosk-live-pulse 1.6s ease-out infinite;
}
@keyframes kiosk-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@keyframes kiosk-kpi-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-live-dot,
  .kiosk-kpi-tile.tone-late .kiosk-kpi-value { animation: none; }
}

/* Time-in-status badge on each order card. Subtle by default; goes
   amber/red when the order has been in 'preparing' a while (set by
   parent component via .is-prep). */
.kiosk-time-in-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg-2);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.kiosk-time-in-status.is-prep {
  background: color-mix(in srgb, #9333EA 14%, var(--surface));
  color: #6D28D9;
}
html.dark .kiosk-time-in-status.is-prep {
  background: color-mix(in srgb, #9333EA 25%, var(--surface));
  color: #C4B5FD;
}
.shop-upcoming-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
  color: #92400E;
  font-weight: 600;
  font-size: 15px;
}
.shop-upcoming-banner .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #F59E0B;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
}

/* Empty-state block with icon + headline + sub copy + optional CTA.
   Replaces the thin "Ingen i køen" lines that look like broken UI. */
.shop-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}
.shop-empty .shop-empty-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bg-2);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.shop-empty .shop-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.shop-empty .shop-empty-sub {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 360px;
  line-height: 1.5;
}

/* Compact header — clock/date kept small so the work area gets the space.
   Overrides the earlier `.shop-sub`/`.shop-clock-sub` definitions. */
.shop-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.shop-clock-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; text-align: right; }

/* Scroll-fade affordance for overflowing columns (salon stylist cols,
   catering grid). Tells staff there's more content below the fold. */
.shop-scroll-fade {
  position: relative;
}
.shop-scroll-fade::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none;
}

/* ---------- Salon kiosk — quick-add input + assign-to-stylist picker ---------- */
.salon-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}
.salon-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Stylist picker — opens inline below a walk-in's actions, so it never
   gets clipped by the queue's overflow:auto (unlike an absolute popover). */
.salon-pop {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 4px;
}
.salon-pop button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.salon-pop button:hover { background: var(--surface); }
/* Compact ghost icon buttons on appointment cards (avbestill / påminnelse).
   Small footprint to keep the kiosk dense, but still a real tap target. */
.salon-mini {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.salon-mini:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.salon-mini.danger:hover { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
/* Inline tappable "✕ N avbestilt" toggle inside the per-stylist footer. */
.salon-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: #B91C1C;
  font-weight: 600;
  cursor: pointer;
}
.salon-link:hover { text-decoration: underline; }
/* "Kommende" rows under the kiosk calendar — full-width tappable booking rows. */
.shop-upnext-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-top: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.shop-upnext-row:hover { background: var(--bg-2); }

/* Post-login workspace picker (TenantChooser) */
.tenant-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tenant-choice:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tenant-choice .brand-mark,
.tenant-choice-admin .brand-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
}
.tenant-choice-admin {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  margin-bottom: 16px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  transition: box-shadow .12s, transform .12s;
}
.tenant-choice-admin:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }


/* ====================================================================
   Personalization — editable sections, hidden-modules tray, sidebar
   edit controls. Activated when user-prefs.jsx flips window.__locked
   to false. When locked, all these styles do nothing because their
   parent .editable-section/.nav-item-editable classes aren't applied.
   ==================================================================== */

.editable-section {
  position: relative;
  /* Reserve space at the top for the toolbar so it doesn't get clipped
     by descendants with overflow:hidden (card headers, banner rows). */
  padding-top: 8px;
  margin-top: 8px;
}
.editable-section > .editable-section-toolbar {
  position: absolute;
  top: 4px; right: 8px;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  transform: translateY(-4px);
}
.editable-section:hover > .editable-section-toolbar,
.editable-section:focus-within > .editable-section-toolbar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.editable-section > .editable-section-toolbar button {
  width: 28px; height: 28px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
}
.editable-section > .editable-section-toolbar button:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--ink);
}
.editable-section > .editable-section-toolbar button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.editable-section > .editable-section-toolbar button:last-child {
  color: #B91C1C;
}
.editable-section > .editable-section-toolbar button:last-child:hover {
  background: #FEE2E2;
}

/* Subtle dashed outline only when unlocked — uses :has() to detect
   that there's a toolbar present. Falls back to no outline on browsers
   without :has(). */
.editable-section:has(> .editable-section-toolbar):hover {
  outline: 1.5px dashed rgba(245, 158, 11, 0.6);
  outline-offset: 8px;
  border-radius: 6px;
}

/* Hidden-modules tray — small card listing what the user collapsed,
   one click to bring back. Only renders when at least one slot is
   hidden AND the user is unlocked. */
.hidden-modules-tray {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hidden-modules-tray-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.hidden-modules-tray-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.hidden-modules-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.hidden-modules-chip:hover {
  background: var(--bg);
  border-color: var(--ink-4);
  color: var(--ink);
}
.hidden-modules-reset {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 600;
  color: #92400E;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hidden-modules-reset:hover { color: #78350F; text-decoration: underline; }

/* Sidebar nav — edit controls per item. Only visible when the row
   has .nav-item-editable AND the user hovers/focuses it. Buttons
   stopPropagation so a click on the controls doesn't navigate. */
.nav-item-editable {
  position: relative;
}
.nav-item-editable .nav-edit-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
  margin-left: auto;
}
.nav-item-editable:hover .nav-edit-controls,
.nav-item-editable:focus-within .nav-edit-controls {
  opacity: 1;
}
.nav-item-editable .nav-edit-controls button {
  width: 22px; height: 22px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-3);
  cursor: pointer;
}
.nav-item-editable .nav-edit-controls button:hover:not(:disabled) {
  background: rgba(0,0,0,0.06);
  color: var(--ink);
}
.nav-item-editable .nav-edit-controls button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.nav-item-editable .nav-edit-controls button:last-child:hover {
  color: #B91C1C;
  background: #FEE2E2;
}
.nav-item-dim {
  opacity: 0.6;
}
.nav-item-dim:hover {
  opacity: 1;
}

/* Dark mode adjustments — toolbar uses var-driven colors already,
   but the danger-red surfaces need to remain readable on dark. */
html.dark .editable-section > .editable-section-toolbar button:last-child:hover {
  background: rgba(220, 38, 38, 0.2);
}
html.dark .nav-item-editable .nav-edit-controls button:last-child:hover {
  background: rgba(220, 38, 38, 0.18);
}

/* Admin (dark sidebar mode) */
.admin-sidebar { background: var(--admin-bg) !important; border-right-color: var(--admin-line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Admin shell doesn't support the portal sidebar's rail-mode toggle —
   but body.sidebar-collapsed (set when the user collapsed the portal
   sidebar before navigating into admin) was squeezing .app.admin-app
   to 64px and hiding all admin nav labels. Pin the admin grid to full
   width so the admin sidebar keeps its 260px column regardless of the
   body class. */
body.sidebar-collapsed .app.admin-app {
  grid-template-columns: 260px 1fr !important;
}
.admin-sidebar .sidebar-brand { border-color: var(--admin-line); }
.admin-sidebar .sidebar-footer { border-color: var(--admin-line); }
.admin-sidebar .nav-section {
  color: var(--admin-ink-3);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 14px 14px 4px;
}
.admin-sidebar .nav-item { color: var(--admin-ink-2); }
.admin-sidebar .nav-item:hover { background: var(--admin-surface); color: var(--admin-ink); }
.admin-sidebar .nav-item.active { background: var(--accent); color: #fff; }
.admin-sidebar .nav-badge { background: var(--admin-surface); color: var(--admin-ink); }
.admin-sidebar .nav-item.active .nav-badge { background: rgba(255,255,255,0.22); color: #fff; }
/* Truncate nav labels so a narrow viewport doesn't slice them mid-word
   without ellipsis. Min-width:0 on the row + overflow-hidden on span. */
.admin-sidebar .nav-item { min-width: 0; }
.admin-sidebar .nav-item > span {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Footer user info — same truncation treatment. */
.admin-sidebar .sidebar-footer .user-info { min-width: 0; overflow: hidden; }
.admin-sidebar .sidebar-footer .user-name,
.admin-sidebar .sidebar-footer .user-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Internal — full access" pill replaces the old 3-line YOU ARE card.
   Slim, low-key, with a pulsing green dot so it still signals "you have
   power" without dominating the sidebar. */
.admin-staff-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 12px 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, #10B981 12%, var(--admin-bg));
  border: 1px solid color-mix(in srgb, #10B981 28%, var(--admin-line));
  border-radius: 999px;
  color: #6EE7B7;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-staff-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.55);
  animation: admin-staff-pulse 2.4s ease-out infinite;
}
@keyframes admin-staff-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-staff-dot { animation: none; }
}

/* "Tilbake til portal" button — tighter, matches the rest of the
   admin chrome and truncates label cleanly at narrow widths. */
.admin-back-to-portal {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--admin-line);
  background: var(--admin-surface);
  color: var(--admin-ink);
  font-size: 12.5px; font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.admin-back-to-portal:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--admin-surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--admin-line));
}
.admin-back-to-portal > span {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}

/* ============================================================
   Dashboard — Quick actions strip + Insights strip
   ============================================================ */

.dash-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.dash-quick-action {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.dash-quick-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.dash-quick-action-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.dash-quick-action-label {
  flex: 1;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-quick-action-arrow { color: var(--ink-4); flex-shrink: 0; }
.dash-quick-action:hover .dash-quick-action-arrow { color: var(--ink-2); }
.dash-quick-action.tint-blue  .dash-quick-action-icon { background: color-mix(in srgb, #2563EB 14%, var(--surface)); color: #1D4ED8; }
.dash-quick-action.tint-amber .dash-quick-action-icon { background: color-mix(in srgb, #F59E0B 14%, var(--surface)); color: #B45309; }
.dash-quick-action.tint-pink  .dash-quick-action-icon { background: color-mix(in srgb, #EC4899 14%, var(--surface)); color: #BE185D; }
.dash-quick-action.tint-green .dash-quick-action-icon { background: color-mix(in srgb, #10B981 14%, var(--surface)); color: #047857; }
html.dark .dash-quick-action.tint-blue  .dash-quick-action-icon { color: #93C5FD; }
html.dark .dash-quick-action.tint-amber .dash-quick-action-icon { color: #FCD34D; }
html.dark .dash-quick-action.tint-pink  .dash-quick-action-icon { color: #F9A8D4; }
html.dark .dash-quick-action.tint-green .dash-quick-action-icon { color: #6EE7B7; }

/* Insights strip — three small computed-signal cards. */
.dash-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dash-insight {
  position: relative;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
}
.dash-insight::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--line);
}
.dash-insight.tint-blue::before  { background: linear-gradient(180deg, #3B82F6, #1D4ED8); }
.dash-insight.tint-green::before { background: linear-gradient(180deg, #10B981, #047857); }
.dash-insight.tint-amber::before { background: linear-gradient(180deg, #F59E0B, #B45309); }
.dash-insight-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dash-insight-value {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1.1;
}
.dash-insight-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* AI Chat widget — discrete corner FAB.
   Shrunk from 56px to 36px with lower opacity so the assistant
   doesn't dominate the canvas. Hover bumps it back to full opacity. */
.ai-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(37,99,176,0.22), 0 1px 3px rgba(0,0,0,0.06);
  z-index: 80;
  opacity: 0.72;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ai-fab:hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 16px rgba(37,99,176,0.32), 0 2px 6px rgba(0,0,0,0.08);
}
.ai-fab:active { transform: scale(0.96); }
/* Pulse ring is too attention-grabby at this size — kept but very
   subtle (3% opacity instead of 18%). */
.ai-fab .pulse {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.08;
  animation: pulse-ring 3s infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.12; }
  100% { transform: scale(1.25); opacity: 0; }
}
.ai-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 380px;
  height: 580px;
  background: var(--surface);
  border: 0;
  border-radius: 22px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ai-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid;
  place-items: center;
}
.ai-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.ai-sub { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.ai-sub .dot { width: 6px; height: 6px; border-radius: 99px; background: #15803D; }
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg { max-width: 85%; }
.ai-msg.user { align-self: flex-end; }
.ai-msg.bot { align-self: flex-start; }
.ai-msg .bubble {
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.ai-msg.user .bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.ai-msg.bot .bubble {
  background: var(--bg-2);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.ai-msg .time {
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 3px;
  text-align: right;
}
.ai-msg.bot .time { text-align: left; }
.ai-slot-suggestions {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
.ai-slot {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-mono);
}
.ai-slot:hover { background: var(--bg-2); border-color: var(--ink); }
.ai-slot.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.ai-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  align-self: flex-start;
  max-width: 100%;
  width: 100%;
}
.ai-summary-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
}
.ai-summary-row .l { color: var(--ink-3); font-size: 11px; }
.ai-input {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
}
.ai-input input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--bg);
}
.ai-input input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ai-send {
  width: 36px; height: 36px;
  border-radius: 99px;
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-quick {
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-quick button {
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink-2);
}
.ai-quick button:hover { background: var(--bg-2); border-color: var(--ink-4); }
.typing-dots {
  display: inline-flex;
  gap: 3px;
}
.typing-dots span {
  width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3);
  animation: typing 1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* Calendar week nav */
.cal-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Shop menu item (action popover) */
.shop-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .1s;
}
.shop-menu-item:hover { background: var(--bg-2); color: var(--ink); }
.shop-menu-item.primary {
  background: var(--ink);
  color: #fff;
}
.shop-menu-item.primary:hover { background: var(--ink-2); }

/* Web editor (advanced) */
.editor {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  height: calc(100vh - 65px);
  background: var(--bg-2);
  transition: grid-template-columns .25s ease;
}
/* Removing the panel = drop the grid track entirely. Earlier we kept
   the 3-track grid with 0px first track + display:none on the side,
   but that made grid-flow place the canvas in the empty 0px track. */
.editor.collapse-left              { grid-template-columns:  1fr 320px; }
.editor.collapse-right             { grid-template-columns: 280px 1fr;  }
.editor.collapse-left.collapse-right { grid-template-columns: 1fr; }
.editor.collapse-left  > .editor-side:first-child,
.editor.collapse-right > .editor-side.right { display: none; }
/* Fullscreen mode — pull the whole editor over the portal chrome
   (sidebar + topbar) so the canvas gets the entire viewport. */
.editor-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.editor-fullscreen .editor {
  height: calc(100vh - 56px);
}
.editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  height: 56px;
}
.editor-bar-left, .editor-bar-right { display: flex; align-items: center; gap: 8px; }
.editor-bar-center { display: flex; align-items: center; gap: 8px; }
.editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.editor-breadcrumb .crumb { color: var(--ink-3); }
.editor-breadcrumb .crumb.current { color: var(--ink); font-weight: 500; }
.editor-side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-side.right { border-right: none; border-left: 1px solid var(--line); }
.editor-side-header {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
}
.editor-side-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.editor-side-body { flex: 1; overflow-y: auto; }
.editor-page-row {
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  border-left: 2px solid transparent;
}
.editor-page-row:hover { background: var(--bg-2); }
.editor-page-row.active { background: var(--bg-2); border-left-color: var(--ink); font-weight: 500; }
.editor-page-actions {
  display: none;
  gap: 2px;
  margin-left: 4px;
}
.editor-page-row:hover .editor-page-actions { display: inline-flex; }
.icon-btn.xs {
  width: 22px; height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.icon-btn.xs.danger { color: var(--error); }
.editor-section-row {
  padding: 8px 12px;
  margin: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  background: var(--surface);
}
.editor-section-row:hover { border-color: var(--ink-4); }
.editor-section-row.active { border-color: var(--ink); background: var(--bg-2); }
.editor-section-row .label { flex: 1; font-weight: 500; }
.editor-section-row .type { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.editor-section-row .grip { color: var(--ink-4); cursor: grab; }
.editor-section-row.dragover { background: var(--bg-3); border-style: dashed; }
.editor-section-add {
  margin: 10px 12px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  text-align: center;
  width: calc(100% - 24px);
  transition: border-color .15s, color .15s;
}
.editor-section-add:hover { border-color: var(--ink); color: var(--ink); }

/* Preview canvas */
.editor-canvas {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  position: relative;
  min-height: 0;
  height: 100%;
}
.editor-device {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  /* Was overflow: hidden — kept content from poking past rounded corners
     but combined with deep grids / atmosphere it stopped the canvas from
     getting a real scroll height. `clip` keeps the corners while letting
     parent scroll see the full content height. */
  overflow: clip;
  transition: width .25s, max-width .25s;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: auto;
}
.editor-device.desktop { width: 100%; max-width: 1280px; min-height: 800px; }
.editor-device.tablet { width: 768px; max-width: 100%; min-height: 1024px; }
.editor-device.mobile { width: 390px; max-width: 100%; min-height: 800px; border-radius: 24px; }

/* Live mode: drop the fake browser-chrome look so the iframe reads as
   the actual site. Card chrome stays (border + radius + shadow) but
   the chrome row is hidden by the JSX, and the iframe fills the device
   fully. Position:relative anchors the floating live-status pill.
   flex:1 + align-self:stretch make the device frame fill the canvas
   vertically instead of collapsing to the iframe's intrinsic height
   (which would otherwise be 0, since iframe `flex:1` needs a real
   parent height to expand into). */
.editor-device.is-live-bleed {
  position: relative;
  padding: 0;
  flex: 1;
  align-self: stretch;
  min-height: 600px;
}
.editor-device.is-live-bleed > iframe { flex: 1; min-height: 0; height: 100%; }

/* Floating bridge-status pill, bottom-left corner of the live canvas. */
.editor-live-status {
  position: absolute;
  bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  z-index: 5;
}
.editor-live-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: background .15s;
}
.editor-live-status-dot[data-state="saving"] { background: #F59E0B; }
.editor-live-status-dot[data-state="ok"] {
  background: #2A8F4A;
  box-shadow: 0 0 0 0 rgba(42,143,74,0.6);
  animation: editor-live-status-pulse 2s ease-out infinite;
}
.editor-live-status-dot[data-state="wait"] {
  background: #F59E0B;
  animation: editor-live-status-pulse-amber 1.4s ease-out infinite;
}
@keyframes editor-live-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(42,143,74,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(42,143,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,143,74,0); }
}
@keyframes editor-live-status-pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
@media (prefers-reduced-motion: reduce) {
  .editor-live-status-dot { animation: none !important; }
}
.editor-section-host {
  position: relative;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .1s;
}
.editor-section-host:hover { outline-color: rgba(15,39,70,0.15); }
.editor-section-host.selected { outline-color: var(--ink); }
.editor-section-host.hidden { opacity: 0.45; }
.editor-section-host.hidden::after {
  content: "HIDDEN ON LIVE";
  position: absolute; top: 10px; right: 10px;
  background: var(--warning, #c87a00); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  padding: 3px 7px; border-radius: 4px;
  z-index: 9;
}
/* Inline insert bar between sections */
.inline-add-section {
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px; height: 18px;
  cursor: pointer;
  opacity: 0; transition: opacity .15s, height .15s;
  position: relative;
  z-index: 5;
}
.inline-add-section:hover { opacity: 1; height: 28px; }
.inline-add-section .line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent, #2563B0), transparent);
}
.inline-add-section .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 99;
  background: var(--accent, #2563B0); color: #fff;
  box-shadow: var(--shadow-md);
}
.editor-page-row .page-status-dot { transition: background .2s; }
.editor-section-host .section-toolbar {
  position: absolute;
  top: 6px; right: 6px;
  display: none;
  gap: 4px;
  z-index: 10;
}
.editor-section-host.selected .section-toolbar { display: flex; }
.editor-section-host .section-label {
  position: absolute;
  top: 0; left: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 0 0 6px 0;
  display: none;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.editor-section-host.selected .section-label { display: block; }
.section-toolbar button {
  width: 26px; height: 26px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.section-toolbar button:hover { background: var(--ink-2); }
.section-toolbar button.danger:hover { background: var(--error); }

/* Right panel — properties */
.editor-tabs {
  display: flex;
  border-bottom: 1px solid var(--line-2);
}
.editor-tabs button {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.editor-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.editor-props-section { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.editor-props-section:last-child { border-bottom: none; }
.editor-props-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.editor-props-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.editor-props-row .l { font-size: 11.5px; color: var(--ink-2); }
.editor-props-row input, .editor-props-row select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
}
.editor-props-row input:focus, .editor-props-row select:focus {
  outline: none; border-color: var(--ink);
}
.editor-props-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}
.editor-props-textarea:focus { outline: none; border-color: var(--ink); }
.editor-color-swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.editor-color-swatch {
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s;
}
.editor-color-swatch.active { border-color: var(--ink); transform: scale(1.1); }
.editor-num-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.editor-num-stepper input {
  width: 50px;
  padding: 4px 6px;
  text-align: center;
  border: 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
}
.editor-num-stepper button {
  width: 22px; height: 28px;
  border: 0;
  background: var(--bg-2);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
}
.editor-num-stepper button:hover { background: var(--bg-3); color: var(--ink); }

/* Section library popover */
.section-library {
  position: fixed;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 540px;
  max-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.section-library-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-library-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}
.section-library-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.section-library-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.section-library-preview {
  height: 80px;
  background: var(--bg-2);
  border-radius: 4px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.section-library-name { font-size: 13px; font-weight: 500; }
.section-library-desc { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.contenteditable-target {
  outline: none;
  cursor: text;
  transition: background .1s;
  border-radius: 2px;
}
.contenteditable-target:hover { background: rgba(255, 235, 100, 0.2); }
.contenteditable-target:focus { background: rgba(255, 235, 100, 0.4); }

.editor-device-toggle {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.editor-device-toggle button {
  width: 32px; height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.editor-device-toggle button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* "Live" toggle — wider than the device-toggle buttons so it reads as the
   primary affordance. Pulsing red dot when active (broadcast indicator);
   subtle grey dot when off so the button still hints at what it does. */
.editor-live-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 8px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.editor-live-toggle:hover { background: var(--bg-2); color: var(--ink); }
.editor-live-toggle .editor-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  box-shadow: 0 0 0 0 transparent;
  transition: background .15s, box-shadow .15s;
}
/* Active state: red dot pulsing + the button itself glowing softly. */
.editor-live-toggle.is-on {
  background: color-mix(in srgb, #EF4444 10%, var(--surface));
  border-color: color-mix(in srgb, #EF4444 35%, var(--line));
  color: #B91C1C;
}
html.dark .editor-live-toggle.is-on {
  background: color-mix(in srgb, #EF4444 18%, var(--surface));
  color: #FCA5A5;
}
.editor-live-toggle.is-on .editor-live-dot {
  background: #EF4444;
  animation: editor-live-pulse 1.6s ease-out infinite;
}
@keyframes editor-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) {
  .editor-live-toggle.is-on .editor-live-dot { animation: none; }
}

.empty-state-editor {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.cal-week-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cal-week-label em { font-style: normal; font-weight: 500; color: var(--accent); }
.shop-pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.shop-pin-key {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
}
.shop-pin-key:hover { background: var(--bg-2); }
.shop-pin-key:active { background: var(--bg-3); }
.shop-empty-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-2);
  border-radius: 99px;
  font-size: 11px;
  color: var(--ink-3);
}
.kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.kpi-cell {
  background: var(--surface);
  padding: 8px 14px;
}
.kpi-cell .v {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi-cell .l { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

/* notification toast */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(29, 29, 31, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes toastIn { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ============================================================
   Editor preview: em-styling inside section titles
   Restaurant tenants (Carlos) get italic Cormorant em in --warm
   (#6B98BC) for hero/page-hero and --terracotta (#2D6B95) for
   about/menu. SaaS tenants (Syntriq) get straight (non-italic)
   sans-serif em in their tenant accent.

   The .editor-canvas[data-theme="syntriq"] selector wins so when the
   canvas root carries that attr the SaaS overrides apply.
   ============================================================ */
.editor-section-host h1 em,
.editor-section-host h2 em,
.editor-section-host h3 em {
  font-style: italic;
}
/* Carlos / restaurant defaults */
.editor-section-host[data-section-type="hero"] h1 em,
.editor-section-host[data-section-type="page-hero"] h1 em {
  color: #6B98BC;
}
.editor-section-host[data-section-type="about"] h2 em,
.editor-section-host[data-section-type="menu"] h2 em {
  color: #2D6B95;
}

/* Syntriq / SaaS theme — straight (no italic) + violet accent */
.editor-canvas[data-theme="syntriq"] .editor-section-host h1 em,
.editor-canvas[data-theme="syntriq"] .editor-section-host h2 em,
.editor-canvas[data-theme="syntriq"] .editor-section-host h3 em {
  font-style: normal;
  color: #5B6CFF;
}

/* Meny Aksdal / catering theme — italic Fraunces em in Meny red */
.editor-canvas[data-theme="meny"] .editor-section-host h1 em,
.editor-canvas[data-theme="meny"] .editor-section-host h2 em,
.editor-canvas[data-theme="meny"] .editor-section-host h3 em {
  font-style: italic;
  color: #E30613;
}

/* ============================================================
   VIBRANT SAAS THEME LAYER  (added 2026-05)
   ------------------------------------------------------------
   A cohesive "pop" pass over the calm base: gradient accents,
   colour-coded KPI tiles, soft accent glows and gentle depth.
   Everything derives from --accent / --accent-2 (set per tenant
   by app.jsx) so the colour story follows each brand. Kept as a
   trailing layer so it overrides the base without disturbing it,
   and so it can be reverted wholesale if needed.
   ============================================================ */

:root {
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --glow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 50%, transparent);
  --glow-sm: 0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent);
  /* KPI rotation palette — used to auto-colour untinted stat tiles */
  --kpi-1a:#5B6CFF; --kpi-1b:#7C3AED;
  --kpi-2a:#10B981; --kpi-2b:#059669;
  --kpi-3a:#F59E0B; --kpi-3b:#D97706;
  --kpi-4a:#A855F7; --kpi-4b:#D946EF;
  --kpi-5a:#F43F5E; --kpi-5b:#E11D48;
  --kpi-6a:#06B6D4; --kpi-6b:#0891B2;
}

/* Subtle top-right accent wash — gives the page depth without noise.
   Dark mode keeps its flat surface (html.dark body wins on specificity). */
body {
  background:
    radial-gradient(1100px 560px at 100% -8%,
      color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg) 58%);
  background-attachment: fixed;
}

/* ---- Primary action: gradient + soft glow + lift ---- */
.btn.primary {
  background: var(--accent-grad);
  box-shadow: var(--glow-sm);
}
.btn.primary:hover {
  background: var(--accent-grad);
  filter: brightness(1.06);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.btn.primary:active { transform: translateY(0) scale(0.98); }

/* Amber semantic button (waitlist etc.) — replaces ad-hoc inline colours */
.btn.warn {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
}
.btn.warn:hover { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.btn.accent { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--success) 55%, transparent); }
.btn.accent:hover { transform: translateY(-1px); box-shadow: 0 5px 16px -4px color-mix(in srgb, var(--success) 55%, transparent); }

/* ---- Cards: a touch more depth ---- */
.card { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line-2); }

/* ---- Stat tiles: bolder gradient stripe, hover lift, auto colour ---- */
.stat {
  transition: box-shadow .2s ease, transform .2s ease;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line-2);
}
.stat::before { height: 4px; opacity: 1; background: var(--accent-grad); }
.stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-2);
}
/* Faint colour wash bleeding from the top stripe */
.stat::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent);
  pointer-events: none;
}

/* Auto-rotate colours for KPI tiles that don't opt into an explicit tint,
   so every dashboard row reads as a colourful, scannable strip. Explicit
   .tint-* tiles (e.g. catering) are preserved via :not(). */
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+1)::before,
.row    > .stat:not([class*="tint-"]):nth-child(6n+1)::before { background: linear-gradient(90deg, var(--kpi-1a), var(--kpi-1b)); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+2)::before,
.row    > .stat:not([class*="tint-"]):nth-child(6n+2)::before { background: linear-gradient(90deg, var(--kpi-2a), var(--kpi-2b)); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+3)::before,
.row    > .stat:not([class*="tint-"]):nth-child(6n+3)::before { background: linear-gradient(90deg, var(--kpi-3a), var(--kpi-3b)); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+4)::before,
.row    > .stat:not([class*="tint-"]):nth-child(6n+4)::before { background: linear-gradient(90deg, var(--kpi-4a), var(--kpi-4b)); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+5)::before,
.row    > .stat:not([class*="tint-"]):nth-child(6n+5)::before { background: linear-gradient(90deg, var(--kpi-5a), var(--kpi-5b)); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+6)::before,
.row    > .stat:not([class*="tint-"]):nth-child(6n+6)::before { background: linear-gradient(90deg, var(--kpi-6a), var(--kpi-6b)); }
/* Match the colour wash to each tile's stripe */
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+1)::after,
.row    > .stat:not([class*="tint-"]):nth-child(6n+1)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-1a) 9%, transparent), transparent); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+2)::after,
.row    > .stat:not([class*="tint-"]):nth-child(6n+2)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-2a) 9%, transparent), transparent); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+3)::after,
.row    > .stat:not([class*="tint-"]):nth-child(6n+3)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-3a) 9%, transparent), transparent); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+4)::after,
.row    > .stat:not([class*="tint-"]):nth-child(6n+4)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-4a) 9%, transparent), transparent); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+5)::after,
.row    > .stat:not([class*="tint-"]):nth-child(6n+5)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-5a) 9%, transparent), transparent); }
.grid-4 > .stat:not([class*="tint-"]):nth-child(6n+6)::after,
.row    > .stat:not([class*="tint-"]):nth-child(6n+6)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-6a) 9%, transparent), transparent); }
/* Keep stat content above the wash */
.stat-label, .stat-value, .stat-sub, .stat .spark { position: relative; z-index: 1; }

/* ---- Sidebar active item: gradient pill + glow ---- */
.sidebar .nav-item.active {
  background: var(--accent-grad);
  box-shadow: var(--glow-sm);
}

/* ---- Segmented control: accent-tinted active segment ---- */
.segmented button.active {
  color: var(--accent);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---- Tables: tinted header + accent hover ---- */
.tbl thead th { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* ---- Card title accent already uses --accent; nudge to gradient text ---- */
.card-title em {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dark mode: soften the glows so they read as ambient, not neon */
html.dark {
  --glow: 0 6px 22px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  --glow-sm: 0 2px 10px -3px color-mix(in srgb, var(--accent) 60%, transparent);
}
html.dark .stat::after { opacity: 0.6; }

/* ============================================================
   POP LAYER 2  (added 2026-05)
   Motion + colour + depth on top of the Vibrant SaaS layer.
   Tasteful intensity. All motion is disabled under
   prefers-reduced-motion (block at the end).
   ============================================================ */

/* ---- Motion: cards & stats glide in on mount, staggered ---- */
@keyframes popIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.content .card,
.content .stat { animation: popIn .42s cubic-bezier(.22,.61,.36,1) both; }
/* Stagger the KPI row + first content row so it reads as a cascade */
.grid-4 > .stat:nth-child(1) { animation-delay: 0ms; }
.grid-4 > .stat:nth-child(2) { animation-delay: 45ms; }
.grid-4 > .stat:nth-child(3) { animation-delay: 90ms; }
.grid-4 > .stat:nth-child(4) { animation-delay: 135ms; }
.content .row > .card:nth-child(2) { animation-delay: 60ms; }
.content .row > .card:nth-child(3) { animation-delay: 120ms; }

/* ---- Depth: gentle hover on content cards (shadow only, no jump) ---- */
.content .card { transition: box-shadow .2s ease; }
.content .card:hover { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-2); }

/* ---- Glass: topbar adapts to light/dark (was hardcoded white) ---- */
.topbar {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: 0 1px 0 var(--line-2), 0 6px 20px -16px rgba(0,0,0,0.4);
}

/* ---- Richer data viz: gradient bars + sparkline draw-in ---- */
.bar { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); }
.bar:hover { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); }
.bar.accent { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
@keyframes spkDraw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.spark polyline { stroke-dasharray: 220; animation: spkDraw 1.1s ease-out forwards; }

/* ---- Colour: per-module nav icons (data-nav set in sidebar.jsx) ---- */
.sidebar .nav-item:not(.active) svg { opacity: 1; }
.nav-item:not(.active)[data-nav="dashboard"] svg { color: #5B6CFF; }
.nav-item:not(.active)[data-nav="bookings"] svg,
.nav-item:not(.active)[data-nav="schedule"] svg,
.nav-item:not(.active)[data-nav="orders"] svg,
.nav-item:not(.active)[data-nav="teetimes"] svg,
.nav-item:not(.active)[data-nav="submissions"] svg { color: #2563EB; }
.nav-item:not(.active)[data-nav="resources"] svg,
.nav-item:not(.active)[data-nav="spaces"] svg,
.nav-item:not(.active)[data-nav="course"] svg { color: #0E9F6E; }
.nav-item:not(.active)[data-nav="menu"] svg,
.nav-item:not(.active)[data-nav="services"] svg,
.nav-item:not(.active)[data-nav="products"] svg,
.nav-item:not(.active)[data-nav="treatments"] svg,
.nav-item:not(.active)[data-nav="pricebook"] svg { color: #F59E0B; }
.nav-item:not(.active)[data-nav="quotes"] svg,
.nav-item:not(.active)[data-nav="content"] svg { color: #8B5CF6; }
.nav-item:not(.active)[data-nav="design"] svg { color: #EC4899; }
.nav-item:not(.active)[data-nav="gallery"] svg { color: #06B6D4; }
.nav-item:not(.active)[data-nav="news"] svg { color: #F43F5E; }
.nav-item:not(.active)[data-nav="analytics"] svg,
.nav-item:not(.active)[data-nav="reports"] svg { color: #10B981; }
.nav-item:not(.active)[data-nav="customers"] svg,
.nav-item:not(.active)[data-nav="members"] svg,
.nav-item:not(.active)[data-nav="clients"] svg,
.nav-item:not(.active)[data-nav="patients"] svg,
.nav-item:not(.active)[data-nav="stylists"] svg,
.nav-item:not(.active)[data-nav="practitioners"] svg,
.nav-item:not(.active)[data-nav="mechanics"] svg,
.nav-item:not(.active)[data-nav="leads"] svg,
.nav-item:not(.active)[data-nav="team"] svg { color: #6366F1; }
.nav-item:not(.active)[data-nav="tournaments"] svg,
.nav-item:not(.active)[data-nav="loyalty"] svg,
.nav-item:not(.active)[data-nav="promotions"] svg,
.nav-item:not(.active)[data-nav="campaigns"] svg { color: #F97316; }
.nav-item:not(.active)[data-nav="projects"] svg,
.nav-item:not(.active)[data-nav="jobs"] svg,
.nav-item:not(.active)[data-nav="workshop"] svg,
.nav-item:not(.active)[data-nav="vehicles"] svg,
.nav-item:not(.active)[data-nav="parts"] svg,
.nav-item:not(.active)[data-nav="inventory"] svg,
.nav-item:not(.active)[data-nav="shipping"] svg { color: #0EA5E9; }
.nav-item:not(.active)[data-nav="tenants"] svg,
.nav-item:not(.active)[data-nav="plans"] svg { color: #7C3AED; }
.nav-item:not(.active)[data-nav="settings"] svg { color: #64748B; }
.nav-item:not(.active)[data-nav="subscription"] svg,
.nav-item:not(.active)[data-nav="invoices"] svg { color: #14B8A6; }

/* ---- Respect users who prefer reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .content .card,
  .content .stat,
  .spark polyline { animation: none !important; }
  .stat:hover { transform: none !important; }
  .btn.primary:hover, .btn.accent:hover { transform: none !important; }
}

/* ====================================================================
   Responsive shell — the portal shipped desktop-only (viewport was pinned
   to 1280). With viewport=device-width these rules let the main shell and
   content reflow on tablet/phone. Placed LAST so they win source order over
   the base grid/layout definitions above. Shop-mode kiosks still target a
   wide staff screen and are out of scope here.
   ==================================================================== */
@media (max-width: 960px) {
  /* Auto icon-rail: a 60px sidebar with the verbose bits hidden. */
  .app { grid-template-columns: 60px 1fr; }
  .sidebar .nav-item span,
  .sidebar .tenant-info,
  .sidebar .tenant-switch-arrow,
  .sidebar .user-info,
  .sidebar .nav-badge,
  .sidebar .nav-section,
  .sidebar .sidebar-tool-locale,
  .sidebar-collapse-toggle { display: none !important; }
  .sidebar .nav-item { justify-content: center; }
  .sidebar .tenant-switch { justify-content: center; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .content-layout { grid-template-columns: 1fr; }
  .content, .content.compact { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .content, .content.compact { padding: 16px 14px 64px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding-left: 14px; padding-right: 14px; }
  .shop-body { grid-template-columns: 1fr; }
  .drawer { left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto; }
}

/* ====================================================================
   Reduced motion — comprehensive reset. Earlier blocks only covered a few
   selectors; many spinners/pulses use INLINE `animation` (kiosk live dot,
   the auth + error-boundary spinners) which CSS-class rules can't reach.
   This nukes all animation/transition for users who ask for less motion.
   Placed last so it wins.
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden but available to screen readers (for spoken labels on
   icon-only / visual-only UI). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}