/* freigaben.css — Freigabe-Cockpit (Surface 'freigaben').
   Hero, KPI-Kacheln, Cards und Tabellen kommen aus dashboard.css /
   master-ai-template.css. Hier nur surface-eigene Bausteine — ausschliesslich
   Tokens aus tokens.css, keine Hardcodes, keine Prototyp-Farben (Golden Rule #33). */

/* Konsistente Abstaende: Content klebt nie am Header oder am Rand
   (verbindliche Hausregel). Breite = --content-max wie alle Surfaces. */
.fg-wrap {
  max-width: var(--content-max, 1240px);
  margin: 0 auto;
  padding: var(--sp-7, 28px) 0 var(--sp-2xl, 48px);
  padding-inline: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}

/* ── Hinweis: Freigabe ist keine Ausfuehrung ─────────────────────────────── */
.fg-notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-md);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--inf-bd);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--inf-bg);
  color: var(--tx-1);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 860px;
}
.fg-notice strong { color: var(--tx-0); }
.fg-notice-ico { color: var(--inf); display: inline-flex; margin-top: 2px; flex: 0 0 auto; }

/* ── Meldungen ───────────────────────────────────────────────────────────── */
.fg-error,
.fg-warn {
  margin: var(--sp-md) 0;
  padding: var(--sp-2-5) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--tx-1);
}
.fg-error { background: var(--er-bg); border: 1px solid var(--er-bd); }
.fg-warn  { background: var(--wa-bg); border: 1px solid var(--wa-bd); }

/* ── KPI-Kacheln als Typ-Filter ──────────────────────────────────────────── */
.dash-kpi.fg-kpi-on {
  border-color: var(--bdr-str);
  background: var(--bg-el);
  box-shadow: inset 0 0 0 1px var(--bdr-def);
}
.fg-wrap .dash-kpi-arrow { display: inline-flex; align-items: center; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.fg-toolbar { margin: var(--sp-lg) 0 var(--sp-md); }

/* ── Karten pro Typ ──────────────────────────────────────────────────────── */
.fg-card { margin: 0 0 var(--sp-lg); }
.fg-card-head {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  flex: 1 1 auto;
}
.fg-card-hint { font-size: var(--t-sm); }
/* Gruppen-Sammelauswahl sitzt rechts im Kartenkopf, rutscht schmal in
   die naechste Zeile statt zu ueberlaufen. */
.fg-selall { margin-inline-start: auto; }

/* Breite Tabellen scrollen in sich, nie die Seite. */
.fg-tbl-wrap, .fg-sub-tbl-wrap { overflow-x: auto; }
/* Der Vorschlagstext ist die Hauptspalte. Auswahl + die vier Randspalten sind
   fix, Spalte 3 bekommt den Rest — sonst bricht der Titel auf drei Zeilen um. */
.fg-tbl { min-width: 864px; table-layout: fixed; }
.fg-tbl td { vertical-align: top; }
.fg-tbl th:nth-child(1), .fg-tbl td:nth-child(1) { width: 44px; }
.fg-tbl th:nth-child(2), .fg-tbl td:nth-child(2) { width: 132px; }
.fg-tbl th:nth-child(4), .fg-tbl td:nth-child(4) { width: 108px; }
.fg-tbl th:nth-child(5), .fg-tbl td:nth-child(5) { width: 116px; }
/* 244 statt 198: die zwei Knoepfe Freigeben/Ablehnen brauchen zusammen
   ~244px. Bei 198px ragten sie 46px aus der Spalte und erzwangen einen
   horizontalen Scrollbalken, obwohl die Tabelle sonst passte
   (live gemessen 27.07.2026: Tabelle 1158px = Container, Wrapper-
   scrollWidth 1204px). */
.fg-tbl th:nth-child(6), .fg-tbl td:nth-child(6) { width: 244px; }

/* ── Sammel-Auswahl: Kaestchen, markierte Zeile ──────────────────────────── */
.fg-selcell { text-align: center; }
.fg-check {
  width: 15px; height: 15px; margin: 0; vertical-align: middle;
  accent-color: var(--ac-1); cursor: pointer;
}
.fg-check:disabled { cursor: default; opacity: 0.45; }
.fg-tbl td.fg-selcell { padding-top: var(--sp-3); }
.fg-row-sel td { background: var(--inf-bg); }
.fg-row-sel.fg-row-open td { background: var(--inf-bg); }

/* Herkunftszeile unter dem Vorschlagstext (ersetzt die eigene Spalte). */
.fg-rowmeta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1); font-size: var(--t-xs); color: var(--tx-2);
}
.fg-title { color: var(--tx-0); }
.fg-teaser {
  font-size: var(--t-sm); color: var(--tx-1); margin-top: var(--sp-1);
  max-width: 62ch; line-height: 1.55;
}
.fg-dim { font-size: var(--t-sm); color: var(--tx-2); }
.fg-src { word-break: break-all; }
.fg-nowrap { white-space: nowrap; }
.fg-num { text-align: right; font-variant-numeric: tabular-nums; }
.fg-neg { color: var(--er); font-weight: 700; }
.fg-more { margin-top: var(--sp-sm); }
.fg-btn-gap { margin-left: var(--sp-sm); }
.fg-row-open td { background: var(--bg-el); }

