:root {
  /* Default = Siemens grid (light); dark theme overrides below */
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans", "Segoe UI", sans-serif;

  --ok: #00875a;
  --attention: #ff8b00;
  /* Orange-gold for labels: darker and yellower than fill, not rust-red */
  --attention-text: #cc9900;
  --critical: #c62828;
  --no-data: #888888;
  --ok-soft: color-mix(in srgb, var(--ok) 48%, transparent);
  --attention-soft: color-mix(in srgb, var(--attention) 48%, transparent);
  --critical-soft: color-mix(in srgb, var(--critical) 48%, transparent);
  --no-data-soft: color-mix(in srgb, var(--no-data) 42%, transparent);
  --waterfall-plan: #45689A;
  --waterfall-forecast: #45689A;
  --waterfall-negative: #D96B6B;
  --waterfall-positive: #57A773;
  --waterfall-connector: #9AA4B2;
  --waterfall-axis: #7A8495;
  --zone-gray: hsl(220 10% 42%);
  --zone-green: var(--ok);
  --zone-yellow: var(--attention);
  --zone-red: var(--critical);

  --radius-sm: 0;
  --radius-md: 0;
  --sidebar-w: 125px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Light = Siemens grid tokens (ui-examples skin "siemens") */
html[data-theme="light"] {
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans", "Segoe UI", sans-serif;
  --radius-sm: 0;
  --radius-md: 0;
  --ok: #00875a;
  --attention: #ff8b00;
  --attention-text: #cc9900;
  --critical: #c62828;
  --bg: #f2f2f2;
  --bg-accent: #f2f2f2;
  --surface-glass: #ffffff;
  --surface-glass-strong: #ffffff;
  /* ~10% lighter than page gray / card white — alert card, row, list surfaces */
  --alert-surface: color-mix(in srgb, #fff 10%, var(--surface-glass));
  --alert-page-bg: color-mix(in srgb, #fff 25%, var(--bg));
  --text-primary: #000000;
  --text-secondary: #555555;
  --text-muted: #555555;
  --border-subtle: #bdbdbd;
  --shadow-soft: none;
  --sidebar-bg: #e8e8e8;
  --nav-active: #ffffff;
  --nav-active-bar: #009999;
  --chip-bg: #f2f2f2;
  --focus: #009999;
  --positive: var(--ok);
  --negative: var(--critical);
  /* KPI spark plan (dashed): bluish, distinct from teal fact line */
  --kpi-spark-plan: #4a7ec8;
  --kpi-spark-plan-opacity: 0.5;
}

/* Dark = WeBridge tokens (ui-examples skin "webridge") */
html[data-theme="dark"] {
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans", "Segoe UI", sans-serif;
  --radius-sm: 4px;
  --radius-md: 4px;
  --ok: #4ade80;
  --attention: #fbbf24;
  /* Amber stays bright on dark slate; slightly deeper orange for label clarity */
  --attention-text: #fb923c;
  --critical: #fb7185;
  --bg: #0f172a;
  --bg-accent: #0f172a;
  --surface-glass: #1e293b;
  --surface-glass-strong: #1e293b;
  --alert-surface: color-mix(in srgb, #fff 10%, var(--surface-glass));
  --alert-page-bg: color-mix(in srgb, #fff 10%, var(--bg));
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #94a3b8;
  --border-subtle: #334155;
  --shadow-soft: none;
  --sidebar-bg: #0f172a;
  --nav-active: #1e293b;
  --nav-active-bar: #22d3ee;
  --chip-bg: #1e293b;
  --focus: #22d3ee;
  --positive: var(--ok);
  --negative: var(--critical);
  --kpi-spark-plan: #6ea3e8;
  --kpi-spark-plan-opacity: 0.55;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-accent);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { text-decoration: none; }

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 10px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border-subtle);
  z-index: 20;
}

.sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px;
  width: 100%;
  padding-bottom: 30px;
  margin-bottom: 6px;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  flex: 1 1 auto;
}
.brand-plaque {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 75%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 4px;
  margin-bottom: 9px;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  line-height: 1;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.brand-plaque:hover {
  border-color: color-mix(in srgb, var(--nav-active-bar) 45%, var(--border-subtle));
}
.brand-plaque:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.brand-plaque-mark {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 3px 4px;
  border-radius: 0;
  background: var(--nav-active-bar);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand-plaque-name {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.27rem;
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
  text-transform: uppercase;
}
html[data-theme="dark"] .brand-plaque-mark {
  color: #0f172a;
}

.nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nav-block--captioned {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  /* Shared rail height with plain .nav-item (caption fits inside) */
  min-height: 80px;
  padding: 0;
  overflow: hidden;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
/* Active highlight wraps icon + caption as one continuous selection */
.nav-block--captioned:has(.nav-item.is-active) {
  background: color-mix(in srgb, var(--nav-active-bar) 16%, var(--nav-active));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-active-bar) 42%, transparent);
}
.nav-block--captioned:has(.nav-item.is-active)::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: var(--nav-active-bar);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--nav-active-bar) 55%, transparent);
  pointer-events: none;
  z-index: 1;
}
.nav-block--captioned .nav-item {
  /* Icon well only — caption lives below within the shared block height */
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 6px;
  padding-bottom: 2px;
  border-radius: 12px 12px 0 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 24px;
  /* Horizontal padding +10% vs prior 19px so selection/hit box is wider */
  padding: 18px 21px;
  min-height: 80px;
  box-sizing: border-box;
  border-radius: 12px;
  color: var(--text-secondary);
  position: relative;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-item:hover { background: var(--chip-bg); color: var(--text-primary); }
.nav-block--captioned .nav-item:hover { background: transparent; color: var(--text-primary); }
.nav-block--captioned:hover {
  background: var(--chip-bg);
}
.nav-block--captioned:has(.nav-item.is-active):hover {
  background: color-mix(in srgb, var(--nav-active-bar) 16%, var(--nav-active));
}
.nav-item.is-active {
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}
/* Selected nav icons stay muted gray (not pure black / primary) */
.nav-item.is-active .nav-icon {
  color: var(--text-secondary);
}
.nav-item.is-active:hover { background: transparent; }
.nav-item.is-active:hover .nav-icon {
  color: var(--text-secondary);
}
/* Standalone nav items (no caption block) keep their own active chrome */
.nav > .nav-item.is-active {
  background: color-mix(in srgb, var(--nav-active-bar) 16%, var(--nav-active));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-active-bar) 42%, transparent);
}
.nav > .nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: var(--nav-active-bar);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--nav-active-bar) 55%, transparent);
}
.nav-item.is-disabled { opacity: .55; cursor: default; }
.nav-icon { display: grid; place-items: center; width: 22px; flex: 0 0 22px; }
.nav-item .nav-icon { width: 44px; flex: 0 0 44px; }
.nav-item .nav-icon svg {
  width: 36px;
  height: 36px;
}
.nav-label { white-space: nowrap; }
/* Base caption size X = 0.62rem; dash/lg = 1.5X −15%; CEO = former lg +15% */
.nav-caption {
  display: block;
  margin: 0;
  padding: 0 4px 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
  flex: 0 0 auto;
  transition: color .2s var(--ease);
}
.nav-block--captioned:has(.nav-item.is-active) .nav-caption {
  color: var(--nav-active-bar);
}
.nav-caption--dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.nav-caption-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.nav-caption-line--dash,
.nav-caption--lg {
  font-size: calc(0.93rem * 0.85);
  letter-spacing: 0.04em;
}
.nav-caption--lg {
  white-space: nowrap;
  text-overflow: clip;
}
.nav-caption-line--ceo { font-size: calc(1.24rem * 1.15); letter-spacing: 0.05em; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.settings-toggle,
.lang-trigger,
.admin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text-secondary);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}
/* display:inline-flex above must not override the hidden attribute */
.admin-toggle[hidden],
#adminNav[hidden] {
  display: none !important;
}
.sidebar-footer-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.sidebar-footer-tools .lang-switcher {
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-footer-tools .admin-toggle,
.sidebar-footer-tools .logout-toggle {
  flex: 0 0 auto;
  width: auto;
}
.logout-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text-secondary);
  min-height: 44px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
/* Theme toggle mirrors .nav-item icon frame treatment */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 19px;
  border-radius: 12px;
  color: var(--text-secondary);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.theme-toggle .nav-icon {
  width: 44px;
  flex: 0 0 44px;
  height: 44px;
}
.settings-toggle:hover,
.theme-toggle:hover,
.lang-trigger:hover,
.lang-trigger[aria-expanded="true"],
.admin-toggle:hover,
.logout-toggle:hover {
  background: var(--chip-bg);
  color: var(--text-primary);
}
/* Show action icon: moon in light (switch to dark), sun in dark (switch to light) */
.theme-icon.sun { display: none; }
.theme-icon.moon { display: grid; }
html[data-theme="dark"] .theme-icon.sun { display: grid; }
html[data-theme="dark"] .theme-icon.moon { display: none; }
.theme-icon {
  font-size: 2rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  place-items: center;
}
.app.is-collapsed .sidebar-head {
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 24px;
  gap: 4px;
}
.app.is-collapsed .brand {
  padding: 0;
  justify-content: center;
  width: 100%;
}
.app.is-collapsed .brand-plaque {
  padding: 3px 3px;
  gap: 3px;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  max-width: 100%;
  width: 75%;
  margin-inline: auto;
}
.app.is-collapsed .brand-plaque-mark {
  padding: 3px 3px;
  font-size: 1.64rem;
}
.app.is-collapsed .brand-plaque-name {
  display: block;
  font-size: 1.06rem;
  letter-spacing: -.04em;
}
.app.is-collapsed .nav-label,
.app.is-collapsed .theme-label { display: none; }
.app.is-collapsed .sidebar {
  padding-left: 4px;
  padding-right: 4px;
  align-items: center;
}
.app.is-collapsed .nav {
  align-items: center;
  width: 100%;
  gap: 6px;
}
.app.is-collapsed .nav-block--captioned {
  align-items: center;
  /* ~10% wider than prior 65px hit/highlight box */
  width: 72px;
  max-width: 100%;
  margin: 0 auto;
  gap: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  height: 80px;
  min-height: 80px;
  justify-content: center;
}
.app.is-collapsed .nav-block--captioned:has(.nav-item.is-active)::before {
  top: 6px;
  bottom: 6px;
  width: 5px;
}
.app.is-collapsed .nav-block--captioned .nav-item {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 2px 0 0;
  margin: 0;
  border-radius: 0;
}
.app.is-collapsed .nav-item {
  justify-content: center;
  align-items: center;
  /* Prior 65px +10% width; shared height with captioned blocks */
  width: 72px;
  height: 80px;
  min-height: 80px;
  padding: 0;
  gap: 0;
  margin: 0 auto;
  border-radius: 0;
}
.app.is-collapsed .nav > .nav-item.is-active::before {
  top: 10px;
  bottom: 10px;
  width: 5px;
}
.app.is-collapsed .nav-item .nav-icon {
  width: 44px;
  flex: 0 0 44px;
  height: 44px;
}
.app.is-collapsed .nav-item .nav-icon svg {
  width: 36px;
  height: 36px;
}
.app.is-collapsed .nav-caption {
  font-size: 0.48rem;
  letter-spacing: 0.02em;
  width: 100%;
  max-width: 100%;
  padding: 0 1px 2px;
  line-height: 1;
  flex: 0 0 auto;
}
.app.is-collapsed .nav-caption-line--dash,
.app.is-collapsed .nav-caption--lg {
  font-size: calc(0.72rem * 0.85);
  letter-spacing: 0.02em;
}
.app.is-collapsed .nav-caption-line--ceo { font-size: calc(0.96rem * 1.15); letter-spacing: 0.04em; }
.app.is-collapsed .sidebar-footer {
  align-items: center;
  width: 100%;
}
.app.is-collapsed .sidebar-footer-tools {
  width: auto;
  justify-content: center;
  gap: 2px;
}
.app.is-collapsed .sidebar-footer-tools .lang-switcher {
  flex: 0 0 auto;
  width: auto;
}
.app.is-collapsed .settings-toggle,
.app.is-collapsed .lang-trigger,
.app.is-collapsed .admin-toggle {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  border-radius: 0;
}
.app.is-collapsed .sidebar-footer-tools .lang-trigger,
.app.is-collapsed .sidebar-footer-tools .admin-toggle,
.app.is-collapsed .sidebar-footer-tools .logout-toggle {
  margin: 0;
}
.app.is-collapsed .theme-toggle {
  width: 65px;
  height: 65px;
  min-height: 65px;
  padding: 0;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  border-radius: 0;
}
.app.is-collapsed .settings-toggle .nav-icon,
.app.is-collapsed .lang-trigger .nav-icon,
.app.is-collapsed .admin-toggle .nav-icon,
.app.is-collapsed .logout-toggle .nav-icon {
  width: 22px;
  flex: 0 0 22px;
  height: 22px;
}
.app.is-collapsed .theme-toggle .nav-icon {
  width: 44px;
  flex: 0 0 44px;
  height: 44px;
}
.app.is-collapsed .settings-toggle .nav-icon svg,
.app.is-collapsed .lang-trigger .nav-icon svg,
.app.is-collapsed .admin-toggle .nav-icon svg,
.app.is-collapsed .logout-toggle .nav-icon svg {
  width: 18px;
  height: 18px;
}
.app.is-collapsed .theme-icon {
  font-size: 2rem;
  width: 36px;
  height: 36px;
}

.lang-switcher {
  position: relative;
  display: block;
  width: 100%;
}
.lang-trigger {
  font-size: .84rem;
  font-weight: 600;
}
.lang-globe { flex: 0 0 auto; display: block; }
.lang-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  z-index: 80;
}
.app.is-collapsed .lang-menu {
  left: calc(100% + 8px);
  right: auto;
  bottom: 0;
  min-width: 180px;
}
.lang-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .84rem;
  color: var(--text-secondary);
  text-align: left;
}
.lang-option:hover { background: var(--chip-bg); color: var(--text-primary); }
.lang-option.is-active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--nav-active) 70%, transparent);
  font-weight: 650;
}
.lang-option-short {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
}
.placeholder-card {
  padding: 48px 28px;
  text-align: center;
  max-width: 640px;
  margin: 48px auto;
}
.placeholder-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nav-active-bar);
  background: color-mix(in srgb, var(--nav-active) 65%, transparent);
}
.placeholder-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.6rem;
}
.placeholder-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.5;
}

.topbar-period-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  width: 100%;
}
.topbar-period-stack:not(:has(#dateFilter:not([hidden]))) {
  display: none;
}
.guest-group-filter {
  display: none;
  width: 100%;
  min-width: 0;
  margin-top: 0;
}
.guest-group-filter:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.guest-group-filter[hidden] {
  display: none !important;
}
.guest-group-filter-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.guest-group-label {
  display: block;
  width: 100%;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-display);
}
.guest-group-chips {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}
.guest-group-btn {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
}
.guest-group-btn:last-child {
  border-right: 0;
}
.guest-group-btn:hover {
  color: var(--text-primary);
  background: var(--chip-bg);
}
.guest-group-btn.is-active {
  color: var(--text-primary);
  background: var(--surface-glass-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* Col 3: resto + combine on one row (combine to the right of resto). */
.reports-toolbar-cluster,
.reports-resto-combine {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.reports-resto-combine-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
  flex: 0 0 auto;
  min-width: max-content;
  width: max-content;
  max-width: none;
}
.reports-resto-combine-row:not(:has(:not([hidden]))) {
  display: none;
}
.reports-toolbar-cluster:not(:has(#reportsRestoFilter:not([hidden]), #reportsCombineFilter:not([hidden]))),
.reports-resto-combine:not(:has(#reportsRestoFilter:not([hidden]), #reportsCombineFilter:not([hidden]))) {
  display: none;
}
.reports-resto-filter {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-end;
  width: max-content;
  max-width: none;
  min-width: max-content;
}
/* Default: hidden. display:inline-flex must NOT override [hidden] on CEO/dashboard. */
.reports-combine-filter {
  display: none;
  align-items: center;
  align-self: flex-end;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}
.reports-combine-filter:not([hidden]) {
  display: inline-flex;
}
.reports-combine-filter[hidden],
.reports-resto-filter[hidden] {
  display: none !important;
}
.reports-combine-filter input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--focus);
  border-radius: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.reports-resto-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 14px;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  box-sizing: border-box;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: max-content;
  max-width: none;
  min-width: max-content;
}
.reports-resto-pill #reportsRestoPillLabel {
  display: inline;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
  min-width: max-content;
}
.reports-resto-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .7;
}
.reports-resto-pill:hover { border-color: var(--focus); }
.reports-resto-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, 88vw);
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 10px;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg) 95%, white 5%);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  z-index: 45;
}
.reports-resto-popover-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.reports-resto-popover-foot {
  display: flex;
  justify-content: flex-end;
}
.reports-resto-all,
.reports-resto-none,
.reports-resto-apply {
  padding: 7px 10px;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 600;
}
.reports-resto-all,
.reports-resto-none {
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
}
.reports-resto-all:hover,
.reports-resto-none:hover { background: var(--chip-bg); color: var(--text-primary); }
.reports-resto-apply {
  margin-left: auto;
  background: var(--nav-active);
  color: var(--text-primary);
}
.reports-resto-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}
.reports-resto-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 0;
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  font-size: .82rem;
}
.reports-resto-item input {
  margin: 0;
  accent-color: var(--nav-active-bar);
}
.reports-resto-item-city {
  color: var(--text-muted);
  font-size: .74rem;
}

