/*!
 * Schuljahreswechsel WebUntis - Styles
 * Copyright (C) 2026 Sebastian Horn, Friedrich-Rückert-Gymnasium Düsseldorf
 * SPDX-License-Identifier: GPL-3.0-or-later
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#1B2A4A;
  --paper:#F6F4EF;
  --paper-2:#EFEBE2;
  --line:#DDD7C8;
  --muted:#6B6457;
  --error:#B5577A;
  --accent-default:#5B6FA8;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
header{
  padding:28px 20px 16px;
  border-bottom:1px solid var(--line);
  width:100%;
  box-sizing:border-box;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 6px;
}
h1{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; margin:0; }

main{ flex:1; padding:20px 40px; width:100%; box-sizing:border-box; }

@media (min-width:900px) {
  main{ padding:24px 60px; }
}

footer{ padding:14px 20px; text-align:center; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }
.footer-user{ display:inline-flex; align-items:center; gap:6px; }
.footer-user-name{ color:var(--ink); font-weight:500; }
.footer-user-rolle{
  font-size:10px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase;
  padding:1px 6px; border-radius:4px; letter-spacing:.04em;
}
.footer-rolle-admin{ background:#2c3e6622; color:#2c3e66; }
.footer-rolle-mitglied{ background:#3D7B6F22; color:#3D7B6F; }

.lade-hinweis{ color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:13px; }

/* --- Login --- */
.login-box{
  max-width:340px; margin:40px auto; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:24px;
}
.login-box label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-family:'IBM Plex Mono',monospace; }
.login-box input{
  width:100%; padding:9px 10px; margin-bottom:14px; border:1px solid var(--line);
  border-radius:6px; font-size:14px; background:var(--paper);
}
.login-box input:focus{ outline:2px solid var(--accent-default); outline-offset:1px; }
.btn{
  background:var(--ink); color:#fff; border:none; border-radius:6px;
  padding:10px 16px; font-size:14px; font-weight:500; cursor:pointer; width:100%;
}
.btn:hover{ opacity:.9; }
.btn-sekundaer{ background:none; color:var(--muted); border:1px solid var(--line); width:auto; padding:6px 12px; font-size:12px; }
.fehler{ color:var(--error); font-size:13px; margin-bottom:12px; }

/* --- Fortschritt --- */
.progress-wrap{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.progress-track{ flex:1; height:10px; border-radius:6px; background:var(--paper-2); border:1px solid var(--line); overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,#D98A2B,var(--accent-default)); transition:width .3s ease; }
.progress-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); white-space:nowrap; }

/* --- Schritte --- */
.phase-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; margin:18px 0 8px; }
.schritt{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent, var(--accent-default));
  border-radius:8px; margin-bottom:8px; overflow:hidden;
}
.schritt.erledigt{ opacity:.6; }
.schritt-zeile{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; cursor:pointer; }
.checkbox{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line);
  flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center;
}
.checkbox.checked{ background:var(--accent,var(--accent-default)); border-color:var(--accent,var(--accent-default)); }
.checkbox.checked::after{ content:"✓"; color:#fff; font-size:12px; font-weight:700; }
.schritt-text{ flex:1; font-size:14.5px; line-height:1.4; }
.schritt-text.erledigt{ text-decoration:line-through; color:var(--muted); }
.schritt-detail{ padding:0 14px 14px 48px; display:none; }
.schritt-detail.offen{ display:block; }
.detail-text{ font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 10px; }
.felder{ display:flex; gap:10px; flex-wrap:wrap; }
.feld{ display:flex; flex-direction:column; gap:3px; }
.feld label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.feld input{ font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--paper); width:150px; }
.feld textarea{ font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--paper); width:100%; font-family:inherit; resize:vertical; }
.feld-breit{ width:100%; }
.kommentar-text{ font-size:13px; color:var(--ink); margin:0; font-style:italic; }

