/* DRSA Lehrgang-App — Stylesheet im v97-Design
   Wasserwacht-Look: weiß, weiches Blau, abgerundete Cards, große Pills.
   Quelle: drsa_test_prototype_v97/app/styles.css (übernommen + an SSR-Patterns angepasst).
*/

:root {
  --ww-blue: #008ccd;
  --dark-blue: #002d55;
  --drk-red: #e60005;
  --bg: #fff;
  --soft: #eff4f7;
  --line: #e0ddd6;
  --text: #554f4a;
  --muted: #7a746f;
  --panel: #fff;
  --ok-bg: #e6f7ea;
  --ok: #1f7a3d;
  --warn-bg: #fff4dc;
  --warn: #7e5b00;
  --bad-bg: #fdecee;
  --bad: #a4001c;
  --font: "Helvetica Neue", "Open Sans", Arial, Helvetica, sans-serif;
  --radius: 18px;
  --shadow: 0 10px 22px rgba(0, 45, 85, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: #fff;
  color: var(--text);
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--dark-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--dark-blue); margin: 0 0 8px; }

/* ====================================================================
   Shell-Layout — Sidebar (300px) + Main
   ==================================================================== */

.shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
  background: #fff;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  padding: 24px 18px;
  background: #fff;
}

.logo-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 18px;
}
.logo-wrap img { width: 100%; height: auto; }

.stripes {
  display: flex;
  gap: 8px;
  margin: 18px 0 24px;
}
.stripes span {
  height: 10px;
  flex: 1;
  background: var(--ww-blue);
  border-radius: 999px;
}

.nav-group { margin: 20px 0; }
.nav-label {
  margin: 0 0 8px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dark-blue);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}
.nav-btn:hover, .nav-btn.active {
  background: #edf7fc;
  border-color: #cfe6f3;
  text-decoration: none;
}
.nav-btn .nav-btn-label { flex: 1; min-width: 0; }
.nav-badge {
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}
.nav-sub {
  margin: 6px 0 0 18px;
  display: grid;
  gap: 4px;
}

