:root, :root[data-theme="dark"]{
  /* Grey palette for chrome, vibrant yellow for highlights. Primary
     buttons are black/white (set on the button rules below). */
  --bg:#1f1f1f; --panel:#2b2b2b; --panel-2:#353535; --line:#4a4a4a;
  --text:#ebebeb; --muted:#a0a0a0; --accent:#f5cc1e;
  --curr:#f5cc1e; --prev:#ffb86b; --good:#3ddc97; --bad:#ff6b8a;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --radius:14px;
  --picker-bar-bg:rgba(31,31,31,.94);
  --overlay-bg:rgba(15,15,15,.85);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f7fb; --panel:#ffffff; --panel-2:#eef1f7; --line:#dde2ec;
  --text:#1a2138; --muted:#5d6788; --accent:#dcd045;
  --curr:#4b6dff; --prev:#e08a3c; --good:#1c9e6a; --bad:#d63b5b;
  --shadow:0 4px 18px rgba(20,30,60,.08);
  --radius:14px;
  --picker-bar-bg:rgba(245,247,251,.92);
  --overlay-bg:rgba(245,247,251,.92);
  color-scheme:light;
}

/* Light theme: primary CTAs become black with white text */
:root[data-theme="light"] .overlay-form button,
:root[data-theme="light"] .overlay-cta,
:root[data-theme="light"] .picker-bar .picker-go,
:root[data-theme="light"] .actions button:not(.secondary){
  background:#0b1020;
  color:#ffffff;
}
/* Light theme: replace the yellow accent on TEXT usages with neutral
   black/grey. The accent itself stays yellow for backgrounds (buttons),
   borders (focus rings, drop-zone hover) and the chart-axis highlight,
   so the brand colour still shows where it doesn't impair readability. */
:root[data-theme="light"] .filter h4 .count,
:root[data-theme="light"] #files-list .kind{
  color:var(--text);
}
:root[data-theme="light"] .overlay-brand,
:root[data-theme="light"] .picker-bar .picker-label,
:root[data-theme="light"] .picker-modal-label,
:root[data-theme="light"] #authBar .role{
  color:var(--muted);
}
:root[data-theme="light"] .picker-modal-label.prev,
:root[data-theme="light"] .picker-bar .picker-label.prev{
  color:var(--prev);  /* leave the "PREVIOUS" labels in their amber tint */
}
:root[data-theme="light"] .prev-override-link{
  color:var(--text);text-decoration:underline;
}

