/* =====================================================================
   RB Control Center — design tokens & layout
   Black / white / grey only. Status colours used sparingly.
   ===================================================================== */
:root {
  --c-black:    #000000;
  --c-grey-950: #0a0a0a;
  --c-grey-900: #141414;
  --c-grey-800: #1f1f1f;
  --c-grey-700: #2a2a2a;
  --c-grey-600: #4a4a4a;
  --c-grey-500: #6b6b6b;
  --c-grey-400: #9a9a9a;
  --c-grey-300: #cccccc;
  --c-grey-200: #e5e5e5;
  --c-grey-100: #f4f4f5;
  --c-grey-50:  #fafafa;
  --c-white:    #ffffff;

  --c-status-ok:   #2e7d32;
  --c-status-warn: #b25e00;
  --c-status-crit: #c62828;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --sidebar-w:  244px;
  --topheader-h: 56px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  --font-sans: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--c-grey-900);
  background: var(--c-grey-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }

/* Native <details> marker hidden globally (we draw our own chevron) */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* =====================================================================
   App shell — sidebar (fixed left) + main column (topheader + page)
   ===================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.app-main {
  display: flex; flex-direction: column;
  background: var(--c-grey-50);
  min-width: 0;
}
.page {
  flex: 1;
  padding: var(--space-6) var(--space-8) var(--space-10);
  width: 100%;
  /* full width — no max-width cap */
}

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  background: var(--c-black);
  color: var(--c-white);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--c-grey-900);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--topheader-h);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--c-grey-900);
}
.sidebar-brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--c-white); color: var(--c-black);
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 11px; letter-spacing: 0.5px;
}
.sidebar-brand-text {
  font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
  color: var(--c-white);
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--c-grey-800); border-radius: 4px; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item { margin: 1px 8px; }

.nav-link {
  display: grid;
  grid-template-columns: 22px 1fr 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--c-grey-300);
  font-size: 13px; font-weight: 500;
  user-select: none;
}
.nav-link .nav-icon {
  font-size: 13px; line-height: 1;
  color: var(--c-grey-500);
  text-align: center;
}
.nav-link .nav-chev {
  color: var(--c-grey-500);
  transition: transform 120ms ease;
  text-align: center; font-size: 14px; line-height: 1;
}
.nav-link:hover {
  background: var(--c-grey-900); color: var(--c-white);
  text-decoration: none;
}
.nav-link:hover .nav-icon { color: var(--c-white); }
.nav-link.is-active,
.nav-item.is-active > .nav-link,
.nav-item.is-active > details > .nav-link {
  background: var(--c-grey-900); color: var(--c-white);
}
.nav-link.is-active .nav-icon { color: var(--c-white); }
.nav-link.is-disabled {
  color: var(--c-grey-600); cursor: not-allowed;
}
.nav-link.is-disabled:hover { background: transparent; color: var(--c-grey-600); }
.nav-link.is-disabled .nav-icon { color: var(--c-grey-700); }

.nav-item.has-children details[open] > summary .nav-chev { transform: rotate(90deg); }
.nav-sub {
  list-style: none; margin: 4px 0 8px 21px;
  padding: 2px 0 2px 22px;
  border-left: 1px solid var(--c-grey-900);
}
.nav-sublink {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--c-grey-400);
}
.nav-sublink:hover {
  background: var(--c-grey-900); color: var(--c-white);
  text-decoration: none;
}
.nav-sublink.is-disabled {
  color: var(--c-grey-600); cursor: not-allowed;
}
.nav-sublink.is-disabled:hover { background: transparent; color: var(--c-grey-600); }

.sidebar-foot {
  border-top: 1px solid var(--c-grey-900);
  padding: var(--space-3) var(--space-4);
}
.sidebar-version {
  font-size: 10.5px; color: var(--c-grey-500);
  letter-spacing: 0.4px; display: block; text-align: center;
}

/* =====================================================================
   Topheader (sticky, white, 56 px)
   ===================================================================== */
.topheader {
  position: sticky; top: 0; z-index: 50;
  height: var(--topheader-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-grey-200);
  padding: 0 var(--space-6) 0 var(--space-8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.topheader-left { display: flex; flex-direction: column; min-width: 0; }
.topheader-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--c-grey-500); font-weight: 600;
}
.topheader-title {
  font-size: 14px; font-weight: 600; color: var(--c-grey-900);
  letter-spacing: -0.1px;
}
.topheader-right { display: flex; align-items: center; gap: var(--space-3); }

/* -------- profile menu (details/summary, no JS) -------- */
.profile-menu { position: relative; }
.profile-trigger {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.profile-trigger:hover { background: var(--c-grey-100); }
.profile-menu[open] .profile-trigger {
  background: var(--c-grey-100);
  border-color: var(--c-grey-200);
}
.profile-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-black); color: var(--c-white);
  font-weight: 600; font-size: 12px;
}
.profile-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.profile-name {
  font-size: 12.5px; font-weight: 600; color: var(--c-grey-900);
  white-space: nowrap;
}
.profile-role {
  font-size: 10.5px; color: var(--c-grey-500); letter-spacing: 0.3px;
  white-space: nowrap; text-transform: uppercase;
}
.profile-chev {
  color: var(--c-grey-600); font-size: 13px; line-height: 1; margin-left: 2px;
  transition: transform 120ms ease;
}
.profile-menu[open] .profile-chev { transform: rotate(180deg); }

.profile-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 260px;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 100;
}
.profile-dropdown-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-grey-200);
  background: var(--c-grey-50);
}
.profile-dropdown-name {
  font-size: 13px; font-weight: 600; color: var(--c-grey-900);
}
.profile-dropdown-email {
  font-size: 12px; color: var(--c-grey-500);
  margin-top: 2px; word-break: break-all;
}
.profile-dropdown-list { padding: 4px; }
.profile-dropdown-foot {
  padding: 4px;
  border-top: 1px solid var(--c-grey-200);
  background: var(--c-grey-50);
}
.profile-dropdown-foot .logout-form { margin: 0; }

.dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 10px;
  padding: 8px 10px;
  background: transparent; border: 0;
  border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; color: var(--c-grey-900);
  text-align: left; cursor: pointer;
}
.dropdown-item:hover:not(:disabled) { background: var(--c-grey-100); }
.dropdown-item:disabled { color: var(--c-grey-400); cursor: not-allowed; }
.dropdown-item-hint {
  font-size: 10px; color: var(--c-grey-500);
  text-transform: uppercase; letter-spacing: 0.5px;
  border: 1px solid var(--c-grey-200);
  padding: 1px 6px; border-radius: 999px;
}
.dropdown-item-danger { color: var(--c-status-crit); }
.dropdown-item-danger:hover { background: #fdecea; }

/* Click-outside dismissal: when summary is clicked again it toggles closed.
   For real "click outside to close" we'd need JS; the menu auto-collapses
   on navigation since the page reloads. Acceptable trade-off for v0.1. */

/* =====================================================================
   Page-level toolbar (sub-header below topheader)
   ===================================================================== */
.page-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  margin-bottom: var(--space-4);
  color: var(--c-grey-500); font-size: 12.5px;
}

/* =====================================================================
   KPI tiles
   ===================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.kpi .label {
  color: var(--c-grey-500);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  font-weight: 600; margin-bottom: var(--space-2);
}
.kpi .value {
  font-size: 22px; font-weight: 600; color: var(--c-grey-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
}
.kpi .sub { font-size: 12px; color: var(--c-grey-500); margin-top: 4px; }
.kpi.crit .value { color: var(--c-status-crit); }
.kpi.warn .value { color: var(--c-status-warn); }
.kpi.ok   .value { color: var(--c-status-ok); }

/* =====================================================================
   Card + table
   ===================================================================== */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--c-grey-200);
  font-weight: 600; font-size: 13px;
}
.card-meta { color: var(--c-grey-500); font-weight: 400; font-size: 12px; }

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}
table.data th, table.data td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-grey-200);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--c-white);
  line-height: 1.4;
}
table.data thead th {
  background: var(--c-white);
  font-weight: 600; font-size: 11px; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-grey-600);
  border-top: 1px solid var(--c-grey-200);
  border-bottom: 2px solid var(--c-grey-300);
  padding-top: 12px; padding-bottom: 12px;
  position: relative; z-index: 1;
}
table.data td.num, table.data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
table.data tbody tr:hover td { background: var(--c-grey-50); }
table.data tbody tr:last-child td { border-bottom: 0; }

