/* ══════════════════════════════════════════════════════════════
   Control: List Cards
   Aufklappbare Listenkacheln mit Inline-Editor.
   Einheitliches Pattern für alle Listen in der Anwendung
   (Anbindungen, AI Credentials, Embedding-Profile, Schema-Karten,
   Prompt-Templates).

   Anatomie:
     .z-list-card-wrapper    → Äußerer Container (border-radius, shadow)
     .z-list-card            → Klickbare Kachel-Kopfzeile
       .z-list-card-drag     → Optionaler Drag-Handle (z.B. Prompt-Templates)
       .z-list-card-body     → Inhaltsbereich (flex: 1)
         .z-list-card-header → Titelzeile (Name + ID-Badge + Badges)
           .z-list-card-name → Primärer Titel
           .z-list-card-id   → Code-Badge (ID, Schlüsselname, ...)
         .z-list-card-meta   → Optionale Sub-Information (Provider, Status, …)
         .z-list-card-notes  → Optionale Zusatzzeile (sehr klein, muted)
       .z-list-card-chevron  → Chevron-Icon (dreht sich beim Öffnen)
     .z-list-card-edit       → Inline-Editor-Container (:empty → display:none)
       .z-list-card-panel    → Eigentliches Formular-Panel

   Höhe: Karte passt sich natürlich an den Inhalt an.
     Ohne .z-list-card-meta  → kompakt (eine Zeile)
     Mit    .z-list-card-meta → höher   (zwei Zeilen)

   Status-Farben:
     .z-list-card-key-ok      → Grün (Key vorhanden, verbunden)
     .z-list-card-key-missing → Rot  (Kein Key, nicht verbunden)

   State:
     .z-list-card-wrapper.editing → Karte geöffnet, Panel sichtbar

   Verwendung (kompakt, ohne Meta):
     <div class="z-list-card-wrapper" data-id="…">
       <div class="z-list-card" onclick="…">
         <div class="z-list-card-body">
           <div class="z-list-card-header">
             <span class="z-list-card-name">Name</span>
             <code class="z-list-card-id">id</code>
           </div>
         </div>
         <div class="z-list-card-chevron">[svg]</div>
       </div>
       <div class="z-list-card-edit"></div>
     </div>

   Verwendung (höher, mit Meta):
     … gleich, + <div class="z-list-card-meta">Provider · Status</div>
   ══════════════════════════════════════════════════════════════ */


/* ── Wrapper ──────────────────────────────────────────────── */

.z-list-card-wrapper {
    border-radius: 0.5rem;
    box-shadow: var(--z-shadow);
    margin-bottom: 0.75rem;
}


/* ── Card (klickbare Kopfzeile) ───────────────────────────── */

.z-list-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--z-bg-card);
    border: 1px solid var(--z-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.z-list-card:hover {
    background: var(--z-bg-hover);
}


/* ── Drag-Handle (optional) ───────────────────────────────── */

.z-list-card-drag {
    color: var(--z-text-faint);
    cursor: grab;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.z-list-card-drag:hover {
    color: var(--z-text-mid);
}


/* ── Body ─────────────────────────────────────────────────── */

.z-list-card-body {
    flex: 1;
    min-width: 0;
}

.z-list-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.z-list-card-name {
    font-weight: 600;
    color: var(--z-text);
    font-size: 0.9rem;
}

.z-list-card-id {
    font-size: 0.7rem;
    background: var(--z-bg-subtle);
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    color: var(--z-text-muted);
}

/* Kein margin-bottom wenn kein Meta vorhanden */
.z-list-card-header:last-child {
    margin-bottom: 0;
}

.z-list-card-meta {
    font-size: 0.8rem;
    color: var(--z-text-muted);
}

.z-list-card-meta code {
    font-size: 0.75rem;
}

.z-list-card-notes {
    font-size: 0.75rem;
    color: var(--z-text-faint);
    margin-top: 0.25rem;
    white-space: pre-line;
    line-height: 1.4;
}


/* ── Status-Farben ────────────────────────────────────────── */

.z-list-card-key-ok      { color: var(--z-success-text); }
.z-list-card-key-missing { color: var(--z-error-text); }


/* ── Chevron ──────────────────────────────────────────────── */

.z-list-card-chevron {
    flex-shrink: 0;
    color: var(--z-action);
    transition: transform 0.2s ease, color 0.15s;
    display: flex;
    align-items: center;
    padding: 0.5rem;
}


/* ── Editing-State ────────────────────────────────────────── */

.z-list-card-wrapper.editing .z-list-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--z-bg-hover);
}

.z-list-card-wrapper.editing .z-list-card-chevron {
    transform: rotate(90deg);
}


/* ── Inline-Edit-Panel ────────────────────────────────────── */

.z-list-card-edit:empty { display: none; }

.z-list-card-panel {
    background: var(--z-bg-card);
    border: 1px solid var(--z-border);
    border-top: 2px solid var(--z-primary);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 1.25rem;
}


/* ══════════════════════════════════════════════════════════════
   3-Spalten-Header-Variante (additiv, opt-in)
   --------------------------------------------------------------
   Neben dem klassischen "body + chevron"-Pattern (siehe oben)
   gibt es Listen, deren Kopfzeile mehrere Controls rechts
   benoetigt (Toggles, Badges, Tokens-Counter, Action-Icons …).
   Fuer diese Faelle gibt es ein konsistentes 3-Spalten-Layout:

     <div class="z-list-card">
       <div class="z-list-card-left">   …Titel-Bereich…   </div>
       <div class="z-list-card-center"> …Status/Badges…   </div>
       <div class="z-list-card-right">  …Controls/Actions… </div>
     </div>

   Eigenschaften:
     - Linke und rechte Spalte wachsen mit ihrem Inhalt
       (flex: 0 0 auto), die Mitte fuellt den Rest (flex: 1).
     - Jede Spalte hat einen eigenen Default-Gap zwischen
       ihren Kindern. Wer extra Platz braucht, fuegt einen
       <span class="z-list-card-spacer"> ein.
     - Mittlere Spalte muss IMMER existieren (auch leer),
       damit sich Layout und Achsen nicht verschieben.
     - Dynamische Inhalte (variable Token-Zahlen, lange
       Status-Texte) gehoeren in einen Wrapper mit fester
       Breite (siehe .z-list-card-fixed-slot).
   ══════════════════════════════════════════════════════════════ */

.z-list-card-left,
.z-list-card-center,
.z-list-card-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.z-list-card-left {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-width: 0;          /* erlaubt ellipsis/wrap fuer den Titel */
    flex-wrap: wrap;       /* lange Titel duerfen umbrechen */
}

.z-list-card-center {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
}

.z-list-card-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Bewusster Extra-Abstand zwischen zwei Elementen innerhalb
   einer Spalte. Beispielsweise vor einem destruktiven Button —
   dezente Abhebung, kein grossflaechiger Bruch. */
.z-list-card-spacer {
    display: inline-block;
    width: 0.25rem;
    flex-shrink: 0;
}

/* Wrapper fuer Inhalte mit dynamischer Breite (z. B. Token-Zahl
   "~330 Tok" vs "~9999 Tok"). Fest dimensioniert, damit
   nachfolgende Elemente eine stabile Position haben. */
.z-list-card-fixed-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.z-list-card-fixed-slot--end   { justify-content: flex-end; }
.z-list-card-fixed-slot--start { justify-content: flex-start; }
.z-list-card-fixed-slot--center{ justify-content: center; }