/* ============================================================================
   Owner mobile dashboard (D-080) — status-dashboard design tokens, phone-first.
   ============================================================================ */

:root{
  --bg:#0E1116; --panel:#161B22; --panel2:#1B212B; --line:#28303B;
  --text:#E7EBF1; --muted:#8A94A4; --faint:#5A6472;
  --accent:#F5B33C; --accent-soft:rgba(245,179,60,.14);
  --ok:#3ECF8E; --info:#5B9CFF; --bad:#FF6B6B; --warn:#F5B33C;
  --track:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --mono:"SF Mono","Cascadia Code",ui-monospace,"Roboto Mono",monospace;
  --sans:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Inter,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#F5F4F0; --panel:#FFFFFF; --panel2:#FAF9F5; --line:#E5E2DA;
    --text:#1B2027; --muted:#5E6673; --faint:#98A0AC;
    --accent:#B9770A; --accent-soft:rgba(185,119,10,.10);
    --ok:#1F9D6A; --info:#2E6FE0; --bad:#C43D3D; --warn:#B9770A;
    --track:rgba(0,0,0,.07);
    --shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(20,24,32,.10);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--text); line-height:1.45;
  background:radial-gradient(900px 420px at 85% -10%, var(--accent-soft), transparent 60%), var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.view{min-height:100vh}

/* ---- login ---- */
#login-view{display:flex; align-items:center; justify-content:center; padding:24px 16px}
.login-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 20px}
.kicker{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600}
.login-card h1{margin:6px 0 4px; font-size:24px; letter-spacing:-.02em}
.login-card .sub{margin:0 0 16px; font-size:13px; color:var(--muted)}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:12px}
input{display:block; width:100%; margin-top:4px; padding:11px 12px; font-size:16px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:10px}
input:focus{outline:none; border-color:var(--accent)}
.btn{width:100%; padding:12px; font-size:16px; font-weight:700; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#1B2027}
.btn:disabled{opacity:.6}
.err{color:var(--bad); font-size:13px; min-height:18px; margin-bottom:8px}
.login-card .home{display:block; text-align:center; margin-top:14px; color:var(--muted);
  text-decoration:none; font-size:13px}

/* ---- app bar ---- */
.bar{display:flex; align-items:center; gap:10px; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5}
.bar .home{font-size:20px; color:var(--muted); text-decoration:none; line-height:1}
.who{flex:1; min-width:0}
.who-email{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chips{display:flex; gap:6px; overflow-x:auto; padding:2px 0; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel2); color:var(--muted); cursor:pointer}
.chip.active{border-color:var(--accent); background:var(--accent-soft); color:var(--text)}
.iconbtn{flex:0 0 auto; width:38px; height:38px; font-size:17px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer}
.iconbtn:active{transform:scale(.95)}
.iconbtn:disabled{opacity:.35}

/* ---- date bar ---- */
.datebar{display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 14px 0}
.date-label{min-width:150px; text-align:center; font-weight:700; font-size:15px}
.date-label .d{color:var(--muted); font-weight:500; font-size:12px; display:block}

/* ---- content ---- */
main{max-width:560px; margin:0 auto; padding:12px 14px 32px; display:flex; flex-direction:column; gap:12px}
.empty{color:var(--muted); text-align:center; padding:32px 0}
.problem{color:var(--bad); text-align:center; padding:24px 12px; font-size:14px}

.hero{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 16px; text-align:center}
.hero .big{font-family:var(--mono); font-size:clamp(34px,11vw,44px); font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.hero .big.neg{color:var(--bad)}
.hero .cap{font-size:12px; color:var(--muted); margin-top:2px}
.hero .row{display:flex; justify-content:center; gap:18px; margin-top:10px; font-size:13px}
.hero .row b{font-family:var(--mono); font-variant-numeric:tabular-nums}
.hero .row .bad{color:var(--bad)}

.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 14px}
.kpi .v{font-family:var(--mono); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}
.kpi .k{font-size:11.5px; color:var(--muted); margin-top:2px}
.kpi .v .sub{font-size:13px; color:var(--muted); font-weight:500}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px}
.card h3{margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

.chan{display:flex; align-items:baseline; gap:10px; padding:9px 0; border-top:1px solid var(--line)}
.chan:first-of-type{border-top:none}
.chan .nm{flex:1; font-weight:600; font-size:14.5px}
.chan .nm .cnt{color:var(--faint); font-weight:500; font-size:12px}
.chan .net{font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; font-size:15px}
.chan .split{font-size:11.5px; color:var(--muted); font-family:var(--mono); font-variant-numeric:tabular-nums}
.chan .rf{font-size:11.5px; color:var(--bad); font-family:var(--mono)}

.line-item{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:14px}
.line-item:first-of-type{border-top:none}
.line-item .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.line-item .mut{color:var(--muted); font-size:12px}
.line-item .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--line)}
.badge.ok{color:var(--ok); border-color:var(--ok)}
.badge.warn{color:var(--warn); border-color:var(--warn)}
.badge.bad{color:var(--bad); border-color:var(--bad)}

.foot{text-align:center; color:var(--faint); font-size:11.5px; padding:0 0 24px}

/* ---- 7-day revenue trend (D-084) ---- */
/* Series colors: dataviz-validated categorical slots (dark steps default, light in the media
   query below) — identity is also carried by the legend + tap detail (relief rule). */
:root{ --tr-tickets:#3987E5; --tr-cafe:#008300; --tr-retail:#D55181; }
@media (prefers-color-scheme:light){
  :root{ --tr-tickets:#2A78D6; --tr-cafe:#008300; --tr-retail:#E87BA4; }
}
.trend svg{display:block; width:100%; height:auto}
.trend .bar{cursor:pointer}
.trend .bar rect{transition:opacity .12s}
.trend .bar.dim rect{opacity:.35}
.trend .daylab{font:500 10px var(--sans); fill:var(--muted)}
.trend .maxlab{font:600 10px var(--mono); fill:var(--faint)}
.trend .gridline{stroke:var(--track); stroke-width:1}
.trend-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--muted)}
.trend-legend .sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.trend-detail{margin-top:8px; font-size:12.5px; min-height:18px}
.trend-detail b{font-family:var(--mono); font-variant-numeric:tabular-nums}
.trend-detail .muted{color:var(--muted)}

/* D-118: a fiscal problem the owner must act on. Only rendered when action is needed, so it is allowed
   to be loud — a banner that is always there is a banner nobody reads. */
.alert{border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; border:1px solid}
.alert .at{font-weight:700; font-size:15px}
.alert .ax{font-size:13px; margin-top:4px; opacity:.92}
.alert.bad{background:#fee2e2; border-color:#fca5a5; color:#7f1d1d}
.alert.warn{background:#fef9c3; border-color:#fde047; color:#713f12}
@media (prefers-color-scheme: dark){
  .alert.bad{background:#450a0a; border-color:#7f1d1d; color:#fecaca}
  .alert.warn{background:#422006; border-color:#854d0e; color:#fef08a}
}