table.data tr.group-head th {
  background: var(--c-grey-100);
  color: var(--c-grey-700);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 8px 20px;
  border-top: 1px solid var(--c-grey-200);
  border-bottom: 1px solid var(--c-grey-200);
  text-align: left;
}
table.data tr.group-head + tr td { border-top: 0; }
table.data tr.group-head:hover th { background: var(--c-grey-100); }

.data-locations .col-location { width: auto; }
.data-locations .col-num      { width: 200px; }

.delta-pos { color: var(--c-status-ok); }
.delta-neg { color: var(--c-status-crit); }
.muted     { color: var(--c-grey-400); }

/* =====================================================================
   Weekly module: picker, subnav, totals, history, tasks
   ===================================================================== */

/* Page-level shell — pickers stack on top of the weekly body */
.weekly-shell { display: flex; flex-direction: column; gap: var(--space-5); }
.weekly-body  { display: flex; flex-direction: column; gap: var(--space-5); }

/* --- Sticky weekly KPI summary bar (shared across all 6 weekly pages) --- */
.weekly-summary {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.weekly-summary-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
}
.ws-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-kpi + .ws-kpi { border-left: 1px solid var(--c-grey-100); padding-left: var(--space-5); }
.ws-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-grey-500); font-weight: 600;
}
.ws-value {
  font-size: 22px; font-weight: 600; color: var(--c-black);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ws-sub {
  font-size: 12px; color: var(--c-grey-600);
  font-variant-numeric: tabular-nums;
}
.ws-sub.delta-pos  { color: var(--c-status-ok); }
.ws-sub.delta-neg  { color: var(--c-status-crit); }
.ws-sub.status-warn { color: var(--c-status-warn); font-weight: 600; }
@media (max-width: 1100px) {
  .weekly-summary-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-kpi + .ws-kpi:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .weekly-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-kpi + .ws-kpi { border-left: 0; padding-left: 0; }
}

/* --- Overview "highlights" cards (top revenue / best & worst WoW / attention) --- */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.highlight-card {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: 6px;
  padding: var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.hl-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-grey-500); font-weight: 600;
}
.hl-name {
  font-size: 13px; color: var(--c-grey-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-value {
  font-size: 22px; font-weight: 600; color: var(--c-black);
  font-variant-numeric: tabular-nums; line-height: 1.2;
  margin-top: auto;
}
.hl-value.delta-pos { color: var(--c-status-ok); }
.hl-value.delta-neg { color: var(--c-status-crit); }
.hl-value.status-warn { color: var(--c-status-warn); }
.hl-value .hl-of { font-size: 13px; font-weight: 400; color: var(--c-grey-500); }
.hl-empty { font-size: 22px; color: var(--c-grey-400); }
@media (max-width: 1100px) { .highlights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .highlights-grid { grid-template-columns: 1fr; } }

/* --- Pure-SVG sparkline (by-location 13-week trend) --- */
.sparkline-wrap {
  padding: var(--space-4) var(--space-5);
  background: var(--c-white);
}
.sparkline { width: 100%; height: 120px; display: block; }

/* --- Discount mix bars (weekly/discounts page) --- */
.discount-bars {
  display: flex; flex-direction: column;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
}
.discount-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  gap: var(--space-4);
  align-items: center;
}
.discount-bar-label { font-size: 13px; color: var(--c-grey-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discount-bar-track { height: 10px; background: var(--c-grey-200); border-radius: 999px; overflow: hidden; }
.discount-bar-fill  { height: 100%; border-radius: 999px; }
.discount-bar-value { font-size: 13px; text-align: right; }
.discount-bar-pct   { color: var(--c-grey-500); margin-left: 6px; }
@media (max-width: 720px) {
  .discount-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .discount-bar-value { text-align: left; }
}

/* --- Week picker --- */
.week-picker {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  padding: 6px var(--space-3);
  box-shadow: var(--shadow-sm);
  min-height: 48px;
}
.week-nav {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--c-grey-600);
  background: transparent;
  border: 1px solid var(--c-grey-200);
  font-size: 12px;
}
.week-nav:hover { background: var(--c-grey-100); color: var(--c-black); text-decoration: none; }

.week-pick-menu { position: relative; flex: 1; min-width: 0; }
.week-pick-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-height: 36px;
}
.week-pick-trigger:hover { background: var(--c-grey-100); }
.week-pick-menu[open] .week-pick-trigger {
  background: var(--c-grey-100);
  border-color: var(--c-grey-200);
}
.week-label { font-weight: 600; font-size: 14px; color: var(--c-grey-900); letter-spacing: -0.1px; }
.week-range { font-size: 12px; color: var(--c-grey-500); font-variant-numeric: tabular-nums; }
.week-current-pill {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--c-black); color: var(--c-white); font-weight: 600;
}
.week-pick-chev {
  margin-left: auto; color: var(--c-grey-600); font-size: 13px; line-height: 1;
  transition: transform 120ms ease;
}
.week-pick-menu[open] .week-pick-chev { transform: rotate(180deg); }

.week-pick-dropdown {
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.week-pick-head {
  padding: var(--space-2) var(--space-3);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--c-grey-500); font-weight: 600;
  background: var(--c-grey-50);
  border-bottom: 1px solid var(--c-grey-200);
}
.week-pick-list { list-style: none; margin: 0; padding: 4px; }
.week-pick-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; font-size: 13px;
  border-radius: var(--radius-sm); color: var(--c-grey-900);
}
.week-pick-item:hover { background: var(--c-grey-100); text-decoration: none; }
.week-pick-item.is-active { background: var(--c-grey-100); font-weight: 600; }
.week-pick-mark { color: var(--c-black); font-weight: 700; }

/* --- Weekly subnav --- */
.weekly-subnav {
  display: flex; align-items: center; gap: 4px;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.subnav-link {
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  color: var(--c-grey-600);
  white-space: nowrap;
}
.subnav-link:hover { background: var(--c-grey-100); color: var(--c-grey-900); text-decoration: none; }
.subnav-link.is-active { background: var(--c-black); color: var(--c-white); }
.subnav-link.is-trailing { color: var(--c-grey-700); border: 1px solid var(--c-grey-200); }
.subnav-link.is-trailing:hover { background: var(--c-grey-50); }
.subnav-spacer { flex: 1; }

/* --- Subtotal + grand total rows --- */
table.data tr.group-total td {
  background: var(--c-grey-50);
  font-weight: 600;
  border-top: 1px solid var(--c-grey-300);
  border-bottom: 1px solid var(--c-grey-300);
}
table.data tr.group-total:hover td { background: var(--c-grey-50); }

table.data tr.grand-total td {
  background: var(--c-grey-100);
  font-weight: 700;
  color: var(--c-grey-900);
  border-top: 2px solid var(--c-black);
  border-bottom: 0;
}
table.data tr.grand-total:hover td { background: var(--c-grey-100); }

/* --- History highlight (by-location current week) --- */
table.data tr.row-highlight td {
  background: #fff8e1;  /* soft amber tint, used only for "current" highlight */
  font-weight: 600;
}
table.data tr.row-highlight:hover td { background: #ffeebd; }

/* --- Empty-state cell + block --- */
.empty-state {
  text-align: center; color: var(--c-grey-500);
  padding: var(--space-6) var(--space-5);
  font-style: italic;
}
.empty-state-block {
  padding: var(--space-8) var(--space-5);
  text-align: center; color: var(--c-grey-700);
}
.empty-state-block .muted { display: block; margin-top: var(--space-2); font-size: 12.5px; }

/* --- Location picker form --- */
.location-picker-card .card-head { border-bottom: 0; }
.location-picker-form {
  display: flex; gap: var(--space-3); align-items: center;
  padding: 0 var(--space-5) var(--space-4);
}
.select-input {
  flex: 1; max-width: 480px;
  padding: 9px 12px;
  border: 1px solid var(--c-grey-300);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font: inherit; font-size: 13px;
  color: var(--c-grey-900);
}
.select-input:focus {
  outline: none; border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px;
  background: var(--c-white);
  border: 1px solid var(--c-grey-300);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--c-grey-900); cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-secondary:hover { background: var(--c-grey-100); border-color: var(--c-grey-500); text-decoration: none; }

/* --- Task list (management tasks) --- */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-item {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--c-grey-200);
}
.task-item:last-child { border-bottom: 0; }
.task-marker {
  width: 4px; align-self: stretch;
  border-radius: 2px;
  background: var(--c-grey-300);
}
.task-item.priority-critical .task-marker { background: var(--c-status-crit); }
.task-item.priority-high     .task-marker { background: var(--c-status-warn); }
.task-item.priority-medium   .task-marker { background: var(--c-grey-500); }
.task-item.priority-low      .task-marker { background: var(--c-grey-300); }
.task-item.status-done .task-title,
.task-item.status-cancelled .task-title { text-decoration: line-through; color: var(--c-grey-500); }

.task-body { flex: 1; min-width: 0; }
.task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-title { font-weight: 600; font-size: 14px; color: var(--c-grey-900); }
.task-desc { margin: 4px 0 6px; color: var(--c-grey-700); font-size: 13px; }
.task-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-size: 12px; color: var(--c-grey-500);
}

