/* ============================================================
   Einstellungen (#settingsView) — zentrale View statt Modal.
   Liegt als data-view-panel="settings" innerhalb der .shell-content
   und wird wie portfolio/config über die Topbar (Zahnrad) aktiviert.
   Sticky-Sub-Nav (zwei Gruppen) + gruppierte Sektionskarten.
   Alle Regeln sind auf #settingsView gescopt.
   ============================================================ */

/* View-Container: zentriert, angenehme Lesebreite (analog config-detail) */
#settingsView {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
}

/* Shell wird zum zweispaltigen Layout: Nav | Sektionen */
#settingsView .settings-shell {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 0;
}

/* ── Sticky-Sub-Nav (links) ─────────────────────────────── */
.settings-nav {
    flex: 0 0 200px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.settings-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-group-title {
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.settings-nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-nav-link i {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.settings-nav-link:hover {
    background: var(--gray-100);
    color: var(--dark);
}

.settings-nav-link:hover i {
    color: var(--dark);
}

.settings-nav-link.active {
    background: var(--primary-lighter);
    color: var(--primary);
    border-color: transparent;
}

.settings-nav-link.active i {
    color: var(--primary);
}

.settings-nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-lighter);
}

/* ── Sektionen-Spalte (scrollt mit der Seite) ───────────── */
.settings-panes {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Gruppen-Trennlabel über den Sektionen ("Organisation"/"Persönlich") */
.settings-group-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.settings-group-label:not(:first-child) {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

/* Karten: ruhig, hairline, leicht gefüllt.
   scroll-margin-top = Höhe der sticky Topbar, damit der Anker-Sprung
   die Sektion-Überschrift nicht darunter verschwinden lässt. */
#settingsView .settings-section {
    scroll-margin-top: 24px;
    margin-bottom: 0;
}

/* ── Untergeordnete Blöcke innerhalb zusammengelegter Sektionen ── */
.settings-subblock {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

.settings-subblock:empty {
    display: none;
}

.settings-subblock-title {
    margin: 0 0 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-subblock-title i {
    color: var(--primary);
    font-size: 0.8rem;
}

.settings-subblock-meta {
    margin: 0 0 var(--spacing-md);
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* ── Gefahrenzone ───────────────────────────────────────── */
/* Bearbeiten-Bereich der Organisation (erst nach Klick auf den Stift) */
.settings-org-edit {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--gray-200);
}
.settings-org-edit[hidden] { display: none; }
#orgEditToggle.active {
    background: var(--primary-lighter);
    color: var(--primary);
    border-color: var(--primary-lighter);
}

.settings-account-user {
    margin: 0 0 var(--spacing-md);
    font-size: 0.9rem;
    color: var(--gray-600);
}
.settings-account-user strong { color: var(--dark); font-weight: 600; }

.settings-danger-zone {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid rgba(185, 28, 28, 0.28);
    border-radius: var(--radius-md);
    background: rgba(185, 28, 28, 0.04);
}

[data-theme="dark"] .settings-danger-zone {
    border-color: rgba(252, 165, 165, 0.3);
    background: rgba(252, 165, 165, 0.06);
}

.settings-danger-title {
    margin: 0 0 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .settings-danger-title {
    color: #fca5a5;
}

.settings-danger-meta {
    margin: 0 0 var(--spacing-md);
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.settings-danger-zone .org-deletion-banner {
    margin-top: var(--spacing-md);
}

/* ── Desktop: zweispaltige View (sticky Nav links, Sektionen scrollen mit) ── */
@media (min-width: 769px) {
    /* Linke Spalte bleibt sichtbar; klebt am oberen Rand des shell-content-
       Scrolls (top:0 aus der Basisregel). Die Sektionen scrollen mit der Seite. */
    #settingsView .settings-nav {
        top: var(--spacing-sm);
    }
    /* Sektionen-Spalte braucht hier keinen eigenen Overflow mehr. */
    #settingsView .settings-panes {
        padding: 0 0 0 var(--spacing-2xl);
    }
}

/* ── Mobile: einspaltig, ruhige horizontale Sticky-Nav unter der Topbar ── */
@media (max-width: 768px) {
    #settingsView {
        padding: var(--spacing-md);
        max-width: 100%;
        overflow-x: clip; /* kein horizontaler Page-Overflow (schwarzer Rand rechts) */
    }

    #settingsView .settings-shell {
        flex-direction: column;
        min-width: 0;
    }
    #settingsView .settings-section,
    #settingsView .settings-panes { min-width: 0; }
    /* Strip-Nav: links/rechts etwas Luft, damit erstes/letztes Item nicht klebt */
    #settingsView .settings-nav { padding-left: 2px; padding-right: 2px; }

    /* Anker-Sprung: Platz für die sticky horizontale Nav-Leiste lassen */
    #settingsView .settings-section { scroll-margin-top: 64px; }

    /* Sub-Nav wird zur horizontalen, sticky Scroll-Leiste oben */
    #settingsView .settings-nav {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 4;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
        padding: 10px 0;
        border-right: 0;
        border-bottom: 1px solid var(--gray-200);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: var(--white);
    }

    [data-theme="dark"] #settingsView .settings-nav { background: var(--dark); }

    #settingsView .settings-nav::-webkit-scrollbar {
        display: none;
    }

    #settingsView .settings-nav-group {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }

    /* Gruppentitel als Mini-Label in der Strip-Leiste */
    #settingsView .settings-nav-group-title {
        margin: 0;
        padding: 0 4px 0 0;
        white-space: nowrap;
    }

    #settingsView .settings-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 12px;
    }

    /* einspaltige Sektionen, volle Breite */
    #settingsView .settings-panes {
        padding: var(--spacing-md) 0 0;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    /* Icons in der Strip-Nav reichen aus; Labels sparen Platz */
    #settingsView .settings-nav-link span {
        display: none;
    }

    #settingsView .settings-nav-link i {
        font-size: 0.95rem;
    }
}

/* Org-Switcher in den Einstellungen (aus der ehemaligen Topbar hierher verschoben). */
.settings-org-switch {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--spacing-md);
}
.settings-org-switch-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
}
/* Kompaktes Select in App-Optik. */
.settings-org-select {
    align-self: flex-start;
    min-width: 240px;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--dark);
    font-size: 0.9rem;
    cursor: pointer;
}
.settings-org-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-lighter);
}
.settings-org-select:disabled { cursor: default; opacity: 0.7; }
[data-theme="dark"] .settings-org-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--white);
}