/* ═══════════════════════════════════════════════════════════════
   today.css — the landing page.

   This is the screen almost everyone opens first, every day, so it is built to
   READ rather than to hold everything. It used to be a stack of a dozen cards:
   two twelve-month trend charts, a KPI row, a "business summary", an "insights"
   block and five report tables — all of which now live in Finance → Reports,
   where someone goes deliberately.

   What is left answers three questions in order: how is today going, what is
   coming next, and what needs me. Owners and managers get a fourth in the
   middle — where the month stands and where it is heading.

   Colour MEANS something here: each accent maps to one kind of thing (money,
   people, time, warning) and nothing is tinted just to look busy. Everything
   adapts to dark mode through the existing tokens in style.css.
   ═══════════════════════════════════════════════════════════════ */

.today{
  --t-emerald:#0FA968; --t-emerald-soft:rgba(15,169,104,.12);
  --t-violet:#6D5BD0;  --t-violet-soft:rgba(109,91,208,.12);
  --t-amber:#E08A0B;   --t-amber-soft:rgba(224,138,11,.13);
  --t-rose:#DC5A57;    --t-rose-soft:rgba(220,90,87,.12);
  --t-sky:#2E90CC;     --t-sky-soft:rgba(46,144,204,.12);
  --t-gap:22px;
  display:flex; flex-direction:column; gap:var(--t-gap);
  padding:4px 2px 40px; max-width:1360px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode="light"]) .today{
    --t-emerald:#4FD3A0; --t-emerald-soft:rgba(79,211,160,.14);
    --t-violet:#A79EF5;  --t-violet-soft:rgba(167,158,245,.15);
    --t-amber:#F0B056;   --t-amber-soft:rgba(240,176,86,.15);
    --t-rose:#F3877B;    --t-rose-soft:rgba(243,135,123,.15);
    --t-sky:#6FC0C7;     --t-sky-soft:rgba(111,192,199,.15);
  }
}

