/*
 * style.css – AixAuth Core Styles (strukturell, farblos)
 * Farben/Themes → content/themes/{theme}/assets/theme.css
 *
 * Struktur:
 *  1. CSS Custom Properties (Struktur-Tokens, keine Farben)
 *  2. Base / Reset-Ergänzungen
 *  3. Layout (Body, Main, Footer)
 *  4. Navbar (Struktur)
 *  5. Auth-Cards (Struktur)
 *  6. Formulare & Inputs (Struktur)
 *  7. Buttons & Badges (Struktur)
 *  8. Avatar
 *  9. Flash-Messages (Struktur)
 * 10. Login-History / Tabellen (Struktur)
 * 11. Dashboard-Widgets (Struktur)
 * 12. Admin-Panel (Struktur)
 * 13. Utility-Klassen
 * 14. Animationen
 * 15. Blog-Styles
 * 16. Admin-Dashboard Icons
 */

/* ═══════════════════════════════════════════════════════════════
   1. CSS Custom Properties – nur Struktur, keine Farben
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* 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;

    /* 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);
}

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

html {
    scroll-behavior: smooth;
}

body {
    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, #0d6efd);
    outline-offset: 2px;
}

a {
    text-decoration: none;
    transition:      color var(--aix-transition);
}
a:hover { 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;
}

/* ── Seiten-Kopfzeile (projektweit) ─────────────────────────────
   Gleicher Hintergrund wie .card, damit der Titel-Bereich nicht
   auf dem rohen Body-Hintergrund schwebt.                        */
