/*
 * Ignis2AB – finaler Navigationspatch
 *
 * Aktive und geöffnete Elemente: Weiß
 * Inaktive Elemente: Hellgrau
 * Geplante Elemente: Gedämpftes Grau
 * Flyout: Dunkelblau
 */

:root {
    --ignis-nav-bg: #0f4665;
    --ignis-nav-bg-deep: #0b3853;
    --ignis-nav-bg-hover: rgb(255 255 255 / 8%);
    --ignis-nav-bg-active: rgb(255 255 255 / 12%);

    --ignis-nav-text: #ffffff;
    --ignis-nav-text-muted: #c3d0d8;
    --ignis-nav-text-planned: #9eb1bc;

    --ignis-nav-border: rgb(255 255 255 / 15%);
    --ignis-nav-border-strong: rgb(255 255 255 / 25%);
    --ignis-nav-accent: #f05a36;
}

/* ======================================================
   SIDEBAR
   ====================================================== */

.app-rail {
    color: var(--ignis-nav-text) !important;

    background:
        linear-gradient(
            180deg,
            #0b354f 0%,
            #105873 100%
        ) !important;
}

.app-rail .rail-brand,
.app-rail .rail-brand-name,
.app-rail .rail-brand-mark {
    color: var(--ignis-nav-text) !important;
}

/*
 * Inaktive Hauptmenüs:
 * leicht grau, aber gut lesbar.
 */
.app-rail .rail-item {
    color: var(--ignis-nav-text-muted) !important;
    opacity: 1 !important;
}

.app-rail .rail-item .rail-label,
.app-rail .rail-item .rail-icon,
.app-rail .rail-item .navigation-icon {
    color: inherit !important;
    fill: currentColor !important;
}

.app-rail .rail-item:hover,
.app-rail .rail-item:focus-visible {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg-hover) !important;
    outline: none !important;
}

/*
 * Aktuell aufgerufene Seite.
 */
.app-rail .rail-item.is-active {
    color: var(--ignis-nav-text) !important;
    background: #1688b5 !important;
}

/*
 * Aktuell geöffnetes Flyout-Modul.
 */
.app-rail .rail-item.is-flyout-open {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-accent) !important;
}

/*
 * Aktive Seite wird dezent zurückgenommen,
 * solange ein anderes Flyout geöffnet ist.
 */
body.navigation-flyout-open
.app-rail
.rail-item.is-active:not(.is-flyout-open) {
    color: var(--ignis-nav-text-muted) !important;
    background: rgb(255 255 255 / 5%) !important;
}

/*
 * Geplante Hauptmodule.
 */
.app-rail .rail-item.is-planned {
    color: var(--ignis-nav-text-planned) !important;
    opacity: 1 !important;
}

.app-rail .rail-item.is-planned:hover,
.app-rail .rail-item.is-planned:focus-visible,
.app-rail .rail-item.is-planned.is-flyout-open {
    color: var(--ignis-nav-text) !important;
}

.app-rail .rail-planned-dot {
    border-color: currentColor !important;
}

.app-rail .rail-badge {
    color: #fff !important;
    background: var(--ignis-nav-accent) !important;
}

/* ======================================================
   FLYOUT-ZUSTAND
   ====================================================== */

.module-flyout {
    display: block !important;

    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg) !important;

    border-color: var(--ignis-nav-border) !important;
}

/*
 * Geschlossen.
 */