.user-card {
  margin-top: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.user-card strong { color: var(--dark-blue); }
.user-card .muted { color: var(--muted); font-size: 0.88rem; }
.user-card form { display: inline-block; margin-top: 10px; }

.main {
  padding: 28px 28px 40px;
  background: #fff;
  min-width: 0;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.page-head h1, .page-head h2 {
  margin: 0 0 8px;
  color: var(--dark-blue);
  font-size: 2rem;
  font-weight: 700;
}
.page-head p {
  margin: 0;
  line-height: 1.45;
  max-width: 900px;
  color: var(--muted);
}

/* ====================================================================
   Cards, Grids
   ==================================================================== */

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card-title { margin-top: 0; }
.card-body { line-height: 1.5; }
.card-footer { margin-top: 12px; color: var(--muted); }

.metric .value, .kpi {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark-blue);
  margin: 0;
}
.metric .label { color: var(--muted); line-height: 1.4; }
.kpi.ok   { color: var(--ok); }
.kpi.warn { color: var(--warn); }
.kpi.bad  { color: var(--bad); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 1rem 0; }

.dash-section { margin: 2rem 0; }
.empty { color: var(--muted); font-style: italic; }
.small { font-size: .88rem; color: var(--muted); }
.muted { color: var(--muted); }

/* ====================================================================
   Tables
   ==================================================================== */

.data-table, table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.data-table th, .data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.data-table th {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}
.data-table tr.click:hover { background: #f8fbfd; cursor: pointer; }

.table-wrap { overflow: auto; }

/* ====================================================================
   Buttons
   ==================================================================== */

.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--dark-blue);
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { background: #f7fbfd; text-decoration: none; }
.btn.btn-primary, .btn.primary {
  background: var(--ww-blue);
  border-color: var(--ww-blue);
  color: #fff;
}
.btn.btn-primary:hover, .btn.primary:hover {
  background: var(--dark-blue);
  border-color: var(--dark-blue);
}
.btn.btn-warn, .btn.warn {
  background: var(--warn-bg);
  border-color: #efd995;
  color: var(--warn);
}
.btn.btn-danger, .btn.danger {
  background: var(--bad-bg);
  border-color: #f2bdc7;
  color: var(--bad);
}
.btn.btn-ok, .btn.success {
  background: var(--ok-bg);
  border-color: #cfe8d5;
  color: var(--ok);
}
.btn.btn-cancel { background: transparent; color: var(--muted); border-color: transparent; }
.btn.small { min-height: 34px; padding: 8px 12px; font-size: 0.92rem; }
.btn-link {
  background: none;
  border: none;
  color: var(--dark-blue);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
  font-weight: 600;
}

.inline-form { display: inline-block; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.row, .toolbar, .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flex-between { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.stack { display: grid; gap: 12px; }

/* ====================================================================
   Forms
   ==================================================================== */

.form, form.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 1rem 0;
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-row, .field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-bottom: 14px;
}
.form-row.full, .field.full { grid-column: 1/-1; }
.form-row label, .field span, .field label {
  font-weight: 700;
  color: var(--dark-blue);
}
.form-row input, .form-row select, .form-row textarea,
.field input, .field select, .field textarea {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #c8d7e1;
  background: #fff;
  width: 100%;
  max-width: 100%;
}
.form-row input, .form-row select,
.field input, .field select {
  height: 38px;
  min-height: 38px;
  line-height: 1.2;
}
/* v0.37.0: Checkboxes und Radios sind ein anderer Schnack — die globale
   38px-Höhe + 100%-Breite + Padding lässt sie sonst gigantisch aussehen.
   Native Größe wieder herstellen, nur leichtes Sizing für Klick-Komfort. */
.form-row input[type="checkbox"], .form-row input[type="radio"],
.field input[type="checkbox"], .field input[type="radio"] {
  padding: 0;
  height: 18px;
  min-height: 18px;
  width: 18px;
  margin: 0;
  border-radius: 4px;
  accent-color: #0078a8;
}
/* v0.37.0: Inline-Checkbox-Label mit Häkchen + Text auf einer Linie.
   Für die Reg-Card-Booleans, damit sie nicht als „Riesen-Pille" rendern. */
.ct-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--dark-blue);
  padding: 6px 0;
}
.ct-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 18px;
}
.ct-checkbox span { font-weight: 600; }
.field textarea, .form-row textarea {
  min-height: 96px;
  resize: vertical;
}
.req { color: var(--bad); }
.form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
fieldset { margin: 1rem 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.checkbox { display: block; margin: .35rem 0; font-weight: normal; }
.checkbox input { margin-right: .5rem; }

/* ====================================================================
   Pills, Status, Notes
   ==================================================================== */

.pill, .status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}
.pill.ok, .status-bestanden,
.status.status-bestanden, .status.status-aktiv {
  background: var(--ok-bg);
  color: var(--ok);
}
.pill.warn, .status-offen,
.status.status-offen, .status.status-konflikt {
  background: var(--warn-bg);
  color: var(--warn);
}
.pill.bad, .status-nicht_bestanden,
.status.status-nicht_bestanden {
  background: var(--bad-bg);
  color: var(--bad);
}
.pill.open, .status-abgeschlossen,
.status.status-abgeschlossen {
  background: #eef3f6;
  color: var(--dark-blue);
}
.pill.conflict { background: var(--bad); color: #fff; }

.note {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  line-height: 1.45;
}
.note.warn, .flash-warn {
  background: var(--warn-bg);
  border-color: #efd995;
  color: var(--warn);
}
.note.conflict, .flash-error, .flash.flash-error {
  background: var(--bad-bg);
  border-color: #f2bdc7;
  color: var(--bad);
}
.note.ok, .flash-ok, .flash.flash-ok {
  background: var(--ok-bg);
  border-color: #cfe8d5;
  color: var(--ok);
}
.flash { padding: 12px 16px; border-radius: 14px; margin: 12px 0; border: 1px solid var(--line); }

/* ====================================================================
   Konflikte & Fristwarnungen — Card-Pattern + Auflösungs-Forms
   v97-Vorbild: app.js::renderConflicts + dialog-actions.js::openConflict
   ==================================================================== */

.conflict-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conflict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.conflict-person {
  color: var(--dark-blue);
  font-size: 1.05rem;
}
.conflict-form-toggle > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}
.conflict-form-toggle > summary::-webkit-details-marker { display: none; }
.conflict-form-toggle[open] > summary { margin-bottom: 0; }

