@CHARSET "UTF-8";
/*
 * xAdmin Modern Theme - Hauptnavigation
 *
 * Das Legacy-Markup (#navigationmenu.menu + div.submenu) bleibt
 * unveraendert; hier wird nur die Darstellung ersetzt.
 */

/* ------------------------------------------------------- Hauptnavigation
 *
 * Die erste Ebene steht als waagerechte Leiste unter der Topbar, ueber dem
 * Inhalt. Abweichung von AppSidebar.svelte aus tmo-admin: der xAdmin hat
 * rund 15 Hauptpunkte ohne Icons und breite Datagrids - eine Seitenleiste
 * nimmt dem Inhalt zu viel Breite.
 *
 * Das Element heisst weiterhin .x-sidebar, weil beide Layouts dasselbe
 * Markup rendern.
 */
body.xtheme-modern .x-sidebar {
    flex: 0 0 auto;
    width: auto;

    /* Bleibt beim Blaettern unter der Topbar stehen. */
    position: sticky;
    top: var(--x-topbar-h);
    z-index: 1029;

    /*
     * Dieselbe Flaeche wie die Kopfleiste. Der Inhalt darunter liegt auf
     * --x-bg - dadurch steht der ganze Navigationsblock sichtbar ab.
     */
    background: var(--tmo-surface);
    border-block-end: 1px solid var(--x-border);
    /*
     * Schliesst den Block ab, wenn es keine Kontextnavigation gibt. Liegt eine
     * darunter, verdeckt deren Flaeche den Schatten.
     */
    box-shadow: 0 2px 8px rgba(33, 40, 55, .06);
    color: var(--x-nav-text);
    padding: 3px 12px;
    overflow: visible;
}

body.xtheme-modern .x-sidebar .menu {
    min-width: 0;
    border: 0;
    color: inherit;
    font-family: var(--x-font);
    font-size: 13px;
}

body.xtheme-modern .x-sidebar .menu > ul {
    background: none;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

body.xtheme-modern .x-sidebar .menu > ul > li {
    float: none;
    padding: 0;
    position: relative;
}

/* .topbar-link aus SubNavTopBar.svelte - gleiche Sprache wie die Unterebene */
body.xtheme-modern .x-sidebar .menu > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 12px;
    margin: 0;
    /* Nach unten offen - der aktive Eintrag sitzt auf der Trennlinie auf. */
    border-radius: 6px 6px 0 0;
    line-height: 1.3;
    color: var(--tmo-strong);
    font-size: 13.5px;
    font-weight: 600;
    opacity: 1;
    text-align: left;
    text-shadow: none;
    background: none;
}

body.xtheme-modern .x-sidebar .menu > ul > li > a:hover {
    background: var(--x-accent-soft);
    color: var(--x-accent);
    opacity: 1;
}

/*
 * Der aktive Hauptpunkt traegt einen Balken auf der Trennlinie - die
 * Kontextnavigation darunter gehoert sichtbar zu ihm. Eine Fuellung waere zu
 * viel, weil die Ebene darunter dieselbe Sprache benutzt.
 *
 * Der Hintergrund wird ausdruecklich zurueckgesetzt, damit keine Regel aus
 * dem Bestand eine Fuellung stehenlaesst.
 */
body.xtheme-modern .x-sidebar .menu > ul > li > a.current {
    background: transparent;
    box-shadow: inset 0 -3px 0 var(--x-accent);
    color: var(--x-accent);
    font-weight: 700;
    opacity: 1;
}

body.xtheme-modern .x-sidebar .menu i.icon-nav {
    font-size: 11px;
    opacity: .7;
    color: inherit !important;
}

/*
 * tmo klappt Unterpunkte im Baum auf. Das Legacy-Markup arbeitet mit
 * Hover-Dropdowns - die bleiben, bekommen aber die Flaechensprache von tmo.
 *
 * Kein Abstand zum Eintrag: eine Luecke ohne Flaeche nimmt der Maus auf dem
 * Weg nach unten den Hover und das Menue klappt zu.
 */
