/**
 * akteure.css — nur Akteur-Spezifika (v0.1.0)
 *
 * Alle generischen Listen-Patterns (Layout, Hover, Empty, Loading,
 * Load-More, Pillen-Geometrie, Sortier-Indikatoren, Save-Animation,
 * Delete-Button, Two-Line-Cell, Plain-Text-Cell, Action-Cell) kommen aus:
 *  - _shared/functions/list-view/grid-css/idf-list-grid.css
 *  - _shared/functions/inline-editing/idf-inline-edit.css
 *  - _shared/blocks/forms/idf-forms.css (Modal-Form-Felder)
 *
 * Hier bleiben ausschließlich:
 *  - Spaltenbreiten (.ak-grid)
 *  - Cell-Anker (.ak-cell-* für Inline-Edit-hostSel + Responsive-Hide)
 *  - Typ-/Status-Pillen-Farben (Akteur-Domäne)
 *  - Foto-Block im Modal (Basics-Split-Wrapper kommt aus Shared, #198)
 *  - Responsive
 */

/* ================================================================ */
/* Grid: Spaltenbreiten                                              */
/* ================================================================ */
/* Spalten: Name (1fr) · Kürzel · Typ · Unternehmen · E-Mail · Telefon ·
   Status · Löschen. Konvention `aufgaben/`: EINE 1fr-Spalte (Name) nimmt
   den Restplatz, alle anderen sind fix. */

.ak-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--ak-cols,
    52px                /* Foto — quadratischer Avatar, füllt Row-Höhe */
    minmax(200px, 1fr)  /* Name (display_name + Rolle-Sub) — wächst */
    110px               /* Kürzel */
    170px               /* Typ (Pille + Pen) — 130 schnitt die UPPERCASE-Pille ab, Pen war verdeckt */
    200px               /* Unternehmen (Kurzname) — 160 war zu schmal, schnitt ab */
    300px               /* E-Mail — fix, etwas breiter (260 war noch knapp) */
    190px               /* Telefon — breiter (Nummern wurden abgeschnitten) */
    44px                /* Löschen */
  );
  align-items: stretch;
  gap: 0;
}

/* Sticky-Header verlässlich ÜBER den Zeilen halten. Der Shared-Header
   (.idf-list-thead) trägt bewusst kein z-index und deckt durchlaufende
   Zeilen nur über seinen opaken --bg ab; die prominenten Foto-Avatare
   scrollen sonst sichtbar darüber. Modul-lokaler z-index ist der vom
   Shared-CSS vorgesehene Weg (der Header behält seinen --bg-Hintergrund,
   Tooltips bleiben dank Host-z-index aus dem Shared-CSS funktionsfähig). */
#ak-thead { z-index: 2; }

/* Foto-Cell - 1. Spalte, quadratisch (52 x 52 px). Kommt jetzt komplett
   aus dem Shared-Baustein `.idf-cell-bild*`
   (_shared/primitives/cells/idf-bild-cell.css, Audit L4/#198);
   nur die 52px-Spaltenbreite bleibt hier im .ak-grid. */

/* Status- und Enum-Cells dürfen während des Edits aufmachen, damit ein
   Combobox-Popup nicht abgeschnitten wird (is-editing setzt der Cell-
   Dispatcher). */
.idf-list-rows .idf-list-row .ak-grid > div.is-editing {
  overflow: visible;
}

/* Pen + Inhalt mit einheitlichem Abstand, falls die Cell direkt Host ist. */
.idf-list-rows .idf-list-row .ak-grid .idf-inline-edit-host {
  gap: 8px;
}

/* ================================================================ */
/* Typ-Pille — Color-Modifier pro `typ`                              */
/* ================================================================ */
/* Geometrie + Typografie aus shared `.idf-pill-tag` (13 px UPPERCASE,
   getöntes BG mit Brand-Textfarbe). Markup:
   <span class="idf-pill-tag ak-typ-pill" data-typ="mitarbeiter">…</span>. */