/* ── greeting ─────────────────────────────────────────────── */
.t-greet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.t-greet h1{font-size:clamp(21px,2.6vw,29px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.t-greet .sub{font-size:13.5px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.t-greet-salon{font-weight:650;color:var(--text2)}
.t-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text2)}
.t-live .dot{width:7px;height:7px;border-radius:50%;background:var(--t-emerald);animation:tPulse 2.4s infinite}
@keyframes tPulse{
  0%{box-shadow:0 0 0 0 rgba(15,169,104,.45)}
  70%{box-shadow:0 0 0 9px rgba(15,169,104,0)}
  100%{box-shadow:0 0 0 0 rgba(15,169,104,0)}
}

/* ── hero: today's takings ────────────────────────────────── */
.t-hero{
  position:relative;overflow:hidden;border-radius:20px;color:#fff;padding:28px 30px;
  background:
    radial-gradient(900px 340px at 88% -30%, rgba(233,161,59,.34), transparent 60%),
    radial-gradient(700px 300px at 8% 120%, rgba(109,91,208,.36), transparent 62%),
    linear-gradient(140deg, var(--primary-dark) 0%, var(--primary) 52%, var(--primary-light) 100%);
  box-shadow:0 10px 34px rgba(7,42,46,.26);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;align-items:center;
}
/* Fine diagonal sheen — texture with no image request. */
.t-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.028) 26px 27px);
}
@media (max-width:900px){ .t-hero{grid-template-columns:1fr;gap:24px;padding:24px 22px} }
.t-hero-l{position:relative;z-index:1;min-width:0}
.t-hero-lbl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.t-hero-amt{
  font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  margin:8px 0 12px;font-variant-numeric:tabular-nums;
}
.t-delta{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
}
.t-delta.up{color:#8FF0C4}
.t-delta.down{color:#FFB3AC}
.t-delta.flat{color:rgba(255,255,255,.82)}
.t-hero-stats{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.t-hero-stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.t-hero-stat .k{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:2px}
.t-hero-details{display:none}

/* hourly takings — interactive */
.t-hours{position:relative;z-index:1}
.t-hours-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:12px}
.t-hours-h .t-hero-lbl{color:rgba(255,255,255,.55)}
.t-hours-h .peak{font-size:12px;color:rgba(255,255,255,.72);font-weight:600}
.t-bars{display:flex;align-items:flex-end;gap:5px;height:104px}
.t-bar{
  flex:1;position:relative;border-radius:5px 5px 3px 3px;min-height:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.44));
  transition:transform .16s cubic-bezier(.2,.8,.3,1),filter .16s;transform-origin:bottom;
}
.t-bar.now{background:linear-gradient(180deg,var(--gold),rgba(233,161,59,.55))}
.t-bar:hover{transform:scaleY(1.06);filter:brightness(1.18)}
.t-bar[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:rgba(6,26,28,.96);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;
  padding:6px 9px;border-radius:7px;z-index:5;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.t-hours-ax{display:flex;gap:5px;margin-top:8px}
.t-hours-ax span{flex:1;text-align:center;font-size:9.5px;color:rgba(255,255,255,.45);font-weight:600}

/* ── section headings ─────────────────────────────────────── */
.t-sec-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.t-sec-h h2{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.t-sec-h h2 .i{color:var(--text3)}
.t-sec-h .more{
  font-size:12.5px;font-weight:600;color:var(--primary-ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
}
.t-sec-h .more:hover{text-decoration:underline}

/* ── panels ───────────────────────────────────────────────── */
.t-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.t-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--t-gap)}
@media (max-width:980px){ .t-grid2{grid-template-columns:1fr} }

/* ── next up ──────────────────────────────────────────────── */
.t-next{display:flex;flex-direction:column;gap:9px}
.t-appt{
  display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:13px;
  background:var(--surface2);border:1px solid transparent;cursor:pointer;
  transition:border-color .15s,transform .13s,background .15s;
}
.t-appt:hover{border-color:var(--primary-light);transform:translateX(2px);background:var(--hover)}
.t-appt-time{flex:none;width:64px;text-align:center}
.t-appt-time .h{font-size:15px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.t-appt-time .m{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.05em}
.t-appt-bar{width:3px;align-self:stretch;border-radius:2px;background:var(--t-violet);flex:none}
.t-appt-bar.soon{background:var(--t-amber)}
.t-appt-bar.now{background:var(--t-emerald)}
.t-appt-b{flex:1;min-width:0}
.t-appt-nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-appt-sv{font-size:12px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-appt-r{flex:none;text-align:right}
.t-appt-r .amt{font-size:13.5px;font-weight:700}
.t-in{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--t-amber-soft);color:var(--t-amber);white-space:nowrap}

/* ── month overview ───────────────────────────────────────── */
.t-month-mobile{display:none}
.t-month{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:760px){ .t-month{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center} }
.t-ring{position:relative;width:150px;height:150px;flex:none}
.t-ring svg{transform:rotate(-90deg)}
.t-ring circle{fill:none;stroke-linecap:round}
.t-ring .track{stroke:var(--surface2)}
.t-ring .fill{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.3,1)}
.t-ring-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.t-ring-mid .p{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.t-ring-mid .l{font-size:10.5px;color:var(--text3);font-weight:600;margin-top:4px;max-width:100px;line-height:1.3}
.t-mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px;width:100%}
.t-mstat{padding:13px 15px;border-radius:13px;background:var(--surface2);border-left:3px solid var(--a,var(--primary))}
.t-mstat .k{font-size:11px;font-weight:600;color:var(--text3);letter-spacing:.03em}
.t-mstat .v{font-size:19px;font-weight:800;margin-top:4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t-mstat .d{font-size:11.5px;margin-top:3px;font-weight:600}

/* .t-seg is shared — the revenue-history granularity control uses it. The
   six-month .t-trend/.t-tbar rules that used to sit here went with the chart. */
.t-seg{display:inline-flex;background:var(--surface2);border-radius:999px;padding:3px;gap:2px}
.t-seg button{padding:5px 13px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--text3);transition:all .15s;border:none;background:none;cursor:pointer}
.t-seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* ── REVENUE HISTORY ───────────────────────────────────────────────────────
   Up to 30 bars, so they are thinner and gapless-ish where the 6-month trend
   above can afford 7px gutters. The zero line only shows itself when a bucket
   is actually negative — a refund-only day — because an always-visible
   baseline on an all-positive chart is furniture, not information. */
.rh{margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.rh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rh-h{font-size:12.5px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.rh-sum{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rh-total{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.rh-sub{font-size:11.5px;color:var(--text3);font-weight:600;margin-top:2px}
.rh-delta{font-size:12.5px;font-weight:700;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}

.rh-plot{position:relative;height:132px}
.rh-bars{position:absolute;inset:0;display:flex;align-items:stretch;gap:3px}
.rh-col{flex:1;position:relative;min-width:0}
/* min-height 0, deliberately: a day with no trade must draw NOTHING. A 2px
   floor here would give every closed day a stub identical to a genuine small
   sale, which is the one thing a revenue chart must not do. The visible floor
   for a real sale is applied in _rhBody() instead, where zero is known. */
.rh-bar{
  position:absolute;left:0;right:0;border-radius:3px 3px 2px 2px;min-height:0;
  background:linear-gradient(180deg,var(--chart-1),color-mix(in srgb,var(--chart-1) 40%,transparent));
  transition:filter .16s,height .45s cubic-bezier(.2,.8,.3,1);
}
.rh-bar.cur{background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 40%,transparent))}
.rh-bar.neg{background:linear-gradient(180deg,color-mix(in srgb,var(--t-rose) 40%,transparent),var(--t-rose))}
.rh-col:hover .rh-bar{filter:brightness(1.18)}
/* Hover is on the full-height COLUMN while the tooltip is drawn on the bar:
   a quiet day is a 2px bar and far too small a target to ever hit, but the
   label still wants to sit with the value it describes. */
.rh-bar[data-tip]{cursor:default}
.rh-col:hover .rh-bar[data-tip]::after,
.rh-col:active .rh-bar[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--surface);font-size:11px;font-weight:600;white-space:nowrap;
  padding:6px 9px;border-radius:7px;z-index:6;pointer-events:none;box-shadow:var(--shadow);
}
.rh-zero{position:absolute;left:0;right:0;height:1px;background:var(--border);pointer-events:none}
.rh-ax{display:flex;gap:3px;margin-top:7px}
.rh-ax span{flex:1;min-width:0;text-align:center;font-size:9.5px;color:var(--text3);font-weight:600;
  overflow:hidden;white-space:nowrap}
.rh-foot{margin-top:10px;font-size:11.5px;color:var(--text3);font-weight:600}

@media (max-width:640px){
  .rh-plot{height:108px}
  .rh-bars,.rh-ax{gap:2px}
  .rh-total{font-size:22px}
  .rh-head{gap:8px}
  .rh-ax span{font-size:9px}
}

/* insight lines */
.t-insights{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.t-ins{display:flex;gap:11px;font-size:13px;line-height:1.55;color:var(--text2);align-items:flex-start}
.t-ins .i{flex:none;margin-top:2px;color:var(--t-amber)}
.t-ins b{color:var(--text);font-weight:700}

/* ── needs attention ──────────────────────────────────────── */
.t-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:13px}
.t-act{
  display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);text-align:left;
  transition:transform .15s cubic-bezier(.2,.8,.3,1),box-shadow .15s,border-color .15s;
}
.t-act:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--c,var(--primary))}
.t-act-ico{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--cs,var(--surface2));color:var(--c,var(--primary))}
.t-act-b{flex:1;min-width:0}
.t-act-n{font-size:20px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c,var(--text))}
.t-act-t{font-size:12.5px;color:var(--text2);margin-top:4px;line-height:1.4}
.t-act-go{flex:none;color:var(--text3);opacity:0;transition:opacity .15s,transform .15s}
.t-act:hover .t-act-go{opacity:1;transform:translateX(2px)}