.reports-catalog,
.reports-detail {
  display: grid;
  gap: 14px;
  margin: 8px 0 18px;
}
.reports-catalog-groups {
  display: grid;
  gap: 22px;
}
.reports-group {
  display: grid;
  gap: 10px;
}
.reports-group-title {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.reports-catalog-head,
.reports-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.reports-detail-title {
  flex: 1 1 200px;
  min-width: 0;
}
.reports-detail-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}
.reports-detail-head--actions-only {
  justify-content: flex-end;
}
.reports-detail-head--actions-only .reports-detail-head-actions {
  margin-left: 0;
}
.tr-tech-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 2px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tr-tech-toggle-input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--nav-active, #2563eb);
  cursor: pointer;
}
.reports-export {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.reports-detail-head-actions .reports-export {
  margin-left: 0;
}
.reports-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
}
.reports-export-btn:hover {
  border-color: var(--focus);
  color: var(--text-primary);
  background: var(--chip-bg);
}
.reports-share-btn {
  /* Icon-only; keep padding square-ish like export code badges */
  padding-left: 9px;
  padding-right: 9px;
}
.reports-share-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  /* Same as .reports-export-code text (PDF/CSV) */
  color: var(--text-primary);
}
.reports-share-icon {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}
.reports-share-label {
  display: none;
}
.report-share-dialog {
  border: 1px solid var(--border-subtle, #ccc);
  border-radius: 14px;
  padding: 0;
  max-width: 560px;
  width: calc(100vw - 32px);
  background: var(--surface-glass, #fff);
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.report-share-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.alert-mute-dialog {
  border: 1px solid var(--border-subtle, #ccc);
  border-radius: 14px;
  padding: 0;
  max-width: 420px;
  width: calc(100vw - 32px);
  background: var(--surface-glass, #fff);
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.alert-mute-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.alert-mute-dialog-inner {
  padding: 18px 20px;
  margin: 0;
  display: grid;
  gap: 14px;
}
.alert-mute-dialog-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.alert-mute-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.alert-mute-dialog-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}
.alert-mute-options {
  display: grid;
  gap: 8px;
}
.alert-mute-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, #ddd);
  cursor: pointer;
}
.alert-mute-option:has(input:checked) {
  border-color: var(--accent, #3b82f6);
  background: var(--accent-soft, rgba(59, 130, 246, 0.08));
}
.alert-mute-comment {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.alert-mute-comment input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #ccc);
  padding: 8px 10px;
  background: var(--surface, #fff);
  color: var(--text-primary);
}
.alert-mute-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.report-share-dialog-inner {
  padding: 18px 20px;
  margin: 0;
}
.report-share-dialog-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.report-share-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.report-share-dialog-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}
.report-share-dialog-hint {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: .88rem;
  line-height: 1.45;
}
.report-share-url-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 16px;
}
.report-share-url-input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface, #fff);
  color: var(--text-primary);
  font-size: .82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.report-share-copy {
  flex: 0 0 auto;
}
.report-share-dialog-foot {
  display: flex;
  justify-content: flex-end;
}
.reports-export-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--nav-active) 55%, transparent);
  color: var(--text-primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}
/* Label span removed from export buttons (code badge only) to avoid "CSV CSV". */
.reports-data-table td.is-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 12px;
}
.reports-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.reports-hub-stack,
.reports-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.reports-hub .hub-report-card {
  min-height: 168px;
  white-space: normal;
}
/* One shared period table: 3 rows × 3 cols (label | value | delta%) */
.hub-card-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  margin: 2px 0 0 6px;
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
}
.hub-card-stats--loading {
  width: auto;
  gap: 8px;
  margin-top: 10px;
}
.hub-card-skel {
  height: 12px;
  width: 78%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2, #e8e8e8) 0%, var(--surface-3, #f4f4f4) 50%, var(--surface-2, #e8e8e8) 100%);
  background-size: 200% 100%;
  animation: hub-skel-pulse 1.1s ease-in-out infinite;
}
.hub-card-skel--short {
  width: 52%;
}
@keyframes hub-skel-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.hub-card-period-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  table-layout: auto;
  font-size: calc(0.82rem + 2pt);
  line-height: 1.35;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hub-card-period-table td {
  margin: 0;
  padding: 0 6px 0 0;
  border: 0;
  vertical-align: baseline;
  text-align: left;
  white-space: nowrap;
  min-width: 0;
  letter-spacing: normal;
}
.hub-card-period-table td:last-child {
  padding: 0;
}
.hub-card-period-row--prev {
  color: var(--text-muted);
  font-size: calc(0.78rem + 2pt);
}
.hub-card-period-row--prior .hub-card-period-label,
.hub-card-period-row--prior .hub-card-period-value,
.hub-card-period-row--prior .hub-card-delta {
  opacity: 0.92;
}
.hub-card-period-label {
  font-weight: 600;
  color: var(--text-primary);
}
.hub-card-period-row--prev .hub-card-period-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.hub-card-period-value {
  font-weight: 600;
  color: var(--text-primary);
}
.hub-card-delta {
  font-weight: 600;
}
.hub-card-delta--empty {
  padding: 0 !important;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}