.task-pill {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--c-grey-100); color: var(--c-grey-700);
  border: 1px solid var(--c-grey-200); font-weight: 600;
}
.task-priority-critical { background: #fdecea; color: var(--c-status-crit); border-color: #f5c2bd; }
.task-priority-high     { background: #fff1de; color: var(--c-status-warn); border-color: #f6d8a8; }
.task-priority-medium,
.task-priority-low      { /* keep neutral */ }
.task-status-done       { background: #e7f3e8; color: var(--c-status-ok); border-color: #b8d8bc; }
.task-status-cancelled  { background: var(--c-grey-100); color: var(--c-grey-500); }

/* --- Per-page colgroup widths --- */
/* Location column kept tight so numeric columns get residual space */
.data-weekly      .col-location { width: 220px; }
.data-weekly      .col-num      { width: auto; min-width: 120px; }
.data-history     .col-week     { width: 140px; }
.data-history     .col-num      { width: auto; min-width: 120px; }
.data-departments .col-location { width: 200px; }
.data-departments .col-medium   { width: 160px; }
.data-departments .col-num      { width: auto; min-width: 120px; }
.data-discounts   .col-location { width: 220px; }
.data-discounts   .col-num      { width: auto; min-width: 120px; }
.data-forecast    .col-location { width: 220px; }
.data-forecast    .col-num      { width: auto; min-width: 130px; }
/* Locations list */
.data-locations-list .col-name   { width: auto; min-width: 220px; }
.data-locations-list .col-code   { width: 110px; }
.data-locations-list .col-medium { width: 160px; }
.data-locations-list .col-num    { width: 110px; }
.data-locations-list .col-status { width: 110px; }
/* Detail page small tables */
.data-hours .col-day  { width: 130px; }
.data-hours .col-time { width: 100px; }
.data-hours .col-state{ width: auto; }
.data-closures .col-medium { width: 160px; }
.data-closures .col-date   { width: 120px; }
.data-closures .col-num    { width: 130px; }

/* Visually-hidden helper */
.vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Auth (login) — minimal
   ===================================================================== */
.auth-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--c-grey-50);
  padding: var(--space-6);
}
.auth-card {
  width: 360px; max-width: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.auth-wordmark {
  text-align: center;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.5px; color: var(--c-black);
  margin-bottom: var(--space-6);
}
.auth-title {
  margin: 0 0 var(--space-6);
  font-size: 18px; font-weight: 600; color: var(--c-black);
  text-align: center; letter-spacing: -0.1px;
}
.field { margin-bottom: var(--space-3); }
.auth-card label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--c-grey-500);
  margin-bottom: 6px;
}
.auth-card .input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-grey-300);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 14px;
  background: var(--c-white); color: var(--c-grey-900);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none; appearance: none;
}
.auth-card .input::placeholder { color: var(--c-grey-400); }
.auth-card .input:hover { border-color: var(--c-grey-500); }
.auth-card .input:focus {
  outline: none;
  border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.auth-card .input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--c-white) inset;
  -webkit-text-fill-color: var(--c-grey-900);
}
.field-error { margin-top: 6px; font-size: 12px; color: var(--c-status-crit); }

.row-remember {
  display: flex; align-items: center; gap: 8px;
  margin: var(--space-4) 0 0;
  font-size: 13px; color: var(--c-grey-800);
  cursor: pointer; user-select: none;
}
.row-remember input[type="checkbox"] {
  accent-color: var(--c-black);
  width: 14px; height: 14px; margin: 0;
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px;
  background: var(--c-black); color: var(--c-white);
  border: 1px solid var(--c-black);
  border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: 13px;
  letter-spacing: 0.2px; line-height: 1;
  cursor: pointer; user-select: none;
  text-decoration: none;
  transition: background 120ms ease, transform 80ms ease;
}
.btn-primary:hover { background: var(--c-grey-900); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary-block { display: flex; width: 100%; margin-top: var(--space-4); height: 40px; }

.auth-card .footer {
  margin-top: var(--space-6);
  font-size: 11px; color: var(--c-grey-400);
  text-align: center; letter-spacing: 0.3px;
}

/* =====================================================================
   Flash messages
   ===================================================================== */
.flash {
  padding: 10px 12px; border-radius: var(--radius-sm);
  margin-bottom: var(--space-3); font-size: 13px;
  border: 1px solid var(--c-grey-200);
}
.flash.error   { background: #fdecea; color: var(--c-status-crit); border-color: #f5c2bd; }
.flash.info    { background: var(--c-grey-100); color: var(--c-grey-800); }
.flash.success { background: #e7f3e8; color: var(--c-status-ok);   border-color: #b8d8bc; }

/* =====================================================================
   Locations module
   ===================================================================== */

/* Filter bar (list page) */
.location-filter-card .card-head { border-bottom: 0; }
.location-filter-form {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: flex-end;
  padding: 0 var(--space-5) var(--space-4);
}
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.filter-field-grow { flex: 1; min-width: 240px; }
.filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--c-grey-500);
}
.filter-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-grey-800);
  padding-bottom: 9px;
}
.filter-check input { accent-color: var(--c-black); }
.filter-actions { display: flex; gap: var(--space-2); padding-bottom: 1px; }

/* List + categories tables */
.data-locations-list .col-name   { width: auto; }
.data-locations-list .col-code   { width: 160px; }
.data-locations-list .col-medium { width: 160px; }
.data-locations-list .col-num    { width: 110px; }
.data-locations-list .col-status { width: 110px; }
.data-categories     .col-name   { width: auto; }
.data-categories     .col-code   { width: 160px; }
.data-categories     .col-num    { width: 90px; }
.data-categories     .col-action { width: 180px; }
.data-hours          .col-day    { width: 120px; }
.data-hours          .col-time   { width: 110px; }
.data-hours          .col-state  { width: 130px; }
.data-closures       .col-medium { width: 140px; }
.data-closures       .col-date   { width: 130px; }
.data-closures       .col-num    { width: 130px; }

/* HR module tables */
.data-employees .col-num-narrow { width: 90px; }
.data-employees .col-name       { width: auto; min-width: 220px; }
.data-employees .col-role       { width: 180px; }
.data-employees .col-location   { width: 180px; }
.data-employees .col-medium     { width: 140px; }
.data-employees .col-status     { width: 110px; }

table.data tr.row-muted td { color: var(--c-grey-500); }

