/* HERO POS's Overview (overview.js) and its charts (charts.js). Layout and look from the owner's
   pick, app/mockups/pos-hq-look-options.html, version A · Bento. Colours are the theme tokens
   from app.css only, so the cards follow Night, Dusk and Day. */

.ov { display: grid; gap: 16px; min-width: 0 }
.ov-top { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline }
.ov-top h2 .m { font-weight: 500 }
.ov .m { color: var(--muted); font-size: 12px }

/* Desktop: hero · bars · radar / checklist · running totals · income / the table, income beside it. */
.ov-grid { display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(270px, 330px);
  grid-template-areas: "hero coming coming" "soon bars radar" "check compare income" "table table income" }
.ov-grid > .a-hero { grid-area: hero } .ov-grid > .a-bars { grid-area: bars } .ov-grid > .a-radar { grid-area: radar } .ov-grid > .a-check { grid-area: check }
.ov-grid > .a-coming { grid-area: coming } .ov-grid > .a-soon { grid-area: soon }
.ov-grid > .a-compare { grid-area: compare } .ov-grid > .a-income { grid-area: income } .ov-grid > .a-table { grid-area: table }
@media (max-width: 1240px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hero soon" "coming coming" "radar bars" "compare compare" "check income" "table table" }
}
/* Phone: one column — who owes first, then the shops, then the money by month. */
@media (max-width: 760px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 14px;
    grid-template-areas: "hero" "coming" "soon" "table" "bars" "compare" "income" "check" "radar" }
}
.only-narrow { display: none }
@media (max-width: 760px) { .only-wide { display: none } .only-narrow { display: block } }

.ov-card { background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; position: relative; overflow: hidden }
@media (max-width: 760px) { .ov-card { padding: 14px; border-radius: 16px } }
.ov-h { display: flex; align-items: baseline; gap: 6px 10px; justify-content: space-between; flex-wrap: wrap; min-width: 0 }
.ov-h h3 { font-size: 15px; font-weight: 700 }
.ov-h h3 .m { font-family: var(--f-body); font-weight: 400 }
.ov-h .big { font-family: var(--f-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; align-items: baseline }
.ov-h .big small { font-family: var(--f-body); font-size: 12px; font-weight: 400; color: var(--muted) }
.ov-h b.c1 { color: var(--accent3) } .ov-h b.c2 { color: var(--accent2) }
:root[data-hq-theme="night"] .ov-h b.c1 { color: var(--accent) }
.ov-empty { font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; max-width: none }
.ov-empty a, .ov-more, .ov-card a { color: var(--brand); font-weight: 600; text-underline-offset: 2px }
.ov-more { font-size: 12.5px }
.ov-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }

