/* =========================================================
   SONDERANTRÄGE ALS KARTEN — Variante A, „Der Beleg"
   Gebunden an .son-page .son-karte
   =========================================================

   WARUM DIESE DATEI SPAETER LAEDT
   Das alte Neun-Spalten-Raster steht in dashboard.css als
   `.son-page .son-row { display:grid; grid-template-columns: 22px 28px … }`.
   Das Element traegt beide Klassen (son-row fuer die Selektoren und das
   Verhalten, son-karte fuer das Aussehen) — bei gleicher Spezifitaet
   entscheidet die Reihenfolge. Diese Datei muss deshalb NACH dashboard.css
   eingebunden sein; sie steht in dashboard.php hinter auswertung.css.

   WARUM KEINE EIGENE GRUNDPALETTE
   Flaechen, Schrift und Linien kommen aus --apv2-*, die .son-page ohnehin
   fuehrt und die fuer alle drei Themen gesetzt sind. Eine zweite Palette
   daneben waere eine zweite Stelle, die man beim naechsten Thema vergisst.
   Eigene Werte gibt es nur fuer die vier Artfarben — und die haben deshalb
   ihre drei Bloecke.
   ========================================================= */

.son-page{
  /* Die vier Antragsarten. Das ist BEDEUTUNG, keine Flaeche: an der Farbe
     erkennt man die Art, bevor man die Beschriftung liest. Sie wandert
     zwischen den Themen nur so weit, wie die Lesbarkeit es verlangt. */
  --sonk-ho-ink:#2F5F46; --sonk-ho-bg:rgba(61,122,90,.12);
  --sonk-su-ink:#A8562B; --sonk-su-bg:rgba(168,86,43,.12);
  --sonk-fb-ink:#8A6318; --sonk-fb-bg:rgba(184,134,43,.14);
  --sonk-ez-ink:#5A4A8C; --sonk-ez-bg:rgba(90,74,140,.12);
}
body.theme-dark .son-page{
  --sonk-ho-ink:#7FBE9C; --sonk-ho-bg:rgba(127,190,156,.16);
  --sonk-su-ink:#D9A06F; --sonk-su-bg:rgba(217,160,111,.16);
  --sonk-fb-ink:#D4B977; --sonk-fb-bg:rgba(212,185,119,.16);
  --sonk-ez-ink:#A895D8; --sonk-ez-bg:rgba(168,149,216,.16);
}
body.theme-modern .son-page{
  --sonk-ho-ink:#047857; --sonk-ho-bg:rgba(4,120,87,.10);
  --sonk-su-ink:#B45309; --sonk-su-bg:rgba(180,83,9,.10);
  --sonk-fb-ink:#1D4ED8; --sonk-fb-bg:rgba(29,78,216,.10);
  --sonk-ez-ink:#6D28D9; --sonk-ez-bg:rgba(109,40,217,.10);
}

/* ── Das Raster der Liste ────────────────────────────────────────────────── */
/* Nebeneinander, wie bei Urlaub und Krankmeldungen. Die einspaltige Fassung
   vom 19.09.2026 ist nach dem Ansehen wieder verworfen worden. */
.son-page .son-section-body{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  align-items:start;
}

/* ── Die Karte ───────────────────────────────────────────────────────────── */
/* Hebt das Zeilenraster auf. Alle hier gesetzten Eigenschaften stehen im
   alten Block ebenfalls — wer eine davon herausnimmt, bekommt die Zeile
   zurueck, nicht den Standardwert. */
.son-page .son-karte{
  display:flex; flex-direction:column; gap:9px;
  grid-template-columns:none;
  align-items:stretch;
  min-height:0; margin-bottom:0;
  padding:13px 15px 12px;
  background:var(--apv2-surface); border:1px solid var(--apv2-div);
  border-radius:var(--apv2-r-lg, 14px);
  box-shadow:var(--apv2-shadow-sm);
  cursor:pointer;
}
.son-page .son-karte:hover,
.son-page .son-karte.is-focused{
  background:var(--apv2-surface); border-color:var(--apv2-gold-soft);
  box-shadow:var(--apv2-shadow-md);
}
/* Der Dringlichkeitsstreifen sass links an der Zeile — an einer Karte gehoert
   er nach oben, sonst klebt er am Rand und wirkt wie ein Zeichenfehler. */
