/* Krisemappe (#/krisemappe, web/js/pages/crisis.js): one sheet per week on screen (the week switch shows one) and
   one A4 page per week in print («Udskriv ugen» prints the week on screen, «Udskriv alle uger» every week, each on its
   own named page, whose @page rule crisis.js writes with the week in the top margin). Tokens only, so dark mode follows
   tokens.css; print is always light, whatever the screen theme (feat-report.css). Red only for over the frame. The
   phone shows one company at a time in the wide tables: crisis.js marks the other companies' cells .km-x. */
.km{ display:flex; flex-direction:column; gap:14px }
.km-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.km-toolbar .spacer{ flex:1 }
.km-toolbar .btn{ display:inline-flex; gap:7px; align-items:center }
.km-btns{ display:flex; gap:8px; flex-wrap:wrap }
.km-hint{ margin:0; font-size:12.5px; color:var(--ink-3) }
.km-sheet{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.km-sheet:not(.km-on){ display:none }
.km-head{ padding:2px 2px 0 }
.km-kicker{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
.km-head h2{ font-size:22px; letter-spacing:-.02em; margin:4px 0 6px }
.km-now{ font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-3) }
.km-head p{ margin:0; color:var(--ink-2); font-size:13px; max-width:880px; line-height:1.5 }
.km-head .km-through{ margin:8px 0 8px }
.km-through.is-hole{ border-left:3px solid var(--neg) }
.km-printed:empty{ display:none }
@media screen{ .km-printed{ display:none } }
.km-sec{ min-width:0 }
.km-p{ margin:0; font-size:13px; line-height:1.5 }
.km-through{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; margin:0 0 10px; border-radius:10px;
  background:var(--wash); border:1px solid var(--wash-2) }
.km-through b{ font-size:16px; letter-spacing:-.01em }
.km-through span{ font-size:12.5px; color:var(--ink-2); line-height:1.45 }
.km-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.5 }
.km-list li{ min-width:0; overflow-wrap:anywhere }
.km-hole{ color:var(--neg) }
.km-hole b{ font-weight:650 }
.km-warn{ color:var(--warn); font-weight:600 }
.km-list .pill{ margin-right:4px }

/* the tables: company groups separated by a rule, differences in the quieter ink */
.km-t th.km-co{ text-align:center; border-left:1px solid var(--hair-2) }
.km-t td.km-c0, .km-t th.km-c0{ border-left:1px solid var(--hair-2) }
.km-t td.km-d{ color:var(--ink-2) }
.km-t td.km-big{ color:var(--ink); font-weight:700 }
.km-t td.km-wrap{ white-space:normal; min-width:170px; max-width:360px; text-align:left; line-height:1.4 }
.km-t tr.km-sum2 td{ font-weight:600 }
.km-t td small{ font-size:11px }
.km-rt th:nth-child(4), .km-rt td:nth-child(4), .km-rt th:nth-child(5), .km-rt td:nth-child(5){ text-align:left }
.km-mt th:nth-child(2), .km-mt td:nth-child(2), .km-mt th:nth-child(3), .km-mt td:nth-child(3),
.km-mt th:nth-child(5), .km-mt td:nth-child(5){ text-align:left }
.km-warnline{ display:block; font-size:11.5px; color:var(--warn) }
.km-warnline b{ font-weight:650 }
.km-round + .km-round{ margin-top:14px }
.km-round .tablewrap{ margin-top:6px }
.km-musts{ padding:12px 20px 16px; border-top:1px solid var(--hair) }
.km-musts h3{ font-size:13px; margin:0 0 6px }
.km-foot{ margin:0; padding:6px 20px 10px; font-size:11.5px }
.km-plan .tablewrap, .km-known .tablewrap{ padding:0 0 4px }
.km-printonly{ display:none }
.km-printonly-in, .km-sep{ display:none }
.km-lines .tablewrap{ max-height:none }
/* the drawer's lines: the day and the amount fixed, the text wraps in what is left (a phone: 350 px) */
.km-lines table.t{ table-layout:fixed }
.km-lines table.t th:nth-child(1), .km-lines table.t td:nth-child(1){ width:62px }
.km-lines table.t th:nth-child(3), .km-lines table.t td:nth-child(3){ width:104px }
.km-lines table.t th:nth-child(2), .km-lines table.t td.km-wrap{ text-align:left; white-space:normal; overflow-wrap:anywhere;
  min-width:0; max-width:none; line-height:1.4 }
