/* ═══════════════════════════════════════════════════════════════════════
 * Inline-Dropdown — moderner Custom-Select für Tabellen-Zellen.
 *
 * Klassen:
 *   .ilv-trigger             — Button in der Zelle (Default-Look)
 *   .ilv-trigger--pill       — Pill-Variante (für farbige Status/Tags)
 *   .ilv-trigger-chevron     — kleines Chevron-Icon rechts
 *   .ilv-input               — Inline-Text/Number-Input im selben Stil
 *
 *   .ilv-panel               — floatendes Panel (singleton, body-level)
 *   .ilv-option              — einzelne Option
 *   .ilv-option.is-active    — aktuell gewählter Wert
 *   .ilv-dot                 — Farbpunkt links
 *   .ilv-label               — Text mittig
 *   .ilv-check               — Check-Icon rechts beim aktiven Eintrag
 *   .ilv-divider             — Trennlinie zwischen Option-Gruppen
 *
 * Verwendung: siehe `static/js/inline-dropdown.js` (window.InlineDropdown).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Trigger / Input ──────────────────────────────────────────────────── */
.ilv-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    color: inherit;
    line-height: 1.25;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ilv-input:hover {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
}
.ilv-input:focus {
    outline: none;
    background: hsl(var(--background));
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.18);
}

.ilv-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, filter 0.12s;
}
.ilv-trigger:hover {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
}
.ilv-trigger > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ilv-trigger-chevron {
    font-size: 0.625rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.ilv-trigger--pill {
    width: auto;            /* Pills sind natürliche Breite — passt sich an Label an */
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}
.ilv-trigger--pill:hover {
    filter: brightness(1.08);
}

/* Form-Trigger-Variante: gleiche Größe wie Standard-Form-Fields (38 px hoch,
 * abgerundete Border, Focus-Ring). Für Modals und Filter-Sektionen. */
.ilv-trigger--form {
    height: 38px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    gap: 0.5rem;
}
.ilv-trigger--form:hover { border-color: hsl(var(--ring) / 0.6); background: hsl(var(--background)); }
.ilv-trigger--form:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}
.ilv-trigger--form.has-color { /* Wenn ein Wert gesetzt ist, wird Hintergrund/Color inline tinted */ }

/* Non-Pill-Trigger in zentrierten Zellen sollen Label mittig zeigen.
 * Bei text-align:center auf <td> erbt der Button den Wert, wir richten die
 * inneren Items entsprechend aus. */
td[style*="text-align: center"] .ilv-trigger:not(.ilv-trigger--pill),
td[style*="text-align:center"]  .ilv-trigger:not(.ilv-trigger--pill) {
    justify-content: center;
}
td[style*="text-align: center"] .ilv-trigger:not(.ilv-trigger--pill) > span,
td[style*="text-align:center"]  .ilv-trigger:not(.ilv-trigger--pill) > span {
    flex: 0 1 auto;
}

/* ── Floatendes Panel ─────────────────────────────────────────────────── */
.ilv-panel {
    position: absolute;
    z-index: 9999;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.625rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.18);
    padding: 0.3125rem;
    min-width: 200px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain; /* Scroll-Chaining an Panel-Rändern blockieren */
    animation: ilv-panel-in 0.12s ease-out;
}
@keyframes ilv-panel-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ilv-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.5rem 0.625rem;
    border-radius: 0.4375rem;
    font-size: 0.8125rem;
    color: hsl(var(--foreground));
    cursor: pointer;
    text-align: left;
    transition: background 0.08s;
}
.ilv-option:hover,
.ilv-option:focus {
    background: hsl(var(--muted));
    outline: none;
}
.ilv-option.is-active {
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    font-weight: 500;
}
.ilv-option.is-active:hover {
    background: hsl(var(--primary) / 0.18);
}
.ilv-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ilv-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ilv-check {
    margin-left: auto;
    font-size: 0.6875rem;
    color: hsl(var(--primary));
    flex-shrink: 0;
}
.ilv-divider {
    height: 1px;
    background: hsl(var(--border));
    margin: 0.25rem 0.125rem;
}