:root[data-theme="light"] .overlay-form button:hover:not(:disabled),
:root[data-theme="light"] .overlay-cta:hover,
:root[data-theme="light"] .picker-bar .picker-go:hover:not(:disabled),
:root[data-theme="light"] .actions button:not(.secondary):hover:not(:disabled){
  background:#1a2138;
  filter:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.wrap{max-width:1400px;margin:0 auto;padding:28px}
h1{font-size:22px;margin:0 0 4px 0;letter-spacing:.2px}
h2{font-size:16px;margin:24px 0 12px 0;color:var(--text);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.sub{color:var(--muted);font-size:13px}
.legend{display:flex;gap:14px;align-items:center;margin-top:6px;font-size:12px;color:var(--muted)}
.legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
/* Tab bar */
.tabs{display:flex;gap:4px;margin:18px 0 22px;border-bottom:1px solid var(--line)}
.tabs button{
  background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;
  padding:10px 16px;font:600 13px system-ui;letter-spacing:.3px;cursor:pointer;
  text-transform:uppercase;
}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
.view{display:none}
.view.active{display:block}
.panels{grid-template-columns:1fr 1fr}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.kpi .value{font-size:24px;font-weight:700;margin-top:6px;letter-spacing:.2px}
.kpi .prev{font-size:12px;color:var(--muted);margin-top:4px}
.delta{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:600}
.delta.up{background:rgba(61,220,151,.15);color:var(--good)}
.delta.down{background:rgba(255,107,138,.15);color:var(--bad)}
.delta.flat{background:rgba(154,166,207,.15);color:var(--muted)}
.chart-wrap{position:relative;height:320px}
.chart-wrap.tall{height:380px}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
tbody tr:hover{background:rgba(245,204,30,.07)}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.filter{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px}
.filter h4{margin:0 0 6px 0;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center}
.filter h4 .count{color:var(--accent);font-weight:700}
.filter .ctrls{display:flex;gap:6px;margin-bottom:6px}
.filter .ctrls button, .filter input[type="search"]{
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;font-family:inherit;
}
.filter input[type="search"]{flex:1;cursor:text}
.filter .ctrls button:hover{background:var(--line)}
.options{max-height:160px;overflow-y:auto;padding-right:4px}
.options::-webkit-scrollbar{width:6px}
.options::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.opt{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:4px;font-size:12px;cursor:pointer}
.opt:hover{background:rgba(245,204,30,.10)}
.opt input{cursor:pointer;accent-color:var(--accent)}
.opt .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .badge{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.pivot-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.pivot-wrap h3{margin:0 0 8px 0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.summary-strip{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.summary-strip .chip{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px}
.summary-strip .chip strong{color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .filters{grid-template-columns:repeat(2,1fr)}
  .pivot-wrap{grid-template-columns:1fr}
}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--good)}
.neg{color:var(--bad)}
.muted{color:var(--muted)}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.pill{display:inline-block;padding:3px 8px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:11px;color:var(--muted);margin-left:8px}
@media (max-width: 1100px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
}

/* ---- Upload page extras ---- */
.drop{
  background:var(--panel);border:2px dashed var(--line);border-radius:var(--radius);
  padding:18px;text-align:center;cursor:pointer;transition:border-color .15s, background .15s;
}
.drop.dragover{border-color:var(--accent);background:rgba(245,204,30,.10)}
.drop.ok{border-color:var(--good);border-style:solid;background:rgba(61,220,151,.06)}
.drop h3{margin:0 0 6px 0;font-size:14px}
.drop p{margin:4px 0;font-size:12px;color:var(--muted)}
.drop input[type=file]{display:none}
.drop-all{padding:36px 18px;margin-top:18px}
.drop-all h3{font-size:16px}
.drop-all p{font-size:13px}

/* Sticky compact period picker bar */
.picker-bar{
  position:sticky;top:0;z-index:50;
  background:var(--picker-bar-bg);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:18px -28px 0;padding:12px 28px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13px;
}
.picker-bar .picker-group{display:flex;align-items:center;gap:6px}
.picker-bar .picker-label{
  font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--accent);min-width:54px;
}
.picker-bar .picker-label.prev{color:var(--prev)}
.picker-bar .picker-sep{color:var(--muted);font-size:11px}
.picker-bar input[type=date], .picker-bar select{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;font-family:inherit;font-size:12px;
  color-scheme:dark;
}
.picker-bar select{cursor:pointer;max-width:170px}
.picker-bar .picker-go{
  background:#000;color:#fff;border:0;border-radius:6px;
  padding:7px 16px;font:700 12px system-ui;cursor:pointer;letter-spacing:.3px;
}
.picker-bar .picker-go:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.picker-bar .picker-go:hover:not(:disabled){filter:brightness(1.1)}
.picker-bar .secondary{
  background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:6px 12px;font:600 11px system-ui;cursor:pointer;
}
.picker-bar .secondary:hover{background:var(--line)}
.picker-bar .picker-status{margin-left:auto;font-size:12px;color:var(--muted)}
.picker-bar .picker-status.ok{color:var(--good)}
.picker-bar .picker-status.error{color:var(--bad)}
@media (max-width:900px){
  .picker-bar{flex-direction:column;align-items:stretch}
  .picker-bar .picker-status{margin-left:0}
}

.actions{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
.actions button{
  background:#000;color:#fff;border:0;border-radius:8px;padding:10px 18px;
  font:700 13px system-ui;cursor:pointer;letter-spacing:.3px;
}
.actions button:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.actions button:hover:not(:disabled){filter:brightness(1.1)}
.actions .secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
#status{margin-top:14px;font-size:13px;color:var(--muted)}
#status.error{color:var(--bad)}
#status.ok{color:var(--good)}

#files-list{font-family:ui-monospace,Menlo,Consolas,monospace}
#files-list div{padding:2px 0}
#files-list .kind{display:inline-block;width:110px;color:var(--accent);font-weight:600}
#files-list .range{color:var(--muted)}

/* ---- Auth overlay (pre-login) ---- */
.overlay{
  position:fixed;inset:0;z-index:1000;
  background:radial-gradient(circle at 30% 20%, rgba(245,204,30,.10), transparent 50%),
              var(--overlay-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:24px;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:36px 32px;max-width:440px;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  text-align:center;
}
.overlay-brand{
  font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--accent);margin-bottom:16px;
}
.overlay-card h1{
  font-size:24px;font-weight:700;margin:0 0 8px 0;letter-spacing:.2px;
}
.overlay-sub{color:var(--muted);font-size:13px;margin:0 0 24px 0;line-height:1.5}
.overlay-form{display:flex;gap:8px;flex-direction:column;margin-bottom:8px}
.overlay-form input[type=email]{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-family:inherit;font-size:14px;
  text-align:center;
}
.overlay-form input[type=email]:focus{outline:none;border-color:var(--accent)}
.overlay-form button{
  background:#000;color:#fff;border:0;border-radius:10px;
  padding:12px 18px;font:700 13px system-ui;cursor:pointer;letter-spacing:.3px;
  transition:filter .15s;
}
.overlay-form button:hover:not(:disabled){filter:brightness(1.1)}
.overlay-form button:disabled{opacity:.6;cursor:not-allowed}
.overlay-msg{font-size:12px;color:var(--muted);margin:8px 0 0 0;min-height:18px}
.overlay-msg.ok{color:var(--good)}
.overlay-msg.error{color:var(--bad)}
.overlay-card.sent .overlay-form{display:none}
.overlay-card.sent .overlay-msg{font-size:14px;color:var(--text);margin-top:0}

/* Overlay state transitions: only one .overlay-state visible at a time */
.overlay-state[hidden]{display:none !important}

/* Loading state */
.overlay-spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);
  margin:28px auto 16px;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pick-periods state */
.overlay-card.picker-mode{max-width:640px}
.picker-modal-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 18px;
}
.picker-modal-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:8px;text-align:left;
}
.picker-modal-card[hidden]{display:none !important}
.picker-modal-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--accent);font-weight:700;margin-bottom:4px;
}
.picker-modal-label.prev{color:var(--prev)}
.picker-modal-card label{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
}
.picker-modal-card input[type=date],
.picker-modal-card select{
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;
  color-scheme:dark;flex:1;
}
.picker-modal-card select{margin-top:4px;cursor:pointer}
.overlay-cta{
  background:#000;color:#fff;border:0;border-radius:10px;
  padding:13px 28px;font:700 14px system-ui;cursor:pointer;letter-spacing:.3px;
  width:100%;margin-top:4px;transition:filter .15s;
}
.overlay-cta:hover{filter:brightness(1.1)}
@media (max-width:560px){
  .picker-modal-grid{grid-template-columns:1fr}
}