.page-header {
    border-radius:    0.75rem;
    background-color: var(--bs-card-bg, #fff);
    
    box-shadow:       var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
    padding:          1rem 1.25rem;
    margin-bottom:    1.5rem !important;
}

/* ── Profil: Titel-Hintergrund ──────────────────────────────────*/
.profile-header {
    border-radius:    0.75rem;
    background-color: var(--bs-card-bg, #fff);
    
    box-shadow:       var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
    padding:          1rem 1.25rem;
    margin-bottom:    1.5rem;
}

/* ── Wetter-Modul: Tab-Bereich weiss hinterlegen ────────────────*/
.weather-tabs-wrap {
    border-radius:    0.75rem;
    background-color: var(--bs-card-bg, #fff);
    
    box-shadow:       var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
    padding:          1rem 1.25rem 0;
    margin-bottom:    1.5rem;
}
.weather-tabs-wrap .nav-tabs {
    border-bottom-color: var(--bs-border-color);
    margin-bottom: 0;
}

.footer {
    flex-shrink: 0;
    font-size:   .82rem;
    padding:     .9rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   4. Navbar (Struktur)
   ═══════════════════════════════════════════════════════════════ */
.navbar {
    height:   var(--aix-navbar-h);
    position: sticky;
    top:      0;
    z-index:  1030;
}

.navbar-brand {
    font-weight:    700;
    font-size:      1.15rem;
    letter-spacing: .02em;
}

.navbar-nav .nav-link {
    font-size:    .9rem;
    padding:      .4rem .75rem;
    border-radius: var(--aix-radius-sm);
    transition:   background var(--aix-transition), color var(--aix-transition);
}

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

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

.auth-card {
    border:        1px solid;
    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;
}

.auth-card__header {
    text-align:    center;
    margin-bottom: 1.75rem;
}
.auth-card__icon {
    font-size:     2.6rem;
    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;
    margin:    0;
}

/* Divider "oder" */
.auth-divider {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin:      1.25rem 0;
    font-size:   .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex:    1;
    height:  1px;
}

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

.form-control,
.form-select {
    border-radius: var(--aix-radius-sm);
    border-width:  1.5px;
    border-style:  solid;
    font-size:     .9rem;
    padding:       .55rem .9rem;
    transition:    border-color var(--aix-transition), box-shadow var(--aix-transition);
}

.form-control::placeholder,
.form-select::placeholder {
    opacity: 1;
}

/* 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;
    overflow:      hidden;
}

/* ═══════════════════════════════════════════════════════════════
   7. Buttons & Badges (Struktur)
   ═══════════════════════════════════════════════════════════════ */

/* 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;
}

/* ═══════════════════════════════════════════════════════════════
   8. Avatar
   ═══════════════════════════════════════════════════════════════ */
.avatar {
    width:         80px;
    height:        80px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid;
    display:       block;
}

/* ═══════════════════════════════════════════════════════════════
   9. Flash-Messages (Struktur)
   ═══════════════════════════════════════════════════════════════ */
.flash-container {
    position:   fixed;
    top:        calc(var(--aix-navbar-h) + .75rem);
    right:      1.25rem;
    z-index:    1080;
    width:      360px;
    max-width:  calc(100vw - 2.5rem);
}

.flash-message {
    border-radius: var(--aix-radius-md);
    box-shadow:    var(--aix-shadow-md);
    font-size:     .9rem;
    margin-bottom: .5rem;
    animation:     aix-fadein .25s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
   10. Login-History / Tabellen (Struktur)
   ═══════════════════════════════════════════════════════════════ */
.table-aix {
    font-size: .87rem;
}
.table-aix thead th {
    font-weight:   600;
    font-size:     .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom:  2px solid;
}

.ip-badge {
    font-size:     .78rem;
    font-family:   monospace;
    padding:       .15em .5em;
    border-radius: .3em;
    border:        1px solid;
}

/* ═══════════════════════════════════════════════════════════════
   11. Dashboard-Widgets (Struktur)
   ═══════════════════════════════════════════════════════════════ */
.stat-card {
    border-radius: var(--aix-radius-md);
    box-shadow:    var(--aix-shadow-sm);
    transition:    box-shadow var(--aix-transition);
    border:        1px solid;
}
.stat-card:hover {
    box-shadow: var(--aix-shadow-md);
}

/* ═══════════════════════════════════════════════════════════════
   12. Admin-Panel (Struktur)
   ═══════════════════════════════════════════════════════════════ */
.admin-tabs .nav-tabs {
    border-bottom: 1px solid;
    margin-bottom: 1.5rem;
}
.admin-tabs .nav-link {
    font-weight:   500;
    font-size:     .9rem;
    border-radius: var(--aix-radius-sm) var(--aix-radius-sm) 0 0;
    padding:       .6rem 1rem;
    transition:    color var(--aix-transition);
}
.admin-tabs .nav-link.active {
    font-weight:  600;
    border-bottom: none;
}

.admin-sidebar {
    font-size: .88rem;
}
.admin-sidebar .nav-link {
    padding:       .45rem .75rem;
    border-radius: var(--aix-radius-sm);
    font-size:     .88rem;
    transition:    background var(--aix-transition), color var(--aix-transition);
}

/* ═══════════════════════════════════════════════════════════════
   13. Utility-Klassen
   ═══════════════════════════════════════════════════════════════ */
.obj-cover { object-fit: cover; }

.th-w-50   { width:     50px; }
.th-w-150  { width:    150px; }
.th-w-160  { width:    160px; }
.th-mw-240 { min-width: 240px; }
.td-mw-130 { max-width: 130px; }
.td-mw-200 { max-width: 200px; }
.td-mw-300 { max-width: 300px; }
.input-mw-380 { max-width: 380px; }
.text-2xs  { font-size: .75rem; }
.th-w-32   { width:  32px; }
.th-w-40   { width:  40px; }
.icon-xs-mid { font-size: .5rem; vertical-align: middle; }
.input-w-75  { width: 75px; }
.container-narrow { max-width: 900px; }
.scroll-h-200 { max-height: 200px; overflow-y: auto; }
.card-border-top-3 { border-top-width: 3px !important; }

.notes-summary { cursor: pointer; list-style: none; }
.notes-summary::-webkit-details-marker { display: none; }

/* ── TOTP / 2FA ──────────────────────────────────────────────── */
.totp-qr-wrap {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.totp-qr-wrap canvas,
.totp-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

/* ═══════════════════════════════════════════════════════════════
   15. Blog-Styles
   ═══════════════════════════════════════════════════════════════ */
.quill-editor-container { min-height: 340px; }
.ql-editor-reset        { padding: 0; }

/* Blog Tag-Cloud Größenstufen */
.tag-size-1 { font-size: 0.65rem; }
.tag-size-2 { font-size: 0.72rem; }
.tag-size-3 { font-size: 0.78rem; }
.tag-size-4 { font-size: 0.84rem; }
.tag-size-5 { font-size: 0.90rem; }

/* Bild-Ausrichtung 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; }

/* 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; }
.blog-content iframe         { display: block; margin: 1rem auto; max-width: 100%; }

/* Blog Admin-Dropdown per Hover öffnen */
.blog-admin-dropdown .dropdown-toggle::after { display: none; }
.blog-admin-dropdown .dropdown-menu { min-width: 180px; top: 100%; bottom: auto; }

/* Resize-Wrapper & Handles */
.img-resize-wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
    max-width: 100%;
    overflow: visible;
    vertical-align: middle;
}
.img-resize-wrapper img { display: block; max-width: 100%; height: auto; }
.img-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    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; }

/* ═══════════════════════════════════════════════════════════════
   16. Admin-Dashboard Icons (Struktur)
   ═══════════════════════════════════════════════════════════════ */
.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-ql-icon {
    width:          44px;
    height:         44px;
    border-radius:  var(--aix-radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
}
.chart-dot {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border-radius: 3px;
    flex-shrink:   0;
    vertical-align: middle;
}
.admin-donut-canvas { max-height: 210px; max-width: 210px; }

.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;
}

/* Passwort-Stärke-Segmente */
.pw-strength-bar         { display: flex; gap: 3px; margin-top: 6px; }
.pw-strength-bar .pw-seg { flex: 1; height: 4px; border-radius: 2px;
                            transition: background-color .22s ease; }
.pw-strength-label { font-size: .72rem; min-height: 1rem; margin-top: 3px; }

/* Mobile Navbar */
@media (max-width: 991.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        padding:       0.5rem 1rem;
        margin-top:    0.5rem;
        border-radius: 0 0 0.375rem 0.375rem;

        /* Dropdown-Inhalt scrollbar machen, wenn er den Viewport übersteigt */
        max-height:    75vh;
        overflow-y:    auto;
        /* Scrollbar unauffällig halten */
        scrollbar-width: thin;
    }
}

/* Mobile Auth-Card */
@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); }
}