/* SSG Timetable – printable A4 sheet */
:root {
  --green: #4db374;
  --green-tint: #e8f5ec;
  --red: #f26a6c;
  --dark: #14283d;
  --teal: #124c51;
  --line: #c9d3dc;
  --muted: #5a6b7d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--dark);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- On-screen toolbar (not printed) ---------- */
body { background: #e9edf1; }

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.toolbar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.toolbar select {
  font: inherit;
  font-weight: 400;
  padding: 6px 8px;
  border: 2px solid #d3dce4;
  border-radius: 6px;
  background: #fff;
  color: var(--dark);
}
.toolbar .spacer { flex: 1; }
.toolbar a { color: var(--teal); font-weight: 600; text-decoration: none; }
.toolbar a:hover { text-decoration: underline; }
.toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  padding: 9px 20px;
  border: 0;
  border-radius: 25px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
.toolbar button:hover { background: #3d9860; }
.toolbar .hint { width: 100%; margin: 0; color: var(--muted); font-size: 13px; }

.stage { padding: 16px; overflow: hidden; }
.paper {
  width: max-content;
  margin: 0 auto;
  padding: 10mm;
  background: #fff;
  box-shadow: 0 6px 24px rgba(20, 40, 61, 0.18);
  transform-origin: top left;
}

/* ---------- The sheet: exactly the printable area of A4 ---------- */
.sheet {
  --fs: 10.5pt;
  width: 277mm;
  height: 190mm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4mm;
  font-size: var(--fs);
  line-height: 1.25;
}
body[data-layout="portrait"] .sheet { width: 190mm; height: 277mm; }

/* While measuring: natural height, nothing stretched */
.sheet.measuring,
body[data-layout] .sheet.measuring { height: auto !important; }
.sheet.measuring .grid { flex: none; }

/* Header */
.head {
  display: flex;
  align-items: center;
  gap: 5mm;
  padding-bottom: 3mm;
  border-bottom: 1.2mm solid var(--green);
}
.logo { max-height: 20mm; max-width: 55mm; object-fit: contain; }
.titles { flex: 1; min-width: 0; }
.org { font-size: 0.95em; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: 0.06em; }
.head h1 { margin: 0.5mm 0 0; font-size: 2.3em; line-height: 1.05; font-weight: 800; }
.month { font-size: 1.35em; font-weight: 600; color: var(--teal); margin-top: 0.5mm; }
.qr { display: flex; align-items: center; gap: 2.5mm; }
.qr svg { width: 20mm; height: 20mm; display: block; }
.qr-cap { font-size: 0.8em; color: var(--muted); line-height: 1.3; }

/* Weekly grid */
.grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2.5mm;
}
.col {
  display: flex;
  flex-direction: column;
  border: 0.3mm solid var(--line);
  border-radius: 2mm;
  overflow: hidden;
}
.col-head {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1.6mm 2.5mm;
}
.col-body { flex: 1; padding: 0 2.5mm; }
.item { padding: 2mm 0; border-bottom: 0.25mm solid #e3e8ed; break-inside: avoid; }
.item:last-child { border-bottom: 0; }
.time { font-weight: 700; color: var(--teal); }
.name { font-weight: 600; margin-top: 0.3mm; }
.tags { margin-top: 0.8mm; display: flex; flex-wrap: wrap; gap: 1mm; }
.missed { margin-top: 0.8mm; font-size: 0.85em; font-style: italic; color: var(--muted); }
.none { padding: 2mm 0; color: var(--muted); font-style: italic; }

/* Tags: wording carries the meaning, colours are a bonus (fine in black & white) */
.tag {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.35mm 1.6mm;
  border-radius: 3mm;
  border: 0.3mm solid currentColor;
  white-space: nowrap;
}
.tag-drop-in, .tag-free { color: #1f7a45; background: var(--green-tint); }
.tag-appointment { color: #b3302f; background: #fde9e9; }
.tag-book { color: var(--teal); background: #fff; }
.tag-members { color: var(--dark); background: #fff; border-style: dashed; }

/* Lower boxes */
.lower { display: grid; grid-template-columns: 1fr; gap: 3mm; }
.lower.two { grid-template-columns: 2fr 1fr; }
.box { border: 0.3mm solid var(--line); border-radius: 2mm; padding: 2mm 3mm; break-inside: avoid; }
.box h2 { margin: 0 0 1.2mm; font-size: 1.05em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); }
.box.closed { border-color: var(--red); }
.box.closed h2 { color: #b3302f; }
.list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 6mm; }
.lower.two .list { columns: 1; }
.closed .list { columns: 1; }
.list li { break-inside: avoid; padding: 0.6mm 0; display: flex; flex-wrap: wrap; gap: 0 2mm; align-items: baseline; }
.list .when { white-space: nowrap; }

/* Footer */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6mm;
  padding-top: 2mm;
  border-top: 0.3mm solid var(--line);
  font-size: 0.85em;
  color: var(--dark);
}
.foot-left > div + div { margin-top: 0.8mm; }
.disclaimer { font-weight: 600; }
.address { color: var(--muted); }
.contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6mm; text-align: right; white-space: nowrap; }
.contact strong { color: var(--teal); margin-right: 1mm; }

/* ---------- Printing ---------- */
@media print {
  body { background: #fff; }
  .toolbar { display: none !important; }
  .stage { padding: 0; height: auto !important; overflow: visible; }
  .paper { padding: 0; box-shadow: none; transform: none !important; margin: 0; width: auto; }
}