/*
 * SHARED nav active chrome — Menu Admin live preview AND live sidebar (.nm-root).
 * Loaded AFTER MudBlazor.min.css + app.css so drawer/theme cannot wash out the row.
 *
 * MudBlazor 9: Class/Style land on OUTER .mud-nav-item (see MudNavLink.Classname).
 * Sidebar uses OnClick (no Href) → inner .mud-nav-link NEVER gets router .active.
 * Preview forces .active + .heyat-nav-force-active on the outer wrapper — sidebar must too
 * (MenuStyleHelper.GetNavItemClass when IsNavItemActive).
 *
 * Active row (NavColor / NavActiveShape):
 *   - pale tint background (Mud *-hover or color-mix)
 *   - strong NavColor on icon + bold text
 *   - thick physical RIGHT bar (docs LTR icon column; border-inline-end + inset shadow)
 * Inactive colored: icon+text tint only — no bg / bar / shadow.
 */

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored {
    --nav-link-color: var(--mud-palette-primary);
    --nav-link-color-bg: var(--mud-palette-primary-hover);
    --nav-active-border-width: 4px;
    --nav-active-radius: 8px;
}

/* ---- Inactive colored: tint only ---- */
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active):not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active):not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active):not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active):not(.mud-nav-link-disabled) {
    color: var(--nav-link-color) !important;
    background-color: transparent !important;
    background-image: none !important;
    border-style: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .nm-nav-lead-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .mud-nav-link-text,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .nm-nav-title,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .mud-nav-link-text {
    color: var(--nav-link-color) !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .mud-nav-link-icon svg,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active) .mud-nav-link-icon svg {
    fill: currentColor !important;
}

/*
 * Active chrome — wrapper .active / .heyat-nav-force-active OR inner .mud-nav-link.active.
 * High specificity (+ .nm-root / .mud-drawer / .ma-preview-navmenu) beats drawer theme.
 */
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.ma-preview-navmenu.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.ma-preview-navmenu.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.ma-preview-navmenu.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--nav-link-color) !important;
    background-color: var(--nav-link-color-bg) !important;
    background-image: none !important;
    font-weight: 700 !important;
    /* Clear Mud's thin border-left / transparent active wash; shapes re-apply accent. */
    border-top-style: none !important;
    border-bottom-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
    border-inline-start-style: none !important;
    border-inline-end-style: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Side (default sample): pale fill + thick physical RIGHT bar */
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.ma-preview-navmenu.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.ma-preview-navmenu.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.ma-preview-navmenu.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--side.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled) {
    /* Docs LTR row: accent on physical RIGHT (= inline-end). */
    border-right: var(--nav-active-border-width, 4px) solid var(--nav-link-color) !important;
    border-inline-end: var(--nav-active-border-width, 4px) solid var(--nav-link-color) !important;
    border-left: none !important;
    border-inline-start: none !important;
    border-top: none !important;
    border-bottom: none !important;
    /* Inset shadow survives Mud border resets / subpixel clipping. */
    box-shadow: inset -4px 0 0 0 var(--nav-link-color) !important;
    border-radius: 0 !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--box.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--box.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--box.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--box.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--box.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--box.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--box.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--box.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled) {
    border: 2px solid var(--nav-link-color) !important;
    box-shadow: inset 0 0 0 2px var(--nav-link-color) !important;
    border-radius: var(--nav-active-radius, 4px) !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--rounded.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--rounded.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--rounded.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--rounded.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--rounded.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--rounded.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--rounded.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--rounded.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled) {
    border-right: var(--nav-active-border-width, 4px) solid var(--nav-link-color) !important;
    border-inline-end: var(--nav-active-border-width, 4px) solid var(--nav-link-color) !important;
    border-left: none !important;
    border-inline-start: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: inset -4px 0 0 0 var(--nav-link-color) !important;
    border-radius: var(--nav-active-radius, 8px) !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--fill.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--fill.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--fill.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--fill.heyat-nav-link--colored.active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--fill.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-active--fill.heyat-nav-link--colored > .mud-nav-link.active:not(.mud-nav-link-disabled),
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--fill.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled),
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-active--fill.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link:not(.mud-nav-link-disabled) {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link .nm-nav-lead-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .nm-nav-lead-icon,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link .mud-nav-link-text,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-text,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active .mud-nav-link-text,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link .nm-nav-title,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .nm-nav-title,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.active > .mud-nav-link .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored > .mud-nav-link.active .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.active > .mud-nav-link .mud-nav-link-text,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-text,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored > .mud-nav-link.active .mud-nav-link-text,
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon,
.nm-root .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-text,
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon,
.nm-root .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-text,
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon,
.mud-drawer .heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-text,
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon,
.mud-drawer .heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-text {
    color: var(--nav-link-color) !important;
}

.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.active > .mud-nav-link .mud-nav-link-icon svg,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon svg,
.heyat-mud-nav-docs .mud-nav-item.heyat-nav-link--colored > .mud-nav-link.active .mud-nav-link-icon svg,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.active > .mud-nav-link .mud-nav-link-icon svg,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored.heyat-nav-force-active > .mud-nav-link .mud-nav-link-icon svg,
.heyat-mud-nav-docs .mud-nav-group.heyat-nav-link--colored > .mud-nav-link.active .mud-nav-link-icon svg {
    fill: currentColor !important;
}

.heyat-mud-nav-docs .mud-nav-item[style*="--nm-icon-color"] > .mud-nav-link .mud-nav-link-icon,
.heyat-mud-nav-docs .mud-nav-item[style*="--nm-icon-color"] > .mud-nav-link .nm-nav-lead-icon,
.heyat-mud-nav-docs .mud-nav-group[style*="--nm-icon-color"] .mud-nav-link-icon {
    color: var(--nm-icon-color) !important;
}

/* Sidebar-only: uncolored rows keep drawer menu text; hover wash (never on force-active) */
.nm-root .heyat-mud-nav-docs .mud-nav-item:not(.heyat-nav-link--colored) > .mud-nav-link:not(.active):not(.heyat-nav-force-active) {
    color: var(--nm-sidebar-menu-text);
}

.nm-root .heyat-mud-nav-docs .mud-nav-item:not(.active):not(.heyat-nav-force-active) > .mud-nav-link:not(.active):hover {
    background-color: color-mix(in srgb, var(--nm-sidebar-hover) 35%, transparent);
}

.nm-root .heyat-mud-nav-docs .mud-nav-group > .mud-nav-link {
    direction: ltr !important;
}

.nm-root .heyat-mud-nav-docs .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    direction: rtl;
    text-align: right;
}