.hub-card-insight {
  margin: 6px 0 0;
  padding: 0;
  font-size: calc(0.74rem + 2pt);
  line-height: 1.4;
  color: var(--text-muted);
  font-weight: 500;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: visible;
}
.hub-card-insight--link {
  margin-top: 6px;
}
.hub-card-insight-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hub-card-insight-btn:hover,
.hub-card-insight-btn:focus-visible {
  color: var(--text-secondary);
  text-decoration: none;
}
.hub-back-restaurant {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  width: auto;
  max-width: 100%;
  gap: 6px;
  margin: 0 0 4px;
  min-height: 28px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  background: var(--surface-glass);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  cursor: pointer;
}
.hub-back-restaurant-icon {
  flex: 0 0 auto;
  display: block;
}
.hub-back-restaurant:hover {
  border-color: var(--focus);
  color: var(--text-primary);
  background: var(--chip-bg);
}
.hub-back-restaurant:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--focus) 70%, transparent);
  outline-offset: 2px;
}
.report-card {
  display: grid;
  gap: 8px;
  padding: 18px 18px 16px;
  text-align: left;
  min-height: 144px;
  align-content: start;
}
.reports-hub .report-card {
  gap: 7px;
  padding: 15px 18px 14px;
  min-height: 122px;
}
.report-card.is-active,
.report-card:focus-visible {
  outline: none;
  z-index: 1;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--focus) 72%, var(--border-subtle));
  background: color-mix(in srgb, var(--focus) 8%, var(--surface-glass));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--focus) 55%, transparent),
    0 12px 28px color-mix(in srgb, var(--focus) 18%, transparent);
}
.report-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.reports-hub .report-card-title {
  font-size: 1.3rem;
}
.report-card-meta {
  color: var(--text-secondary);
  font-size: .82rem;
}
.report-card-source {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.report-card-source.is-muted {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-secondary);
}
.reports-detail-card {
  padding: 18px;
}
.reports-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.reports-detail-period,
.reports-detail-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
}
.reports-detail-period {
  background: var(--chip-bg);
  color: var(--text-secondary);
  border-radius: 0;
}
.reports-detail-badge {
  background: color-mix(in srgb, var(--nav-active) 55%, transparent);
  color: var(--text-primary);
  border-radius: 0;
}
.gc-stack {
  display: grid;
  gap: 14px;
}
.gc-card {
  max-width: 680px;
  padding: 18px;
}
.gc-card-hdr,
.gc-card-title {
  font-weight: 700;
  color: var(--text-primary);
}
.gc-card-hdr {
  font-size: 1rem;
  margin-bottom: 2px;
}
.gc-card-title {
  font-size: .95rem;
}
.gc-card-sub {
  color: var(--text-secondary);
  font-size: .82rem;
  margin-top: 4px;
}
.gc-wrap {
  margin-top: 10px;
  overflow: hidden;
  border: none;
  border-radius: 4px;
}
.gc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
}
.gc-col-period {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}
.gc-col-guests {
  width: auto;
}
.gc-table th:first-child,
.gc-table td:first-child {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  box-sizing: border-box;
}
.gc-table th,
.gc-table td {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 85%, #e5e7eb);
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  position: static;
  background: transparent;
  white-space: normal;
  box-sizing: border-box;
}
.gc-table th {
  background: color-mix(in srgb, var(--chip-bg) 88%, #f3f4f6);
  font-weight: 600;
  color: var(--text-primary);
}
.gc-table th.num,
.gc-table td.num {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* grand row: .rpt-grand-row (shared) */
.gc-network {
  max-width: 680px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gc-network-label {
  font-weight: 700;
  color: var(--text-primary);
}
.gc-network-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* «Продажи по официантам» */
.sbw-stack {
  display: grid;
  gap: 14px;
}
.sbw-card {
  max-width: 920px;
}
.sbw-card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.sbw-card-hdr-text {
  flex: 1 1 auto;
  min-width: 0;
}
.sbw-excl-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-secondary, #888) 85%, transparent);
  cursor: default;
  border-radius: 4px;
}
.sbw-excl-btn.is-manageable {
  cursor: pointer;
}
.sbw-excl-btn.is-manageable:hover,
.sbw-excl-btn.is-manageable:focus-visible {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-secondary, #888) 12%, transparent);
}
.sbw-excl-icon {
  width: 16px;
  height: 16px;
  display: block;
}
.sbw-excl-dialog {
  border: 1px solid var(--border, #ccc);
  border-radius: 12px;
  padding: 0;
  max-width: 420px;
  width: calc(100vw - 32px);
  background: var(--surface, #fff);
  color: var(--text-primary);
}
.sbw-excl-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.sbw-excl-dialog-inner {
  padding: 16px 18px;
  margin: 0;
}
.sbw-excl-dialog-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sbw-excl-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.sbw-excl-dialog-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}
.sbw-excl-manage-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.sbw-excl-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sbw-excl-add {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border, #ccc) 70%, transparent);
}
.sbw-excl-add-label {
  display: grid;
  gap: 4px;
  font-size: 0.86rem;
}
.sbw-excl-add-select {
  width: 100%;
}
.sbw-wrap {
  overflow: hidden;
  border-radius: 4px;
}
.sbw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.sbw-col-waiter { width: 36%; }
.sbw-col-revenue { width: 18%; }
.sbw-col-checks { width: 14%; }
.sbw-col-guests { width: 14%; }
.sbw-col-avg { width: 18%; }
.sbw-table--combine .sbw-col-waiter { width: 24%; }
.sbw-table--combine .sbw-col-restaurant { width: 24%; }
.sbw-table--combine .sbw-col-revenue { width: 22%; }
.sbw-table--combine .sbw-col-compact { width: 8%; }
.sbw-table th.sbw-sortable {
  cursor: pointer;
  user-select: none;
}
.sbw-table th.sbw-sortable:hover {
  color: var(--text-primary);
}
.sbw-table th.sbw-sortable::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  margin-left: 0.25em;
  opacity: 0.35;
}
.sbw-table th.sbw-sortable.is-sorted {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.sbw-table th.sbw-sortable.is-sorted::after {
  opacity: 0.85;
}
.sbw-table th.sbw-sortable.is-sorted-asc::after { content: "▲"; }
.sbw-table th.sbw-sortable.is-sorted-desc::after { content: "▼"; }
.sbw-table th,
.sbw-table td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #ccc) 70%, transparent);
  vertical-align: top;
}
.sbw-table th {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
}
.sbw-table tr.is-focused > td {
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
}
.sbw-table th.num,
.sbw-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* grand row: .rpt-grand-row (shared) */
.sbw-network {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  max-width: 920px;
}
.sbw-network-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.sbw-network-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sbw-network-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* «Отчёт по скидкам» */
.disc-stack {
  display: grid;
  gap: 14px;
}
.disc-card {
  max-width: 920px;
}
.disc-card-hdr {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.disc-card-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.disc-wrap {
  overflow: hidden;
  border-radius: 4px;
}
.disc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.disc-col-tech { width: 36px; }
.disc-col-type { width: 28%; }
.disc-col-name { width: 32%; }
.disc-col-amount { width: 16%; }
.disc-col-events { width: 12%; }
.disc-col-share { width: 12%; }
.disc-table.is-tech .disc-col-type { width: 26%; }
.disc-table.is-tech .disc-col-name { width: 30%; }
.disc-table th,
.disc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-primary);
}
.disc-table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.disc-table th.num,
.disc-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.disc-table .disc-tech-col {
  width: 1%;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  vertical-align: middle;
}
.disc-table .disc-incl-check {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--nav-active, #2563eb);
  cursor: pointer;
}
.disc-type-row td {
  font-weight: 700;
  background: color-mix(in srgb, var(--surface-2, #f3f4f6) 80%, transparent);
}
.disc-name-row .disc-name-cell {
  padding-left: 18px;
}
.disc-name-row.is-excluded td {
  color: var(--text-muted);
  opacity: 0.62;
}
/* grand row: .rpt-grand-row (shared) */
.disc-network {
  max-width: 920px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.disc-network-label {
  font-weight: 700;
}
.disc-network-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.disc-network-share {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Расход блюд по категориям — combined «Категория / блюдо» (no colspan; flex on inner only).
   dcat2 wrongly copied total-revenue's name:100% + num:1% under table-layout:fixed.
   That vacuums leftover width into the name col and packs qty/price/sums at the far right.
   Total revenue uses table-layout:auto, ~2 columns, and a max-width:680px card — not this
   full-width 5–6 column table. Give name an explicit %; num cols share the rest equally.
   Selectors must beat .rpt-table th.num/td.num { width:1% }. */
.dcat-stack { display: grid; gap: 14px; }
.dcat-card { padding: 18px; }
.dcat-card-hdr {
  font-weight: 700;
  margin-bottom: 10px;
}
.dcat-wrap {
  overflow: hidden;
  border-radius: 4px;
}
.rpt-table.dcat-table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
/* Name capped; num cols get explicit shares (sbw-style) so leftover is not a vacuum.
   Sum headers («Сумма без/со скидкой» + sort arrow) need extra width vs qty/price/discount. */
.rpt-table.dcat-table col.dcat-col-name,
.rpt-table.dcat-table .dcat-col-name {
  width: 32%;
}
.rpt-table.dcat-table--detail col.dcat-col-num {
  width: 11%; /* qty / price / discount */
}
.rpt-table.dcat-table--detail col.dcat-col-sum-no,
.rpt-table.dcat-table--detail col.dcat-col-sum-with {
  width: 17.5%; /* 32 + 3×11 + 2×17.5 = 100% */
}
.rpt-table.dcat-table--cats col.dcat-col-name,
.rpt-table.dcat-table--cats .dcat-col-name {
  width: 36%;
}
.rpt-table.dcat-table--cats col.dcat-col-num {
  width: 12%; /* qty / discount */
}
.rpt-table.dcat-table--cats col.dcat-col-sum-no,
.rpt-table.dcat-table--cats col.dcat-col-sum-with {
  width: 20%; /* 36 + 2×12 + 2×20 = 100% */
}
.rpt-table.dcat-table th.dcat-col-name,
.rpt-table.dcat-table td.dcat-name-cell,
.rpt-table.dcat-table td.rpt-grand-label {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.rpt-table.dcat-table thead th.dcat-col-name {
  text-align: left;
}
.rpt-table.dcat-table th.num,
.rpt-table.dcat-table td.num {
  /* override .rpt-table .num { width:1% } — that was the vacuum; col % owns the width */
  width: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rpt-table.dcat-table thead th.num {
  text-align: center;
}
.dcat-cat-row { cursor: pointer; }
.dcat-cat-row td { font-weight: 700; background: rgba(0,0,0,.02); }
/* Flex on an inner wrapper — never on the <td> itself (breaks column map / colspan). */
.dcat-name-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.dcat-name-inner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dcat-cat-toggle,
.dcat-leaf-spacer {
  display: inline-block;
  width: 1em;
  flex: 0 0 auto;
}
.dcat-cat-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: inherit;
  pointer-events: none;
  user-select: none;
}
.dcat-cat-toggle::before { content: "▼"; }
.dcat-cat-row.is-collapsed .dcat-cat-toggle::before { content: "▶"; }
.dcat-leaf-spacer { visibility: hidden; }
/* Dish indent: 25px via inline style on .dcat-dish-name (same as markup tree depth×25px). */
.rpt-table.dcat-table th.dcat-sortable {
  cursor: pointer;
  user-select: none;
}
.rpt-table.dcat-table th.dcat-sortable:hover {
  color: var(--text-primary);
}
.rpt-table.dcat-table th.dcat-sortable::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  margin-left: 0.25em;
  opacity: 0.35;
}
.rpt-table.dcat-table th.dcat-sortable.is-sorted {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.rpt-table.dcat-table th.dcat-sortable.is-sorted::after {
  opacity: 0.85;
}
.rpt-table.dcat-table th.dcat-sortable.is-sorted-asc::after { content: "▲"; }
.rpt-table.dcat-table th.dcat-sortable.is-sorted-desc::after { content: "▼"; }
/* grand row: .rpt-grand-row (shared) */

/* Наценка по категориям — nested GGroup tree (path from SH5 209) */
.rpt-table.sh5m-table {
  table-layout: fixed;
  width: max-content;
  max-width: 100%;
}
.rpt-table.sh5m-table .sh5m-col-category {
  width: 300px;
  max-width: 300px;
}
.rpt-table.sh5m-table th.sh5m-col-category,
.rpt-table.sh5m-table td.sh5m-group-name-cell,
.rpt-table.sh5m-table td.rpt-grand-label {
  width: 300px;
  max-width: 300px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpt-table.sh5m-table .sh5m-group-name-inner {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.rpt-table.sh5m-table .sh5m-group-name-inner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Depth cue: left border grows with nesting (indent itself is depth×25px). */
.rpt-table.sh5m-table tr[data-sh5m-depth] td.sh5m-group-name-cell {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--text-muted) 35%, transparent);
}
.rpt-table.sh5m-table tr[data-sh5m-depth="0"] td.sh5m-group-name-cell {
  box-shadow: inset 3px 0 0 var(--text-primary);
}
.rpt-table .sh5m-group-row { cursor: pointer; }
.rpt-table .sh5m-group-row td {
  font-weight: 700;
  background: color-mix(in srgb, var(--chip-bg) 55%, transparent);
}
.rpt-table .sh5m-group-row[data-sh5m-depth="0"] td {
  background: color-mix(in srgb, var(--chip-bg) 70%, transparent);
}
.rpt-table .sh5m-group-row[data-sh5m-depth="1"] td {
  font-weight: 600;
  background: color-mix(in srgb, var(--chip-bg) 40%, transparent);
}
.rpt-table .sh5m-group-row[data-sh5m-depth="2"] td,
.rpt-table .sh5m-group-row[data-sh5m-depth="3"] td,
.rpt-table .sh5m-group-row[data-sh5m-depth="4"] td,
.rpt-table .sh5m-group-row[data-sh5m-depth="5"] td {
  font-weight: 600;
  background: color-mix(in srgb, var(--chip-bg) 28%, transparent);
}
/* Flex on an inner wrapper — never on the <td> itself (breaks column map). */
.rpt-table .sh5m-group-name-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* 25px per depth is applied inline; spacer aligns leaf labels with parent text. */
.sh5m-group-toggle,
.rpt-table .sh5m-leaf-spacer {
  display: inline-block;
  width: 1em;
  flex: 0 0 auto;
}
.sh5m-group-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-muted) 73%, white);
  font: inherit;
  font-size: calc(1em - 2pt);
  font-weight: 700;
  line-height: 1;
  cursor: inherit;
  pointer-events: none;
  user-select: none;
}
.sh5m-group-toggle::before { content: "▼"; }
.rpt-table .sh5m-group-row.is-collapsed .sh5m-group-toggle::before,
.rpt-table.sh5m-table .sh5m-all-toggle[aria-expanded="false"] .sh5m-group-toggle::before { content: "▶"; }
.rpt-table.sh5m-table .sh5m-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.rpt-table.sh5m-table .sh5m-all-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
}
.rpt-table.sh5m-table .sh5m-all-toggle .sh5m-group-toggle {
  cursor: inherit;
}
.rpt-table.sh5m-table .sh5m-all-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Quiet clear-sort control on the right edge of «Группа / категория». */
.rpt-table.sh5m-table .sh5m-sort-reset {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  user-select: none;
}
.rpt-table.sh5m-table .sh5m-sort-reset:hover,
.rpt-table.sh5m-table .sh5m-sort-reset:focus-visible {
  opacity: 1;
  color: var(--text-primary);
  outline: none;
}
.rpt-table .sh5m-leaf-spacer { visibility: hidden; }

/* Tech mode: include/exclude SH5 groups */
.rpt-table.sh5m-table .sh5m-col-tech {
  width: 1%;
}
.rpt-table.sh5m-table .sh5m-tech-col {
  width: 1%;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  vertical-align: middle;
}
.rpt-table.sh5m-table .sh5m-excl-check {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--nav-active, #2563eb);
  cursor: pointer;
}
.rpt-table.sh5m-table .sh5m-excl-check:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.rpt-table.sh5m-table .sh5m-group-row.is-excluded td,
.rpt-table.sh5m-table .sh5m-cat-row.is-excluded td {
  color: var(--text-muted);
  opacity: 0.62;
}
.rpt-table.sh5m-table .sh5m-group-row.is-excluded .sh5m-group-toggle {
  opacity: 0.75;
}
.sh5m-tech-hint {
  margin: 0 0 8px;
  font-size: 0.82rem;
}

/* «Общая выручка» — parity with trackitjwl1 rk7_total_revenue.sql card */
.tr-currency-stack {
  display: grid;
  gap: 14px;
}
.tr-currency-card {
  max-width: 680px;
  padding: 18px;
}
.tr-currency-card-hdr,
.tr-currency-card-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.tr-currency-card-sub {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  margin: 0 0 10px;
}
.reports-table-wrap.tr-currency-wrap {
  /* выше специфичность, чем .reports-table-wrap ниже по файлу */
  margin-top: 10px;
  overflow: hidden; /* клип углов под border-radius */
  border: none;
  border-radius: 4px;
}
.tr-currency-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
}
.tr-currency-col-tech {
  width: 1%;
}
.tr-currency-col-name {
  width: 100%;
}
.tr-currency-col-amount {
  /* shrink-to-fit; +50px даём padding-left у сумм валют (цифры остаются у правого края) */
  width: 1%;
}
.tr-currency-table .tr-currency-tech-col {
  width: 1%;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
.tr-currency-table .tr-currency-avg-check {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--nav-active, #2563eb);
  cursor: pointer;
}
.tr-currency-table th,
.tr-currency-table td {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 85%, #e5e7eb);
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  position: static;
  background: transparent;
  white-space: normal;
  box-sizing: border-box;
}
.tr-currency-table th {
  background: color-mix(in srgb, var(--chip-bg) 88%, #f3f4f6);
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}
.tr-currency-table thead th {
  text-align: center;
  background: color-mix(in srgb, var(--chip-bg) 82%, var(--border-subtle));
}
.tr-currency-table thead th:first-child {
  border-top-left-radius: 4px;
}
.tr-currency-table thead th:last-child {
  border-top-right-radius: 4px;
}
.tr-currency-table th.num,
.tr-currency-table td.num {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tr-currency-table thead th.num {
  text-align: center;
  /* симметричные отступы — padding-left:60px у td.num смещал «Сумма» вправо */
  padding-left: 10px;
  padding-right: 10px;
}
.tr-currency-table td.num {
  text-align: right;
  padding-left: 60px; /* +50px к колонке слева от цифры */
  padding-right: 10px;
}
/* суммы категории и итого — один размер цифр; отступы категории — из td.num (60px/10px) */
.tr-currency-table .tr-currency-type td.num,
.tr-currency-table .tr-currency-grand td.num {
  font-size: calc(1em + 2pt);
}
.tr-currency-table .tr-currency-type {
  cursor: pointer;
}
.tr-currency-table .tr-currency-type td {
  font-weight: 700;
  background: color-mix(in srgb, var(--chip-bg) 55%, #fafafa);
}
.tr-currency-table .tr-currency-type-name-cell {
  user-select: text;
  cursor: inherit;
}
.tr-currency-table .tr-currency-type-name {
  user-select: text;
  text-transform: uppercase;
}
.tr-currency-table .tr-currency-type-toggle {
  display: inline-block;
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-muted) 73%, white);
  font: inherit;
  font-size: calc(1em - 2pt);
  font-weight: 700;
  line-height: 1;
  cursor: inherit;
  pointer-events: none;
  user-select: none;
  vertical-align: baseline;
}
.tr-currency-table .tr-currency-type-toggle::before {
  content: "▼";
}
.tr-currency-table .tr-currency-type.is-collapsed .tr-currency-type-toggle::before,
.tr-currency-table .tr-currency-all-toggle[aria-expanded="false"] .tr-currency-type-toggle::before {
  content: "▶";
}
.tr-currency-table .tr-currency-all-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}
.tr-currency-table .tr-currency-all-toggle .tr-currency-type-toggle {
  cursor: inherit;
}
.tr-currency-table .tr-currency-row td:first-child {
  padding-left: 28px;
}
.tr-currency-table.is-tech .tr-currency-row td:first-child {
  padding-left: 8px;
  padding-right: 8px;
}
.tr-currency-table.is-tech .tr-currency-row td:nth-child(2) {
  padding-left: 28px;
}
.tr-currency-table .tr-currency-row td.num {
  text-align: right;
  position: relative;
}
.tr-currency-table .tr-currency-row.is-avg-check td.num {
  /* полоса перекрывает 1px сетки (right/top/bottom: -1px) */
  border-right-color: transparent;
}
.tr-currency-stripe {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 10px;
  box-sizing: border-box;
  /* 4px зелёная полоса поверх правой границы ячейки — вплотную к краю таблицы */
  border-right: 4px solid var(--tr-stripe, #22c55e);
  cursor: help;
  z-index: 2;
}
.tr-currency-stripe::after {
  content: attr(data-tip);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
}
.tr-currency-stripe:hover::after,
.tr-currency-stripe:focus-visible::after {
  opacity: 1;
}
.tr-currency-table .tr-currency-grand td {
  font-weight: 700;
  background: #1e2124;
  color: #fff;
  border-color: #1e2124;
}
.tr-currency-table .tr-currency-grand td:first-child {
  border-bottom-left-radius: 4px;
}
.tr-currency-table .tr-currency-grand td:last-child {
  border-bottom-right-radius: 4px;
}
.tr-currency-table .tr-currency-grand td.tr-currency-grand-label {
  text-align: right;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: normal;
}
.tr-currency-table .tr-currency-grand td.num {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.tr-currency-network {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 680px;
  padding: 18px;
}
.tr-currency-network-label {
  font-weight: 700;
  font-size: 13px;
}
.tr-currency-network-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.tr-analytics-footer {
  text-align: right;
  color: color-mix(in srgb, var(--text-secondary) 85%, black);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tr-currency-empty {
  margin: 8px 0 0;
  font-size: 13px;
}
.reports-table-placeholder {
  display: grid;
  gap: 10px;
}
.reports-table-placeholder-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.reports-table-skeleton {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.reports-skel-row {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--chip-bg), var(--surface-glass-strong), var(--chip-bg));
  background-size: 200% 100%;
  animation: metric-shimmer 1.4s infinite linear;
}
.reports-sample-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--attention) 40%, var(--border-subtle));
  background: color-mix(in srgb, var(--attention) 12%, var(--surface-glass));
  color: var(--text-secondary);
  font-size: .84rem;
  line-height: 1.4;
}
.reports-sample-banner strong {
  color: var(--attention);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reports-table-wrap {
  overflow: auto;
  margin-top: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.reports-data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.reports-data-table tfoot td {
  font-weight: 700;
  background: color-mix(in srgb, var(--chip-bg) 55%, transparent);
}
.reports-data-table th,
.reports-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.reports-data-table th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--chip-bg) 80%, var(--surface-glass));
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}
.reports-data-table tr.is-alt td {
  background: color-mix(in srgb, var(--chip-bg) 45%, transparent);
}
.reports-data-table .is-left { text-align: left; }
.reports-data-table .is-right { text-align: right; font-variant-numeric: tabular-nums; }
.reports-data-table tfoot td {
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--nav-active) 35%, transparent);
  border-bottom: 0;
}

/* Shared report table chrome — thead + Итого (parity with .tr-currency-table, not applied to it) */
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
}
.rpt-table th,
.rpt-table td {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 85%, #e5e7eb);
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  position: static;
  background: transparent;
  white-space: normal;
  box-sizing: border-box;
}
.rpt-table th {
  background: color-mix(in srgb, var(--chip-bg) 88%, #f3f4f6);
  font-weight: 600;
  color: var(--text-primary);
}
.rpt-table thead th {
  text-align: center;
  background: color-mix(in srgb, var(--chip-bg) 82%, var(--border-subtle));
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}
.rpt-table th.num,
.rpt-table td.num {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rpt-table thead th.num {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.rpt-table td.num {
  text-align: right;
}
.rpt-table .rpt-grand-row td {
  font-weight: 700;
  background: #1e2124;
  color: #fff;
  border-color: #1e2124;
}
.rpt-table th.rpt-sortable {
  cursor: pointer;
  user-select: none;
}
.rpt-table th.rpt-sortable:hover {
  color: var(--text-primary);
}
.rpt-table th.rpt-sortable::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  margin-left: 0.25em;
  opacity: 0.35;
}
.rpt-table th.rpt-sortable.is-sorted {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.rpt-table th.rpt-sortable.is-sorted::after {
  opacity: 0.85;
}
.rpt-table th.rpt-sortable.is-sorted-asc::after { content: "▲"; }
.rpt-table th.rpt-sortable.is-sorted-desc::after { content: "▼"; }
.rpt-table .rpt-grand-row td.rpt-grand-label {
  text-align: right;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: normal;
}
.rpt-table .rpt-grand-row td.num {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
}
.rpt-table thead th:first-child {
  border-top-left-radius: 4px;
}
.rpt-table thead th:last-child {
  border-top-right-radius: 4px;
}
.rpt-table .rpt-grand-row td:first-child {
  border-bottom-left-radius: 4px;
}
.rpt-table .rpt-grand-row td:last-child {
  border-bottom-right-radius: 4px;
}

/* Shared clip + 4px radius (parity with .tr-currency-wrap / valuty3) */
.rpt-table-wrap,
.mkup-wrap,
.dwtr-wrap,
.ddel-wrap {
  overflow: hidden;
  border: none;
  border-radius: 4px;
}
.reports-table-wrap.rpt-table-wrap {
  overflow: hidden;
  border: none;
  border-radius: 4px;
}

.usage-report-table td {
  font-size: .78rem;
  max-width: 220px;
  word-break: break-word;
}
.usage-viewport {
  color: var(--text-secondary);
  font-size: .7rem;
}

.settings-backdrop {
  position: fixed;
  inset: 0;
  background: hsl(220 20% 10% / .28);
  backdrop-filter: blur(2px);
  z-index: 90;
}
.settings-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(360px, 92vw);
  height: 100vh;
  z-index: 100;
  padding: 20px 18px;
  border-radius: 0 18px 18px 0;
  overflow-y: auto;
}
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.settings-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.settings-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-secondary);
}
.settings-close:hover { background: var(--chip-bg); color: var(--text-primary); }
.settings-intro {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.45;
}
.settings-field {
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
}
.settings-field-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}
.settings-label {
  font-size: .9rem;
  font-weight: 600;
}
.settings-value {
  font-size: .88rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dual-range {
  display: grid;
  gap: 10px;
}
.dual-range input[type="range"] {
  width: 100%;
  accent-color: var(--nav-active-bar);
}
.range-slider {
  position: relative;
  height: 28px;
  margin: 4px 0 2px;
}
.range-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: var(--border-subtle);
  pointer-events: none;
}
.range-slider-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--range-left, 0%);
  width: var(--range-width, 0%);
  border-radius: 999px;
  background: var(--ok);
}
.range-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  border: 2px solid var(--nav-active-bar);
  box-shadow: 0 1px 3px hsl(220 20% 20% / .18);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.range-slider input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  border: 2px solid var(--nav-active-bar);
  box-shadow: 0 1px 3px hsl(220 20% 20% / .18);
  cursor: pointer;
  pointer-events: auto;
}
.range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}
.range-slider input[type="range"]:nth-of-type(1) { z-index: 3; }
.range-slider input[type="range"]:nth-of-type(2) { z-index: 4; }
.settings-actions {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 8px;
}
.settings-save {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
  background: var(--ok);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
}
.settings-save:hover {
  filter: brightness(1.06);
}
.settings-save:focus-visible {
  outline: 2px solid var(--ok);
  outline-offset: 2px;
}
.settings-reset {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--chip-bg);
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 600;
}
.settings-reset:hover {
  border-color: var(--focus);
  background: var(--surface-glass-strong);
}
.settings-scale-hint {
  margin-top: 8px;
  font-size: .76rem;
  color: var(--text-muted);
}

