/* Dash automatically serves every file in assets/ - no import needed.

   THEMING: every color below is a token (--ink, --surface, --accent...).
   Light and dark mode just redefine the tokens; Bootstrap, the Dash 4
   components, AG Grid and Plotly charts are all pointed at the same tokens,
   so nothing else has to know which mode is on. The header is always dark. */

/* ── Tokens ────────────────────────────────────────── */
:root, :root[data-bs-theme="light"] {
  --page: #dcdfdf;
  --surface: #ffffff;
  --surface-2: #eef1f0;
  --ink: #1c2423;
  --ink-2: #4a5554;
  --muted: #6f7a79;
  --grid: #d5dad9;
  --axis: #a9b2b1;
  --hover: rgba(35, 43, 42, 0.05);
  --active: rgba(13, 148, 136, 0.12);
  --accent: #17b8a6;                /* the bright teal of the buttons */
  --accent-strong: #13a594;
  --accent-ink: #0f766e;            /* teal text on light backgrounds (darker, to stay readable) */
  --accent-rgb: 23, 184, 166;
  --selected-wash: #dff3f0;
  --good: #15803d;
  --bad: #c62828;
  --warn-bg: #fff8e1;
  --panel-w: 300px;
}

:root[data-bs-theme="dark"] {
  --page: #171c1b;
  --surface: #1f2625;
  --surface-2: #262e2d;
  --ink: #eef3f2;
  --ink-2: #b3bebc;
  --muted: #8a9694;
  --grid: #333d3c;
  --axis: #4a5655;
  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(45, 212, 191, 0.16);
  --accent: #14b8a6;
  --accent-strong: #0d9488;
  --accent-ink: #2dd4bf;
  --accent-rgb: 20, 184, 166;
  --selected-wash: rgba(45, 212, 191, 0.14);
  --good: #4ade80;
  --bad: #f87171;
  --warn-bg: #3a3218;
}

/* The header (or side navigation) is dark charcoal in both modes */
:root { --topbar-bg: #252c2b; }
.topbar {
  --surface: #2d3534;
  --surface-2: #343d3c;
  --ink: #f1f5f4;
  --ink-2: #bcc6c4;
  --muted: #909c9a;
  --grid: #3b4544;
  --axis: #4f5b5a;
  --hover: rgba(255, 255, 255, 0.07);
  --active: rgba(45, 212, 191, 0.18);
  --accent: #14b8a6;
  --accent-strong: #0d9488;
  --accent-ink: #5eead4;
  --accent-rgb: 20, 184, 166;
}

/* Point Bootstrap and the Dash 4 components at the tokens. Declared on every
   element that redefines tokens so the values are recomputed there. */
:root, [data-bs-theme], .topbar {
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--grid);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-link-color: var(--accent-ink);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent-strong);
  --bs-focus-ring-color: rgba(var(--accent-rgb), 0.3);

  --Dash-Fill-Interactive-Strong: var(--accent);
  --Dash-Fill-Inverse-Strong: var(--surface);
  --Dash-Text-Primary: var(--ink);
  --Dash-Text-Strong: var(--ink);
  --Dash-Text-Weak: var(--ink-2);
  --Dash-Text-Disabled: var(--muted);
  --Dash-Stroke-Strong: var(--axis);
  --Dash-Stroke-Weak: var(--grid);
  --Dash-Fill-Primary-Hover: var(--hover);
  --Dash-Fill-Primary-Active: var(--active);
  --Dash-Fill-Interactive-Weak: var(--hover);
  --Dash-Fill-Disabled: var(--hover);
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Bootstrap accent (teal) ───────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-ink); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--active); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--accent-strong);
}
.btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--axis); --bs-btn-hover-bg: var(--hover);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--axis); }
.btn-link { --bs-btn-color: var(--accent-ink); --bs-btn-hover-color: var(--accent-strong); }
.form-check-input:checked { background-color: var(--accent-strong); border-color: var(--accent-strong); }
.form-check-input:focus, .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--accent-strong); }
.text-muted { color: var(--ink-2) !important; }

/* ── Shell: header, then [report title / options / page] ─ */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; min-width: 0; padding: 20px 28px 48px; }

.topbar {
  position: sticky; top: 0; z-index: 1040; height: 56px;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--topbar-bg); color: var(--ink); border-bottom: 1px solid var(--grid);
}
.brand { font-weight: 700; font-size: 1.1rem; color: #fff; text-decoration: none; white-space: nowrap; }
.brand:hover { color: #fff; }
.brand .bi { color: var(--accent-ink); }
.brand-version {
  font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-left: 4px;
  background: rgba(var(--accent-rgb), .2); color: var(--accent-ink); vertical-align: middle;
}
.menu-open { display: none; background: none; border: 0; color: var(--ink); font-size: 1.5rem; padding: 0 4px; }

/* Header menus: Reports / Resources / Contact (assets/ui.js opens them) */
.header-nav { display: flex; align-items: stretch; height: 100%; margin-left: 12px; }
.nav-dd { position: relative; display: flex; }
.nav-dd-toggle {
  display: flex; align-items: center; padding: 0 14px; color: var(--ink-2); background: none; border: 0;
  border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap;
}
.nav-dd-toggle:hover, .nav-dd.open .nav-dd-toggle { color: var(--ink); background: var(--hover); }
.nav-dd-toggle.active { color: var(--ink); border-bottom-color: var(--accent); }
.nav-dd-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 260px; z-index: 1050;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 0 0 12px 12px; padding: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-scroll { max-height: 70vh; overflow-y: auto; }
.nav-dd-item {
  display: flex; align-items: center; width: 100%; padding: 8px 10px; border-radius: 8px; border: 0; background: none;
  color: var(--ink); text-decoration: none; font-size: 0.92rem; text-align: left; white-space: nowrap;
}
.nav-dd-item:hover { background: var(--hover); color: var(--ink); }
.nav-dd-item .bi { width: 18px; color: var(--accent-ink); }
.nav-dd-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 10px 10px 4px; }
.nav-dd-menu hr { margin: 6px 0; border-color: var(--grid); opacity: 1; }

/* Account button + panel (top right) */
.account-button {
  display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 4px 10px 4px 4px; color: var(--ink);
}
.account-button:hover, .account-button:focus-visible { background: var(--hover); border-color: var(--grid); outline: none; }
.account-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.account-name { font-weight: 600; font-size: 0.9rem; }
.account-role { font-size: 0.75rem; color: var(--ink-2); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-strong); color: #fff; font-weight: 700; font-size: 0.8rem; flex: 0 0 auto;
}
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.account-panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 12px; width: min(340px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--grid); border-radius: 12px;
  padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); z-index: 1060;
}
.account-panel.open { display: block; }
.account-who { display: flex; gap: 12px; align-items: center; }
.account-stores { margin: 10px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--ink-2); }
.account-panel hr { border-color: var(--grid); opacity: 1; }

