/* ==========================================================================
   anfragen.css — Section-Layout-SSOT fuer den Anfragen-Tab.
   Konsument: web/js/sections/anfragen.js · Prefix: anfr-
   ========================================================================== */

/* ── Tab-Container: Flush-to-Edges (wie Projekte/Kontingente) ── */
#tab-content-anfragen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#tab-content-anfragen.hidden { display: none; }

/* layout.css deckt Basis-Layout + .lod-section-panel(.hidden) global ab.
   Hier nur die Section-spezifische Toolbar-Border (vertrieb/kontingente nutzen
   den Default aus components/toolbar/toolbar.css). */
#tab-content-anfragen > .app-scope > .app-kanban-toolbar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* ViewSwitcher-Styles + Mobile-Primary-Button-Icon-only-Verhalten leben jetzt
   global in components/badges/view-switcher.css und components/toolbar/toolbar.css
   (Paket DASH-G6 + DASH-MOBILE-PRIMARY 2026-04-25). */

/* ── Naechste-SLA-Zeile in Dashboard-Tabelle ─────────────── */
.anfr-next-sla-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.anfr-next-sla-row--warn { color: var(--status-warning-fg); }
.anfr-next-sla-row--fail { color: var(--status-danger-fg); font-weight: var(--fw-semibold); }

/* ── SLA-Zeitgeber-Widget (Drawer) ───────────────────────────
   Ersetzt das native D365-Timer-Control. Premium-KPI-Kacheln: getöntes Status-Icon
   (CSS-Maske), großer Countdown + Fortschrittsbalken (verbrauchter Fristanteil, --zg-pct).
   Ton je Kachel über die eine Variable --zg-c. Konsument: anfr-drawer.js
   (data-anf-zeitgeber) via anfrBuildZeitgeberHtml(). flex-wrap → intrinsisch responsiv. */
.anfr-zeitgeber {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.anfr-zg-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.anfr-zg-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.anfr-zg-sla { margin-left: auto; font-size: var(--fs-meta); color: var(--color-text-muted); }
.anfr-zg-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.anfr-zg-tile {
  --zg-c: var(--brand-default);
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--zg-c) 22%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--zg-c) 6%, var(--color-surface));
  transition: border-color 0.2s ease, background 0.2s ease;
}
.anfr-zg-tile-head { display: flex; align-items: center; gap: var(--space-1-5); }
.anfr-zg-ico {
  width: 15px; height: 15px; flex-shrink: 0;
  background: var(--zg-c);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.anfr-zg-label { font-size: var(--fs-meta); color: var(--color-text-muted); }
.anfr-zg-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--zg-c);
  line-height: 1.2;
}
/* Exakter Fällig-Zeitpunkt, klein + dezent unter dem Countdown. */
.anfr-zg-frist {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  margin-top: calc(-1 * var(--space-1-5) + 2px);
}
.anfr-zg-frist:empty { display: none; }
.anfr-zg-bar {
  height: 4px; border-radius: var(--radius-pill); overflow: hidden; margin-top: auto;
  background: color-mix(in srgb, var(--zg-c) 16%, transparent);
}
.anfr-zg-bar-fill {
  display: block; height: 100%; width: var(--zg-pct, 0%);
  background: var(--zg-c); border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}
/* Töne: eine Variable --zg-c färbt Icon, Wert, Rahmen, Balken + Kachel-Tint */
.anfr-zg-tile--ok     { --zg-c: var(--status-success-fg); }
.anfr-zg-tile--warn   { --zg-c: var(--status-warning-fg); }
.anfr-zg-tile--fail   { --zg-c: var(--status-danger-fg); }
.anfr-zg-tile--run    { --zg-c: var(--brand-default); }
.anfr-zg-tile--paused { --zg-c: var(--color-text-muted); }
.anfr-zg-tile--idle   { --zg-c: var(--color-text-muted); opacity: 0.55; }
.anfr-zg-tile--ok     .anfr-zg-ico { -webkit-mask-image: url(/assets/icons/fluent/checkmark_circle_24_regular.svg); mask-image: url(/assets/icons/fluent/checkmark_circle_24_regular.svg); }
.anfr-zg-tile--warn   .anfr-zg-ico { -webkit-mask-image: url(/assets/icons/fluent/warning_24_regular.svg); mask-image: url(/assets/icons/fluent/warning_24_regular.svg); }
.anfr-zg-tile--fail   .anfr-zg-ico { -webkit-mask-image: url(/assets/icons/fluent/dismiss_circle_24_regular.svg); mask-image: url(/assets/icons/fluent/dismiss_circle_24_regular.svg); }
.anfr-zg-tile--run    .anfr-zg-ico { -webkit-mask-image: url(/assets/icons/fluent/hourglass_half_24_regular.svg); mask-image: url(/assets/icons/fluent/hourglass_half_24_regular.svg); }
.anfr-zg-tile--paused .anfr-zg-ico { -webkit-mask-image: url(/assets/icons/fluent/pause_24_regular.svg); mask-image: url(/assets/icons/fluent/pause_24_regular.svg); }
.anfr-zg-tile--idle   .anfr-zg-ico { -webkit-mask-image: url(/assets/icons/fluent/prohibited_24_regular.svg); mask-image: url(/assets/icons/fluent/prohibited_24_regular.svg); }

