/* ==========================================================================
   NEXUS THEME LAYER  —  Schritt 1: Chrome + Tokens
   --------------------------------------------------------------------------
   Das gesamte Admin-Erscheinungsbild leitet sich aus EINER Variable ab:
     --nexus-brand      = TenantSettings.PrimaryColor   (inline auf #nexus-root)
     --nexus-brand-rgb  = "r, g, b" desselben Werts     (inline auf #nexus-root)
   Alle weiteren Farben/Tints/Schatten werden per color-mix()/rgba() abgeleitet.

   Alles ist unter #nexus-root gescoped -> das Portal (PortalLayout) bleibt
   voellig unberuehrt. Das 'lymo'-Theme (animierter PCB-Hintergrund) wird
   ueber :not([data-nexus-theme="lymo"]) ausgespart und bleibt erhalten.

   RUECKGAENGIG: einfach den <link> auf diese Datei in App.razor entfernen.
   ========================================================================== */

#nexus-root {
    /* Fallback, falls die Inline-Injektion fehlt (Simacek-Blau) */
    --nexus-brand: #1861ac;
    --nexus-brand-rgb: 24, 97, 172;

    /* --- Abgeleitete Tokens: ein Wert -> ganzes Theme --- */
    --nx-brand-050: rgba(var(--nexus-brand-rgb), .07);
    --nx-brand-120: rgba(var(--nexus-brand-rgb), .14);
    --nx-brand-200: rgba(var(--nexus-brand-rgb), .24);
    --nx-brand-ink: color-mix(in srgb, var(--nexus-brand) 82%, #0a0f16);

    /* Dunkle Chrome = brand-getoentes Navy (statt totes Grau) */
    --nx-chrome-top: color-mix(in srgb, var(--nexus-brand) 22%, #0b111b);
    --nx-chrome-bot: color-mix(in srgb, var(--nexus-brand) 12%, #070b12);
    --nx-chrome-line: rgba(var(--nexus-brand-rgb), .38);
    --nx-on-chrome: rgba(255, 255, 255, .64);
    --nx-on-chrome-strong: #ffffff;

    --nx-ease: cubic-bezier(.4, 0, .2, 1);

    /* --- Bootstrap-Primary auf Markenfarbe mappen --- */
    /* zieht text-primary, bg-primary, .badge.bg-primary, border-primary automatisch mit */
    --bs-primary: var(--nexus-brand);
    --bs-primary-rgb: var(--nexus-brand-rgb);
    --bs-link-color: var(--nx-brand-ink);
    --bs-link-color-rgb: var(--nexus-brand-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--nexus-brand) 70%, #000);
}

/* ==========================  TYPOGRAFIE  ================================== */
/* Barlow = Display/Ueberschriften, Inter = Fliesstext. Nur im Admin-Bereich. */
#nexus-root {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#nexus-root h1,
#nexus-root h2,
#nexus-root h3,
#nexus-root h4,
#nexus-root h5,
#nexus-root h6,
#nexus-root .navbar-brand {
    font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
}

/* ==========================  BUTTONS  ==================================== */
/* Bootstrap .btn-primary setzt --bs-btn-* auf feste Hex-Werte -> hier auf Brand binden */
#nexus-root .btn-primary {
    --bs-btn-bg: var(--nexus-brand);
    --bs-btn-border-color: var(--nexus-brand);
    --bs-btn-hover-bg: color-mix(in srgb, var(--nexus-brand) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--nexus-brand) 82%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--nexus-brand) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--nexus-brand) 75%, #000);
    --bs-btn-disabled-bg: var(--nexus-brand);
    --bs-btn-disabled-border-color: var(--nexus-brand);
}

#nexus-root .btn-outline-primary {
    --bs-btn-color: var(--nx-brand-ink);
    --bs-btn-border-color: var(--nexus-brand);
    --bs-btn-hover-bg: var(--nexus-brand);
    --bs-btn-hover-border-color: var(--nexus-brand);
    --bs-btn-active-bg: var(--nexus-brand);
    --bs-btn-active-border-color: var(--nexus-brand);
    --bs-btn-disabled-color: var(--nx-brand-ink);
    --bs-btn-disabled-border-color: var(--nexus-brand);
}