.list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--dark-blue);
}
a.list-item:hover { background: #f7fbfd; text-decoration: none; }

.selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.selection-grid .choice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #c8d7e1;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  align-items: flex-start;
}
.selection-grid .choice:hover { background: #f7fbfd; }
.selection-grid .choice input[type="radio"] { margin-top: 4px; }
.selection-grid .choice:has(input[type="radio"]:checked) {
  background: #edf7fc;
  border-color: #cfe6f3;
  box-shadow: inset 0 0 0 1px rgba(0, 140, 205, 0.18);
}
.selection-grid .choice.is-disabled,
.selection-grid .choice:has(input[type="radio"]:disabled) {
  background: #f6f7f8;
  color: var(--muted);
  cursor: not-allowed;
}
.selection-grid .choice.is-current {
  outline: 2px solid var(--ok);
  outline-offset: -2px;
}
@media (max-width: 720px) {
  .selection-grid { grid-template-columns: 1fr; }
}

/* Enrollment-Detail: Result-Cell-Form + Aktionen-Toggle */
.result-cell-toggle > summary,
.action-toggle > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}
.result-cell-toggle > summary::-webkit-details-marker,
.action-toggle > summary::-webkit-details-marker { display: none; }
.action-toggle { width: 100%; }
.result-cell-form { background: #f9fcfe; }

/* ====================================================================
   Course-Workspace (Split-View) — v97-Vorbild course-ui.js
   ==================================================================== */

.course-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 16px;
  align-items: start;
}
.workspace-list {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.workspace-list-item {
  text-decoration: none;
}
.workspace-list-item.selected {
  background: #edf7fc;
  border-color: #cfe6f3;
  box-shadow: inset 0 0 0 1px rgba(0, 140, 205, 0.18);
}
.workspace-panel-wrap { min-width: 0; }
.workspace-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.workspace-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .course-workspace { grid-template-columns: 1fr; }
  .workspace-list { position: static; max-height: none; }
}

/* ====================================================================
   Tabellenansicht / Result-Matrix (PDF-nahe Sicht mit klickbaren Zellen)
   v97-Vorbild: app.js::renderResultTableView + resultMatrixCellHtml
   ==================================================================== */

.performance-matrix-wrap {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.performance-matrix {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.performance-matrix th,
.performance-matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
  font-size: 0.92rem;
}
.performance-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7fbfd;
  color: var(--dark-blue);
  font-weight: 700;
}
.performance-matrix .sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  text-align: left;
  white-space: normal;
  min-width: 180px;
  max-width: 240px;
  border-right: 1px solid var(--line);
}
.performance-matrix thead .sticky-col {
  z-index: 4;
  background: #f7fbfd;
}
.performance-matrix .matrix-head-title {
  font-weight: 700;
  margin-bottom: 4px;
  max-width: 11rem;
  margin-left: auto;
  margin-right: auto;
}
.performance-matrix .matrix-head-count {
  font-size: 0.82rem;
  color: var(--ok);
  font-weight: 700;
}
.performance-matrix .matrix-head-open {
  font-size: 0.78rem;
}