.main {
  display: flex;
  flex-direction: column;
  padding: 0 28px 48px;
  min-width: 0;
}

/* Alerts page: fill viewport below chrome; scroll lives in the list, not the page. */
.app:has(#viewAlerts.alerts-page:not([hidden])),
.app:has(#viewInsights.insights-page:not([hidden])) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.main:has(#viewAlerts.alerts-page:not([hidden])),
.main:has(#viewInsights.insights-page:not([hidden])) {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 16px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 -28px 14px;
  padding: 12px 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding-bottom: 1px;
}
/* Heading band grid — 4×3 (placeholders keep empty slots):
   R1 (20px): breadcrumbs↕ | ph-a2 | ph-a3
   R2 (20px): breadcrumbs↕ | period↕ | resto↕   (heading spans R1–R2 = 40px;
   R3 (20px): ph-c1 | period↕ | resto↕           period & resto span R2–R3 = 40px)
   R4 (auto): ph-d1 | group (chips) | ph-d3
   Col1 is max-content (≥200px) so crumbs stay on one line and expand width. */
.page-heading-band {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 20px 20px 20px auto;
  grid-template-areas:
    "heading ph-a2  ph-a3"
    "heading period resto"
    "ph-c1   period resto"
    "ph-d1   group  ph-d3";
  column-gap: 12px;
  row-gap: 0;
  align-items: stretch;
  justify-items: stretch;
  min-width: 0;
  width: 100%;
}
.page-heading-band > * {
  margin-top: 0;
  margin-bottom: 0;
}
.page-heading-band .page-heading-group {
  margin-top: 5px;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.page-heading-band .page-heading-group .guest-group-filter:not([hidden]),
.page-heading-band .page-heading-group .guest-group-filter-inner {
  align-items: flex-start;
  text-align: left;
}
.page-heading-band .page-heading-group .guest-group-filter-inner {
  gap: 0; /* tighter label → chips than default 6px */
}
.page-heading-band .page-heading-group .guest-group-label {
  text-align: left;
}
/* Restaurant chart breakdown shares guest-group structure in the group cell */
.page-heading-band .page-heading-group #granularityWrap:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.page-heading-band .page-heading-group #granularityWrap[hidden] {
  display: none !important;
}
/* Collapse grouping row when both filters are hidden (CEO dashboard, most reports) */
.page-heading-band:not(:has(#guestCountGroupFilter:not([hidden]), #granularityWrap:not([hidden]))) {
  grid-template-rows: 20px 20px 20px 0;
}
.page-heading-band:not(:has(#guestCountGroupFilter:not([hidden]), #granularityWrap:not([hidden]))) .page-heading-group,
.page-heading-band:not(:has(#guestCountGroupFilter:not([hidden]), #granularityWrap:not([hidden]))) .page-heading-ph-d1,
.page-heading-band:not(:has(#guestCountGroupFilter:not([hidden]), #granularityWrap:not([hidden]))) .page-heading-ph-d3 {
  display: none;
  margin: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}
.page-heading-ph {
  min-height: 0;
  min-width: 0;
  pointer-events: none; /* placeholders must never steal clicks from period/resto */
}
.page-heading-group {
  grid-area: group;
  min-width: 0;
  width: 100%;
}
.page-heading-group:has(.guest-group-filter:not([hidden])) {
  min-height: 1.5rem;
}
.page-heading-ph-c1 {
  min-height: 0; /* do not exceed the 20px grid row */
}
.page-heading-ph-a2 { grid-area: ph-a2; }
.page-heading-ph-a3 { grid-area: ph-a3; }
.page-heading-ph-c1 { grid-area: ph-c1; }
.page-heading-ph-d1 { grid-area: ph-d1; }
.page-heading-ph-d3 { grid-area: ph-d3; }
.page-heading {
  grid-area: heading;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
  box-sizing: border-box;
  height: 40px;
  max-height: 40px;
  min-width: 200px;
  width: max-content;
  max-width: none;
  overflow: visible;
}
/* Period + resto: same 40px box (grid R2+R3 = 20+20). Only alignment differs.
   overflow must stay visible so date/resto popovers are clickable and not clipped. */
.page-heading-band .topbar-period-stack,
.page-heading-band .page-heading-period,
.page-heading-band .reports-toolbar-cluster,
.page-heading-band .reports-resto-combine,
.page-heading-band .page-heading-resto {
  display: flex !important; /* keep 40px slot even when filters hidden (overrides display:none) */
  flex-direction: column;
  flex-wrap: nowrap;
  box-sizing: border-box;
  height: 40px !important;
  max-height: 40px !important;
  min-height: 40px !important;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  gap: 0;
  overflow: visible;
  align-self: stretch;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.page-heading-band .topbar-period-stack,
.page-heading-band .page-heading-period {
  grid-area: period;
  justify-self: stretch;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.page-heading-band .reports-toolbar-cluster,
.page-heading-band .reports-resto-combine,
.page-heading-band .page-heading-resto {
  grid-area: resto;
  justify-self: stretch; /* same column footprint as period; content aligns left */
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.page-heading-band .page-heading-resto .reports-resto-combine-row {
  flex-wrap: nowrap;
  align-items: center;
  max-height: 40px;
  min-height: 0;
  overflow: visible;
  gap: 8px 12px;
}
.page-heading-band .page-heading-resto .reports-resto-filter,
.page-heading-band .page-heading-resto .reports-combine-filter {
  align-self: center;
  max-height: none;
}
.page-heading-band .page-heading-resto .reports-resto-filter,
.page-heading-band .page-heading-resto .reports-resto-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: max-content;
}
.page-heading-band .date-filter {
  flex: 0 1 auto;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  z-index: 6;
  pointer-events: auto;
}
.breadcrumbs-host {
  min-width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
}
.breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: max-content;
  white-space: nowrap;
  overflow: visible;
}
.breadcrumbs-sep {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  user-select: none;
}
.breadcrumbs-item {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 550;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  flex: 0 0 auto;
}
.breadcrumbs-item:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumbs-item.is-current {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: default;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.page-title[hidden] {
  display: none !important;
}
.page-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: .84rem;
}
.page-sub[hidden] {
  display: none !important;
}
.settings-role-field {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.settings-role-hint {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.4;
}
.settings-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.settings-role-label {
  display: grid;
  gap: 6px;
  min-width: 140px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.settings-select {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-primary);
  font: inherit;
}
.granularity-wrap-inner {
  display: grid;
  gap: 4px;
  justify-items: end;
}
.granularity-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.granularity {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  gap: 2px;
}
.granularity-btn {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.granularity-btn:hover { color: var(--text-primary); background: var(--chip-bg); }
.granularity-btn.is-active {
  color: var(--text-primary);
  background: var(--surface-glass-strong);
  box-shadow: 0 1px 2px hsl(220 20% 20% / .08);
}

.resto-card {
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.resto-card:hover {
  /* Same subtle shift as .alert-row hover — see shared CEO card lift */
  transform: translateY(-1px);
  z-index: 1;
}
.resto-card:focus-visible {
  outline: none;
  z-index: 1;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--focus) 72%, var(--border-subtle));
  background: color-mix(in srgb, var(--focus) 8%, var(--surface-glass));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 55%, transparent);
}
.resto-card:focus-visible::before {
  width: 5px;
}

.resto-alerts-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  border-width: 1px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.resto-alerts-in-metrics {
  min-height: 0;
  max-height: none;
}
.resto-alerts-in-metrics .alert-card-head {
  margin-bottom: 6px;
}
.resto-alerts-in-metrics .alert-card-title-wrap {
  align-items: center;
  gap: 8px;
}
.resto-alerts-in-metrics .alert-card-status-mark {
  width: 8px;
  height: 8px;
  margin-top: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.resto-alerts-in-metrics.status-attention .alert-card-status-mark {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--attention) 18%, transparent);
}
.resto-alerts-in-metrics.status-critical .alert-card-status-mark {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 18%, transparent);
}
.resto-alerts-in-metrics .alert-card-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
.resto-alerts-in-metrics .alert-card-titles .section-title {
  font-size: .88rem;
  line-height: 1.2;
}
.resto-alerts-in-metrics .alert-card-titles .section-sub {
  margin: 0;
  font-size: .72rem;
  line-height: 1.2;
}
.resto-alerts-in-metrics .alert-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.resto-alerts-in-metrics .alert-list-scroll--resto {
  max-height: none;
  overflow: auto;
}
.resto-alerts-in-metrics .alert-list {
  gap: 4px;
}
.resto-alerts-in-metrics .alert-row {
  gap: 8px;
  padding: 4px 8px 4px 0;
  border-radius: 8px;
}
.resto-alerts-in-metrics .alert-row-body {
  gap: 1px;
  padding: 0;
}
.resto-alerts-in-metrics .alert-row-rail {
  border-radius: 8px 0 0 8px;
}
.resto-alerts-in-metrics .alert-row-top {
  gap: 6px;
  margin-bottom: 0;
}
.resto-alerts-in-metrics .alert-badge,
.resto-alerts-in-metrics .alert-row-time {
  font-size: .64rem;
  line-height: 1.2;
}
.resto-alerts-in-metrics .alert-row-desc {
  font-size: .74rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resto-alerts-in-metrics .alert-summary-line {
  margin: 4px 0 0;
  font-size: .68rem;
  flex: 0 0 auto;
}
.resto-alerts-card.is-clear {
  max-height: none;
  min-height: 0;
  padding: 6px 12px;
}
.resto-alerts-card.is-clear .alert-card-head {
  margin-bottom: 0;
}
.resto-alerts-card.is-clear .alert-list-scroll--resto {
  display: none;
}
.resto-alerts-in-metrics .section-sub.is-status-ok {
  color: var(--ok);
  font-weight: 700;
}
.resto-alerts-in-metrics.status-ok .alert-card-status-mark {
  animation: alert-pulse-ok 1.6s ease-in-out infinite;
}
@keyframes alert-pulse-ok {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .resto-alerts-in-metrics.status-ok .alert-card-status-mark { animation: none; }
}
.alert-summary-line {
  margin: 6px 0 0;
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.resto-alerts-card.status-ok {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border-subtle));
  background: color-mix(in srgb, #fff 10%, color-mix(in srgb, var(--ok) 7%, var(--alert-surface)));
}
.resto-alerts-card.status-attention {
  border-color: color-mix(in srgb, var(--attention) 58%, var(--border-subtle));
  background: color-mix(in srgb, #fff 10%, color-mix(in srgb, var(--attention) 8%, var(--alert-surface)));
}
.resto-alerts-card.status-critical {
  border-color: color-mix(in srgb, var(--critical) 58%, var(--border-subtle));
  background: color-mix(in srgb, #fff 10%, color-mix(in srgb, var(--critical) 7%, var(--alert-surface)));
}

.resto-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.resto-dynamics-card {
  grid-column: auto;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 360px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.resto-dynamics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
  flex: 0 0 auto;
}
.resto-dynamics-head > div {
  min-width: 0;
  flex: 1 1 auto;
}
.resto-dynamics-head .section-title {
  overflow-wrap: break-word;
  line-height: 1.25;
  font-size: 1rem;
}
.resto-dynamics-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-secondary);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.legend-swatch.fact { background: #45689A; }
.legend-swatch.plan {
  background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  border: 0;
}
.legend-swatch.prev {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-primary);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--text-primary),
    var(--text-primary) 1px,
    transparent 1px,
    transparent 3px
  );
}
.resto-dynamics-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.resto-dynamics-legend-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: .78rem;
  color: var(--text-secondary);
}
.dynamics-compare {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.dynamics-compare input {
  accent-color: var(--nav-active-bar);
}
.card-cta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--nav-active-bar);
  padding: 4px 0;
}
.card-cta:hover { text-decoration: underline; }
.insights-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.insight-cell {
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--chip-bg) 80%, transparent);
  border: 1px solid var(--border-subtle);
  cursor: default;
  transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.insight-cell-title {
  margin: 0 0 4px;
  font-size: .84rem;
  font-weight: 650;
  color: var(--text-primary);
}
.insight-cell-body {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: none;
}
.insight-cell:hover {
  background: var(--surface-glass-strong);
  border-color: color-mix(in srgb, var(--focus) 35%, var(--border-subtle));
  box-shadow: var(--shadow-soft);
}
.insight-cell:hover .insight-cell-body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.resto-insights-card .insights-badge {
  margin-bottom: 10px;
}
.resto-dynamics-body {
  flex: 1 1 auto;
  min-height: 220px;
  min-width: 0;
  display: grid;
  overflow: hidden;
}
.revenue-dynamics-chart {
  width: 100%;
  height: 100%;
  min-height: 220px;
  min-width: 0;
}

.restaurant-metric-card {
  --metric-period-cols: minmax(76px, 1.3fr) minmax(48px, 0.8fr) minmax(48px, 0.8fr);
  --metric-row-h: 44px;
  --metric-row-gap: 8px;
  --metric-controls-h: 29px;
  --metric-controls-mb: 8px;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  overflow: hidden;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: metric-card;
}
.metric-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  min-height: 28px;
  min-width: 0;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.metric-card-title {
  margin: 0;
  color: var(--text-primary);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.metric-info {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-muted) 55%, transparent);
  border-radius: 50%;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
}
.metric-info:hover {
  color: var(--text-primary);
  border-color: var(--focus);
}
.metric-info:focus-visible,
.metric-segment:focus-visible,
.metric-retry:focus-visible,
.trend-indicator:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.period-stat-table,
.average-check-panel {
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.period-stat-header,
.period-stat-row,
.average-check-row {
  display: grid;
  grid-template-columns: var(--metric-period-cols);
  gap: 6px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.period-stat-header,
.period-stat-row {
  text-align: center;
}
.period-stat-header,
.metric-segmented {
  height: var(--metric-controls-h);
  min-height: var(--metric-controls-h);
  margin-bottom: var(--metric-controls-mb);
  flex: 0 0 auto;
}
.period-stat-header {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--chip-bg);
  color: var(--text-secondary);
  font-size: .72rem;
}
.period-stat-header > *,
.period-stat-row > *,
.average-check-row > * {
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.period-stat-header > * + *,
.period-stat-row > * + * {
  border-left: 1px solid var(--border-subtle);
}
.period-stat-rows,
.average-check-rows {
  display: grid;
  gap: var(--metric-row-gap);
  align-content: start;
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.period-stat-row,
.average-check-row {
  height: var(--metric-row-h);
  min-height: var(--metric-row-h);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-glass);
  color: var(--text-primary);
  box-sizing: border-box;
}
.period-stat-row.is-current,
.average-check-row.is-current {
  background: color-mix(in srgb, var(--nav-active) 78%, var(--surface-glass));
  border-color: color-mix(in srgb, var(--focus) 25%, var(--border-subtle));
}
.period-stat-period {
  color: var(--text-secondary);
  font-size: .72rem;
  white-space: nowrap;
}
.period-stat-row strong {
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}

.metric-segmented {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border-radius: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--border-subtle);
}
.metric-segment {
  min-width: 0;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 600;
}
.metric-segment.is-active {
  background: var(--surface-glass-strong);
  color: var(--text-primary);
  box-shadow: 0 1px 3px hsl(220 20% 20% / .10);
}
.average-check-period {
  justify-self: start;
  text-align: left;
  padding-left: 12px;
  padding-right: 4px;
  color: var(--text-secondary);
  font-size: .68rem;
  line-height: 1.2;
  white-space: nowrap;
}
.average-check-value {
  justify-self: center;
  text-align: center;
  padding-left: 4px;
  padding-right: 14px;
  color: var(--text-primary);
  font-size: .94rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.average-check-row .trend-indicator {
  justify-self: end;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.trend-indicator {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: .62rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend-indicator--up { color: var(--positive); }
.trend-indicator--down { color: var(--critical); }
.trend-indicator--flat { color: var(--text-muted); }
.trend-indicator--empty { min-height: 14px; }
.trend-arrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

.metric-state,
.metric-skeleton {
  min-height: 294px;
}
.metric-state {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: .8rem;
  text-align: center;
}
.metric-retry {
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--chip-bg);
  color: var(--text-primary);
  font-weight: 600;
}
.metric-skeleton {
  display: grid;
  align-content: start;
  gap: 7px;
}
.metric-skeleton-row {
  height: 39px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--chip-bg), var(--surface-glass-strong), var(--chip-bg));
  background-size: 200% 100%;
  animation: metric-shimmer 1.4s infinite linear;
}
@keyframes metric-shimmer {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .metric-skeleton-row { animation: none; }
}

.resto-insights-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}
.resto-insights-cta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.insights-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nav-active-bar);
  margin-bottom: 8px;
}
.insights-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}
.insights-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: .88rem;
  line-height: 1.5;
}
.insights-meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: .76rem;
  color: var(--text-muted);
}

