/* Papperet. Laddas med media="print" från App.razor, så ingenting här påverkar skärmen.

   Folk skriver ut inköpslistan till affären, underhållet till kylskåpsdörren, husets år
   till pärmen och en guide till förrådet. Därför: svart på vitt, inga färgytor (en skrivare
   utan bakgrundsgrafik tappar dem ändå, och en med drar bläck i onödan), bara tunna kanter,
   ingen meny, inga knappar, inga figurer. Husets namn och datum står överst (AppLayout),
   så att en lista på kylskåpet säger hur gammal den är. Färg bar ändå aldrig mening ensam:
   varje läge har ord, och det är orden som står kvar.

   Köparvyn (/visa) har egna regler i sida-delat.css; de här lägger sig ovanpå. */

@page {
  size: A4;
  margin: 14mm 14mm 16mm;
  @bottom-right { content: "Sida " counter(page) " av " counter(pages); font: 8pt "Inter", sans-serif; color: #444; }
}

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Tre :root så att regeln väger mer än mörkt läge (:root[data-theme="dark"] och
   :root:not([data-theme="light"])). Utan det skrevs en sida ut vit text på vitt papper
   för den som valt mörkt läge. */
:root:root:root {
  color-scheme: light;
  --paper: #fff; --paper-2: #fff; --card: #fff;
  --ink: #000; --ink-2: #222; --ink-3: #444;
  --on-color: #000; --on-soft: #000;
  --line: #bbb; --line-strong: #666; --line-soft: #ccc;
  --bar: #fff; --bar-text: #000; --dot: #fff;
  --tomato-soft: #fff; --sun-soft: #fff; --sky-soft: #fff; --mint-soft: #fff; --lilac-soft: #fff; --pink-soft: #fff;
  --tomato-ink: #000; --sun-ink: #000; --sky-ink: #000; --mint-ink: #000; --lilac-ink: #000;
  --color-bg: #fff; --color-surface: #fff; --color-text: #000; --color-divider: #bbb;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --lift: none;
}

html, body {
  background: #fff !important;
  color: #000 !important;
  font-size: 10.5pt;
}

/* Inga färgytor, inga skuggor, ingen rörelse. Kanterna blir grå och tunna. */
*, *::before, *::after {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
  color: #000 !important;
  border-color: #bbb !important;
}
.muted, small, .small.muted, .hk-lead, .eyebrow { color: #333 !important; }
a { text-decoration: none; }

/* ── Skalet ──────────────────────────────────────────────────────────────── */
.app-header, .app-nav, .hk-side, .hk-topbar, .hk-tabs, .skip-link, .offline-bar, .undo-bar,
.hk-toast-region, #blazor-error-ui, #components-reconnect-modal, .components-reconnect-show,
.no-print, .btn, .hk-pagehead-actions, svg.husse, .skeleton,
.parm-ikon, .arkiv-chip, .uh-group-ico, .cal-ico, .gp-not-ikon {
  display: none !important;
}
/* Sidomenyn är borta, men innehållet höll fortfarande sin marginal för den: halva A4 stod tom. */
.app-header ~ .app-main, .app-main {
  margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important;
}

.print-only.utskrift-huvud {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 6mm; padding: 0 0 2mm; border-bottom: 1px solid #000 !important;
  font: 9pt/1.3 var(--f-body);
}
.utskrift-huvud b { font: 700 11pt/1.2 var(--f-display); }

.hk-pagehead { margin: 0 0 5mm !important; padding: 0 !important; display: block !important; }
.hk-pagehead h1 { font-size: 22pt !important; margin: 1mm 0 !important; }
.hk-lead { font-size: 10pt !important; margin: 0 !important; max-width: none; }

h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
p, li { orphans: 3; widows: 3; }

/* Kort och rader delas aldrig mellan två sidor. */
.card, .stat, .hk-stat, .mcard, .buy-row, .buy-head, .jt-post, .dotted-row, .pryl-kort, .warranty-grid > *,
tr, .gp-fakta, .gp-steg li, .gp-punkter li, .guide-cards > li, .ar-kort, .kv-post {
  break-inside: avoid; page-break-inside: avoid;
}

.card, .stat, .hk-stat, .stat.hk-stat:nth-child(n) {
  border: 1px solid #bbb !important; border-radius: 6px !important;
}

/* Siffrorna överst blir en rad med små rutor i stället för fyra stora färgblock. */
.stats, .plan-stats, .arkiv-stats {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3mm !important;
  margin: 0 0 6mm !important;
}
.stat.hk-stat { padding: 2.5mm 3mm !important; min-height: 0 !important; transform: none !important; }
.hk-stat .num { font-size: 18pt !important; line-height: 1 !important; }
.hk-stat .lbl { font-size: 9pt !important; }
.hk-stat small { font-size: 8pt !important; }

.pill, .status-pill {
  border: 1px solid #888 !important; padding: 0 1.5mm !important; font-size: 8pt !important;
}
.pill svg, .status-pill svg { display: none; }

table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #bbb !important; padding: 1.5mm 2mm !important; text-align: left; vertical-align: top; }
thead { display: table-header-group; }
.table-scroll { overflow: visible !important; }

/* En kryssruta att bocka i med penna. */
.buy-row .box, .utskrift-ruta {
  display: inline-block; flex: none;
  width: 4.5mm !important; height: 4.5mm !important;
  border: 1.4px solid #000 !important; border-radius: 1mm !important;
  transform: none !important;
}

/* ── Att köpa ────────────────────────────────────────────────────────────── */
.buy-progress { display: none !important; }
.buy-progress-text { margin: 0 0 4mm !important; }
.buy-list { display: block !important; columns: 2; column-gap: 9mm; max-width: none !important; }
.buy-group { break-inside: avoid-column; border: 0 !important; padding: 0 !important; margin: 0 0 6mm !important; }
.buy-group .buy-head { margin: 0 0 1.5mm !important; padding: 0 0 1mm; border-bottom: 1px solid #000 !important; }
.buy-group .buy-head h2 { font-size: 12pt !important; }
.buy-group .buy-head .pill { border: 0 !important; padding: 0 !important; }
.buy-rows { display: block !important; }
.buy-group .buy-row {
  display: flex !important; align-items: flex-start; gap: 2.5mm;
  min-height: 0 !important; padding: 1.6mm 0 !important; margin: 0 !important;
  border: 0 !important; border-bottom: 1px dotted #999 !important; border-radius: 0 !important;
}
.buy-row input { display: none !important; }
.buy-row .box svg { display: none; width: 100%; height: 100%; stroke: #000 !important; stroke-dashoffset: 0 !important; }
.buy-row.klar .box svg { display: block; }
.buy-row .what { display: block; }
.buy-row .what b { font-weight: 500; }
.buy-row .what small { display: block; font-size: 8.5pt; }
.buy-row.klar .what b { text-decoration: line-through; }
.buy-sum { margin: 1.5mm 0 0 !important; font-size: 8.5pt; }

/* ── Underhåll ───────────────────────────────────────────────────────────── */
.uh-wheel, .plan-wheel, .suggested-maint, .uh-senast, .cal-section, #kalender,
.mcard-actions, .mcard-more, .mcard-prog, .mcard .kort-guide { display: none !important; }
.plan-filter { display: block !important; margin: 0 0 3mm !important; font-weight: 700; }
.plan-group { margin: 0 0 5mm !important; }
.plan-group .group-label { display: flex; align-items: baseline; gap: 3mm; margin: 0 0 2mm !important; border-bottom: 1px solid #000 !important; }
.plan-group .group-label h2 { font-size: 13pt !important; margin: 0 !important; }
.plan-group .group-label p { margin: 0 !important; font-size: 9pt; }
.maint-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 6mm !important; }
.maint-grid .card.mcard {
  display: grid !important; gap: .5mm !important; padding: 1.8mm 0 1.8mm 7mm !important; position: relative;
  border: 0 !important; border-bottom: 1px dotted #999 !important; border-radius: 0 !important;
}
/* Skärmens färgkant upptill blir en ruta att bocka i med penna. */
.maint-grid .card.mcard::before, .uh-group .maint-grid .card.mcard::before {
  content: ""; position: absolute; inset: 2.3mm auto auto 0;
  width: 4.5mm; height: 4.5mm; border: 1.4px solid #000 !important; border-radius: 1mm;
}
.maint-grid .card .serif.mcard-name { font: 600 10.5pt/1.25 var(--f-body) !important; }
.mcard-top { display: flex; justify-content: space-between; gap: 2mm; align-items: baseline; }
.mcard-meta, .mcard-dates { display: flex; flex-wrap: wrap; gap: 0 3mm; font-size: 8.5pt !important; }
.mcard-meta svg { display: none; }

/* ── Journal ─────────────────────────────────────────────────────────────── */
.jt-year-head { position: static !important; display: flex; align-items: baseline; gap: 3mm; border-bottom: 1px solid #000 !important; margin: 4mm 0 1mm !important; }
.jt-year-nr { font-size: 15pt !important; margin: 0 !important; }
.jt-year-bar, .arkiv-meter, .jt-kvitto, .jt-utan svg { display: none !important; }
.jt-utan { width: auto !important; font-size: 8.5pt !important; }
.jt-list { margin: 0 !important; padding: 0 !important; }
.jt-post { border: 0 !important; border-bottom: 1px dotted #999 !important; border-radius: 0 !important; padding: 1.5mm 0 !important; margin: 0 !important; }
.jt-open { border: 0 !important; padding: 0 !important; font: 600 10.5pt/1.3 var(--f-body) !important; text-align: left; }
.arkiv-sektion { margin: 0 0 6mm !important; padding: 0 !important; border: 0 !important; }
.arkiv-sektion > h2 { font-size: 14pt !important; margin: 0 0 2mm !important; }
.arkiv-vault { display: flex !important; gap: 4mm; align-items: flex-start; }
.husse-wrap--prat { display: block !important; }
.husse-wrap--prat .bubble { border: 0 !important; padding: 0 !important; margin: 0 !important; font-style: italic; }
.husse-wrap--prat .bubble::before, .husse-wrap--prat .bubble::after { display: none !important; }
.warranty-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3mm !important; }
.warranty-grid .card { padding: 2.5mm !important; border-left-width: 1px !important; }

/* ── Husets år ───────────────────────────────────────────────────────────── */
.ar-val, .ar-stamp { display: none !important; }
.ar-bokslut { display: block !important; margin: 0 0 5mm !important; padding: 0 !important; border: 0 !important; }
.ar-grid { display: block !important; }
.ar-kol { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6mm; }
.ar-kort { padding: 0 !important; margin: 0 0 6mm !important; border: 0 !important; }
.ar-kort h2 { font-size: 13pt !important; border-bottom: 1px solid #000 !important; padding-bottom: 1mm; margin: 0 0 1.5mm !important; }
.dotted-row { padding: 1mm 0 !important; gap: 3mm; }

/* ── Prylar ──────────────────────────────────────────────────────────────── */
.prylar .pryl-grid { display: none !important; }
.print-only.utskrift-tabell { display: table; margin: 0 0 2mm; font-size: 9.5pt; }
.utskrift-tabell th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #000 !important; }
.utskrift-tabell small { font-size: 8.5pt; }
.parm-grupp { margin: 0 0 6mm !important; }
.parm-grupp > h2 { font-size: 13pt !important; margin: 0 0 1mm !important; }
.pryl-hjalte-bild { max-width: 50mm; }
.pryl-knappar, .photo-drop, .ai-read { display: none !important; }

/* ── Guiderna ────────────────────────────────────────────────────────────── */
.guide-nav, .guide-crumbs, .guide-foot, .gp-framsteg, .gp-toc, .gp-toc-smal, .gx-cta, .gp-mer,
.gp-hero-ikon, .gi-delar, .gi-hero-husse, .guide-top .husse-wrap { display: none !important; }
.guide-top { padding: 0 0 2mm !important; margin: 0 0 5mm !important; border-bottom: 1px solid #000 !important; position: static !important; }
.guide-brand { font-size: 11pt !important; }
.guide, .gp, .gi, .gp-kropp, .gp-text { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.gp-hero, .gi-hero { display: block !important; padding: 0 !important; margin: 0 0 5mm !important; border: 0 !important; border-radius: 0 !important; }
.gp-hero h1, .gi-hero h1 { font-size: 22pt !important; line-height: 1.1 !important; }
.gp-lead { font-size: 11pt !important; }
.gp-meta span { border: 0 !important; padding: 0 3mm 0 0 !important; }
.print-only.utskrift-kalla { display: block; margin: 2mm 0 0; font-size: 9pt; }
.gp-fakta { border: 1px solid #000 !important; border-left-width: 1px !important; padding: 3mm !important; margin: 0 0 5mm !important; }
.gp-avsnitt { margin: 0 0 4mm !important; padding: 0 !important; border: 0 !important; }
.gp-not { border: 1px solid #999 !important; padding: 3mm !important; }
.guide .gp-avsnitt h2 { font: 700 14pt/1.2 var(--f-display) !important; margin: 4mm 0 1.5mm !important; }
.gp-avsnitt h2::before { display: none !important; }
.gp-steg li::before { border: 1px solid #000 !important; }
.gp-punkter li::before { border: 1.4px solid #000 !important; width: 6px !important; height: 6px !important; }
.guide .gp-text p, .guide .gp-text li { font-size: 10.5pt; line-height: 1.5; }
/* På papper går länken inte att klicka; adressen skrivs ut så att man hittar dit. */
.gp-text a[href^="/"]::after { content: " (husvo.app" attr(href) ")"; font-size: 8.5pt; }
.gp-text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; overflow-wrap: anywhere; }
.guide-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3mm !important; }
.guide-card-yta { display: none !important; }
.guide-card { padding: 3mm !important; border-radius: 4px !important; }
.guide-card-title { font-size: 11pt !important; }
.guide-card-text { font-size: 9pt !important; }
.guide-cards a::after { content: "husvo.app" attr(href); display: block; font-size: 8pt; margin-top: 1mm; }
.gi-grupp { margin: 0 0 5mm !important; }
.gi-grupp-ikon { display: none !important; }