.matrix-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 2.4rem;
  min-height: 2.2rem;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--dark-blue);
  border: 1px solid transparent;
}
.matrix-cell:hover { text-decoration: none; background: #edf7fc; }
.matrix-cell.passed { background: var(--ok-bg); color: var(--ok); }
.matrix-cell.failed { background: var(--bad-bg); color: var(--bad); }
.matrix-cell.open { background: #fff; color: var(--muted); }
.matrix-cell.empty { color: var(--muted); background: transparent; font-weight: normal; }
.matrix-cell.selected {
  outline: 2px solid var(--ww-blue);
  outline-offset: -2px;
}
.matrix-note {
  font-size: 0.78rem;
  color: var(--warn);
  margin-left: 1px;
}
.stage-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.matrix-view-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

/* ====================================================================
   Leistungsansicht (Performance) — Split-View Template-Liste + Detail
   ==================================================================== */

.performance-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 16px;
  align-items: start;
}
.performance-workspace .participants-pane {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.performance-workspace .detail-pane { min-width: 0; }
.performance-row {
  text-decoration: none;
}
.performance-row.selected {
  background: #edf7fc;
  border-color: #cfe6f3;
  box-shadow: inset 0 0 0 1px rgba(0, 140, 205, 0.18);
}
.bulk-result-actions .btn.is-current {
  outline: 2px solid var(--ww-blue);
  outline-offset: -2px;
}
@media (max-width: 1100px) {
  .performance-workspace { grid-template-columns: 1fr; }
  .performance-workspace .participants-pane { position: static; max-height: none; }
}

/* ====================================================================
   Reg-Pattern-Editor (Kursvorlagen-Form)
   v97-Vorbild: course-template-helpers.js::buildRegPatternRows
   ==================================================================== */

.reg-pattern-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.reg-pattern-row {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fcfe;
}
.reg-pattern-row .field { margin-bottom: 0; }
.reg-order-field {
  align-self: stretch;
}
.reg-order-actions {
  gap: 4px;
}
.reg-pattern-preview {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--soft);
  border-radius: 14px;
}
.reg-pattern-preview-value {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
  color: var(--dark-blue);
}
@media (max-width: 720px) {
  .reg-pattern-row { grid-template-columns: 1fr; }
}

/* ====================================================================
   Hilfe-Seite + Statistik-Baukasten
   ==================================================================== */

.help-grid { display: grid; gap: 12px; }
.help-card > summary {
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
  list-style: none;
}
.help-card > summary::-webkit-details-marker { display: none; }
.help-card[open] > summary { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.help-card .help-topic-pill { background: #edf7fc; color: var(--dark-blue); }
.help-topic-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.custom-stats-table td .bar-chart {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
}
.custom-stats-table td .bar-chart span {
  display: inline-block;
  height: 12px;
  background: var(--ww-blue);
  border-radius: 999px;
  min-width: 4px;
}
.custom-stats-table td .bar-chart em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Selbstauskunft: prominent code + url card */
.share-url, .share-code {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.share-code { font-size: 1.4rem; letter-spacing: 2px; }
.share-url { word-break: break-all; max-width: 100%; }

/* ====================================================================
   Filter-Tabs (Desktop)
   ==================================================================== */

.filter-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  margin-bottom: 1rem;
}
.filter-tabs a {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--dark-blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.filter-tabs a.active {
  background: #edf7fc;
  border-color: #cfe6f3;
  box-shadow: inset 0 0 0 1px rgba(0, 140, 205, 0.12);
}

/* ====================================================================
   Key-Value-Liste (Stammdaten-Anzeige)
   ==================================================================== */

dl.course-meta, dl.kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 16px;
  margin: 0 0 16px;
}
.course-meta dt, .kv dt {
  font-weight: 700;
  color: var(--muted);
}
.course-meta dd, .kv dd { margin: 0; color: var(--dark-blue); }

/* ====================================================================
   Quick-Links
   ==================================================================== */

.quick-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--dark-blue);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.quick-links a:hover { border-color: #cfe6f3; text-decoration: none; }

/* ====================================================================
   Admin-Grid (Karten-Übersicht)
   ==================================================================== */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}
.admin-card {
  display: block;
  background: #fff;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--dark-blue);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.admin-card:hover { background: #f7fbfd; text-decoration: none; box-shadow: 0 14px 28px rgba(0, 45, 85, 0.12); }

/* ====================================================================
   Result-Matrix + Anwesenheit (Desktop)
   ==================================================================== */

.matrix th, .matrix td { text-align: center; padding: .35rem; font-size: .9rem; }
.matrix .row-name { text-align: left; font-weight: 700; color: var(--dark-blue); }
.matrix .cell-pass { background: var(--ok-bg); color: var(--ok); }
.matrix .cell-fail { background: var(--bad-bg); color: var(--bad); }
.matrix .cell-open { color: var(--muted); }
.rotated { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; height: 7rem; }
.legend { background: var(--soft); padding: 12px 14px; border-radius: 14px; margin: 14px 0; }

.attendance-matrix th, .attendance-matrix td { padding: .25rem; text-align: center; }
.att {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  font-weight: 700;
}
.att-yes { background: var(--ok-bg); color: var(--ok); }
.att-no { background: #fff; color: var(--muted); }
.att-toggle button { padding: 0; border: 0; background: transparent; }

/* Auth + Public Layouts */
body.auth, body.public {
  background: linear-gradient(135deg, #f6fbfd 0%, #fff 60%, #edf7fc 100%);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
}
.auth-card, .public-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 26px 55px rgba(0, 45, 85, 0.18);
}
.auth-card h1, .public-card h1 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  text-align: center;
}
.auth-card .auth-logo {
  display: block;
  margin: 0 auto 18px;
  max-width: 280px;
}

/* Footer */
.footer {
  padding: 16px 24px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}

/* ====================================================================
   Test-Modus-Banner
   ==================================================================== */

.test-banner {
  background: #ffe066;
  color: #5a3d00;
  padding: 8px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 2px solid #c79100;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.test-banner-meta {
  display: inline-block;
  margin-left: .75rem;
  font-weight: 400;
  opacity: .85;
}

/* ====================================================================
   Mobile Anpassungen (Desktop-Layout auf engen Bildschirmen)
   ==================================================================== */

@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .grid.cols-2, .grid.cols-3, .grid.cols-4,
  .form-grid { grid-template-columns: 1fr; }
  .main { padding: 18px; }
  .page-head h1, .page-head h2 { font-size: 1.6rem; }
  dl.course-meta, dl.kv { grid-template-columns: 1fr; }
}

/* ====================================================================
   Mobile-View (eigene SSR-Variante, views/mobile/*)
   ==================================================================== */

body.view-mobile {
  background: linear-gradient(180deg, #fff 0%, #f6fbfd 100%);
  min-height: 100vh;
}

.mobile-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--dark-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 45, 85, 0.18);
}
.mobile-topbar a { color: #fff; }
.mobile-brand a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.1rem;
}
.mobile-brand a::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--ww-blue);
  border-radius: 999px;
}
.mobile-nav { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.mobile-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
}
.mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.18);
}
.mobile-user { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mobile-user-name { font-size: .88rem; opacity: .88; }
.mobile-logout { display: inline-flex; }
.mobile-btn { min-height: 44px; padding: 10px 14px; font-size: 1rem; }
.mobile-btn-block { display: block; width: 100%; }

.mobile-main { padding: 12px 12px 24px; max-width: 720px; margin: 0 auto; }
.mobile-footer {
  padding: 16px 16px 24px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mobile-h1 { margin: .25rem 0 .75rem; font-size: 1.4rem; color: var(--dark-blue); }
.mobile-h2 { margin: 1rem 0 .5rem; font-size: 1.1rem; color: var(--dark-blue); }
.mobile-back { margin: 0 0 .75rem; font-size: .95rem; }

.mobile-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 6px 0 12px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.mobile-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--dark-blue);
}
.mobile-tab.active {
  background: var(--ww-blue);
  color: #fff;
}