.date-filter { position: relative; }
.date-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.date-nav-btn {
  width: 32px;
  height: 32px;
  padding: 0 0 5px; /* optical lift: ‹ › baseline sits low */
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-secondary);
  font-size: 2.3rem; /* 0.92rem × 2.5 */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.date-nav-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--focus);
}
.date-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(440px, 68vw);
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 14px;
  border-radius: 0;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  box-sizing: border-box;
}
.date-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .7;
}
.date-pill #datePillLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-pill:hover { border-color: var(--focus); }
.date-popover {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  width: min(420px, 92vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 94%, white 6%);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  z-index: 40;
}
html[data-theme="light"] .date-popover {
  background: hsl(0 0% 100% / .97);
}
html[data-theme="dark"] .date-popover {
  background: hsl(220 18% 13% / .97);
}
.date-presets { display: grid; gap: 12px; }
.date-preset-group-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.date-preset-grid {
  display: grid;
  gap: 6px;
}
.date-preset-grid--frequent {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.date-preset-grid--calendar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.preset-btn {
  display: grid;
  gap: 1px;
  text-align: left;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-primary);
  background: transparent;
  font-size: .8rem;
}
.preset-btn small {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 500;
}
.preset-btn:hover { background: var(--chip-bg); color: var(--text-primary); }
.preset-btn.is-active {
  background: var(--nav-active);
  color: var(--text-primary);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--focus) 28%, transparent);
}
.date-cal {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
}
.date-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.date-cal-head strong {
  font-size: .86rem;
  text-transform: capitalize;
}
.date-cal-nav {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--text-secondary);
}
.date-cal-nav:hover { background: var(--chip-bg); color: var(--text-primary); }
.date-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: .68rem;
  text-align: center;
}
.date-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: .78rem;
  color: var(--text-primary);
}
.date-cal-day.is-empty { visibility: hidden; }
.date-cal-day:hover:not(:disabled) { background: var(--chip-bg); }
.date-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--focus); }
.date-cal-day.is-in-range { background: color-mix(in srgb, var(--focus) 16%, transparent); }
.date-cal-day.is-edge {
  background: var(--focus);
  color: white;
  font-weight: 700;
}
.date-cal-day:disabled {
  opacity: .35;
  cursor: default;
}
.custom-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.date-field {
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: .82rem;
}
.date-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-primary);
}
.apply-range-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--nav-active);
  color: var(--text-primary);
  font-weight: 600;
}
.date-custom-error {
  margin: 8px 0 0;
  color: var(--critical);
  font-size: .78rem;
}
.date-range-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: .82rem;
}
.date-compare-hint {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.35;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  align-items: stretch;
}
.kpi-card {
  --kpi-viz-w: 100px;
  --kpi-viz-h: 66px;
  --kpi-foot-h: 36px;
  padding: 10px 11px;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kpi-viz-w);
  grid-template-rows: auto;
  grid-template-areas: "top viz";
  gap: 4px 6px;
  cursor: default;
  position: relative;
  align-items: start;
  box-sizing: border-box;
}
.kpi-card.is-clickable {
  cursor: pointer;
}
.kpi-card.is-clickable:hover {
  border-color: color-mix(in srgb, var(--focus) 42%, var(--border-subtle));
}
.kpi-card.is-clickable:focus-visible {
  outline: none;
  z-index: 1;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--focus) 72%, var(--border-subtle));
  background: color-mix(in srgb, var(--focus) 8%, var(--surface-glass));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--focus) 55%, transparent),
    0 12px 28px color-mix(in srgb, var(--focus) 18%, transparent);
}
.kpi-grid.has-kpi-foot .kpi-card {
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "top viz"
    "foot foot";
  overflow: hidden;
}
.kpi-card.has-spark-legend {
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "top viz"
    "foot foot";
}
.kpi-card-top {
  grid-area: top;
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
}
.kpi-card-viz {
  grid-area: viz;
  width: var(--kpi-viz-w);
  height: var(--kpi-viz-h);
  justify-self: end;
  align-self: start;
  display: grid;
  place-items: center end;
}
.kpi-card-foot {
  grid-area: foot;
  min-height: 0;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.kpi-card-foot:empty {
  min-height: var(--kpi-foot-h);
}
.kpi-card-foot--legend {
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  padding-top: 1px;
}
.kpi-grid.has-kpi-foot .kpi-card-foot--legend {
  min-height: var(--kpi-foot-h);
}
.kpi-spark-legend {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-size: .6rem;
  line-height: 1;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .02em;
  user-select: none;
}
.kpi-spark-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.kpi-spark-legend-line {
  display: block;
  width: 36px;
  height: 8px;
  overflow: visible;
  flex: 0 0 auto;
}
.kpi-spark-legend-line.is-fact {
  color: var(--nav-active-bar);
}
.kpi-spark-legend-line.is-plan {
  color: var(--kpi-spark-plan);
  opacity: var(--kpi-spark-plan-opacity);
}
.kpi-card .kpi-spark {
  width: 100%;
  height: 100%;
}
.kpi-spark .kpi-spark-plan {
  stroke: var(--kpi-spark-plan);
  stroke-opacity: var(--kpi-spark-plan-opacity);
}
.kpi-card .kpi-label { margin: 0; }
.kpi-radial {
  width: 100%;
  height: 100%;
}
.kpi-radial svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kpi-gauge-alert {
  width: 100%;
  flex: 1 1 auto;
  margin: 0;
  padding: 4px 8px;
  border-radius: 0;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-muted) 28%, transparent);
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.3;
  font-weight: 550;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-width: 0;
}
.kpi-gauge-alert.is-active {
  background: color-mix(in srgb, var(--attention) 14%, transparent);
  border-color: color-mix(in srgb, var(--attention) 35%, transparent);
  color: var(--text-primary);
  cursor: help;
}
.kpi-value.zone-gray { color: var(--zone-gray); }
.kpi-value.zone-green { color: var(--zone-green); }
.kpi-value.zone-yellow { color: var(--zone-yellow); }
.kpi-value.zone-red { color: var(--zone-red); }
.network-summary {
  display: grid;
  grid-template-columns: minmax(200px, 0.75fr) minmax(280px, 1.15fr) minmax(280px, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}

.glass-card {
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.glass-card:hover {
  border-color: color-mix(in srgb, var(--focus) 35%, var(--border-subtle));
}
/*
 * Shared CEO / network card lift — MUST follow .glass-card:hover.
 * Match scrolling alert rows: subtle translateY only (no --shadow-lift).
 */
.resto-card:hover,
.kpi-card:hover,
.kpi-card.is-clickable:hover,
.health-card:hover,
.waterfall-card:hover,
.alert-detail-card.is-clickable:not(.alerts-page-card):hover {
  transform: translateY(-1px);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .resto-card:hover,
  .resto-card:focus-visible,
  .kpi-card:hover,
  .kpi-card.is-clickable:hover,
  .kpi-card.is-clickable:focus-visible,
  .health-card:hover,
  .waterfall-card:hover,
  .alert-detail-card.is-clickable:not(.alerts-page-card):hover,
  .alert-detail-card.is-clickable:not(.alerts-page-card):focus-visible,
  .alert-row:not(.is-static):hover,
  .alert-row:not(.is-static):focus-visible,
  .report-card.is-active,
  .report-card:focus-visible {
    transform: none;
  }
}
.kpi-scale {
  width: 100%;
  height: 36px;
}
.kpi-scale svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kpi-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: .68rem;
  color: var(--text-muted);
}
.kpi-label {
  font-size: calc(.72rem + 2px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted) 90%, #000);
  font-weight: 600;
}
.kpi-value {
  margin-top: 2px;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.kpi-value-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin-top: 2px;
  min-width: 0;
}
.kpi-value-line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.kpi-value-stack .kpi-value {
  margin-top: 0;
}
.kpi-value--guest {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text-secondary);
}
.kpi-value-unit {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
}
.kpi-extra {
  margin-top: 2px;
  font-size: .78rem;
  color: var(--text-secondary);
}
.kpi-compare {
  margin-top: 1px;
  font-size: .74rem;
  color: var(--text-muted);
}
.delta-pos { color: var(--positive); }
.delta-neg { color: var(--negative); }
.delta-warn { color: var(--attention); }
.kpi-spark { align-self: center; width: 64px; height: 34px; }
.kpi-spark svg { width: 100%; height: 100%; overflow: visible; }