/* ── Empty-State ─────────────────────────────────────────── */
.anfr-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center;
}
.anfr-empty-state .ui-ico { opacity: 0.4; }
.anfr-empty-state-title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); color: var(--color-text); }

/* ═════════════════════════════════════════════════════════════════════
 Card-V2-Variante fuer Anfragen ═════════════════════════════════════════════════════════════════════ */

/* Fixe Hoehe fuer alle Anfrage-Karten (einheitlich, wie Projekte/Kontingente).
   Dichter als zuvor (180→168) — nimmt das Loch zwischen Kunde und Footer raus, ohne
   die SLA-Restzeit-Zeile zu quetschen (unter ~165px kollabiert der Subtitle auf 0). */
.app-scope .card-v2.anfr-card-app {
  height: 168px;
  min-height: 168px;
}

/* ── Workspace-Karten: SLA-Heatmap statt Orange-Identität (Kyle-Entscheid 2026-07-11) ──
   Der Karten-Hintergrund folgt der SLA-Dringlichkeit — getrieben von der Accent-Preset-
   Klasse, die anfr-card.js aus anfrSlaUrgency setzt: überfällig=Rot-Wash, Warnung=Amber,
   im Ziel=neutral. So wird das Board zur Hitze-Karte für die Koordination. NUR im
   Workspace-Grid gescopet — Mein-Tag/Gast behalten ihre Fälligkeits-Accent-Logik.
   Überschreibt den globalen anfr-card-app-Orange-Tint (components/cards/card.css). */