.mobile-course-list,
.mobile-enrollment-list,
.mobile-staff-list,
.mobile-attendance-list,
.mobile-reg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-course-item,
.mobile-enrollment-item,
.mobile-staff-item,
.mobile-attendance-item,
.mobile-reg-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.mobile-course-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-height: 60px;
  color: var(--dark-blue);
}
.mobile-course-link:hover { background: #f8fbfd; text-decoration: none; }
.mobile-course-title { font-weight: 700; font-size: 1.02rem; color: var(--dark-blue); }
.mobile-course-meta { color: var(--muted); font-size: .85rem; }

.mobile-staff-item { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.mobile-staff-name { font-weight: 700; color: var(--dark-blue); }
.mobile-staff-meta { color: var(--muted); font-size: .85rem; }

.mobile-attendance-item { padding: 12px 16px; display: flex; gap: 12px; align-items: baseline; }
.mobile-attendance-date { font-weight: 700; color: var(--dark-blue); }
.mobile-attendance-note { color: var(--muted); font-size: .85rem; }

.mobile-course-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.mobile-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.mobile-meta dt { font-weight: 700; color: var(--muted); }
.mobile-meta dd { margin: 0; color: var(--dark-blue); }

.mobile-section { margin: 1.25rem 0; }
.mobile-actions { display: flex; flex-direction: column; gap: 10px; margin: 1rem 0; }
.mobile-form { display: flex; flex-direction: column; gap: 8px; }
.mobile-label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--dark-blue); }
.mobile-input {
  padding: 10px 12px;
  border: 1px solid #c8d7e1;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
.mobile-textarea { min-height: 96px; resize: vertical; }

.mobile-desktop-hint, .mobile-hint {
  font-size: .9rem;
  color: var(--muted);
  margin: 1rem 0 .5rem;
  text-align: center;
}

.mobile-course-note {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn);
  padding: 12px 14px;
  margin: 0;
  white-space: pre-wrap;
  border-radius: 12px;
}