/* Period-type tabs (Weekly / Monthly / Custom) */
.period-type-row{
  display:flex;gap:6px;margin:20px 0 14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:4px;
}
.period-type-btn{
  flex:1;padding:10px 8px;border:0;border-radius:7px;background:transparent;
  color:var(--muted);font:600 13px system-ui;cursor:pointer;
  transition:background .15s, color .15s;
}
.period-type-btn:hover{color:var(--text)}
.period-type-btn.active{
  background:#000;color:#fff;
}

.period-panel{margin:14px 0 18px;text-align:left}
.period-panel[hidden]{display:none !important}
.period-panel > label{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:var(--muted);letter-spacing:.3px;font-weight:600;
  text-transform:uppercase;
}
.period-panel select{
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;
  cursor:pointer;width:100%;color-scheme:dark;
}
.period-hint{
  font-size:12px;color:var(--muted);margin:10px 2px 0;line-height:1.5;
}
.period-prev-line{margin:8px 2px 12px}
.period-prev-line #prevHintText{color:var(--text);font-weight:500}
.prev-override-link{
  color:var(--accent);text-decoration:none;margin-left:4px;font-weight:500;
}
.prev-override-link:hover{text-decoration:underline}
.prev-override-card{margin:0 0 14px}
.period-info-icon{
  display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;
  border-radius:50%;background:var(--panel-2);color:var(--muted);
  font-size:12px;cursor:help;margin:0 4px;user-select:none;
}
.period-info-icon:hover,
.period-info-icon:focus{color:var(--text);outline:none}

/* Empty-state for sections / tables with no data. */
.empty-state{
  padding:32px 18px;text-align:center;color:var(--muted);font-size:14px;
  font-style:italic;
}

