/* =============================================================================
   Brandsync styling for the app shell (drawer + left menu), ported from egu-products-v3.
   Values come from --bs-* tokens (brandsync-tokens.css); light/dark follows html[data-theme]
   (set by js/theme.js from MainLayout).
   ============================================================================= */

:focus-visible,
.mud-nav-link:focus-visible {
    outline: 2px solid var(--bs-border-neutral-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--bs-color-primary-container);
}

/* ---- Navigation drawer ---- */
.edilink-drawer.mud-drawer {
    background-color: var(--bs-surface-base);
    color: var(--bs-text-default);
    border-right: 1px solid var(--bs-border-default);
    box-shadow: none;
}

.edilink-drawer .mud-drawer-content { overflow-x: hidden; }

.edilink-navmenu { padding: var(--bs-spacing-100); }

.edilink-navmenu .mud-nav-link {
    min-height: var(--bs-sizing-550);
    border-radius: var(--bs-border-radius-100);
    position: relative;
    color: var(--bs-text-secondary);
}
.edilink-navmenu .mud-nav-link .mud-nav-link-text { font-size: var(--bs-font-size-sm); font-weight: var(--bs-font-weight-medium); }
.edilink-navmenu .mud-nav-link .mud-icon-root { color: var(--bs-icon-muted); }
.edilink-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) { background: var(--bs-surface-hover); color: var(--bs-text-default); }

/* Active item: background + left marker bar + bold, never colour alone */
.edilink-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--bs-color-primary-container);
    color: var(--bs-text-action);
    font-weight: var(--bs-font-weight-semibold);
}
.edilink-navmenu .mud-nav-link.active .mud-icon-root { color: var(--bs-icon-action); }
.edilink-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: var(--bs-spacing-50);
    border-radius: 0 var(--bs-border-radius-50) var(--bs-border-radius-50) 0;
    background: var(--bs-color-primary-default);
}

.edilink-navmenu .mud-nav-link.mud-nav-link-disabled,
.edilink-navmenu .mud-disabled { opacity: var(--bs-opacity-disabled); }

.edilink-collapse-toggle {
    display: flex; align-items: center; gap: var(--bs-spacing-100); min-height: var(--bs-sizing-550);
    width: calc(100% - 2 * var(--bs-spacing-100)); margin: var(--bs-spacing-100);
    padding: 0 var(--bs-spacing-150); border: 0; border-radius: var(--bs-border-radius-100);
    background: transparent; color: var(--bs-text-muted); font: inherit; font-size: var(--bs-font-size-sm); cursor: pointer;
}
.edilink-collapse-toggle:hover { background: var(--bs-surface-hover); color: var(--bs-text-default); }

/* Icon rail: group flyout buttons look like nav links */
.edilink-navmenu--rail .edilink-rail-group { display: flex; width: 100%; }
.edilink-navmenu--rail .edilink-rail-group > .mud-menu-activator { width: 100%; }
.edilink-rail-button.mud-icon-button {
    width: 100%; border-radius: var(--bs-border-radius-100); color: var(--bs-icon-muted);
    padding: 8px 16px; justify-content: flex-start;
}
.edilink-rail-button.mud-icon-button:hover { background: var(--bs-surface-hover); }
.edilink-rail-button--active.mud-icon-button { background: var(--bs-color-primary-container); color: var(--bs-icon-action); }

/* Nested group indentation: keep the marker bar flush with the drawer edge */
.edilink-navmenu .mud-nav-group .mud-nav-group .mud-collapse-container { padding-inline-start: var(--bs-spacing-100); }

.edilink-appbar-user-large { display: none; align-items: center; }
.edilink-appbar-user-small { display: flex; align-items: center; }
@media (min-width: 960px) {
    .edilink-appbar-user-large { display: flex; }
    .edilink-appbar-user-small { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }