/*
 * ANYVA Anwendungsshell (WorkingSpaceTemplate): Header, Sidebar, Navigation, Hauptbereich, Tab-Leiste, Ansichts-Container.
 *
 * Gestaltungsprinzip "eine Leinwand": Header, Sidebar und Tab-Leiste liegen auf derselben hellen Leinwand
 * (--anyva-bg). Die geöffnete Ansicht (XAF-ListView/-DetailView/Dashboard) steht als weiße, gerundete Karte darauf.
 *
 * Geltungsbereich
 *   - Selektoren hängen an eigenen Klassen (.anyva-*, siehe Templates/WorkingSpaceTemplateComponent.razor) und an
 *     .xaf-tabbed-mdi (die Tab-Leiste und ihr Inhaltscontainer, vom WorkingSpaceTemplate selbst gesetzt).
 *   - Der Ansichts-Container (.dxbl-tabs-content-panel) ist ein reiner Rahmen um die komplette Ansicht: Das Grid
 *     selbst wird weder verändert noch abgerundet; es wird von der Karte mit overflow:hidden beschnitten.
 *   - DevExpress-Komponenten (Treeview, Eingabefelder, Tabs) werden nur über deren dokumentierte CSS-Variablen
 *     (--dxbl-*) und nur innerhalb dieser Container angepasst. Detailansichts-Tabs (:not(.xaf-tabbed-mdi)) regelt site.css.
 *
 * Themes
 *   - Alle Farben/Formen kommen aus Tokens (--anyva-*, Theme/anyva-tokens.css, geladen NUR mit "ANYVA Hell").
 *     In anderen Themes greifen die Fallbacks (transparent/inherit/0); die Shell bleibt dort neutral wie zuvor.
 */

/* --- Rahmen: Leinwand ------------------------------------------------------------------------------- */
.anyva-app {
    font-family: var(--anyva-font, inherit);
    background: var(--anyva-bg, transparent);
}

/* --- Header ---------------------------------------------------------------------------------------- */
.anyva-app .header.anyva-header {
    min-height: 3.5rem;
    align-items: center;
    padding-inline: .75rem;
    background: var(--anyva-header-bg, var(--anyva-surface, transparent));
    border-bottom: var(--anyva-header-border, 1px solid var(--bs-border-color, transparent));
    box-shadow: none;
}

.anyva-hamburger {
    border-radius: var(--anyva-radius-ctrl, .25rem);
    color: var(--anyva-text, inherit);
}

.anyva-hamburger:hover {
    background-color: var(--anyva-nav-hover-bg, transparent);
}

.anyva-header .xaf-view-caption-lg {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--anyva-navy-900, inherit);
}

/* --- Sidebar --------------------------------------------------------------------------------------- */
.anyva-app .sidebar.anyva-sidebar {
    width: 272px;
    min-width: 272px;
    background: var(--anyva-nav-bg, transparent);
    color: var(--anyva-nav-text, inherit);
    box-shadow: none;
    border-right: 1px solid var(--anyva-nav-border, var(--bs-border-color, transparent));
}

.anyva-sidebar-nav {
    padding: var(--anyva-space-2, .5rem) var(--anyva-space-3, .75rem) var(--anyva-space-4, 1rem);
    scrollbar-width: thin;
    scrollbar-color: var(--anyva-border-strong, rgba(128, 128, 128, .4)) transparent;
}

.anyva-sidebar-about {
    color: var(--anyva-nav-muted, inherit);
    border-top: 1px solid var(--anyva-nav-border, var(--bs-border-color, transparent));
    opacity: .9;
}

/* Navigationsbaum: nur Variablen des DxTreeView, nur innerhalb der Sidebar */
.anyva-sidebar .dxbl-treeview {
    --dxbl-treeview-font-size: var(--anyva-text-md, .875rem);
    --dxbl-treeview-btn-color: var(--anyva-nav-muted, unset);
    --dxbl-treeview-btn-hover-color: var(--anyva-nav-text-strong, inherit);
    --dxbl-treeview-item-hover-bg: var(--anyva-nav-hover-bg, unset);
    --dxbl-treeview-item-hover-color: var(--anyva-nav-text-strong, inherit);
    --dxbl-treeview-item-selection-bg: var(--anyva-nav-active-bg, unset);
    --dxbl-treeview-item-selection-color: var(--anyva-nav-active-text, var(--anyva-nav-text-strong, inherit));
    --dxbl-treeview-item-selection-focused-color: var(--anyva-nav-active-text, var(--anyva-nav-text-strong, inherit));
    color: var(--anyva-nav-text, inherit);
}

/* Einträge: großzügige, gerundete Trefferflächen */
.anyva-sidebar .dxbl-treeview-item-container {
    border-radius: var(--anyva-radius, 8px) !important;
}

/* Navigationseinträge sind keine Fließtext-Links: keine Unterstreichung, Farbe vom Baum erben */
.anyva-sidebar a,
.anyva-sidebar a:hover,
.anyva-sidebar a:focus,
.anyva-sidebar .xaf-nav-link,
.anyva-sidebar .clickable-xaf-nav-item > a .xaf-nav-link,
.anyva-sidebar .clickable-xaf-nav-item > div > a .xaf-nav-link {
    /* die letzten beiden Selektoren spiegeln die DevExpress-Regel (styles.css, "text-decoration: underline") mit höherer Spezifität */
    color: inherit;
    text-decoration: none;
}

/* Gruppen (Ebene 1) etwas kräftiger, Einträge (Ebene 2+) regulär */
.anyva-sidebar .dxbl-treeview-item-container[aria-level="1"] {
    font-weight: var(--anyva-weight-semibold, 600);
}

