/* app.css: kun app-spesifikk CSS (prefiks cs-). Lastes etter den delte stilarken.
   Bygget av tokens; ingen gradienter, ingen myke skygger, radius maks 5px.
   Seksjoner: 1 sider/verktøylinje  2 segment  3 ikonknapper/handlinger  4 redigeringstabeller
              5 dialog/toast/status  6 tomtilstand  7 arket (forhåndsvisning + print)  8 print */

/* ---------- 1. sider / verktøylinje ---------- */

.cs-page { padding-block: var(--forbaska-space-6) var(--forbaska-space-8); }
.cs-page-head { align-items: flex-end; }
.cs-bar { background: var(--forbaska-color-bg); }
@media (min-width: 48rem) { .cs-bar { position: sticky; top: 0; z-index: var(--forbaska-z-raised); } }
.cs-bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--forbaska-space-3);
}
.cs-bar-title {
  margin: 0; font-weight: var(--forbaska-font-weight-black); font-size: var(--forbaska-font-size-lg);
  letter-spacing: var(--forbaska-letter-spacing-tight);
}
.cs-section { padding-block: var(--forbaska-space-6); display: flex; flex-direction: column; gap: var(--forbaska-space-4); }
.cs-section--tight { padding-block: var(--forbaska-space-4); border-top-width: var(--forbaska-border-width) !important; }
.cs-card { display: flex; flex-direction: column; gap: var(--forbaska-space-3); }
.cs-wide { grid-column: 1 / -1; }
.cs-preview-note { padding-block: var(--forbaska-space-3); }
.forbaska-index .cs-actions { justify-content: flex-end; }
.forbaska-index li > div:first-of-type { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 2. segmentert kontroll ---------- */

.cs-seg { display: inline-flex; border: var(--forbaska-border-width-strong) solid var(--forbaska-color-border); border-radius: var(--forbaska-radius-sm); }
.cs-seg-btn {
  min-height: 2.75rem; padding: var(--forbaska-space-2) var(--forbaska-space-3);
  font: inherit; font-weight: var(--forbaska-font-weight-bold); text-transform: uppercase;
  letter-spacing: var(--forbaska-letter-spacing-wide); font-size: var(--forbaska-font-size-sm);
  color: var(--forbaska-color-text); background: var(--forbaska-color-surface-strong);
  border: 0; cursor: pointer;
}
.cs-seg-btn + .cs-seg-btn { border-left: var(--forbaska-border-width-strong) solid var(--forbaska-color-border); }
.cs-seg-btn[aria-pressed="true"] { background: var(--forbaska-color-text); color: var(--forbaska-color-bg); }
.cs-seg-btn:focus-visible { box-shadow: var(--forbaska-focus-ring); position: relative; }

/* ---------- 3. ikonknapper / radhandlinger ---------- */

.cs-actions { display: flex; flex-wrap: wrap; gap: var(--forbaska-space-1); align-items: center; }
.cs-icon { min-width: 2rem; padding-inline: var(--forbaska-space-2); font-size: var(--forbaska-font-size-md); letter-spacing: 0; }

/* ---------- 4. tabeller med inline-felt ---------- */

.cs-edit-wrap { max-width: 100%; }
.cs-table-edit th, .cs-table-edit td { padding: var(--forbaska-space-1); }
.cs-table-edit tbody tr:hover { background: transparent; }
.cs-table-edit td { min-width: 9rem; }
.cs-table-edit td.cs-col-time { min-width: 5.5rem; }
.cs-table-edit td.cs-col-flag, .cs-table-edit th.cs-col-flag { min-width: 0; width: 2.5rem; text-align: center; }
.cs-table-edit td.cs-col-act { min-width: 0; white-space: nowrap; }
.cs-table-edit .forbaska-check { justify-content: center; min-height: 2rem; }
.cs-cell {
  min-height: 2rem; padding: var(--forbaska-space-1) var(--forbaska-space-2);
  border-width: var(--forbaska-border-width); border-color: var(--forbaska-color-border-soft);
  font-size: var(--forbaska-font-size-sm);
}
textarea.cs-cell { min-height: 2rem; height: 2rem; resize: vertical; }
.cs-cell:focus, .cs-cell:hover { border-color: var(--forbaska-color-border); }

/* ---------- 5. dialog / toast / status ---------- */

.cs-dialog {
  width: min(32rem, calc(100vw - 2rem)); padding: var(--forbaska-space-5);
  color: var(--forbaska-color-text); background: var(--forbaska-color-surface);
  border: var(--forbaska-border-width-brutal) solid var(--forbaska-color-border);
  border-radius: var(--forbaska-radius-sm); box-shadow: var(--forbaska-shadow-hard);
}
.cs-dialog::backdrop { background: color-mix(in srgb, var(--forbaska-color-text) 60%, transparent); }
.cs-dialog-title { font-size: var(--forbaska-font-size-xl); }

.cs-toasts { position: fixed; left: var(--forbaska-page-gutter); bottom: var(--forbaska-space-4); z-index: var(--forbaska-z-modal); max-width: min(28rem, calc(100vw - 2rem)); }
.cs-toast { box-shadow: var(--forbaska-shadow-hard-sm); background: var(--forbaska-color-surface-strong); font-weight: var(--forbaska-font-weight-bold); }

.cs-status { white-space: pre; font-weight: var(--forbaska-font-weight-bold); color: var(--forbaska-color-success); }
.cs-status--error { color: var(--forbaska-color-danger); }

/* ---------- 6. tomtilstand ---------- */

.cs-empty {
  padding: var(--forbaska-space-5); border: var(--forbaska-border-width-strong) dashed var(--forbaska-color-border);
  background: var(--forbaska-color-surface);
}
.cs-empty-title { font-size: var(--forbaska-font-size-lg); font-weight: var(--forbaska-font-weight-black); }

/* ---------- 7. arket: forhåndsvisning og print ---------- */

.cs-sheet-root { display: none; }
body[data-view="preview"] .cs-sheet-root { display: block; padding: var(--forbaska-space-4) var(--forbaska-page-gutter) var(--forbaska-space-8); }

.cs-sheet {
  max-width: 52rem; margin-inline: auto; padding: var(--forbaska-space-5);
  background: var(--forbaska-color-surface-strong); color: var(--forbaska-color-text);
  border: var(--forbaska-border-width-strong) solid var(--forbaska-color-border);
  box-shadow: var(--forbaska-shadow-hard);
  display: flex; flex-direction: column; gap: var(--forbaska-space-5);
}
.cs-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-nowrap, .cs-nowrap .cs-pre, .cs-col-time .cs-pre { white-space: nowrap; overflow-wrap: normal; }

.cs-head { border-top: var(--forbaska-border-width-brutal) solid var(--forbaska-color-border); border-bottom: var(--forbaska-border-width-brutal) solid var(--forbaska-color-border); padding-block: var(--forbaska-space-3); display: flex; flex-direction: column; gap: var(--forbaska-space-3); }
.cs-head-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--forbaska-space-3); }
.cs-doc { font-size: var(--forbaska-font-size-3xl); font-weight: var(--forbaska-font-weight-black); line-height: var(--forbaska-line-height-tight); letter-spacing: var(--forbaska-letter-spacing-tight); }
.cs-date { text-align: right; }
.cs-date-num { font-size: var(--forbaska-font-size-2xl); font-weight: var(--forbaska-font-weight-black); line-height: var(--forbaska-line-height-tight); }
.cs-date-day { font-size: var(--forbaska-font-size-lg); font-weight: var(--forbaska-font-weight-bold); text-transform: uppercase; letter-spacing: var(--forbaska-letter-spacing-wide); }
.cs-prod { display: flex; flex-direction: column; gap: var(--forbaska-space-1); }
.cs-prod-name { font-size: var(--forbaska-font-size-xl); font-weight: var(--forbaska-font-weight-black); letter-spacing: var(--forbaska-letter-spacing-tight); line-height: var(--forbaska-line-height-heading); }
.cs-prod-meta { display: flex; flex-wrap: wrap; gap: var(--forbaska-space-1) var(--forbaska-space-4); color: var(--forbaska-color-text); }