body.xtheme-modern .x-sidebar .menu li ul {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    margin: 0;
    min-width: 220px;
    background: var(--tmo-surface);
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius);
    box-shadow: var(--x-shadow-pop);
    opacity: 1;
    filter: none;
    padding: 6px;
    z-index: 1035;
}

body.xtheme-modern .x-sidebar .menu li ul li {
    height: auto;

    /* Bezugspunkt fuer die dritte Ebene, die seitlich herausklappt. */
    position: relative;
}

body.xtheme-modern .x-sidebar .menu li ul li a,
body.xtheme-modern .x-sidebar .menu li ul a {
    background: none;
    background-image: none !important;
    border-radius: 6px;
    color: var(--x-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    opacity: .85;
    text-align: left;
}

body.xtheme-modern .x-sidebar .menu li ul li a:hover {
    background: var(--x-accent-soft);
    color: var(--x-accent);
    opacity: 1;
}

body.xtheme-modern .x-sidebar .menu li ul li a.current {
    color: var(--x-accent);
    font-weight: 700;
    opacity: 1;
}

/*
 * Die dritte Ebene klappt seitlich neben ihrem Eintrag auf - nach unten ist
 * die Spalte des Dropdowns schon belegt. Der Versatz nach oben gleicht den
 * Innenabstand des umgebenden Dropdowns aus.
 */
body.xtheme-modern .x-sidebar .menu li ul li ul {
    inset-inline-start: 100%;
    top: -6px;
    margin: 0;
}

/* ------------------------------------------------ Kontext-Navigation oben
 *
 * Die Ebenen 2 und 3 stehen als Leiste ueber dem Inhalt, nicht mehr in der
 * Seitenleiste. Vorbild ist SubNavTopBar.svelte aus tmo-admin.
 *
 * Das Markup kommt unveraendert aus navigation_subnav.phtml (div.submenu).
 */

/*
 * Die Kontextnavigation ist kein eigener Kasten mehr, sondern die untere
 * Haelfte des Navigationsblocks. Sie steht im selben Element wie die
 * Hauptnavigation (siehe layout.phtml) und bleibt damit zusammen mit ihr
 * stehen, wenn der Inhalt darunter laeuft.
 *
 * Die Linie oben trennt die beiden Ebenen, der Rand der Leiste schliesst den
 * Block gegen den Inhalt ab.
 */
body.xtheme-modern .x-subnav {
    display: flex;
    flex-direction: column;

    /* Bis an die Raender der Leiste, deren Innenabstand wird aufgehoben. */
    margin: 3px -12px -3px;
    padding: 3px 12px;

    background: transparent;
    border: 0;
    border-block-start: 1px solid var(--x-border);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Leere Leiste erzeugt keinen Kasten. */
body.xtheme-modern .x-subnav:empty {
    display: none;
}

body.xtheme-modern .x-subnav .submenu {
    height: auto;
    margin: 0;
    padding: 0;
    clear: none;
}

/* Die dritte Ebene setzt sich durch eine Linie von der zweiten ab. */
body.xtheme-modern .x-subnav .submenu + .submenu {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--x-border);
}

body.xtheme-modern .x-subnav .submenu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.xtheme-modern .x-subnav .submenu ul li {
    float: none;
    padding: 0;
}

/* .topbar-link */
body.xtheme-modern .x-subnav .submenu ul li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--tmo-secondary);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

body.xtheme-modern .x-subnav .submenu ul li a:hover {
    background: var(--x-accent-soft);
    color: var(--x-accent);
}

body.xtheme-modern .x-subnav .submenu ul li a.current {
    background: transparent;
    color: var(--x-accent);
    font-weight: 700;
}

/* Die dritte Ebene tritt gegenueber der zweiten zurueck. */
body.xtheme-modern .x-subnav .submenu + .submenu ul li a {
    font-size: 12.5px;
    padding: 4px 10px;
    color: var(--x-text-muted);
}

