/* Kassen · Pengebehov (web/js/pages/cash.js): the card on Forside and Status, the chart, and «Kassen dag for dag» at
   the top of Betalinger. Tokens only, so dark mode follows tokens.css; red only for over the frame. */

/* Pengebehov: one row per fact (Forside), a block per company (Status) */
.cash-card{ margin-bottom:16px }
.cash-card > header > div:first-child, .cash-chartcard > header > div:first-child, .cash-day > header > div:first-child{ flex:1 1 260px; min-width:0 }
.cash-card > header{ margin-bottom:8px }
.cash-card.compact > header{ margin-bottom:2px; flex-wrap:nowrap; align-items:center }
.cash-card.compact > header > div:first-child{ flex:1 1 auto }
.cash-card.compact > header .tools{ flex:none }
.cash-lede{ margin:0 0 4px; color:var(--ink-2); font-size:12.5px; line-height:1.45 }
.cash-rows{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) }
.cash-row{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--hair); min-width:0 }
.cash-row:last-child{ border-bottom:0; padding-bottom:0 }
.cash-row p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--ink-2); min-width:0 }
.cash-row p b{ color:var(--ink); font-weight:650 }
.cash-row.is-bad p b{ color:var(--neg) }
.cash-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px; background:var(--ink-4) }
.cash-row.is-bad .cash-dot{ background:var(--crit-mark) }
.cash-row.is-warn .cash-dot{ background:var(--warn-mark) }
.cash-row.is-good .cash-dot{ background:var(--good-mark) }
/* one text per screen: the long words, or on a phone the short ones (about two lines a row) */
.cash-row p.cash-short{ display:none }
@media (max-width: 560px){
  .cash-row p.cash-long, .cash-lede .cash-wide{ display:none }
  .cash-row p.cash-short{ display:block }
  .cash-row{ padding:6px 0; gap:8px }
  .cash-row p{ font-size:13px; line-height:1.4 }
  .cash-dot{ margin-top:5px }
}
@media (min-width: 1100px){
  .cash-card.compact .cash-rows{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px }
  .cash-card.compact .cash-row:nth-last-child(2):nth-child(odd){ border-bottom:0; padding-bottom:0 }
}

/* columns, not a grid: the blocks differ a lot in height (CC Facility's holes), so they pack top to bottom */
.cash-blocks{ columns:320px 3; column-gap:12px }
.cash-block{ break-inside:avoid; display:block; margin:0 0 12px; padding:13px 15px; border-radius:11px; background:var(--sunk);
  border:1px solid var(--hair); min-width:0; font-size:13px; line-height:1.5; color:var(--ink-2) }
.cash-block.hot{ border-color:var(--neg-2) }
.cash-block.blind{ border-color:var(--warn-mark) }
.cash-block h3{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin:0 0 6px; font-size:14px; font-weight:650; color:var(--ink) }
.cash-block h3 .faint{ font-size:12px; font-weight:500 }
.cash-block p{ margin:0 0 6px }
.cash-block p:last-child{ margin-bottom:0 }
.cash-block b{ color:var(--ink); font-weight:650 }
.cash-block .neg, .cash-block b.neg{ color:var(--neg) }
.cash-bank{ color:var(--ink) }
.cash-touch{ font-weight:600 }
.cash-fig{ display:flex; flex-direction:column; gap:1px; margin:8px 0 8px; padding:9px 11px; border-radius:9px; background:var(--surface);
  border:1px solid var(--hair) }
.cash-kicker{ display:inline-flex; gap:4px; align-items:center; font-size:12px; font-weight:600; color:var(--ink-3) }
.cash-fig > b{ font-size:22px; font-weight:700; letter-spacing:-.025em; line-height:1.2; font-variant-numeric:tabular-nums }
.cash-fig > span{ font-size:12.5px }
.cash-fig > small{ font-size:12px; color:var(--ink-3) }
.cash-holes, .cash-moves, .cash-skat{ list-style:none; margin:4px 0 8px; padding:0 }
.cash-holes li{ padding:5px 0; border-top:1px solid var(--hair) }
.cash-holes li:first-child{ border-top:0 }
.cash-holes li small{ display:block; font-size:12px; color:var(--ink-3) }
.cash-holes.wide{ margin:10px 0 4px }
.cash-holes.wide li{ font-size:13.5px; line-height:1.5; color:var(--ink-2) }
.cash-moves li{ position:relative; padding:3px 0 3px 15px }
.cash-moves li::before{ content:""; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--ink-4) }
.cash-moves li.is-short::before{ background:var(--warn-mark) }
.cash-moves li.is-done::before{ background:var(--good-mark) }
.cash-moves li.is-other{ color:var(--ink-3) }
.cash-day .cash-moves li{ font-size:13.5px; color:var(--ink-2) }
.cash-skat li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 10px; align-items:baseline; padding:5px 0;
  border-top:1px solid var(--hair) }