.mobile-result-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mobile-result-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.mobile-result-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mobile-result-name { font-weight: 700; color: var(--dark-blue); }
.mobile-result-note { margin: 6px 0 8px; color: var(--muted); font-size: .9rem; }
.mobile-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mobile-result-actions .mobile-form.inline { display: contents; }
.mobile-result-btn { flex: 1 0 auto; min-width: 8rem; }

.mobile-attendance-day-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mobile-attendance-day-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  box-shadow: var(--shadow);
}
.mobile-attendance-day-item.present { border-left: 4px solid var(--ok); }
.mobile-attendance-day-item.absent  { border-left: 4px solid var(--muted); }
.mobile-attendance-name { font-weight: 700; flex: 1; color: var(--dark-blue); }
.att-large {
  min-height: 44px;
  min-width: 10rem;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  line-height: 1.2;
}
.att-large.att-yes { background: var(--ok-bg); color: var(--ok); border-color: #cfe8d5; }
.att-large.att-no  { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.mobile-attendance-summary {
  background: #f7fbfd;
  padding: 10px 14px;
  border-radius: 12px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--dark-blue);
}

.mobile-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.mobile-search .mobile-label { flex: 1 1 100%; margin: 0; }
.mobile-search .mobile-input { flex: 1 1 60%; }
.mobile-search .btn { flex: 0 0 auto; }
.mobile-search-clear {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
}

.mobile-reg-item {
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.mobile-reg-stage { font-weight: 700; color: var(--muted); min-width: 4.5rem; }
.mobile-reg-no {
  background: #edf7fc;
  border: 1px solid #cfe6f3;
  padding: 2px 8px;
  border-radius: 8px;
  font-family: "SF Mono", "Consolas", monospace;
  color: var(--dark-blue);
}
.mobile-reg-source { color: var(--muted); font-size: .85rem; }

/* Beckenrand-Quick-Action-Buttons in Result-Tabellen
   (Performance-View, Workspace-Panel). Einzelnen-Klick-POST für die häufigsten Fälle
   „Bestanden" und „Nicht bestanden". Volles Cell-Form bleibt unter „▼ mehr". */
.btn-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.92rem;
  min-height: 38px;
  min-width: 52px;
  cursor: pointer;
  font-family: inherit;
}
.btn-quick-pass {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: #b8e0c2;
}
.btn-quick-pass:hover {
  background: #d1eddc;
  border-color: #91d0a4;
}
.btn-quick-fail {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: #f2bdc7;
}
.btn-quick-fail:hover {
  background: #f9d8de;
  border-color: #e69eae;
}
.btn-quick:active {
  transform: translateY(1px);
}

/* Mobile-Anpassungen für ganz schmale Geräte */
@media (max-width: 380px) {
  .mobile-h1 { font-size: 1.25rem; }
  .mobile-course-link { padding: 12px 14px; }
  .mobile-search { padding: 12px; }
}

/* Druck-Optimierung für die Selbstauskunfts-Share-Card.
   v97 hat dafür eine eigene `/fortschritt/<token>/drucken`-Route gehabt;
   der Re-Build erlaubt direktes Drucken der Teilnahme-Detail-Seite, blendet
   beim Druck aber alles außer der share-print-Card aus. */
@media print {
  body * { visibility: hidden; }
  .share-print, .share-print * { visibility: visible; }
  .share-print {
    position: absolute; left: 0; top: 0; width: 100%;
    background: #fff !important;
  }
  .share-print .card { border: 1px solid #ccc !important; background: #fff !important; }
  .share-print .share-qr { background: #fff !important; }
  /* Pillen + Counter im Print weglassen, da sie nicht zur Selbstauskunft gehören */
  .share-print .pill { background: transparent !important; }
}

/* v0.36.0: Anwesenheits-Grid (Day-Detail-View).
   TN- und Lehrpersonal-Cards als klickbare Toggle-Buttons. */
.attendance-day-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit;
}
.attendance-day-row:hover { background: #f4f8fa; }
.attendance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.attendance-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line, #d6e2ea);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  min-height: 64px;
}
.attendance-card:hover { background: #f4f8fa; }
.attendance-card:focus-visible { outline: 2px solid #0078a8; outline-offset: 2px; }
.attendance-card.present {
  background: #e6f7ea;
  border-color: #4caf85;
}
.attendance-card.present strong { color: #1f7a3a; }
.attendance-card.absent { background: #fff; }