/* ==========================================================================
   1. GLOBAL SYSTEM VARIABLES OVERRIDE (FORCES LIGHT STATES ON ALL LEVELS)
   ========================================================================== */
.rz-panel-menu, .rz-sidebar {
    /* 🛑 Breaks Radzen's deep-coded dark states at the framework root level */
    --rz-panel-menu-item-selected-background-color: #e0f2fe !important;
    --rz-panel-menu-item-selected-color: #0369a1 !important;
    --rz-panel-menu-item-hover-background-color: #f1f5f9 !important;
    --rz-panel-menu-item-hover-color: #0284c7 !important;
    --rz-panel-menu-item-background-color: transparent !important;
    --rz-panel-menu-item-color: #0f172a !important;
}

    /* ==========================================================================
   2. RADZEN NAVIGATION PANEL & INDENTATION MANAGEMENT
   ========================================================================== */

    /* Reset Radzen's aggressive sub-menu shifting */
    .rz-panel-menu ul ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

/* Level Indentations */
.level-0 .rz-navigation-item-link {
    padding-left: 16px !important;
}

.level-1 .rz-navigation-item-link {
    padding-left: 32px !important;
}

.level-2 .rz-navigation-item-link {
    padding-left: 48px !important;
}

.level-deep .rz-navigation-item-link {
    padding-left: 64px !important;
}

/* ==========================================================================
   3. NESTED SIDEBAR BACKGROUND GRADATIONS (Darker Step Shades)
   ========================================================================== */

/* Base Item Styles */
.rz-navigation-item-link {
    color: #0f172a !important;
}

/* Level 0: Main root items (Distinct light-medium slate grey) */
.level-0 > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    background-color: #f1f5f9 !important;
}

/* Level 1: First nested sub-menu tier (One step darker) */
.level-1 > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    background-color: #e2e8f0 !important;
}

/* Level 2: Second nested sub-menu tier (Two steps darker) */
.level-2 > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    background-color: #cbd5e1 !important;
}

/* Level 3 & Deeper: Deepest tier fallback */
.level-deep > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    background-color: #94a3b8 !important;
    color: #ffffff !important; /* Inverts font to white here for readability */
}

/* ==========================================================================
   4. HOVER AND ACTIVE STATES (CRITICAL SPECIFICITY OVERRIDES)
   ========================================================================== */

/* HOVER STATE: Targets the link and wrapper cleanly to reveal the hover light shade */
.rz-panel-menu .rz-navigation-item-link:hover,
.rz-panel-menu .rz-navigation-item-wrapper:hover > .rz-navigation-item-link,
.rz-navigation-item-link:hover {
    background-color: #e2e8f0 !important; /* Visible light grey-blue highlight on hover */
    color: #0284c7 !important; /* Changes text to Wegin blue on hover */
}

/* SELECTED STATE: Crushes the framework dark box completely */
.rz-panel-menu .rz-navigation-item-wrapper.rz-state-selected,
.rz-panel-menu .rz-state-selected,
.rz-navigation-item-wrapper.rz-state-selected {
    background-color: transparent !important;
    border-left: 4px solid #0284c7 !important; /* Crisp blue vertical indicator bar */
}

    /* SELECTED LINK TARGET: Applies the crisp sky-blue tint styling */
    .rz-panel-menu .rz-state-selected > .rz-navigation-item-wrapper > .rz-navigation-item-link,
    .rz-panel-menu .rz-navigation-item-wrapper.rz-state-selected > .rz-navigation-item-link,
    .rz-navigation-item-link.rz-state-focused,
    .rz-navigation-item-link.rz-state-active {
        background-color: #e0f2fe !important; /* Premium ultra-light sky blue tint */
        color: #0369a1 !important; /* Dark corporate navy text */
        font-weight: 800 !important; /* Extra bold active selection font */
    }

/* Forces structural text and layout vectors to copy the font colors */
.rz-navigation-item-icon,
.rz-navigation-item-text {
    color: inherit !important;
}

/* ==========================================================================
   5. GLOBAL CONTAINER HOOKS & RESET FLICKERS
   ========================================================================== */

.rz-sidebar {
    background-color: #f1f5f9 !important;
}

.rz-header {
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
}

.rz-footer {
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
}

    .rz-footer .rz-text {
        margin: 0 !important;
    }

