/* ══════════════════════════════════════════════════════════════
   Control: Expand Header
   Klickbare Kopfzeile mit Chevron für aufklappbare Bereiche.
   Wiederverwendbares Pattern für Collection-Header, Package-Rows,
   und andere Expand/Collapse-Zeilen.

   Anatomie:
     .z-expand-header                → Klickbare Zeile (flex, space-between)
       .z-expand-header-left         → Linker Bereich (drag, chevron, content)
         .z-expand-header-drag       → Optionaler Drag-Handle
         .z-expand-header-chevron    → Chevron-Icon (right → down bei open)
         [beliebiger Content]        → Icons, Titel, Badges, etc.
       .z-expand-header-right        → Rechter Bereich (Stats, Actions)

   States:
     Default (geschlossen):  Chevron zeigt nach rechts (→)
     .open:                  Chevron rotiert 90° nach unten (↓)

   Farben:
     Chevron nutzt --z-action (interaktives Türkis).

   Varianten:
     .z-expand-header--compact       → Schmalere Padding (für Package-Rows)

   Verwendung:
     <div class="z-expand-header" onclick="toggle(this)">
       <div class="z-expand-header-left">
         <span class="z-expand-header-drag">[drag]</span>
         <span class="z-expand-header-chevron">[svg]</span>
         <strong>Titel</strong>
         <span class="badge">Info</span>
       </div>
       <div class="z-expand-header-right">
         <span>Stats</span>
         <button>Action</button>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════ */


/* ── Header Row ──────────────────────────────────────────── */

.z-expand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.75rem 0.5rem;
    background: var(--z-bg-card);
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.z-expand-header:hover {
    background: var(--z-bg-hover);
}


/* ── Compact Variant (Package-Rows, Sub-Items) ───────────── */

.z-expand-header--compact {
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    font-size: 0.875rem;
}


/* ── Left / Right Areas ──────────────────────────────────── */

.z-expand-header-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.z-expand-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}


/* ── Drag Handle ─────────────────────────────────────────── */

.z-expand-header-drag {
    flex-shrink: 0;
    cursor: grab;
    color: var(--drag-handle-color);
    transition: color 0.15s;
}

.z-expand-header-drag:hover {
    color: var(--drag-handle-hover);
}

.z-expand-header-drag:active {
    color: var(--drag-handle-active);
}


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

.z-expand-header-chevron {
    flex-shrink: 0;
    color: var(--z-action);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

/* Open state: chevron-right rotiert 90° → zeigt nach unten */
.z-expand-header.open .z-expand-header-chevron {
    transform: rotate(90deg);
}