.ak-typ-pill[data-typ="mitarbeiter"] { background: var(--tint-confirm); color: var(--confirm, #0c998e); }
.ak-typ-pill[data-typ="kunde"]       { background: var(--tint-primary);  color: var(--primary, #c8134b); }
.ak-typ-pill[data-typ="partner"]     { background: var(--tint-orange); color: var(--orange, #e8710a); }
.ak-typ-pill[data-typ="extern"]      { background: var(--tint-neutral);      color: var(--mid, #555); }
.ak-typ-pill[data-typ="agent"]       { background: color-mix(in srgb, var(--indigo, #4f46e5) 12%, transparent); color: var(--indigo, #4f46e5); }
.ak-typ-pill[data-typ="lieferant"]   { background: color-mix(in srgb, var(--yellow-text, #b58600) 12%, transparent); color: var(--yellow-text, #b58600); }

/* ================================================================ */
/* Status-Pille — Color-Modifier pro `akteur_status`                 */
/* ================================================================ */
.ak-status-pill[data-status="aktiv"]        { background: var(--tint-confirm); color: var(--confirm, #0c998e); }
.ak-status-pill[data-status="inaktiv"]      { background: var(--tint-neutral);      color: var(--mid, #555); }
.ak-status-pill[data-status="ausgeschieden"]{ background: var(--tint-primary);  color: var(--primary, #c8134b); }

/* Verbundene-Themen-Tabs (o2m) — Item-Aktionen nutzen die Shared-Standard-
   Klassen `.idf-list-done-pill` (Abhaken), `.idf-list-action-link`
   (Übertragen) und `.idf-list-delete-btn` (Löschen); Hover-Verhalten in
   _shared/functions/detail-modal/idf-standard-artefakt.css. Kein Modul-CSS nötig. */

/* ================================================================ */
/* Typ-Mehrfachfilter — optisch an die Geschwister-Filter angleichen */
/* ================================================================ */
/* createEntityMultiSelect rendert über dem Add-Picker eine Chip-Zeile,
   die im Leerzustand ein italic „Leer"-Label zeigt — das haben die
   schlichten Combobox-Filter nicht. Im Leerzustand blenden wir Label +
   Chip-Zeile aus, sodass nur der Picker („— alle Typen —") sichtbar ist,
   genau wie bei Unternehmen/Status. Chips erscheinen erst bei Auswahl. */
#ak-filter-typ .ms-empty { display: none; }
#ak-filter-typ .ms-chips { min-height: 0; }
#ak-filter-typ .ms-chips:not(:has(.ms-chip)) { display: none; }

/* ================================================================ */
/* Modal-Tab Stammdaten/Adresse — Form-Grid                          */
/* ================================================================ */
/* Der 2-Spalten-Layout-Wrapper (Felder links, Foto rechts) kommt jetzt
   aus dem Shared-Baustein `.idf-basics-split(-fields)`
   (_shared/functions/detail-modal/idf-standard-artefakt.css, Audit L4/#198).
   Der Adresse-Tab nutzt direkt `.idf-form` (kein Wrapper). Hier bleiben
   nur die Foto-Block-Zustaende bis zur createImageField-Migration (#225). */

/* Rechte Spalte: Foto-Block — Preview oben (quadratisch), Aktionen darunter. */
.ak-basics-bild {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ak-basics-bild-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg, #fafafa);
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ak-basics-bild-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ak-basics-bild-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--soft, #ae9586);
  font-size: var(--font-sm, 0.8125rem);
}
.ak-basics-bild-empty i { font-size: 40px; opacity: 0.6; }
.ak-basics-bild-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mid, #555);
  font-size: var(--font-sm, 0.8125rem);
}
.ak-basics-bild-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ================================================================ */
/* Responsive (≤ 1100px) — schmale Spalten ausblenden                */
/* ================================================================ */
@media (max-width: 1100px) {
  .ak-grid {
    grid-template-columns:
      52px             /* Foto */
      minmax(0, 1fr)  /* Name */
      120px            /* Typ */
      180px            /* Unternehmen */
      44px;            /* Löschen */
  }
  .ak-cell-kuerzel,
  .ak-cell-email,
  .ak-cell-telefon {
    display: none;
  }
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg,
     Scroll-Modus neutralisieren, damit nichts verrutscht/ueberlaeuft. */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

/* ================================================================ */
/* Token-Budget-Tab (Aleph, Säule 2): nur Agent-Akteure             */
/* ================================================================ */
/* Embed-Tab-Inhalt im Standard-Artefakt-Body (akteure-token.js). Additiv,
   nur neutrale Standard-Tokens (--ink/--mid/--line/--bg), keine Fremdfarbe. */

.ak-token { display: flex; flex-direction: column; gap: 22px; }

.ak-token-busy {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mid, #555); font-size: var(--font-sm, 0.8125rem);
  padding: 16px 4px;
}

/* Karten: heute / Woche / Monat */
.ak-token-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ak-token-cards .ak-token-busy { grid-column: 1 / -1; }
.ak-token-card {
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: var(--bg, #fafafa);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ak-token-card-label {
  font-size: var(--font-sm, 0.8125rem);
  color: var(--mid, #555);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ak-token-card-value {
  font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  color: var(--ink, #111);
}
.ak-token-card-value span { font-size: 0.8125rem; font-weight: 500; color: var(--mid, #555); }
.ak-token-card-cost { font-size: 1rem; font-weight: 600; }
.ak-token-card-sub { font-size: var(--font-sm, 0.8125rem); color: var(--mid, #555); }

/* Abschnitt + Überschrift */
.ak-token-section { display: flex; flex-direction: column; gap: 10px; }
.ak-token-h3 {
  font-size: 0.9375rem; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink, #111);
}
.ak-token-h3 i { color: var(--mid, #555); }
.ak-token-h3-sub { font-weight: 400; font-size: 0.85em; color: var(--mid, #555); }

/* Pro Modell: Name | Bar | Tokens | Kosten | Läufe */
.ak-token-modell-list { display: flex; flex-direction: column; gap: 8px; }
.ak-token-modell {
  display: grid;
  grid-template-columns: 120px 1fr 130px 90px 48px;
  align-items: center; gap: 12px;
  font-size: 0.875rem;
}
.ak-token-modell-name { font-weight: 600; }
.ak-token-modell-bar {
  height: 8px; border-radius: 999px;
  background: var(--tint-neutral, #f0f0f0); overflow: hidden;
}
.ak-token-modell-bar span {
  display: block; height: 100%;
  background: var(--mid, #555); border-radius: 999px;
}
.ak-token-modell-num { text-align: right; color: var(--mid, #555); font-variant-numeric: tabular-nums; }
.ak-token-modell-cost { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ak-token-modell-runs { text-align: right; color: var(--mid, #555); font-variant-numeric: tabular-nums; }

/* Tagesansicht: Datumsfeld oeffnet den Shared-Datums-Picker (idf-date-picker) */
.ak-token-daybar { display: flex; align-items: center; gap: 8px; }
.ak-token-datefield {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: var(--font-md, 0.875rem);
  padding: 6px 10px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-xs, 3px);
  background: var(--white, #fff); color: var(--ink, #111);
  cursor: pointer;
}
.ak-token-datefield:hover { background: var(--bg-hover, #f8f8f8); }
.ak-token-datefield i { color: var(--mid, #555); font-size: 0.9em; }
.ak-token-datefield-caret { margin-left: 2px; }
.ak-token-daysummary {
  font-size: var(--font-sm, 0.8125rem); color: var(--mid, #555);
  font-variant-numeric: tabular-nums; padding: 2px 0;
}

/* Läufe-Tabelle (ein Tag) */
.ak-token-table-wrap { overflow-x: auto; }
.ak-token-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ak-token-table th, .ak-token-table td {
  text-align: left; padding: 7px 10px;
  border-bottom: 1px solid var(--line, #e5e5e5);
}
.ak-token-table th {
  font-size: var(--font-sm, 0.8125rem); color: var(--mid, #555);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.ak-token-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.ak-token-td-time { white-space: nowrap; color: var(--mid, #555); font-variant-numeric: tabular-nums; }

/* Hinweis-/Leerzustand-Box */
.ak-token-info {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: var(--bg, #fafafa);
  padding: 16px 18px;
}
.ak-token-info i { color: var(--mid, #555); font-size: 20px; margin-top: 2px; }
.ak-token-info strong { display: block; margin-bottom: 4px; }
.ak-token-info p { margin: 0; color: var(--mid, #555); font-size: 0.875rem; line-height: 1.5; }
.ak-token-info code {
  background: var(--tint-neutral, #f0f0f0); padding: 1px 5px;
  border-radius: 4px; font-size: 0.85em;
}

/* Responsive: Karten untereinander, Modell-Grid vereinfachen */
@media (max-width: 720px) {
  .ak-token-cards { grid-template-columns: 1fr; }
  .ak-token-modell { grid-template-columns: 100px 1fr 70px; }
  .ak-token-modell-cost, .ak-token-modell-runs { display: none; }
}