/* Report title row + options (full width, under the title) */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.freshness { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.share-copy { cursor: pointer; color: var(--accent-ink); }
.report-panel {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 20px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 12px;
  padding: 4px 16px 12px; margin-bottom: 18px;
  /* Always on screen, under the site header. Above the sticky title row and the
     page, so its dropdown menus open over them. */
  position: sticky; top: 56px; z-index: 1030;
}
.report-panel.stuck { box-shadow: 0 4px 12px rgba(22, 28, 27, 0.12); }
.rb-group { min-width: 170px; }
.rb-wide { min-width: 280px; flex: 1 1 280px; max-width: 460px; }
.rb-narrow { max-width: 230px; }
.rb-full { flex: 1 1 100%; }
.rb-pair { display: flex; gap: 6px; align-items: center; }
.rb-show > :first-child { flex: 0 0 140px; }
.rb-show > :last-child { flex: 1 1 auto; min-width: 0; }
.rb-dates > :first-child { width: 160px; }
.rb-subgrid { display: flex; flex-wrap: wrap; gap: 4px 20px; flex: 1 1 100%; }
.rb-subgrid .rb-group { flex: 1 1 170px; }
/* Dash 4 sizes the date inputs by measuring their text, which gives 0 when the
   picker starts hidden - give them a fixed width instead */
.report-panel .dash-datepicker-input { width: 7.2em !important; }
.cmp-rows { display: flex; flex-direction: column; }  /* one comparison per line */
.rb-compare { min-width: 460px; flex: 1 1 460px; max-width: 640px; }  /* too tight? it moves to its own line */

.control-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  margin: 12px 0 6px;
}
.control-hint { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

/* Toggle-button groups (Franchise, As...): separate chips with a gap */
.btn-group { flex-wrap: wrap; gap: 6px; }
.btn-group .btn { font-size: 0.82rem; white-space: nowrap; }
.btn-group > .form-check { padding: 0; margin: 0; }
.btn-group > .form-check .btn { border-radius: var(--bs-border-radius-sm) !important; margin: 0 !important; }
.chip-group > .form-check { flex: 1 1 auto; }
.chip-group > .form-check .btn { width: 100%; font-size: 0.95rem !important; padding: 5px 12px; }

/* Comparison row: [swatch][type][value][x] */
.cmp-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px;
  align-items: center; padding: 4px 0;
}
.cmp-swatch { width: 14px; height: 0; }
.cmp-type, .cmp-value { min-width: 0; }
.cmp-remove { color: var(--muted); padding: 2px 4px; }
.cmp-remove:hover { color: var(--bad); }

/* Tablets & phones: header menus behind ☰; options stack full width */
@media (max-width: 991.98px) {
  .menu-open { display: inline-block; }
  .header-nav {
    display: none; position: absolute; top: 56px; left: 0; right: 0; height: auto; margin: 0; max-height: calc(100vh - 56px);
    overflow-y: auto; flex-direction: column; background: var(--topbar-bg); border-bottom: 1px solid var(--grid); padding: 6px 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  }
  .header-nav.open { display: flex; }
  .nav-dd { flex-direction: column; }
  .nav-dd-toggle { padding: 12px; border-bottom: 0; border-left: 3px solid transparent; pointer-events: none; }
  .nav-dd-toggle .bi-chevron-down { display: none; }
  .nav-dd-toggle.active { border-left-color: var(--accent); }
  .nav-dd-menu { display: block; position: static; box-shadow: none; border: 0; background: none; padding: 0 0 6px 18px; }
  /* Bigger, easier-to-tap menu text on phones and tablets */
  .nav-dd-toggle { font-size: 1.1rem; font-weight: 600; }
  .nav-dd-item { font-size: 1.05rem; padding: 11px 10px; }
  .nav-dd-heading { font-size: 0.8rem; }
  .nav-dd-scroll { max-height: none; }
  .content { padding: 14px 12px 32px; }
}
@media (max-width: 767.98px) {
  .report-panel { flex-direction: column; align-items: stretch; gap: 0; }
  .rb-group, .rb-wide, .rb-narrow { min-width: 0; max-width: none; flex: none; width: 100%; }
  .rb-pair { flex-direction: column; align-items: stretch; }
  .rb-show > *, .rb-dates > * { width: 100% !important; flex: none !important; }
  /* Leaderboards filters: two per row instead of one tall stack */
  .rb-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .rb-subgrid .rb-group { flex: none; min-width: 0; width: auto; }
  #lb-scale-col { grid-column: 1 / -1; }
  .cmp-row { grid-template-columns: 14px minmax(0, 1fr) auto; max-width: none; flex: none; width: 100%;
    padding: 6px 0; border-bottom: 1px dashed var(--grid); }
  .cmp-value { grid-column: 2; }
  .cmp-remove { grid-row: 1; grid-column: 3; }
}
@media (max-width: 575.98px) {
  html { font-size: 14px; }       /* everything in rem gets a little smaller: more data on screen */
  .account-text, .account-button .bi-chevron-down { display: none; }
  .account-button { padding: 2px; }
  .brand { font-size: 1rem; }
  .topbar { gap: 8px; padding: 0 10px; }
  .ag-root-wrapper { --ag-font-size: 11px !important; --ag-data-font-size: 11px !important; --ag-header-font-size: 11px !important;
    --ag-spacing: 4px !important; --ag-cell-horizontal-padding: 5px !important; }
  .ag-root-wrapper .ag-cell, .ag-root-wrapper .ag-header-cell-text { font-size: 11px; }
  .ag-root-wrapper .ag-row .ag-cell { line-height: 29px; }  /* 30px rows (rowHeight in dashAgGridFunctions.js) minus the border */
  .ag-root-wrapper .ag-cell, .ag-root-wrapper .ag-header-cell { padding-left: 5px; padding-right: 5px; }
}

/* Login-only view (no header/panel) */
.login-mode .topbar, .login-mode .report-panel, .login-mode .report-head { display: none !important; }
.login-page { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; }
.login-card {
  width: min(560px, 100%); background: var(--surface); border: 1px solid var(--grid); border-radius: 14px; padding: 28px;
}
.login-brand { font-weight: 700; font-size: 1.2rem; color: var(--accent-ink); margin-bottom: 16px; }
.login-list { display: grid; gap: 8px; }
.login-user {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--grid);
  border-radius: 10px; color: var(--ink); text-decoration: none;
}
.login-user:hover { border-color: var(--accent); background: var(--hover); color: var(--ink); }

