/*
 * style.css – AixAuth Custom Styles
 * Stack: Bootstrap 5 + Bootstrap Icons (lokal)
 * Kein Inline-CSS, kein CDN – via <link nonce="..."> eingebunden
 *
 * Struktur:
 *  1. CSS Custom Properties (eigene Design-Tokens)
 *  2. Base / Reset-Ergänzungen
 *  3. Layout (Body, Main, Footer)
 *  4. Navbar
 *  5. Auth-Cards (Login, Register, etc.)
 *  6. Formulare & Inputs
 *  7. Buttons & Badges
 *  8. Avatar
 *  9. Flash-Messages
 * 10. Login-History / Tabellen
 * 11. Dashboard-Widgets
 * 12. Admin-Panel
 * 13. Utility-Klassen
 * 14. Animationen
 * 15. Dark-Mode (prefers-color-scheme)
 */

/* ═══════════════════════════════════════════════════════════════
   1. CSS Custom Properties
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Markenfarben */
    --aix-primary:        #0d6efd;   /* Bootstrap primary */
    --aix-primary-dark:   #0a58ca;
    --aix-accent:         #6f42c1;   /* Lila-Akzent */

    /* Hintergrund-Abstufungen */
    --aix-bg-base:        #f0f4f8;
    --aix-bg-card:        #ffffff;
    --aix-bg-navbar:      #1a1d23;

    /* Texte */
    --aix-text-base:      #212529;
    --aix-text-muted:     #6c757d;

    /* Ränder */
    --aix-border:         #dee2e6;
    --aix-border-focus:   #86b7fe;

    /* Schlagschatten */
    --aix-shadow-sm:      0 1px 3px rgba(0, 0, 0, .06);
    --aix-shadow-md:      0 4px 16px rgba(0, 0, 0, .10);
    --aix-shadow-lg:      0 8px 32px rgba(0, 0, 0, .14);

    /* Radii */
    --aix-radius-sm:      .375rem;
    --aix-radius-md:      .75rem;
    --aix-radius-lg:      1.25rem;

    /* Übergänge */
    --aix-transition:     .2s ease-in-out;

    /* Navbar-Höhe (für Sticky-Offset) */
    --aix-navbar-h:       58px;
}

/* ═══════════════════════════════════════════════════════════════
   2. Base / Reset-Ergänzungen
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 18px; /* leicht kleiner als Bootstrap-Standard */
}

body {
    background-color: var(--aix-bg-base);
    color:            var(--aix-text-base);
    /* Font-System: Bootstrap setzt --bs-body-font-family per Default auf den System-Stack.
       Wenn eine Schriftart aktiviert wird, überschreibt die Font-CSS diese Variable in :root.
       Kein hardcodierter Stack hier – sonst ignoriert body den aktiven Font immer. */
    font-family:      var(--bs-body-font-family);
    line-height:      1.6;
    -webkit-font-smoothing: antialiased;
}

/* Keine Outline beim Maus-Klick, aber sichtbar bei Tastatur */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline:        2px solid var(--aix-primary);
    outline-offset: 2px;
}