#anfr-grid .card-v2.anfr-card-app {
  background: var(--color-surface);           /* neutrale, ruhige Basis (im Ziel) */
}
#anfr-grid .card-v2.anfr-card-app.card-v2--accent-sla-fail {
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--lod-danger) 13%, transparent) 0%, transparent 46%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--lod-danger) 8%, var(--color-surface)) 0%,
      color-mix(in srgb, var(--lod-danger) 3%, var(--color-surface)) 46%,
      var(--color-surface) 100%);
}
#anfr-grid .card-v2.anfr-card-app.card-v2--accent-sla-warn {
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--lod-amber-500) 16%, transparent) 0%, transparent 46%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--lod-amber-500) 10%, var(--color-surface)) 0%,
      color-mix(in srgb, var(--lod-amber-500) 3%, var(--color-surface)) 46%,
      var(--color-surface) 100%);
}
#anfr-grid .card-v2.anfr-card-app.card-v2--accent-sla-escalated {
  /* Eskaliert = kräftigster Rot-Wash (Balken ist bereits 6px aus dem Preset). */
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--lod-danger) 20%, transparent) 0%, transparent 50%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--lod-danger) 13%, var(--color-surface)) 0%,
      color-mix(in srgb, var(--lod-danger) 5%, var(--color-surface)) 46%,
      var(--color-surface) 100%);
}
/* Überfällig-Balken kräftiger (4px) für mehr Signal im Heatmap-Raster. */
#anfr-grid .card-v2.anfr-card-app.card-v2--accent-sla-fail.card-v2--accent-left {
  border-left-width: 4px;
}
.app-scope .card-v2.anfr-card-app .card-app-title {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

/* Subtitle-Tones fuer SLA-Info: danger (ueberfaellig), warn (<2h), Default
   bei genuegend Zeit. Globaler Hook in card.js — hier Anfragen-Styles. */
.app-scope .card-app-subtitle--danger {
  color: var(--lod-danger);
  font-weight: var(--fw-medium);
}
.app-scope .card-app-subtitle--danger .card-app-subtitle-ico { opacity: 0.9; }
.app-scope .card-app-subtitle--warn {
  color: var(--lod-amber-700);
  font-weight: var(--fw-medium);
}
.app-scope .card-app-subtitle--warn .card-app-subtitle-ico { opacity: 0.85; }

/* Responsive: kompaktere Hoehe auf Tablet/Mobile */
@media (max-width: 999px) {
  .app-scope .card-v2.anfr-card-app { height: 164px; min-height: 164px; }
}
@media (max-width: 599px) {
  .app-scope .card-v2.anfr-card-app { height: 160px; min-height: 160px; }
}

/* ═════════════════════════════════════════════════════════════════════
   Listen-View — Custom-Column-Renders der Anfragen-LoDDataTable (anfr-liste.js).
   SLA-Spalte + Prio-Platzhalter + „Nicht zugewiesen" + Dringlichkeits-Zeilenakzent.
   ═════════════════════════════════════════════════════════════════════ */

/* SLA-Zelle: Icon + Restzeit, Ton je Dringlichkeit (SSOT-gleich zu Karten-Subtitle). */
.lod-dt-sla {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-variant-numeric: tabular-nums; font-size: var(--fs-meta);
  white-space: nowrap; min-width: 0;
}
.lod-dt-sla > span { overflow: hidden; text-overflow: ellipsis; }
.lod-dt-sla .ui-ico { flex-shrink: 0; opacity: 0.8; }
.lod-dt-sla--fail { color: var(--status-danger-fg); font-weight: var(--fw-semibold); }
.lod-dt-sla--warn { color: var(--status-warning-fg); font-weight: var(--fw-medium); }
.lod-dt-sla--ok   { color: var(--color-text-muted); }
.lod-dt-sla--none { color: var(--color-text-disabled); }

/* Ohne gesetzte Priorität: dezenter Strich statt gestyltem Pill. */
.lod-dt-prio-none { color: var(--color-text-disabled); }

/* „Nicht zugewiesen" in der Besitzer-Spalte — leicht signalfarben, kursiv. */
.lod-dt-unassigned { color: var(--status-warning-fg); font-style: italic; font-size: var(--fs-meta); }

/* Dringlichkeits-Zeilenakzent (inset box-shadow an der ersten Zelle → kein Layout-Shift). */
.lod-dt-tr.anfr-row--fail > :first-child { box-shadow: inset 3px 0 0 var(--lod-danger); }
.lod-dt-tr.anfr-row--warn > :first-child { box-shadow: inset 3px 0 0 var(--lod-amber-500); }

/* KPI-Firmen-Drill (Firmen-Drawer 360° → Anfragen dieser Firma): aktiver
   Firmen-Filter als entfernbarer Chip im Toolbar-Slot — Muster wie .pj-firmachip. */
#tab-content-anfragen .anfr-firmachip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--lod-darkblue-50);
  border: 1px solid var(--lod-darkblue-100);
  color: var(--lod-darkblue);
  font-size: 12.5px; /* Chip-Größe wie .pj-firmachip/.subgrid-summary */
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}
#tab-content-anfragen .anfr-firmachip:hover { background: var(--lod-darkblue-100); }
#tab-content-anfragen .anfr-firmachip-x { font-size: var(--fs-badge); opacity: 0.7; }
#tab-content-anfragen .anfr-firmachip:hover .anfr-firmachip-x { opacity: 1; }
#tab-content-anfragen .anfr-firmachip:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 1px; }

/* Kontakt-Drill-Chip (Kontakt-Drawer „Offene Anfragen") — gleiche Optik wie
   der Firmen-Chip, eigener Präfix (koexistiert nie mit dem Firmen-Chip). */
#tab-content-anfragen .anfrko-firmachip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 28px; padding: 0 var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--lod-darkblue-50);
  border: 1px solid var(--lod-darkblue-100);
  color: var(--lod-darkblue);
  font-size: 12.5px; font-weight: var(--fw-medium);
  cursor: pointer; white-space: nowrap;
}
#tab-content-anfragen .anfrko-firmachip:hover { background: var(--lod-darkblue-100); }
#tab-content-anfragen .anfrko-firmachip-x { font-size: var(--fs-badge); opacity: 0.7; }
#tab-content-anfragen .anfrko-firmachip:hover .anfrko-firmachip-x { opacity: 1; }
#tab-content-anfragen .anfrko-firmachip:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 1px; }