/* =============================================================================
 * portal-ui.css
 * -----------------------------------------------------------------------------
 * Zentrales Stylesheet zur Modernisierung/Optimierung von Legacy-Bootstrap-3-
 * Komponenten, ohne bestehendes Markup anpassen zu müssen.
 *
 * Konvention:
 *   - Wird IMMER nach Bootstrap (bootstrap.min.css) und style.css eingebunden,
 *     damit unsere Overrides gewinnen.
 *   - Nur Drop-in-Overrides + neue Soft-Varianten – keine Klasse umdeuten.
 *   - Inline-Styles im Markup haben weiterhin Vorrang (höhere Spezifität).
 *   - Tokens via CSS-Variablen, damit Sites/Themes nachjustieren können.
 *
 * Komponenten in dieser Datei:
 *   1. Tokens (:root)
 *   2. .label  (inkl. Color-Modifier + Soft-Variante)
 *   3. .badge  (inkl. Color-Modifier, bg-* Kompat, Soft-Variante, Pill-Counter)
 *
 * Eingebunden in: application/views/_global/header.php
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. Tokens
 * -------------------------------------------------------------------------- */
:root {
    /* Farb-Paletten (Solid + Soft).
       Solid = farbiger Hintergrund + weiße Schrift.
       Soft  = leichter Tint-Hintergrund + dunkler Akzent-Text. */
    --pui-color-default:        #475569;   /* slate-600 */
    --pui-color-default-soft-bg:#e2e8f0;
    --pui-color-default-soft-fg:#334155;

    --pui-color-primary:        #2563eb;   /* blue-600 */
    --pui-color-primary-soft-bg:#dbeafe;
    --pui-color-primary-soft-fg:#1d4ed8;

    --pui-color-success:        #16a34a;   /* green-600 */
    --pui-color-success-soft-bg:#dcfce7;
    --pui-color-success-soft-fg:#15803d;

    --pui-color-info:           #0891b2;   /* cyan-600 */
    --pui-color-info-soft-bg:   #cffafe;
    --pui-color-info-soft-fg:   #0e7490;

    --pui-color-warning:        #d97706;   /* amber-600 */
    --pui-color-warning-soft-bg:#fef3c7;
    --pui-color-warning-soft-fg:#b45309;

    --pui-color-danger:         #dc2626;   /* red-600 */
    --pui-color-danger-soft-bg: #fee2e2;
    --pui-color-danger-soft-fg: #b91c1c;

    /* Geometrie */
    --pui-label-radius:         6px;       /* leicht abgerundetes Rechteck */
    --pui-label-padding:        .25em .55em;
    --pui-label-font-size:      75%;
    --pui-label-font-weight:    600;       /* von BS-Default 700 etwas leichter */
    --pui-label-letter-spacing: .01em;

    --pui-badge-radius:         999px;     /* echtes Pill */
    --pui-badge-padding:        3px 8px;
    --pui-badge-min-width:      18px;
    --pui-badge-font-size:      11px;
    --pui-badge-font-weight:    600;
    --pui-badge-line-height:    1.4;

    /* Button-Geometrie / Motion. Die FARBEN der .btn-*-Modifier werden im
       Projekt vom bestehenden bootstrap-reset.css gesetzt (Brand-Farben) und
       BEWUSST nicht überschrieben – sonst würden wir alle Sites/Themes
       umfärben. Wir verbessern hier nur Form, Tippability und Feedback. */
    --pui-btn-radius:           6px;
    --pui-btn-radius-lg:        8px;
    --pui-btn-radius-sm:        5px;
    --pui-btn-padding-y:        7px;
    --pui-btn-padding-x:        14px;
    --pui-btn-padding-y-sm:     5px;
    --pui-btn-padding-x-sm:     11px;
    --pui-btn-padding-y-xs:     3px;
    --pui-btn-padding-x-xs:     8px;
    --pui-btn-padding-y-lg:     11px;
    --pui-btn-padding-x-lg:     20px;
    --pui-btn-font-weight:      500;
    --pui-btn-letter-spacing:   0;
    --pui-btn-transition:       background-color .14s ease,
                                border-color .14s ease,
                                color .14s ease,
                                box-shadow .14s ease,
                                transform .08s ease;
    --pui-btn-shadow:           0 1px 1px rgba(15, 23, 42, .04);
    --pui-btn-shadow-hover:     0 2px 6px rgba(15, 23, 42, .08);
    --pui-btn-shadow-active:    inset 0 1px 2px rgba(15, 23, 42, .12);
    --pui-btn-focus-ring:       0 0 0 3px rgba(37, 99, 235, .25);
    --pui-btn-icon-gap:         .5em;

    /* Button-Farb-Paletten. Komplette Modernisierung – überschreibt die
       Brand-Farben aus bootstrap-reset.css. Alle solid-Modifier nutzen
       weiße Schrift; .btn-default ist als ruhige "Outline-Lite"-Variante
       angelegt (weißer Hintergrund, slate-Border, slate-Text). */
    --pui-btn-default-bg:           #fff;
    --pui-btn-default-fg:           #334155;   /* slate-700 */
    --pui-btn-default-border:       #cbd5e1;   /* slate-300 */
    --pui-btn-default-bg-hover:     #f8fafc;   /* slate-50  */
    --pui-btn-default-border-hover: #94a3b8;   /* slate-400 */
    --pui-btn-default-bg-active:    #e2e8f0;   /* slate-200 */

    --pui-btn-primary-bg:           #2563eb;   /* blue-600  */
    --pui-btn-primary-bg-hover:     #1d4ed8;   /* blue-700  */
    --pui-btn-primary-bg-active:    #1e40af;   /* blue-800  */

    --pui-btn-success-bg:           #16a34a;   /* green-600 */
    --pui-btn-success-bg-hover:     #15803d;   /* green-700 */
    --pui-btn-success-bg-active:    #166534;   /* green-800 */

    --pui-btn-info-bg:              #0891b2;   /* cyan-600  */
    --pui-btn-info-bg-hover:        #0e7490;   /* cyan-700  */
    --pui-btn-info-bg-active:       #155e75;   /* cyan-800  */

    --pui-btn-warning-bg:           #d97706;   /* amber-600 */
    --pui-btn-warning-bg-hover:     #b45309;   /* amber-700 */
    --pui-btn-warning-bg-active:    #92400e;   /* amber-800 */

    --pui-btn-danger-bg:            #dc2626;   /* red-600   */
    --pui-btn-danger-bg-hover:      #b91c1c;   /* red-700   */
    --pui-btn-danger-bg-active:     #991b1b;   /* red-800   */

    /* Switch (Toggle) – Geometrie + Farben + Motion.
       Größen werden als Token definiert, damit Size-Modifier sie lokal
       überschreiben können (--pui-switch-* auf Modifier-Selector setzen). */
    --pui-switch-width:             44px;
    --pui-switch-height:            24px;
    --pui-switch-knob-size:         18px;
    --pui-switch-knob-offset:       3px;
    --pui-switch-radius:            999px;

    --pui-switch-bg-off:            #e2e8f0;   /* slate-200 */
    --pui-switch-bg-off-hover:      #cbd5e1;   /* slate-300 */
    --pui-switch-bg-on:             var(--pui-color-success);
    --pui-switch-bg-on-hover:       var(--pui-btn-success-bg-hover);

    --pui-switch-knob-bg:           #fff;
    --pui-switch-knob-shadow:       0 1px 2px rgba(15, 23, 42, .16),
                                    0 1px 1px rgba(15, 23, 42, .06);
    --pui-switch-transition:        .22s cubic-bezier(.4, 0, .2, 1);

    /* Form-Check (native Checkbox + Radio) – Tokens. Wird nur auf opted-in
       Wrapper angewandt (.checkbox, .checkbox-inline, .radio, .radio-inline,
       .form-check, .form-check-modern). Plugin-Checkboxen ohne Wrapper
       bleiben unangetastet. */
    --pui-form-check-size:          18px;
    --pui-form-check-radius:        4px;       /* nur Checkbox; Radio: 50% */
    --pui-form-check-border-width:  1.5px;
    --pui-form-check-border:        #cbd5e1;   /* slate-300 */
    --pui-form-check-border-hover:  #94a3b8;   /* slate-400 */
    --pui-form-check-bg:            #fff;
    --pui-form-check-bg-checked:    var(--pui-color-primary);
    --pui-form-check-border-checked:var(--pui-color-primary);
    --pui-form-check-transition:    background-color .12s ease,
                                    border-color .12s ease,
                                    box-shadow .12s ease;

    /* SVG-Icons als Tokens, damit Override-Stellen (z. B. .input-loader-
       Kompat) nicht erneut SVG-Daten inline halten müssen. */
    --pui-form-check-icon-check:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    --pui-form-check-icon-indeterminate:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' d='M3.5 8h9'/%3E%3C/svg%3E");
    --pui-form-check-icon-radio:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23fff'/%3E%3C/svg%3E");
}


