/* Forside (web/js/pages/home.js): greeting, four key figures and the widgets.
   Tokens only, so dark mode follows tokens.css. */
.home-head{ align-items:flex-start; margin-bottom:20px }
.home-head h1{ font-size:30px; letter-spacing:-.03em; line-height:1.1 }
.home-date{ margin:0 0 6px !important; font-size:13px; font-weight:600; color:var(--ink-3) !important }
.home-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.home-actions .btn{ padding:8px 13px }
.home-actions .btn svg{ color:var(--ink-3) }
.home-actions .home-ask{ background:var(--wash); border-color:var(--wash-2); color:var(--accent) }
.home-actions .home-ask svg{ color:var(--accent) }
.home-actions .home-ask:hover{ background:var(--wash-2) }

/* key figures */
.home-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px }
@media (max-width: 1280px){ .home-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width: 560px){ .home-kpis{ grid-template-columns:1fr } }
.kpi{ position:relative; display:flex; flex-direction:column; gap:6px; padding:16px 18px 16px; color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; min-height:172px }
.kpi-link{ color:inherit; text-decoration:none }
.kpi-link::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1 }
.kpi-link:hover{ text-decoration:none }
.kpi-link:focus-visible{ outline:none }
.kpi:has(.kpi-link:focus-visible){ outline:2px solid var(--accent); outline-offset:2px }
.kpi .infowrap{ position:relative; z-index:2 }
.kpi:hover{ transform:translateY(-2px); border-color:var(--hair-2);
  box-shadow:0 2px 4px rgba(var(--sh),.05), 0 16px 32px -18px rgba(var(--sh),.28) }
.kpi:active{ transform:translateY(0) }
.kpi-top{ display:flex; gap:9px; align-items:center; min-width:0 }
.kpi-ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--sunk); color:var(--ink-2) }
.kpi-label{ font-size:12.5px; font-weight:600; color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.kpi-go{ margin-left:auto; color:var(--ink-4); display:inline-flex; transition:transform .16s ease, color .16s ease }
.kpi:hover .kpi-go{ color:var(--accent); transform:translateX(2px) }
.kpi-value{ font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-top:6px; white-space:nowrap;
  font-variant-numeric:tabular-nums }
.kpi-sub{ font-size:12.5px; color:var(--ink-2); line-height:1.45; order:3 }
.kpi > .meter, .kpi > .minibars, .kpi > .kpi-spark{ order:4; margin-top:auto }
.kpi > .meter{ margin-top:auto; transform:translateY(-4px) }
.kpi-flag.bad{ color:var(--neg); font-weight:650 }
.kpi-spark svg{ width:100%; height:auto }
.kpi-skel{ gap:12px }
.kpi-skel i, .w-skel{ background:linear-gradient(90deg, var(--sunk) 0%, var(--sunk-2) 50%, var(--sunk) 100%); background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite }
.kpi-skel i{ display:block; height:12px; border-radius:6px; width:55% }
.kpi-skel i:nth-child(2){ height:28px; width:70% }
.kpi-skel i:nth-child(3){ width:85%; margin-top:auto }
.w-skel{ min-height:240px; border:0 }
@keyframes skel{ 0%{ background-position:100% 0 } 100%{ background-position:-100% 0 } }
@media (prefers-reduced-motion: reduce){ .kpi-skel i, .w-skel{ animation:none } .kpi, .kpi-go{ transition:none } }

/* the widget grid */
.home-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:stretch }
.home-grid > .s4{ grid-column:span 4 } .home-grid > .s6{ grid-column:span 6 } .home-grid > .s8{ grid-column:span 8 }
@media (max-width: 1200px){ .home-grid > .s4{ grid-column:span 6 } .home-grid > .s6, .home-grid > .s8{ grid-column:span 12 } }
@media (max-width: 760px){ .home-grid > .s4, .home-grid > .s6, .home-grid > .s8{ grid-column:span 12 } }
.w-slot{ display:flex; min-width:0 }
.w-slot > .card{ flex:1; margin:0 !important }
.w{ display:flex; flex-direction:column; padding:16px 18px 16px; min-width:0 }
.w-head{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px }
.w-ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--sunk); color:var(--ink-2) }
.w-t{ flex:1; min-width:0 }
.w-t h2{ font-size:14.5px; letter-spacing:-.01em; line-height:1.3 }
.w-t p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.4 }
.w-link{ display:inline-flex; gap:3px; align-items:center; white-space:nowrap; font-size:12.5px; font-weight:600;
  padding:4px 6px 4px 9px; border-radius:7px; margin:-2px -6px 0 0 }