.son-page .son-karte::after{
  left:14px; right:14px; top:0; bottom:auto;
  width:auto; height:2px; border-radius:0 0 2px 2px;
}

/* ── Kopf: der Zeitraum ist der Antrag ───────────────────────────────────── */
.son-page .son-kopf{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
/* min-width:0, damit ein langer Zeitraum („01. Nov. 2026 – 31. Okt. 2028")
   die Art-Marke rechts nicht aus der Karte schiebt. */
.son-page .son-kopf-zeit{ min-width:0; }

/* Dringend: der Streifen oben allein reicht in einem dichten Raster nicht,
   weil man ihn erst sieht, wenn man die Karte schon liest. Der Rahmen zieht
   den Blick, bevor gelesen wird. `data-urgency` bleibt die Quelle der
   Wahrheit — die Klasse ist nur der Griff fuers Aussehen. */
.son-page .son-karte.is-dringend{
  border-color:var(--apv2-danger);
  box-shadow:0 0 0 1px var(--apv2-danger-wash, rgba(168,65,44,.08)), var(--apv2-shadow-sm);
}
.son-page .son-spanne{
  display:block; font:600 15.5px/1.2 var(--apv2-font-sans);
  letter-spacing:-.01em; color:var(--apv2-ink);
}
.son-page .son-dauer{ display:block; font-size:11.5px; color:var(--apv2-ink-4); margin-top:1px; }

.son-page .son-art-pill{
  flex:none; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:600; padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.son-page .son-art-homeoffice  { background:var(--sonk-ho-bg); color:var(--sonk-ho-ink); }
.son-page .son-art-sonderurlaub{ background:var(--sonk-su-bg); color:var(--sonk-su-ink); }
.son-page .son-art-fortbildung { background:var(--sonk-fb-bg); color:var(--sonk-fb-ink); }
.son-page .son-art-elternzeit  { background:var(--sonk-ez-bg); color:var(--sonk-ez-ink); }

/* ── Wer ─────────────────────────────────────────────────────────────────── */
.son-page .son-wer{ display:flex; align-items:center; gap:8px; }
.son-page .son-mono{
  flex:none; width:31px; height:31px; border-radius:7px;
  background:var(--apv2-ink); color:var(--apv2-surface);
  display:grid; place-items:center;
  font:600 11.5px var(--apv2-font-sans);
}
.son-page .son-wer-text{ min-width:0; }
.son-page .son-name{
  font:600 13px var(--apv2-font-sans); color:var(--apv2-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.son-page .son-team{
  font-size:11px; color:var(--apv2-ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.son-page .son-alter{
  margin-left:auto; flex:none; font-size:10.5px; color:var(--apv2-ink-4); white-space:nowrap;
}
/* Die Auswahlkaestchen sind an der Karte immer sichtbar. An der Zeile waren
   sie es auch — nur fiel dort nicht auf, dass sie ohne Maus unerreichbar
   sind, weil die Zeile ohnehin anklickbar war. */
.son-page .son-karte .son-row-check{ position:static; opacity:1; flex:none; }

/* ── Die typ-eigene Mitte ────────────────────────────────────────────────── */
.son-page .son-mitte{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:9px 0; border-top:1px solid var(--apv2-div); border-bottom:1px solid var(--apv2-div);
}
.son-page .son-zeile{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--apv2-ink-2);
}
.son-page .son-punkt{ color:var(--apv2-ink-5); }

/* Wochenstreifen: fuenf Kaestchen zeigen auch, wann jemand NICHT da ist. */
.son-page .son-woche{ display:flex; gap:4px; }
.son-page .son-tag{
  width:29px; text-align:center; padding:4px 0; border-radius:5px;
  font-size:10.5px; font-weight:500;
  background:var(--apv2-surface-2); color:var(--apv2-ink-4);
  border:1px solid var(--apv2-div);
}
.son-page .son-tag.an{
  background:var(--apv2-ink); color:var(--apv2-surface); border-color:var(--apv2-ink);
}

.son-page .son-anlass,
.son-page .son-kurs{
  font:600 14.5px/1.3 var(--apv2-font-sans); letter-spacing:-.01em; color:var(--apv2-ink);
}
.son-page .son-betrag{
  font:700 19px var(--apv2-font-sans); letter-spacing:-.02em; color:var(--apv2-ink);
  font-variant-numeric:tabular-nums;
}

.son-page .son-marke{
  font-size:10.5px; padding:2px 7px; border-radius:20px;
  background:var(--apv2-surface-2); border:1px solid var(--apv2-div);
  color:var(--apv2-ink-2);
}
/* 🚨 BEDEUTUNG IST KEINE FLAECHE — gruen/rot/gelb heissen hier „Nachweis da",
   „Nachweis fehlt", „Frist knapp". Sie wechseln mit dem Thema NICHT. */
.son-page .son-marke.gruen{ background:rgba(61,122,90,.12);  border-color:rgba(61,122,90,.30);  color:#2F5F46; }
.son-page .son-marke.rot  { background:rgba(155,59,59,.10);  border-color:rgba(155,59,59,.28);  color:#9B3B3B; }
.son-page .son-marke.gelb { background:rgba(168,86,43,.11);  border-color:rgba(168,86,43,.30);  color:#A8562B; }
/* Im Dunklen nur aufgehellt, damit sie auf Schwarz lesbar bleiben. */
body.theme-dark .son-page .son-marke.gruen{ color:#7FBE9C; }
body.theme-dark .son-page .son-marke.rot  { color:#D07761; }
body.theme-dark .son-page .son-marke.gelb { color:#D9A06F; }

.son-page .son-notiz{
  margin:0; font-size:12px; line-height:1.5; color:var(--apv2-ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── Entscheiden ─────────────────────────────────────────────────────────── */
.son-page .son-akt{ display:flex; gap:7px; margin-top:auto; }
.son-page .son-btn{
  flex:1; padding:8px 10px; border-radius:7px;
  font:500 12.5px var(--apv2-font-sans); cursor:pointer;
  border:1px solid var(--apv2-div-2); background:var(--apv2-surface); color:var(--apv2-ink-2);
  transition:background var(--apv2-dur) var(--apv2-ease), border-color var(--apv2-dur) var(--apv2-ease);
}
.son-page .son-btn.nein:hover{ border-color:var(--apv2-danger); color:var(--apv2-danger); }
.son-page .son-btn.ok{
  background:var(--apv2-ink); color:var(--apv2-surface); border-color:var(--apv2-ink);
}
.son-page .son-btn.ok:hover{ background:var(--apv2-gold-bronze); border-color:var(--apv2-gold-bronze); }

/* Ohne Entscheidungsrecht bleibt die Fusszeile stehen, aber leer waere sie
   ein Loch: die Karten stehen im Raster nebeneinander und `margin-top:auto`
   schiebt die Fusszeile an den Boden. Ein ruhiger Satz haelt die Hoehe und
   sagt gleichzeitig, dass der Antrag nicht vergessen wurde. */
.son-page .son-akt-wartet{
  flex:1; padding:8px 10px;
  font:500 12.5px var(--apv2-font-sans);
  color:var(--apv2-ink-3, var(--apv2-ink-2)); opacity:.75;
}

/* Das Ausklappen lief ueber `grid-column:1/-1` — in einer Flexspalte gibt es
   keine Spalten mehr, also volle Breite ueber die Flexachse.

   🚨 UND DIE POLSTERUNG MUSS MIT AUF NULL.
   Der Block ist zugeklappt ueber `max-height:0; overflow:hidden` — das kappt
   den INHALT, nicht die Polsterung. Die 14px oben und 6px unten blieben
   stehen und rissen unter den Knoepfen ein Loch in jede Karte. An der Zeile
   fiel das nicht auf, weil dort ohnehin nichts darunter kam; an einer Karte
   mit Rahmen sieht man jeden Pixel. */
.son-page .son-karte .son-row-expand{
  grid-column:auto; width:100%;
  grid-template-columns:1fr; gap:10px;
  padding:0; border-top:0;
}
.son-page .son-karte.is-open .son-row-expand{
  padding:12px 0 4px; border-top:1px dashed var(--apv2-div-2);
}

@media (max-width:520px){
  .son-page .son-section-body{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .son-page .son-karte, .son-page .son-btn{ transition:none; }
}

/* =========================================================
   RÜCKFRAGEN AN ANTRÄGEN
   =========================================================
   Der Faden hängt an der Genehmigungskarte (.pck-karte) und am
   Dialog zum Stellen. Farben aus --apv2-*, die alle drei Themen
   kennen — keine vierte Palette.
   ========================================================= */

.pck-rf{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 0; margin-top:2px;
  border-top:1px solid var(--apv2-div); border-bottom:1px solid var(--apv2-div);
}
.pck-rf-beitrag{ font-size:12px; line-height:1.5; padding-left:10px; border-left:2px solid var(--apv2-div-2); }
.pck-rf-beitrag p{ margin:2px 0 0; color:var(--apv2-ink-2); }
.pck-rf-kopf{ display:flex; gap:8px; align-items:baseline; font-size:10.5px; }
.pck-rf-kopf b{ font-weight:600; color:var(--apv2-ink); }
.pck-rf-kopf span{ color:var(--apv2-ink-4); }
/* Frage und Antwort sind zwei Richtungen, nicht zwei Wichtigkeiten —
   deshalb unterscheidet sie die Kante, nicht die Schriftgroesse. */
.pck-rf-beitrag.frage  { border-left-color:var(--apv2-gold); }
.pck-rf-beitrag.antwort{ border-left-color:#3D7A5A; }
body.theme-dark .pck-rf-beitrag.antwort{ border-left-color:#7FBE9C; }
.pck-rf-fuss{ font-size:10.5px; font-weight:500; color:var(--apv2-gold-bronze); }
body.theme-dark .pck-rf-fuss{ color:var(--apv2-gold); }

/* Der dritte Knopf. Er steht zwischen Genehmigen und Ablehnen, weil er
   die dritte Antwort auf dieselbe Frage ist — nicht darunter, wo er wie
   ein Nachgedanke wirkte. */
.pck-btn.frage{
  border-color:var(--apv2-gold-muted, var(--apv2-gold));
  color:var(--apv2-gold-bronze); background:var(--apv2-surface);
}
.pck-btn.frage:hover{ background:var(--apv2-gold-wash); }
body.theme-dark .pck-btn.frage{ color:var(--apv2-gold); }

/* ── Der Dialog ─────────────────────────────────────────────────────────── */
.pgc-rf-overlay{
  position:fixed; inset:0; z-index:1200; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(15,27,45,.42);
}
.pgc-rf-overlay.active{ display:flex; }
.pgc-rf-box{
  width:min(520px, 100%); background:var(--bg-elevated, #fff);
  border:1px solid var(--border, rgba(26,22,18,.12)); border-radius:14px;
  padding:20px 22px 18px; box-shadow:0 24px 60px -18px rgba(15,27,45,.4);
}
.pgc-rf-box h3{ margin:0 0 4px; font-size:17px; font-weight:600; color:var(--text-primary, #1A1612); }
.pgc-rf-sub{ margin:0 0 12px; font-size:12.5px; color:var(--text-muted, #6B6050); line-height:1.5; }
.pgc-rf-box textarea{
  width:100%; box-sizing:border-box; resize:vertical; font:inherit; font-size:13.5px;
  padding:10px 12px; border-radius:8px;
  border:1px solid var(--border, rgba(26,22,18,.14));
  background:var(--bg-base, #fff); color:var(--text-primary, #1A1612);
}
.pgc-rf-box textarea:focus{ outline:2px solid var(--accent, #B8862B); outline-offset:1px; border-color:transparent; }
.pgc-rf-zaehler{ margin-top:5px; font-size:11px; color:var(--text-muted, #6B6050); text-align:right; }
.pgc-rf-akt{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.pgc-rf-akt .pck-btn{ flex:0 0 auto; min-width:120px; }

/* ── Die Antwort des Antragstellers ─────────────────────────────────────── */
.pgc-rf-antwortfeld{ display:flex; gap:7px; margin-top:8px; }
.pgc-rf-antwortfeld input{
  flex:1; min-width:0; font:inherit; font-size:12.5px; padding:7px 10px;
  border-radius:7px; border:1px solid var(--border, rgba(26,22,18,.14));
  background:var(--bg-elevated, #fff); color:var(--text-primary, #1A1612);
}