/* -----------------------------------------------------------------------------
 * 2. .label
 *    Bootstrap-3-Defaults: padding .2em .6em .3em; font-size 75%; font-weight 700;
 *    border-radius .25em; color #fff; position relative; top -1px.
 *    Unsere Anpassungen: weicheres Gewicht, größerer Radius, Pill-fähig,
 *    bessere vertikale Ausrichtung, modernere Farb-Palette.
 * -------------------------------------------------------------------------- */
.label {
    display: inline-block;          /* statt inline → besseres Box-Modell */
    padding: var(--pui-label-padding);
    font-size: var(--pui-label-font-size);
    font-weight: var(--pui-label-font-weight);
    letter-spacing: var(--pui-label-letter-spacing);
    line-height: 1.3;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--pui-label-radius);
    top: 0;                         /* BS3 hebt Labels um -1px; wirkt heute schief */
    background-color: var(--pui-color-default);
    transition: background-color .12s ease, color .12s ease;
}

.label:hover,
.label:focus {
    color: #fff;
    text-decoration: none;
}

/* Color-Modifier */
.label-default { background-color: var(--pui-color-default); }
.label-primary { background-color: var(--pui-color-primary); }
.label-success { background-color: var(--pui-color-success); }
.label-info    { background-color: var(--pui-color-info); }
.label-warning { background-color: var(--pui-color-warning); }
.label-danger  { background-color: var(--pui-color-danger); }

/* Soft-Variante: ruhiger Tint mit farbigem Text – ideal für Listen/Tabellen,
   wo viele Labels nebeneinander stehen und nicht „schreien“ sollen.
   Verwendung: <span class="label label-success label-soft">…</span> */
.label-soft.label-default { background-color: var(--pui-color-default-soft-bg); color: var(--pui-color-default-soft-fg); }
.label-soft.label-primary { background-color: var(--pui-color-primary-soft-bg); color: var(--pui-color-primary-soft-fg); }
.label-soft.label-success { background-color: var(--pui-color-success-soft-bg); color: var(--pui-color-success-soft-fg); }
.label-soft.label-info    { background-color: var(--pui-color-info-soft-bg);    color: var(--pui-color-info-soft-fg); }
.label-soft.label-warning { background-color: var(--pui-color-warning-soft-bg); color: var(--pui-color-warning-soft-fg); }
.label-soft.label-danger  { background-color: var(--pui-color-danger-soft-bg);  color: var(--pui-color-danger-soft-fg); }

.label-soft:hover,
.label-soft:focus { color: inherit; }


/* -----------------------------------------------------------------------------
 * 3. .badge
 *    Bootstrap-3-Defaults: display inline-block; min-width 10px; padding 3px 7px;
 *    font-size 12px; font-weight 700; color #fff; bg #777; border-radius 10px.
 *    BS3 kennt KEINE Color-Modifier (.badge-success etc.) – im Projekt werden
 *    stattdessen die Bootstrap-Hilfsklassen .bg-success/.bg-danger usw. mit
 *    .badge kombiniert (siehe header.php). Wir unterstützen BEIDES.
 * -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pui-badge-min-width);
    padding: var(--pui-badge-padding);
    font-size: var(--pui-badge-font-size);
    font-weight: var(--pui-badge-font-weight);
    line-height: var(--pui-badge-line-height);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--pui-color-default);
    border-radius: var(--pui-badge-radius);
    top: 0;
    transition: background-color .12s ease, color .12s ease;
}

.badge:empty {
    /* BS3 versteckt leere Badges – beibehalten, damit Counter ohne Wert nicht
       als hohle Pill erscheinen. */
    display: none;
}

.badge:hover,
.badge:focus {
    color: #fff;
    text-decoration: none;
}

/* Eigene Color-Modifier (zusätzlich zu .bg-* Kompat unten).
   Verwendung: <span class="badge badge-success">…</span> */
.badge-default { background-color: var(--pui-color-default); }
.badge-primary { background-color: var(--pui-color-primary); }
.badge-success { background-color: var(--pui-color-success); }
.badge-info    { background-color: var(--pui-color-info); }
.badge-warning { background-color: var(--pui-color-warning); }
.badge-danger  { background-color: var(--pui-color-danger); }

/* Bootstrap-Helper-Kompat: .badge.bg-* (vor allem im Header verwendet).
   Wichtig: Bootstrap 3 setzt für .bg-success/.bg-info/.bg-warning/.bg-danger
   PASTELL-Farben (für Boxes/Alerts). Auf Badges sind diese pastellen Töne
   nicht lesbar (helle Schrift auf hellem Grund). Wir erzwingen daher
   kräftige Farben mit weißer Schrift, wenn .bg-* MIT .badge kombiniert wird. */
