/* =========================================================
   Modern NavMenu / MudDrawer
   File: wwwroot/css/navmenu.css
   Purpose: MudDrawer sidebar + MudNavMenu styling
   ========================================================= */

/* =========================================================
   Sidebar theme variables
   ========================================================= */

.modern-sidebar {
    width: var(--app-sidebar-width, 280px) !important;
    max-width: var(--app-sidebar-width, 280px) !important;
    overflow-x: hidden !important;
    --nav-accent: #ef4444;
    --nav-accent-soft: rgba(239, 68, 68, 0.16);
    --nav-bg: #ffffff;
    --nav-bg-2: #f8fafc;
    --nav-border: rgba(15, 23, 42, 0.08);
    --nav-text: #334155;
    --nav-text-strong: #0f172a;
    --nav-muted: #64748b;
    --nav-icon: #64748b;
    --nav-hover-bg: rgba(15, 23, 42, 0.055);
    --nav-hover-text: #0f172a;
    --nav-active-bg: var(--nav-accent-soft);
    --nav-active-text: var(--nav-accent);
    --nav-divider: rgba(15, 23, 42, 0.10);
    --nav-logout: #e11d48;
    --nav-logout-soft: rgba(244, 63, 94, 0.14);
    background: radial-gradient(circle at top left, rgba(2, 132, 199, 0.10), transparent 34%), linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%) !important;
    color: var(--nav-text) !important;
    border-right: 1px solid var(--nav-border) !important;
}