/* Home + resource pages */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.quick-tile {
  display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface);
  border: 1px solid var(--grid); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 0.92rem;
}
.quick-tile i { font-size: 1.2rem; color: var(--accent-ink); }
.quick-tile:hover { border-color: var(--accent); color: var(--ink); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.resource-tile {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--surface);
  border: 1px solid var(--grid); border-radius: 12px; color: var(--ink); text-decoration: none;
}
.resource-tile:hover { border-color: var(--accent); color: var(--ink); }
.resource-tile-icon {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .14); color: var(--accent-ink); font-size: 1.2rem; flex: 0 0 auto;
}
.goal-bar-sm { height: 8px; margin-top: 8px; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--ink-2); }
.resource-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.resource-icon {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .14); color: var(--accent-ink); font-size: 1.6rem; flex: 0 0 auto;
}
.wiki-search { max-width: 520px; }
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--ink); --bs-accordion-border-color: var(--grid);
  --bs-accordion-active-bg: var(--active); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-color: var(--ink); }

/* Pop-out panels (column picker): assets/ui.js opens/closes them */
.pop-wrap { position: relative; }
.pop-panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1030;
  background: var(--surface); color: var(--ink); border: 1px solid var(--grid); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  max-height: 70vh; overflow-y: auto;
}
.pop-panel.open { display: block; }
.col-picker { width: min(520px, calc(100vw - 32px)); }
.col-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; }
.kpi-table .card-header { background: var(--surface); }
.kpi-table .ag-root-wrapper { border: 0; border-radius: 0 0 10px 10px; }
.col-group-header .ag-header-group-cell-label { justify-content: center; font-weight: 700; }
.grid-link { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.grid-link:hover { text-decoration: underline; }

/* ── Page ──────────────────────────────────────────── */
.page-header { margin-bottom: 18px; }
.page-title { font-size: 1.6rem; font-weight: 700; margin: 0; }
.page-subtitle { color: var(--ink-2); margin-top: 2px; }
.page-help { color: var(--muted); }
.section-title { font-size: 1rem; font-weight: 700; margin: 8px 0 10px; }

.card { background: var(--surface); border: 1px solid var(--grid); border-radius: 10px; box-shadow: none; }
.card-header { background: var(--surface-2); border-bottom-color: var(--grid); }
.card-title-sm { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.card-range { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.hero-number { font-size: 2rem; font-weight: 700; line-height: 1.15; }
@media (max-width: 575.98px) { .hero-number { font-size: 1.6rem; } .page-title { font-size: 1.35rem; } }

.delta { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.delta-good { color: var(--good); }
.delta-bad { color: var(--bad); }
.delta-neutral { color: var(--ink-2); }

/* ── Goal progress bar ─────────────────────────────── */
.goal-bar { position: relative; height: 12px; background: var(--surface-2); border: 1px solid var(--grid);
  border-radius: 6px; margin-top: 10px; }
.goal-fill { height: 100%; background: var(--accent); border-radius: 6px; }
.goal-pace {
  position: absolute; top: -5px; width: 3px; height: 20px; margin-left: -1px;
  background: var(--ink); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface);
}
.status { margin-top: 10px; font-weight: 600; font-size: 0.9rem; }
.status-good { color: var(--good); }
.status-bad { color: var(--bad); }


/* ── Charts: sized by CSS, recolored from tokens ───── */
.hist-graph { height: 420px !important; width: 100%; }  /* !important: dcc.Graph sets an inline height: 100% */
@media (max-width: 575.98px) { .hist-graph { height: 320px !important; } }
.js-plotly-plot .main-svg text { fill: var(--ink-2) !important; }
.js-plotly-plot .gridlayer path, .js-plotly-plot .zerolinelayer path { stroke: var(--grid) !important; }
.js-plotly-plot .xlines-above, .js-plotly-plot .ylines-above,
.js-plotly-plot .xaxislayer-above path, .js-plotly-plot .yaxislayer-above path { stroke: var(--axis) !important; }
.js-plotly-plot .hoverlayer .hovertext path,
.js-plotly-plot .hoverlayer .legend rect.bg { fill: var(--surface) !important; stroke: var(--grid) !important; }
.js-plotly-plot .hoverlayer text { fill: var(--ink) !important; }

/* ── Grids / tables ────────────────────────────────── */
.ag-root-wrapper {
  --ag-accent-color: var(--accent) !important;
  --ag-background-color: var(--surface) !important;
  --ag-foreground-color: var(--ink) !important;
  --ag-header-background-color: var(--surface-2) !important;
  --ag-border-color: var(--grid) !important;
  --ag-row-border-color: var(--grid) !important;
  --ag-row-hover-color: var(--hover) !important;
  --ag-tooltip-background-color: var(--surface-2) !important;
  border-radius: 10px;
}
/* Wrap grid headers between words only ("Sales YoY"), never mid-word */
.ag-header-cell-text { word-break: normal !important; overflow-wrap: normal !important; }
.editable-cell { background: color-mix(in srgb, var(--surface), #f5c518 10%); cursor: text; }
.custom-goal { font-weight: 700; }

.summary-table { font-size: 0.92rem; --bs-table-bg: var(--surface); --bs-table-color: var(--ink);
  --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--ink); }
.summary-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-table .kpi-name { white-space: nowrap; }
.summary-table thead th { font-size: 0.78rem; color: var(--ink-2); font-weight: 600; border-bottom-color: var(--grid); }
.summary-table .col-group { text-align: center; border-bottom: 2px solid var(--grid); white-space: nowrap; }
.summary-table .col-start { border-left: 1px solid var(--grid); }
.th-swatch { display: inline-block; width: 16px; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.th-swatch.dashed { border-top-style: dashed; }
.summary-table .section-row th {
  background: var(--surface-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2); padding-top: 10px;
}

/* ── Trends tiles ─────────────────────────────────── */
.tile {
  background: var(--surface-2); border: 1px solid var(--grid); border-radius: 10px; min-width: 0;
  padding: 10px 12px 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: var(--accent); }
.tile.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-label { font-size: 0.8rem; color: var(--ink-2); font-weight: 600; }
.tile-value { font-size: 1.35rem; font-weight: 700; }

/* ── Print: light, no chrome, content full width (ui.js flips to light) ── */
/* Print / "Save as PDF": light, landscape, no buttons or menus. The report
   controls print as a one-line summary of the options above the report. */
@page { size: landscape; margin: 12mm; }
@media print {
  .topbar, .btn, .pop-wrap, .account-panel, .modal, .dash-debug-menu__outer, .dash-debug-menu,
  .report-head-actions, .title-actions, .table-actions { display: none !important; }
  .report-panel { position: static !important; box-shadow: none !important; border: 0 !important;
    padding: 0 !important; margin: 0 0 4px !important; width: auto !important; }
  .report-panel > :not(.report-head) { display: none !important; }
  .report-panel .report-head { margin: 0 !important; }
  .report-panel .panel-summary { display: block !important; }
  .report-title-row { position: static !important; box-shadow: none !important; margin: 0 0 10px !important;
    max-width: none !important; }
  .report-title-row .freshness { display: block !important; }
  .kpi-table .ag-header { transform: none !important; box-shadow: none !important; }
  .content { padding: 0; }
  body { background: #fff; }
  .card, .tile, .store-card, .summary-card { break-inside: avoid; }
}

/* Bootstrap's table cell color rule is very specific - win it for the deltas */
.summary-table td.delta-good { color: var(--good) !important; }
.summary-table td.delta-bad { color: var(--bad) !important; }

/* ── Trends: tile groups (big headline KPI + its drivers) ── */
.tile-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.tile-group { background: var(--surface); border: 1px solid var(--grid); border-radius: 12px; padding: 10px; min-width: 0; }
.tile-group-title { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-2); margin: 0 4px 8px; }
.tile-group-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 8px; }
.tile-big { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.tile-big .tile-value { font-size: 2rem; }
@media (max-width: 575.98px) {
  .tile-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tile-big { grid-column: span 3; grid-row: auto; }
  .tile-group-grid .tile:not(.tile-big) { padding: 8px 8px 2px; }
  .tile-group-grid .tile:not(.tile-big) .tile-value { font-size: 1.05rem; }
  .tile-group-grid .tile:not(.tile-big) .delta { font-size: 0.72rem; white-space: normal; }
}

/* ── Store Summary: one card per section, indented drivers, sticky KPI column ── */
.summary-card .card-header { background: var(--surface); font-size: 0.95rem; }
.summary-card .table-responsive { border-radius: 0 0 10px 10px; }
.summary-table { table-layout: fixed; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.summary-table col.c-kpi { width: 170px; }
.summary-table col.c-num { width: 100px; }
.summary-table .kpi-name { white-space: normal; }
.summary-table .indent-1 { padding-left: 28px; color: var(--ink-2); }
.summary-table .indent-2 { padding-left: 48px; color: var(--ink-2); }
.summary-table tr.level-0 .kpi-name { font-weight: 600; }
.summary-table tr.level-0 td { border-top: 1px solid var(--axis); }
.summary-table tbody tr:first-child td { border-top: 0; }
/* The KPI names stay put while everything else (you included) scrolls sideways */
.summary-table th:nth-child(1), .summary-table td:nth-child(1) {
  position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--grid);
}
@media (max-width: 575.98px) {
  .summary-table { font-size: 0.8rem; min-width: 600px; }
  .summary-table col.c-kpi { width: 104px; }
  .summary-table col.c-num { width: 78px; }
  .summary-table .indent-1 { padding-left: 12px; }
  .summary-table .indent-2 { padding-left: 20px; }
}

/* ── Dashboard ── */
.store-rows { border-top: 1px solid var(--grid); }
.store-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) auto 44px minmax(60px, 1fr) auto; gap: 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grid); font-size: 0.9rem;
}
.store-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-row-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.store-row .goal-bar { margin-top: 0; }
.store-row .status { margin: 0; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .store-row { grid-template-columns: minmax(0, 1fr) auto 40px; }
  .store-row-bar { grid-column: 1 / -1; order: 5; }
  .store-row-status { display: none; }
}
.mini-table { --bs-table-bg: transparent; --bs-table-color: var(--ink); font-size: 0.9rem; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-table .total-row th { border-top: 2px solid var(--axis); }
.mini-table thead th { font-size: 0.75rem; color: var(--ink-2); font-weight: 600; }
.list-rows { padding: 0 16px; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--grid); }
.list-row:last-child { border-bottom: 0; }
.list-row-stack { display: block; }
@media (max-width: 575.98px) { .list-row { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* ── Leaderboards: benchmark rows + Sales columns tinted so Vends stand apart ── */
.ag-row.benchmark-row { --ag-data-color: var(--ink-2); background: var(--surface-2) !important; }
.ag-cell.col-sales, .ag-header-cell.col-sales-head, .col-sales-head { background-color: var(--sales-tint); }
:root, :root[data-bs-theme="light"] { --sales-tint: rgba(0, 0, 0, 0.035); }
:root[data-bs-theme="dark"] { --sales-tint: rgba(255, 255, 255, 0.045); }

/* ── Dashboard: donuts, register stats, folded tables ── */
.donut { height: 180px !important; }
.details-toggle { margin-top: 10px; }
.details-toggle > summary { cursor: pointer; color: var(--accent-ink); font-size: 0.88rem; font-weight: 600; }
.mini-table .section-row th { background: var(--surface-2); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { background: var(--surface-2); border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; }
.stat-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.till-filter { min-width: 200px; }

/* ── Store Summary: conditional formatting keeps text readable ── */
.summary-table td.heat { font-weight: 600; }

/* Right-aligned numbers in every KPI table */
.ag-cell.num-cell { text-align: right; justify-content: flex-end; }
.ag-header-cell.num-head .ag-header-cell-label { flex-direction: row-reverse; text-align: right; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.period-type { flex: 1 1 auto; min-width: 220px; }  /* not flex-basis: on phones the pair is a column */
.rb-period { flex-wrap: wrap; }

/* Store/filter multi-selects: a ticked group header ("My stores (7)") is listed
   first, so the "8 selected" count (which counts the header too) is just noise */
.report-panel .dash-dropdown-value-count { display: none; }

/* Grouped dropdown rows: "— My stores (7) ——", indented stores, "Only" on hover */
.dd-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.dd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-group .dd-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dd-group .dd-name::before { content: ""; flex: 0 0 10px; border-top: 1px solid var(--axis); }
.dd-group .dd-name::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--axis); }
.dd-child .dd-name { padding-left: 14px; }
.dd-only { flex: none; font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); padding: 0 4px;
  border-radius: 4px; visibility: hidden; cursor: pointer; }
.dd-only:hover { background: var(--active); }
.dash-dropdown-option:hover .dd-only, [role="option"]:hover .dd-only, [role="option"]:focus .dd-only { visibility: visible; }
@media (hover: none) { .dd-only { visibility: visible; } }   /* touch screens: always show it */
/* In the closed dropdown, show just the names */
.dash-dropdown-value .dd-only, .dash-dropdown-value .dd-name::before, .dash-dropdown-value .dd-name::after { display: none; }
.dash-dropdown-value .dd-opt { display: inline; }
.dash-dropdown-value .dd-name { display: inline; padding: 0; font-weight: inherit; }

/* Dashboard: what's driving each goal, shared donut legend, inventory chart */
.drivers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--grid); }
.driver { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.driver-value { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.driver .delta { font-size: 0.75rem; }
.legend-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 0.82rem; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-item .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.section-head { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--grid); }
.inv-graph { height: 150px !important; }

/* Big Sales / Vends switch (Employee Performance) */
.view-toggle .btn { font-size: 1rem !important; font-weight: 600; padding: 8px 28px; }

/* KPI tables: a little less padding, so wide tables fit on a laptop */
.kpi-table .ag-root-wrapper { --ag-cell-horizontal-padding: 8px; --ag-header-column-resize-handle-width: 1px; }
.kpi-table .ag-header-cell, .kpi-table .ag-header-group-cell { padding-left: 8px; padding-right: 8px; }

/* Stand out from the page background: headline KPI cards and Dashboard card headers use the card color */
.stat-row .stat { background: var(--surface); box-shadow: 0 1px 2px rgba(22, 28, 27, 0.06); }
#dash-body .card-header { background: var(--surface); }

/* Dashboard stat boxes: always 3 (or 2) across, like the goal drivers */
.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-grid-3 .stat, .stat-grid-2 .stat { padding: 8px 10px; min-width: 0; }
.stat-grid-3 .stat-value { font-size: 1.1rem; overflow-wrap: anywhere; }

/* Sticky table headers (moved by stickTableHeaders() in assets/ui.js) */
.kpi-table .ag-header { position: relative; z-index: 5; background: var(--ag-header-background-color, var(--surface-2)); }
.kpi-table .ag-header.is-stuck { box-shadow: 0 2px 6px rgba(22, 28, 27, 0.12); }

/* Home: report cards (grouped like the Reports menu) and a 4-wide shortcut grid */
.report-groups { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; }
.report-group-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2); margin-bottom: 8px; }
.report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.report-card { display: block; background: var(--surface); border: 1px solid var(--grid); border-radius: 12px;
  padding: 12px 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; height: 100%; }