.cs-contacts, .cs-meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--forbaska-space-3) var(--forbaska-space-4); }
.cs-kv-v { font-weight: var(--forbaska-font-weight-bold); }

.cs-block { display: flex; flex-direction: column; gap: var(--forbaska-space-2); }
.cs-sh {
  font-size: var(--forbaska-font-size-md); text-transform: uppercase; letter-spacing: var(--forbaska-letter-spacing-wide);
  padding-bottom: var(--forbaska-space-1); border-bottom: var(--forbaska-border-width-brutal) solid var(--forbaska-color-border);
  break-after: avoid;
}

.cs-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); border: var(--forbaska-border-width-strong) solid var(--forbaska-color-border); }
.cs-time { padding: var(--forbaska-space-2) var(--forbaska-space-3); border-right: var(--forbaska-border-width) solid var(--forbaska-color-border); border-bottom: var(--forbaska-border-width) solid var(--forbaska-color-border); break-inside: avoid; }
.cs-time-label { font-family: var(--forbaska-font-mono); font-size: var(--forbaska-font-size-xs); text-transform: uppercase; letter-spacing: var(--forbaska-letter-spacing-wide); }
.cs-time-v { font-size: var(--forbaska-font-size-xl); font-weight: var(--forbaska-font-weight-black); line-height: var(--forbaska-line-height-heading); }
.cs-time--key { background: var(--forbaska-color-accent); color: var(--forbaska-color-on-accent); border-width: var(--forbaska-border-width-brutal); }
.cs-weather { color: var(--forbaska-color-text); }