.w-link:hover{ background:var(--wash); text-decoration:none }
.w-select{ max-width:190px; padding:5px 8px; font-size:12.5px }
.w-figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:12px 18px; margin:0 0 12px }
.w-figs > div{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.w-figs span{ font-size:12px; font-weight:600; color:var(--ink-3) }
.w-figs b{ font-size:18px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap }
.w-figs small{ font-size:12px; color:var(--ink-2) }
.w-list{ list-style:none; margin:0; padding:0 }
.w-list li{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair); min-width:0 }
.w-list li:last-child{ border-bottom:0 }
.w-date{ display:flex; flex-direction:column; width:52px; flex:none; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.25 }
.w-date small{ font-size:11.5px; font-weight:500; color:var(--ink-3) }
.w-what{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; font-size:13.5px; line-height:1.35 }
.w-what b{ font-weight:600 }
.w-what small{ font-size:12px; color:var(--ink-3) }
.w-amt{ font-size:13.5px; font-weight:650; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums }
.w-amt small{ font-weight:500; color:var(--ink-3) }
.pay-list li.missing .w-date, .pay-list li.missing .w-what{ color:var(--neg) }
.w-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:auto; padding-top:10px;
  border-top:1px solid var(--hair-2); font-size:13px; color:var(--ink-2) }
.w-foot b{ font-size:14px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums }
.w-foot b.neg{ color:var(--neg) }
.w-list + .w-foot{ margin-top:auto }
.w-empty{ display:flex; gap:10px; align-items:center; padding:14px; border-radius:10px; background:var(--sunk); color:var(--ink-2); font-size:13.5px; line-height:1.45 }
.w-empty-ic{ color:var(--good-mark); display:inline-flex; flex:none }
.w-more{ margin:8px 0 0; font-size:12.5px; color:var(--ink-3) }
.w-verdict{ margin:0 0 8px; font-size:13.5px; font-weight:600 }
.w .task-form{ max-width:none; margin:0 0 10px }

/* alerts */
.sev-counts{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px }
.sev{ display:inline-flex; align-items:baseline; gap:4px; padding:5px 10px; border-radius:9px; background:var(--sunk); font-size:12.5px; color:var(--ink-2) }
.sev b{ font-size:15px; font-weight:700 }
.sev.bad b{ color:var(--neg) } .sev.warn b{ color:var(--warn) } .sev.info b{ color:var(--accent) }
.sev.zero{ opacity:.55 }
.sev.zero b{ color:var(--ink-3) }
.sev-dot{ width:8px; height:8px; border-radius:50%; flex:none; align-self:flex-start; margin-top:6px; background:var(--accent) }
.sev-dot.bad{ background:var(--crit-mark) } .sev-dot.warn{ background:var(--warn-mark) }
.alert-list li{ align-items:flex-start }

/* month close */
.checkbar{ display:flex; gap:2px; height:10px; border-radius:99px; overflow:hidden; background:var(--sunk-2) }
.checkbar i, .checklegend i{ background:var(--ink-4) }
.checkbar i{ display:block; min-width:6px }
.checkbar i.good, .checklegend i.good{ background:var(--good-mark) }
.checkbar i.warn, .checklegend i.warn{ background:var(--warn-mark) }
.checkbar i.bad, .checklegend i.bad{ background:var(--crit-mark) }
.checklegend{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 6px; font-size:12.5px; color:var(--ink-2) }
.checklegend span{ display:inline-flex; gap:6px; align-items:center }
.checklegend i{ width:8px; height:8px; border-radius:50%; display:inline-block }
.checklegend b{ color:var(--ink); font-weight:650 }
.co-checks li{ padding:7px 0 }

/* companies */
.co-list li{ padding:0; border-bottom:1px solid var(--hair) }
.co-row{ display:flex; gap:10px; align-items:center; padding:9px 8px; margin:0 -8px; border-radius:9px; color:var(--ink); flex:1; min-width:0 }
.co-row:hover{ background:var(--hover); text-decoration:none }
.co-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.co-row .w-what small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.co-spark{ flex:none; opacity:.9 }

/* forecast */
.minibars{ display:block; width:100% }
.minibars-axis{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); margin-top:4px; font-variant-numeric:tabular-nums }

@media (max-width: 760px){
  .home-head h1{ font-size:24px }
  .kpi{ min-height:0 }
  .kpi-value{ font-size:24px }
  .w-figs b{ font-size:16px }
  .w-head{ flex-wrap:wrap }
  .w-select{ max-width:100%; order:5; flex-basis:100% }
  .co-spark{ display:none }
}
/* tasks: one click marks a task done */
.task-mini li{ align-items:flex-start }
.task-mini li.late .w-what b, .task-mini li.late .w-what b a{ color:var(--neg) }
.task-done{ flex:none; width:28px; height:28px; margin:-3px 0 0 -4px; border-radius:8px; border:0; background:transparent; color:var(--ink-4);
  display:grid; place-items:center; cursor:pointer; transition:color .15s ease, background .15s ease }
.task-done:hover{ color:var(--good-mark); background:var(--pos-wash) }
.task-done:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.task-done[disabled]{ opacity:.5; cursor:default }
.w-more-btn{ align-self:flex-start; margin-top:6px }
/* the whole group: bank and debt */
.w-amt small.neg{ display:block; color:var(--neg); font-weight:600; font-size:11.5px }
.w-foot + .w-foot.sub{ margin-top:0; padding-top:6px; border-top:0 }
.w-foot .infowrap{ vertical-align:-2px }