body.xtheme-modern .x-subnav .submenu + .submenu ul li a:hover,
body.xtheme-modern .x-subnav .submenu + .submenu ul li a.current {
    color: var(--x-accent);
}

/* --------------------------------------------- Dritte Ebene als Flyout
 *
 * Vorbild ist .topbar-item.has-sub aus SubNavTopBar.svelte: der Eintrag
 * traegt einen Pfeil, die Unterpunkte erscheinen beim Ueberfahren.
 */

body.xtheme-modern .x-subnav .submenu ul li.has-children {
    position: relative;
}

body.xtheme-modern .x-subnav .submenu ul li i.icon-nav {
    font-size: 10px;
    opacity: .6;
    margin-left: 2px;
}

/*
 * Der Abstand zwischen Eintrag und Flyout ist eine Luecke ohne Flaeche - die
 * Maus verliert dort den Hover und das Flyout klappt zu, bevor man es
 * erreicht.
 *
 * Der ueberbrueckende Streifen haengt am Eintrag, nicht am Flyout: das Flyout
 * hat einen eigenen Bildlauf, ein Kind ausserhalb seines Rahmens wuerde dort
 * nur eine Bildlaufleiste erzeugen und waere ausserdem abgeschnitten.
 *
 * Sichtbar ist der Streifen nur beim Ueberfahren. Sonst wuerde er Klicks auf
 * das abfangen, was direkt darunter liegt.
 */
body.xtheme-modern .x-subnav .submenu ul li.has-children::after {
    content: "";
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
}

body.xtheme-modern .x-subnav .submenu ul li.has-children:hover::after,
body.xtheme-modern .x-subnav .submenu ul li.has-children:focus-within::after {
    display: block;
}

body.xtheme-modern .x-subnav .submenu ul li ul {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    z-index: 1500;
    flex-direction: column;
    /* Breite nach dem laengsten Eintrag, damit nichts abgeschnitten wird. */
    width: max-content;
    min-width: 220px;
    max-width: 360px;
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    background: var(--tmo-surface);
    border: 1px solid var(--x-border);
    border-radius: 6px;
    box-shadow: var(--x-shadow-pop);
}

body.xtheme-modern .x-subnav .submenu ul li.has-children:hover > ul,
body.xtheme-modern .x-subnav .submenu ul li.has-children:focus-within > ul,
body.xtheme-modern .x-subnav .submenu ul li.has-children.is-open > ul {
    display: flex;
}

/* Der Pfeil ist die Schaltflaeche - er bekommt eine eigene Trefferflaeche. */
body.xtheme-modern .x-subnav .submenu ul li.has-children > a > i.icon-nav {
    padding: 4px 2px;
    margin: -4px -2px -4px 2px;
    cursor: pointer;
}

body.xtheme-modern .x-subnav .submenu ul li.has-children.is-open > a {
    background: var(--x-accent-soft);
    color: var(--x-accent);
}

body.xtheme-modern .x-subnav .submenu ul li.has-children.is-open > a > i.icon-nav {
    transform: rotate(180deg);
}

/*
 * Kein width: 100% - zusammen mit dem Innenabstand ergaebe das eine Breite
 * ueber den Rahmen hinaus und damit einen waagerechten Ueberhang. Ein
 * Blockelement fuellt die Zeile ohnehin.
 */
body.xtheme-modern .x-subnav .submenu ul li ul li a {
    display: block;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--x-text);
    white-space: nowrap;
}

/*
 * Solange das Flyout offen ist, bleibt der Eintrag darueber hervorgehoben -
 * sonst wirkt er beim Wechsel in die Liste wie abgewaehlt.
 */
body.xtheme-modern .x-subnav .submenu ul li.has-children:hover > a,
body.xtheme-modern .x-subnav .submenu ul li.has-children:focus-within > a {
    background: var(--x-accent-soft);
    color: var(--x-accent);
}