/* --- Admin --- */
.admin-bereich{ margin-top:32px; border-top:1px dashed var(--line); padding-top:18px; }
.admin-bereich h2{ font-family:'Space Grotesk',sans-serif; font-size:16px; }
.admin-tabelle{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
.admin-tabelle th, .admin-tabelle td{ text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
.inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
.inline-form .feld input, .inline-form .feld select{ width:130px; }

.top-leiste{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; flex-wrap:wrap; }

/* --- Tabs --- */
.tabs{ display:flex; gap:6px; }
.tab{
  background:none; border:1px solid var(--line); border-radius:6px;
  padding:7px 14px; font-size:13px; cursor:pointer; color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
}
.tab.aktiv{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* --- Dashboard --- */
.dash-block{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:12px; }
.dash-aktuell{ border-left:4px solid var(--accent, var(--accent-default)); }
.dash-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 6px; }
.dash-titel{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin:0 0 4px; }
.dash-meta{ font-size:13px; color:var(--muted); margin:0; }
.dash-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.dash-liste li{ display:flex; gap:10px; font-size:14px; align-items:baseline; }
.dash-datum{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); min-width:46px; }
.dash-datum-rot{ color:var(--error); font-weight:600; }
.dash-phasenzeile{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.dash-phasenname{ font-size:12.5px; min-width:160px; font-family:'IBM Plex Mono',monospace; }
.dash-schuljahr{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--muted); margin:0 0 14px; }

.vorlagen-set-zeile{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  background:#fff; margin-bottom:6px;
}

/* --- Eigene Farbauswahl --- */
.farbwahl{ padding:8px; background:#fff; border:1px solid var(--line); border-radius:8px; width:220px; }
.farbwahl-palette{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.farbwahl-kaestchen{
  width:24px; height:24px; border-radius:4px; border:2px solid transparent;
  cursor:pointer; padding:0; transition:transform .1s;
}
.farbwahl-kaestchen:hover{ transform:scale(1.15); }
.farbwahl-kaestchen.aktiv{ border-color:#fff; outline:2px solid #333; }
.farbwahl-eigene{ display:flex; align-items:center; gap:6px; }
.farbwahl-vorschau{ width:28px; height:28px; border-radius:5px; border:1px solid var(--line); flex-shrink:0; }
.farbwahl-hex{ flex:1; font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:5px; font-family:'IBM Plex Mono',monospace; }
.farb-popup{ position:absolute; top:28px; left:0; z-index:100; box-shadow:0 4px 16px rgba(0,0,0,.15); border-radius:8px; }
.neue-phase-form{ display:flex; flex-direction:column; gap:6px; }

/* --- Breiteres Layout: zwei Spalten ab 900px --- */
@media (min-width:900px) {
  .phasen-liste{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}

/* --- Gantt Zoom --- */
.gantt-zoom{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:var(--muted); }
.gantt-zoom input[type=range]{ flex:1; max-width:200px; accent-color:var(--accent-default); }

.phasen-liste{ display:flex; flex-direction:column; gap:12px; }
.phasen-block{
  border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:default;
}
.phasen-block.wird-gezogen{ opacity:.4; }
.phasen-kopf{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:color-mix(in srgb, var(--phase-farbe) 12%, white);
  border-bottom:2px solid var(--phase-farbe);
}
.phasen-griff{ font-size:16px; cursor:grab; }
.phasen-farbe-picker{ width:28px; height:28px; padding:0; border:none; border-radius:4px; cursor:pointer; flex-shrink:0; }
.phasen-name-feld{
  flex:1; border:none; background:transparent; font-size:14px; font-weight:700;
  color:var(--phase-farbe); padding:2px 4px; border-radius:4px;
}
.phasen-name-feld:focus{ background:#fff; outline:1px solid var(--phase-farbe); }

.vorlagen-liste{ display:flex; flex-direction:column; gap:4px; }
.vorlagen-zeile-wrapper{
  background:#fff; border:1px solid var(--line); border-radius:6px; cursor:grab;
}
.vorlagen-zeile-wrapper.wird-gezogen{ opacity:.4; }
.vorlagen-zeile-wrapper.inaktiv{ opacity:.5; }
.vorlagen-zeile{ display:flex; align-items:center; gap:8px; padding:6px 8px; }
.zieh-griff{ color:var(--muted); font-size:14px; flex-shrink:0; cursor:grab; }
.vorlagen-titel-feld{ flex:1; border:none; background:none; font-size:13.5px; padding:4px; border-radius:4px; }
.vorlagen-titel-feld:focus{ background:var(--paper); outline:1px solid var(--line); }
.vorlagen-phase-feld{ font-size:11px; border:1px solid var(--line); border-radius:4px; padding:3px 4px; background:var(--paper); max-width:180px; }
.vorlagen-beschreibung-feld{
  width:100%; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--paper); font-family:inherit; resize:vertical;
}
.md-toolbar{ display:flex; gap:4px; margin-bottom:6px; }
.md-toolbar button{
  font-size:11.5px; padding:4px 8px; border:1px solid var(--line); border-radius:5px;
  background:#fff; cursor:pointer; color:var(--ink);
}
.md-toolbar button:hover{ background:var(--paper); }
.vorlagen-vorschau{
  font-size:13px; line-height:1.5; padding:8px 10px; border:1px dashed var(--line);
  border-radius:6px; background:#fff; color:var(--ink);
}
.vorlagen-vorschau ul, .vorlagen-vorschau ol{ margin:0 0 6px; padding-left:20px; }
.detail-text ul, .detail-text ol{ margin:0 0 10px; padding-left:20px; }

.sj-wahl{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sj-wahl select{ font-size:13px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.archiv-hinweis{
  font-size:12px; color:#7a5c00; background:#fff8e1; border:1px solid #ffe082;
  border-radius:6px; padding:8px 12px; margin-bottom:10px;
}
.schritt.readonly{ opacity:.8; }
.schritt.readonly .checkbox{ cursor:default; background:none !important; border-color:#ccc !important; }
.schritt.readonly .checkbox.checked{ background:#ccc !important; }

.export-leiste{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.export-leiste .btn{ font-size:12px; padding:4px 10px; }

/* --- Aktivitätsprotokoll --- */
.admin-tabelle td{ font-size:12px; }
.parallel-gruppe{
  border:2px dashed var(--line); border-radius:10px;
  padding:6px 6px 6px; margin-bottom:8px; background:#fafaf8;
}
.parallel-gruppe-label{
  padding:2px 6px 6px; display:flex; align-items:center; gap:6px;
}
.parallel-gruppe .schritt{ margin-bottom:4px; }
.parallel-gruppe .schritt:last-child{ margin-bottom:0; }

/* --- Parallel-Badge --- */
.parallel-badge{
  font-size:10.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:.03em;
  color:#fff; background:var(--accent, #5B6FA8); border-radius:4px;
  padding:1px 6px; flex-shrink:0; white-space:nowrap;
}
.toggle-wrap{ display:flex; align-items:center; gap:4px; cursor:pointer; }
.toggle-wrap input[type="checkbox"]{ width:14px; height:14px; cursor:pointer; accent-color:var(--accent-default); }
.toggle-label{ font-size:11px; color:var(--muted); white-space:nowrap; }

@media print {
  .parallel-badge{ background:#555 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .toggle-wrap{ display:none; }
}

/* ============================================================
   Druckansicht – Checkliste
   Zeigt die Checkliste sauber auf Papier:
   - Header/Footer bleiben, Navigation/Buttons verschwinden
   - Alle Schritte ausgeklappt (detail-Bereich immer sichtbar)
   - Farben bleiben (phase-Akzente), aber Hintergründe weg
   - Jede Phase beginnt möglichst nicht mitten auf einer Seite
   ============================================================ */
@media print {
  @page { margin: 20mm 15mm; }

  /* Alles ausblenden was nicht zur Checkliste gehört */
  .kein-druck,
  .top-leiste,
  footer,
  .admin-bereich,
  .progress-wrap,
  .chev,
  .felder label,
  .schritt-zeile [data-rolle="chevron"] { display: none !important; }

  body { background: #fff; font-size: 11pt; }
  header { border-bottom: 1pt solid #ccc; padding: 10mm 0 4mm; }
  h1 { font-size: 16pt; }
  main { max-width: 100%; padding: 0; }

  /* Alle Detail-Bereiche aufklappen */
  .schritt-detail { display: block !important; padding: 0 0 6pt 24pt; }

  /* Schritte kompakter */
  .schritt {
    border: 0.5pt solid #ccc;
    border-left: 3pt solid var(--accent, #5B6FA8);
    margin-bottom: 4pt;
    page-break-inside: avoid;
  }
  .schritt-zeile { padding: 6pt 8pt; }
  .schritt-text { font-size: 10.5pt; }
  .detail-text { font-size: 9.5pt; color: #555; margin: 0 0 4pt; }

  /* Verantwortlich + Datum als Text ausgeben */
  .felder { display: flex; gap: 16pt; flex-wrap: wrap; margin-bottom: 4pt; }
  .feld { display: flex; flex-direction: column; gap: 1pt; }
  .feld input {
    border: none; background: none; padding: 0;
    font-size: 9.5pt; color: #333;
  }

  /* Checkbox als Kästchen */
  .checkbox {
    width: 10pt; height: 10pt; border: 1pt solid #999;
    border-radius: 2pt; flex-shrink: 0; margin-top: 2pt;
    background: none !important;
  }
  .checkbox.checked::after { content: '✓'; font-size: 8pt; display: block; text-align: center; line-height: 10pt; }

  /* Phasen-Überschriften */
  .phase-title {
    font-size: 12pt; font-weight: 700; margin: 10pt 0 4pt;
    page-break-after: avoid;
  }

  /* Links als Text */
  a::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #666; }
}

/* ============================================================
   Zeitstrahl: gemeinsame Untertabs
   ============================================================ */
.zeitstrahl-tabs{ display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.zt-tab{
  font-size:12px; padding:4px 12px; border:1px solid var(--line); border-radius:5px;
  background:#fff; cursor:pointer; color:var(--ink);
}
.zt-tab.aktiv{ background:var(--accent-default); color:#fff; border-color:var(--accent-default); }

/* ============================================================
   Gantt
   ============================================================ */
.gantt-wrap{ overflow-x:auto; font-size:11.5px; }
.gantt-kopf,
.gantt-zeile,
.gantt-phase-zeile{ display:flex; align-items:center; }
.gantt-label-zelle{
  min-width:180px; max-width:180px; padding:3px 6px; font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;
}
.gantt-phase-label{ font-weight:700; font-size:11.5px; padding-top:10px; }
.gantt-schritt-label{ color:var(--ink); }
.gantt-schritt-label.erledigt{ color:var(--muted); text-decoration:line-through; }
.gantt-raster{ display:grid; flex:1; min-width:0; }
.gantt-tag{
  font-size:9px; color:var(--muted); text-align:center; padding:2px 0;
  border-left:1px solid transparent;
}
.gantt-tag.gantt-heute{ color:var(--accent-default); font-weight:700; }
.gantt-zelle{
  height:22px; border-left:1px solid #eee; position:relative;
  display:flex; align-items:center;
}
.gantt-heute-spalte{ background:rgba(91,111,168,.06); }
.gantt-heute-spalte .gantt-tag{ border-left-color:var(--accent-default); }
.gantt-balken{
  height:10px; margin:auto 0;
}
.gantt-punkt{
  width:12px; height:12px; border-radius:50%;
  margin:0 auto;
}
.gantt-balken-start{
  border-radius:5px 0 0 5px; width:100%; margin-left:25%;
}
.gantt-balken-mitte{
  border-radius:0; width:100%; height:10px;
}
.gantt-balken-ende{
  border-radius:0 5px 5px 0; width:75%;
}
.gantt-erledigt{ opacity:.35; }
.gantt-ueberfaellig{ outline:2px solid #c0392b; outline-offset:1px; border-radius:3px; }

/* ============================================================
   Timeline
   ============================================================ */
.timeline{ position:relative; padding:8px 0; }
.tl-datum-zeile{
  display:flex; align-items:center; gap:8px; margin:12px 0 4px;
}
.tl-datum-linie{ flex:1; height:1px; background:var(--line); }
.tl-datum-label{
  font-size:11px; font-family:'IBM Plex Mono',monospace;
  color:var(--muted); white-space:nowrap; flex-shrink:0;
}
.tl-datum-label.tl-heute{ color:var(--accent-default); font-weight:700; }
.tl-datum-label.tl-vergangenheit{ color:#c0392b; }
.tl-eintrag{
  display:flex; align-items:flex-start; gap:10px;
  padding:5px 0 5px 6px; border-left:2px solid var(--accent, var(--accent-default));
  margin-left:10px; margin-bottom:2px;
}
.tl-eintrag.tl-erledigt{ opacity:.5; border-left-color:#ccc; }
.tl-eintrag.tl-ueberfaellig{ border-left-color:#c0392b; }
.tl-punkt{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent, var(--accent-default)); flex-shrink:0; margin-top:3px;
  margin-left:-14px;
}
.tl-eintrag.tl-erledigt .tl-punkt{ background:#ccc; }
.tl-eintrag.tl-ueberfaellig .tl-punkt{ background:#c0392b; }
.tl-inhalt{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; flex:1; }
.tl-phase{ font-size:10px; font-family:'IBM Plex Mono',monospace; flex-shrink:0; }
.tl-titel{ font-size:13px; }
.tl-meta{ font-size:11px; color:var(--muted); }

@media print {
  /* Zeitstrahl: Querformat für mehr Breite */
  .zeitstrahl-tabs, .gantt-zoom{ display:none !important; }
  .gantt-wrap{ overflow:visible; width:100%; }
  .gantt-label-zelle{ min-width:160px; max-width:160px; font-size:9pt; }
  .gantt-tag{ font-size:7pt; }
  .gantt-zelle{ height:18px; }
  .gantt-balken, .gantt-punkt{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .gantt-phase-label{ font-size:9pt; font-weight:bold; }
  .tl-eintrag{ page-break-inside:avoid; }
  .tl-datum-label{ font-size:9pt; }
  .tl-titel{ font-size:10pt; }
}

/* ============================================================
   Mobilansicht (max-width: 640px)
   ============================================================ */
@media (max-width:640px) {
  header{ padding:16px 14px 10px; }
  h1{ font-size:18px; }
  main{ padding:12px 14px; }

  /* Kopfleiste: Tabs untereinander auf kleinen Screens */
  .top-leiste{ flex-wrap:wrap; gap:6px; padding:8px 14px; }
  .tabs{ width:100%; }
  .tab{ font-size:12px; padding:6px 10px; }

  /* Schritte: kompaktere Darstellung */
  .schritt{ border-radius:6px; }
  .schritt-zeile{ padding:10px 10px; }
  .schritt-text{ font-size:13.5px; }
  .checkbox{ width:18px; height:18px; border-radius:4px; }

  /* Felder untereinander statt nebeneinander */
  .felder{ flex-direction:column; }
  .feld input, .feld textarea{ width:100%; box-sizing:border-box; }

  /* Dashboard-Blöcke */
  .dash-block{ padding:12px; }
  .dash-phasenzeile{ flex-wrap:nowrap; }
  .dash-phasenname{ min-width:120px; font-size:11px; }

  /* Progress-Wrap */
  .progress-wrap{ flex-wrap:wrap; gap:6px; }

  /* Admin-Tabellen: horizontal scrollbar statt Overflow */
  .admin-tabelle{ display:block; overflow-x:auto; white-space:nowrap; }

  /* Gantt: Label-Spalte schmaler */
  .gantt-label-zelle{ min-width:120px; max-width:120px; font-size:10px; }

  /* Zeitstrahl-Tabs */
  .zeitstrahl-tabs{ flex-wrap:wrap; }

  /* Phasen-Verwaltung: immer einspaltig */
  .phasen-liste{ display:flex !important; flex-direction:column; }

  /* Vorlagen-Zeile: Phase-Selector umbrechend */
  .vorlagen-zeile{ flex-wrap:wrap; }
  .vorlagen-phase-feld{ max-width:100%; width:100%; }

  /* Export-Leiste */
  .export-leiste{ flex-wrap:wrap; }

  /* Login-Box */
  .login-box{ padding:16px; }
}