.health-card,
.waterfall-card,
.alert-detail-card {
  padding: 16px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
/*
 * CEO «Активные алерты»: match sibling card height via grid stretch.
 * List is out of flow (absolute in .alert-list-slot) so it cannot inflate the card;
 * the slot flex-grows to fill leftover space — no white gap under the scroll.
 */
.alert-detail-card:not(.alerts-page-card) {
  position: relative;
  height: auto;
  min-height: 360px;
  overflow: hidden;
  align-self: stretch;
}
.alert-detail-card:not(.alerts-page-card) .alert-card-head,
.alert-detail-card:not(.alerts-page-card) .alert-pills {
  flex: 0 0 auto;
}
.alert-detail-card:not(.alerts-page-card) .alert-list-slot {
  flex: 1 1 auto;
  min-height: 248px;
  position: relative;
  /* no in-flow list content — height comes from flex stretch only */
}
.alert-detail-card:not(.alerts-page-card) .alert-list-slot .alert-list-scroll {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}
.alerts-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.alerts-page[hidden],
.insights-page[hidden] {
  display: none !important;
}
.alerts-page-card {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.insights-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
}
.insights-page-card {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 20px 22px 24px;
  text-align: left;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.insights-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.insights-page-title {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--text-primary);
}
.insights-page-meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.4;
}
.insights-page-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.45;
}
.insights-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  align-content: start;
}
.insights-page-grid .insight-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
}
.insights-page-grid .insight-cell-body {
  -webkit-line-clamp: 4;
  flex: 1;
}
.insights-page-grid .insight-cell.is-ok {
  border-color: color-mix(in srgb, var(--ok, #2f9e44) 28%, var(--border-subtle));
}
.insights-page-grid .insight-cell.is-attention {
  border-color: color-mix(in srgb, var(--warn, #e67700) 32%, var(--border-subtle));
}
.insights-page-grid .insight-cell.is-critical {
  border-color: color-mix(in srgb, var(--danger, #c92a2a) 36%, var(--border-subtle));
}
.insights-page-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: .92rem;
}
.insights-page-skeleton {
  display: contents;
}
.insight-skel {
  pointer-events: none;
  min-height: 108px;
  gap: 10px;
}
.insight-skel-line {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--chip-bg), var(--surface-glass-strong), var(--chip-bg));
  background-size: 200% 100%;
  animation: metric-shimmer 1.4s infinite linear;
}
.insight-skel-title {
  height: 16px;
  width: 62%;
}
.insight-skel-short {
  width: 48%;
}
@media (prefers-reduced-motion: reduce) {
  .insight-skel-line { animation: none; }
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.help-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 700;
  flex: 0 0 28px;
}
.help-btn:hover,
.help-btn.is-open {
  background: var(--chip-bg);
  color: var(--text-primary);
  border-color: var(--focus);
}
.help-popover {
  position: absolute;
  top: 44px;
  right: 16px;
  width: min(360px, calc(100% - 32px));
  max-height: 320px;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  z-index: 20;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.help-popover[hidden] { display: none; }
.help-popover h3 {
  margin: 0 0 8px;
  font-size: .92rem;
  color: var(--text-primary);
}
.help-popover p {
  margin: 0 0 10px;
}
.help-popover p:last-child { margin-bottom: 0; }
.waterfall-card {
  position: relative;
}
.waterfall-card > .section-head {
  margin-bottom: 4px; /* was 12 via .section-head — tighter title → chart */
}
.resto-waterfall-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 360px;
  padding: 12px 14px;
  box-sizing: border-box;
  overflow: hidden;
}
.resto-waterfall-card .waterfall-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.resto-waterfall-card .waterfall-warning {
  margin-top: auto;
  flex: 0 0 auto;
}
/* Bar value labels: 2pt smaller than the SVG default (16.5px) on restaurant view only */
.resto-waterfall-card .wf-value {
  font-size: calc(16.5px - 2pt);
}
.section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.section-sub {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: .84rem;
}
.health-card > .section-head {
  align-items: baseline;
}
.health-asof {
  margin: 0 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
}
.health-layout {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding-top: 4px;
}
.donut-wrap {
  position: relative;
  width: 198px;
  height: 198px;
  margin: 0 auto;
}
.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 5px;
}
.donut-legend-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 1px 4px;
  margin: 0 -4px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.donut-legend-item.is-hovered {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--text-primary);
}
.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.donut-legend-label {
  min-width: 0;
  color: var(--text-primary);
  font-weight: 550;
}
.donut-legend-count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.donut-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.donut-track { stroke-width: 24; }
.donut-segment {
  stroke-width: 24;
  transition: stroke-width .18s var(--ease), opacity .18s var(--ease);
  cursor: pointer;
}
.donut-wrap:hover .donut-segment { opacity: 0.72; }
.donut-wrap .donut-segment.is-hovered {
  opacity: 1;
  stroke-width: 30;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.donut-total {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
.donut-caption {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: .8rem;
}
.waterfall-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* was center — remove spare gap under title */
  min-height: 0;
}
.waterfall-chart {
  width: 100%;
  height: auto;
  min-height: 276px; /* was 240 (+15%) */
  max-height: 322px; /* was 280 (+15%) */
}
.wf-bar {
  cursor: pointer;
  transition: opacity .15s var(--ease);
}
.wf-bar:hover { opacity: 0.88; }
.waterfall-empty,
.waterfall-warning {
  color: var(--text-secondary);
  font-size: .86rem;
  padding: 12px 8px 4px;
  text-align: center;
}
.waterfall-warning {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.4;
}
.waterfall-warning strong {
  color: var(--text-primary);
  font-weight: 700;
}
.wf-mtd {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

@media (max-width: 900px) {
  .waterfall-chart .wf-axis { display: none; }
}

.alert-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  margin-bottom: 14px;
}
.alert-total {
  font-size: 1.7rem;
  font-weight: 700;
}
.alert-meta {
  color: var(--text-secondary);
  font-size: .9rem;
}
.alert-card-head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.alert-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-card-status-mark {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent);
}
.status-attention .alert-card-status-mark {
  background: var(--attention);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--attention) 18%, transparent);
}
.status-critical .alert-card-status-mark {
  background: var(--critical);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--critical) 18%, transparent);
  animation: alert-pulse 1.6s ease-in-out infinite;
}
@keyframes alert-pulse {
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--critical) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .status-critical .alert-card-status-mark { animation: none; }
}
.alert-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.alert-pill {
  display: grid;
  gap: 1px;
  padding: 8px 8px 7px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  text-align: center;
}
button.alert-pill {
  width: 100%;
  cursor: pointer;
}
button.alert-pill:hover,
button.alert-pill:focus-visible {
  border-color: color-mix(in srgb, var(--focus) 42%, var(--border-subtle));
  outline: none;
}
button.alert-pill:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 40%, transparent);
}
.alert-pill.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 45%, transparent);
  border-color: color-mix(in srgb, var(--focus) 55%, var(--border-subtle));
}
.alert-pill--critical.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--critical) 42%, transparent);
  border-color: color-mix(in srgb, var(--critical) 62%, var(--border-subtle));
}
.alert-pill--attention.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--attention) 42%, transparent);
  border-color: color-mix(in srgb, var(--attention) 62%, var(--border-subtle));
}
.alert-pill-n {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.alert-pill-l {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.alert-pill--critical {
  border-color: color-mix(in srgb, var(--critical) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-glass));
}
.alert-pill--critical .alert-pill-n { color: var(--critical); }
.alert-pill--attention {
  border-color: color-mix(in srgb, var(--attention) 35%, var(--border-subtle));
  background: color-mix(in srgb, var(--attention) 8%, var(--surface-glass));
}
.alert-pill--attention .alert-pill-n { color: var(--attention-text); }
.alert-list-scroll {
  flex: 1;
  min-height: 0;
  max-height: 248px;
  overflow-y: auto;
  padding-right: 2px;
}
.alert-list-scroll--resto {
  max-height: none;
}
.alerts-page-card .alert-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.alert-list {
  display: grid;
  gap: 8px;
}
.alert-list-scroll::-webkit-scrollbar {
  width: 6px;
}
.alert-list-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  border-radius: 999px;
}
.alert-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  padding: 10px 10px 10px 0;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--alert-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.alert-row.is-static {
  cursor: default;
  grid-template-columns: 4px minmax(0, 1fr);
}
.alert-row:not(.is-static):hover,
.alert-row:not(.is-static):focus-visible {
  border-color: color-mix(in srgb, var(--focus) 40%, var(--border-subtle));
  background: color-mix(in srgb, #fff 5%, var(--chip-bg));
  outline: none;
  transform: translateY(-1px);
}
.alert-row-rail {
  border-radius: 12px 0 0 12px;
  background: var(--text-muted);
}
.alert-row.critical .alert-row-rail { background: var(--critical); }
.alert-row.attention .alert-row-rail { background: var(--attention); }
.alert-row-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0 0 0 2px;
}
.alert-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.alert-badge {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.alert-badge.critical { color: var(--critical); }
.alert-badge.attention { color: var(--attention-text); }
.alert-row-time {
  color: var(--text-muted);
  font-size: .72rem;
  white-space: nowrap;
}
.alert-row-name {
  font-weight: 650;
  font-size: .9rem;
  color: var(--text-primary);
  line-height: 1.25;
}
.alert-row-desc {
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.alert-row.has-detail {
  flex-direction: column;
  align-items: stretch;
}
.alert-detail-toggle {
  margin-top: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
}
.alert-detail-toggle:hover,
.alert-detail-toggle:focus-visible {
  text-decoration: underline;
}
.alert-detail-panel {
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.alert-detail-title {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.alert-detail-grid {
  display: grid;
  gap: 0.35rem;
}
.alert-detail-row {
  display: grid;
  grid-template-columns: minmax(7rem, 38%) 1fr;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.alert-detail-key {
  color: var(--text-muted);
}
.alert-detail-val {
  color: var(--text-primary);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  word-break: break-word;
}
.alert-row-go {
  align-self: center;
  color: var(--text-muted);
  font-size: 1.25rem;
  padding: 0 4px;
}
.alert-row.is-actions {
  grid-template-columns: 4px minmax(0, 1fr) auto;
  cursor: default;
}
.alert-row.is-actions:hover,
.alert-row.is-actions:focus-visible {
  transform: none;
}
.alert-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  align-self: center;
  padding-right: 2px;
}
.alert-dismiss {
  border: 1px solid var(--border-subtle);
  background: var(--chip-bg);
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.alert-dismiss:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--focus) 35%, var(--border-subtle));
  color: var(--text-primary);
}
.alert-dismiss:disabled {
  opacity: .55;
  cursor: default;
}
.alert-row-open {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.alert-row-open:hover {
  color: var(--text-primary);
}
.alert-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: .84rem;
}
.alert-empty strong {
  color: var(--text-primary);
  font-size: .95rem;
}
.alert-empty-icon {
  position: relative;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ok) 55%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.alert-empty-icon::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 9px;
  width: 9px;
  height: 15px;
  border: solid var(--ok);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.alerts-page {
  background: var(--alert-page-bg);
}
.alert-detail-card,
.alerts-page-card {
  background: var(--alert-surface);
}
.alert-list,
.alert-list-scroll {
  background: var(--alert-surface);
}
.alert-detail-card.status-ok,
.alert-detail-card.status-attention,
.alert-detail-card.status-critical {
  border-color: color-mix(in srgb, var(--border-subtle) 70%, transparent);
}
.alert-detail-card.status-ok {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border-subtle));
}
.alert-detail-card.status-attention {
  border-color: color-mix(in srgb, var(--attention) 42%, var(--border-subtle));
}
.alert-detail-card.status-critical {
  border-color: color-mix(in srgb, var(--critical) 42%, var(--border-subtle));
}
.alert-detail-card.is-clickable:not(.alerts-page-card) {
  cursor: pointer;
}
.alert-detail-card.is-clickable:not(.alerts-page-card):hover {
  border-color: color-mix(in srgb, var(--focus) 42%, var(--border-subtle));
}
.alert-detail-card.is-clickable:not(.alerts-page-card):focus-visible {
  outline: none;
  z-index: 1;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--focus) 72%, var(--border-subtle));
  background: color-mix(in srgb, var(--focus) 8%, var(--surface-glass));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--focus) 55%, transparent),
    0 12px 28px color-mix(in srgb, var(--focus) 18%, transparent);
}
.alert-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--alert-surface);
  border: 1px solid var(--border-subtle);
}
.alert-item.is-clickable {
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.alert-item.is-clickable:hover,
.alert-item.is-clickable:focus-visible {
  border-color: color-mix(in srgb, var(--focus) 40%, var(--border-subtle));
  background: color-mix(in srgb, #fff 5%, var(--chip-bg));
  outline: none;
}
.alert-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.alert-item-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.alert-item-cat.critical { color: var(--critical); }
.alert-item-cat.attention { color: var(--attention-text); }
.alert-item-desc {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: .84rem;
}
.alert-item-duration {
  color: var(--text-muted);
  font-size: .76rem;
}

.filters { margin: 8px 0 16px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-row-sep {
  align-self: stretch;
  width: 1px;
  margin: 2px 4px;
  background: var(--border-subtle);
  flex: 0 0 1px;
}
.filter-sort-group {
  display: contents;
}
.filter-chip {
  padding: 8px 14px;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: .9rem;
}
.filter-chip:hover { color: var(--text-primary); border-color: var(--focus); }
.filter-chip.is-active {
  background: var(--nav-active);
  color: var(--text-primary);
  border-color: transparent;
  text-decoration: underline;
}
.filter-chip--sort {
  font-variant-numeric: tabular-nums;
}

.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.resto-card {
  position: relative;
  padding: 16px 16px 14px 18px;
  overflow: hidden;
}
.resto-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--status-color, var(--ok));
}
.resto-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.resto-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.resto-city {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: .86rem;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--status-text, var(--status-color));
  white-space: nowrap;
}
.block-label {
  margin-top: 14px;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.revenue-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}
.revenue-main { font-size: 1.15rem; font-weight: 700; }
.metrics-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.metric-cell .m-label {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.metric-cell .m-value {
  margin-top: 4px;
  font-weight: 650;
  font-size: .98rem;
}
.metric-cell .m-sub {
  margin-top: 2px;
  font-size: .78rem;
  color: var(--text-secondary);
}
.chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-size: .75rem;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.chip.critical { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.chip.attention { color: var(--attention-text); border-color: color-mix(in srgb, var(--attention) 35%, transparent); }

.tooltip {
  position: fixed;
  z-index: 100;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.tooltip.is-interactive,
.tooltip.is-pinned {
  pointer-events: auto;
}
.tooltip.is-pinned {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border-subtle));
}
.health-card.is-tip-pinned {
  outline: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border-subtle));
}
.tooltip .tt-health-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
/* Sector-only tip: first section is the whole content — no spacer line above the list. */
.tooltip > .tt-health-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.tooltip .tt-resto-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow: auto;
}
.tooltip .tt-resto-name {
  padding: 2px 0;
  color: var(--text-primary);
  cursor: default;
}
.tt-cat.no-data { color: var(--no-data); }
.tooltip .tt-title {
  font-weight: 650;
  margin-bottom: 4px;
}
.tooltip .tt-sub {
  margin: 0 0 8px;
  font-size: .74rem;
  color: var(--text-muted);
}
.tooltip .tt-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-secondary);
}
.tooltip .tt-row strong { color: var(--text-primary); font-weight: 600; }
.tooltip .tt-trend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.tooltip .tt-trend-label {
  margin-bottom: 6px;
  font-size: .74rem;
  color: var(--text-muted);
}
.tooltip .waiter-detail-sparkline {
  width: 100%;
  height: 56px;
  color: #45689A;
}
.tooltip .tt-muted {
  margin: 0;
  color: var(--text-muted);
  font-size: .78rem;
}
.tooltip .tt-food-disclaimer {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
}
.tooltip .tt-alert {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.tooltip .tt-alert:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.tt-cat { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tt-cat.critical { color: var(--critical); }
.tt-cat.attention { color: var(--attention-text); }

.resto-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.resto-metrics-grid > * {
  min-width: 0;
  width: 100%;
  height: 100%;
}
.resto-metrics-grid .restaurant-metric-card,
.resto-metrics-grid .markup-card,
.resto-metrics-grid .discounts-card,
.resto-metrics-grid .resto-alerts-card {
  min-height: 300px;
  height: 100%;
}

.discounts-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  min-height: 300px;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  container-type: inline-size;
  container-name: discounts-card;
}
.discount-card-head {
  margin-bottom: 12px;
  min-width: 0;
  flex: 0 0 auto;
}
.discount-card-head .section-title {
  overflow-wrap: break-word;
  line-height: 1.25;
  font-size: .98rem;
}
.discount-card-head .section-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.discount-card-body {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  min-width: 0;
}
.discount-bars {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
.discount-bar-row {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) minmax(44px, 1.2fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.discount-bar-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.discount-bar-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-bg) 80%, transparent);
  overflow: hidden;
  min-width: 0;
}
.discount-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #45689A 55%, white),
    #45689A 72%,
    color-mix(in srgb, #45689A 80%, #2f4a6e)
  );
  min-width: 4px;
  transition: width .35s var(--ease);
}
.discount-bar-value {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.discount-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  min-width: 0;
}
.discount-summary-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}
.discount-summary-share {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
  white-space: nowrap;
}
.discount-summary-label {
  color: var(--text-secondary);
  font-size: .82rem;
}
.discount-summary-amount {
  margin-left: auto;
  font-size: .95rem;
  font-weight: 650;
  color: var(--text-primary);
  white-space: nowrap;
}
.discount-meta {
  color: var(--text-secondary);
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discount-meta.is-muted { color: var(--text-muted); }
.discount-meta.is-bad { color: var(--critical); }
.discount-meta.is-good { color: var(--ok); }
.discount-state {
  color: var(--text-secondary);
  font-size: .9rem;
  padding: 8px 0 4px;
}
.discount-card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  flex: 0 0 auto;
  min-width: 0;
}
.markup-card {
  min-width: 0;
  width: 100%;
  min-height: 300px;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  container-type: inline-size;
  container-name: markup-card;
}
.markup-card-head {
  margin-bottom: 12px;
  min-height: 0;
  min-width: 0;
  flex: 0 0 auto;
}
.markup-card .section-title {
  margin: 0 0 2px;
  font-size: .98rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.markup-card .section-sub {
  margin: 0;
  font-size: .72rem;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.markup-rows {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  min-width: 0;
}
.markup-row {
  display: grid;
  grid-template-columns: 10px minmax(52px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
}
.markup-row:hover,
.markup-row:focus-visible {
  background: color-mix(in srgb, var(--chip-bg) 88%, transparent);
  outline: none;
}
.markup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 70%, transparent);
}
.markup-row.tone-ok .markup-dot {
  background: color-mix(in srgb, var(--positive, #2f9e64) 85%, white);
}
.markup-row.tone-warn .markup-dot,
.markup-row.tone-warn .markup-delta {
  color: var(--attention);
}
.markup-row.tone-warn .markup-dot {
  background: var(--attention);
}
.markup-row.tone-critical .markup-dot,
.markup-row.tone-critical .markup-delta {
  color: var(--critical);
}
.markup-row.tone-critical .markup-dot {
  background: var(--critical);
}
.markup-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.markup-value {
  font-size: .98rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  justify-self: end;
  white-space: nowrap;
}
.markup-delta {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
  min-width: 0;
}
.markup-insight {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  min-height: 28px;
  min-width: 0;
  font-size: .78rem;
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.markup-insight-text {
  font-weight: 600;
  color: var(--text-primary);
}
.markup-insight-sep {
  color: var(--text-muted);
}
.markup-cta.card-cta,
.markup-insight .card-cta {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .78rem;
  color: var(--focus, #45689a);
  cursor: pointer;
}
.markup-state {
  display: grid;
  gap: 8px;
  align-content: center;
  flex: 1;
  min-height: 140px;
  color: var(--text-secondary);
  font-size: .84rem;
}
.markup-skel {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--chip-bg) 70%, transparent),
    color-mix(in srgb, var(--chip-bg) 95%, white),
    color-mix(in srgb, var(--chip-bg) 70%, transparent)
  );
  background-size: 200% 100%;
  animation: markupSkel 1.2s ease-in-out infinite;
}
.markup-skel-title { height: 18px; width: 78%; margin-bottom: 8px; }
.markup-skel-sub { height: 12px; width: 62%; margin-bottom: 14px; }
.markup-skel-row { height: 34px; margin-bottom: 6px; }
.markup-skel-foot { height: 16px; width: 70%; margin-top: auto; }
@keyframes markupSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.settings-markup-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.settings-markup-row .settings-select {
  width: 100%;
}

.resto-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.resto-people-grid > .resto-waiters-card,
.resto-people-grid > .cash-discipline-card {
  min-width: 0;
  width: 100%;
  height: 100%;
  align-self: stretch;
}
.resto-lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.resto-lower-grid > .resto-abc-card,
.resto-lower-grid > .topsales-card {
  min-width: 0;
  width: 100%;
  height: 100%;
  align-self: stretch;
}
.resto-insights-row {
  margin-bottom: 12px;
}
.resto-insights-row .resto-insights-card {
  height: auto;
  min-height: 0;
}
.resto-waiters-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
}
.cash-discipline-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: cash-card;
}

