/* App-Rahmen (MainLayout, Components/Shell) nach Brand Kit web-app-ui.md §2 und Bedienkonzept Abschnitt 3.
 * Topbar 56 px und Seitenleiste in Waldgrün (in beiden Themes gleich), Inhalt auf der hellen Fläche.
 * Breiten: ab 1200 px Seitenleiste 240 px; 768–1199 px Symbolleiste 64 px, klappt als Überlagerung aus;
 * unter 768 px Schublade. Nur Tokens, keine Hex-Werte.
 */

:root {
    --nx-shell-topbar-h: 56px;
    --nx-shell-sidebar-w: 240px;
    --nx-shell-rail-w: 64px;
    --nx-shell-on-green: var(--nx-green-100);
    --nx-shell-on-green-hover: color-mix(in srgb, var(--nx-white) 10%, transparent);
}

.nx-skip {
    position: absolute;
    left: var(--nx-space-4);
    top: calc(-1 * var(--nx-space-16));
    z-index: 2000;
    padding: var(--nx-space-2) var(--nx-space-4);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-accent);
    color: var(--nx-text-on-yellow);
    font-weight: var(--nx-weight-bold);
}

.nx-skip:focus { top: var(--nx-space-2); }

.nx-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* ---------------------------------------------------------------- Topbar */

.nx-topbar {
    position: relative;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--nx-space-4);
    height: var(--nx-shell-topbar-h);
    flex-shrink: 0;
    padding: 0 var(--nx-space-4) 0 var(--nx-space-5);
    background: var(--nx-forest-green);
    color: var(--nx-text-on-dark);
    border-bottom: var(--nx-border-w) solid var(--nx-green-700);
}

.nx-topbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--nx-tap-min);
    height: var(--nx-tap-min);
    margin-left: calc(-1 * var(--nx-space-2));
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-on-dark);
    cursor: pointer;
}

.nx-topbar__menu:hover { background: var(--nx-shell-on-green-hover); }

.nx-topbar__brand { display: flex; align-items: center; flex-shrink: 0; }
.nx-topbar__brand img { display: block; height: 26px; width: auto; }

.nx-topbar__divider { width: var(--nx-border-w); height: 24px; background: var(--nx-green-300); }

.nx-topbar__tenant {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--nx-text-small);
    color: var(--nx-shell-on-green);
}

.nx-topbar__spacer { flex-grow: 1; }

.nx-topbar .nx-btn--tertiary { color: var(--nx-text-on-dark); font-weight: var(--nx-weight-regular); }
.nx-topbar .nx-btn--tertiary:hover, .nx-topbar .nx-btn--tertiary:active { background: var(--nx-shell-on-green-hover); }
.nx-topbar__user .nx-btn { padding: 0 var(--nx-space-2); gap: var(--nx-space-2); }
.nx-topbar__user .nx-btn__label { display: inline-flex; align-items: center; gap: var(--nx-space-2); }

.nx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-accent);
    color: var(--nx-text-on-yellow);
    font-size: var(--nx-text-micro);
    font-weight: var(--nx-weight-bold);
}

.nx-topbar__user-name { font-size: var(--nx-text-small); }

/* Auswahl der Geschäftseinheit (Modul Rechnungswesen, TopbarItem): wie das Benutzermenü, Name gekürzt. */
.nx-topbar__unit { min-width: 0; }
.nx-topbar__unit .nx-btn { padding: 0 var(--nx-space-2); gap: var(--nx-space-1); max-width: 16rem; }
/* Mit Suche (NCNXDASH-104): feste Breite, auf schmalen Bildschirmen schmaler. */
.nx-topbar__unit--search { width: 16rem; max-width: 40vw; }
.nx-topbar__unit--search .nx-combobox__trigger {
    height: 36px;
    border-color: transparent;
    background: transparent;
    color: var(--nx-text-on-dark);
    font-size: var(--nx-text-small);
}
.nx-topbar__unit--search .nx-combobox__trigger:hover { background: var(--nx-shell-on-green-hover); }
.nx-topbar__unit--search .nx-combobox__chevron, .nx-topbar__unit--search .nx-combobox__clear { color: var(--nx-text-on-dark); }
.nx-topbar__unit--search .nx-combobox__clear:hover { background: var(--nx-shell-on-green-hover); color: var(--nx-text-on-dark); }
.nx-topbar__unit .nx-btn__label { display: inline-flex; align-items: center; gap: var(--nx-space-1); min-width: 0; }
.nx-topbar__unit-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--nx-text-small);
}

