/* ── Lesweken (admin) ───────────────────────────────────────────────────
   Opgebouwd door lesweken-admin.js binnen #lesweken-root. Kleur = informatie:
   mos = les / actie, honing = vakantie (aandacht), berry = fout/verwijderen. */

#lesweken-tab { max-width: 1100px; }

.lw-header h2 { margin: 0; }
.lw-year-select { width: auto; min-width: 220px; }

.lw-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-rest);
  padding: 20px;
  margin-bottom: 16px;
}

/* Titel + subregel boven elk blok */
.lw-card-title { margin: 0 0 4px; font-size: 1.05rem; }
.lw-card-sub { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.88rem; }

/* Bereik: eerste/laatste lesweek + status en verwijderen */
.lw-range-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lw-range { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; }
.lw-range-group { display: flex; flex-direction: column; gap: 4px; }
.lw-range-inputs { display: flex; gap: 8px; align-items: center; }
.lw-week-select { width: auto; min-width: 128px; }
.lw-year-fixed {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-weight: 600;
  cursor: default;
}
.lw-range-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-left: auto; }
.lw-range-error { margin: 12px 0 0; color: var(--berry); font-size: 0.9rem; font-weight: 600; }

/* Opslaanstatus */
.lw-status { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.lw-status.is-saved { color: var(--moss); }
.lw-status.is-error { color: var(--berry); }

/* Samenvatting-chips */
.lw-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lw-chip {
  background: var(--sunken);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.lw-chip b { color: var(--moss); }
.lw-chip-vac { background: color-mix(in srgb, var(--honey) 16%, var(--surface)); }

/* Aantal lessen per jaar: per leerjaar het doel + ingeplande lesweken.
   Honing-rand = doel hoger dan het aantal ingeplande lesweken. */
.lw-target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lw-target-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  transition: border-color var(--dur-color) ease;
}
.lw-target-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lw-target-top label { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.lw-target-input { width: 84px; flex-shrink: 0; margin: 0; padding: 8px 12px; }
.lw-target-info { font-size: 0.8rem; color: var(--ink-soft); }
.lw-target-info b { color: var(--ink); }
.lw-target-item.is-warn { border-color: var(--honey); }
.lw-target-item.is-warn .lw-target-info { color: var(--ink); }
.lw-target-warn { color: var(--honey); }
@media (max-width: 900px) {
  .lw-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nog niet ingesteld */
.lw-notice { border-left: 4px solid var(--honey); background: color-mix(in srgb, var(--honey) 7%, var(--surface)); }
.lw-notice-title { margin: 0 0 4px; font-size: 1.05rem; }
.lw-notice-text { margin: 0 0 16px; color: var(--ink-soft); }
.lw-notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Weektabel */
.lw-hint { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 12px; }
.lw-weeks-card { container-type: inline-size; }
.lw-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 820px; }
.lw-table th,
.lw-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: center; background: var(--surface); }
.lw-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.lw-table .lw-th-week,
.lw-table .lw-th-note { text-align: left; }
.lw-table tbody tr:last-child td { border-bottom: none; }

.lw-week { text-align: left !important; white-space: nowrap; }
.lw-week b { display: inline-block; min-width: 68px; }
.lw-week small { color: var(--ink-soft); font-size: 0.82rem; }
.lw-today-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: hsl(150 30% 92%);
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 1px;
}
:root[data-theme="dark"] .lw-today-tag { background: hsl(150 25% 24%); }
.lw-row.is-today td { box-shadow: inset 0 2px 0 var(--moss); }

/* Vakantie-knop (hele week) */
.lw-vac {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-color) ease, color var(--dur-color) ease, border-color var(--dur-color) ease;
}
.lw-vac:hover { border-color: var(--honey); color: var(--honey); }
.lw-vac.on { background: var(--honey-fill); border-color: var(--honey-fill); color: #fff; }
.lw-vac.on:hover { background: color-mix(in srgb, var(--honey-fill) 85%, black); color: #fff; }

/* Les / Geen les per leerjaar */
.lw-cell {
  min-width: 72px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-color) ease, color var(--dur-color) ease, border-color var(--dur-color) ease;
}
.lw-cell.les { background: hsl(150 30% 92%); color: var(--moss); }
.lw-cell.les:hover { border-color: var(--moss); }
.lw-cell.geen { background: var(--sunken); color: var(--ink-soft); border: 1px dashed var(--ink-soft); }
.lw-cell.geen:hover { color: var(--ink); border-color: var(--ink); }
.lw-cell:disabled { cursor: default; background: var(--sunken); color: var(--ink-soft); border-color: transparent; }
:root[data-theme="dark"] .lw-cell.les { background: hsl(150 25% 24%); }

/* Vakantieweek: rij in honingtint, leerjaar-vakjes gedimd */
.lw-row.is-vac td { background: color-mix(in srgb, var(--honey) 9%, var(--surface)); }
.lw-row.is-vac .lw-cell-td > * { opacity: 0.4; }

/* Opmerking */
.lw-note-td { text-align: left !important; }
.lw-note {
  width: 100%;
  min-width: 180px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  transition: border-color var(--dur-color) ease, background-color var(--dur-color) ease;
}
.lw-note::placeholder { color: var(--ink-soft); opacity: 0.7; }
.lw-note:hover { border-color: var(--line); }
.lw-note:focus { border-color: var(--moss); background: var(--surface); outline: none; }

/* Smal: de tabel scrolt binnen de kaart (horizontaal én verticaal, zodat de
   kop sticky blijft), met de weekkolom vast aan de linkerkant. Breed: geen
   eigen scrollvlak, dan plakt de kop aan de bovenkant van het venster. */
@container (max-width: 860px) {
  .lw-table-scroll {
    overflow: auto;
    max-height: 70vh;
    margin: 0 -8px;
    padding: 0 8px;
  }
  .lw-table .lw-week,
  .lw-table .lw-th-week {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--line);
  }
  .lw-table thead .lw-th-week { z-index: 3; }
  .lw-row.is-today .lw-week { box-shadow: inset 0 2px 0 var(--moss), 1px 0 0 var(--line); }
}

@media (max-width: 640px) {
  .lw-card { padding: 16px; }
  .lw-year-select { min-width: 0; flex: 1; }
  .lw-range-side { margin-left: 0; justify-content: flex-start; }
  .lw-target-grid { gap: 8px; }
  .lw-target-item { padding: 12px; }
  .lw-target-input { width: 72px; }
}

@media (max-width: 340px) {
  .lw-target-grid { grid-template-columns: minmax(0, 1fr); }
}