/* =========================================================
   TrackDaily page. Uses tokens + components from style.css.
   ========================================================= */
.td-page { --td: #10b981; --td-dark: #059669; }

/* ---------- dashboard mockup (hero) ---------- */
.td-dash { display: grid; grid-template-columns: 1fr; min-height: 440px; }
@media (min-width: 760px) { .td-dash { grid-template-columns: 200px 1fr 270px; } }
.td-dash .pos-side span.on { background: #059669; }
.td-main { padding: 16px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.td-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-head h4 { font-size: 16px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.td-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #cbd5e1; padding: 5px 10px; border-radius: 8px; background: #16213a; border: 1px solid #22304f; }
.td-sel svg.i { width: 13px; height: 13px; }
.td-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .td-kpis { grid-template-columns: repeat(4, 1fr); } }
.td-kpi { border-radius: 12px; background: #16213a; border: 1px solid #22304f; padding: 12px; min-width: 0; }
.td-kpi small { display: block; font-size: 11px; color: #98a7c0; font-weight: 600; }
.td-kpi b { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-kpi em { font-style: normal; font-size: 11px; font-weight: 700; color: #4ade80; }
.td-kpi em.neg { color: #fbbf24; }
.td-kpi--brand { background: #059669; border-color: #059669; }
.td-kpi--brand small, .td-kpi--brand em { color: rgba(255,255,255,.9); }
.td-chart { border-radius: 12px; background: #16213a; border: 1px solid #22304f; padding: 12px 14px; }
.td-chart__hd { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.td-legend { display: flex; gap: 12px; font-size: 11px; color: #98a7c0; font-weight: 500; }
.td-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.td-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.td-bars > div { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; }
.td-bars .pair { display: flex; align-items: flex-end; gap: 3px; }
.td-bars .pair i { flex: 1; border-radius: 4px 4px 1px 1px; display: block; }
.td-bars .pair i.r { background: #10b981; }
.td-bars .pair i.e { background: #3b5583; }
.td-bars small { text-align: center; font-size: 10.5px; color: #7687a5; }
.td-rest { border-radius: 12px; background: #16213a; border: 1px solid #22304f; overflow: hidden; }
.td-rest__row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #22304f; font-size: 12.5px; }
.td-rest__row:last-child { border-bottom: 0; }
.td-rest__row b { font-weight: 600; color: #eaeff7; display: flex; align-items: center; gap: 8px; }
.td-rest__row b i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.td-rest__row span { color: #98a7c0; font-variant-numeric: tabular-nums; }
.td-rest__row .m { font-weight: 700; color: #4ade80; min-width: 44px; text-align: right; }
.td-debt { display: grid; gap: 8px; margin-bottom: 16px; }
.td-debt div { display: grid; gap: 4px; font-size: 12.5px; }
.td-debt .top { display: flex; justify-content: space-between; color: #cbd5e1; }
.td-debt .top b { color: #fbbf24; font-variant-numeric: tabular-nums; }
.td-debt .bar { height: 6px; border-radius: 9px; background: #22304f; overflow: hidden; display: flex; }
.td-debt .bar i { display: block; height: 100%; }

/* ---------- supplier payment mockup ---------- */
.pay { width: 100%; max-width: 480px; margin: 0 auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.pay__hd { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.pay__hd .av { width: 40px; height: 40px; border-radius: 12px; background: #d1fae5; color: #047857; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
:root[data-theme="dark"] .pay__hd .av { background: rgba(16,185,129,.16); color: #34d399; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pay__hd .av { background: rgba(16,185,129,.16); color: #34d399; } }
.pay__hd b { display: block; font-size: 15.5px; }
.pay__hd small { color: var(--muted); font-size: 13px; }
.pay__hd .debt { margin-left: auto; text-align: right; }
.pay__hd .debt b { color: var(--warn); font-variant-numeric: tabular-nums; }
.pay__body { padding: 16px 18px; display: grid; gap: 12px; }
.pay__amt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 2px solid #10b981; font-family: var(--font-head); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pay__amt small { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--muted); }
.pay__auto { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.pay__auto .sw { width: 36px; height: 20px; border-radius: 99px; background: #10b981; position: relative; flex-shrink: 0; }
.pay__auto .sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pay__auto b { color: var(--text); }
.inv { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 13.5px; }
.inv .cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; }
.inv.on .cb { background: #10b981; border-color: #10b981; color: #fff; }
.inv .cb svg.i { width: 12px; height: 12px; stroke-width: 3; }
.inv b { display: block; font-weight: 600; }
.inv small { color: var(--muted); font-size: 12px; }
.inv .a { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.inv .a small { display: block; font-weight: 600; color: #059669; }
.inv.part .a small { color: var(--warn); }
.pay__ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pay__ft b { color: var(--text); }
.pay__ft .go { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: #10b981; color: #fff; font-weight: 700; font-size: 13.5px; }
.pay__ft .go svg.i { width: 15px; height: 15px; }

/* ---------- kitchen sales mockup ---------- */
.ks { width: 100%; max-width: 520px; margin: 0 auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.ks__hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--muted); font-weight: 500; flex-wrap: wrap; }
.ks__hd img { width: 22px; height: 22px; border-radius: 6px; }
.ks__hd .tag { margin-left: auto; }
.ks__body { padding: 16px; display: grid; gap: 14px; }
.ks__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ks__kpis div { border-radius: 12px; border: 1px solid var(--border); padding: 10px 12px; min-width: 0; }
.ks__kpis small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ks__kpis b { font-family: var(--font-head); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks__cat { display: grid; gap: 9px; }
.ks__cat div { display: grid; grid-template-columns: 96px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.ks__cat .bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ks__cat .bar i { display: block; height: 100%; border-radius: 99px; background: #10b981; }
.ks__cat span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ks__rest { display: flex; gap: 8px; flex-wrap: wrap; }
.ks__rest span { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.ks__rest span.on { background: #d1fae5; color: #047857; }
:root[data-theme="dark"] .ks__rest span.on { background: rgba(16,185,129,.16); color: #34d399; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ks__rest span.on { background: rgba(16,185,129,.16); color: #34d399; } }

/* ---------- roles ---------- */
.roles { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .roles { grid-template-columns: 1fr 1fr; } }
.role .who { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s4); }
.role .who .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); border: 1px solid var(--brand-line); }
.role--mgr .who .ic { background: rgba(16,185,129,.12); color: #059669; border-color: rgba(16,185,129,.3); }
.role .who b { display: block; font-family: var(--font-head); font-size: 21px; }
.role .who small { color: var(--muted); font-size: 13.5px; }
.role ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.role li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.role li svg.i { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--ok); stroke-width: 2.6; }
.role li.no svg.i { color: var(--muted); }
.role li.no { color: var(--muted); }

.td-accent { color: #059669; }
:root[data-theme="dark"] .td-accent { color: #34d399; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .td-accent { color: #34d399; } }
.roles > * { min-width: 0; }
.role .who > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .role .who b { font-size: 18px; } }

/* hero: keep "Every day." together on its own line; tidy feature row */
.pos-hero .td-h1 { max-width: 24ch; font-size: clamp(40px, 5.4vw, 72px); }
.td-h1 .td-accent { white-space: nowrap; }
.td-meta { justify-content: center; }
@media (max-width: 640px) {
  .td-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 360px; margin-left: auto; margin-right: auto; text-align: left; }
  .td-meta div { font-size: 13px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
}
.td-kpi b .cur { font-size: .7em; font-weight: 700; opacity: .75; }