/* ---------------------------------------------------------------- Rahmen und Inhalt */

.nx-shell__body { position: relative; display: flex; flex: 1; min-height: 0; }

.nx-shell__main {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: var(--nx-space-6) var(--nx-space-8);
    background: var(--nx-bg-subtle);
    box-sizing: border-box;
}

.nx-shell__main:focus { outline: none; }

.nx-page { height: 100%; box-sizing: border-box; }
.nx-page--narrow { height: auto; max-width: 40rem; margin: var(--nx-space-10) auto 0; }

.nx-page__header { display: flex; flex-direction: column; gap: var(--nx-space-1); margin-bottom: var(--nx-space-6); }
.nx-page__title { margin: 0; font-size: var(--nx-text-h2); }
.nx-page__subtitle, .nx-page__meta { margin: 0; font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-page__meta { margin-top: var(--nx-space-4); text-align: center; }

.nx-shell__backdrop { display: none; }

/* ---------------------------------------------------------------- Seitenleiste */

.nx-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nx-space-4);
    width: var(--nx-shell-sidebar-w);
    flex-shrink: 0;
    box-sizing: border-box;
    padding: var(--nx-space-3) 0;
    overflow-y: auto;
    background: var(--nx-forest-green);
    color: var(--nx-shell-on-green);
    border-right: var(--nx-border-w) solid var(--nx-green-700);
}

.nx-sidebar__area { display: flex; flex-direction: column; gap: 2px; }
.nx-sidebar__area--footer { padding-top: var(--nx-space-2); border-top: var(--nx-border-w) solid var(--nx-green-700); }

.nx-nav__link,
.nx-nav__header {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    width: 100%;
    box-sizing: border-box;
    min-height: var(--nx-control-h);
    padding: 0 var(--nx-space-4) 0 calc(var(--nx-space-4) + 2px);
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--nx-shell-on-green);
    font-family: var(--nx-font-web);
    font-size: 0.9375rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.nx-nav__link:hover, .nx-nav__header:hover { background: var(--nx-shell-on-green-hover); color: var(--nx-text-on-dark); }

/* Aktiv: gelbe Kante und fette Schrift, nicht nur Farbe (Kit). */
.nx-nav__link.is-active {
    border-left-color: var(--nx-accent);
    background: var(--nx-green-700);
    color: var(--nx-text-on-dark);
    font-weight: var(--nx-weight-bold);
}

.nx-nav__section.is-current > .nx-nav__header { color: var(--nx-text-on-dark); font-weight: var(--nx-weight-semibold); }

.nx-nav__text { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-nav__chevron { opacity: .8; }

.nx-nav__link--sub {
    min-height: 36px;
    padding-left: calc(var(--nx-space-12) + 2px);
    font-size: var(--nx-text-small);
}

.nx-nav__count {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--nx-space-2);
    box-sizing: border-box;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-green-700);
    color: var(--nx-text-on-dark);
    font-size: var(--nx-text-micro);
    font-weight: var(--nx-weight-semibold);
    line-height: 20px;
    text-align: center;
}

.nx-nav__link.is-active .nx-nav__count { background: var(--nx-accent); color: var(--nx-text-on-yellow); }

.nx-nav__group {
    padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-1) var(--nx-space-12);
    font-size: 0.6875rem;
    font-weight: var(--nx-weight-bold);
    letter-spacing: var(--nx-tracking-caps);
    text-transform: uppercase;
    color: var(--nx-shell-on-green);
}

.nx-nav__empty, .nx-nav__loading, .nx-nav__search {
    margin: 0;
    padding: var(--nx-space-2) var(--nx-space-4) var(--nx-space-2) var(--nx-space-12);
    font-size: var(--nx-text-small);
    color: var(--nx-shell-on-green);
}

.nx-nav__loading .nx-skeleton__shape { background: var(--nx-green-700); }
.nx-nav__search .nx-input { height: var(--nx-control-h-sm); font-size: var(--nx-text-small); }

/* ---------------------------------------------------------------- Übersicht */

.nx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--nx-space-4); }

.nx-tile {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    padding: var(--nx-space-4) var(--nx-space-5);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    text-decoration: none;
}