.km-through .km-alone{ font-size:14px; color:var(--neg) }

.km-cosel{ display:none; padding:0 16px 8px }
.km-only-sm{ display:none }
.km-sub{ margin:3px 0 0; padding-left:16px; display:flex; flex-direction:column; gap:3px }

/* the phone: one company at a time in the wide tables (the switch above them); print always shows all */
@media screen and (max-width: 760px){
  .km-cosel{ display:block }
  .km-t .km-x{ display:none }
  .km-nowtag{ display:none }
  /* the week switch first, the print buttons after the sheet: the key figure comes up first */
  .km-toolbar{ display:contents }
  .km-btns{ order:5; width:100%; flex-wrap:nowrap }
  .km-hint{ order:6 }
  .km-btns .btn{ flex:1 1 0; justify-content:center; padding-left:8px; padding-right:8px; white-space:nowrap }
  /* a narrower label column leaves room for one company's three figures */
  .km-t th:first-child, .km-t td:first-child{ white-space:normal; min-width:96px; max-width:124px; line-height:1.3 }
  .km-t th, .km-t td{ padding:6px 7px }
  .km-co-col{ display:none !important }
  .km-kt td small{ display:block; line-height:1.2 }
  .km-only-sm{ display:inline }
  /* a round's lines as stacked rows: firm and amount, day and follow-up, then the note and warnings */
  .km-rt thead{ display:none }
  .km-rt, .km-rt tbody{ display:block; width:100% }
  .km-rt tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:8px 0; border-bottom:1px solid var(--hair) }
  .km-rt td{ display:block; padding:0 !important; border:0 !important; white-space:normal !important; text-align:left !important;
    position:static !important; background:none !important; min-width:0 !important; max-width:none !important }
  .km-rt td:nth-child(1){ order:1 }
  .km-rt td:nth-child(2){ order:2; text-align:right !important; font-weight:600 }
  .km-rt td:nth-child(3){ order:3; color:var(--ink-3) }
  .km-rt td:nth-child(5){ order:4; text-align:right !important; color:var(--ink-3) }
  .km-rt td:nth-child(4){ order:5; grid-column:1 / -1 }
  .km-rt td:nth-child(4):empty{ display:none }
  .km-rt tr.km-printonly{ display:none }
  /* the dated must-pays as stacked rows: payment and amount, then day and company, the bank's status at the right */
  .km-mt thead{ display:none }
  .km-mt, .km-mt tbody{ display:block; width:100% }
  .km-mt tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:7px 0; border-bottom:1px solid var(--hair); align-items:center }
  .km-mt td{ display:block; padding:0 !important; border:0 !important; white-space:normal !important; text-align:left !important;
    position:static !important; background:none !important; min-width:0 !important; max-width:none !important }
  .km-mt td.km-ml{ order:1 }
  .km-mt td.km-ma{ order:2; text-align:right !important; font-weight:600; white-space:nowrap !important }
  .km-mt td.km-md{ order:3; color:var(--ink-3) }
  .km-mt td.km-ms{ order:4; text-align:right !important }
  .km-mt tr.km-printonly{ display:none }
}
@media (max-width: 760px){
  .km-head h2{ font-size:19px }
  .km-toolbar .spacer{ display:none }
  .km-musts{ padding:10px 16px 14px }
  .km-foot{ padding:6px 16px 10px }
  .km-t td.km-wrap{ min-width:150px }
}