.report-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .15); color: var(--ink); }
.report-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.report-card-title .bi { color: var(--accent-ink); font-size: 1.1rem; }
.report-card-text { font-size: 0.85rem; color: var(--ink-2); line-height: 1.35; }
.home-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .report-groups { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.resource-group + .resource-group { margin-top: 14px; }

/* Report controls: a full-width bar that's always on screen (sticky under the
   site header). It starts as a compact bar (label, summary of the options,
   buttons); the arrow opens it in place. assets/ui.js sets .bar = compact look. */
.report-panel > .report-head { flex: 1 1 100%; margin: 10px 0 0; align-items: center; }
.panel-label { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.95rem;
  white-space: nowrap; color: var(--ink); flex: none; }
.panel-label .bi { color: var(--accent-ink); }
/* collapsed: just the top row (label, summary, buttons) */
.report-panel.bar { padding-bottom: 8px; }
.report-panel.bar > :not(.report-head) { display: none !important; }
.report-panel.bar .report-head { margin-top: 8px; flex-wrap: nowrap; }
.report-panel > .report-head { cursor: pointer; }  /* click the top row to open / collapse */
.report-head .report-head-actions { cursor: default; }
.report-head-text { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 0; }
.panel-summary { display: none; flex: 1 1 0; min-width: 0; font-size: 0.82rem; color: var(--ink-2);
  line-height: 1.3; overflow-wrap: anywhere; }
.report-panel.bar .panel-summary { display: block; }
.report-head-actions { flex: none; }
/* the open/close arrow (far right, no outline): points down when collapsed, up when open */
.panel-expand { width: 30px; padding-left: 0; padding-right: 0; border: 0; color: var(--ink-2); font-size: 1rem; }
.panel-expand:hover, .panel-expand:focus-visible { color: var(--accent-ink); background: var(--hover); }
.panel-expand .bi { display: inline-block; transition: transform .15s; }
.report-panel:not(.bar) .panel-expand .bi { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .panel-expand .bi { transition: none; } }
/* Sticky switch: same height and middle line as the buttons beside it */
.panel-sticky { margin: 0; font-size: 0.82rem; color: var(--ink-2); align-self: center; }
.panel-sticky .form-check-input { cursor: pointer; }
.panel-sticky-wrap { display: flex; align-items: center; height: 31px; }
.panel-sticky.form-check, .panel-sticky { display: flex; align-items: center; gap: 6px; min-height: 0;
  margin: 0; padding-left: 0; }
.panel-sticky .form-check-input { float: none; margin: 0; }
.panel-sticky .form-check-label { line-height: 31px; margin: 0; padding: 0; }
/* Tablets and phones: label + buttons on the first line, the summary under them */
@media (max-width: 991.98px) {
  .report-panel.bar .report-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
    grid-template-areas: "label actions" "summary summary";
  }
  .report-panel.bar .report-head-text { display: contents; }
  .report-panel.bar .panel-label { grid-area: label; align-self: center; }
  .report-panel.bar .panel-summary { grid-area: summary; }
  .report-panel.bar .report-head-actions { grid-area: actions; }
}
/* Phones: "Report configuration" and the arrow on the first line; the View list
   (as wide as it can be) with icon-only Copy link / PDF on the second; the summary under them */
