/* ===========================
   Basale variabler & base
   =========================== */
:root{
  --bg:#0f172a;
  --card:#111827;
  --muted:#475569;
  --text:#e5e7eb;
  --accent:#22d3ee;
  --ok:#22c55e;
  --danger:#ef4444;

  /* Bruges flere steder */
  --card-bg:#191b1f;
  --card-border:#2a2e35;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:linear-gradient(120deg,#0b3b8c,#1d4ed8);
  color:var(--text);
  min-height:100vh;
}

.container{ max-width:1000px; margin:0 auto; padding:24px; }
h1,h2{ font-weight:700; margin:0 0 16px; }

/* ===========================
   Kort / cards (skærm)
   =========================== */
.card{
  background:rgba(17,24,39,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(148,163,184,.2);
  border-radius:16px;
  padding:16px;
  margin:16px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.card h3{ margin:.1rem 0 .4rem; font-size:1.05rem; }
.card p{ margin:.2rem 0 .6rem; opacity:.9; }
.card .cta{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* “Solid” card-look */
.card.solid{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:14px;
  padding:1rem;
}

/* ===========================
   Navigation / menuer
   =========================== */
.menu{ list-style:none; padding:0; display:flex; gap:12px; flex-wrap:wrap; }
.menu a{
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:#0b1220; border:1px solid rgba(148,163,184,.25);
  text-decoration:none; color:var(--text);
}
.menu a:hover{ border-color:var(--accent); }

/* ===========================
   Tabel (generisk)
   =========================== */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:10px; border-bottom:1px solid rgba(148,163,184,.2); }
.table th{ font-weight:600; text-align:left; color:#cbd5e1; }
.table tr:hover td{ background:rgba(148,163,184,.06); }

/* ===========================
   Knapper (konsolideret)
   =========================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:10px;
  border:1px solid var(--card-border);
  text-decoration:none; color:var(--text);
  background:#0b1220;
  line-height:1.1;
}
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:linear-gradient(135deg,#06b6d4,#3b82f6); border-color:transparent; color:#fff; }
.btn.success{ background:linear-gradient(135deg,#22c55e,#16a34a); border-color:transparent; color:#fff; }
.btn.danger{  background:linear-gradient(135deg,#ef4444,#f97316); border-color:transparent; color:#fff; }

/* ===========================
   Formularer
   =========================== */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
input[type=text],input[type=number],select,textarea{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid rgba(148,163,184,.3); background:#0b1220; color:var(--text);
}
label{ font-size:14px; color:#cbd5e1; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* ===========================
   Alerts / badges / header
   =========================== */
.alert{
  padding:10px 12px; border-radius:10px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.3);
  color:#86efac; margin-bottom:12px;
}
.alert.error{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#fecaca; }

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(148,163,184,.3); font-size:12px; color:#cbd5e1;
}

.header{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
small{ color:#94a3b8; }

/* Ens farve for besøgte/ubesøgte links */
a, a:visited { color:#9cb8ff; }

/* ===========================
   Forside / diverse UI
   =========================== */
.home-wrap{ max-width:980px; margin:0 auto; padding:1.25rem; }
.home-header{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.home-title{ display:flex; gap:.8rem; align-items:center; }
.home-badge{ font-size:.9rem; opacity:.85; }
.searchbar{ display:flex; gap:.5rem; width:100%; max-width:520px; }
.searchbar input{ flex:1; }
.grid{ display:grid; gap:.9rem; }
.grid.cards{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.22rem .6rem; border-radius:999px; border:1px solid var(--card-border); font-size:.85rem; opacity:.95; }
.stat{ display:flex; align-items:center; gap:.5rem; }
.stat .num{ font-weight:700; }
.list{ display:flex; flex-direction:column; gap:.6rem; }
.list-item{ display:flex; justify-content:space-between; gap:.8rem; align-items:center; padding:.6rem .75rem; border:1px dashed var(--card-border); border-radius:10px; }
.list-item small{ opacity:.8; }
.menu-quick{ display:flex; flex-wrap:wrap; gap:.5rem; }
.menu-quick a{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border:1px solid var(--card-border); }
.muted{ opacity:.7; }
.section{ margin-top:1.2rem; }
.link-strong{ font-weight:600; }

/* ===========================
   Toolbar (udskriftssider)
   =========================== */
.toolbar{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0 0 1rem 0; }
.toolbar .btn{ border:1px solid rgba(148,163,184,.3); background:#0b1220; }

/* ====================================
   Køleskabsudskrift – layout (skærm)
   ==================================== */
.day-content { display:flex; gap:1.5rem; margin-top:1rem; }

/* Venstre kolonne: Måltidslisten */
.meal-list {
  flex:2;
  display:grid;
  grid-template-columns:1fr 3fr; /* DT | DD */
  gap:.1rem .5rem;
}
.meal-list dl{ display:contents; margin:0; }
.meal-list dt{
  font-weight:700;
  grid-column:1;
  text-align:right;
  color:var(--accent);
}
.meal-list dd{ grid-column:2; margin-left:0; }

/* Højre kolonne: Optøningsliste */
aside.prep{
  flex:1;
  padding:.75rem;
  background-color:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.3);
  border-radius:8px;
  font-size:.9em;
}
aside.prep h3{
  margin-top:0;
  font-size:1.1em;
  border-bottom:1px solid rgba(34,211,238,.4);
  padding-bottom:.25rem;
}
aside.prep ul.thaw-list{ list-style:disc; padding-left:1.25rem; margin:0; }
aside.prep ul.thaw-list li{ margin-bottom:.4rem; }
span.recipe-hint{ color:var(--muted); font-size:.9em; font-style:italic; display:block; line-height:1.1; }
p.none{ color:var(--muted); font-style:italic; }

/* Skærm-only Kcal (skjules i print) */
.kcal-row{ font-size:.9rem; color:var(--muted); }
.kcal-row .mono{ font-variant-numeric:tabular-nums; }

/* Noter */
.recipe-notes details{ margin:.25rem 0; }
.recipe-notes .notes{ white-space:pre-wrap; line-height:1.0; }

/* ===========================
   Print – standard (én dag pr. side)
   =========================== */
@media print{
  body{ background:#fff !important; color:#000 !important; }
  a, a:visited{ color:#000; }
  .toolbar, .btn, .badge{ display:none !important; }
  .table th{ color:#000; }
  .card{ background:#fff; border-color:#ddd; box-shadow:none; }

  .day{ break-before:page; page-break-before:always; }
  .day:first-of-type{ break-before:auto; page-break-before:auto; }
  .ing-table, .menu-title, h2, h3{ break-inside:avoid; page-break-inside:avoid; }

  .day-content{ display:flex; gap:1rem; break-inside:avoid; page-break-inside:avoid; }
  .meal-list{ flex:2; }
  aside.prep{
    flex:1;
    background-color:#f0f0f0 !important;
    border:1px solid #999 !important;
  }
  .meal-list dt{ color:#333 !important; }
  span.recipe-hint{ color:#666 !important; }
  p.none{ color:#999 !important; }

  /* Skjul skærm-only */
  .kcal-row{ display:none !important; }
  .recipe-notes details.notes-screen{ display:none !important; }

  .print-only{ display:block; }
}

/* ===========================
   Print – FOUR MODE (4 dage/side) m/ fast header på ALLE sider
   Aktiveres når <body class="four-per-page">
   =========================== */
@media print {
  /* Vars for 4-dages layout + fast header */
  body.four-per-page{
    --print-topbot: 10mm;      /* side-margener uden header */
    --head-fixed: 18mm;        /* reserveret højde til header pr. side */
    --page-h: calc(297mm - (2 * var(--print-topbot)) - var(--head-fixed));
    --rows: 4;
    --gap: 5mm;
    --box-pad: 4mm;

    --meal-label-col: 32mm;
    --meal-font: 12pt;
    --meal-line: 1.35;
    --meal-row-gap: 3.2mm;
  }

  /* Reservér plads i toppen på HVER side til headeren */
  @page {
    /* top = normal topmargin + headerhøjde */
    margin: calc(var(--print-topbot) + var(--head-fixed)) 10mm 12mm 10mm;
    size: A4;
  }

  /* FAST (repeater) header på alle sider */
  /* Justér selector hvis din header har en klasse; her antager vi .wrap > header */
  body.four-per-page .wrap > header{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--head-fixed);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff;            /* hvid baggrund i print */
    color: #000;                 /* sort tekst i print */
    border-bottom: 1px solid #bbb;
    padding: 4mm 0 3mm;          /* visuelt pæn */
    z-index: 9999;
    margin: 0 !important;        /* nulstil evtl. margins fra skærm-UI */
  }
  body.four-per-page .wrap > header h1{ font-size:16pt; margin:0 0 1mm 0; }
  body.four-per-page .wrap > header small{ font-size:10pt; color:#000; }

  /* Dagbokse (4 pr. side) – uændret logik, men bruger nu --page-h */
  body.four-per-page .day{
    break-before:auto !important; page-break-before:auto !important;
    page-break-inside:avoid;
    margin:0 0 var(--gap) 0 !important;
    padding: var(--box-pad) !important;
    border-radius:6px; border:1px solid #bbb !important;
    height: calc((var(--page-h) - ((var(--rows) - 1) * var(--gap))) / var(--rows));
    display:flex; flex-direction:column; overflow:hidden;
    background:#fff !important;
  }
  body.four-per-page .card.solid{ background:#fff; border-color:#bbb; }
  body.four-per-page .day-head { margin:0 0 3mm 0 !important; }

  /* To spalter i dagboksen */
  body.four-per-page .day-content{
    display:grid !important; grid-template-columns: 1.1fr 0.9fr; gap:4mm;
    min-height:0; margin-top:0 !important;
  }
  body.four-per-page .meal-list,
  body.four-per-page aside.prep{
    border:1px solid #ddd !important; border-radius:5px; padding:4mm !important;
    min-height:0; overflow:hidden; background:#fff !important;
  }

  /* Læselig måltidsliste */
  body.four-per-page .meal-list{
    display:grid;
    grid-template-columns: var(--meal-label-col) 1fr;
    column-gap:4mm; row-gap: var(--meal-row-gap);
  }
  body.four-per-page .meal-list dl{ display:contents; }
  body.four-per-page .meal-list dt,
  body.four-per-page .meal-list dd{
    display:block; line-height: var(--meal-line);
    break-inside:avoid; page-break-inside:avoid;
    word-break: break-word; overflow-wrap:anywhere;
  }
  body.four-per-page .meal-list dt{
    font-size: calc(var(--meal-font) + .4pt) !important;
    font-weight:700; text-align:right; color:#111 !important; padding-top:.6mm;
  }
  body.four-per-page .meal-list dd{
    font-size: var(--meal-font) !important;
    margin:0; padding: 1.6mm 0;
    border-bottom:1px solid #aaa; color:#000;
  }
  body.four-per-page .meal-list dd:last-child{ border-bottom:none; }
  body.four-per-page .meal-list dl:nth-of-type(odd) dd{ background:#f4f4f4; }

  /* Højrespalte */
  body.four-per-page aside.prep h3 { font-size:11.5pt !important; margin:0 0 2.5mm 0; color:#000; }
  body.four-per-page aside.prep ul{ margin:0; padding-left:5mm; }
  body.four-per-page aside.prep li{ font-size:10.5pt !important; margin:0 0 2mm 0; color:#000; }
  body.four-per-page .recipe-hint{ color:#666 !important; }
  body.four-per-page p.none{ color:#777 !important; }

  /* Skjul toolbar ved print */
  body.four-per-page .toolbar { display:none !important; }
}


/* Legacy helpers */
.wrap{ max-width:1000px; margin:0 auto; padding:24px; }
header{ text-align:center; margin-bottom:1rem; }

/* Skjul print-only på skærm */
.print-only{ display:none; }