/* ==========================  SIDEBAR (dunkle Chrome)  ==================== */
/* Nur in light/dark. In 'lymo' bleibt die durchscheinende Sidebar aus app.css. */
#nexus-root:not([data-nexus-theme="lymo"]) .sidebar {
    background: linear-gradient(180deg, var(--nx-chrome-top) 0%, var(--nx-chrome-bot) 100%) !important;
    border-right: 1px solid var(--nx-chrome-line) !important;
    box-shadow: 4px 0 24px rgba(7, 11, 18, .18);
}

/* Gebrandeter Sidebar-Header: Tenant-Logo/Initiale + Name */
#nexus-root .nx-brand-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--nx-chrome-line);
    flex-shrink: 0;
}

#nexus-root .nx-brand-mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--nexus-brand) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--nexus-brand) 55%, transparent);
    box-shadow: 0 0 14px rgba(var(--nexus-brand-rgb), .40);
    color: var(--nx-on-chrome-strong);
    font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
}

#nexus-root .nx-brand-mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#nexus-root .nx-brand-name {
    font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--nx-on-chrome-strong);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    line-height: 1.15;
}

#nexus-root .nx-brand-sub {
    color: color-mix(in srgb, var(--nexus-brand) 42%, #cdd7e3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* Kopfzeile der Sidebar ("zum Portal") transparent + helle Schrift */
#nexus-root .sidebar .top-row {
    background: transparent !important;
    border-bottom: 1px solid var(--nx-chrome-line) !important;
    color: var(--nx-on-chrome) !important;
}

#nexus-root .sidebar .top-row .navbar-brand,
#nexus-root .sidebar .top-row .bi {
    color: var(--nx-on-chrome) !important;
    transition: color .15s var(--nx-ease);
}

#nexus-root .sidebar .top-row .navbar-brand:hover {
    color: var(--nx-on-chrome-strong) !important;
}

/* --- TreeView-Navigation auf dunkler Chrome lesbar machen --- */
/* nur die Sidebar-TreeView, nicht evtl. TreeViews im Content */
#nexus-root .sidebar .e-treeview .e-list-text,
#nexus-root .sidebar .e-treeview .e-list-icon,
#nexus-root .sidebar .e-treeview .e-icons {
    color: var(--nx-on-chrome) !important;
}

/* Hover / Fokus */
#nexus-root .sidebar .e-treeview .e-list-item.e-hover > .e-fullrow,
#nexus-root .sidebar .e-treeview .e-list-item.e-node-focus > .e-fullrow {
    background-color: var(--nx-brand-120) !important;
    border-color: transparent !important;
}

#nexus-root .sidebar .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
#nexus-root .sidebar .e-treeview .e-list-item.e-hover > .e-text-content .e-list-icon {
    color: var(--nx-on-chrome-strong) !important;
}

/* Aktiver Menuepunkt: gefuellte Brand-Pille */
#nexus-root .sidebar .e-treeview .e-list-item.e-active > .e-fullrow,
#nexus-root .sidebar .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
#nexus-root .sidebar .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
    background-color: var(--nx-brand-200) !important;
    border-color: transparent !important;
    box-shadow: none;
}

#nexus-root .sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-text,
#nexus-root .sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-icon {
    color: var(--nx-on-chrome-strong) !important;
}

#nexus-root .sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    font-weight: 600;
}

#nexus-root .sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-icon {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nexus-brand) 85%, transparent));
}

/* --- Pill-Look: Zeilen einruecken, abrunden, Abstand + Hover-Bewegung --- */
#nexus-root .sidebar .e-treeview .e-list-item {
    margin: 2px 0;
}

/* die vollbreite Hintergrundzeile seitlich einruecken -> Pille */
#nexus-root .sidebar .e-treeview .e-list-item > .e-fullrow {
    left: 8px;
    right: 8px;
    width: auto;
    border-radius: 9px;
    transition: background-color .15s var(--nx-ease);
}


/* Schlanke, dezent getoente Scrollbar in der dunklen Sidebar */
#nexus-root:not([data-nexus-theme="lymo"]) .sidebar .nav-scrollable {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

/* Kein horizontaler Scrollbalken durch die eingerueckten Pill-Zeilen */
#nexus-root .sidebar .nav-scrollable,
#nexus-root .sidebar .e-treeview {
    overflow-x: hidden;
}

/* --- Top-Level-Parents als Sektions-Ueberschriften ---
   Erkennung ueber das Expand/Collapse-Icon (existiert ein- UND ausgeklappt),
   NICHT ueber die Kinder-Liste (die rendert Syncfusion erst beim Aufklappen). */