.cash-card-head {
  margin-bottom: 8px;
  min-width: 0;
  flex: 0 0 auto;
}
.cash-card-head .section-title {
  font-size: .98rem;
  line-height: 1.25;
}
.cash-card-head .section-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cash-card-body--ceo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.cash-overview-ceo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}
.cash-overview-side {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  width: 100%;
}
.cash-donut-wrap {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0;
  flex: 0 0 auto;
}
.cash-donut {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
}
.cash-donut-track {
  stroke: color-mix(in srgb, var(--text-muted) 22%, transparent);
}
.cash-donut-seg {
  cursor: default;
  transition: stroke-width .18s var(--ease), opacity .18s var(--ease);
}
.cash-donut-wrap:hover .cash-donut-seg { opacity: .72; }
.cash-donut-wrap .cash-donut-seg.is-dimmed { opacity: .55; }
.cash-donut-wrap .cash-donut-seg.is-hovered {
  opacity: 1;
  stroke-width: 20;
}
.cash-donut-seg--cancellation { stroke: var(--attention); }
.cash-donut-seg--refund { stroke: var(--critical); }
.cash-donut-seg--writeoff { stroke: var(--focus); }
.cash-donut-center {
  position: absolute;
  inset: 22%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1px;
  pointer-events: none;
}
.cash-donut-center strong {
  font-size: .8rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cash-donut-center span {
  color: var(--text-secondary);
  font-size: .62rem;
  line-height: 1.15;
}
.cash-meta-line {
  text-align: left;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  flex: 0 0 auto;
}
.cash-meta-line.is-bad { color: var(--critical); }
.cash-meta-line.is-good { color: var(--ok); }
.cash-meta-line.is-muted {
  color: var(--text-muted);
  font-weight: 500;
}
.cash-legend-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
}
.cash-legend-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 4px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font-size: .74rem;
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
  transition: background .15s var(--ease);
}
.cash-legend-row.is-hovered {
  background: color-mix(in srgb, var(--focus) 8%, transparent);
}
.cash-legend-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cash-legend-name i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.cash-legend-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}
.cash-legend-amount {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: right;
}
.cash-legend-row--cancellation .cash-legend-name { color: var(--attention); }
.cash-legend-row--refund .cash-legend-name { color: var(--critical); }
.cash-legend-row--writeoff .cash-legend-name { color: var(--focus); }
.cash-attention {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.cash-attention > h3 {
  margin: 0;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.cash-attention-list {
  display: grid;
  gap: 6px;
  align-content: start;
  flex: 1 1 auto;
  min-width: 0;
}
.cash-attention-row {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-primary);
  text-align: left;
  cursor: default;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cash-attention-row:hover {
  border-color: color-mix(in srgb, var(--focus) 55%, var(--border-subtle));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 6%, transparent);
  z-index: 1;
}
.cash-attention-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cash-attention-who {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.cash-attention-rank {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: .78rem;
  flex: 0 0 auto;
}
.cash-attention-who strong {
  font-size: .84rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cash-attention-amount {
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.cash-attention-checks {
  color: var(--text-muted);
  font-size: .7rem;
  line-height: 1.25;
}
.cash-attention-signal {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  min-width: 0;
}
.cash-attention-risk {
  font-size: .7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}
.cash-attention-rest,
.cash-attention-empty {
  color: var(--text-muted);
  font-size: .76rem;
  padding: 4px 2px;
  line-height: 1.35;
}
.cash-report-cta { margin-top: 0; }
.cash-card-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.cash-state {
  display: grid;
  gap: 8px;
  min-height: 100px;
  place-content: center;
  color: var(--text-secondary);
  font-size: .84rem;
  text-align: center;
  padding: 12px;
}
.cash-card-body--lpc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.cash-lpc-note,
.cash-lpc-thresholds {
  margin: 0;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.cash-lpc-table-wrap {
  overflow: auto;
  min-width: 0;
  max-height: 260px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.cash-lpc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .72rem;
  line-height: 1.3;
}
.cash-lpc-table th,
.cash-lpc-table td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  vertical-align: top;
}
.cash-lpc-table th {
  position: sticky;
  top: 0;
  background: var(--surface-glass-strong);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  z-index: 1;
}
.cash-lpc-table th.is-right,
.cash-lpc-table td.is-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cash-lpc-table tbody tr:last-child td {
  border-bottom: none;
}
.cash-lpc-table td.is-left {
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cash-skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--chip-bg), var(--surface-glass-strong), var(--chip-bg));
  background-size: 200% 100%;
  animation: cash-skel 1.2s ease infinite;
}
.cash-skel-title { height: 22px; width: 55%; margin-bottom: 8px; }
.cash-skel-donut { width: 116px; height: 116px; border-radius: 50%; margin: 0 auto; }
.cash-skel-line { height: 28px; margin-bottom: 6px; }
@keyframes cash-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@container cash-card (max-width: 499px) {
  .cash-overview-ceo {
    grid-template-columns: minmax(0, 1fr);
  }
  .cash-meta-line { text-align: left; }
}

.resto-abc-card {
  margin-bottom: 0;
  padding: 16px;
  height: 100%;
  box-sizing: border-box;
}

/* —— Топ продаж —— */
.topsales-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: topsales;
}
.topsales-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}
.topsales-head-main { min-width: 0; }
.topsales-card-head .section-title {
  font-size: .98rem;
  line-height: 1.25;
}
.topsales-card-head .section-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topsales-metric-wrap,
.topsales-select-wrap {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
}
.topsales-select {
  max-width: 100%;
  min-width: 0;
  padding: 4px 26px 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-primary);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.topsales-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.topsales-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}
.topsales-back {
  display: none;
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-secondary);
  font: inherit;
  font-size: .72rem;
  font-weight: 650;
  cursor: pointer;
}
.topsales-breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  font-size: .74rem;
  line-height: 1.3;
  color: var(--text-secondary);
}
.topsales-crumb {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topsales-crumb.is-link {
  color: var(--nav-active-bar);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nav-active-bar) 35%, transparent);
  text-underline-offset: 2px;
}
.topsales-crumb.is-current {
  color: var(--text-primary);
  font-weight: 650;
}
.topsales-crumb-sep {
  color: var(--text-muted);
  flex: 0 0 auto;
}
.topsales-fallback {
  margin: 0 0 8px;
  color: var(--attention);
  font-size: .76rem;
}
.topsales-latest-note {
  margin-top: 2px;
  color: var(--muted);
}
.topsales-list {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}
.topsales-row {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.topsales-row:hover,
.topsales-row:focus-visible {
  border-color: color-mix(in srgb, var(--focus) 45%, var(--border-subtle));
  outline: none;
}
.topsales-row-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.topsales-rank {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.topsales-name {
  min-width: 0;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topsales-row-barline {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.topsales-bar-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  overflow: hidden;
  min-width: 0;
  width: 100%;
}
.topsales-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--focus) 75%, var(--nav-active-bar));
}
.topsales-row-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--text-secondary);
}
.topsales-primary {
  color: var(--text-primary);
  font-weight: 700;
}
.topsales-share {
  color: var(--text-muted);
  font-weight: 600;
}
.topsales-concentration {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: .74rem;
  line-height: 1.35;
}
.topsales-card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.topsales-state {
  color: var(--text-muted);
  font-size: .84rem;
  padding: 12px 2px;
}
.topsales-skel {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-muted) 10%, transparent) 0%,
    color-mix(in srgb, var(--text-muted) 18%, transparent) 50%,
    color-mix(in srgb, var(--text-muted) 10%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: metric-shimmer 1.2s linear infinite;
}
.topsales-skel-title { height: 18px; width: 42%; margin-bottom: 6px; }
.topsales-skel-select { height: 28px; width: 120px; }
.topsales-skel-crumb { height: 14px; width: 55%; margin-bottom: 10px; }
.topsales-skel-row { height: 44px; margin-bottom: 6px; }
.topsales-skel-line { height: 14px; width: 70%; margin-top: 8px; }

@container topsales (max-width: 420px) {
  .topsales-row:nth-child(n + 4) { display: none; }
  .topsales-share { display: none; }
  .topsales-selectors { flex-direction: column; }
  .topsales-select { width: 100%; }
}
@media (max-width: 700px) {
  .topsales-back { display: inline-flex; }
  .topsales-breadcrumb .topsales-crumb:not(.is-current):not(:nth-last-child(3)) {
    display: none;
  }
  .topsales-breadcrumb .topsales-crumb-sep:not(:nth-last-child(2)) {
    display: none;
  }
}

.abc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.abc-fallback {
  margin: 0 0 10px;
  color: var(--attention);
  font-size: .82rem;
}
.abc-ceo-insight {
  margin-bottom: 12px;
}
.abc-ceo-insight-main {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.abc-ceo-insight-meta {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: .84rem;
}
.abc-ceo-bars {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.abc-ceo-bar-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
}
.abc-ceo-bar-letter {
  font-weight: 700;
  font-size: .9rem;
}
.abc-ceo-bar-row--A .abc-ceo-bar-letter,
.abc-ceo-bar-row--A .abc-ceo-bar-pct { color: var(--ok); }
.abc-ceo-bar-row--B .abc-ceo-bar-letter,
.abc-ceo-bar-row--B .abc-ceo-bar-pct { color: var(--attention); }
.abc-ceo-bar-row--C .abc-ceo-bar-letter,
.abc-ceo-bar-row--C .abc-ceo-bar-pct { color: var(--text-secondary); }
.abc-ceo-bar-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  overflow: hidden;
}
.abc-ceo-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.abc-ceo-bar-row--A .abc-ceo-bar-track i { background: var(--ok); }
.abc-ceo-bar-row--B .abc-ceo-bar-track i { background: var(--attention); }
.abc-ceo-bar-row--C .abc-ceo-bar-track i { background: var(--text-muted); }
.abc-ceo-bar-pct {
  text-align: right;
  font-size: .92rem;
}
.abc-ceo-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.abc-ceo-action {
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--chip-bg) 80%, transparent);
  border: 1px solid var(--border-subtle);
  min-height: 100%;
  cursor: help;
}
.abc-ceo-action[data-abc-action]:hover,
.abc-ceo-action[data-abc-action]:focus-visible {
  border-color: color-mix(in srgb, var(--focus) 45%, var(--border-subtle));
  outline: none;
}
.abc-ceo-action-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.abc-ceo-action-body {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.abc-ceo-action-meta {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--text-secondary);
}
.abc-ceo-action--protect {
  border-color: color-mix(in srgb, var(--critical) 28%, var(--border-subtle));
}
.abc-ceo-action--protect .abc-ceo-action-title { color: var(--critical); }
.abc-ceo-action--grow {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--border-subtle));
}
.abc-ceo-action--grow .abc-ceo-action-title { color: var(--ok); }
.abc-ceo-action--review {
  border-color: color-mix(in srgb, var(--attention) 28%, var(--border-subtle));
}
.abc-ceo-action--review .abc-ceo-action-title { color: var(--attention); }
.abc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.abc-state,
.abc-empty {
  display: grid;
  min-height: 72px;
  place-items: center;
  color: var(--text-secondary);
  font-size: .8rem;
  text-align: center;
}