/* State pill (active / inactive / open / closed) */
.state-pill {
  display: inline-block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--c-grey-200); background: var(--c-grey-100);
  color: var(--c-grey-700);
}
.state-active   { background: #e7f3e8; color: var(--c-status-ok);   border-color: #b8d8bc; }
.state-inactive { background: var(--c-grey-100); color: var(--c-grey-500); border-color: var(--c-grey-200); }
.state-warn     { background: #fff1de; color: var(--c-status-warn); border-color: #f6d8a8; }
.state-crit     { background: #fdecea; color: var(--c-status-crit); border-color: #f5c2bd; }

/* Inline mono code (for slugs / codes) */
.mono-soft {
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;
  font-size: 12px; color: var(--c-grey-700);
  background: var(--c-grey-100); padding: 1px 6px; border-radius: 4px;
}

/* Small / muted utility */
.small { font-size: 12px; }
.muted.small { color: var(--c-grey-500); }

/* Strong link inside a table cell */
.link-strong {
  color: var(--c-black); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link-strong:hover { border-bottom-color: var(--c-black); }
.link-action {
  font-size: 12.5px; font-weight: 600; color: var(--c-grey-800);
  text-decoration: none;
}
.link-action:hover { color: var(--c-black); text-decoration: underline; }

/* Breadcrumbs */
.breadcrumbs {
  font-size: 12px; color: var(--c-grey-600);
  margin: 0 0 var(--space-4);
}
.breadcrumbs a { color: var(--c-grey-700); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-black); text-decoration: underline; }
.bc-sep { margin: 0 6px; color: var(--c-grey-400); }
.bc-current { color: var(--c-black); font-weight: 600; }

/* Detail header */
.loc-header {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  justify-content: space-between; align-items: flex-start;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.loc-header-main { min-width: 0; flex: 1 1 320px; }
.loc-header-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 6px;
}
.loc-meta-bit {
  font-size: 12px; color: var(--c-grey-600);
  letter-spacing: 0.2px;
}
.loc-meta-bit + .loc-meta-bit::before { content: "·"; margin-right: 8px; color: var(--c-grey-400); }
.loc-name {
  margin: 0; font-size: 22px; font-weight: 700; color: var(--c-black);
  letter-spacing: -0.2px;
}
.loc-legal { margin-top: 4px; font-size: 13px; color: var(--c-grey-600); }
.loc-header-aside { flex: 0 1 auto; }

/* Capability chips (read-only on/off badges) */
.cap-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.cap-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--c-grey-200);
  background: var(--c-white); color: var(--c-grey-500);
}
.cap-chip.is-on { color: var(--c-black); border-color: var(--c-grey-900); background: var(--c-grey-50); }
.cap-chip.is-off { color: var(--c-grey-400); }
.cap-chip-mark { font-size: 11px; }

/* Detail body grid (1-col stacked → 2-col → 3-col) */
.loc-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}
@media (min-width: 760px)  { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Definition list grid (key/value rows) */
.dl-grid {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 6px var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-5);
  margin: 0;
  font-size: 13px;
}
.dl-grid dt {
  color: var(--c-grey-500);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.dl-grid dd { margin: 0; color: var(--c-grey-900); }
.dl-grid dd .muted { color: var(--c-grey-500); }
.dl-grid a { color: var(--c-black); }

/* Department chip list */
.chip-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: var(--space-2) var(--space-5) var(--space-5); margin: 0;
}
.chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-grey-200); background: var(--c-grey-50);
  font-size: 12.5px; color: var(--c-grey-900);
}
.chip.is-off { color: var(--c-grey-500); background: var(--c-white); }
.chip-label { font-weight: 600; }
.chip-meta  { font-size: 11px; color: var(--c-grey-500); }

/* Tighter KPI grid (used inside detail page) */
.kpi-grid-tight { padding: 0 var(--space-5) var(--space-5); }
.kpi-grid-tight .kpi { padding: var(--space-4) var(--space-4); }
.kpi-grid-tight .kpi .value { font-size: 18px; }

/* --- KPI tile BEM system (reviews + location detail templates) ------------ */
.kpi-tile {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.kpi-label {
  color: var(--c-grey-500);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  font-weight: 600; margin-bottom: var(--space-2);
}
.kpi-value {
  font-size: 22px; font-weight: 600; color: var(--c-grey-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px; line-height: 1.1;
}
.kpi-unit { font-size: 13px; color: var(--c-grey-500); font-weight: 400; letter-spacing: 0; }
.kpi-meta { font-size: 12px; color: var(--c-grey-500); margin-top: 4px; line-height: 1.4; }
.kpi-grid-tight .kpi-tile { padding: var(--space-4); }
.kpi-grid-tight .kpi-value { font-size: 18px; }
/* colour variants for the tile itself */
.kpi-tile--ok   .kpi-value { color: var(--c-status-ok); }
.kpi-tile--crit .kpi-value { color: var(--c-status-crit); }
.kpi-tile--warn .kpi-value { color: var(--c-status-warn); }
/* review portfolio stat tile accents */
.kpi-tile--rating .rb-stars      { font-size: 18px; letter-spacing: 3px; }
.kpi-tile--rating .rb-stars-fill { color: #c8840d; }
.kpi-tile--positive               { border-left: 3px solid var(--c-status-ok); }
.kpi-tile--positive .kpi-value    { color: var(--c-status-ok); }
.kpi-tile--negative               { border-left: 3px solid var(--c-status-crit); }
.kpi-tile--negative .kpi-value    { color: var(--c-status-crit); }

/* Plain prose block */
.card-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.prose { margin: 0; line-height: 1.55; color: var(--c-grey-800); white-space: pre-line; }

/* Wider key column for dense lookup tables */
.dl-grid-wide { grid-template-columns: 200px 1fr; }

/* Tighter dl-grid (used inside hospitality sub-blocks) */
.dl-grid-tight { padding: 0; gap: 4px var(--space-3); font-size: 12.5px; grid-template-columns: 130px 1fr; }
.dl-grid-tight.dl-grid-wide { grid-template-columns: 170px 1fr; }

/* Hospitality card grid (responsive 1/2/3 column) */
.hosp-grid {
  display: grid; gap: var(--space-4) var(--space-5);
  grid-template-columns: 1fr;
  padding: var(--space-2) var(--space-5) var(--space-5);
}
@media (min-width: 760px)  { .hosp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .hosp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hosp-block { min-width: 0; }
.hosp-block-wide { grid-column: 1 / -1; }
.hosp-h {
  margin: 0 0 var(--space-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--c-grey-500);
  border-bottom: 1px solid var(--c-grey-100); padding-bottom: 4px;
}

/* Card footer note (used for "last refresh" etc.) */
.card-foot {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--c-grey-100);
  font-size: 11.5px; color: var(--c-grey-500);
}

/* Generic vertical stack — uniform gap between consecutive blocks */
.stack > * + * { margin-top: var(--space-5); }
.stack .loc-grid { margin-bottom: 0; }
.stack section { margin-bottom: 0; }

/* Small text in dl values */
.small { font-size: 11.5px; }

/* Strong link in tables */
.link-strong { color: var(--c-black); font-weight: 600; text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

/* Image list (placeholder for future media uploads) */
.image-list { list-style: none; padding: var(--space-2) var(--space-5) var(--space-5); margin: 0; }
.image-list li { padding: 6px 0; border-bottom: 1px dashed var(--c-grey-100); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.image-list li:last-child { border-bottom: 0; }

/* =====================================================================
   Filter card — unified pattern for ALL filter / search / picker cards
   (Locations list, Weekly by-location, etc.). Mandatory.
   ===================================================================== */
.filter-card {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}
.filter-card-row {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: flex-end;
}
.filter-card-row + .filter-card-row { margin-top: var(--space-3); }
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.filter-field-grow { flex: 1 1 240px; }
.filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--c-grey-500);
}
.input-pill {
  height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--c-grey-300);
  border-radius: 999px;
  background: var(--c-white);
  font: inherit; font-size: 13px;
  color: var(--c-grey-900);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
select.input-pill {
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-grey-700) 50%),
                    linear-gradient(135deg, var(--c-grey-700) 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.input-pill:focus {
  outline: none;
  border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 9px;
  font-size: 13px; color: var(--c-grey-900);
  cursor: pointer; user-select: none;
}
.filter-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--c-black);
  margin: 0;
}
.filter-actions {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-bottom: 1px;
  margin-left: auto;
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 12px;
  background: transparent; border: 1px solid transparent;
  font: inherit; font-size: 13px; color: var(--c-grey-700);
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius-sm); line-height: 1;
}
.btn-ghost:hover { color: var(--c-black); background: var(--c-grey-100); text-decoration: none; }