#nexus-root .sidebar .e-treeview > .e-ul > .e-list-item:has(.e-icon-expandable, .e-icon-collapsible) {
    margin-top: 6px;
}

#nexus-root .sidebar .e-treeview > .e-ul > .e-list-item:has(.e-icon-expandable, .e-icon-collapsible) > .e-text-content .e-list-text {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    color: color-mix(in srgb, var(--nexus-brand) 45%, #8b99a8) !important;
}

#nexus-root .sidebar .e-treeview > .e-ul > .e-list-item:has(.e-icon-expandable, .e-icon-collapsible) > .e-text-content .e-list-icon {
    color: color-mix(in srgb, var(--nexus-brand) 45%, #8b99a8) !important;
    font-size: 13px;
}

/* ==========================  TOPBAR-Feinschliff  ======================== */
/* Hintergrund bleibt themengesteuert; nur eine dezente Brand-Unterkante. */
#nexus-root main > .top-row {
    border-bottom: 1px solid var(--nx-brand-120) !important;
}

/* ==========================  DESIGN-TOKENS (Fläche)  ==================== */
#nexus-root {
    --nx-radius: 14px;
    --nx-shadow: 0 1px 2px rgba(16, 42, 67, .05), 0 8px 24px rgba(16, 42, 67, .07);
    --nx-shadow-lg: 0 14px 40px rgba(16, 42, 67, .16);
}

#nexus-root[data-bs-theme="dark"] {
    --nx-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35);
    --nx-shadow-lg: 0 14px 40px rgba(0, 0, 0, .5);
}

/* ==========================  CARDS (global)  ============================ */
#nexus-root .card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow);
    transition: box-shadow .2s var(--nx-ease), transform .2s var(--nx-ease);
}

#nexus-root .card:hover {
    box-shadow: var(--nx-shadow-lg);
}

/* ==========================  SYNCFUSION GRID (Feinschliff)  ============= */
#nexus-root .e-grid {
    border-radius: var(--nx-radius);
    overflow: hidden;
    box-shadow: var(--nx-shadow);
}

/* Zeilen-Hover + Auswahl in Markenfarbe (light & dark) */
#nexus-root .e-grid .e-row:hover .e-rowcell,
#nexus-root .e-grid .e-altrow:hover .e-rowcell {
    background-color: var(--nx-brand-050) !important;
}

#nexus-root .e-grid .e-row .e-rowcell.e-selectionbackground,
#nexus-root .e-grid .e-row.e-active .e-rowcell {
    background-color: var(--nx-brand-120) !important;
}

/* ==========================  HERO  ===================================== */
#nexus-root .nx-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    color: #fff;
    background:
        radial-gradient(ellipse 60% 120% at 85% 0%, color-mix(in srgb, var(--nexus-brand) 55%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--nexus-brand) 92%, #0a0f16) 0%, color-mix(in srgb, var(--nexus-brand) 55%, #0a0f16) 100%);
    box-shadow: var(--nx-shadow);
}

#nexus-root .nx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 82% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 100% at 82% 0%, #000, transparent 70%);
    pointer-events: none;
}

#nexus-root .nx-hero > * {
    position: relative;
}

#nexus-root .nx-hero .lead {
    opacity: .88;
    margin-bottom: 0;
}

/* ==========================  QUICK-/STAT-CARDS  ======================== */
#nexus-root .nx-quick-card {
    height: 100%;
    cursor: default;
}

#nexus-root .nx-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nx-shadow-lg);
}

#nexus-root .nx-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    background: var(--nx-brand-050);
    border: 1px solid var(--nx-brand-120);
    color: var(--nexus-brand);
    font-size: 25px;
}

/* ==========================  TOPBAR: USER-CHIP  ======================== */
#nexus-root .nx-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#nexus-root .nx-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--nexus-brand), color-mix(in srgb, var(--nexus-brand) 55%, #0a0f16));
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--nexus-brand) 40%, transparent);
}

#nexus-root .nx-user-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.15;
}

#nexus-root .nx-user-role {
    font-size: 11px;
    color: var(--bs-secondary-color);
    line-height: 1.1;
}

/* ==========================  TOPBAR: PROFIL-MENÜ  ====================== */
#nexus-root .nx-user-menu {
    position: relative;
    z-index: 1050; /* eigener Stacking-Context über dem Backdrop (1040) */
}

