/*
 * Zentrales Button- und Aktionslayout – gilt für ALLE Module.
 * Einzige Quelle für Abstände, Ausrichtung und Umbruchverhalten von Schaltflächen.
 * Views verwenden nur diese Klassen (keine eigenen flex/gap-Kombinationen für Aktionen):
 *   .page-actions   Aktionsleiste im Seitenkopf (rechts, umbrechend)
 *   .row-actions    Icon-Aktionen in Tabellenzeilen / Karten (rechtsbündig, nie umbrechend)
 *   .filter-group   Filter-/Statusschalter (zusammengehörige Gruppe)
 *   .toolbar        Aktionsleiste innerhalb von Karten/Panels
 *   .modal-footer   Abschlussleiste von Dialogen (in custom.css)
 */
:root {
    --action-gap: 0.5rem;        /* Abstand zwischen Schaltflächen einer Leiste */
    --action-gap-tight: 0.25rem; /* Abstand zwischen Icon-Schaltflächen in Zeilen */
    --btn-icon-gap: 0.5rem;      /* Abstand Icon ↔ Beschriftung */
}

/* ─── Basis: Beschriftung bricht nie um und überlappt nie ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.25;
    text-align: center;
}
.btn > svg,
.btn > i[data-lucide] { flex-shrink: 0; }
.btn-xs { min-width: 1.5rem; padding-inline: 0.5rem; }

/* Icon-only Schaltflächen sind überall quadratisch */
.btn.btn-square.btn-xs { width: 1.5rem; padding: 0; }

/* ─── Seitenkopf: Titelblock links, Aktionen rechts ─── */
.page-header > :first-child { min-width: 0; flex: 1 1 auto; }
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--action-gap);
    flex: 0 0 auto;
}
@media (min-width: 1024px) {
    .page-actions { justify-content: flex-end; max-width: 60%; }
}

/* ─── Tabellen-/Kartenaktionen ─── */
.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--action-gap-tight);
}
td.text-right > .row-actions,
.actions-cell > .row-actions { display: flex; }
.actions-cell { text-align: right; white-space: nowrap; width: 1%; }

/* ─── Filter-/Statusschalter ─── */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--action-gap-tight);
}
.filter-group .btn { flex-shrink: 0; }

/* ─── Werkzeugleisten (Karten, Panels, Editor) ─── */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--action-gap);
}
.toolbar-end { margin-left: auto; }

/* ─── Dialog-Abschluss: einheitliche Reihenfolge & Abstand ─── */
.modal-footer .btn,
.modal-action .btn { min-width: 6rem; }
.modal-action { gap: var(--action-gap); }

/*
 * Dialog-Abschluss bleibt immer sichtbar: Der Inhalt scrollt, die Schaltflächen (Speichern/Abbrechen)
 * haften am unteren Rand der Dialogbox. Gilt für jeden .modal-box / renderFormFooter() – kein Modul-Sonderfall.
 * Hintergrund = Box-Hintergrund (daisyUI: base-100, .glass-card: base-200); Box-Padding = 1.5rem.
 */
.modal-box .modal-action {
    position: sticky;
    bottom: -1.5rem;   /* Sticky bezieht sich auf die Inhaltsfläche – Box-Padding ausgleichen */
    z-index: 2;
    margin-bottom: -1.5rem;
    padding: 1rem 0 1.5rem;
    background-color: oklch(var(--b1, 1 0 0));
    box-shadow: 0 -1px 0 oklch(var(--bc, 0.278078 0.029596 256.847) / 0.12);
}
.modal-box.glass-card .modal-action { background-color: oklch(var(--b2, 0.961151 0 0)); }

/* ─── Globaler Lade-Spinner (Bildschirmmitte, blockiert keine Klicks) ─── */
.app-loader {
    position: fixed;
    inset: 0;
    width: 100%;           /* Popover-Standardstile (fit-content, Rand, Abstand) neutralisieren */
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: oklch(var(--b1, 1 0 0) / 0.35);
    transition: opacity 150ms ease, visibility 0s linear 150ms;
}
.app-loader.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease;
}
.app-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1.75rem;
    border-radius: var(--radius-xl);
    background: oklch(var(--b1, 1 0 0) / 0.92);
    border: 1px solid oklch(var(--b3, 0.961151 0 0));
    box-shadow: var(--shadow-lg);
}
.app-loader-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: oklch(var(--bc, 0.278078 0.029596 256.847) / 0.6);
}
/*
 * Reiner CSS-Spinner: dreht per transform auf dem Compositor und bleibt dadurch flüssig,
 * auch wenn der Hauptthread beschäftigt ist (htmx-Swap, Icon-Refresh, JSON-Verarbeitung).
 */
.app-loader-spinner {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    box-sizing: border-box;
    border: 3px solid oklch(var(--p, 0.6569 0.196 275.75) / 0.2);
    border-top-color: oklch(var(--p, 0.6569 0.196 275.75));
    border-radius: 9999px;
    will-change: transform;
    animation: app-loader-rotate 0.8s linear infinite;
}
@keyframes app-loader-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Ladeanzeige ist funktional: dreht auch bei "reduzierter Bewegung" (überstimmt die globale Regel) */
.app-loader .app-loader-spinner { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; }