.waiter-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.waiter-latest-note {
  margin: 2px 0 0;
  font-size: .72rem;
}
.waiter-threshold-label {
  display: grid;
  gap: 5px;
  min-width: 190px;
  color: var(--text-secondary);
  font-size: .75rem;
}
.waiter-threshold-select {
  width: 100%;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--surface-glass-strong);
  color: var(--text-primary);
  font: inherit;
}
.waiter-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 6px 0 8px;
}
.waiter-summary > span,
.waiter-detail-hero > span,
.waiter-detail-stats > span {
  display: grid;
  gap: 1px;
  padding: 4px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--chip-bg);
  min-width: 0;
}
.waiter-summary small,
.waiter-detail-hero small,
.waiter-detail-stats small {
  color: var(--text-muted);
  font-size: .58rem;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waiter-summary strong { font-size: .78rem; line-height: 1.15; }
.waiter-zones {
  display: grid;
  gap: 0;
  min-width: 0;
}
.waiter-zone-heads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.waiter-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 6px 10px 5px;
}
.waiter-zone-head > strong {
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .02em;
}
.waiter-zone-head--top {
  border-radius: 10px 10px 0 0;
  border: 1px solid color-mix(in srgb, var(--ok) 34%, var(--border-subtle));
  border-bottom: 0;
  background: color-mix(in srgb, var(--ok) 5%, transparent);
}
.waiter-zone-head--top > strong {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--ok));
}
.waiter-zone-head--growth {
  border-radius: 10px 10px 0 0;
  border: 1px solid color-mix(in srgb, var(--attention) 38%, var(--border-subtle));
  border-bottom: 0;
  background: color-mix(in srgb, var(--attention) 6%, transparent);
}
.waiter-zone-head--growth > strong {
  color: color-mix(in srgb, var(--text-primary) 82%, var(--attention));
}
.waiter-zone-head > span {
  color: var(--text-muted);
  font-size: .68rem;
  text-align: right;
}
.waiter-zone-head > span:empty {
  display: none;
}
.waiter-rank-pairs {
  display: grid;
  gap: 6px;
}
.waiter-rank-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.waiter-rank-pair:first-child .waiter-rank-row--top,
.waiter-rank-pair:first-child .waiter-rank-row--growth {
  border-top: 0;
  border-radius: 0;
}
.waiter-rank-pair:last-child .waiter-rank-row--top,
.waiter-rank-pair:last-child .waiter-rank-row--growth {
  border-radius: 0 0 12px 12px;
}
.waiter-rank-pair:not(:first-child):not(:last-child) .waiter-rank-row--top,
.waiter-rank-pair:not(:first-child):not(:last-child) .waiter-rank-row--growth {
  border-radius: 9px;
}
.waiter-rank-row {
  width: 100%;
  height: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  text-align: left;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
  box-sizing: border-box;
}
.waiter-rank-row--top {
  border-color: color-mix(in srgb, var(--ok) 34%, var(--border-subtle));
  border-top-color: color-mix(in srgb, var(--ok) 18%, var(--border-subtle));
  background: color-mix(in srgb, var(--ok) 5%, var(--surface-glass));
}
.waiter-rank-row--growth {
  border-color: color-mix(in srgb, var(--attention) 38%, var(--border-subtle));
  border-top-color: color-mix(in srgb, var(--attention) 18%, var(--border-subtle));
  background: color-mix(in srgb, var(--attention) 6%, var(--surface-glass));
}
.waiter-rank-row--empty {
  visibility: hidden;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
}
.waiter-rank-row:hover {
  border-color: var(--focus);
  transform: translateY(-1px);
}
.waiter-rank-main,
.waiter-rank-result {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.waiter-rank-result {
  justify-items: end;
  font-variant-numeric: tabular-nums;
}
.waiter-rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .84rem;
}
.waiter-rank-volume,
.waiter-rank-potential {
  color: var(--text-muted);
  font-size: .68rem;
  min-height: 1em;
}
.waiter-rank-potential { color: var(--attention); }
.waiter-rank-potential--spacer {
  visibility: hidden;
  color: transparent;
}
.waiter-rank-result strong { font-size: .88rem; }
.waiter-rank-result span { font-size: .7rem; }
.waiter-zone-empty,
.waiter-zones-empty,
.waiter-card-empty {
  padding: 18px 10px;
  color: var(--text-secondary);
  font-size: .82rem;
  text-align: center;
}
.waiter-excluded {
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  flex-shrink: 0;
}
.waiter-excluded summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  user-select: none;
}
.waiter-excluded summary::-webkit-details-marker { display: none; }
.waiter-excluded summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: .7;
  transition: transform .15s var(--ease);
}
.waiter-excluded[open] summary::before {
  transform: rotate(90deg);
}
.waiter-excluded summary span {
  margin-left: 2px;
  color: var(--text-muted);
  font-weight: 500;
}
.waiter-excluded-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
}
.waiter-excluded-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
  gap: 3px 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--chip-bg);
  text-align: left;
}
.waiter-excluded-row span,
.waiter-excluded-row small {
  color: var(--text-muted);
  font-size: .7rem;
}
.waiter-excluded-row small { grid-column: 2; }
.waiter-no-data-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: .8rem;
}
.waiter-no-data-actions button {
  color: var(--nav-active-bar);
  font-weight: 700;
}
.waiter-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: hsl(220 20% 10% / .32);
  backdrop-filter: blur(2px);
}
.waiter-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 140;
  width: min(430px, 94vw);
  height: 100vh;
  overflow-y: auto;
  padding: 18px;
  border-radius: 18px 0 0 18px;
  background: var(--surface-glass-strong);
}
.waiter-detail-backdrop[hidden],
.waiter-detail-panel[hidden] { display: none; }
.has-waiter-drawer { overflow: hidden; }
.waiter-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.waiter-detail-kicker {
  margin: 0 0 4px;
  color: var(--nav-active-bar);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.waiter-detail-title { margin: 0; font-size: 1.25rem; }
.waiter-detail-close {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--chip-bg);
  font-size: 1.3rem;
}
.waiter-detail-hero {
  display: grid;
  gap: 8px;
  margin: 18px 0 10px;
}
.waiter-detail-hero strong { font-size: 1.05rem; }
.waiter-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.waiter-detail-stats strong { font-size: .84rem; }
.waiter-detail-trend {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.waiter-detail-trend h3 { margin: 0 0 8px; font-size: .9rem; }
.waiter-detail-sparkline {
  width: 100%;
  height: 90px;
  color: var(--nav-active-bar);
  overflow: visible;
}
.waiter-threshold-select:focus-visible,
.waiter-rank-row:focus-visible,
.waiter-excluded-row:focus-visible,
.waiter-detail-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Restaurant dashboard: container-based adaptive grids */
.resto-dashboard {
  container-type: inline-size;
  container-name: resto-dash;
  min-width: 0;
}

@container resto-dash (max-width: 1023px) {
  .resto-people-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container resto-dash (max-width: 999px) {
  .resto-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container resto-dash (max-width: 899px) {
  .resto-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .resto-dynamics-head {
    flex-direction: column;
    align-items: stretch;
  }
  .resto-dynamics-head .dynamics-compare {
    margin-top: 4px;
  }
  .resto-lower-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container resto-dash (max-width: 599px) {
  .resto-metrics-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .resto-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container markup-card (max-width: 200px) {
  .markup-row {
    grid-template-columns: 8px minmax(0, 1fr);
    row-gap: 2px;
  }
  .markup-value {
    grid-column: 2;
    justify-self: start;
  }
  .markup-delta {
    grid-column: 2;
    justify-self: start;
  }
}

@container metric-card (max-width: 220px) {
  .restaurant-metric-card {
    --metric-period-cols: minmax(64px, 1.2fr) minmax(40px, 0.9fr) minmax(40px, 0.9fr);
  }
  .period-stat-header {
    font-size: .68rem;
  }
  .period-stat-header,
  .period-stat-row,
  .average-check-row {
    gap: 4px;
  }
}

@media (max-width: 1360px) {
  .main { padding: 0 20px 36px; }
  .topbar {
    margin: 0 -20px 12px;
    padding: 10px 20px;
  }
  .page-heading-band {
    column-gap: 12px;
    row-gap: 0;
  }
  .kpi-card {
    --kpi-viz-w: 92px;
    --kpi-viz-h: 60px;
    --kpi-foot-h: 32px;
    padding: 9px 10px;
  }
  .kpi-value { font-size: 1.12rem; }
  .kpi-value--guest { font-size: 0.84rem; }
  .kpi-value-unit { font-size: 0.62rem; }
  .kpi-extra { font-size: .74rem; }
  .kpi-compare { font-size: .7rem; }
  .kpi-label { font-size: calc(.68rem + 2px); letter-spacing: .06em; }
}
@media (max-width: 1280px) {
  .network-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .section-title { font-size: .95rem; }
  .section-sub { font-size: .78rem; }
}
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .network-summary { grid-template-columns: 1fr 1fr; }
  .alert-detail-card { grid-column: 1 / -1; }
  .cash-card-body { min-height: 0; }
  .abc-ceo-actions { grid-template-columns: 1fr; }
  .reports-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app, .app.is-collapsed { grid-template-columns: 1fr; }
  .app:has(#viewAlerts.alerts-page:not([hidden])) {
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    position: sticky;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .sidebar-head {
    width: auto;
    padding-bottom: 0;
    align-items: center;
    gap: 6px;
  }
  .brand { padding: 0; }
  .nav { flex-direction: row; flex: 1; }
  .sidebar-footer {
    border: 0;
    padding: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    width: auto;
  }
  .sidebar-footer .lang-switcher { width: auto; }
  .sidebar-footer .sidebar-footer-tools {
    width: auto;
    gap: 4px;
  }
  .sidebar-footer .lang-trigger,
  .sidebar-footer .settings-toggle,
  .sidebar-footer .admin-toggle,
  .sidebar-footer .logout-toggle {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .sidebar-footer .theme-toggle {
    width: 65px;
    height: 65px;
    min-height: 65px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .sidebar-footer .theme-label { display: none; }
  .sidebar-footer .lang-menu {
    left: auto;
    right: 0;
    bottom: auto;
    top: calc(100% + 6px);
    min-width: 180px;
  }
  .main { padding: 0 16px 16px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-summary { grid-template-columns: 1fr; }
  .donut-wrap { width: 186px; height: 186px; }
  .custom-range-grid { grid-template-columns: 1fr; }
  .topbar {
    flex-direction: column;
    align-items: stretch;
    margin: 0 -16px 12px;
    padding: 10px 16px;
  }
  .page-heading-band {
    grid-template-columns: 1fr;
    grid-template-rows: 40px auto;
    grid-template-areas:
      "heading"
      "ph-a2"
      "ph-a3"
      "ph-c1"
      "period"
      "resto"
      "ph-d1"
      "group"
      "ph-d3";
    column-gap: 12px;
    row-gap: 0;
  }
  .page-heading,
  .breadcrumbs-host,
  .breadcrumbs {
    min-width: 0;
    max-width: 100%;
  }
  .page-heading {
    height: 40px;
    max-height: 40px;
  }
  .date-pill {
    font-size: .76rem;
    max-width: min(100%, 92vw);
  }
  .topbar-right { justify-content: flex-start; }
  .topbar-period-stack {
    width: 100%;
  }
  .guest-group-chips {
    max-width: 100%;
  }
  .reports-toolbar-cluster,
  .reports-resto-combine {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .page-heading-band .reports-toolbar-cluster,
  .page-heading-band .reports-resto-combine,
  .page-heading-band .page-heading-resto {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    gap: 0;
    overflow: visible;
  }
  .reports-resto-combine-row {
    width: max-content;
    max-width: none;
    gap: 8px 12px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .page-heading-band .page-heading-resto .reports-resto-combine-row {
    align-items: center;
    max-height: 40px;
    overflow: visible;
    flex-wrap: nowrap;
    width: max-content;
  }
  .guest-group-filter:not([hidden]) {
    width: 100%;
  }
  .reports-resto-filter { width: max-content; flex: 0 0 auto; min-width: max-content; max-width: none; }
  .reports-resto-pill {
    width: max-content !important;
    max-width: none !important;
    min-width: max-content;
    justify-content: flex-start;
    white-space: nowrap !important;
  }
  .reports-combine-filter { flex: 0 0 auto; align-self: flex-end; }
  .reports-export { margin-left: 0; width: 100%; justify-content: flex-end; }
}
@media (min-width: 1181px) {
  .resto-metrics-grid > .discounts-card {
    display: flex;
  }
}
@media (max-width: 700px) {
  .abc-card-head { flex-direction: column; }
  .abc-ceo-actions { grid-template-columns: 1fr; }
  .abc-card-foot { flex-direction: column; align-items: stretch; }
  .reports-catalog-grid { grid-template-columns: 1fr; }
  .reports-hub-stack,
  .reports-hub-grid { grid-template-columns: 1fr; }
  .reports-catalog-head,
  .reports-detail-head {
    flex-direction: column;
  }

  /* Phone header: logo + menu ~50% so plaque/nav don’t crush in the bar */
  .sidebar {
    gap: 4px;
    padding: 8px;
  }
  .sidebar-head {
    flex: 0 0 auto;
    max-width: 48%;
  }
  .brand,
  .app.is-collapsed .brand {
    width: auto;
    flex: 0 0 auto;
    max-width: 100%;
    justify-content: flex-start;
  }
  .brand-plaque,
  .app.is-collapsed .brand-plaque {
    width: auto;
    max-width: min(56px, 28vw);
    max-height: 36px;
    height: auto;
    padding: 2px;
    gap: 1px;
    margin-bottom: 0;
    margin-inline: 0;
    overflow: hidden;
    object-fit: contain;
    box-sizing: border-box;
  }
  .brand-plaque-mark,
  .app.is-collapsed .brand-plaque-mark {
    font-size: 0.82rem; /* was 1.64rem collapsed */
    padding: 1px 2px;
    line-height: 1.05;
  }
  .brand-plaque-name,
  .app.is-collapsed .brand-plaque-name {
    font-size: 0.36rem; /* was 0.53rem; −2pt */
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  .nav {
    gap: 2px;
    min-width: 0;
  }
  .app.is-collapsed .nav {
    gap: 2px;
  }
  .app.is-collapsed .nav-block--captioned {
    width: 36px; /* was 72px */
    height: 40px; /* was 80px */
    min-height: 40px;
  }
  .app.is-collapsed .nav-block--captioned:has(.nav-item.is-active)::before {
    top: 3px;
    bottom: 3px;
    width: 3px;
  }
  .app.is-collapsed .nav-item {
    width: 36px;
    height: 40px;
    min-height: 40px;
  }
  .app.is-collapsed .nav > .nav-item.is-active::before {
    top: 5px;
    bottom: 5px;
    width: 3px;
  }
  .app.is-collapsed .nav-item .nav-icon {
    width: 22px; /* was 44px */
    flex: 0 0 22px;
    height: 22px;
  }
  .app.is-collapsed .nav-item .nav-icon svg {
    width: 18px; /* was 36px */
    height: 18px;
  }
  .app.is-collapsed .nav-caption {
    font-size: 0.24rem; /* was 0.48rem */
    padding: 0 1px 1px;
  }
  .app.is-collapsed .nav-caption-line--dash,
  .app.is-collapsed .nav-caption--lg {
    font-size: calc(0.36rem * 0.85); /* was calc(0.72rem * 0.85) */
  }
  .app.is-collapsed .nav-caption-line--ceo {
    font-size: calc(0.48rem * 1.15); /* was calc(0.96rem * 1.15) */
  }

  .sidebar-footer .lang-trigger,
  .sidebar-footer .settings-toggle,
  .sidebar-footer .admin-toggle,
  .sidebar-footer .logout-toggle,
  .app.is-collapsed .settings-toggle,
  .app.is-collapsed .lang-trigger,
  .app.is-collapsed .admin-toggle,
  .app.is-collapsed .sidebar-footer-tools .logout-toggle {
    width: 22px; /* was 44px @≤900px / 36px collapsed */
    height: 22px;
    min-height: 22px;
  }
  .sidebar-footer .theme-toggle,
  .app.is-collapsed .theme-toggle {
    width: 32px; /* was 65px */
    height: 32px;
    min-height: 32px;
  }
  .app.is-collapsed .settings-toggle .nav-icon,
  .app.is-collapsed .lang-trigger .nav-icon,
  .app.is-collapsed .admin-toggle .nav-icon,
  .app.is-collapsed .logout-toggle .nav-icon {
    width: 14px;
    flex: 0 0 14px;
    height: 14px;
  }
  .app.is-collapsed .theme-toggle .nav-icon {
    width: 22px;
    flex: 0 0 22px;
    height: 22px;
  }
  .app.is-collapsed .settings-toggle .nav-icon svg,
  .app.is-collapsed .lang-trigger .nav-icon svg,
  .app.is-collapsed .admin-toggle .nav-icon svg,
  .app.is-collapsed .logout-toggle .nav-icon svg {
    width: 12px;
    height: 12px;
  }
  .app.is-collapsed .theme-icon,
  .theme-icon {
    font-size: 1rem; /* was 2rem */
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 767px) {
  .waiter-zone-heads,
  .waiter-rank-pair { grid-template-columns: 1fr; }
  .waiter-zone-head--top,
  .waiter-zone-head--growth,
  .waiter-rank-row--top,
  .waiter-rank-row--growth,
  .waiter-rank-pair:last-child .waiter-rank-row--top,
  .waiter-rank-pair:last-child .waiter-rank-row--growth {
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
  }
  .waiter-zone-head--top {
    border-color: color-mix(in srgb, var(--ok) 34%, var(--border-subtle));
  }
  .waiter-zone-head--growth {
    border-color: color-mix(in srgb, var(--attention) 38%, var(--border-subtle));
  }
  .waiter-card-head { flex-direction: column; }
  .waiter-threshold-label { width: 100%; }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .waiter-summary { grid-template-columns: 1fr; }
  .waiter-excluded-row { grid-template-columns: 1fr; }
  .waiter-excluded-row small { grid-column: 1; }
  .waiter-detail-panel {
    width: 100vw;
    border-radius: 0;
  }
  .waiter-detail-stats { grid-template-columns: 1fr; }
}

/* —— Local AI bot (dashboard topbar + modal) —— */
.local-ai-bot-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 88%, var(--attention) 12%);
  color: var(--text);
  font: 600 0.82rem/1.2 var(--font-sans);
  letter-spacing: 0.01em;
  padding: 16px 12px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.local-ai-bot-btn:hover {
  border-color: color-mix(in srgb, var(--attention) 45%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-elevated, var(--bg)) 78%, var(--attention) 22%);
}
.local-ai-bot-btn.has-unread {
  border-color: color-mix(in srgb, var(--critical, #c62828) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--critical, #c62828) 28%, var(--bg-elevated, var(--bg)));
  color: color-mix(in srgb, var(--critical, #c62828) 70%, var(--text));
}
.local-ai-bot-btn.has-unread:hover {
  border-color: color-mix(in srgb, var(--critical, #c62828) 70%, var(--border-subtle));
  background: color-mix(in srgb, var(--critical, #c62828) 38%, var(--bg-elevated, var(--bg)));
}
.local-ai-bot-badge[hidden] {
  display: none !important;
}
.local-ai-bot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--critical, #c62828);
  color: #fff;
  font: 700 0.72rem/1 var(--font-sans);
  letter-spacing: 0;
}
.local-ai-bot-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(440px, calc(100vw - 24px));
  width: 100%;
  margin: 0;
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: auto;
  left: auto;
}
.local-ai-bot-dialog::backdrop {
  background: color-mix(in srgb, #0b1220 42%, transparent);
  backdrop-filter: blur(2px);
}
.local-ai-bot-panel {
  display: flex;
  flex-direction: column;
  height: min(560px, calc(100vh - 48px));
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 48px color-mix(in srgb, #000 28%, transparent);
  color: var(--text);
}
.local-ai-bot-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.local-ai-bot-title {
  margin: 0;
  font: 650 1rem/1.25 var(--font-display);
}
.local-ai-bot-sub {
  margin: 2px 0 0;
  font: 400 0.75rem/1.3 var(--font-sans);
  color: var(--text-muted, #6b7280);
}
.local-ai-bot-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.local-ai-bot-close:hover { color: var(--text); }
.local-ai-bot-log {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.laib-msg {
  max-width: 92%;
  padding: 8px 10px;
  font: 400 0.86rem/1.4 var(--font-sans);
  white-space: pre-wrap;
  word-break: break-word;
}
.laib-msg--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--attention) 18%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--attention) 28%, var(--border-subtle));
}
.laib-msg--bot {
  align-self: flex-start;
  background: color-mix(in srgb, var(--bg) 70%, #8892a4 8%);
  border: 1px solid var(--border-subtle);
}
.laib-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.laib-report-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font: 600 0.78rem/1.2 var(--font-sans);
}
.laib-report-link:hover {
  border-color: color-mix(in srgb, var(--attention) 40%, var(--border-subtle));
}
.laib-thinking {
  align-self: flex-start;
  max-width: 92%;
  padding: 8px 10px;
  border: 1px dashed var(--border-subtle);
  font: 400 0.75rem/1.35 var(--font-sans);
  color: var(--text-muted, #6b7280);
}
.laib-thinking-line + .laib-thinking-line { margin-top: 2px; }
.local-ai-bot-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border-subtle);
}
.local-ai-bot-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  font: 400 0.86rem/1.3 var(--font-sans);
  padding: 9px 10px;
}
.local-ai-bot-input:focus {
  outline: 2px solid color-mix(in srgb, var(--attention) 45%, transparent);
  outline-offset: 1px;
}
.local-ai-bot-send {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--attention) 50%, var(--border-subtle));
  background: color-mix(in srgb, var(--attention) 22%, var(--bg));
  color: var(--text);
  font: 650 0.82rem/1.2 var(--font-sans);
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.local-ai-bot-send:disabled {
  opacity: 0.55;
  cursor: default;
}
@media (max-width: 720px) {
  .local-ai-bot-dialog {
    top: 8px;
    right: 8px;
    left: 8px;
    bottom: auto;
    max-width: none;
  }
}