/* Automatic MudBlazor dark mode support */
.mud-theme-dark .modern-sidebar,
html.dark .modern-sidebar,
body.dark .modern-sidebar,
.modern-sidebar-dark {
    --nav-bg: #020617;
    --nav-bg-2: #0f172a;
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-text: #cbd5e1;
    --nav-text-strong: #f8fafc;
    --nav-muted: #94a3b8;
    --nav-icon: #94a3b8;
    --nav-hover-bg: rgba(148, 163, 184, 0.10);
    --nav-hover-text: #ffffff;
    --nav-active-bg: var(--nav-accent-soft);
    --nav-active-text: #ffffff;
    --nav-divider: rgba(255, 255, 255, 0.10);
    --nav-logout: #fb7185;
    --nav-logout-soft: rgba(244, 63, 94, 0.16);
    background: radial-gradient(circle at top left, rgba(255, 23, 68, 0.20), transparent 34%), linear-gradient(180deg, #020617 0%, #0f172a 52%, #020617 100%) !important;
    color: var(--nav-text) !important;
    border-right-color: var(--nav-border) !important;
}

/* Optional explicit light class still works */
.modern-sidebar-light {
    --nav-bg: #ffffff;
    --nav-bg-2: #f8fafc;
    --nav-border: rgba(15, 23, 42, 0.08);
    --nav-text: #334155;
    --nav-text-strong: #0f172a;
    --nav-muted: #64748b;
    --nav-icon: #64748b;
    --nav-hover-bg: rgba(15, 23, 42, 0.055);
    --nav-hover-text: #0f172a;
    --nav-active-bg: var(--nav-accent-soft);
    --nav-active-text: var(--nav-accent);
    --nav-divider: rgba(15, 23, 42, 0.10);
    --nav-logout: #e11d48;
    --nav-logout-soft: rgba(244, 63, 94, 0.14);
    background: radial-gradient(circle at top left, rgba(2, 132, 199, 0.10), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: var(--nav-text) !important;
    border-right-color: var(--nav-border) !important;
}

/* MudDrawer internals */
.modern-sidebar .mud-drawer,
.modern-sidebar .mud-drawer-content,
.modern-sidebar .modern-nav {
    width: var(--app-sidebar-width, 280px) !important;
    max-width: var(--app-sidebar-width, 280px) !important;
    overflow-x: hidden !important;
}

.modern-sidebar .mud-drawer,
.modern-sidebar .mud-drawer-content {
    background: transparent !important;
    color: var(--nav-text) !important;
}

.modern-sidebar .mud-drawer-content {
    padding: 1rem 0.75rem !important;
    overflow-y: auto !important;
}

.modern-sidebar *,
.modern-sidebar *::before,
.modern-sidebar *::after {
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================================================
   Role colors
   ========================================================= */

.nav-role-default {
    --nav-accent: #ef4444;
    --nav-accent-soft: rgba(239, 68, 68, 0.18);
}

.nav-role-istobal {
    --nav-accent: #ff1744;
    --nav-accent-soft: rgba(255, 23, 68, 0.20);
}

.nav-role-washsupport {
    --nav-accent: #0284c7;
    --nav-accent-soft: rgba(2, 132, 199, 0.20);
}

.nav-role-unox {
    --nav-accent: #f59e0b;
    --nav-accent-soft: rgba(245, 158, 11, 0.22);
}

.nav-role-wennstrom {
    --nav-accent: #2563eb;
    --nav-accent-soft: rgba(37, 99, 235, 0.20);
}

/* =========================================================
   Hard MudBlazor NavLink reset
   Removes active/ripple/click double background
   ========================================================= */

.modern-sidebar .mud-nav-link,
.modern-sidebar .mud-nav-link:hover,
.modern-sidebar .mud-nav-link:focus,
.modern-sidebar .mud-nav-link:focus-visible,
.modern-sidebar .mud-nav-link:active,
.modern-sidebar .mud-nav-link.active,
.modern-sidebar .mud-nav-link.mud-nav-link-active,
.modern-sidebar .mud-nav-link.mud-selected,
.modern-sidebar .mud-nav-link[aria-current="page"],
.modern-sidebar .mud-nav-link.mud-primary-text,
.modern-sidebar .mud-nav-link.mud-secondary-text,
.modern-sidebar .mud-nav-link.mud-error-text,
.modern-sidebar .mud-nav-link.mud-info-text,
.modern-sidebar .mud-nav-link.mud-warning-text,
.modern-sidebar .mud-nav-link.mud-success-text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.modern-sidebar .mud-ripple-container,
.modern-sidebar .mud-ripple-element {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

.modern-sidebar .mud-nav-link::before,
.modern-sidebar .mud-nav-link::after,
.modern-sidebar .mud-ripple::before,
.modern-sidebar .mud-ripple::after {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Override app.css overflow-wrap:anywhere inside nav */
.modern-sidebar,
.modern-sidebar *,
.modern-sidebar .mud-typography,
.modern-sidebar .mud-list-item,
.modern-sidebar .mud-nav-link,
.modern-sidebar .mud-nav-link-text {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* =========================================================
   Logo
   ========================================================= */

.modern-sidebar-logo {
    height: 130px !important;
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

    .modern-sidebar-logo img,
    .modern-sidebar-logo .mud-image,
    .modern-sidebar-logo .mud-image-img {
        max-width: 230px !important;
        max-height: 105px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

.modern-sidebar-logo-small img,
.modern-sidebar-logo-small .mud-image,
.modern-sidebar-logo-small .mud-image-img {
    max-width: 210px !important;
    max-height: 100px !important;
}

.modern-sidebar-logo-wide img,
.modern-sidebar-logo-wide .mud-image,
.modern-sidebar-logo-wide .mud-image-img {
    max-width: 235px !important;
    max-height: 108px !important;
}

.nav-role-washsupport .modern-sidebar-logo {
    height: 135px !important;
}

    .nav-role-washsupport .modern-sidebar-logo img,
    .nav-role-washsupport .modern-sidebar-logo .mud-image,
    .nav-role-washsupport .modern-sidebar-logo .mud-image-img {
        max-width: 225px !important;
        max-height: 115px !important;
    }

/* =========================================================
   Nav container
   ========================================================= */

.modern-nav {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0.2rem;
    overflow-x: hidden !important;
}

/* =========================================================
   Nav item base
   ========================================================= */

.modern-sidebar .modern-nav-item,
.modern-sidebar .mud-nav-link.modern-nav-item,
.modern-sidebar .modern-nav-group > .mud-nav-link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0.15rem 0 !important;
    padding: 0 0.9rem !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    color: var(--nav-text) !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    line-height: normal !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

    /* Icon column */
    .modern-sidebar .modern-nav-item .mud-nav-link-icon,
    .modern-sidebar .modern-nav-item .mud-icon-root,
    .modern-sidebar .modern-nav-group > .mud-nav-link .mud-nav-link-icon,
    .modern-sidebar .modern-nav-group > .mud-nav-link .mud-icon-root {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--nav-icon) !important;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

        /* SVG icon size */
        .modern-sidebar .modern-nav-item .mud-icon-root svg,
        .modern-sidebar .modern-nav-group > .mud-nav-link .mud-icon-root svg {
            width: 22px !important;
            height: 22px !important;
        }

    /* Text column */
    .modern-sidebar .modern-nav-item .mud-nav-link-text,
    .modern-sidebar .modern-nav-group > .mud-nav-link .mud-nav-link-text {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        min-height: 44px !important;
        line-height: 44px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        color: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Group expand arrow */
    .modern-sidebar .modern-nav-group > .mud-nav-link .mud-nav-link-expand-icon,
    .modern-sidebar .modern-nav-group > .mud-nav-link .mud-nav-link-expand-icon .mud-icon-root {
        margin-left: auto !important;
        margin-right: 0 !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--nav-icon) !important;
    }

    /* =========================================================
   Hover / active / selected
   ========================================================= */

    .modern-sidebar .modern-nav-item:hover,
    .modern-sidebar .modern-nav-item:focus,
    .modern-sidebar .modern-nav-item:focus-visible,
    .modern-sidebar .modern-nav-item:active,
    .modern-sidebar .modern-nav-item.active,
    .modern-sidebar .modern-nav-item.mud-nav-link-active,
    .modern-sidebar .modern-nav-item.mud-selected,
    .modern-sidebar .modern-nav-item[aria-current="page"],
    .modern-sidebar .mud-nav-link.modern-nav-item:hover,
    .modern-sidebar .mud-nav-link.modern-nav-item:focus,
    .modern-sidebar .mud-nav-link.modern-nav-item:focus-visible,
    .modern-sidebar .mud-nav-link.modern-nav-item:active,
    .modern-sidebar .mud-nav-link.modern-nav-item.active,
    .modern-sidebar .mud-nav-link.modern-nav-item.mud-nav-link-active,
    .modern-sidebar .mud-nav-link.modern-nav-item.mud-selected,
    .modern-sidebar .mud-nav-link.modern-nav-item[aria-current="page"],
    .modern-sidebar .modern-nav-group > .mud-nav-link:hover,
    .modern-sidebar .modern-nav-group > .mud-nav-link:focus,
    .modern-sidebar .modern-nav-group > .mud-nav-link:focus-visible,
    .modern-sidebar .modern-nav-group > .mud-nav-link:active,
    .modern-sidebar .modern-nav-group > .mud-nav-link.mud-expanded {
        background: var(--nav-active-bg) !important;
        background-color: var(--nav-active-bg) !important;
        background-image: none !important;
        color: var(--nav-active-text) !important;
        font-weight: 750 !important;
        box-shadow: inset 3px 0 0 var(--nav-accent) !important;
        transform: none !important;
    }

        .modern-sidebar .modern-nav-item:hover .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item:focus .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item:focus-visible .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item:active .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item.active .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item.mud-nav-link-active .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item.mud-selected .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item[aria-current="page"] .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item:hover .mud-icon-root,
        .modern-sidebar .modern-nav-item:focus .mud-icon-root,
        .modern-sidebar .modern-nav-item:focus-visible .mud-icon-root,
        .modern-sidebar .modern-nav-item:active .mud-icon-root,
        .modern-sidebar .modern-nav-item.active .mud-icon-root,
        .modern-sidebar .modern-nav-item.mud-nav-link-active .mud-icon-root,
        .modern-sidebar .modern-nav-item.mud-selected .mud-icon-root,
        .modern-sidebar .modern-nav-item[aria-current="page"] .mud-icon-root,
        .modern-sidebar .modern-nav-group > .mud-nav-link:hover .mud-icon-root,
        .modern-sidebar .modern-nav-group > .mud-nav-link:focus .mud-icon-root,
        .modern-sidebar .modern-nav-group > .mud-nav-link:active .mud-icon-root,
        .modern-sidebar .modern-nav-group > .mud-nav-link.mud-expanded .mud-icon-root {
            color: var(--nav-active-text) !important;
        }

/* Light mode active should use accent color, not white-on-light */
.modern-sidebar-light .modern-nav-item:hover,
.modern-sidebar-light .modern-nav-item:focus,
.modern-sidebar-light .modern-nav-item:active,
.modern-sidebar-light .modern-nav-item.active,
.modern-sidebar-light .modern-nav-item.mud-nav-link-active,
.modern-sidebar-light .modern-nav-item.mud-selected,
.modern-sidebar-light .modern-nav-item[aria-current="page"] {
    color: var(--nav-accent) !important;
}

    .modern-sidebar-light .modern-nav-item:hover .mud-icon-root,
    .modern-sidebar-light .modern-nav-item:focus .mud-icon-root,
    .modern-sidebar-light .modern-nav-item:active .mud-icon-root,
    .modern-sidebar-light .modern-nav-item.active .mud-icon-root,
    .modern-sidebar-light .modern-nav-item.mud-nav-link-active .mud-icon-root,
    .modern-sidebar-light .modern-nav-item.mud-selected .mud-icon-root,
    .modern-sidebar-light .modern-nav-item[aria-current="page"] .mud-icon-root {
        color: var(--nav-accent) !important;
    }

/* =========================================================
   Disabled
   ========================================================= */

.modern-sidebar .modern-nav-item.mud-disabled,
.modern-sidebar .modern-nav-item[aria-disabled="true"] {
    opacity: 0.45 !important;
    filter: grayscale(0.35);
    pointer-events: none;
}

/* =========================================================
   Nav groups
   ========================================================= */

.modern-nav-group {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.15rem 0 !important;
    overflow: hidden !important;
}

    .modern-nav-group .mud-nav-link {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .modern-nav-group .mud-collapse-container {
        overflow-x: hidden !important;
    }

        .modern-nav-group .mud-collapse-container .modern-nav-item {
            margin-left: 0.35rem !important;
            width: calc(100% - 0.35rem) !important;
            max-width: calc(100% - 0.35rem) !important;
        }

/* =========================================================
   Theme row
   ========================================================= */

.modern-theme-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0 0.65rem;
    margin-top: 0.75rem;
    border-radius: 14px;
    color: var(--nav-text);
    font-size: 0.94rem;
    font-weight: 600;
    overflow: hidden;
}

    .modern-theme-row .mud-switch {
        margin: 0 !important;
        flex-shrink: 0;
    }

    .modern-theme-row span {
        min-width: 0;
        display: flex;
        align-items: center;
        line-height: 44px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: inherit;
    }

/* =========================================================
   Logout
   ========================================================= */

.modern-logout-link {
    margin-top: 0.15rem !important;
    color: var(--nav-logout) !important;
}

.modern-sidebar .modern-logout-link .mud-nav-link-icon,
.modern-sidebar .modern-logout-link .mud-icon-root {
    color: var(--nav-logout) !important;
}

.modern-sidebar .modern-logout-link:hover,
.modern-sidebar .modern-logout-link:focus,
.modern-sidebar .modern-logout-link:focus-visible,
.modern-sidebar .modern-logout-link:active {
    background: var(--nav-logout-soft) !important;
    background-color: var(--nav-logout-soft) !important;
    color: var(--nav-logout) !important;
    box-shadow: inset 3px 0 0 var(--nav-logout) !important;
}

    .modern-sidebar .modern-logout-link:hover .mud-nav-link-icon,
    .modern-sidebar .modern-logout-link:focus .mud-nav-link-icon,
    .modern-sidebar .modern-logout-link:focus-visible .mud-nav-link-icon,
    .modern-sidebar .modern-logout-link:active .mud-nav-link-icon,
    .modern-sidebar .modern-logout-link:hover .mud-icon-root,
    .modern-sidebar .modern-logout-link:focus .mud-icon-root,
    .modern-sidebar .modern-logout-link:focus-visible .mud-icon-root,
    .modern-sidebar .modern-logout-link:active .mud-icon-root {
        color: var(--nav-logout) !important;
    }

/* =========================================================
   Mobile nav button
   ========================================================= */

.mobile-nav-toggle {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 1300;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.mud-theme-dark .mobile-nav-toggle,
html.dark .mobile-nav-toggle,
body.dark .mobile-nav-toggle {
    background: #111827;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.10);
}

/* =========================================================
   Mobile drawer
   ========================================================= */

@media (max-width: 960px) {
    .modern-sidebar,
    .modern-sidebar .mud-drawer,
    .modern-sidebar .mud-drawer-content,
    .modern-sidebar .modern-nav {
        width: var(--app-mobile-sidebar-width, min(86vw, 300px)) !important;
        max-width: var(--app-mobile-sidebar-width, min(86vw, 300px)) !important;
        overflow-x: hidden !important;
    }

        .modern-sidebar .mud-drawer-content {
            padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom)) !important;
        }

    .modern-sidebar-logo {
        height: 118px !important;
        margin-bottom: 1.1rem !important;
    }

        .modern-sidebar-logo img,
        .modern-sidebar-logo .mud-image,
        .modern-sidebar-logo .mud-image-img {
            max-width: 215px !important;
            max-height: 98px !important;
        }

    .modern-sidebar-logo-small img,
    .modern-sidebar-logo-small .mud-image,
    .modern-sidebar-logo-small .mud-image-img {
        max-width: 195px !important;
        max-height: 92px !important;
    }

    .modern-sidebar-logo-wide img,
    .modern-sidebar-logo-wide .mud-image,
    .modern-sidebar-logo-wide .mud-image-img {
        max-width: 220px !important;
        max-height: 100px !important;
    }

    .modern-sidebar .modern-nav-item,
    .modern-sidebar .mud-nav-link.modern-nav-item,
    .modern-sidebar .modern-nav-group > .mud-nav-link {
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 16px !important;
        font-size: 0.96rem !important;
    }

        .modern-sidebar .modern-nav-item .mud-nav-link-icon,
        .modern-sidebar .modern-nav-item .mud-icon-root,
        .modern-sidebar .modern-nav-group > .mud-nav-link .mud-nav-link-icon,
        .modern-sidebar .modern-nav-group > .mud-nav-link .mud-icon-root {
            height: 48px !important;
            min-height: 48px !important;
        }

        .modern-sidebar .modern-nav-item .mud-nav-link-text,
        .modern-sidebar .modern-nav-group > .mud-nav-link .mud-nav-link-text {
            min-height: 48px !important;
            line-height: 48px !important;
        }

    .modern-theme-row {
        height: 48px;
        min-height: 48px;
        border-radius: 16px;
    }

        .modern-theme-row span {
            line-height: 48px;
        }

    .mobile-nav-toggle {
        display: inline-flex;
    }
}

@media (max-width: 520px) {
    .modern-sidebar-logo {
        height: 105px !important;
        margin-bottom: 0.9rem !important;
    }

        .modern-sidebar-logo img,
        .modern-sidebar-logo .mud-image,
        .modern-sidebar-logo .mud-image-img {
            max-width: 195px !important;
            max-height: 88px !important;
        }

    .modern-sidebar-logo-small img,
    .modern-sidebar-logo-small .mud-image,
    .modern-sidebar-logo-small .mud-image-img {
        max-width: 180px !important;
        max-height: 84px !important;
    }

    .modern-sidebar .modern-nav-item,
    .modern-sidebar .mud-nav-link.modern-nav-item,
    .modern-sidebar .modern-nav-group > .mud-nav-link {
        padding: 0 0.8rem !important;
    }
}