/* print: A4, one sheet a page; only the sheets marked km-print (the week on screen, or all) */
@page krise{ size:A4; margin:10mm 10mm 11mm }
@media print{
  .km-noprint, .km-hint, .km-kicker{ display:none !important }
  .km{ gap:0 }
  .km-sheet{ display:none !important }
  .km-sheet.km-print{ display:flex !important; page:krise; gap:6px }
  .km-sheet.km-print ~ .km-sheet.km-print{ break-before:page }
  .km-head h2{ font-size:16px; margin:1px 0 2px }
  .km-kicker{ font-size:8.5px }
  .km-now{ font-size:10px }
  .km-head p{ font-size:8.5px; max-width:none; line-height:1.35 }
  .km .card{ padding:6px 9px !important; border-radius:5px; break-inside:avoid }
  .km .card.flush{ padding:0 !important }
  .km .card > header{ margin-bottom:3px }
  .km .card.flush > header{ padding:6px 9px 0 }
  .km .card > header h2{ font-size:10.5px }
  .km .card > header p{ font-size:8px; line-height:1.3; max-width:none }
  .km .infowrap{ display:none }
  .km-p, .km-list{ font-size:8.5px; line-height:1.35; gap:2px }
  .km-list{ padding-left:13px }
  .km-sub{ margin:1px 0 0; padding-left:11px; gap:1px }
  .km-through, .km-head .km-through{ padding:4px 8px; margin:3px 0 3px; border-radius:5px }
  .km-through b{ font-size:11px }
  .km-through .km-alone{ font-size:9.5px }
  .km-through span{ font-size:8px }
  .km-list .pill{ font-size:7.5px; padding:0 5px }
  .km .tablewrap{ overflow:visible !important; max-height:none !important }
  .km-t, .km-t td, .km-t th, .km-t tr.sub td{ font-size:7.8px !important }
  .km-t thead th{ font-size:7.5px !important }
  .km-t tr.sub td:first-child{ padding-left:12px !important }
  /* a line's warnings by their names only on paper (the screen has the reasons) */
  .km-wtext{ display:none }
  .km-warnline{ display:inline; margin-right:6px }
  .km-t th, .km-t td{ padding:1.6px 4px !important }
  .km-t td small{ font-size:7px }
  .km-t td.km-wrap{ min-width:0; max-width:none }
  .km-t td.cell-click{ color:inherit }
  .km-t .pill{ font-size:7px; padding:0 4px }
  .km-warnline{ font-size:7.2px }
  .km-round + .km-round{ margin-top:5px }
  .km-round .tablewrap{ margin-top:2px }
  .km-more, .km-quiet{ display:none !important }
  .km-printonly{ display:table-row }
  .km-sep{ display:inline }
  .km-printonly-in{ display:inline }
  .km-sheet.km-print{ gap:5px }
  .km .card > header h2{ font-size:10px }
  .km-musts{ padding:3px 9px 5px }
  .km-musts h3{ font-size:8.5px; margin:0 0 2px }
  .km-foot{ padding:2px 9px 4px; font-size:7.5px }
  /* a heavy week (several rounds, many dated must-pays) a size smaller, so it still fits its page */
  .km-dense.km-print{ gap:4px }
  .km-dense .km-head p, .km-dense .km-p, .km-dense .km-list{ font-size:7.8px; line-height:1.28 }
  .km-dense .card > header p{ font-size:7.4px; line-height:1.25 }
  .km-dense .km-t, .km-dense .km-t td, .km-dense .km-t th, .km-dense .km-t tr.sub td{ font-size:7.1px !important }
  .km-dense .km-t thead th{ font-size:6.9px !important }
  .km-dense .km-t th, .km-dense .km-t td{ padding:1.1px 4px !important }
  .km-dense .km-t td small, .km-dense .km-warnline, .km-dense .km-t .pill{ font-size:6.6px }
  .km-dense.km-sheet .card:not(.flush){ padding:5px 8px !important }
  .km-dense .km-through b{ font-size:10px }
  .km-dense .km-through .km-alone{ font-size:9px }
  .km-dense .km-foot{ font-size:7px; padding:1px 9px 3px }
}