.module-flyout:not(.is-open) {
    transform:
        translateX(-16px)
        scale(0.985) !important;

    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/*
 * Geöffnet.
 *
 * Unterstützt:
 * - .module-flyout.is-open
 * - .ignis-shell.flyout-open
 */
.module-flyout.is-open,
.ignis-shell.flyout-open .module-flyout {
    transform:
        translateX(0)
        scale(1) !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ======================================================
   FLYOUT-KOPF
   ====================================================== */

.module-flyout .flyout-header {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg-deep) !important;

    border-bottom:
        1px solid var(--ignis-nav-border) !important;
}

.module-flyout .flyout-heading,
.module-flyout .flyout-heading *,
.module-flyout .flyout-header > div,
.module-flyout .flyout-header > div * {
    color: var(--ignis-nav-text) !important;
}

.module-flyout .flyout-eyebrow {
    color: var(--ignis-nav-text-muted) !important;
}

.module-flyout .flyout-header h2,
.module-flyout [data-flyout-title] {
    color: var(--ignis-nav-text) !important;
}

.module-flyout .flyout-close,
.module-flyout .flyout-back {
    color: var(--ignis-nav-text) !important;
}

.module-flyout .flyout-close {
    border-color: var(--ignis-nav-border) !important;
    background: transparent !important;
}

.module-flyout .flyout-close:hover,
.module-flyout .flyout-close:focus-visible,
.module-flyout .flyout-back:hover,
.module-flyout .flyout-back:focus-visible {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg-hover) !important;

    border-color:
        var(--ignis-nav-border-strong) !important;

    outline: none !important;
}

/* ======================================================
   FLYOUT-INHALT
   ====================================================== */

.module-flyout .flyout-content,
.module-flyout .flyout-panel,
.module-flyout .flyout-column {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg) !important;
}

.module-flyout .flyout-column {
    border-color: var(--ignis-nav-border) !important;
}

/*
 * Spaltenüberschriften.
 */
.module-flyout .flyout-column-header h3 {
    color: var(--ignis-nav-text) !important;
}

.module-flyout .flyout-column-header p {
    color: var(--ignis-nav-text-muted) !important;
}

/*
 * Alle strong-Elemente im Menü werden weiß.
 */
.module-flyout strong,
.module-flyout b,
.module-flyout .flyout-link-content strong,
.module-flyout .flyout-column strong,
.module-flyout .flyout-module-notice strong {
    color: var(--ignis-nav-text) !important;
}

/* ======================================================
   NORMALE MENÜPUNKTE
   ====================================================== */

.module-flyout .flyout-link {
    color: var(--ignis-nav-text) !important;
    background: transparent !important;

    border-color: transparent !important;
    opacity: 1 !important;
}

.module-flyout .flyout-link-content {
    color: inherit !important;
}

.module-flyout .flyout-link-content strong {
    color: var(--ignis-nav-text) !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.module-flyout .flyout-link-content small {
    color: var(--ignis-nav-text-muted) !important;
}

.module-flyout a.flyout-link:hover,
.module-flyout a.flyout-link:focus-visible {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg-hover) !important;

    border-color:
        var(--ignis-nav-border) !important;

    outline: none !important;
}

.module-flyout .flyout-link.is-active {
    color: var(--ignis-nav-text) !important;
    background: var(--ignis-nav-bg-active) !important;

    border-color:
        var(--ignis-nav-border-strong) !important;
}

/* ======================================================
   GEPLANTE / INAKTIVE MENÜPUNKTE
   ====================================================== */

.module-flyout .flyout-link.is-planned {
    color: var(--ignis-nav-text-muted) !important;

    background:
        rgb(255 255 255 / 4%) !important;

    border-color:
        rgb(255 255 255 / 10%) !important;

    opacity: 1 !important;
}

/*
 * Geplante Hauptbezeichnung:
 * leicht grau statt rein weiß.
 */
.module-flyout
.flyout-link.is-planned
.flyout-link-content strong {
    color: #dce5ea !important;
}

/*
 * Beschreibung geplanter Einträge:
 * etwas stärker gedämpft.
 */
.module-flyout
.flyout-link.is-planned
.flyout-link-content small {
    color: var(--ignis-nav-text-planned) !important;
}

.module-flyout .flyout-link-badge {
    color: #dce5ea !important;

    background:
        rgb(255 255 255 / 6%) !important;

    border-color:
        rgb(255 255 255 / 22%) !important;
}

/* ======================================================
   ICONS UND ZÄHLER
   ====================================================== */