/* Freshness indicator under the period banner. */
.freshness-line{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:6px 0 0;font-size:12px;color:var(--muted);
}
.freshness-line strong{color:var(--text);font-weight:600}
.freshness-line .sep{opacity:.4}

/* Overlay footer with sign-out + theme toggle, shown on loading + pickPeriod */
.overlay-footer{
  display:flex;justify-content:center;gap:18px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);
}
.overlay-footer button, .overlay-footer a{
  background:none;border:0;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:11px;padding:0;text-decoration:underline;
  text-underline-offset:3px;
}
.overlay-footer button:hover, .overlay-footer a:hover{color:var(--text)}

/* Minimum 16px font size everywhere inside the overlay — prevents
   mobile browsers from auto-zooming on focused inputs and improves
   readability of the small labels/hints. Listed near the end so it
   wins over the smaller sizes set by the individual rules above. */
.overlay .overlay-brand,
.overlay .overlay-sub,
.overlay .overlay-msg,
.overlay-card.sent .overlay-msg,
.overlay .overlay-form input,
.overlay .overlay-form button,
.overlay .overlay-cta,
.overlay .picker-modal-label,
.overlay .picker-modal-card label,
.overlay .picker-modal-card input,
.overlay .picker-modal-card select,
.overlay .period-type-btn,
.overlay .period-panel > label,
.overlay .period-panel select,
.overlay .period-hint,
.overlay .overlay-footer,
.overlay .overlay-footer button,
.overlay .overlay-footer a{
  font-size:16px;
}

/* Dashboard header toolbar */
.dash-header-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.dash-header-actions{display:flex;gap:8px}
.header-btn{
  background:#000;color:#fff;border:0;border-radius:8px;
  padding:8px 16px;font:600 13px system-ui;cursor:pointer;letter-spacing:.2px;
  transition:filter .15s;
}
.header-btn:hover{filter:brightness(1.1)}
.header-btn.secondary{
  background:transparent;border:1px solid var(--line);color:var(--text);
}
.header-btn.secondary:hover{background:var(--panel-2);filter:none}
:root[data-theme="light"] .header-btn:not(.secondary){color:#fff}
.header-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);cursor:pointer;user-select:none;
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;
}
.header-toggle:hover{color:var(--text)}
.header-toggle input{margin:0;accent-color:var(--accent);cursor:pointer}

/* Prominent period banner — replaces the small periodLine + legend. */
.period-banner{
  display:flex;align-items:stretch;gap:14px;
  margin:18px 0 8px;flex-wrap:wrap;
}
.period-box{
  flex:1 1 280px;min-width:0;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;display:flex;flex-direction:column;gap:4px;
  border-left:4px solid var(--accent);
}
.period-box.period-box-prev{border-left-color:var(--prev)}
.period-tag{
  font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.period-dates{
  font-size:18px;color:var(--text);font-weight:600;
  letter-spacing:.2px;line-height:1.3;
}
.period-meta{
  font-size:13px;color:var(--muted);font-weight:500;
}
.period-vs{
  align-self:center;font-size:12px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--muted);font-weight:600;padding:0 4px;
}
@media (max-width:560px){
  .period-vs{display:none}
  .period-box{flex-basis:100%}
}

/* Theme toggle (now lives only in the page footer) */
.theme-toggle{
  background:transparent;border:1px solid var(--line);
  border-radius:6px;padding:4px 10px;font:600 11px system-ui;
  color:var(--text);cursor:pointer;letter-spacing:.3px;
}
.theme-toggle:hover{background:var(--panel-2)}

/* Page footer — small, centered, holds the theme toggle */
.page-footer{
  display:flex;justify-content:center;
  margin-top:40px;padding:24px 0 32px;border-top:1px solid var(--line);
}

/* ---- Auth bar (post-login chip) ---- */
#authBar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;margin-bottom:14px;font-size:12px;color:var(--muted);
}
#authBar.signed-in{border-color:var(--good)}
#authBar .who{color:var(--text);font-weight:600}
#authBar .role{color:var(--accent);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
#authBar input[type=email]{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:5px 8px;font-family:inherit;font-size:12px;width:240px;
}
#authBar button{
  background:#000;color:#fff;border:0;border-radius:6px;
  padding:5px 12px;font:600 11px system-ui;cursor:pointer;
}
#authBar button.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
#authBar button:hover{filter:brightness(1.1)}
#authBar .mode-hint{margin-left:auto;font-size:11px}