.filter-card-summary {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-grey-100);
  font-size: 12px; color: var(--c-grey-600);
}
.filter-count strong { color: var(--c-grey-900); font-weight: 700; }
.filter-active-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--c-grey-50); border: 1px solid var(--c-grey-200);
  font-size: 11.5px; color: var(--c-grey-700);
}
.filter-chip strong { color: var(--c-grey-900); font-weight: 600; }

/* =====================================================================
   Card actions, checklists, hint text — used by admin & form pages
   ===================================================================== */

/* Action row inside a card body (right-aligned by default) */
.card-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--space-5) var(--space-5);
  flex-wrap: wrap;
}
.card-actions-start { justify-content: flex-start; }
.card-actions-between { justify-content: space-between; }

/* Use inside `.card-foot` to right-align inline form actions */
.card-foot.card-actions { padding-top: var(--space-3); border-top: 1px solid var(--c-grey-100); }

/* Stand-alone form action row (e.g. below a roles checklist) */
.form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--c-grey-100);
  flex-wrap: wrap;
}
.form-actions-inline { padding: 0; border-top: 0; margin-top: var(--space-3); }

/* A grid of `.filter-toggle` checkboxes used for role / scope assignment */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-4);
}
.checklist-grid .filter-toggle {
  padding-bottom: 0;
  align-items: flex-start;
}
.checklist-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.checklist-stack .filter-toggle { padding-bottom: 0; }

/* Tight hint paragraph below a form / inside a card */
.hint {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--c-grey-500);
}
.hint-inset {
  padding: var(--space-3) var(--space-5) var(--space-5);
}

/* Plain list reset — used for permission catalogue */
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list-divided > li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-grey-200);
}
.plain-list-divided > li:last-child { border-bottom: 0; }

/* Form-as-card body padding (.card form should keep the same inner spacing
   as a regular dl/section). Used by user_form. */
.card .hosp-grid { padding-top: var(--space-4); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--c-grey-900);
  }
  .sidebar-nav { max-height: 320px; }
  .topheader { padding-left: var(--space-5); padding-right: var(--space-5); }
  .page { padding: var(--space-5); }
  .profile-name, .profile-role, .profile-meta { display: none; }
  .profile-trigger { padding: 4px; }
}

/* =====================================================================
   Error pages (403 / 404 / 500) — same shell as login
   ===================================================================== */
.error-message {
  text-align: center;
  color: var(--c-grey-600);
  font-size: 13px;
  margin: 0 0 var(--space-5);
  line-height: 1.55;
}
.error-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.error-actions .logout-form { margin: 0; }

/* =====================================================================
   Reviews module — stars, review-list, AI summary block
   ===================================================================== */

/* Legacy ASCII-stars (kept for plain-text contexts). The HTML overlay
   below is preferred for any rendered template. */
.stars {
  font-size: 14px; letter-spacing: 1px; color: var(--c-grey-700);
  font-family: var(--font-sans); white-space: nowrap;
}
.stars-positive { color: var(--c-status-ok); }
.stars-mixed    { color: var(--c-grey-700); }
.stars-negative { color: var(--c-status-crit); }

/* Crisp star rating using two stacked layers — backdrop is the empty
   five-star row, foreground is the filled row clipped to a quantized
   width class. We use classes (not inline ``style``) so the strict
   ``style-src 'self'`` CSP still applies. */
.rb-stars {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--c-grey-300);
  white-space: nowrap;
}
.rb-stars::before {
  content: "★★★★★";
}
.rb-stars-fill {
  position: absolute;
  top: 0; left: 0;
  width: 0;
  overflow: hidden;
  color: var(--c-grey-900);
  pointer-events: none;
}
.rb-stars-fill::before {
  content: "★★★★★";
  letter-spacing: 2px;
}
.rb-fill-0   { width: 0%;   }
.rb-fill-5   { width: 5%;   }
.rb-fill-10  { width: 10%;  }
.rb-fill-15  { width: 15%;  }
.rb-fill-20  { width: 20%;  }
.rb-fill-25  { width: 25%;  }
.rb-fill-30  { width: 30%;  }
.rb-fill-35  { width: 35%;  }
.rb-fill-40  { width: 40%;  }
.rb-fill-45  { width: 45%;  }
.rb-fill-50  { width: 50%;  }
.rb-fill-55  { width: 55%;  }
.rb-fill-60  { width: 60%;  }
.rb-fill-65  { width: 65%;  }
.rb-fill-70  { width: 70%;  }
.rb-fill-75  { width: 75%;  }
.rb-fill-80  { width: 80%;  }
.rb-fill-85  { width: 85%;  }
.rb-fill-90  { width: 90%;  }
.rb-fill-95  { width: 95%;  }
.rb-fill-100 { width: 100%; }
.rb-stars-positive .rb-stars-fill { color: var(--c-status-ok); }
.rb-stars-mixed    .rb-stars-fill { color: var(--c-grey-900); }
.rb-stars-negative .rb-stars-fill { color: var(--c-status-crit); }
.rb-stars-empty {
  color: var(--c-grey-500);
  font-style: italic;
  letter-spacing: 0;
}

.review-list { list-style: none; margin: 0; padding: 0; }

/* Compact list rows used inside per-location detail. */
.review-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--c-grey-200);
}
.review-item:first-child { padding-top: 0; }
.review-item:last-child  { border-bottom: 0; padding-bottom: 0; }

/* Card-style row used on the Reviews detail page (Recent reviews). */
.review-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--c-grey-200);
  border-left: 3px solid var(--c-grey-300);
  border-radius: var(--radius-md);
  background: var(--c-white);
  margin-bottom: var(--space-3);
}
.review-card:last-child { margin-bottom: 0; }
.review-card--positive { border-left-color: var(--c-status-ok); }
.review-card--negative { border-left-color: var(--c-status-crit); }
.review-card--mixed    { border-left-color: var(--c-grey-700); }

.review-card-rating {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding-right: var(--space-3);
  border-right: 1px dashed var(--c-grey-200);
}
.review-rating-num {
  font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--c-grey-900); font-variant-numeric: tabular-nums;
}
.review-rating-out {
  font-size: 11px; color: var(--c-grey-600);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.review-card-body { min-width: 0; }
.review-card-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 12px; color: var(--c-grey-700);
}
.review-card-flags {
  display: inline-flex; gap: var(--space-1); margin-left: auto;
}
.review-dot { color: var(--c-grey-400); }

.review-source {
  font-weight: 600; color: var(--c-grey-900);
  text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px;
}
.review-rating {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 13px;
}
.review-date, .review-author { color: var(--c-grey-600); font-size: 12px; }
.review-body {
  margin: 0;
  color: var(--c-grey-900);
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}
.review-body--empty { color: var(--c-grey-500); font-style: italic; }
.review-ai {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--c-grey-100);
  border-radius: var(--radius-sm);
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: 12px; color: var(--c-grey-800);
}