@media (max-width: 575.98px) {
  .report-panel #report-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center;
    grid-template-areas: "label label expand" "views copy pdf" "summary summary summary";
  }
  .report-panel #report-head .report-head-text, .report-panel #report-head .report-head-actions { display: contents !important; }  /* (beats d-flex) */
  .report-panel #report-head .panel-label { grid-area: label; align-self: center; }
  .report-panel #report-head .panel-summary { grid-area: summary; }
  .report-panel .views-dd { grid-area: views; width: auto; min-width: 0; }
  .report-panel #share-open { grid-area: copy; }
  .report-panel #export-pdf { grid-area: pdf; }
  .report-panel .panel-expand { grid-area: expand; justify-self: end; }
  .report-panel #page-actions:empty { display: none; }
  .report-head .btn-text { display: none; }
  .report-head #share-open .bi, .report-head #export-pdf .bi { margin-right: 0 !important; }
}

/* The report's name under the controls, with the store's details for one store,
   and the report's table buttons on the right. Sticky with the report controls
   (assets/ui.js sets .sticky-on, its top offset, and .stuck while it's stuck). */
.report-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 16px;
  flex-wrap: wrap; margin: 0 0 16px; }
.report-title-row .title-text { min-width: 0; }
.title-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.report-title-row.sticky-on { position: sticky; z-index: 1025; background: var(--page);
  padding-block: 8px; margin-top: -8px; }
.report-title-row.stuck { box-shadow: 0 6px 8px -6px rgba(22, 28, 27, 0.18); }
.report-title-row.stuck .page-title { font-size: 1.15rem; }
.report-title-row.stuck .freshness { display: none; }
.report-title-row .pop-panel { right: 0; left: auto; }
.store-info { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; font-size: 0.9rem; color: var(--ink-2); }
.store-info:empty { display: none; }
.store-info b { color: var(--ink); font-weight: 600; }
.store-info .bi { color: var(--accent-ink); }

/* Trends cards: one "vs <store comparison>" line per comparison, under "vs PY" */
.tile-vs { display: flex; align-items: baseline; gap: 5px; min-width: 0; margin-top: 2px; }
.tile-vs .delta { white-space: normal; min-width: 0; font-size: 0.78rem; line-height: 1.25; }  /* wraps if long */
.tile-swatch { flex: none; width: 10px; height: 3px; border-radius: 2px; align-self: center; margin-top: 1px; }
/* the "vs PY" line under the value wraps too, on narrow cards */
.tile > .delta { white-space: normal; }

/* "Only" always at the right edge of the row, in the same spot on every row:
   the option's text box (Dash 4) shrinks to its words unless told to fill the row */