.badge.bg-default { background-color: var(--pui-color-default) !important; color: #fff !important; }
.badge.bg-primary { background-color: var(--pui-color-primary) !important; color: #fff !important; }
.badge.bg-success { background-color: var(--pui-color-success) !important; color: #fff !important; }
.badge.bg-info    { background-color: var(--pui-color-info)    !important; color: #fff !important; }
.badge.bg-warning { background-color: var(--pui-color-warning) !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--pui-color-danger)  !important; color: #fff !important; }

/* Soft-Variante. Verwendung: <span class="badge badge-success badge-soft">…</span> */
.badge-soft.badge-default { background-color: var(--pui-color-default-soft-bg); color: var(--pui-color-default-soft-fg); }
.badge-soft.badge-primary { background-color: var(--pui-color-primary-soft-bg); color: var(--pui-color-primary-soft-fg); }
.badge-soft.badge-success { background-color: var(--pui-color-success-soft-bg); color: var(--pui-color-success-soft-fg); }
.badge-soft.badge-info    { background-color: var(--pui-color-info-soft-bg);    color: var(--pui-color-info-soft-fg); }
.badge-soft.badge-warning { background-color: var(--pui-color-warning-soft-bg); color: var(--pui-color-warning-soft-fg); }
.badge-soft.badge-danger  { background-color: var(--pui-color-danger-soft-bg);  color: var(--pui-color-danger-soft-fg); }

.badge-soft:hover,
.badge-soft:focus { color: inherit; }

/* Badges direkt in Buttons (Bootstrap-Pattern): Farbe folgt dem Button-Text.
   BS3 macht das via .btn .badge { color:#... background:#fff }. Behalten wir,
   nur dezenter: Hintergrund auf leichtem Tint statt vollem Weiß. */
.btn .badge {
    position: relative;
    top: -1px;
    background-color: rgba(255, 255, 255, .22);
    color: inherit;
}
.btn-default .badge {
    background-color: var(--pui-color-default);
    color: #fff;
}

/* Nav-Pills mit aktivem Badge: leicht abgehobene Lesbarkeit. */
.nav-pills > .active > a > .badge {
    color: var(--pui-color-primary);
    background-color: #fff;
}


/* -----------------------------------------------------------------------------
 * 4. .btn  +  .btn-group  +  .btn-toolbar
 *    Bootstrap-3-Defaults: padding 6px 12px; font-size 14px; font-weight 400;
 *    border-radius 4px; transparent border; hartes :focus-Outline; aktives
 *    Inset-Shadow nur per :active – keine konsistente Motion.
 *
 *    Das Projekt setzt in bootstrap-reset.css alte Brand-Farben für die
 *    .btn-*-Modifier (Teal #6DC3C3, Olive #95b75d, Coral #fa8564, …) und
 *    killt projektweit `outline: none !important` auf Buttons.
 *
 *    Wir machen hier zwei Dinge:
 *    a) Form / Motion / Feedback / A11y modernisieren (Fokus-Ring wiederhergestellt)
 *    b) Farb-Palette komplett ersetzen (siehe Tokens oben). Per !important,
 *       weil bootstrap-reset.css früher geladen wird.
 *
 *    .btn-group: kantenbündig (Segmented-Control-Look) per Flexbox.
 *    Opt-in .btn-group-spaced: Pills mit Gap (lose Aktions-Reihe).
 *    .btn-toolbar: Flexbox + gap statt margin-basierter Spacings.
 * -------------------------------------------------------------------------- */
.btn {
    padding: var(--pui-btn-padding-y) var(--pui-btn-padding-x);
    font-weight: var(--pui-btn-font-weight);
    letter-spacing: var(--pui-btn-letter-spacing);
    line-height: 1.45;
    border-radius: var(--pui-btn-radius);
    border-width: 1px;
    border-style: solid;
    background-image: none;
    box-shadow: var(--pui-btn-shadow);
    transition: var(--pui-btn-transition);
    -webkit-font-smoothing: antialiased;
}

/* Sanfter Hover-Lift – greift nur, wenn Browser pointer:fine hat
   (kein „Klebe-Hover" auf Touch). */
@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled):not(.disabled) {
        box-shadow: var(--pui-btn-shadow-hover);
        transform: translateY(-1px);
    }
}

.btn:active:not(:disabled):not(.disabled),
.btn.active:not(:disabled):not(.disabled) {
    box-shadow: var(--pui-btn-shadow-active);
    transform: translateY(0);
}

/* Fokus-Ring nur für Tastatur-Nutzung; mit !important, weil
   bootstrap-reset.css `outline: none !important` setzt. */
.btn:focus { outline: none; }
.btn:focus-visible {
    outline: none !important;
    box-shadow: var(--pui-btn-shadow), var(--pui-btn-focus-ring);
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}


/* --- Farb-Modifier --------------------------------------------------------
 *  Komplette Übersteuerung der Brand-Farben aus bootstrap-reset.css. Per
 *  !important, weil dort u. a. `.btn-primary { background-color: #6DC3C3; }`
 *  ohne unsere Hierarchie steht.
 *  Pattern: Border-Farbe = Background-Farbe (kein zweiter "darker"-Ton wie BS3).
 *  Hover  = 700er-Shade, Active/.active/.open = 800er-Shade.
 * ------------------------------------------------------------------------- */

/* .btn-default – ruhige Outline-Lite-Variante (weißer Hintergrund) */
.btn-default {
    background-color: var(--pui-btn-default-bg) !important;
    border-color:     var(--pui-btn-default-border) !important;
    color:            var(--pui-btn-default-fg) !important;
}
.btn-default:hover,
.btn-default:focus,
.open > .dropdown-toggle.btn-default {
    background-color: var(--pui-btn-default-bg-hover) !important;
    border-color:     var(--pui-btn-default-border-hover) !important;
    color:            var(--pui-btn-default-fg) !important;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default:hover {
    background-color: var(--pui-btn-default-bg-active) !important;
    border-color:     var(--pui-btn-default-border-hover) !important;
    color:            var(--pui-btn-default-fg) !important;
}

/* .btn-primary */
.btn-primary {
    background-color: var(--pui-btn-primary-bg) !important;
    border-color:     var(--pui-btn-primary-bg) !important;
    color:            #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--pui-btn-primary-bg-hover) !important;
    border-color:     var(--pui-btn-primary-bg-hover) !important;
    color:            #fff !important;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary:hover {
    background-color: var(--pui-btn-primary-bg-active) !important;
    border-color:     var(--pui-btn-primary-bg-active) !important;
    color:            #fff !important;
}

/* .btn-success */
.btn-success {
    background-color: var(--pui-btn-success-bg) !important;
    border-color:     var(--pui-btn-success-bg) !important;
    color:            #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.open > .dropdown-toggle.btn-success {
    background-color: var(--pui-btn-success-bg-hover) !important;
    border-color:     var(--pui-btn-success-bg-hover) !important;
    color:            #fff !important;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success:hover {
    background-color: var(--pui-btn-success-bg-active) !important;
    border-color:     var(--pui-btn-success-bg-active) !important;
    color:            #fff !important;
}

/* .btn-info */
.btn-info {
    background-color: var(--pui-btn-info-bg) !important;
    border-color:     var(--pui-btn-info-bg) !important;
    color:            #fff !important;
}
.btn-info:hover,
.btn-info:focus,
.open > .dropdown-toggle.btn-info {
    background-color: var(--pui-btn-info-bg-hover) !important;
    border-color:     var(--pui-btn-info-bg-hover) !important;
    color:            #fff !important;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info:hover {
    background-color: var(--pui-btn-info-bg-active) !important;
    border-color:     var(--pui-btn-info-bg-active) !important;
    color:            #fff !important;
}

/* .btn-warning */
.btn-warning {
    background-color: var(--pui-btn-warning-bg) !important;
    border-color:     var(--pui-btn-warning-bg) !important;
    color:            #fff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.open > .dropdown-toggle.btn-warning {
    background-color: var(--pui-btn-warning-bg-hover) !important;
    border-color:     var(--pui-btn-warning-bg-hover) !important;
    color:            #fff !important;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning:hover {
    background-color: var(--pui-btn-warning-bg-active) !important;
    border-color:     var(--pui-btn-warning-bg-active) !important;
    color:            #fff !important;
}

/* .btn-danger */
.btn-danger {
    background-color: var(--pui-btn-danger-bg) !important;
    border-color:     var(--pui-btn-danger-bg) !important;
    color:            #fff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.open > .dropdown-toggle.btn-danger {
    background-color: var(--pui-btn-danger-bg-hover) !important;
    border-color:     var(--pui-btn-danger-bg-hover) !important;
    color:            #fff !important;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger:hover {
    background-color: var(--pui-btn-danger-bg-active) !important;
    border-color:     var(--pui-btn-danger-bg-active) !important;
    color:            #fff !important;
}


/* Icon-in-Button: konsistenter Abstand zwischen Icon und Label, ohne im
   Markup ein `&nbsp;` zwischenschieben zu müssen. Greift nur, wenn das
   Icon NICHT alleiniges Kind ist (Icon-only-Buttons bleiben kompakt). */
.btn > .fa:not(:only-child),
.btn > .fas:not(:only-child),
.btn > .far:not(:only-child),
.btn > .fab:not(:only-child),
.btn > i:not(:only-child) {
    margin-right: var(--pui-btn-icon-gap);
}
.btn > .fa:not(:only-child):last-child,
.btn > .fas:not(:only-child):last-child,
.btn > .far:not(:only-child):last-child,
.btn > .fab:not(:only-child):last-child,
.btn > i:not(:only-child):last-child {
    margin-right: 0;
    margin-left: var(--pui-btn-icon-gap);
}

/* Sizing – nur Padding/Radius nachschärfen, font-size bleibt BS-konform. */
.btn-lg {
    padding: var(--pui-btn-padding-y-lg) var(--pui-btn-padding-x-lg);
    border-radius: var(--pui-btn-radius-lg);
}
.btn-sm {
    padding: var(--pui-btn-padding-y-sm) var(--pui-btn-padding-x-sm);
    border-radius: var(--pui-btn-radius-sm);
}
.btn-xs {
    padding: var(--pui-btn-padding-y-xs) var(--pui-btn-padding-x-xs);
    border-radius: var(--pui-btn-radius-sm);
    font-weight: 500;
}

/* Bootstrap setzt in einer Stelle `.btn-sm{margin-top:10px;margin-bottom:10px}`
   und `.btn-xs{margin-top:14px;margin-bottom:14px}` (nur innerhalb bestimmter
   Kontexte). Falls das hier global durchschlägt, hier neutralisieren wäre
   gefährlich – BS setzt es nur scoped. Wir lassen es. */

/* .btn-link – weniger laut, kein Underline by default; nur on hover. */
.btn-link {
    box-shadow: none;
    border-color: transparent;
    text-decoration: none;
}
.btn-link:hover,
.btn-link:focus-visible {
    text-decoration: underline;
    box-shadow: none;
    transform: none;
}

/* Block-Variante – Abstand zwischen gestapelten Block-Buttons etwas mehr Luft. */
.btn-block + .btn-block { margin-top: 8px; }

/* Bonus-Modifier .btn-outline – als Opt-in, wenn man bewusst eine dezente
   Variante eines farbigen Buttons will (z. B. sekundäre Aktion).
   Verwendung: <button class="btn btn-primary btn-outline">…</button>
   – nutzt currentColor des Modifiers, damit Brand-Farbe vom Projekt greift. */
.btn-outline {
    background-color: transparent !important;
    color: inherit;
    box-shadow: none;
}
.btn-outline.btn-default { color: var(--pui-color-default-soft-fg); border-color: #cbd5e1; }
.btn-outline.btn-default:hover { background-color: var(--pui-color-default-soft-bg) !important; }
.btn-outline.btn-primary { color: var(--pui-color-primary); border-color: currentColor; }
.btn-outline.btn-primary:hover { background-color: var(--pui-color-primary-soft-bg) !important; }
.btn-outline.btn-success { color: var(--pui-color-success); border-color: currentColor; }
.btn-outline.btn-success:hover { background-color: var(--pui-color-success-soft-bg) !important; }
.btn-outline.btn-info    { color: var(--pui-color-info);    border-color: currentColor; }
.btn-outline.btn-info:hover    { background-color: var(--pui-color-info-soft-bg) !important; }
.btn-outline.btn-warning { color: var(--pui-color-warning); border-color: currentColor; }
.btn-outline.btn-warning:hover { background-color: var(--pui-color-warning-soft-bg) !important; }
.btn-outline.btn-danger  { color: var(--pui-color-danger);  border-color: currentColor; }
.btn-outline.btn-danger:hover  { background-color: var(--pui-color-danger-soft-bg) !important; }


/* --- .btn-group / .btn-group-vertical / .btn-toolbar ----------------------
 *  Komplett-Rebuild auf Flexbox. Vorteile gegenüber BS3-Original:
 *   - Kein `float: left`-Chaos, keine `position: relative; float`-Hacks
 *   - Kein Layout-Jitter durch Hover-Lift
 *   - Saubere Z-Index-Hierarchie: aktiv über hover über default; focus über alles
 *   - Spaced-Variante einfach via Flex-Gap (Opt-in: .btn-group-spaced)
 *  .btn-group-justified bleibt als `display: table` erhalten – ist
 *  eine Spezial-API für full-width-Gruppen.
 * ------------------------------------------------------------------------- */

.btn-group {
    display: inline-flex;
    flex-direction: row;
    vertical-align: middle;
}

.btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    vertical-align: middle;
}

/* .btn-group-justified ist eine BS3-Spezialform (table-layout, 100% Breite).
   Da unser `.btn-group { display: inline-flex }` sonst gewinnen würde, hier
   explizit zurücksetzen. */
.btn-group-justified {
    display: table;
}

/* Gruppen-Buttons: kantenbündig, eigene Radii/Schatten/Lift aufheben.
   Die Eckenradii werden über :first-child/:last-child gesetzt. */
.btn-group > .btn,
.btn-group-vertical > .btn {
    flex: 0 0 auto;
    position: relative;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Hover/Active/Focus-Lift unterdrücken (würde Nachbarn überlappen). */
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active {
    transform: none;
}

/* Z-Index-Stack innerhalb der Gruppe:
   default 0 → hover 1 → active 2 → focus-visible 3 (Ring muss sichtbar bleiben). */
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
    z-index: 1;
}
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group-vertical > .btn.active,
.btn-group-vertical > .btn:active {
    z-index: 2;
}
.btn-group > .btn:focus-visible,
.btn-group-vertical > .btn:focus-visible {
    z-index: 3;
    box-shadow: var(--pui-btn-focus-ring);
}

/* Horizontale Gruppe: -1px-Overlap löst die Nachbar-Border sauber auf
   (keine doppelte Linie). Innen ohne Radius; außen voller --pui-btn-radius. */
.btn-group > .btn + .btn,
.btn-group > .btn + .btn-group,
.btn-group > .btn-group + .btn,
.btn-group > .btn-group + .btn-group {
    margin-left: -1px;
}
.btn-group > .btn:first-child:not(:last-child),
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child {
    border-top-left-radius: var(--pui-btn-radius);
    border-bottom-left-radius: var(--pui-btn-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child,
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-right-radius: var(--pui-btn-radius);
    border-bottom-right-radius: var(--pui-btn-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}
/* Einzelner Button in Gruppe behält vollen Radius. */
.btn-group > .btn:only-child {
    border-radius: var(--pui-btn-radius);
}

/* Vertikale Gruppe analog. */
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn-group + .btn-group,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn {
    margin-top: -1px;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
    border-top-left-radius: var(--pui-btn-radius);
    border-top-right-radius: var(--pui-btn-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
    border-bottom-left-radius: var(--pui-btn-radius);
    border-bottom-right-radius: var(--pui-btn-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.btn-group-vertical > .btn:only-child {
    border-radius: var(--pui-btn-radius);
}


/* --- .btn-group-spaced (Opt-in: separated Pills mit Gap) ------------------
 *  Verwendung: <div class="btn-group btn-group-spaced">…</div>
 *  Jeder Button behält vollen Radius + eigenen Schatten; dazwischen ein
 *  kleiner Flex-Gap. Wirkt wie eine lose Aktions-Reihe statt eines
 *  Segmented-Controls.
 * ------------------------------------------------------------------------- */
.btn-group.btn-group-spaced,
.btn-group-vertical.btn-group-spaced {
    gap: 6px;
}
.btn-group.btn-group-spaced > .btn,
.btn-group.btn-group-spaced > .btn-group > .btn,
.btn-group-vertical.btn-group-spaced > .btn,
.btn-group-vertical.btn-group-spaced > .btn-group > .btn {
    margin: 0 !important;
    border-radius: var(--pui-btn-radius);
    box-shadow: var(--pui-btn-shadow);
}
.btn-group.btn-group-spaced > .btn-lg,
.btn-group-vertical.btn-group-spaced > .btn-lg {
    border-radius: var(--pui-btn-radius-lg);
}
.btn-group.btn-group-spaced > .btn-sm,
.btn-group.btn-group-spaced > .btn-xs,
.btn-group-vertical.btn-group-spaced > .btn-sm,
.btn-group-vertical.btn-group-spaced > .btn-xs {
    border-radius: var(--pui-btn-radius-sm);
}


/* --- .btn-toolbar ---------------------------------------------------------
 *  BS3 nutzte hier `margin-left: 5px` auf `> .btn-group + .btn-group`, was
 *  bei gemischten Direktkindern (.btn + .btn-group + .input-group) ein
 *  ungleichmäßiges Spacing erzeugt. Wir nehmen Flexbox-Gap → gleichmäßig
 *  für ALLE Direktkinder, mit Wrap auf engen Layouts.
 * ------------------------------------------------------------------------- */
.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.btn-toolbar > * {
    margin: 0;                 /* BS3 setzte hier margin-left:5px – neutralisieren */
}


/* -----------------------------------------------------------------------------
 * 5. .switch-modern  (Toggle Switch)
 *    Projekt-eigene Custom-Komponente (kein BS3). Bisher dupliziert in
 *    custom.css und ticket_settings.php – hier zur einzigen Quelle gemacht.
 *
 *    Markup-Pattern:
 *        <label class="switch-modern">
 *            <input type="checkbox">
 *            <span class="slider-modern"></span>
 *        </label>
 *
 *    Modernisierungen ggü. Original:
 *    - Token-basiert: Größen + Farben über --pui-switch-* steuerbar
 *    - Off-Farbe von #ccc → slate-200 (zarter, moderner)
 *    - On-Farbe vom alten BS-Grün #5cb85c → green-600 (Token-aligned)
 *    - Knob-Schatten zweistufig (dunkler Bodenschatten + dünne Schimmer-Linie)
 *    - Hover-States für Off und On (eine Shade dunkler)
 *    - A11y-Fokus-Ring auf Slider via :focus-visible (Input ist visually hidden)
 *    - Active-Feedback: Knob „squisht" minimal zu Oval
 *    - Disabled-State (Opacity + not-allowed)
 *    - prefers-reduced-motion respektiert
 *    - Modifier: .switch-modern--sm/--lg (Größe), --primary/--danger/--warning (Farbe)
 *    - Knob-Endposition wird per calc() aus Tokens berechnet → skaliert mit Size-Modifier
 * -------------------------------------------------------------------------- */
.switch-modern {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--pui-switch-width);
    height: var(--pui-switch-height);
    vertical-align: middle;
}

/* Input visuell ausgeblendet, aber als Klick-Fläche das ganze Label
   abdeckend – sauberer Hit-Test, native Tab-Fokussierung bleibt erhalten. */
.switch-modern input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.switch-modern input:disabled {
    cursor: not-allowed;
}

.slider-modern {
    position: absolute;
    inset: 0;
    background-color: var(--pui-switch-bg-off);
    border-radius: var(--pui-switch-radius);
    transition: background-color var(--pui-switch-transition),
                box-shadow var(--pui-switch-transition);
    cursor: pointer;
}

.slider-modern::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pui-switch-knob-offset);
    width: var(--pui-switch-knob-size);
    height: var(--pui-switch-knob-size);
    background-color: var(--pui-switch-knob-bg);
    border-radius: 50%;
    box-shadow: var(--pui-switch-knob-shadow);
    transform: translateY(-50%);
    transition: transform var(--pui-switch-transition),
                width var(--pui-switch-transition),
                box-shadow var(--pui-switch-transition);
}

/* Hover – Off / On (greift nur, wenn Input nicht disabled). */
.switch-modern:hover input:not(:disabled) + .slider-modern {
    background-color: var(--pui-switch-bg-off-hover);
}
.switch-modern:hover input:not(:disabled):checked + .slider-modern {
    background-color: var(--pui-switch-bg-on-hover);
}

/* Checked: Farbwechsel + Knob nach rechts.
   Endposition = Switch-Breite minus Knob-Breite minus 2× Offset (links + rechts). */
.switch-modern input:checked + .slider-modern {
    background-color: var(--pui-switch-bg-on);
}
.switch-modern input:checked + .slider-modern::before {
    transform: translate(
        calc(var(--pui-switch-width) - var(--pui-switch-knob-size) - var(--pui-switch-knob-offset) * 2),
        -50%
    );
}

/* A11y-Fokus-Ring – wir ringen den Slider, weil der Input visually hidden ist
   (transparent + position absolute). Nur bei Tastatur-Fokus. */
.switch-modern input:focus-visible + .slider-modern {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

/* Aktive Mikro-Interaktion: Knob streckt sich beim Drücken leicht zu Oval. */
.switch-modern input:not(:disabled):active + .slider-modern::before {
    width: calc(var(--pui-switch-knob-size) + 3px);
}

/* Disabled */
.switch-modern input:disabled + .slider-modern {
    opacity: .55;
    cursor: not-allowed;
}
.switch-modern input:disabled + .slider-modern::before {
    box-shadow: none;
}


/* --- Color-Modifier (Opt-in: Farbe für ON-Zustand wechseln) --------------- */
/* Verwendung: <label class="switch-modern switch-modern--primary">…</label> */
.switch-modern.switch-modern--primary input:checked + .slider-modern { background-color: var(--pui-color-primary); }
.switch-modern.switch-modern--primary:hover input:not(:disabled):checked + .slider-modern { background-color: var(--pui-btn-primary-bg-hover); }

.switch-modern.switch-modern--info input:checked + .slider-modern { background-color: var(--pui-color-info); }
.switch-modern.switch-modern--info:hover input:not(:disabled):checked + .slider-modern { background-color: var(--pui-btn-info-bg-hover); }

.switch-modern.switch-modern--warning input:checked + .slider-modern { background-color: var(--pui-color-warning); }
.switch-modern.switch-modern--warning:hover input:not(:disabled):checked + .slider-modern { background-color: var(--pui-btn-warning-bg-hover); }

.switch-modern.switch-modern--danger input:checked + .slider-modern { background-color: var(--pui-color-danger); }
.switch-modern.switch-modern--danger:hover input:not(:disabled):checked + .slider-modern { background-color: var(--pui-btn-danger-bg-hover); }


/* --- Size-Modifier (Opt-in: Token-Override am Element) -------------------- */
/* Verwendung: <label class="switch-modern switch-modern--lg">…</label> */
.switch-modern.switch-modern--sm {
    --pui-switch-width:     34px;
    --pui-switch-height:    18px;
    --pui-switch-knob-size: 14px;
    --pui-switch-knob-offset: 2px;
}
.switch-modern.switch-modern--lg {
    --pui-switch-width:     54px;
    --pui-switch-height:    30px;
    --pui-switch-knob-size: 24px;
    --pui-switch-knob-offset: 3px;
}


/* --- Reduced-Motion -------------------------------------------------------
 *  Respektiere prefers-reduced-motion. Hover-/Active-Animation entfällt,
 *  Farbwechsel und Knob-Translation greifen sofort statt mit Easing.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .slider-modern,
    .slider-modern::before {
        transition: none;
    }
    .switch-modern input:not(:disabled):active + .slider-modern::before {
        width: var(--pui-switch-knob-size);
    }
}


/* -----------------------------------------------------------------------------
 * 6. Form-Check  (native <input type="checkbox"> + <input type="radio">)
 *
 *    Modernisierung nur OPT-IN über Wrapper-Klasse – damit Plugins (DataTables,
 *    Choices.js, jQuery-UI usw.) und Roh-Checkboxen unangetastet bleiben.
 *
 *    Triggernde Wrapper:
 *    - .checkbox           – BS3-Block-Pattern  (<div class="checkbox"><label><input>…</label></div>)
 *    - .checkbox-inline    – BS3-Inline-Pattern (<label class="checkbox-inline"><input>…</label>)
 *    - .radio              – BS3-Block-Pattern
 *    - .radio-inline       – BS3-Inline-Pattern
 *    - .form-check         – BS4/5-Pattern      (<div class="form-check"><input><label></div>)
 *    - .form-check-modern  – Explizites Opt-in, wenn kein BS-Wrapper passt
 *
 *    Markup bleibt unverändert. Wir nutzen `appearance: none` direkt am Input
 *    und zeichnen Box/Check/Radio-Dot über das Input-Element selbst (mit
 *    SVG-Background-Image). BS3 setzt den Input `position: absolute;
 *    margin-left: -20px` – das BLEIBT, damit das bisherige Label-Layout
 *    unverändert ausgerichtet wird.
 *
 *    Außerdem `:where()` auf der Wrapper-Liste → Spezifität bleibt niedrig
 *    (0,0,1,1 wie BS3-Default), damit projekteigene Form-Validation-Styles
 *    weiter gewinnen.
 *
 *    Semantischer Hinweis: Checkbox ≠ Toggle-Switch. Für Settings-Toggles
 *    weiter .switch-modern (Sektion 5) nutzen.
 * -------------------------------------------------------------------------- */

/* Base – Native Chrome killen, einheitliche Box-Geometrie. */
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input[type="checkbox"],
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width:  var(--pui-form-check-size);
    height: var(--pui-form-check-size);
    margin: 0;                  /* BS3-margin-top:4px + margin-left:-20px werden im Layout-Block unten ohnehin abgelöst */
    border: var(--pui-form-check-border-width) solid var(--pui-form-check-border);
    background-color: var(--pui-form-check-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: var(--pui-form-check-transition);
    flex-shrink: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* --- Layout-Override -----------------------------------------------------
 *  BS3 macht den Input `position: absolute; margin-left: -20px` und gibt dem
 *  Label `padding-left: 20px`. Mit unserer 18-px-Box bleiben dadurch nur
 *  2 px Lücke zum Text, und vertikal sitzt der Input nicht zentriert auf
 *  der Schrift-Baseline.
 *
 *  Fix: Input wird statisch (kein absolute mehr), Label-padding-left raus.
 *  Input bekommt margin-right für den Abstand und vertical-align:middle für
 *  die Schrift-Mittel-Achse.
 *
 *  KEIN inline-flex am Label! Labels enthalten oft gemischten Inline-Inhalt
 *  (Text-Nodes + <br> + <u>/<a>-Inlays + <i class="fa">-Icons), die unter
 *  inline-flex zu eigenständigen Flex-Items werden und auseinanderfliegen
 *  würden. inline-block respektiert dagegen natürlichen Inline-Textfluss
 *  inkl. <br> und Whitespace-Collapsing.
 *
 *  vertical-align:middle ist die kanonische CSS-Antwort für „Inline-Element
 *  mittig auf der Schriftbaseline ausrichten" – Browser machen die
 *  Berechnung passend zur Font-Metrik.
 * ------------------------------------------------------------------------- */

/* Block-Wrapper-Pattern (BS3): Label fließt als inline-block, Input davor. */
.checkbox > label,
.radio > label {
    display: inline-block;
    padding-left: 0;            /* BS3: padding-left:20px → weg */
    min-height: var(--pui-form-check-size);
    cursor: pointer;
}
.checkbox > label > input[type="checkbox"],
.radio  > label > input[type="radio"] {
    position: static;           /* BS3: position: absolute → weg */
    float: none;
    margin: 0 8px 0 0;          /* BS3: margin-left:-20px/margin-top:4px → weg, dafür 8px Gap rechts.
                                   Spezifität dieses Selektors (0,0,2,2) schlägt
                                   BS3-Default (0,0,2,1) – der Base-Block oben
                                   nutzt :where() (0,0,1,1) und würde verlieren. */
    vertical-align: middle;     /* Box mittig auf Schrift-Baseline */
}

/* Inline-Pattern (BS3): Label trägt direkt die Klasse. */
.checkbox-inline,
.radio-inline {
    display: inline-block;
    padding-left: 0;            /* BS3: padding-left:20px → weg */
    min-height: var(--pui-form-check-size);
    cursor: pointer;
}
.checkbox-inline > input[type="checkbox"],
.radio-inline   > input[type="radio"] {
    position: static;
    float: none;
    margin: 0 8px 0 0;          /* dito */
    vertical-align: middle;
}

/* BS3-Spezialfall: zwei .checkbox-inline / .radio-inline nebeneinander
   bekommen sonst margin-left: 10px. Auf 12px normalisieren. */
.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
    margin-left: 12px;
}

/* BS4/5-Pattern: .form-check als inline-block-Container, Input als Sibling. */
.form-check,
.form-check-modern {
    display: inline-block;
    padding-left: 0;            /* BS5 setzt 1.5em padding-left + negativen Margin am Input – ablösen */
    min-height: var(--pui-form-check-size);
}
.form-check > input[type="checkbox"],
.form-check > input[type="radio"],
.form-check-modern > input[type="checkbox"],
.form-check-modern > input[type="radio"] {
    position: static;
    float: none;                /* BS5 setzt float:left am .form-check-input */
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.form-check > label,
.form-check-modern > label {
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: middle;
}

/* Disabled-Cursor */
:where(.checkbox, .radio) > label:has(input:disabled),
:where(.checkbox-inline, .radio-inline):has(input:disabled),
:where(.form-check, .form-check-modern):has(input:disabled) > label,
:where(.form-check, .form-check-modern):has(input:disabled) {
    cursor: not-allowed;
}

/* Shape: Checkbox = abgerundetes Quadrat, Radio = Kreis. */
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern) input[type="checkbox"] {
    border-radius: var(--pui-form-check-radius);
}
:where(.radio, .radio-inline, .form-check, .form-check-modern) input[type="radio"] {
    border-radius: 50%;
}

/* Hover – Border einen Tick dunkler (greift, wenn Label oder Wrapper gehovert). */
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern):hover input[type="checkbox"]:not(:disabled),
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern):hover input[type="radio"]:not(:disabled),
:where(.checkbox, .radio) label:hover input:not(:disabled) {
    border-color: var(--pui-form-check-border-hover);
}

/* A11y-Fokus-Ring – nur bei Tastatur-Fokus. */
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input[type="checkbox"]:focus-visible,
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input[type="radio"]:focus-visible {
    outline: none;
    border-color: var(--pui-color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

/* Checked – Checkbox: Filled + Check-Icon. */
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern) input[type="checkbox"]:checked {
    background-color: var(--pui-form-check-bg-checked);
    border-color:     var(--pui-form-check-border-checked);
    background-image: var(--pui-form-check-icon-check);
}

/* Indeterminate – Checkbox: Filled + horizontaler Balken statt Check.
   Wird via JS gesetzt (input.indeterminate = true), Standard-Use-Case:
   „alle untergeordneten Items teilweise ausgewählt". */
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern) input[type="checkbox"]:indeterminate {
    background-color: var(--pui-form-check-bg-checked);
    border-color:     var(--pui-form-check-border-checked);
    background-image: var(--pui-form-check-icon-indeterminate);
}

/* Checked – Radio: Filled + Innen-Punkt. */
:where(.radio, .radio-inline, .form-check, .form-check-modern) input[type="radio"]:checked {
    background-color: var(--pui-form-check-bg-checked);
    border-color:     var(--pui-form-check-border-checked);
    background-image: var(--pui-form-check-icon-radio);
}

/* Disabled – greift auch, wenn Wrapper selbst .disabled trägt (BS3-Pattern). */
:where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input:disabled,
:where(.checkbox.disabled, .checkbox-inline.disabled, .radio.disabled, .radio-inline.disabled) input {
    opacity: .5;
    cursor: not-allowed;
}
:where(.checkbox, .checkbox-inline, .radio, .radio-inline) input:disabled ~ *,
:where(.checkbox.disabled, .checkbox-inline.disabled, .radio.disabled, .radio-inline.disabled) label {
    cursor: not-allowed;
}


/* --- Color-Modifier (Opt-in: andere Checked-Farbe) -----------------------
 *  Setzt --pui-form-check-bg-checked am Wrapper neu – funktioniert für
 *  Checkbox UND Radio über dieselbe Variable.
 *  Verwendung: <div class="checkbox checkbox--success">…</div>
 * ------------------------------------------------------------------------- */
.checkbox.checkbox--success, .checkbox-inline.checkbox--success,
.radio.radio--success,       .radio-inline.radio--success,
.form-check.form-check--success, .form-check-modern.form-check-modern--success {
    --pui-form-check-bg-checked:     var(--pui-color-success);
    --pui-form-check-border-checked: var(--pui-color-success);
}
.checkbox.checkbox--info, .checkbox-inline.checkbox--info,
.radio.radio--info,       .radio-inline.radio--info,
.form-check.form-check--info, .form-check-modern.form-check-modern--info {
    --pui-form-check-bg-checked:     var(--pui-color-info);
    --pui-form-check-border-checked: var(--pui-color-info);
}
.checkbox.checkbox--warning, .checkbox-inline.checkbox--warning,
.radio.radio--warning,       .radio-inline.radio--warning,
.form-check.form-check--warning, .form-check-modern.form-check-modern--warning {
    --pui-form-check-bg-checked:     var(--pui-color-warning);
    --pui-form-check-border-checked: var(--pui-color-warning);
}
.checkbox.checkbox--danger, .checkbox-inline.checkbox--danger,
.radio.radio--danger,       .radio-inline.radio--danger,
.form-check.form-check--danger, .form-check-modern.form-check-modern--danger {
    --pui-form-check-bg-checked:     var(--pui-color-danger);
    --pui-form-check-border-checked: var(--pui-color-danger);
}


/* --- .input-loader-Kompat -------------------------------------------------
 *  Das globale `.input-loader` aus style.css wurde für TEXT-Inputs gebaut
 *  und setzt mit `background: url('ajx-loader.gif') no-repeat right #fff
 *  !important` einen Spinner rechts ins Feld. Auf unserer 18-px-Checkbox-Box
 *  überdeckt das den Check-Icon komplett (Spinner-GIF auf weißem Grund).
 *
 *  Wir neutralisieren das hier OHNE die JS-Logik anzufassen (die wird in
 *  vielen .php-Views aufgerufen). Spezifität (0,0,2,1) + !important schlägt
 *  den style.css-Default (0,0,1,0) + !important.
 *
 *  Strategie: Kein Spinner-GIF, kein Hintergrund-Override. Stattdessen
 *  bleibt während des Save-Vorgangs der normale Checkbox-Look erhalten;
 *  visuelles Feedback gibt der Klick selbst (off/on-Toggle) und ggf.
 *  ein Toast oder `.has-error` am Parent bei Fehler.
 * ------------------------------------------------------------------------- */
:where(.checkbox, .checkbox-inline, .radio, .radio-inline,
       .form-check, .form-check-modern) input.input-loader {
    background-image: none !important;
    background-color: var(--pui-form-check-bg) !important;
}

/* Checked / Indeterminate während des Loadings: Filled-Look + Icon zurückholen. */
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern)
       input[type="checkbox"].input-loader:checked,
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern)
       input[type="checkbox"].input-loader:indeterminate,
:where(.radio, .radio-inline, .form-check, .form-check-modern)
       input[type="radio"].input-loader:checked {
    background-color: var(--pui-form-check-bg-checked) !important;
}
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern)
       input[type="checkbox"].input-loader:checked {
    background-image: var(--pui-form-check-icon-check) !important;
}
:where(.checkbox, .checkbox-inline, .form-check, .form-check-modern)
       input[type="checkbox"].input-loader:indeterminate {
    background-image: var(--pui-form-check-icon-indeterminate) !important;
}
:where(.radio, .radio-inline, .form-check, .form-check-modern)
       input[type="radio"].input-loader:checked {
    background-image: var(--pui-form-check-icon-radio) !important;
}


/* --- Reduced-Motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input[type="checkbox"],
    :where(.checkbox, .checkbox-inline, .radio, .radio-inline, .form-check, .form-check-modern) input[type="radio"] {
        transition: none;
    }
}


/* -----------------------------------------------------------------------------
 * 7. Tooltip  (Tippy.js v6 — Theme 'portal' + Animation 'shift-away')
 * -----------------------------------------------------------------------------
 * Wird via tippy.setDefaultProps({theme:'portal', animation:'shift-away', …})
 * in assets/js/alpine-custom.js global aktiviert. Damit profitieren alle
 * x-tooltip-Aufrufe ohne API-Änderung automatisch vom neuen Look.
 *
 * Die Animation-Regeln (data-animation='shift-away') sind hier nötig, weil
 * Tippy v6 die Animation-CSS NICHT automatisch lädt.
 * -------------------------------------------------------------------------- */

/* --- Theme 'portal' (Dunkler Glas-Look — neuer Default) ------------------- */
.tippy-box[data-theme~='portal'] {
    background-color: rgba(15, 23, 42, .96);     /* slate-900 @ 96% */
    color: #f1f5f9;                              /* slate-100 */
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, .18),
        0 2px 4px rgba(15, 23, 42, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.tippy-box[data-theme~='portal'] > .tippy-content {
    padding: 8px 12px;
}
.tippy-box[data-theme~='portal'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: rgba(15, 23, 42, .96);
}
.tippy-box[data-theme~='portal'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: rgba(15, 23, 42, .96);
}
.tippy-box[data-theme~='portal'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: rgba(15, 23, 42, .96);
}
.tippy-box[data-theme~='portal'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: rgba(15, 23, 42, .96);
}

/* --- Theme 'success' (Override des alten Bootstrap-3-Grüns aus style.css) - */
.tippy-box[data-theme~='success'] {
    background-color: var(--pui-color-success);  /* #16a34a */
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(22, 163, 74, .22),
        0 2px 4px rgba(15, 23, 42, .08);
}
.tippy-box[data-theme~='success'] > .tippy-content {
    padding: 8px 12px;
}
.tippy-box[data-theme~='success'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--pui-color-success);
}
.tippy-box[data-theme~='success'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--pui-color-success);
}
.tippy-box[data-theme~='success'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--pui-color-success);
}
.tippy-box[data-theme~='success'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--pui-color-success);
}

/* --- Animation 'shift-away' (Fade + Slide weg vom Trigger) ---------------- */
.tippy-box[data-animation='shift-away'][data-state='hidden'] {
    opacity: 0;
}
.tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='top'] {
    transform: translateY(10px);
}
.tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='bottom'] {
    transform: translateY(-10px);
}
.tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='left'] {
    transform: translateX(10px);
}
.tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='right'] {
    transform: translateX(-10px);
}

/* --- Reduced-Motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tippy-box[data-animation='shift-away'][data-state='hidden'] {
        transform: none;
    }
}