a {
    color:           var(--aix-primary);
    text-decoration: none;
    transition:      color var(--aix-transition);
}
a:hover { color: var(--aix-primary-dark); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   3. Layout – Body / Main / Footer
   ═══════════════════════════════════════════════════════════════ */

/* Flexbox-Stack: Navbar | Main (wächst) | Footer */
body { display: flex; flex-direction: column; min-height: 100vh; }

.main-content {
    flex: 1 0 auto;
    padding-top:    calc(var(--aix-navbar-h) + 1.5rem);
    padding-bottom: 2.5rem;
}

.footer {
    flex-shrink: 0;
    background:  var(--aix-bg-navbar);
    color:       rgba(255, 255, 255, .55);
    font-size:   .82rem;
    padding:     .9rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   4. Navbar
   ═══════════════════════════════════════════════════════════════ */
.navbar {
    background:  var(--aix-bg-navbar) !important;
    height:      var(--aix-navbar-h);
    box-shadow:  0 2px 8px rgba(0, 0, 0, .25);
    position:    sticky;
    top:         0;
    z-index:     1030;
}

.navbar-brand {
    font-weight:  700;
    font-size:    1.15rem;
    letter-spacing: .02em;
    color:        #fff !important;
}
.navbar-brand .bi {
    color:        var(--aix-primary);
    margin-right: .3em;
}

.navbar-nav .nav-link {
    color:        rgba(255, 255, 255, .75) !important;
    font-size:    .9rem;
    padding:      .4rem .75rem;
    border-radius: var(--aix-radius-sm);
    transition:   background var(--aix-transition), color var(--aix-transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background:  rgba(255, 255, 255, .10);
    color:       #fff !important;
}

/* Avatar im Navbar-Dropdown */
.navbar-avatar {
    width:         30px;
    height:        30px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid rgba(255, 255, 255, .25);
    margin-right:  .5rem;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   5. Auth-Cards (Login, Register, Passwort-Reset, etc.)
   ═══════════════════════════════════════════════════════════════ */
.auth-wrapper {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      calc(100vh - var(--aix-navbar-h) - 80px);
    padding:         1rem;
}

.auth-card {
    background:    var(--aix-bg-card);
    border:        1px solid var(--aix-border);
    border-radius: var(--aix-radius-lg);
    box-shadow:    var(--aix-shadow-md);
    padding:       2.25rem 2.5rem;
    width:         100%;
    max-width:     440px;
    animation:     aix-fadein .3s ease-out;
}

/* Kopfzeile der Auth-Card */
.auth-card__header {
    text-align:    center;
    margin-bottom: 1.75rem;
}
.auth-card__icon {
    font-size:     2.6rem;
    color:         var(--aix-primary);
    margin-bottom: .5rem;
    display:       block;
}
.auth-card__title {
    font-size:   1.45rem;
    font-weight: 700;
    margin:      0 0 .2rem;
}
.auth-card__subtitle {
    font-size: .88rem;
    color:     var(--aix-text-muted);
    margin:    0;
}

/* Divider "oder" */
.auth-divider {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin:      1.25rem 0;
    color:       var(--aix-text-muted);
    font-size:   .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--aix-border);
}

/* ═══════════════════════════════════════════════════════════════
   6. Formulare & Inputs
   ═══════════════════════════════════════════════════════════════ */
.form-label {
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--aix-text-base);
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    border-radius: var(--aix-radius-sm);
    border:        1.5px solid var(--aix-border);
    font-size:     .9rem;
    padding:       .55rem .9rem;
    transition:    border-color var(--aix-transition), box-shadow var(--aix-transition);
    background:    var(--aix-bg-card);
    color:         var(--aix-text-base);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--aix-border-focus);
    box-shadow:   0 0 0 3px rgba(13, 110, 253, .15);
    background:   var(--aix-bg-card);
}
.form-control.is-invalid { border-color: #dc3545; }
.form-control.is-valid   { border-color: #198754; }

/* Input-Group Addon */
.input-group .btn { border-radius: 0 var(--aix-radius-sm) var(--aix-radius-sm) 0; }

/* Passwort-Stärke-Balken */
.password-strength {
    height:        4px;
    border-radius: 2px;
    margin-top:    .4rem;
    background:    #e9ecef;
    overflow:      hidden;
}
.password-strength__bar {
    height:       100%;
    width:        0;
    transition:   width .35s ease, background .35s ease;
    border-radius: 2px;
}

/* Honeypot – absolut unsichtbar (kein display:none, damit Bots es füllen) */
.hp-field {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    opacity:    0;
    tab-index:  -1;
    aria-hidden: true;
}

/* ═══════════════════════════════════════════════════════════════
   7. Buttons & Badges
   ═══════════════════════════════════════════════════════════════ */

/* Primär-Button – etwas runder und mit Schatten */
.btn-primary {
    border-radius: var(--aix-radius-sm);
    font-weight:   600;
    letter-spacing: .01em;
    box-shadow:    0 2px 6px rgba(13, 110, 253, .30);
    transition:    transform var(--aix-transition), box-shadow var(--aix-transition);
}
.btn-primary:hover {
    transform:  translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, .40);
}
.btn-primary:active { transform: translateY(0); }

/* Outline-Variante */
.btn-outline-secondary {
    border-radius: var(--aix-radius-sm);
    font-weight:   500;
}

/* Rollen-Badges */
.badge-role-admin  { background: #6f42c1; }
.badge-role-user   { background: #0d6efd; }
.badge-role-mod    { background: #fd7e14; }

/* Status-Badges */
.badge-status-active  { background: #198754; }
.badge-status-locked  { background: #dc3545; }
.badge-status-pending { background: #ffc107; color: #212529; }

/* ═══════════════════════════════════════════════════════════════
   8. Avatar
   ═══════════════════════════════════════════════════════════════ */
.avatar {
    display:       inline-block;
    border-radius: 50%;
    overflow:      hidden;
    object-fit:    cover;
    flex-shrink:   0;
}
.avatar-xs  { width:  28px; height:  28px; }
.avatar-sm  { width:  40px; height:  40px; }
.avatar-md  { width:  64px; height:  64px; }
.avatar-lg  { width:  96px; height:  96px; }
.avatar-xl  { width: 128px; height: 128px; }

/* Avatar mit Rand */
.avatar-bordered {
    border: 3px solid var(--aix-bg-card);
    box-shadow: var(--aix-shadow-sm);
}

/* Profil-Avatar-Vorschau */
.avatar-preview-wrap {
    position:      relative;
    display:       inline-block;
}
.avatar-preview-wrap .avatar-overlay {
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    background:    rgba(0, 0, 0, .45);
    display:       flex;
    align-items:   center;
    justify-content: center;
    opacity:       0;
    transition:    opacity var(--aix-transition);
    cursor:        pointer;
    color:         #fff;
    font-size:     1.4rem;
}
.avatar-preview-wrap:hover .avatar-overlay { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   9. Flash-Messages
   ═══════════════════════════════════════════════════════════════ */
.flash-container {
    position:   fixed;
    top:        calc(var(--aix-navbar-h) + .75rem);
    right:      1rem;
    z-index:    1080;
    width:      min(360px, 90vw);
    display:    flex;
    flex-direction: column;
    gap:        .5rem;
    pointer-events: none;
}
.flash-container .alert {
    pointer-events: auto;
    border:        none;
    border-radius: var(--aix-radius-md);
    box-shadow:    var(--aix-shadow-lg);
    animation:     aix-slidein .3s ease-out;
    font-size:     .9rem;
}
.flash-container .alert-dismissible .btn-close {
    padding: .5rem;
}

/* ═══════════════════════════════════════════════════════════════
   10. Login-History / Tabellen
   ═══════════════════════════════════════════════════════════════ */
.table-aix {
    font-size: .875rem;
}
.table-aix thead th {
    background:    #f8f9fa;
    font-weight:   600;
    border-bottom: 2px solid var(--aix-border);
    white-space:   nowrap;
}
.table-aix tbody tr:hover { background: rgba(13, 110, 253, .04); }

/* IP-Badge */
.ip-badge {
    font-family:   monospace;
    font-size:     .78rem;
    background:    #f0f4f8;
    border:        1px solid var(--aix-border);
    padding:       .1rem .45rem;
    border-radius: var(--aix-radius-sm);
    color:         var(--aix-text-base);
}

/* Gerät-Icon */
.device-icon {
    font-size:   1.1rem;
    color:       var(--aix-text-muted);
    margin-right: .3rem;
}

/* ═══════════════════════════════════════════════════════════════
   11. Dashboard-Widgets
   ═══════════════════════════════════════════════════════════════ */
.dashboard-card {
    background:    var(--aix-bg-card);
    border:        1px solid var(--aix-border);
    border-radius: var(--aix-radius-md);
    box-shadow:    var(--aix-shadow-sm);
    padding:       1.5rem;
    transition:    box-shadow var(--aix-transition);
}
.dashboard-card:hover { box-shadow: var(--aix-shadow-md); }

/* Stat-Kacheln */
.stat-card {
    background:    var(--aix-bg-card);
    border:        1px solid var(--aix-border);
    border-radius: var(--aix-radius-md);
    box-shadow:    var(--aix-shadow-sm);
    padding:       1.25rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
}
.stat-card__icon {
    font-size:     1.8rem;
    width:         52px;
    height:        52px;
    border-radius: var(--aix-radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.stat-card__value {
    font-size:   1.6rem;
    font-weight: 700;
    line-height: 1;
    margin:      0;
}
.stat-card__label {
    font-size: .82rem;
    color:     var(--aix-text-muted);
    margin:    .15rem 0 0;
}

/* Trusted-Device Liste */
.device-list-item {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    padding:        .65rem 0;
    border-bottom:  1px solid var(--aix-border);
}
.device-list-item:last-child { border-bottom: none; }
.device-list-item .device-name {
    font-weight: 600;
    font-size:   .9rem;
}
.device-list-item .device-meta {
    font-size: .8rem;
    color:     var(--aix-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   12. Admin-Panel
   ═══════════════════════════════════════════════════════════════ */
.admin-tabs .nav-tabs {
    border-bottom: 2px solid var(--aix-border);
    margin-bottom: 1.5rem;
}
.admin-tabs .nav-link {
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--aix-text-muted);
    border:      none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding:     .6rem 1.1rem;
    transition:  color var(--aix-transition), border-color var(--aix-transition);
}
.admin-tabs .nav-link.active {
    color:        var(--aix-primary);
    border-color: var(--aix-primary);
    background:   transparent;
}
.admin-tabs .nav-link:hover:not(.active) {
    color:        var(--aix-text-base);
    border-color: var(--aix-border);
}

/* Security-Log Eintrag Schweregrade */
.log-level-critical { border-left: 3px solid #dc3545; padding-left: .75rem; }
.log-level-warning  { border-left: 3px solid #ffc107; padding-left: .75rem; }
.log-level-info     { border-left: 3px solid #0dcaf0; padding-left: .75rem; }

/* ═══════════════════════════════════════════════════════════════
   13. Utility-Klassen
   ═══════════════════════════════════════════════════════════════ */

/* Monospace für IPs, Tokens, Fingerprints */
.font-mono { font-family: 'Consolas', 'SFMono-Regular', monospace; }

/* Text-Truncation mit Tooltip-Hinweis */
.text-truncate-mono {
    font-family:   monospace;
    font-size:     .82rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     160px;
    display:       inline-block;
    vertical-align: middle;
}

/* Trennlinie mit Label */
.hr-text {
    display:    flex;
    align-items: center;
    gap:        .75rem;
    color:      var(--aix-text-muted);
    font-size:  .82rem;
    margin:     1.25rem 0;
}
.hr-text::before,
.hr-text::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--aix-border);
}

/* Ladeindikator */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: .8;
}
.btn-loading::after {
    content:      '';
    display:      inline-block;
    width:        .85em;
    height:       .85em;
    border:       2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation:    aix-spin .6s linear infinite;
    margin-left:  .5em;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   14. Animationen
   ═══════════════════════════════════════════════════════════════ */
@keyframes aix-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes aix-slidein {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes aix-spin {
    to { transform: rotate(360deg); }
}

/* Einfaches Pulse für "aktiv"-Indikator */
@keyframes aix-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}
.indicator-active {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #198754;
    animation:     aix-pulse 1.8s ease-in-out infinite;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   15. Dark-Mode (prefers-color-scheme)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        --aix-bg-base:    #0f1117;
        --aix-bg-card:    #1a1d23;
        --aix-bg-navbar:  #111318;
        --aix-border:     #2d3139;
        --aix-border-focus: #4d7cfe;
        --aix-text-base:  #e4e6ea;
        --aix-text-muted: #8b929e;
        --aix-shadow-sm:  0 1px 3px rgba(0, 0, 0, .3);
        --aix-shadow-md:  0 4px 16px rgba(0, 0, 0, .4);
        --aix-shadow-lg:  0 8px 32px rgba(0, 0, 0, .5);
    }

    body               { background-color: var(--aix-bg-base); color: var(--aix-text-base); }

    .auth-card,
    .dashboard-card,
    .stat-card         { background: var(--aix-bg-card); border-color: var(--aix-border); }

    .form-control,
    .form-select       {
        background:   var(--aix-bg-card);
        color:        var(--aix-text-base);
        border-color: var(--aix-border);
    }
    .form-control:focus,
    .form-select:focus {
        background:  var(--aix-bg-card);
        color:       var(--aix-text-base);
    }

    .table-aix thead th { background: #22262e; }
    .table-aix tbody tr:hover { background: rgba(255, 255, 255, .03); }

    .ip-badge          { background: #22262e; border-color: var(--aix-border); color: var(--aix-text-base); }

    .admin-tabs .nav-tabs   { border-color: var(--aix-border); }
    .admin-tabs .nav-link   { color: var(--aix-text-muted); }

    .footer            { background: var(--aix-bg-navbar); }

    /* Bootstrap overrides für Dark */
    .dropdown-menu     { background: #22262e; border-color: var(--aix-border); }
    .dropdown-item     { color: var(--aix-text-base); }
    .dropdown-item:hover { background: rgba(255, 255, 255, .07); }
    .dropdown-divider  { border-color: var(--aix-border); }
    .modal-content     { background: var(--aix-bg-card); border-color: var(--aix-border); }
    .modal-header,
    .modal-footer      { border-color: var(--aix-border); }
    .btn-close         { filter: invert(1); }
    .alert             { border: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive Anpassungen
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .auth-card {
        padding:       1.5rem 1.25rem;
        border-radius: var(--aix-radius-md);
    }
    .flash-container { right: .5rem; left: .5rem; width: auto; }
    .main-content   { padding-top: calc(var(--aix-navbar-h) + 1rem); }
}

/* ═══════════════════════════════════════════════════════════════
   16. Admin-Dashboard – Icon-Boxen, Chart-Elemente, Quicklinks
       (Ersatz für alle entfernten inline style="" Attribute)
   ═══════════════════════════════════════════════════════════════ */

/* ── Stat-Kacheln: große Icon-Box (52 × 52) ────────────────── */
.admin-stat-icon {
    width:          52px;
    height:         52px;
    border-radius:  var(--aix-radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
}
.admin-stat-icon--primary { background: rgba(13,110,253,.12); }
.admin-stat-icon--warning  { background: rgba(255,193,7,.12);  }
.admin-stat-icon--success  { background: rgba(25,135,84,.12);  }
.admin-stat-icon--purple   { background: rgba(111,66,193,.12); }

/* ── Schnellzugriff: kleine Icon-Box (44 × 44) ──────────────── */
.admin-ql-icon {
    width:          44px;
    height:         44px;
    border-radius:  var(--aix-radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
}
.admin-ql-icon--primary { background: rgba(13,110,253,.1); }
.admin-ql-icon--warning  { background: rgba(255,193,7,.1);  }
.admin-ql-icon--purple   { background: rgba(111,66,193,.1); }
.admin-ql-icon--info     { background: rgba(13,202,240,.1); }
.admin-ql-icon--success  { background: rgba(25,135,84,.1);  }
.admin-ql-icon--danger   { background: rgba(220,53,69,.1);  }

/* ── Chart-Legende Farbpunkte (12 × 12) ─────────────────────── */
.chart-dot {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border-radius: 3px;
    flex-shrink:   0;
    vertical-align: middle;
}
.chart-dot--success { background: rgba(25,135,84,.75);  }
.chart-dot--danger  { background: rgba(220,53,69,.65); }

/* ── Donut-Canvas Größenbegrenzung ──────────────────────────── */
.admin-donut-canvas {
    max-height: 210px;
    max-width:  210px;
}

/* ── Quicklink-Karten Hover ─────────────────────────────────── */
.admin-quicklink { transition: transform .15s ease, box-shadow .15s ease; }
.admin-quicklink:hover {
    transform:  translateY(-3px);
    box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.1) !important;
}

/* ── Akzentfarbe (lila, --aix-accent) ───────────────────────── */
.text-aix-accent { color: var(--aix-accent); }

/* ═══════════════════════════════════════════════════════════════
   17. Utility – Ersatz für verbleibende inline style="" Attribute
   ═══════════════════════════════════════════════════════════════ */

/* object-fit für Avatar-Bilder */
.obj-cover { object-fit: cover; }

/* Tabellen-Spaltenbreiten (auf <th> statt style="width:...") */
.th-w-50   { width:     50px; }
.th-w-150  { width:    150px; }
.th-w-160  { width:    160px; }
.th-mw-240 { min-width: 240px; }

/* Maximale Zellenbreite (auf <td> statt style="max-width:...") */
.td-mw-130 { max-width: 130px; }
.td-mw-200 { max-width: 200px; }
.td-mw-300 { max-width: 300px; }

/* Suchfeld-Breite (auf .input-group statt style="max-width:...") */
.input-mw-380 { max-width: 380px; }

/* Kleinste Schriftgröße (0.75 rem) */
.text-2xs { font-size: .75rem; }

/* ── TOTP / 2FA ──────────────────────────────────────────────── */
/* QR-Code Container – kein inline style (CSP style-src-attr: none) */
.totp-qr-wrap {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Canvas den qrcode.min.js erzeugt – zentrieren */
.totp-qr-wrap canvas,
.totp-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Farbige Top-Border für Karten (3px, kein inline style nötig) */
.card-border-top-3 { border-top-width: 3px !important; }

/* Scrollbare Listen mit max-height (kein inline style) */
.scroll-h-200 { max-height: 200px; overflow-y: auto; }

/* Schmale Tabellenspalte für Icons/Nummern */
.th-w-32  { width:  32px; }
.th-w-40  { width:  40px; }

/* Mini-Icon (Statuspunkt in AJAX-Tabellen) */
.icon-xs-mid { font-size: .5rem; vertical-align: middle; }

/* Schmales Zahleneingabefeld (z.B. pw_history_count) */
.input-w-75 { width: 75px; }

/* Admin-Notizen <details> in users.php */
.notes-summary { cursor: pointer; list-style: none; }
.notes-summary::-webkit-details-marker { display: none; }

/* ── Passwort-Stärke-Anzeige ─────────────────────────────────── */
.pw-strength-bar         { display: flex; gap: 3px; margin-top: 6px; }
.pw-strength-bar .pw-seg { flex: 1; height: 4px; border-radius: 2px;
                            background-color: #dee2e6;
                            transition: background-color .22s ease; }
.pw-seg.pw-lv1 { background-color: #dc3545; } /* sehr schwach – rot    */
.pw-seg.pw-lv2 { background-color: #fd7e14; } /* schwach     – orange  */
.pw-seg.pw-lv3 { background-color: #ffc107; } /* mittel      – gelb    */
.pw-seg.pw-lv4 { background-color: #0d6efd; } /* stark       – blau    */
.pw-seg.pw-lv5 { background-color: #198754; } /* sehr stark  – grün    */
.pw-strength-label { font-size: .72rem; min-height: 1rem; margin-top: 3px; color: #6c757d; }

/* Mobile: aufgeklapptes Burger-Menü bekommt Navbar-Hintergrund */
@media (max-width: 991.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background-color: var(--bs-dark);
        padding: 0.5rem 1rem;
        margin-top: 0.5rem;
        border-radius: 0 0 0.375rem 0.375rem;
    }
}


/* Schmaler Container (max. 900px) – z.B. Blog-Editor */
.container-narrow { max-width: 900px; }

/* Quill-Editor Mindesthöhe im Bearbeiten-Formular */
.quill-editor-container { min-height: 340px; }

/* Quill-Inhaltsanzeige: kein Extra-Padding aus ql-editor */
.ql-editor-reset { padding: 0; }

/* Blog Tag-Cloud Größenstufen (ersetzt inline font-size – CSP-konform) */
.tag-size-1 { font-size: 0.75rem; }
.tag-size-2 { font-size: 0.85rem; }
.tag-size-3 { font-size: 0.95rem; }
.tag-size-4 { font-size: 1.05rem; }
.tag-size-5 { font-size: 1.15rem; }

/* ── Blog Bild-Ausrichtung (CSP-konform, kein inline style) ───── */
/* Auf img (wird gespeichert) und Wrapper (visuelle Wirkung im Editor) */
.ql-editor img.img-left,
.ql-editor .img-resize-wrapper.img-left   { float: left;  margin: 0 1rem 0.5rem 0; display: inline-block; }
.ql-editor img.img-right,
.ql-editor .img-resize-wrapper.img-right  { float: right; margin: 0 0 0.5rem 1rem; display: inline-block; }
.ql-editor img.img-center,
.ql-editor .img-resize-wrapper.img-center { display: block !important; margin: 0.5rem auto; float: none; }
.ql-editor img.img-none,
.ql-editor .img-resize-wrapper.img-none   { float: none; margin: 0; display: inline-block; }

/* Selektiertes Bild im Editor hervorheben */
.ql-editor img.img-selected { outline: 2px solid #0d6efd; }

/* Resize-Wrapper & Handles */
.img-resize-wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
    max-width: 100%;   /* nie über Editor-Rand hinaus */
    overflow: visible; /* Handles müssen außerhalb sichtbar sein */
    vertical-align: middle;
}
.img-resize-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0d6efd;
    border: 1px solid #fff;
    border-radius: 2px;
    cursor: nwse-resize;
    z-index: 10;
}
.img-resize-nw { top: -5px;  left: -5px;  cursor: nw-resize; }
.img-resize-ne { top: -5px;  right: -5px; cursor: ne-resize; }
.img-resize-sw { bottom: -5px; left: -5px;  cursor: sw-resize; }
.img-resize-se { bottom: -5px; right: -5px; cursor: se-resize; }

/* Bild-Ausrichtung in der Frontansicht */
.blog-content img.img-left   { float: left;  margin: 0 1rem 0.5rem 0; }
.blog-content img.img-right  { float: right; margin: 0 0 0.5rem 1rem; }
.blog-content img.img-center { display: block; margin: 0.5rem auto; float: none; }
.blog-content::after         { content: ''; display: block; clear: both; }