.nx-tile:hover { border-color: var(--nx-border-strong); color: var(--nx-text); background: color-mix(in srgb, var(--nx-text) 3%, var(--nx-surface)); }
.nx-tile__head { display: flex; align-items: center; gap: var(--nx-space-3); color: var(--nx-emphasis); }
.nx-tile__title { flex-grow: 1; font-weight: var(--nx-weight-semibold); color: var(--nx-text); }
.nx-tile__chevron { color: var(--nx-text-muted); }
.nx-tile__text { font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-tile__value { display: flex; align-items: center; gap: var(--nx-space-2); min-height: 1.5rem; }

/* ---------------------------------------------------------------- Anmeldung */

.nx-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: var(--nx-space-4);
    background: var(--nx-bg-subtle);
}

.nx-login__card {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    width: min(24rem, 100%);
    box-sizing: border-box;
    padding: var(--nx-space-8) var(--nx-space-6);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm);
}

.nx-login__logo { width: 180px; height: auto; margin-bottom: var(--nx-space-4); }
.nx-login__title { margin: 0; font-size: var(--nx-text-h3); }
.nx-login__tenant { margin: 0 0 var(--nx-space-4); color: var(--nx-text-muted); }
.nx-login__form { display: flex; flex-direction: column; gap: var(--nx-space-4); }
.nx-login__submit { width: 100%; }
.nx-login .validation-message { color: var(--nx-error); }
.nx-login .nx-input.invalid:not(:focus-visible) { outline: none; }

.nx-login__error {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3);
    border: var(--nx-border-w) solid var(--nx-error-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-error-fill);
    color: var(--nx-text-on-status-fill);
    font-size: var(--nx-text-small);
}

/* ---------------------------------------------------------------- Symbolleiste 768–1199 px */

@media (max-width: 1199px) {
    .nx-topbar__menu { display: inline-flex; }

    .nx-sidebar { width: var(--nx-shell-rail-w); }
    .nx-sidebar .nx-nav__text,
    .nx-sidebar .nx-nav__chevron,
    .nx-sidebar .nx-nav__count,
    .nx-sidebar .nx-nav__entries { display: none; }
    .nx-sidebar .nx-nav__link, .nx-sidebar .nx-nav__header { justify-content: center; padding: 0; }

    /* Aufgeklappt als Überlagerung über dem Inhalt. */
    .nx-shell--nav-open .nx-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 800;
        width: var(--nx-shell-sidebar-w);
        box-shadow: var(--nx-shadow-lg);
    }
    .nx-shell--nav-open .nx-sidebar .nx-nav__text,
    .nx-shell--nav-open .nx-sidebar .nx-nav__chevron,
    .nx-shell--nav-open .nx-sidebar .nx-nav__count { display: inline; }
    .nx-shell--nav-open .nx-sidebar .nx-nav__entries:not([hidden]) { display: block; }
    .nx-shell--nav-open .nx-sidebar .nx-nav__link,
    .nx-shell--nav-open .nx-sidebar .nx-nav__header { justify-content: flex-start; padding: 0 var(--nx-space-4) 0 calc(var(--nx-space-4) + 2px); }
    .nx-shell--nav-open .nx-sidebar .nx-nav__link--sub { padding-left: calc(var(--nx-space-12) + 2px); }
    .nx-shell--nav-open .nx-shell__main { margin-left: var(--nx-shell-rail-w); }

    .nx-shell--nav-open .nx-shell__backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 700;
        background: color-mix(in srgb, var(--nx-black) 25%, transparent);
    }
}

/* ---------------------------------------------------------------- Schublade unter 768 px */

@media (max-width: 767px) {
    .nx-topbar { gap: var(--nx-space-3); padding: 0 var(--nx-space-2) 0 var(--nx-space-4); }
    .nx-topbar__divider, .nx-topbar__tenant, .nx-topbar__user-name { display: none; }

    .nx-sidebar { display: none; }
    .nx-shell--nav-open .nx-sidebar {
        display: flex;
        position: fixed;
        top: var(--nx-shell-topbar-h);
        width: min(18rem, 85vw);
    }
    .nx-shell--nav-open .nx-shell__main { margin-left: 0; }
    .nx-shell--nav-open .nx-shell__backdrop { position: fixed; top: var(--nx-shell-topbar-h); background: color-mix(in srgb, var(--nx-black) 45%, transparent); }

    .nx-shell__main { padding: var(--nx-space-4); }
}

@media (prefers-reduced-motion: no-preference) {
    .nx-sidebar { transition: width var(--nx-dur) var(--nx-ease); }
}