.module-flyout .flyout-link-icon {
    color: var(--ignis-nav-accent) !important;
}

.module-flyout
.flyout-link-icon
.navigation-icon {
    color: inherit !important;
    fill: currentColor !important;
}

.module-flyout .flyout-link-counter {
    color: #fff !important;
    background: var(--ignis-nav-accent) !important;
}

/* ======================================================
   MODULHINWEIS
   ====================================================== */

.module-flyout .flyout-module-notice {
    color: var(--ignis-nav-text-muted) !important;

    background:
        rgb(255 255 255 / 7%) !important;

    border-color:
        var(--ignis-nav-border) !important;
}

.module-flyout .flyout-module-notice strong {
    color: var(--ignis-nav-text) !important;
}

.module-flyout
.flyout-module-notice
strong::before {
    border-color: var(--ignis-nav-accent) !important;
}

/* ======================================================
   DESKTOP
   ====================================================== */

@media (min-width: 901px) {
    /*
     * Kompaktes Flyout statt voller Seitenhöhe.
     */
    .module-flyout {
        position: fixed !important;

        top:
            calc(
                var(--shell-topbar-height, 62px)
                + 10px
            ) !important;

        right: auto !important;
        bottom: auto !important;

        left:
            calc(
                var(--shell-rail-width, 134px)
                + 12px
            ) !important;

        width:
            min(
                960px,
                calc(
                    100vw
                    - var(--shell-rail-width, 134px)
                    - 36px
                )
            ) !important;

        height: auto !important;
        min-height: 0 !important;

        max-height:
            calc(
                100vh
                - var(--shell-topbar-height, 62px)
                - 24px
            ) !important;

        overflow: hidden !important;

        border:
            1px solid var(--ignis-nav-border) !important;

        border-radius: 8px !important;

        box-shadow:
            0 18px 48px rgb(7 27 41 / 34%) !important;

        transform-origin: top left !important;
    }

    .module-flyout .flyout-header {
        min-height: 74px !important;
        padding: 13px 18px !important;
    }

    .module-flyout .flyout-content {
        max-height:
            calc(
                100vh
                - var(--shell-topbar-height, 62px)
                - 100px
            ) !important;

        overflow: auto !important;
    }

    .module-flyout .flyout-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(245px, 1fr)
            ) !important;
    }

    .module-flyout .flyout-column {
        min-width: 0 !important;
        padding: 18px !important;

        border-right:
            1px solid var(--ignis-nav-border) !important;

        border-bottom: 0 !important;
    }

    .module-flyout .flyout-column:last-child {
        border-right: 0 !important;
    }

    .module-flyout .flyout-link {
        grid-template-columns:
            28px minmax(0, 1fr) auto !important;

        min-height: 54px !important;
    }

    .module-flyout .flyout-back {
        display: none !important;
    }
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 900px) {
    .module-flyout {
        color: var(--ignis-nav-text) !important;
        background: var(--ignis-nav-bg) !important;
    }

    .module-flyout:not(.is-open) {
        transform: translateX(102%) !important;
    }

    .module-flyout.is-open {
        transform: translateX(0) !important;
    }

    .module-flyout .flyout-header {
        color: var(--ignis-nav-text) !important;
        background: var(--ignis-nav-bg-deep) !important;
    }

    .module-flyout .flyout-content,
    .module-flyout .flyout-panel,
    .module-flyout .flyout-column {
        color: var(--ignis-nav-text) !important;
        background: var(--ignis-nav-bg) !important;
    }

    .module-flyout .flyout-column {
        border-bottom:
            1px solid var(--ignis-nav-border) !important;
    }

    .module-flyout .flyout-link-content strong {
        color: var(--ignis-nav-text) !important;
        white-space: normal !important;
    }

    .module-flyout .flyout-back {
        color: var(--ignis-nav-text) !important;
    }
}

/* ======================================================
   REDUZIERTE ANIMATIONEN
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
    .module-flyout,
    .app-rail,
    .navigation-backdrop {
        transition: none !important;
    }
}