/* the hero: owed now, billed each month, a ring for this month, received by month */
.ov-card.hero { background: var(--hero); color: var(--hero-ink); border-color: var(--hero-edge); grid-template-rows: auto auto 1fr auto }
.ov-card.hero .m { color: var(--hero-muted) }
.hero .owed { font-size: 14px }
.hero .owed b { font-family: var(--f-display); font-size: 20px; margin-left: 6px; font-variant-numeric: tabular-nums }
.hero-mid { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.hero .num { font-family: var(--f-display); font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; font-variant-numeric: tabular-nums }
.hero-foot { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap }
.hero-foot b { color: var(--accent); font-variant-numeric: tabular-nums }
.hero-spark { align-self: center }
.hero-foot { align-self: end }

/* money coming in: three month boxes, this month in the hero colours */
.ov-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
@media (max-width: 760px) { .ov-months { grid-template-columns: minmax(0, 1fr) } }
.mo { border-radius: 14px; background: var(--ghost); padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.mo.now { background: var(--hero); color: var(--hero-ink); border: 1px solid var(--hero-edge) }
.mo.now .m { color: var(--hero-muted) }
.mo-n { font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase }
.mo-t { display: block; font-family: var(--f-display); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums }
.mo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px }
.mo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline }
.mo li.lump { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n b" "e b" }
.mo li.lump a { grid-area: n } .mo li.lump em { grid-area: e } .mo li.lump b { grid-area: b; color: var(--mid) }
.mo.now li.lump b { color: var(--accent) }
.mo li a, .mo.now li a { color: inherit; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mo li a:hover { text-decoration: underline }
.mo li em { font-style: normal; font-size: 11.5px; color: var(--muted) } .mo.now li em { color: var(--hero-muted) }
.mo li b { font-variant-numeric: tabular-nums }

/* who pays next */
.ov-pays { display: grid }
.pay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center }
.pay:first-child { border-top: 0; padding-top: 0 }
.ov-card .pay .who { color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ov-card .pay .who:hover { text-decoration: underline }
.pay .amt { font-family: var(--f-display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; text-align: right }
.pay .pill { justify-self: end }
.ov-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px }
.ov-sum .big { font-family: var(--f-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums }

/* charts: text and marks coloured from tokens only */
svg.cv { width: 100%; height: auto; display: block; overflow: visible }
svg.cv text { font-family: var(--f-body); fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums }
svg.cv .v, svg.cv .dc { fill: var(--ink); font-weight: 600 }
svg.cv .dc { font-weight: 700 }
svg.cv .gl { stroke: var(--line); stroke-width: 1 }
svg.cv .bb { fill: var(--bar) }
svg.cv .gs1 { stop-color: var(--accent) } svg.cv .gs2 { stop-color: var(--accent3) }
svg.cv .mp { fill: var(--ghost) } svg.cv .mp.now { fill: var(--accent) }
svg.cv .ml { font-size: 8.5px; letter-spacing: .03em } svg.cv .ml.now { fill: var(--on-accent); font-weight: 700 }
svg.cv .ml.nowt { fill: var(--ink); font-weight: 700 }
svg.cv .area { fill: var(--ghost) }
svg.cv .lnb, svg.cv .lnr { fill: none; stroke-width: 2.4; stroke-linecap: round }
svg.cv .lnb { stroke: var(--accent2) } svg.cv .lnb.dash { stroke-dasharray: 5 5; stroke-width: 2 }
svg.cv .lnr { stroke: var(--accent) }
svg.cv .drop { stroke: var(--accent); stroke-width: 1; opacity: .55 }
svg.cv .mk { fill: var(--panel); stroke: var(--accent); stroke-width: 2 }
svg.cv .dtrack { fill: none; stroke: var(--track); stroke-width: 20 }
svg.cv .dseg { fill: none; stroke-width: 20 }
svg.cv .s1 { stroke: var(--accent2) } svg.cv .s2 { stroke: var(--accent) } svg.cv .s3 { stroke: var(--accent3) }
svg.cv .s4 { stroke: var(--c4) } svg.cv .s5 { stroke: var(--c5) } svg.cv .s6 { stroke: var(--muted) }
svg.cv .rgrid { fill: none; stroke: var(--line) }
svg.cv .rarea { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round }
svg.cv .rdot { fill: var(--accent) }
svg.cv.ring2 { width: auto; flex: none }
svg.cv .rtrack { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 5 }
svg.cv .rfill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round }
.hero svg.cv .rt { fill: var(--hero-ink); font-size: 12.5px; font-weight: 700 }
svg.cv.spark .sl { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round }
svg.cv.spark .sd { fill: var(--hero-ink) } svg.cv.spark .sd.last { fill: var(--accent) }
.ov-donut svg.cv.donut { max-width: 190px; margin: 0 auto }
svg.cv.donut text { font-size: 11px }

/* keys and legends */
.ov-key { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center }
.ov-key i, .ov-leg i, .ov-dep i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }
.k-bill { background: var(--bar) } .k-rec { background: linear-gradient(var(--accent), var(--accent3)) }
.k-c1 { background: var(--accent) } .k-c2 { background: var(--accent2) }
.k-s1 { background: var(--accent2) } .k-s2 { background: var(--accent) } .k-s3 { background: var(--accent3) }
.k-s4 { background: var(--c4) } .k-s5 { background: var(--c5) } .k-s6 { background: var(--muted) }
.k-dep { background: var(--track); border: 1px dashed var(--muted) }
.ov-leg, .ov-dep { font-size: 12.5px }
.ov-leg { display: grid; gap: 7px }
.ov-leg > div, .ov-dep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center }
.ov-leg i, .ov-dep i { margin: 0 }
.ov-leg span, .ov-dep span { overflow-wrap: anywhere; min-width: 0 }
.ov-leg em, .ov-dep em { font-style: normal; color: var(--muted); font-size: 12px }
.ov-leg b, .ov-dep b { font-variant-numeric: tabular-nums }
.ov-dep { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 2px }
.ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px }
.ov-list li { display: flex; justify-content: space-between }

/* setup checklist rows */
.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.goals li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; font-size: 13px }
.goals .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--hero); color: var(--hero-ink); grid-row: span 2; display: grid; place-items: center; font-size: 10.5px; font-weight: 700 }
.goals a { color: var(--ink); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.goals a:hover { text-decoration: underline }
.goals .tr { height: 5px; border-radius: 4px; background: var(--track); grid-column: 2 / 4; overflow: hidden }
.goals .tr b { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 4px }

/* the shops table: overdue first; a wide table scrolls inside its card, not the page */
.ov-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; -webkit-overflow-scrolling: touch }
.ov-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums }
.ov-table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap }
.ov-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle }
.ov-table tbody tr { cursor: pointer }
.ov-table tbody tr:hover td { background: var(--ghost) }
.ov-table tr:last-child td { border-bottom: 0 }
.ov-table .r { text-align: right }
.ov-table .nm { display: inline-flex; gap: 8px; align-items: center }
.ov-table .nm a { color: var(--ink); font-weight: 700; text-decoration: none }
.ov-table .nm a:hover { text-decoration: underline }
.ov-table small { display: block; color: var(--muted); font-size: 11.5px; font-family: var(--f-mono) }
.pill.dotted::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none }
.ov-table .pill { white-space: nowrap }

/* the bars rise once on load; never with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  svg.cv .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: ov-grow .6s cubic-bezier(.2, .8, .2, 1) both }
  @keyframes ov-grow { from { transform: scaleY(.15); opacity: .4 } }
}

/* phone: each shop is a stacked row, so its status shows without swiping */
@media (max-width: 760px) {
  .ov-table thead { display: none }
  .ov-table, .ov-table tbody { display: block }
  .ov-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name status" "price owed next";
    gap: 6px 10px; padding: 12px 2px; border-bottom: 1px solid var(--line) }
  .ov-table tbody tr:last-child { border-bottom: 0 }
  .ov-table td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left }
  .ov-table td.c-name { grid-area: name } .ov-table td.c-status { grid-area: status; justify-self: end; align-self: start }
  .ov-table td.c-price { grid-area: price } .ov-table td.c-owed { grid-area: owed } .ov-table td.c-next { grid-area: next }
  .ov-table td[data-k]::before { content: attr(data-k); display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
  .ov-table td.r { text-align: left }
  .ov-table small { overflow-wrap: anywhere }
  .ov-table tbody tr:hover td { background: none }
}