.dash-options-list-option-text:has(.dd-opt) { flex: 1 1 auto; min-width: 0; }
.dd-only { margin-left: auto; }

/* Store Summary KPI picker: drivers indented under the KPI they feed, like the table */
.pick-indent-1 { padding-left: 14px; color: var(--ink-2); }
.pick-indent-2 { padding-left: 28px; color: var(--ink-2); }

/* Store Summary: bigger section headers; tables keep their natural width and sit
   centered, so a few columns don't get stretched across the whole card */
.summary-card .card-header { font-size: 1.15rem; font-weight: 700; padding-top: 10px; padding-bottom: 10px; }
.summary-table { width: auto; min-width: 0; table-layout: auto; margin-inline: auto; }
.summary-table .kpi-name { width: 170px; min-width: 170px; max-width: 220px; }
.summary-table td.num, .summary-table th.num { min-width: 92px; max-width: 130px; }
@media (max-width: 575.98px) {
  .summary-table .kpi-name { width: 104px; min-width: 104px; }
  .summary-table td.num, .summary-table th.num { min-width: 74px; }
}

/* Dashboard: one clickable card per store */
.store-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.store-card { text-align: left; background: var(--surface); border: 1px solid var(--grid); border-radius: 12px;
  padding: 10px 12px; color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.store-card:hover { border-color: var(--accent); }
.store-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25); }
.store-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.store-card-name { font-weight: 700; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card-metric { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px;
  font-size: 0.82rem; margin-top: 4px; }
.store-card-metric .label { color: var(--ink-2); }
.store-card-metric .goal-bar { grid-column: 1 / -1; margin: 0; }
.store-card-metric .status { font-size: 0.78rem; margin: 0; }
@media (max-width: 575.98px) {
  .store-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .store-card { padding: 8px 10px; }
  .store-card-name { font-size: 0.85rem; }
  .store-card .status { font-size: 0; }               /* phones: just the ✓ / ⚠ icon */
  .store-card .status .bi { font-size: 0.85rem; margin: 0 !important; }
}
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }  /* (not .d-flex: its !important would override "hidden") */

/* Tables: the card is only as wide as the table, and centered (Store Summary in
   CSS; the AG Grid tables via fitTableCards in assets/ui.js, which caps a card's
   width at its columns' total) */
.summary-card { width: fit-content; max-width: 100%; margin-inline: auto; }
.summary-card .summary-table { margin-inline: 0; }
.kpi-table { margin-inline: auto; }

/* The title line (and Store Summary's toolbar) line up with a page's table when
   the table is the page (Leaderboards, Store Summary) - fitTitleToTable in ui.js */
.report-title-row { margin-inline: auto; }
/* Phones: an opened panel is taller than the screen - it scrolls with the page
   until it's collapsed again (collapsed, it stays stuck under the header) */
@media (max-width: 767.98px) { .report-panel:not(.bar) { position: relative; top: auto; } }
#dash-calendar-note:not(:empty) { margin-bottom: 8px; }

/* Saved views dropdown on the report configuration's top row */
.views-dd { width: 214px; }  /* "View: Custom (unsaved)" in full */
.views-dd .dash-dropdown { min-height: 31px; font-size: 0.85rem; }
@media (max-width: 575.98px) { .views-dd { width: 196px; } }

/* "View: Basic" - the dropdown's chosen view (or its placeholder) with a "View:" label */
.views-dd .dash-dropdown-value::before { content: "View: "; color: var(--ink-2); }
.views-dd .dash-dropdown-placeholder { color: var(--ink); }
.dd-label { color: var(--ink-2); font-size: 0.8rem; font-weight: 600; }

/* Store Summary: KPI names off the card's left edge (drivers stay indented under them) */
.summary-table th:first-child, .summary-table td.kpi-name { padding-left: 18px; }
.summary-table td.kpi-name.indent-1 { padding-left: 38px; }
.summary-table td.kpi-name.indent-2 { padding-left: 58px; }
@media (max-width: 575.98px) {
  .summary-table th:first-child, .summary-table td.kpi-name { padding-left: 10px; }
  .summary-table td.kpi-name.indent-1 { padding-left: 22px; }
  .summary-table td.kpi-name.indent-2 { padding-left: 32px; }
}

/* View menu: wider than its box, so "+ Save current view" and long view names show in full */
.views-dd .dash-dropdown-content { min-width: 230px; }
.views-dd .dash-options-list-option-text, .views-dd .dash-options-list-option { white-space: normal; overflow: visible;
  text-overflow: clip; }
/* "Custom (unsaved)" only ever shows as the current view, never in the list */
[role="option"]:has(.dd-custom), .dash-options-list-option:has(.dd-custom) { display: none; }