/* Clear focus animations that delay rendering shifts */
.rz-navigation-item-link:focus,
.rz-navigation-item-link:active,
.rz-panel-menu .rz-navigation-item-wrapper:focus-within > .rz-navigation-item-link,
.rz-navigation-item-link,
.rz-navigation-item-text,
.rz-navigation-item-icon {
    outline: none !important;
    box-shadow: none !important;
    transition: none !important; /* Instant color snap, stopping dark flickers */
}
/* ==========================================================================
   6. CUSTOM THEME SCROLLBAR STYLING (FOR MAIN BODY & SIDE PANEL)
   ========================================================================== */

/* --- A. Modern Standard Styles (For Firefox & Safari/Chrome compatibility) --- */
.layout-body-wrapper,
.rz-sidebar,
.rz-sidebar > div {
    scrollbar-width: thin !important; /* Makes scrollbars thin and elegant */
    scrollbar-color: #cbd5e1 transparent !important; /* Thumb: Slate Grey | Track: Transparent */
}

    /* --- B. WebKit Engines Styles (For Google Chrome, Microsoft Edge, and Opera) --- */

    /* 1. Define the total width and height of the scrollbar tracks */
    .layout-body-wrapper::-webkit-scrollbar,
    .rz-sidebar::-webkit-scrollbar,
    .rz-sidebar > div::-webkit-scrollbar {
        width: 8px !important; /* Width of vertical scrollbar */
        height: 8px !important; /* Height of horizontal scrollbar */
    }

    /* 2. Style the underlying track background (Keep it transparent or hidden) */
    .layout-body-wrapper::-webkit-scrollbar-track,
    .rz-sidebar::-webkit-scrollbar-track,
    .rz-sidebar > div::-webkit-scrollbar-track {
        background: transparent !important;
        border-radius: 10px !important;
    }

    /* 3. Style the Draggable Handle (Thumb) - Matching your medium slate-grey theme */
    .layout-body-wrapper::-webkit-scrollbar-thumb,
    .rz-sidebar::-webkit-scrollbar-thumb,
    .rz-sidebar > div::-webkit-scrollbar-thumb {
        background-color: #cbd5e1 !important; /* Clean slate-grey handle */
        border-radius: 10px !important; /* Smooth rounded capsule shape */
        border: 1px solid transparent !important;
    }

        /* 4. Hover State: Make the scrollbar handle light blue when mouse passes over it */
        .layout-body-wrapper::-webkit-scrollbar-thumb:hover,
        .rz-sidebar::-webkit-scrollbar-thumb:hover,
        .rz-sidebar > div::-webkit-scrollbar-thumb:hover {
            background-color: #93c5fd !important; /* Smoothly switches to a soft blue highlight */
        }

        /* 5. Active Clicked State: Deep corporate blue when actively dragging */
        .layout-body-wrapper::-webkit-scrollbar-thumb:active,
        .rz-sidebar::-webkit-scrollbar-thumb:active,
        .rz-sidebar > div::-webkit-scrollbar-thumb:active {
            background-color: #0284c7 !important; /* Snaps to corporate blue when dragging */
        }

/* ==========================================================================
   7. COMPACT MENU ITEM SPACING (REDUCE GAP)
   ========================================================================== */
.rz-panel-menu .rz-navigation-item-link {
    /* Controls the vertical height. Default is usually 12px-16px. */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    /* Ensures the item height collapses nicely around the smaller padding */
    min-height: unset !important;
    height: auto !important;
}

/* Optional: If your text/icons look squished against the item edges, 
   you can reduce the vertical margin on the text container itself */
.rz-panel-menu .rz-navigation-item-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important; /* Keeps text centered and crisp */
}
/* ==========================================================================
   8. ANDROID DVH VIEWPORT SYSTEM & SIDE-BY-SIDE FIXED POSITIONING
   ========================================================================== */
html, body, app, .rz-layout {
    height: 100dvh !important; /* Adapts cleanly to dynamic Android browser bars */
    max-height: 100dvh !important;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
}

/* Enforces Radzen's internal grid panels to dynamically fit exactly within our dvh footprint */
.rz-layout {
    display: grid !important; /* Re-establishes structural framework grids */
}

/* Restores layout balance on small touch screens */
@media (max-width: 768px) {
    .rz-footer {
        z-index: 1000;
        background-color: #ffffff !important;
    }
}