/* Today dashboard. Tokens only — colours come from theme.css. */

/* period switcher, sits on the board strip */
.seg{display:inline-flex;border:1px solid var(--board-line);border-radius:var(--r-md);overflow:hidden}
.seg button{background:transparent;color:var(--on-board-muted);border:none;border-right:1px solid var(--board-line);
  font:inherit;font-size:var(--fs-sm);font-weight:700;padding:7px 12px;cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--on-board)}
.seg button.active{background:var(--chalk);color:var(--chalk-ink)}

.today-custom{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.today-custom .field{margin:0}

.today-empty{max-width:520px;padding:var(--sp-5);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface)}
.today-empty h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.today-empty p{color:var(--ink-2);margin-bottom:var(--sp-4)}

/* stat strip */
.today-stats{display:grid;grid-template-columns:repeat(5,1fr)}
.today-stats .stat{min-width:0;border-right:1px solid var(--line)}
.today-stats .stat:last-child{border-right:none}
.stat .delta{display:inline-block;margin-top:4px;font-size:var(--fs-xs);font-weight:800;padding:1px 7px;
  border-radius:999px;background:var(--surface-2);color:var(--muted);font-variant-numeric:tabular-nums}
.stat .delta.good{background:var(--mint-soft);color:var(--mint)}
.stat .delta.bad{background:var(--brick-soft);color:var(--brick)}
.stat .was{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.today-note{font-size:var(--fs-sm);color:var(--ink-2);margin:var(--sp-2) 2px 0}
.today-note a{color:var(--mint);font-weight:700;cursor:pointer}

/* chart grid */
.today-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.chart-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);min-width:0}
.chart-panel.wide{grid-column:1 / -1}
.chart-panel header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
.chart-panel h2{font-size:var(--fs-md);font-weight:800;color:var(--ink)}
.chart-hint,.chart-key{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.chart-key i{display:inline-block;width:14px;height:0;border-top:2px solid var(--ink);margin:0 5px 3px 10px;vertical-align:middle}
.chart-key i.key-prev{border-top:2px dashed var(--line-strong)}
.chart-key.bars i{width:10px;height:10px;border:none;border-radius:2px;background:var(--ink);margin-bottom:1px}
.chart-key.bars i.key-prev{background:var(--line-strong)}
.chart-box{position:relative;height:220px}
.chart-panel.wide .chart-box{height:240px}

/* ranked lists (top / slow sellers) */
.rank{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:10px}
.rank li{counter-increment:r;display:grid;grid-template-columns:22px 1fr auto;gap:2px 10px;align-items:center}
.rank li::before{content:counter(r);grid-row:1 / 3;font-weight:800;color:var(--muted);font-size:var(--fs-sm);text-align:center}
.rank .name{font-weight:700;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .fig{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.rank .bar{grid-column:2 / 4;height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.rank .bar span{display:block;height:100%;background:var(--mint);border-radius:999px}
.rank.slow li{padding-bottom:6px;border-bottom:1px solid var(--line)}
.rank.slow li:last-child{border-bottom:none}
.rank .none{color:var(--muted);font-size:var(--fs-sm)}
.rank li.none::before{content:none}

/* needs attention */
.attention .list-row{align-items:center;padding:var(--sp-3) 0;background:transparent}
.attention .list-row:last-child{border-bottom:none}
.att-main{display:flex;gap:var(--sp-3);align-items:flex-start;min-width:0}
.att-icon{flex-shrink:0;width:32px;height:32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:var(--amber-soft);color:var(--amber)}
.att-icon.margin{background:var(--brick-soft);color:var(--brick)}
.att-title{font-weight:700;font-size:var(--fs-sm)}
.att-detail{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.attention .all-good{display:flex;gap:var(--sp-2);align-items:center;color:var(--mint);font-weight:700;font-size:var(--fs-sm)}

@media (max-width:1100px){
  .today-stats{grid-template-columns:repeat(3,1fr)}
  .today-stats .stat{border-bottom:1px solid var(--line)}
  .today-stats .stat:nth-child(3n){border-right:none}
}
@media (max-width:700px){
  .page-head .page-actions{margin-left:0;width:100%}
  .seg{width:100%}
  .seg button{flex:1;padding:7px 4px;font-size:var(--fs-xs)}
  .today-stats{grid-template-columns:repeat(2,1fr)}
  .today-stats .stat{padding:12px 14px}
  .today-stats .stat:nth-child(3n){border-right:1px solid var(--line)}
  .today-stats .stat:nth-child(2n){border-right:none}
  .today-stats .stat:last-child{grid-column:1 / -1;border-bottom:none}
  .today-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .chart-box,.chart-panel.wide .chart-box{height:200px}
  .attention .list-row{flex-direction:column;align-items:stretch}
  .attention .list-row-actions{justify-content:flex-start;padding-left:44px}
}

/* value card: what CleoCafe found, and what it actually saved */
.value-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--mint);
  border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.value-head{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:flex-end}
.value-fig{display:flex;flex-direction:column;gap:2px;min-width:0}
.value-fig .lbl{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.value-fig .big{font-size:var(--fs-2xl);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.value-fig.found .big{color:var(--amber)}
.value-fig.saved .big{color:var(--mint)}
.value-fig .was{font-size:var(--fs-xs);color:var(--muted)}
.value-head .btn{margin-left:auto}
.value-card .hint{margin-top:var(--sp-3)}
.value-items{margin-top:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-2)}
.value-items .list-row-actions b{font-variant-numeric:tabular-nums}

@media (max-width:700px){
  .value-head{gap:var(--sp-4)}
  .value-head .btn{margin-left:0;flex-basis:100%}
  .value-fig .big{font-size:var(--fs-xl)}
}

/* Busy times: weekday x hour heatmap from in-app bill times. Darker = busier;
   outlined cells are the quietest open hours, good for an offer. */
.busy-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.busy-toggle button{background:transparent;border:none;border-right:1px solid var(--line);padding:3px 10px;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);cursor:pointer}
.busy-toggle button:last-child{border-right:none}
.busy-toggle button.active{background:var(--ink);color:var(--surface)}
.busy-heatmap{overflow-x:auto}
.busy-grid{display:grid;gap:3px;min-width:min-content}
.busy-h{font-size:10px;color:var(--muted);font-weight:700;text-align:center;white-space:nowrap}
.busy-d{font-size:var(--fs-xs);color:var(--ink-2);font-weight:700;align-self:center}
.busy-c{height:24px;border-radius:4px;border:1px solid var(--line)}
.busy-c.quiet{outline:2px dashed var(--amber);outline-offset:-2px}
.busy-note{margin-top:var(--sp-3);line-height:1.5}