/* app-nav.css
 * Gemeinsame, gruppierte Navigationsleiste für die RainDoc-Dashboards.
 * Wird von app-nav.js befüllt und sitzt im vorhandenen .navigation-Karten-Container.
 *
 * Aufbau:
 *   - Primär-Aktionen (Icon + Textlabel), auch auf Mobil sichtbar
 *   - "Mehr ▾"-Dropdown mit gruppierten Sekundär-Aktionen (Desktop)
 *   - Auf Mobil: ☰-Burger öffnet ein Panel, in dem Primär-Aktionen und
 *     Gruppen untereinander stehen. desktop-only-Einträge blendet
 *     mobile-guard.js weiterhin aus.
 */

/* Der Nav-Container muss über den folgenden Karten liegen, sonst verdeckt
 * deren backdrop-filter-Stacking-Context das überstehende "Mehr"-Dropdown. */
#appNavRoot {
    position: relative;
    z-index: 900;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Panel: enthält Primär-Items, Mehr-Dropdown und Abmelden */
.app-nav__panel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.app-nav__items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Ein einzelner Eintrag (Button oder Link) */
.app-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--rd-ink, #2c3e50);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.app-nav__item img {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
}

.app-nav__item:hover {
    background: #eef4fb;
    color: var(--rd-primary, #2980b9);
}

.app-nav__item.is-active {
    color: var(--rd-primary, #2980b9);
    border-bottom: 3px solid var(--rd-primary-2, #3498db);
    border-radius: 12px 12px 0 0;
    cursor: default;
}

.app-nav__item.is-active:hover {
    background: transparent;
}

.app-nav__item--danger {
    color: var(--rd-danger, #e74c3c);
}

.app-nav__item--danger:hover {
    background: #fdecea;
    color: var(--rd-danger-dark, #c0392b);
}

/* Mehr-Dropdown */
.app-nav__more {
    position: relative;
    margin-left: auto;
}

.app-nav__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 260px;
    background: var(--rd-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 8px;
    display: none;
    z-index: 1500;
}

.app-nav__more.is-open .app-nav__menu {
    display: block;
}

.app-nav__caret {
    font-size: 10px;
    margin-left: 2px;
}

.app-nav__group {
    padding: 4px 4px 8px;
}

.app-nav__group + .app-nav__group {
    border-top: 1px solid #eef0f2;
    margin-top: 4px;
}

.app-nav__group-title {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rd-muted, #95a5a6);
    padding: 6px 10px 4px;
    font-weight: 700;
}

.app-nav__menu .app-nav__item {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    border-radius: 8px;
    padding: 10px 12px;
}

/* Burger nur auf Mobil */
.app-nav__burger {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--rd-ink, #2c3e50);
    cursor: pointer;
    padding: 4px 10px;
    margin-left: auto;
}

/* ---- Mobil ---- */
@media (max-width: 768px) {
    .app-nav__burger {
        display: inline-flex;
    }

    .app-nav__panel {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        order: 3;
        gap: 4px;
        margin-top: 12px;
    }

    .app-nav.is-open .app-nav__panel {
        display: flex;
    }

    .app-nav__items {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
    }

    .app-nav__item {
        justify-content: flex-start;
        padding: 13px 14px;
        font-size: 16px;
    }

    .app-nav__item.is-active {
        border-bottom: none;
        border-radius: 12px;
        background: #eef4fb;
    }

    /* Auf Mobil kein Dropdown: Gruppen stehen offen im Panel */
    .app-nav__more {
        position: static;
        margin-left: 0;
    }

    .app-nav__more-btn {
        display: none;
    }

    .app-nav__menu {
        position: static;
        display: block;
        box-shadow: none;
        padding: 0;
        min-width: 0;
    }
}

@media print {
    .app-nav__burger,
    .app-nav__more,
    .app-nav__item--danger {
        display: none !important;
    }
}