/* =========================================================
   MITARBEITERGESPRÄCHE ALS KARTEN
   Gebunden an .gsp-karte
   =========================================================

   WARUM SPAETER GELADEN
   Das alte Sieben-Spalten-Raster steht in dashboard.css als
   `.apv-row { display:grid; grid-template-columns: … }`. Das Element traegt
   beide Klassen — `apv-row`, weil handleApprove() den Eintrag darueber sucht
   und rund fuenfundzwanzig CSS-Regeln daran haengen, und `gsp-karte` fuers
   Aussehen. Bei gleicher Spezifitaet entscheidet die Reihenfolge, diese Datei
   muss also NACH dashboard.css stehen. tests/frontend/test_karten_bedienbar.php
   prueft das mit.

   WARUM DIE KARTE ANDERS AUSSIEHT ALS DIE ANDEREN
   Ein Gespraech ist keine Genehmigung. Es gibt keinen Zeitraum und keine
   Tagezahl, dafuer ZWEI Personen und ein Thema. Deshalb steht oben der Termin
   (oder dass es noch keinen gibt), darunter „wer fragt wen", dann das Thema.
   ========================================================= */

.gsp-raster{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  align-items:start;
}

/* ── Die Karte ───────────────────────────────────────────────────────────── */
.gsp-karte{
  display:flex; flex-direction:column; gap:9px;
  grid-template-columns:none; align-items:stretch;
  min-height:0; padding:13px 15px 12px;
  background:var(--bg-elevated, #fff);
  border:1px solid var(--border, rgba(26,22,18,.10));
  border-radius:12px;
  box-shadow:0 1px 2px rgba(15,27,45,.04);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.gsp-karte:hover{
  border-color:var(--accent, #B8862B);
  box-shadow:0 6px 20px -8px rgba(15,27,45,.14);
}

/* ── Kopf: Termin und Stand ──────────────────────────────────────────────── */
.gsp-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gsp-termin{ min-width:0; }
.gsp-datum{
  display:block; font-size:15px; font-weight:600; letter-spacing:-.01em;
  color:var(--text-primary, #1A1612); font-variant-numeric:tabular-nums;
}
/* 🚨 EIN WUNSCHTERMIN DARF NICHT AUSSEHEN WIE EIN BESTAETIGTER.
   Sonst erscheint jemand zu einem Gespraech, das niemand zugesagt hat. */
.gsp-terminart{
  display:block; margin-top:1px; font-size:10.5px;
  color:var(--warning, #A8722C); font-weight:500;
}

.gsp-status{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
}
/* Bedeutung, keine Flaeche — diese drei wechseln mit dem Thema nicht. */
.gsp-status.pending  { background:rgba(168,114,44,.12); color:#A8722C; }
.gsp-status.approved { background:rgba(61,122,90,.12);  color:#2F5F46; }
.gsp-status.rejected { background:rgba(155,59,59,.10);  color:#9B3B3B; }
body.theme-dark .gsp-status.pending  { color:#D2A05C; }
body.theme-dark .gsp-status.approved { color:#7FBE9C; }
body.theme-dark .gsp-status.rejected { color:#D07761; }

/* ── Wer fragt wen ───────────────────────────────────────────────────────── */
/* Beide Namen stehen da. Wer nur einen zeigt, zwingt zum Aufklappen, nur um
   zu wissen, ob man selbst gemeint ist. */
.gsp-wer{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-primary, #1A1612);
}
.gsp-mono{
  flex:none; width:26px; height:26px; border-radius:6px;
  background:var(--text-primary, #1A1612); color:var(--bg-elevated, #fff);
  display:grid; place-items:center; font-size:10px; font-weight:600;
}
.gsp-wer-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:11ch; font-weight:500;
}
.gsp-pfeil{ color:var(--text-muted, #9A8F7D); flex:none; }

/* ── Thema und Kategorie ─────────────────────────────────────────────────── */
.gsp-mitte{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:9px 0;
  border-top:1px solid var(--border, rgba(26,22,18,.08));
  border-bottom:1px solid var(--border, rgba(26,22,18,.08));
}
.gsp-thema{
  font-size:13.5px; line-height:1.4; color:var(--text-primary, #1A1612);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.gsp-zeile{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* 🚨 `--bg-secondary` GIBT ES NICHT.
   Hier stand sie als Hintergrund — und weil eine unbekannte Variable auf den
   Rueckfallwert faellt, sass in JEDEM Thema derselbe helle Ton: helle Chips
   auf einer dunklen Karte. Dieselbe Familie wie `--bg-surface` bei den
   Genehmigungskarten. Das Haus fuehrt --bg-base, --bg-card, --bg-elevated
   und --bg-hover; nichts sonst. */
.gsp-marke{
  font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:500;
  background:var(--bg-hover, #F6F0E2);
  border:1px solid var(--border, rgba(26,22,18,.10));
  color:var(--text-secondary, #3A332A);
}
/* Die fuenf Kategorien aus convCategoryLabels. Konfliktklaerung faellt
   bewusst auf — das ist das Gespraech, das nicht liegen bleiben darf. */
.gsp-kat-feedback    { border-color:rgba(63,111,168,.30); color:#3F6FA8; }
.gsp-kat-performance { border-color:rgba(184,134,43,.34); color:#8A6318; }
.gsp-kat-conflict    { border-color:rgba(155,59,59,.30);  color:#9B3B3B; font-weight:600; }
.gsp-kat-development { border-color:rgba(61,122,90,.30);  color:#2F5F46; }
.gsp-kat-other       { color:var(--text-muted, #6B6050); }
body.theme-dark .gsp-kat-feedback    { color:#7BA6D9; }
body.theme-dark .gsp-kat-performance { color:#D4B977; }
body.theme-dark .gsp-kat-conflict    { color:#D07761; }
body.theme-dark .gsp-kat-development { color:#7FBE9C; }

.gsp-antwort{
  margin:0; font-size:12px; line-height:1.5; color:var(--text-secondary, #3A332A);
  padding-left:9px; border-left:2px solid var(--border, rgba(26,22,18,.14));
}

/* ── Entscheiden ─────────────────────────────────────────────────────────── */
.gsp-akt{ display:flex; gap:7px; margin-top:auto; }
/* 🚨 DER ZWEITE KNOPF DARF NICHT AUSSEHEN WIE GESPERRT.
   Hier stand `--text-secondary` (#8B7E74). Auf Weiss sind das rund 3,9:1 —
   unter der Lesbarkeitsschwelle, und neben einem satten „Zusagen" liest sich
   „Ablehnen" dann als deaktiviert. Wer glaubt, er koenne nicht ablehnen,
   sagt zu. Der Unterschied zwischen den beiden Knoepfen gehoert in die
   FLAECHE (weiss gegen dunkel), nicht in die Schrift. */
.gsp-btn{
  flex:1; padding:8px 10px; border-radius:7px; font:inherit; font-size:12.5px;
  font-weight:500; cursor:pointer;
  border:1px solid var(--border, rgba(26,22,18,.12));
  background:var(--bg-elevated, #fff); color:var(--text-primary, #1A1612);
  transition:background .14s ease, border-color .14s ease;
}
.gsp-btn.nein:hover{ border-color:#9B3B3B; color:#9B3B3B; }
.gsp-btn.ok{
  background:var(--text-primary, #1A1612); color:var(--bg-elevated, #fff);
  border-color:var(--text-primary, #1A1612);
}
.gsp-btn.ok:hover{ background:var(--accent, #B8862B); border-color:var(--accent, #B8862B); }

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