/* ── Detailbereich ───────────────────────────────────────────────────────── */
.fg-detail-row td { background: var(--bg-el); padding: 0 !important; }
.fg-detail { padding: var(--sp-lg) var(--sp-4-5); display: grid; gap: var(--sp-md); }
.fg-detail-block > p { margin: 0 0 var(--sp-1); font-size: var(--t-sm); max-width: 78ch; }
.fg-detail-h {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tx-2); margin-bottom: var(--sp-2);
}
.fg-sub-tbl {
  background: var(--bg-surface); min-width: 680px; max-width: 1040px;
  table-layout: fixed;
}
.fg-sub-tbl th { font-size: var(--t-xs); }
.fg-sub-tbl td { font-size: var(--t-sm); vertical-align: top; }
.fg-sub-tbl th:nth-child(1), .fg-sub-tbl td:nth-child(1) { width: 220px; }
.fg-sub-tbl th:nth-child(3), .fg-sub-tbl td:nth-child(3) { width: 300px; }
.fg-sub-tbl th:nth-child(4), .fg-sub-tbl td:nth-child(4) { width: 140px; }
.fg-empty-note { font-size: var(--t-sm); color: var(--tx-2); margin: 0; }

.fg-gatelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.fg-gatelist li { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }

.fg-detail-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-md);
  font-size: var(--t-xs); color: var(--tx-2);
  border-top: 1px solid var(--bdr-faint); padding-top: var(--sp-2);
}

.fg-decided {
  font-size: var(--t-sm); color: var(--tx-1);
  background: var(--ok-bg); border: 1px solid var(--ok-bd);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}

/* Entscheidungszeile: Notiz + Aktionen inline — bewusst KEIN Overlay,
   damit nichts den Header oder das Menue verdeckt. */
.fg-decide {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  border-top: 1px solid var(--bdr-faint); padding-top: var(--sp-3);
}
.fg-decide label {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tx-2);
}
.fg-decide input {
  flex: 1 1 320px; min-width: 220px;
  padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--t-sm);
  color: var(--tx-0); background: var(--bg-surface);
  border: 1px solid var(--bdr-def); border-radius: var(--r-sm);
}
.fg-decide input:focus { outline: none; border-color: var(--bdr-str); }

.fg-empty {
  padding: var(--sp-2xl) var(--sp-lg);
  border: 1px dashed var(--bdr-def); border-radius: var(--r-lg);
  color: var(--tx-2); font-size: var(--t-sm); text-align: center;
  background: var(--bg-surface);
}

/* ── Ergebnis einer Sammel-Entscheidung ──────────────────────────────────── */
.fg-result {
  margin: var(--sp-md) 0;
  padding: var(--sp-2-5) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--tx-1);
  background: var(--ok-bg); border: 1px solid var(--ok-bd);
}
.fg-result-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.fg-result-fails, .fg-warn .fg-result-fails {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: grid; gap: var(--sp-1); font-size: var(--t-xs);
}

/* ── Aktionsleiste der Sammel-Auswahl ────────────────────────────────────── */
/* Schwebend und gerundet, mit Abstand zum Fensterrand — klebt nie am Rand und
   verdeckt weder Header noch Menue (sticky, nicht fixed). */
.fg-bulkbar {
  position: sticky;
  bottom: var(--sp-4);
  z-index: 3;
  margin: var(--sp-lg) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bdr-str);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--bdr-faint);
  display: grid;
  gap: var(--sp-2);
}
.fg-bulk-main {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
}
.fg-bulk-count { font-size: var(--t-sm); color: var(--tx-1); white-space: nowrap; }
.fg-bulk-count strong { color: var(--tx-0); font-size: var(--t-body); }
.fg-bulk-ask { font-size: var(--t-sm); color: var(--tx-0); flex: 1 1 220px; }
.fg-bulk-note {
  flex: 1 1 300px; min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--t-sm);
  color: var(--tx-0); background: var(--bg-surface);
  border: 1px solid var(--bdr-def); border-radius: var(--r-sm);
}
.fg-bulk-note:focus { outline: none; border-color: var(--bdr-str); }
.fg-bulk-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.fg-bulk-guard {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--t-sm); color: var(--tx-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--wa-bd); background: var(--wa-bg);
  border-radius: var(--r-sm);
}
.fg-bulk-guard .fg-check { margin-top: 2px; flex: 0 0 auto; }
.fg-bulk-hint { margin: 0; font-size: var(--t-xs); color: var(--tx-2); line-height: 1.55; }

@media (max-width: 860px) {
  .fg-wrap { padding-top: var(--sp-lg); }
  .fg-decide input { flex-basis: 100%; }
  /* Schmale Viewports: nichts laeuft aus der Leiste heraus — Notiz und
     Buttons bekommen eigene Zeilen, die Buttons teilen sich die Breite. */
  .fg-bulkbar { padding: var(--sp-3); }
  .fg-bulk-note { flex-basis: 100%; }
  .fg-bulk-btns { width: 100%; }
  .fg-bulk-btns .btn { flex: 1 1 auto; justify-content: center; }
  .fg-selall { margin-inline-start: 0; }
}

/* Wirkungs-Hinweis: abgesetzt, damit klar ist, dass eine Freigabe nichts ausfuehrt. */
.fg-wirkung p {
  border-left: 2px solid var(--bdr-str);
  padding-left: var(--sp-3);
  margin: 0;
}