/* A table card settling to its new width after its Columns picker closes */
.kpi-table, #report-title-row { transition: max-width .2s ease; }
@media (prefers-reduced-motion: reduce) { .kpi-table, #report-title-row { transition: none; } }
/* Phones: comparison headers wrap onto several lines, so a few columns (e.g. the
   Basic view) fit the screen without scrolling sideways */
@media (max-width: 575.98px) {
  .summary-table .col-group { white-space: normal; line-height: 1.2; vertical-align: bottom; }
  .summary-table td.num, .summary-table th.num { min-width: 64px; }
  .summary-table .kpi-name { width: 96px; min-width: 96px; }
}
/* A pop-out panel is never wider than the screen (assets/ui.js keepOnScreen slides it fully on) */
.pop-panel { max-width: calc(100vw - 16px); }

/* Filter and Store comparison: rows side by side, wrapping onto a new line when
   there's no more room ("Add ..." follows the last row) */
.multi-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.multi-rows > .cmp-rows { display: contents; }
@media (min-width: 768px) {
  .multi-rows .cmp-row { width: 360px; max-width: 100%; padding: 0; }
  .filter-row { grid-template-columns: 130px minmax(0, 1fr) auto; }
  .multi-rows .cmp-row:not(.filter-row) { grid-template-columns: 14px 165px minmax(0, 1fr) auto; width: 420px; }
}
/* As wide as its rows: adding one makes it wider (and it moves to a line of its
   own once it doesn't fit next to the other options) */
.rb-multi { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.rb-filters + .rb-group { max-width: 260px; }  /* Group by: no need to stretch */

/* Desktop: the Leaderboards' Filter / Group by / Show groups as flow in with the
   other options instead of taking a whole row of their own */
@media (min-width: 768px) {
  .rb-subgrid { display: contents; }
  .rb-subgrid .rb-group { flex: 0 1 auto; }
  .rb-subgrid .rb-filters { flex: 0 1 auto; }
  .rb-filters + .rb-group { width: 170px; }
}
/* Phones and narrow tablets: one row per line again, each row stacked */
@media (max-width: 767.98px) {
  .multi-rows { flex-direction: column; align-items: stretch; gap: 0; }
  .multi-rows .cmp-row { width: 100%; }
  .rb-filters { grid-column: 1 / -1; }
  .rb-filters + .rb-group { max-width: none; }
  .filter-row { grid-template-columns: minmax(0, 1fr) auto; }
  .filter-row .cmp-value { grid-column: 1; }
  .filter-row .cmp-remove { grid-row: 1; grid-column: 2; }
  .multi-add { align-self: flex-start; }
}
/* A switch with an (i) beside it for its explanation */
.switch-with-info { display: flex; align-items: center; gap: 6px; }
.switch-with-info .form-check { margin: 0; }
.info-button { border: 0; background: none; padding: 0 2px; color: var(--ink-2); line-height: 1; cursor: help; }
.info-button:hover, .info-button:focus-visible { color: var(--accent-ink); }
.popover { --bs-popover-max-width: 280px; --bs-popover-body-padding-y: 8px; --bs-popover-body-padding-x: 12px;
  --bs-popover-bg: var(--surface); --bs-popover-body-color: var(--ink); --bs-popover-border-color: var(--grid);
  font-size: 0.82rem; }
.switch-with-info .form-check-label { white-space: nowrap; }
#rb-comparable { min-width: 0; }

/* ── Report configuration: the options (normally just part of the panel) ── */
.report-options { display: contents; }

/* ── "Report configuration on the side" (a setting) ──
   The panel's top row (summary, View, Copy link, PDF, arrow) stays at the top of
   the page and stays usable; the arrow opens the options as a drawer from the
   right, under that row and over the page (dimmed behind it - a click there, the
   arrow or Esc closes it). --drawer-top (assets/ui.js) is the row's bottom edge. */
:root { --side-w: 360px; }
.side-config .report-panel.bar > .report-options {
  display: flex !important; flex-direction: column; gap: 2px;
  position: fixed; top: var(--drawer-top, 56px); bottom: 0; right: 0; z-index: 1036;
  width: min(var(--side-w), calc(100vw - 40px)); padding: 4px 18px 24px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-left: 1px solid var(--grid);
  box-shadow: -8px 0 28px rgba(22, 28, 27, 0.18);
  transform: translateX(102%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.side-open .report-panel.bar > .report-options {
  transform: none; visibility: visible; transition: transform .22s ease;
}
/* The page behind the open drawer: dimmed, and a click on it closes the drawer (assets/ui.js) */
.side-config body::after {
  content: ""; position: fixed; inset: var(--drawer-top, 56px) 0 0 0; z-index: 1029; background: rgba(22, 28, 27, 0.22);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.side-open body::after { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .side-config .report-panel.bar > .report-options, .side-config body::after { transition: none !important; }
}
/* The arrow points the way the drawer moves: left to open it, right to put it away */
.side-config .report-panel .panel-expand .bi { transform: rotate(90deg); }
.side-open .report-panel .panel-expand .bi { transform: rotate(-90deg); }

/* In the sidebar: one option per line, full width */
.side-config .report-options > *, .side-config .report-options .rb-subgrid > * {
  width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important;
}
.side-config .report-options .rb-subgrid { display: flex; flex-direction: column; gap: 2px; }
.side-config .report-options .rb-pair { flex-direction: column; align-items: stretch; }
.side-config .report-options .rb-pair > *, .side-config .report-options .rb-dates > :first-child {
  width: 100% !important; flex: none !important; }
.side-config .report-options .chip-group { flex-wrap: nowrap; }
/* Filter and Store comparison rows: stacked, one under the other */
.side-config .report-options .multi-rows { flex-direction: column; align-items: stretch; gap: 0; }
.side-config .report-options .multi-rows .cmp-row {
  width: 100%; padding: 6px 0; border-bottom: 1px dashed var(--grid);
  grid-template-columns: 14px minmax(0, 1fr) auto; }
.side-config .report-options .multi-rows .cmp-value { grid-column: 2; }
.side-config .report-options .multi-rows .cmp-remove { grid-row: 1; grid-column: 3; }
.side-config .report-options .multi-rows .filter-row { grid-template-columns: minmax(0, 1fr) auto; }
.side-config .report-options .multi-rows .filter-row .cmp-value { grid-column: 1; }
.side-config .report-options .multi-rows .filter-row .cmp-remove { grid-column: 2; }
.side-config .report-options .multi-add { align-self: flex-start; }
.side-config .report-options .control-label { margin-top: 14px; }

@media print {
  .side-config body::after { display: none !important; }
}

/* ── With the options on the side: no bar; the title row takes its place ── */
.title-summary, .title-view-actions:empty, .drawer-open { display: none; }
.side-config .report-panel .report-head { display: none !important; }
.side-config .report-panel { padding: 0; margin: 0; border: 0; background: none; box-shadow: none !important; min-height: 0; }
.side-config .title-summary {
  display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ink-2); max-width: 70ch;
}
.side-config .report-title-row .freshness { margin-top: 2px; }
.side-config .title-view-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.side-config .title-view-actions .panel-arrow { display: none; }
.side-config .title-view-actions .drawer-open { display: inline-flex; align-items: center; }
.side-open .title-view-actions .drawer-open { background: var(--accent-strong); border-color: var(--accent-strong); }
/* above the dimmed page, so its buttons still work while the drawer is open */
.side-config .report-title-row.sticky-on { z-index: 1031; }
.side-config .report-title-row { padding-top: 6px; }
@media (max-width: 575.98px) {
  .side-config .title-view-actions { width: 100%; }
  .side-config .title-view-actions .views-dd { flex: 1 1 auto; width: auto; min-width: 0; }
  .side-config .title-view-actions #share-open .btn-text, .side-config .title-view-actions #export-pdf .btn-text { display: none; }
  .side-config .title-view-actions #share-open .bi, .side-config .title-view-actions #export-pdf .bi { margin-right: 0 !important; }
}
@media print {
  .title-view-actions, .drawer-open { display: none !important; }
  .side-config .title-summary { display: block !important; }
}
/* (the Configure button shares the arrow's .panel-expand behavior, not its look) */
.side-config .title-view-actions .drawer-open {
  width: auto; padding: 0.25rem 0.65rem; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 0.875rem; }
.side-config .title-view-actions .drawer-open:hover, .side-config .title-view-actions .drawer-open:focus-visible {
  background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
/* With the options on the side: the summary sits on the title's line, after a divider
   (phones keep it under the title - there's no room beside it) */
@media (min-width: 576px) {
  .side-config .report-title-row .title-text {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .side-config .report-title-row .page-title { grid-column: 1; grid-row: 1; margin: 0; }
  .side-config .title-summary { grid-column: 2; grid-row: 1; margin-top: 0; padding-left: 14px;
    border-left: 1px solid var(--grid); line-height: 1.35; max-width: none; }
  .side-config .report-title-row .store-info, .side-config .report-title-row .freshness { grid-column: 1 / -1; }
}
/* (the title + summary take the room the buttons leave, so the buttons stay on the same line) */
@media (min-width: 576px) {
  .side-config .report-title-row { flex-wrap: nowrap; align-items: center; }
  .side-config .report-title-row .title-text { flex: 1 1 auto; }
  .side-config .report-title-row .title-view-actions, .side-config .report-title-row .title-actions { flex: none; }
}
@media (min-width: 576px) and (max-width: 1199.98px) {  /* narrower: Store Summary's pickers go under */
  .side-config .report-title-row { flex-wrap: wrap; }
}

/* ── "Navigation on the left" (a setting; wide screens only - phones and tablets
   keep the menu button): the header becomes a sidebar. Brand on top, then the
   menus (each opens to the right), the account at the bottom. ── */
:root { --nav-w: 248px; }
@media (min-width: 992px) {
  .nav-left .topbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--nav-w); height: auto;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 10px 12px;
    border-bottom: 0; border-right: 1px solid var(--grid);
  }
  .nav-left .app-shell:not(.login-mode) { padding-left: var(--nav-w); }
  .nav-left .brand { padding: 0 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--grid); }
  .nav-left .header-nav { flex-direction: column; height: auto; margin: 0; gap: 2px; }
  .nav-left .nav-dd { flex-direction: column; }
  .nav-left .nav-dd-toggle {
    width: 100%; padding: 10px 12px; border-radius: 8px; border-bottom: 0; border-left: 3px solid transparent;
  }
  .nav-left .nav-dd-toggle .bi-chevron-down { margin-left: auto !important; transform: rotate(-90deg); }
  .nav-left .nav-dd-toggle.active { border-left-color: var(--accent); background: var(--hover); color: var(--ink); }
  .nav-left .nav-dd-menu { top: 0; left: calc(100% + 8px); border-radius: 12px; }
  .nav-left .nav-dd-scroll { max-height: calc(100vh - 220px); }
  .nav-left .account-button { width: 100%; border-radius: 12px; padding: 6px 8px; border-color: var(--grid); }
  .nav-left .account-button .bi-chevron-down { margin-left: auto !important; transform: rotate(-90deg); }
  .nav-left .account-panel { top: auto; bottom: 12px; right: auto; left: calc(100% + 8px);
    max-height: calc(100vh - 24px); overflow-y: auto; }
  /* nothing sits above the page any more: the sticky bits start at the window's top */
  .nav-left .report-panel { top: 0; }
  .nav-left .side-config .report-panel.bar > .report-options, .nav-left.side-config .report-panel.bar > .report-options {
    top: var(--drawer-top, 0px); }
  .nav-left.side-config body::after { inset: var(--drawer-top, 0px) 0 0 var(--nav-w); }
}
@media print {
  .nav-left .app-shell { padding-left: 0 !important; }
}

/* Newsfeed and Community */
.newsfeed { max-width: 760px; }
.coming-soon { max-width: 520px; margin: 48px auto; text-align: center; padding: 40px 24px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 14px; }
.coming-soon-icon { font-size: 2.6rem; color: var(--accent-ink); }
.nav-tab { text-decoration: none; }
@media (max-width: 991.98px) { .nav-tab { pointer-events: auto !important; } }

/* Side navigation: the menus open in the sidebar (indented under their name), and
   the menu list scrolls on its own if it gets long, so the account stays at the bottom */
@media (min-width: 992px) {
  .nav-left .header-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .nav-left .topbar > .flex-grow-1 { display: none; }
  .nav-left .nav-dd-menu {
    position: static; min-width: 0; padding: 2px 0 8px 14px; margin-left: 10px;
    background: none; border: 0; border-left: 1px solid var(--grid); border-radius: 0; box-shadow: none;
  }
  .nav-left .nav-dd-scroll { max-height: none; overflow: visible; }
  .nav-left .nav-dd-item { white-space: normal; padding: 6px 8px; font-size: 0.88rem; }
  .nav-left .nav-dd-heading { padding: 8px 8px 2px; }
  .nav-left .nav-dd-toggle .bi-chevron-down { transform: none; transition: transform .15s; }
  .nav-left .nav-dd.open .nav-dd-toggle .bi-chevron-down { transform: rotate(180deg); }
  .nav-left .nav-dd.open .nav-dd-toggle { background: none; }
  .nav-left .nav-dd-toggle:hover { background: var(--hover); }
}
/* Side navigation: the brand fits its row, with the same room after "2.0" as before "BaseCamp" */
@media (min-width: 992px) {
  .nav-left .brand { display: flex; align-items: center; }
  .nav-left .brand .brand-version { margin-left: 4px; }
}

/* ── Side navigation: the collapse button, and the collapsed (icons only) look ── */
.nav-collapse { display: none; }
@media (min-width: 992px) {
  .nav-left .topbar, .nav-left .app-shell { transition: width .2s ease, padding-left .2s ease; }
  .nav-left .nav-collapse {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 4px; padding: 8px 14px;
    background: none; border: 0; border-radius: 8px; color: var(--ink-2); font-size: 0.85rem;
  }
  .nav-left .nav-collapse:hover, .nav-left .nav-collapse:focus-visible { background: var(--hover); color: var(--ink); }
  .nav-left .nav-collapse .bi { transition: transform .2s ease; }

  .nav-left.nav-collapsed { --nav-w: 64px; }
  .nav-left.nav-collapsed .topbar { padding-left: 8px; padding-right: 8px; }
  .nav-collapsed .nav-collapse .bi { transform: rotate(180deg); }
  .nav-left.nav-collapsed .nav-label, .nav-left.nav-collapsed .nav-dd-toggle .bi-chevron-down,
  .nav-left.nav-collapsed .account-text, .nav-left.nav-collapsed .account-button .bi-chevron-down { display: none; }
  .nav-left.nav-collapsed .brand { justify-content: center; padding: 0 0 14px; font-size: 1.3rem; }
  .nav-left.nav-collapsed .nav-dd-toggle, .nav-left.nav-collapsed .nav-collapse { justify-content: center; padding: 10px 0; }
  .nav-left.nav-collapsed .nav-dd-toggle .bi, .nav-left.nav-collapsed .brand .bi { margin: 0 !important; font-size: 1.15rem; }
  .nav-left.nav-collapsed .account-button { justify-content: center; padding: 4px 0; border-color: transparent; }
  /* menus pop out to the right of their icon (the list is short now: no need to scroll it) */
  .nav-left.nav-collapsed .header-nav { overflow: visible; }
  .nav-left.nav-collapsed .nav-dd-menu {
    position: absolute; top: 0; left: calc(100% + 18px); min-width: 260px; margin: 0; padding: 6px;
    background: var(--surface); border: 1px solid var(--grid); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  }
  .nav-left.nav-collapsed .nav-dd-scroll { max-height: 70vh; overflow-y: auto; }
  .nav-left.nav-collapsed .nav-dd-item { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-left .topbar, .nav-left .app-shell, .nav-left .nav-collapse .bi { transition: none !important; }
}