#nexus-root .nx-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s var(--nx-ease), border-color .15s var(--nx-ease);
}

#nexus-root .nx-user-trigger:hover,
#nexus-root .nx-user-trigger.is-open {
    background: var(--nx-brand-050);
    border-color: var(--bs-border-color);
}

#nexus-root .nx-user-caret {
    font-size: 12px;
    color: var(--bs-secondary-color);
    transition: transform .15s var(--nx-ease);
}

#nexus-root .nx-user-trigger.is-open .nx-user-caret {
    transform: rotate(180deg);
}

#nexus-root .nx-profile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

#nexus-root .nx-profile-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg);
    padding: 16px;
    z-index: 1051;
    animation: nx-profile-in .14s var(--nx-ease);
}

@keyframes nx-profile-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#nexus-root .nx-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bs-border-color);
}

#nexus-root .nx-avatar.nx-avatar-lg {
    width: 46px;
    height: 46px;
    font-size: 17px;
}

#nexus-root .nx-profile-ident {
    min-width: 0;
}

#nexus-root .nx-profile-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#nexus-root .nx-profile-role {
    font-size: 12px;
    color: var(--nexus-brand);
    font-weight: 500;
}

#nexus-root .nx-profile-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--bs-border-color);
}

#nexus-root .nx-profile-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: 8px;
}

#nexus-root .nx-profile-muted {
    font-size: 13px;
    color: var(--bs-secondary-color);
}

#nexus-root .nx-scope-full {
    font-size: 13px;
    font-weight: 500;
}

#nexus-root .nx-scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 190px;
    overflow-y: auto;
}

#nexus-root .nx-scope-item {
    padding: 6px 0;
}

#nexus-root .nx-scope-item + .nx-scope-item {
    border-top: 1px dashed var(--bs-border-color);
}

#nexus-root .nx-scope-client {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

#nexus-root .nx-scope-sub {
    display: inline-block;
    margin: 3px 6px 0 0;
    padding: 1px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--nx-brand-050);
    color: var(--bs-secondary-color);
}

/* Nummer (Filial-/SM-Nummer) als dezenter Zusatz neben dem Namen */
#nexus-root .nx-scope-code {
    margin-left: 5px;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

/* Service-Manager-Block unterhalb der Filialen */
#nexus-root .nx-scope-sm-row {
    margin-top: 6px;
}

#nexus-root .nx-scope-sm-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: 1px;
}

#nexus-root .nx-scope-sm {
    display: inline-block;
    margin: 3px 6px 0 0;
    padding: 1px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

#nexus-root .nx-profile-themes .btn {
    flex: 1;
}

#nexus-root .nx-profile-logout {
    margin-top: 14px;
    margin-left: 0; /* überschreibt .top-row ::deep a { margin-left: 1.5rem } */
}

/* ==========================  FOKUS-RING in Markenfarbe  ================= */
#nexus-root .btn:focus,
#nexus-root .btn:active:focus,
#nexus-root .form-control:focus,
#nexus-root .form-check-input:focus,
#nexus-root .form-select:focus {
    box-shadow: 0 0 0 .1rem var(--bs-body-bg), 0 0 0 .25rem var(--nexus-brand) !important;
    border-color: var(--nexus-brand);
}

/* ==========================  LOGIN-HERO (ausserhalb #nexus-root)  ======= */
.nx-login-bg {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--nexus-brand) 24%, transparent) 0%, transparent 70%),
        linear-gradient(160deg, #0b111b 0%, color-mix(in srgb, var(--nexus-brand) 20%, #070b12) 100%);
}

.nx-login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--nexus-brand) 13%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--nexus-brand) 13%, transparent) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 0%, transparent 78%);
    pointer-events: none;
}

.nx-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: #fff;
    color: #1c2733;
    border-radius: 18px;
    padding: 34px 30px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    border: 1px solid color-mix(in srgb, var(--nexus-brand) 18%, #e5eaf0);
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.nx-login-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--nexus-brand), color-mix(in srgb, var(--nexus-brand) 55%, #0a0f16));
    box-shadow: 0 0 22px color-mix(in srgb, var(--nexus-brand) 45%, transparent);
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 26px;
}

.nx-login-mark img {
    max-width: 74%;
    max-height: 74%;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    #nexus-root * {
        transition: none !important;
    }
}