.cs-locs { display: grid; gap: var(--forbaska-space-3); }
.cs-loc { border: var(--forbaska-border-width-strong) solid var(--forbaska-color-border); break-inside: avoid; }
.cs-loc-head { display: flex; gap: var(--forbaska-space-3); align-items: baseline; padding: var(--forbaska-space-1) var(--forbaska-space-3); background: var(--forbaska-color-text); color: var(--forbaska-color-bg); }
.cs-loc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--forbaska-space-2) var(--forbaska-space-4); padding: var(--forbaska-space-2) var(--forbaska-space-3); }

.cs-table { border: var(--forbaska-border-width-strong) solid var(--forbaska-color-border); }
.cs-table thead { display: table-header-group; }
.cs-table tr { break-inside: avoid; page-break-inside: avoid; }
.cs-table tbody tr:hover { background: transparent; }
.cs-table th { border-bottom-color: var(--forbaska-color-border); }
.cs-table td { border-bottom-color: var(--forbaska-color-border); }
.cs-table td.cs-col-time { white-space: nowrap; font-family: var(--forbaska-font-mono); font-weight: var(--forbaska-font-weight-bold); }
.cs-table .cs-col-flag { width: 1.5rem; padding-inline: var(--forbaska-space-1); text-align: center; font-weight: var(--forbaska-font-weight-black); }
.cs-important td { font-weight: var(--forbaska-font-weight-bold); border-bottom-width: var(--forbaska-border-width-strong); }
.cs-important td.cs-col-flag { background: var(--forbaska-color-accent); color: var(--forbaska-color-on-accent); }

.cs-notes { display: grid; gap: var(--forbaska-space-3); }
.cs-note { border: var(--forbaska-border-width-strong) solid var(--forbaska-color-border); break-inside: avoid; }
.cs-note-head { padding: var(--forbaska-space-1) var(--forbaska-space-3); font-family: var(--forbaska-font-mono); font-weight: var(--forbaska-font-weight-bold); letter-spacing: var(--forbaska-letter-spacing-wide); border-bottom: var(--forbaska-border-width) solid var(--forbaska-color-border); }
.cs-note-text { padding: var(--forbaska-space-2) var(--forbaska-space-3); }
.cs-note--strong { border-width: var(--forbaska-border-width-brutal); }
.cs-note--strong .cs-note-head { background: var(--forbaska-color-text); color: var(--forbaska-color-bg); font-size: var(--forbaska-font-size-lg); }
.cs-note--strong .cs-note-text { font-weight: var(--forbaska-font-weight-bold); }

.cs-foot { display: flex; justify-content: space-between; gap: var(--forbaska-space-3); border-top: var(--forbaska-border-width) solid var(--forbaska-color-border); padding-top: var(--forbaska-space-2); }

@media (max-width: 40rem) {
  .cs-sheet { padding: var(--forbaska-space-3); }
  .cs-date { text-align: left; }
  .cs-doc { font-size: var(--forbaska-font-size-2xl); }
}

/* ---------- 8. print ---------- */

@page { size: A4; margin: 12mm 12mm 14mm; }

@media print {
  /* Papir er alltid lyst, også når skjermen er i mørk modus. */
  :root {
    --forbaska-color-bg: #ffffff;
    --forbaska-color-surface: #ffffff;
    --forbaska-color-surface-strong: #ffffff;
    --forbaska-color-text: #000000;
    --forbaska-color-text-muted: #000000;
    --forbaska-color-border: #000000;
    --forbaska-color-accent: #ff5a1f;
    --forbaska-color-on-accent: #000000;
    --forbaska-color-success: #000000;
    color-scheme: light;
  }
  html, body { background: var(--forbaska-color-bg); color: var(--forbaska-color-text); font-size: 10pt; }
  #app, #toasts, .forbaska-sr-only, dialog { display: none !important; }
  body[data-view] .cs-sheet-root { display: block; padding: 0; }
  .cs-sheet { max-width: none; padding: 0; border: 0; box-shadow: none; gap: 5mm; }
  .cs-doc { font-size: 34pt; }
  .cs-date-num { font-size: 26pt; }
  .cs-prod-name { font-size: 16pt; }
  .cs-time-v { font-size: 15pt; }
  .cs-sh, .cs-loc-head, .cs-note--strong .cs-note-head, .cs-time--key, .cs-important td.cs-col-flag {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cs-table { font-size: 9pt; }
  .cs-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-block { break-inside: auto; }
  .cs-table tr, .cs-loc, .cs-note, .cs-time { break-inside: avoid; }
  a { text-decoration: none; }
}