/* =====================================================================
   Mobile / tablet pass (≤768px tablet portrait + landscape phone,
   ≤480px portrait phone). Existing rules at 1100/900px already do half
   the work; this block fills the gaps for narrower viewports.
   ===================================================================== */

@media (max-width: 768px){
  /* Page chrome: tighter padding so we keep horizontal room. */
  .wrap { padding: 16px 12px; }

  /* Dashboard header: title + actions wrap nicely; action row goes full width. */
  .dash-header-top { gap: 12px; }
  .dash-header-top h1 { font-size: 22px; line-height:1.25; }
  .dash-header-actions { width: 100%; }

  /* Tabs row: 5 buttons don't fit on a phone. Scroll horizontally
     instead of wrapping into a messy two-row stack. */
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabs button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Tables wider than the viewport scroll within their card instead of
     blowing out the whole page horizontally. Min-width keeps the
     columns readable; users swipe sideways inside the card. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table { min-width: 560px; }

  /* Charts: trim height so a card fits within the viewport. */
  .chart-wrap.tall { height: 320px; }
}

@media (max-width: 480px){
  .wrap { padding: 12px 8px; }

  .dash-header-top h1 { font-size: 18px; }
  .dash-header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .header-btn,
  .header-toggle { width: 100%; justify-content: center; }
  .header-toggle { text-align: left; }

  /* KPIs: explicit 1-col so 10 cards stack legibly. The auto-fit
     minmax(190px,1fr) leaves a thin awkward second column on some
     narrow widths. */
  .kpis { grid-template-columns: 1fr; }

  /* Operational filters: 1 col on phones (4→2 at 1100, 2→1 here). */
  .filters { grid-template-columns: 1fr; }

  /* Period-type tabs in the overlay: more breathing room for finger taps. */
  .period-type-btn { padding: 12px 6px; }

  /* Chart heights: smaller again on portrait phone. */
  .chart-wrap { height: 240px; }
  .chart-wrap.tall { height: 260px; }
}

/* Touch-device polish: make interactive bits at least 44px tall so they
   pass Apple/Android tap-target guidelines. Targets coarse pointers
   regardless of viewport width (covers iPad too). */
@media (hover: none) and (pointer: coarse) {
  .tabs button,
  .header-btn,
  .period-type-btn,
  .period-type-row label,
  .picker-modal-card input,
  .picker-modal-card select { min-height: 44px; }
  /* Disable hover-only filter brightness so taps don't leave a stuck
     bright state. */
  .header-btn:hover,
  .overlay-cta:hover,
  .period-type-btn:hover { filter: none; }
}
/* Section subdividers inside fleet cards' KPI tables */
tr.group-head td{
  background:var(--panel-2);
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:700;
  padding:5px 10px;
  text-align:left !important;
  border-bottom:1px solid var(--line);
}

/* Bucharest total card on Fleets tab — spans both columns to stand out */
.fleet-total{
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(245,204,30,.10), var(--shadow);
  grid-column: 1 / -1;
}
.fleet-total .row-head > div > strong{ color: var(--accent); }

/* Auto-diagnostic line under each fleet card's title.
   Colour-coded by the inferred reason for the volume change so the
   viewer sees in one second whether a rides drop is a supply problem
   (capacity), a demand problem, or healthy growth.
   - stable      grey       — volume essentially flat
   - supply      red        — rides drop tracks lower availability
   - bottleneck  red-orange — hours flat but cancellations rising (drivers maxed out)
   - demand      yellow     — rides drop with stable/higher availability
   - mixed       orange     — partial supply + partial demand
   - util        green      — better utilisation per hour
   - growth      good-green — proportional rides + hours growth */
.fleet-diag{
  margin:10px 0 12px;
  padding:8px 12px;
  font-size:12px;line-height:1.45;
  border-left:4px solid var(--muted);
  background:var(--panel-2);
  border-radius:6px;
  color:var(--text);
}
.fleet-diag-stable    {border-left-color:var(--muted);color:var(--muted)}
.fleet-diag-supply    {border-left-color:var(--bad)}
.fleet-diag-bottleneck{border-left-color:#ff9a3c}
.fleet-diag-demand    {border-left-color:#f5cc1e}
.fleet-diag-mixed     {border-left-color:#ffb86b}
.fleet-diag-util      {border-left-color:var(--good)}
.fleet-diag-growth    {border-left-color:var(--good)}