.anyva-sidebar .dxbl-treeview-item-container[aria-level]:not([aria-level="1"]) {
    font-weight: var(--anyva-weight-regular, 400);
}

/* Aktive Auswahl: weiße Karte mit feinem Schatten (auf Leinwand) bzw. Treeview-Variable; Akzentbalken nur falls gesetzt */
/* Das Theme färbt die aktive Auswahl über ein ::before-Overlay mit der Primärfarbe; auf der Leinwand übernimmt die weiße Karte. */
.anyva-sidebar .dxbl-treeview-item-container.dxbl-active::before {
    background-color: var(--anyva-nav-active-overlay, var(--dxbl-treeview-item-selection-bg)) !important;
}

.anyva-sidebar .dxbl-treeview-item-container.dxbl-active {
    background-color: var(--anyva-nav-active-bg, var(--dxbl-treeview-item-selection-bg));
    color: var(--anyva-nav-active-text, var(--dxbl-treeview-item-selection-color));
    font-weight: var(--anyva-weight-semibold, 600);
    box-shadow: var(--anyva-nav-active-shadow, inset 3px 0 0 var(--anyva-nav-active-bar, transparent));
}

/* Navigations-Icons: einheitlich einfarbig (Filter kommt aus dem Theme, in anderen Themes: keiner) */
.anyva-sidebar .xaf-nav-menu-item-icon {
    width: 1.125rem;
    height: 1.125rem;
    filter: var(--anyva-nav-icon-filter, none);
    opacity: var(--anyva-nav-icon-opacity, 1);
}

.anyva-sidebar .dxbl-treeview-item-container.dxbl-active .xaf-nav-menu-item-icon {
    filter: var(--anyva-nav-active-icon-filter, var(--anyva-nav-icon-filter, none));
}

/* Navigationsfilter */
.anyva-sidebar .dxbl-navigation-filter {
    --dxbl-text-edit-bg: var(--anyva-surface, unset);
    --dxbl-text-edit-color: var(--anyva-text, inherit);
    --dxbl-text-edit-border-color: var(--anyva-border, unset);
    --dxbl-text-edit-focus-border-color: var(--anyva-blue-500, unset);
    --dxbl-text-edit-border-radius: var(--anyva-radius-ctrl, unset);
}

.anyva-sidebar .dxbl-navigation-filter input::placeholder {
    color: var(--anyva-nav-muted, inherit);
    opacity: 1;
}

/* --- Hauptbereich ------------------------------------------------------------------------------------ */
.anyva-main {
    background: var(--anyva-bg, transparent);
}

/* --- Tab-Leiste der geöffneten Ansichten (TabbedMDI) ------------------------------------------------------ */
/* Die Tabs liegen als Pillen auf der Leinwand; die aktive Pille ist weiß wie die Ansicht darunter. */
.dxbl-tabs.xaf-tabbed-mdi {
    --dxbl-tabs-bg: transparent;
    --dxbl-tabs-tab-btn-color: var(--anyva-text-muted, unset);
    --dxbl-tabs-tab-hover-bg: var(--anyva-nav-hover-bg, unset);
    --dxbl-tabs-tab-hover-color: var(--anyva-navy-900, unset);
    --dxbl-tabs-tab-selected-color: var(--anyva-blue-600, unset);
    --dxbl-tabs-tab-selected-bg: var(--anyva-surface, unset);
    --dxbl-tabs-font-size: var(--anyva-text-md, unset);
    display: flex;
    flex-direction: column;
}

.dxbl-tabs.xaf-tabbed-mdi > .dxbl-tabs-tablist {
    background: transparent;
    border-bottom: 0;
    padding: .25rem 0 .5rem;
}

.dxbl-tabs.xaf-tabbed-mdi > .dxbl-tabs-tablist .dxbl-tabs-item {
    border-radius: var(--anyva-radius, 0);
    margin-right: .25rem;
    border-color: transparent;
}

.dxbl-tabs.xaf-tabbed-mdi > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active {
    box-shadow: var(--anyva-nav-active-shadow, inset 0 -2px 0 var(--anyva-blue-600, transparent));
}

/* Ansichts-Container: die komplette Ansicht (Toolbar + Grid/Formular/Dashboard) als gerundete Karte.
   Nur Rahmen: keine Eingriffe in Grid oder Layout. overflow:hidden beschneidet die Ecken des Grids. */
.dxbl-tabs.xaf-tabbed-mdi > .dxbl-tabs-content-panel {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--anyva-view-bg, transparent);
    border: var(--anyva-view-border, 0 solid transparent);
    border-radius: var(--anyva-radius-lg, 0);
    box-shadow: var(--anyva-shadow-card, none);
    overflow: hidden;
    margin: 0 var(--anyva-gutter, 0) var(--anyva-gutter, 0) 0;
}

/* --- Toolbar-Icons -------------------------------------------------------------------------------------- */
/* Die Icons der XAF-Bildbibliothek sind farbige <img> mit festen Farben (u. a. Orange) und folgen dem Theme nicht. Mit
   "ANYVA Hell" werden sie wie die Navigations-Icons einfarbig dargestellt; in anderen Themes bleibt "none". Nur Toolbar und
   Header; Statusicons in Tabellenzeilen sind Daten und bleiben farbig. */
.anyva-app .main-toolbar .xaf-toolbar-item-icon,
.anyva-app .anyva-header .xaf-toolbar-item-icon {
    filter: var(--anyva-toolbar-icon-filter, none);
}