/* AI portfolio analysis card on /reviews/. */
.ai-card {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ai-card .card-head { border-bottom: 1px solid var(--c-grey-200); }
.ai-card .ai-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ai-card .ai-summary {
  margin: 0;
  font-size: 14px; line-height: 1.65; color: var(--c-grey-900);
  padding: var(--space-4);
  background: var(--c-grey-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-grey-300);
}
.ai-card--positive .ai-summary { border-left-color: var(--c-status-ok); background: #f3faf3; }
.ai-card--negative .ai-summary { border-left-color: var(--c-status-crit); background: #fef5f5; }
.ai-card--mixed    .ai-summary { border-left-color: var(--c-grey-500); }
.ai-card .ai-keywords {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.ai-card .ai-keywords-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 600; color: var(--c-grey-500); margin-right: var(--space-1);
}
.ai-card .ai-meta {
  margin: 0;
  font-size: 11px; color: var(--c-grey-500);
  padding-top: var(--space-2); border-top: 1px solid var(--c-grey-100);
  display: flex; align-items: center; gap: var(--space-2);
}
.ai-card .ai-meta em { font-style: normal; font-weight: 600; color: var(--c-grey-700); }
.ai-card .empty-state {
  padding: var(--space-6) var(--space-5);
  color: var(--c-grey-500); font-size: 13px;
  text-align: center; margin: 0;
}
.ai-model-chips { margin: 0; padding: 0; }

/* AI insight grid: 2-column layout for venues/themes/strengths/improvements */
.ai-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--c-grey-100);
}
.ai-insight-col { display: flex; flex-direction: column; gap: var(--space-2); }
.ai-insight-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 700; color: var(--c-grey-500); margin: 0;
}
.ai-insight-head--positive { color: var(--c-status-ok); }
.ai-insight-head--negative { color: var(--c-status-crit); }
.ai-insight-list {
  margin: 0; padding: 0 0 0 var(--space-4);
  font-size: 13px; line-height: 1.6; color: var(--c-grey-800);
  display: flex; flex-direction: column; gap: 2px;
}
.ai-insight-empty { margin: 0; font-size: 12px; color: var(--c-grey-400); }
.ai-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-action-section {
  padding: var(--space-2) var(--space-5) var(--space-3);
  border-top: 1px solid var(--c-grey-100);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.ai-action-list {
  margin: 0; padding: 0 0 0 var(--space-5);
  font-size: 13px; line-height: 1.65; color: var(--c-grey-800);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.ai-action-list li::marker { font-weight: 700; color: var(--c-grey-600); }
@media (max-width: 640px) {
  .ai-insights-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 720px) {
  .review-card { grid-template-columns: 1fr; }
  .review-card-rating {
    flex-direction: row; align-items: center; gap: var(--space-2);
    padding-right: 0; border-right: 0;
    border-bottom: 1px dashed var(--c-grey-200);
    padding-bottom: var(--space-2);
  }
  .review-card-flags { margin-left: 0; }
}

.form-inline { margin: 0; display: inline-block; }

.data-reviews .col-location { width: 240px; }
.data-reviews .col-rating   { width: 70px; }
.data-reviews .col-stars    { width: 110px; }
.data-reviews .col-count,
.data-reviews .col-positive,
.data-reviews .col-negative { width: 90px; }
.data-reviews .col-last     { width: 110px; }
.data-reviews .col-action   { width: 80px; }

.empty-state {
  margin: 0; padding: var(--space-5);
  color: var(--c-grey-600); font-size: 13px;
  text-align: center;
}

/* =====================================================================
   Admin settings — clean form layout with label/desc left, control right
   ===================================================================== */
.settings-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-5);
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-3) var(--space-7);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--c-grey-100);
  align-items: center;
}
.settings-row:last-child { border-bottom: 0; padding-bottom: var(--space-4); }
.settings-row-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-label {
  font-size: 13px; font-weight: 600; color: var(--c-grey-900);
  display: block; margin-bottom: 1px;
}
.settings-key {
  font-size: 10px; color: var(--c-grey-400); display: block; margin-top: 1px;
}
.settings-help {
  margin: 3px 0 0; color: var(--c-grey-600); font-size: 12px; line-height: 1.5;
}
.settings-meta {
  margin: 2px 0 0; color: var(--c-grey-400); font-size: 11px;
}
.settings-row-control {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.settings-row-control .input-pill {
  width: 100%;
}
.settings-row-control .input-num {
  max-width: 140px;
}
.settings-readonly {
  display: inline-block; padding: 6px 10px; background: var(--c-grey-50);
  border: 1px solid var(--c-grey-200); border-radius: var(--radius-sm);
  font-size: 12px; max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--c-grey-600);
}
/* Secret / password fields */
.settings-secret-hint {
  font-size: 11px; color: var(--c-grey-500); margin: 2px 0 0;
}
.settings-secret-hint--inline {
  margin: 0;
}
.settings-secret-actions {
  margin-top: 6px;
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.btn-sm {
  font-size: 11.5px;
  padding: 4px 10px;
  height: 28px;
  line-height: 1;
  border-radius: 999px;
}
/* Compact pill input for Test connection Place ID field */
.input-pill--sm {
  height: 28px;
  font-size: 12px;
  padding: 0 10px;
  width: 200px;
  border-radius: 999px;
}
/* Section header desc (shown below card-head, used by all settings sections) */
.settings-section-desc {
  padding: var(--space-3) var(--space-5) var(--space-3);
  margin: 0;
  font-size: 12.5px; color: var(--c-grey-600); line-height: 1.5;
}
/* Form-level save bar */
.settings-save-bar {
  display: flex; align-items: center; gap: var(--space-3);
}

/* =====================================================================
   AI provider card (Ollama connect + status)
   ===================================================================== */
.ai-provider-card .card-head { padding: var(--space-4) var(--space-5); }
.ai-provider-card .card-meta { display: inline-flex; gap: var(--space-2); align-items: center; }
.ai-provider-card .settings-section-desc {
  border-bottom: 1px solid var(--c-grey-100);
}
.ai-provider-form {
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: 0;
  border-bottom: 1px solid var(--c-grey-100);
}
.ai-provider-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.ai-provider-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-provider-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 600; color: var(--c-grey-500);
}
.ai-provider-field .input-pill { width: 100%; }
.ai-provider-timeout {
  display: flex; align-items: center; gap: var(--space-2);
}
.ai-provider-timeout .input-pill { width: 96px; flex: 0 0 auto; }
.ai-provider-timeout-unit {
  font-size: 12px; color: var(--c-grey-600);
}
.ai-provider-hint {
  margin: 0; font-size: 11.5px; color: var(--c-grey-500); line-height: 1.5;
}
.ai-provider-actions {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.ai-provider-readonly {
  margin: 0; padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--c-grey-100);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5);
}
.ai-provider-readonly-row { display: flex; flex-direction: column; gap: 2px; }
.ai-provider-readonly dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 600; color: var(--c-grey-500); margin: 0;
}
.ai-provider-readonly dd { margin: 0; font-size: 13px; color: var(--c-grey-900); }
.ai-provider-status {
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.ai-provider-status-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2);
}
.ai-provider-status-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 600; color: var(--c-grey-500);
}
.ai-provider-status-meta {
  font-size: 12px; color: var(--c-grey-600);
}
.ai-provider-note {
  margin: 0; font-size: 12.5px; color: var(--c-grey-600); line-height: 1.55;
}
.ai-provider-note--warn { color: var(--c-status-warn); }
.ai-model-chips { margin: 0; padding: 0; }