.cash-skat-what{ grid-column:1 / -1; grid-row:2; font-size:12.5px }
.cash-skat li:first-child{ border-top:0 }
.cash-skat-pot{ display:block; font-size:12px; color:var(--ink-3) }
.cash-skat-day{ font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.cash-skat .pill{ justify-self:end; white-space:nowrap }
.cash-unseen{ display:block }
.cash-unseen .pill{ margin-right:4px }
.cash-beside{ padding-top:6px; border-top:1px dashed var(--hair-2) }
.cash-top{ margin-bottom:16px }
.cash-top > .card{ margin-bottom:0 }

/* the figures over a chart */
.cash-figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px 18px; margin:0 0 12px }
.cash-figs > div{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.cash-figs span{ font-size:12px; font-weight:600; color:var(--ink-3) }
.cash-figs span.neg{ color:var(--neg) }
.cash-figs b{ font-size:18px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap }
.cash-figs small{ font-size:12px; color:var(--ink-2); line-height:1.4 }
.cash-figs small .neg{ color:var(--neg); font-weight:inherit }
.cash-figs small .warn, .cash-figs b.warn{ color:var(--warn) }
.cash-chart .legend{ margin-top:0 }
/* the normal estimate and «burde komme ind»: lighter than the low line, and lighter still is unreadable on a dark
   surface, so dark mode lifts them (the chart draws them at opacity 0.5) */
.cash-chart .cash-faded{ opacity:.5 }
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])) .cash-chart svg path[opacity="0.5"]{ opacity:.7 }
  :root:where(:not([data-theme="light"])) .cash-chart .cash-faded{ opacity:.7 }
}
:root[data-theme="dark"] .cash-chart svg path[opacity="0.5"]{ opacity:.7 }
:root[data-theme="dark"] .cash-chart .cash-faded{ opacity:.7 }
/* the pot leads with what it assumes */
.cash-cond{ margin:0 0 10px; padding:8px 11px; border-radius:9px; background:var(--sunk); border:1px solid var(--hair);
  font-size:13px; line-height:1.45; color:var(--ink-2) }
.cash-row a{ color:var(--accent); font-weight:600; white-space:nowrap }
.cash-chartcard .cash-figs{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.cash-none{ display:flex; gap:8px; align-items:center; margin:10px 0 4px; font-size:13.5px; color:var(--ink-2) }
.cash-none svg{ color:var(--good-mark); flex:none }
.cash-info{ margin-top:8px }
.cash-info b{ color:var(--ink-2); font-weight:650 }

/* Betalinger: «Kassen dag for dag» */
.cash-day{ margin-bottom:16px }
.cash-day > header .tools .seg{ max-width:100% }
.cash-cps{ margin-top:14px }
.cash-cp{ width:100%; border-collapse:collapse; font-size:13px }
.cash-cp th, .cash-cp td{ padding:8px 10px; text-align:right; vertical-align:top; border-bottom:1px solid var(--hair) }
.cash-cp th:first-child, .cash-cp td:first-child{ text-align:left; padding-left:0 }
.cash-cp th:last-child, .cash-cp td:last-child{ padding-right:0; text-align:left; width:30% }
.cash-cp thead th{ font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; border-bottom-color:var(--hair-2) }
.cash-cp td{ font-variant-numeric:tabular-nums; color:var(--ink) }
.cash-cp td b{ font-weight:650; white-space:nowrap }
.cash-cp td small{ display:block; font-size:11.5px; color:var(--ink-3); line-height:1.4; margin-top:1px; white-space:nowrap }
.cash-cp td:last-child small{ white-space:normal }
.cash-cp tbody tr:last-child td{ border-bottom:0 }
@media (max-width: 860px){
  .cash-cp thead{ display:none }
  .cash-cp, .cash-cp tbody{ display:block }
  .cash-cp tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; padding:10px 0; border-bottom:1px solid var(--hair) }
  .cash-cp tbody tr:last-child{ border-bottom:0 }
  .cash-cp td{ display:block; padding:0; border:0; text-align:left !important; width:auto !important; min-width:0 }
  .cash-cp td::before{ content:attr(data-l); display:block; font-size:11px; font-weight:600; color:var(--ink-3) }
  .cash-cp td:first-child{ grid-column:1 / -1 }
  .cash-cp td:first-child::before{ display:none }
  .cash-cp td:first-child b{ font-size:14px }
  .cash-cp td:first-child small{ display:inline; margin-left:6px }
  .cash-cp td:last-child{ grid-column:1 / -1 }
  .cash-cp td small{ white-space:normal }
}

/* the administrator's settings */
.cash-settings{ margin-top:14px; border-top:1px solid var(--hair); padding-top:4px }
.cash-settings > summary{ list-style:none; cursor:pointer; display:flex; gap:8px; align-items:center; padding:10px 0; flex-wrap:wrap; font-size:13.5px }
.cash-settings > summary::-webkit-details-marker{ display:none }
.cash-settings > summary svg{ color:var(--ink-3); transition:transform .15s }
.cash-settings[open] > summary svg{ transform:rotate(90deg) }
.cash-settings > summary .faint{ font-size:12px; margin-left:auto }
.cash-settings .cal-form{ padding:4px 0 14px }
.cash-settings .cal-pad{ padding:0 0 6px }
.cash-check{ display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--ink); cursor:pointer }
.cash-check input{ accent-color:var(--accent); width:16px; height:16px }
.cash-settings .field .hint{ font-size:11.5px; color:var(--ink-3); font-weight:400 }
@media (prefers-reduced-motion: reduce){ .cash-settings > summary svg{ transition:none } }

@media print{
  .cash-settings, .cash-day > header .tools, .cash-card > header .tools{ display:none !important }
  .cash-block, .cash-cp tr, .cash-row{ break-inside:avoid }
  .cash-row p.cash-long{ display:block !important }
  .cash-lede .cash-wide{ display:inline !important }
  .cash-row p.cash-short{ display:none !important }
}