/* ── all clear / empty ────────────────────────────────────── */
.t-clear{
  display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:16px;
  background:var(--t-emerald-soft);border:1px solid color-mix(in srgb,var(--t-emerald) 28%,transparent);
}
.t-clear-ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--t-emerald);flex:none}
.t-clear-t{font-size:14.5px;font-weight:700}
.t-clear-s{font-size:12.5px;color:var(--text2);margin-top:2px}
.t-empty{text-align:center;padding:30px 18px;color:var(--text3);font-size:13.5px}
.t-empty .i{opacity:.3;margin-bottom:10px}
.t-empty-sub{font-size:12.5px;margin-top:5px}

@media (prefers-reduced-motion:reduce){
  .today *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── phone: the first useful view fits above the fold ─────────────────────
   The desktop dashboard keeps its analytical chart. On a phone the amount,
   comparison and next three bookings are the decision-making information; the
   large chart is removed from the hero instead of being stacked underneath it. */
body.mobile-shell .today{
  --t-gap:14px;
  width:100%;
  max-width:none;
  gap:var(--t-gap);
  padding:1px 0 24px;
}
body.mobile-shell .t-greet{
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  padding:0 2px;
}
body.mobile-shell .t-greet > div:first-child{min-width:0}
body.mobile-shell .t-greet h1{
  font-size:22px;
  line-height:1.14;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.mobile-shell .t-greet .sub{font-size:12px;margin-top:4px}
body.mobile-shell .t-live{display:none}

body.mobile-shell .t-hero{
  grid-template-columns:1fr;
  gap:0;
  padding:17px 16px 16px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(7,42,46,.2);
}
body.mobile-shell .t-hours{display:none}
body.mobile-shell .t-hero-lbl{font-size:9.5px;letter-spacing:.13em}
body.mobile-shell .t-hero-amt{
  font-size:38px;
  margin:5px 0 9px;
}
body.mobile-shell .t-delta{
  gap:5px;
  padding:5px 10px;
  font-size:10.5px;
}
body.mobile-shell .t-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}
body.mobile-shell .t-hero-stat{
  min-width:0;
  padding:8px 7px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(255,255,255,.07);
}
body.mobile-shell .t-hero-stat .v{
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
  white-space:nowrap;
}
body.mobile-shell .t-hero-stat .k{
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
  font-size:9.5px;
  white-space:nowrap;
}
body.mobile-shell .t-hero-details{
  min-height:32px;
  margin:11px -2px -5px auto;
  padding:5px 2px 5px 10px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  color:rgba(255,255,255,.78);
  background:transparent;
  font:inherit;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
}
body.mobile-shell .t-hero-details:active{color:#fff}

body.mobile-shell .t-sec-h{gap:8px;margin:0 2px 8px}
body.mobile-shell .t-sec-h h2{font-size:14.5px;gap:7px}
body.mobile-shell .t-sec-h .more{font-size:11.5px}
body.mobile-shell .t-panel{
  padding:10px;
  border-radius:14px;
  box-shadow:none;
}
body.mobile-shell .t-hero-lbl{letter-spacing:.08em}
body.mobile-shell .t-sec-h{margin-top:2px}
body.mobile-shell .t-next{gap:7px}
body.mobile-shell .t-appt{
  gap:9px;
  min-height:58px;
  padding:9px 10px;
  border-radius:11px;
}
body.mobile-shell .t-appt-time{width:48px}
body.mobile-shell .t-appt-time .h{font-size:13.5px}
body.mobile-shell .t-appt-nm{font-size:13px}
body.mobile-shell .t-appt-sv{font-size:10.5px}
body.mobile-shell .t-appt-r .amt{font-size:12px}
body.mobile-shell .t-empty{
  padding:14px 10px;
  font-size:12.5px;
  line-height:1.35;
}
body.mobile-shell .t-empty .i{width:22px;height:22px;margin-bottom:5px}

/* Mobile month summary: four decisions, not a desktop report stacked into a
   phone. The ring and the narrative stay on larger screens.

   .t-month-details is NOT hidden any more. It used to hold the six-month bar
   chart this comment names, which was removed; what lives there now is the
   revenue history, and that was built for a phone from the start — it thins
   its own axis labels past fourteen points and has a max-width:640px block
   sizing the plot. It was simply never displayed, because the rule hiding its
   predecessor outlived the thing it was written for. */
body.mobile-shell .t-month-desktop{display:none}
body.mobile-shell .t-month-mobile{display:block}
body.mobile-shell .t-month-mobile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
body.mobile-shell .t-month-kpi{
  min-width:0;
  min-height:84px;
  padding:11px 10px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface2);
}
body.mobile-shell .t-month-kpi.primary{
  border-color:color-mix(in srgb,var(--gold) 35%,var(--border));
  background:color-mix(in srgb,var(--gold) 10%,var(--surface));
}
body.mobile-shell .t-month-kpi .k{
  overflow:hidden;
  color:var(--text3);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.mobile-shell .t-month-kpi .v{
  overflow:hidden;
  margin-top:5px;
  color:var(--text);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.mobile-shell .t-month-kpi .d{
  overflow:hidden;
  margin-top:3px;
  color:var(--text3);
  font-size:9.5px;
  font-weight:600;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.mobile-shell .t-month-kpi .d.up,
body.mobile-shell .t-month-pace strong.up{color:var(--t-emerald)}
body.mobile-shell .t-month-kpi .d.down,
body.mobile-shell .t-month-pace strong.down{color:var(--t-rose)}
body.mobile-shell .t-month-pace{padding:12px 3px 2px}
body.mobile-shell .t-month-pace > div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--text3);
  font-size:9.5px;
  font-weight:650;
}
body.mobile-shell .t-month-pace strong{font-size:9.5px;text-align:right}
body.mobile-shell .t-month-pace-track{
  height:7px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface2);
}
body.mobile-shell .t-month-pace-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--primary-light),var(--gold));
}