@CHARSET "UTF-8";
/*
 * xAdmin Modern Theme - Shell (Topbar, Sidebar, Content, Footer)
 *
 * Bildet die Shell von tmo-admin nach (AdminShell.svelte, AppHeader.svelte,
 * AppSidebar.svelte, AppFooter.svelte) - auf dem vorhandenen Navigations-
 * Markup des xAdmin (#navigationmenu.menu + div.submenu), das unveraendert
 * bleibt.
 */

body.xtheme-modern {
    background: var(--x-bg);
    color: var(--x-text);
    font-family: var(--x-font);
    font-size: var(--tmo-body-font-size);
    line-height: var(--tmo-body-line-height);
    -webkit-font-smoothing: antialiased;

    /*
     * tmo setzt im Header 0 2px 16px rgba(0,0,0,.35). Das ist fuer den dort
     * voreingestellten Dunkelmodus gedacht und wirkt auf weissem Grund zu
     * hart - deshalb hier abgeschwaecht.
     */
    --x-header-shadow: 0 2px 16px rgba(33, 40, 55, .10);
}

body.xtheme-modern a {
    color: var(--x-accent);
}

body.xtheme-modern h1,
body.xtheme-modern h2,
body.xtheme-modern h3,
body.xtheme-modern h4 {
    color: var(--tmo-heading);
    font-weight: var(--tmo-heading-font-weight);
    line-height: 1.2;
}

/* ------------------------------------------------------------------ Shell */

body.xtheme-modern .x-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
 * Die Hauptnavigation steht als waagerechte Leiste ueber dem Inhalt, nicht
 * als Seitenleiste daneben - deshalb eine Spalte statt einer Zeile.
 */
body.xtheme-modern .x-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

body.xtheme-modern .x-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* .page-content aus tmo-admin */
    padding: 1.5rem 2rem;
    gap: 1rem;
}

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

body.xtheme-modern .x-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--x-topbar-h);
    padding: 0 12px;
    background: var(--tmo-header-surface);
    box-shadow: var(--x-header-shadow);
}

body.xtheme-modern .x-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: 4px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--tmo-strong);
}

body.xtheme-modern .x-topbar__brand img {
    display: block;
    max-height: 28px;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    position: static !important;
}

body.xtheme-modern .x-topbar__spacer {
    flex: 1 1 auto;
}

/* Der Userblock ist im Legacy-Layout absolut positioniert - hier zurueckholen. */
body.xtheme-modern .x-topbar__actions {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    right: auto !important;
    top: auto !important;
    text-align: left !important;
}

body.xtheme-modern .x-topbar__actions > div {
    float: none !important;
    width: auto !important;
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.xtheme-modern .x-topbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 1.25;
    white-space: nowrap;
}

body.xtheme-modern .x-topbar__user:hover {
    background: var(--tmo-surface-hover);
}

body.xtheme-modern .x-topbar__user-meta {
    display: flex;
    flex-direction: column;
}

body.xtheme-modern .x-topbar__user-meta br {
    display: none;
}

body.xtheme-modern .x-topbar__user-meta em,
body.xtheme-modern .x-topbar__user-meta small {
    font-style: normal;
    font-size: 11px;
    color: var(--x-text-muted);
}

body.xtheme-modern .x-topbar__user-meta strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--tmo-strong);
}

/* Das Trennzeichen aus dem Legacy-Markup wird durch eine Linie ersetzt. */
body.xtheme-modern .x-topbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px solid var(--x-border);
    font-size: 0;
}

body.xtheme-modern .x-topbar__lang img {
    margin: 0 !important;
    cursor: pointer;
}

body.xtheme-modern .x-topbar__lang select {
    font-size: 12px;
}

/* .header-btn aus AppHeader.svelte */
body.xtheme-modern .x-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--x-text);
    cursor: pointer;
    opacity: .8;
    text-decoration: none;
}

body.xtheme-modern .x-icon-btn:hover {
    background: var(--tmo-surface-hover);
    opacity: 1;
}

body.xtheme-modern .x-topbar__actions a.reset-filter i.fa-trash-alt,
body.xtheme-modern a i.far.reset-filter {
    font-size: 15px !important;
    margin: 0 !important;
    color: var(--x-text-muted);
}

/* ----------------------------------------------------------------- Footer */

body.xtheme-modern #footer {
    height: auto;
    min-height: 0;
    padding: 10px 0 0;
    background: transparent;
    border: 0;
    color: var(--x-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

body.xtheme-modern #footer .float-left,
body.xtheme-modern #footer .float-right {
    float: none;
}

body.xtheme-modern #footer .submenu {
    margin: 0;
    height: auto;
    padding: 0;
}

body.xtheme-modern #footer .submenu ul li {
    padding-right: 14px;
}

body.xtheme-modern #footer .submenu ul li a {
    border-left: 0;
    padding-left: 0;
    color: var(--x-text-muted) !important;
    font-size: 12px;
}

body.xtheme-modern #footer .submenu ul li a:hover {
    color: var(--x-accent) !important;
}

body.xtheme-modern #footer .reference-info {
    margin: 0;
    font-size: 11px;
    color: var(--x-text-muted);
}