@media (max-width: 720px) {
  .ai-provider-grid { grid-template-columns: 1fr; }
  .ai-provider-readonly { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .settings-row { grid-template-columns: 1fr; }
  .settings-row-control .input-pill { max-width: 100%; }
}

/* =====================================================================
   Utility helpers
   ===================================================================== */

/* Flex row for multiple action buttons / forms side by side */
.btn-row {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}

/* Textarea — same visual language as input-pill but with sm-radius and auto height */
.input-area {
  padding: 10px 14px;
  border: 1px solid var(--c-grey-300);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font: inherit; font-size: 13px;
  color: var(--c-grey-900);
  width: 100%;
  resize: vertical;
  line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.input-area::placeholder { color: var(--c-grey-400); }
.input-area:hover { border-color: var(--c-grey-500); }
.input-area:focus {
  outline: none;
  border-color: var(--c-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* =====================================================================
   Discount bar fill — width quantised to 5 % steps (CSP-safe)
   ===================================================================== */
.dbar-w-0   { width: 0%;   }
.dbar-w-5   { width: 5%;   }
.dbar-w-10  { width: 10%;  }
.dbar-w-15  { width: 15%;  }
.dbar-w-20  { width: 20%;  }
.dbar-w-25  { width: 25%;  }
.dbar-w-30  { width: 30%;  }
.dbar-w-35  { width: 35%;  }
.dbar-w-40  { width: 40%;  }
.dbar-w-45  { width: 45%;  }
.dbar-w-50  { width: 50%;  }
.dbar-w-55  { width: 55%;  }
.dbar-w-60  { width: 60%;  }
.dbar-w-65  { width: 65%;  }
.dbar-w-70  { width: 70%;  }
.dbar-w-75  { width: 75%;  }
.dbar-w-80  { width: 80%;  }
.dbar-w-85  { width: 85%;  }
.dbar-w-90  { width: 90%;  }
.dbar-w-95  { width: 95%;  }
.dbar-w-100 { width: 100%; }
/* Shades from darkest (#1 top) to lightest (#5 bottom) */
.dbar-c-0 { background: #1a1a1a; }
.dbar-c-1 { background: #3d3d3d; }
.dbar-c-2 { background: #6b6b6b; }
.dbar-c-3 { background: #969696; }
.dbar-c-4 { background: #b8b8b8; }

/* =====================================================================
   Sparkline / mini bars used in location detail "Reviews" card
   ===================================================================== */
.review-trend {
  display: flex; align-items: flex-end; gap: 4px;
  height: 64px; padding: var(--space-2) 0;
}
.review-trend-bar {
  flex: 1 1 0; min-width: 6px;
  background: var(--c-grey-300);
  border-radius: 2px 2px 0 0;
  position: relative;
}
.review-trend-bar.tone-positive { background: var(--c-status-ok); opacity: 0.85; }
.review-trend-bar.tone-mixed    { background: var(--c-grey-700); opacity: 0.55; }
.review-trend-bar.tone-negative { background: var(--c-status-crit); opacity: 0.85; }
.review-trend-bar.tone-empty    { background: var(--c-grey-200); }
.review-trend-bar:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--c-grey-900); color: #fff; font-size: 11px;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  pointer-events: none; z-index: 5;
}
.review-trend-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--c-grey-600);
  margin-top: 2px;
}

/* Quantized sparkline bar heights — class-based to satisfy strict CSP.
   Zero-count bars get spark-h-0 (4px fixed stub, always visible). */
.spark-h-0   { height: 4px;  }
.spark-h-5   { height: 5%;   }
.spark-h-10  { height: 10%;  }
.spark-h-15  { height: 15%;  }
.spark-h-20  { height: 20%;  }
.spark-h-25  { height: 25%;  }
.spark-h-30  { height: 30%;  }
.spark-h-35  { height: 35%;  }
.spark-h-40  { height: 40%;  }
.spark-h-45  { height: 45%;  }
.spark-h-50  { height: 50%;  }
.spark-h-55  { height: 55%;  }
.spark-h-60  { height: 60%;  }
.spark-h-65  { height: 65%;  }
.spark-h-70  { height: 70%;  }
.spark-h-75  { height: 75%;  }
.spark-h-80  { height: 80%;  }
.spark-h-85  { height: 85%;  }
.spark-h-90  { height: 90%;  }
.spark-h-95  { height: 95%;  }
.spark-h-100 { height: 100%; }

/* =====================================================================
   HR — Organisation tree (CSS-only orgchart + per-venue rosters)
   ===================================================================== */
.org-tree-card { padding-bottom: var(--space-5); }
.org-tree-scroll {
  overflow-x: auto;
  /* overflow-y: clip does NOT create a scroll container, so absolutely-positioned
     subpanels can extend beyond the element's border without being paint-clipped. */
  overflow-y: clip;
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.org-tree {
  /* Centre the tree horizontally inside the scroller. */
  display: inline-block;
  min-width: 100%;
  text-align: center;
}
.org-tree ul {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-1);
}
.org-tree .tree-roots { padding-top: 0; }
.org-tree li {
  position: relative;
  padding: var(--space-4) var(--space-1) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Connector lines — classic CSS orgchart pattern using ::before / ::after.
   Each child gets a vertical stub up to a horizontal sibling line. */
.org-tree ul ul li::before,
.org-tree ul ul li::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--space-4);
  border-top: 1px solid var(--c-grey-300);
}
.org-tree ul ul li::before { right: 50%; }
.org-tree ul ul li::after  { left: 50%;  border-left: 1px solid var(--c-grey-300); }
.org-tree ul ul li:only-child::before,
.org-tree ul ul li:only-child::after { display: none; }
.org-tree ul ul li:only-child { padding-top: var(--space-4); }
.org-tree ul ul li:only-child::before {
  display: block;
  right: 50%;
  border-top: 0;
  border-left: 1px solid var(--c-grey-300);
  width: 0;
}
.org-tree ul ul li:first-child::before { border: 0 none; }
.org-tree ul ul li:last-child::after   { border: 0 none; }
.org-tree ul ul li:first-child::after  { border-radius: 5px 0 0 0; }
.org-tree ul ul li:last-child::before {
  border-right: 1px solid var(--c-grey-300);
  border-radius: 0 5px 0 0;
}
/* Vertical stub from parent down to the children row */
.org-tree li.tree-node--has-children > ul.tree-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--space-4);
  border-left: 1px solid var(--c-grey-300);
}
.org-tree li.tree-node--has-children > ul.tree-children {
  position: relative;
  padding-top: var(--space-4);
}

/* The card itself */
.tree-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-width: 152px;
  max-width: 174px;
  background: var(--c-white);
  border: 1px solid var(--c-grey-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--c-grey-900);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  text-align: left;
  position: relative;
}
.tree-card:hover {
  border-color: var(--c-grey-900);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tree-card:focus-visible {
  outline: 2px solid var(--c-grey-900);
  outline-offset: 3px;
}
.tree-card-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: var(--c-grey-100);
  border-radius: 50%;
  color: var(--c-grey-700);
}
.tree-card-body {
  display: flex; flex-direction: column; min-width: 0;
}
.tree-card-name {
  font-size: 12px; font-weight: 600; color: var(--c-grey-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-card-role {
  font-size: 10.5px; color: var(--c-grey-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-card-loc {
  font-size: 10px; color: var(--c-grey-500); margin-top: 1px;
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-card-loc--hq { color: var(--c-grey-900); font-weight: 600; }
.tree-card-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: var(--c-grey-900); color: var(--c-white);
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Per-department subtle accent on the icon disc */
.tree-card--management .tree-card-icon { background: #ece8df; color: #6d5a1a; }
.tree-card--support    .tree-card-icon { background: #e4ecf2; color: #2d4d63; }
.tree-card--kitchen    .tree-card-icon { background: #f4e7e1; color: #8a3f23; }
.tree-card--bar        .tree-card-icon { background: #efe6f1; color: #6b3a78; }
.tree-card--floor      .tree-card-icon { background: #ece8df; color: #6d5a1a; }
.tree-card--reception  .tree-card-icon { background: #e0ecdf; color: #265a36; }
.tree-card--hotel      .tree-card-icon { background: #e4ecf2; color: #2d4d63; }
.tree-card--shop       .tree-card-icon { background: #ecedea; color: #4a4a3a; }
/* HQ nodes get a slightly heavier outline */
.tree-node--hq > .tree-card {
  border-color: var(--c-grey-700);
  border-width: 1.5px;
}
.org-tree-orphans {
  padding: var(--space-3) var(--space-5);
  margin: 0;
  font-size: 12px; color: var(--c-status-warn);
  border-top: 1px solid var(--c-grey-100);
}

/* ----- Inline expand panel for non-HQ direct reports ----- */
.tree-expand {
  width: 100%;
  max-width: 174px; /* match .tree-card max-width */
  margin-top: 6px;
  position: relative;
}
.tree-expand > summary { list-style: none; }
.tree-expand > summary::-webkit-details-marker { display: none; }

/* Toggle pill */
.tree-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  width: 100%;
  box-sizing: border-box;
  background: var(--c-white);
  border: 1px solid var(--c-grey-300);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-grey-700);
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.tree-expand-toggle:hover {
  border-color: var(--c-grey-600);
  background: var(--c-grey-50);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.tree-expand[open] .tree-expand-toggle {
  background: var(--c-grey-900);
  border-color: var(--c-grey-900);
  color: var(--c-white);
  box-shadow: none;
}

/* Count badge inside the toggle pill */
.tree-expand-count-badge {
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--c-grey-200);
  color: var(--c-grey-800);
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tree-expand[open] .tree-expand-count-badge {
  background: rgba(255,255,255,.20);
  color: var(--c-white);
}
.tree-expand-toggle-label { flex: 1; }

.tree-expand-chevron {
  font-size: 9px;
  transition: transform .15s;
  display: inline-block;
  margin-left: auto;
}
.tree-expand[open] .tree-expand-chevron { transform: rotate(180deg); }

/* Main dropdown panel — in-flow so the tree height accommodates it,
   overflow:visible so the right-flyout subpanels are never clipped. */
.tree-expand-panel {
  width: 260px;
  margin: 4px auto 0;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: visible;
  position: relative;
  text-align: left;
}

/* Row item — shared by <a> leaf rows and <summary> expandable rows */
.tree-expand-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  text-decoration: none;
  color: var(--c-grey-900);
  border-bottom: 1px solid var(--c-grey-100);
  transition: background .1s;
  width: 100%;
  box-sizing: border-box;
}
.tree-expand-item:last-child { border-bottom: 0; }
.tree-expand-item:hover { background: var(--c-grey-50); }

/* Expandable row (is a <summary>) */
.tree-expand-item--expandable { cursor: pointer; list-style: none; }
.tree-expand-item--expandable::-webkit-details-marker { display: none; }
.tree-expand-item--expandable::marker { display: none; content: ""; }
.tree-expand-nested[open] > .tree-expand-item--expandable { background: var(--c-grey-50); }

/* Actions column (badge + jump arrow + expand chevron) */
.tree-expand-item-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* Inline expand chevron — rotates when the row is open */
.tree-expand-chevron--inline {
  font-size: 10px;
  color: var(--c-grey-400);
  transition: transform .15s;
  display: inline-block;
}
.tree-expand-nested[open] > .tree-expand-item--expandable .tree-expand-chevron--inline {
  transform: rotate(90deg);
  color: var(--c-grey-700);
}

/* Each expandable <details> is the containing block for its right-flyout subpanel */
.tree-expand-nested {
  display: block;
  position: relative;
}

/* ================================================================
   SUBPANEL — appears to the RIGHT of the main dropdown.
   Position is absolute relative to .tree-expand-nested (the row),
   so it aligns vertically with the triggering row.
   ================================================================ */
.tree-expand-subpanel {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  width: 260px;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  text-align: left;
  overflow: visible; /* recursive subpanels can also fly right */
}

/* Subpanel header: shows whose team is listed */
.tree-expand-subpanel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  background: var(--c-grey-50);
  border-bottom: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.tree-expand-subpanel-head-body { display: flex; flex-direction: column; min-width: 0; }
.tree-expand-subpanel-head-name {
  font-size: 12px; font-weight: 600; color: var(--c-grey-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-expand-subpanel-head-role {
  font-size: 10.5px; color: var(--c-grey-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "Open profile" jump arrow */
.tree-expand-jump {
  font-size: 13px;
  color: var(--c-grey-400);
  text-decoration: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.tree-expand-jump:hover { background: var(--c-black); color: var(--c-white); }

/* Icon disc — department colours via double-class (.tree-expand-icon.tree-card--*) */
.tree-expand-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  background: var(--c-grey-100);
  color: var(--c-grey-600);
}
.tree-expand-icon.tree-card--management { background: #ece8df; color: #6d5a1a; }
.tree-expand-icon.tree-card--support    { background: #e4ecf2; color: #2d4d63; }
.tree-expand-icon.tree-card--kitchen    { background: #f4e7e1; color: #8a3f23; }
.tree-expand-icon.tree-card--bar        { background: #efe6f1; color: #6b3a78; }
.tree-expand-icon.tree-card--floor      { background: #ece8df; color: #6d5a1a; }
.tree-expand-icon.tree-card--reception  { background: #e0ecdf; color: #265a36; }
.tree-expand-icon.tree-card--hotel      { background: #e4ecf2; color: #2d4d63; }
.tree-expand-icon.tree-card--shop       { background: #ecedea; color: #4a4a3a; }

/* Text content */
.tree-expand-body { display: flex; flex-direction: column; min-width: 0; }
.tree-expand-name {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-expand-role {
  font-size: 10.5px; color: var(--c-grey-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-expand-loc {
  font-size: 10px; color: var(--c-grey-400);
  text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Report-count badge inside expandable rows */
.tree-expand-badge {
  font-size: 10px; font-weight: 600;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--c-grey-200); color: var(--c-grey-600);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.org-tree li { overflow: visible; }

/* ----- Venue rosters grid (under the tree) ----- */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.venue-card {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.venue-card-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-grey-100);
  background: var(--c-grey-50);
}
.venue-card-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-2); }
.venue-card-title h3 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--c-grey-900);
  letter-spacing: -0.1px;
}
.venue-card-cat {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--c-grey-500); font-weight: 600;
}
.venue-card-mgr {
  display: flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: var(--c-grey-900);
  padding: var(--space-2) var(--space-3);
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--radius-sm);
  transition: border-color .12s ease;
}
.venue-card-mgr:hover { border-color: var(--c-grey-900); }
.venue-card-mgr-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-grey-100); border-radius: 50%;
  font-size: 14px; color: var(--c-grey-700);
}
.venue-card-mgr-meta { display: flex; flex-direction: column; min-width: 0; }
.venue-card-mgr-name { font-size: 12.5px; font-weight: 600; }
.venue-card-mgr-role { font-size: 11px; color: var(--c-grey-500); }

.venue-team {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.venue-team-item { border-bottom: 1px solid var(--c-grey-100); }
.venue-team-item:last-child { border-bottom: 0; }
.venue-team-link {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: 8px var(--space-4);
  text-decoration: none;
  color: var(--c-grey-900);
  font-size: 12.5px;
  transition: background-color .1s ease;
}
.venue-team-link:hover { background: var(--c-grey-50); }
.venue-team-icon {
  font-size: 13px; color: var(--c-grey-500);
  display: inline-flex; align-items: center; justify-content: center;
}
.venue-team-name { font-weight: 500; }
.venue-team-role {
  font-size: 11px; color: var(--c-grey-500);
  text-align: right; white-space: nowrap;
}

@media (max-width: 720px) {
  .tree-card { min-width: 130px; max-width: 160px; padding: var(--space-2) var(--space-2); }
  .tree-card-name { font-size: 11px; }
  .tree-card-role { font-size: 10px; }
  .venue-grid { grid-template-columns: 1fr; padding: var(--space-3) var(--space-4); }
}

/* ============================================================================
   AI progress overlay — shown while a long-running AI request is in flight.
   Pure CSS animation; toggled by /static/js/ai-progress.js (CSP-safe,
   same-origin). Hidden by default via [hidden] attribute.
   ============================================================================ */
.ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ai-overlay[hidden] { display: none; }

.ai-overlay-card {
  background: #fff;
  border-radius: 6px;
  padding: var(--space-7) var(--space-8);
  min-width: 320px;
  max-width: 440px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.ai-overlay-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-fg);
  margin: 0 0 var(--space-2) 0;
}
.ai-overlay-msg {
  font-size: 0.8125rem;
  color: var(--c-muted);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.5;
}
.ai-overlay-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--space-5);
  border: 3px solid #e5e5e5;
  border-top-color: #000;
  border-radius: 50%;
  animation: ai-spin 0.9s linear infinite;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
.ai-overlay-hint {
  font-size: 0.6875rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}