/* Base styles for Radzen Blazor */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure layout fills viewport */
.rz-layout {
    min-height: 100vh;
}

/* Header - vertically center all children */
.rz-header {
    display: flex;
    align-items: center;
}

/* Material Symbols - ensure they don't cause extra layout shifts if possible */
.material-symbols-outlined {
    font-display: block;
}

/* Invert custom icons in dark mode for better visibility */
/* Software-dark uses base-800/900 backgrounds, so icons need to be light */
.rz-theme-software-dark .rz-sidebar img[src*="/icons/"],
body.rz-theme-software-dark .rz-sidebar img[src*="/icons/"] {
    filter: brightness(0) invert(1);
}

/* In light mode, ensure icons are dark */
body.rz-theme-software img[src*="/icons/"] {
    filter: none;
}

/* Sidebar menu item icons - ensure proper styling */
.rz-navigation-item img {
    vertical-align: middle;
}

/* Fix nested menu items padding */
.rz-panel-menu .rz-navigation-item-wrapper {
    display: flex;
    align-items: center;
}

/* Sidebar Overrides - Force light sidebar ONLY in light mode using Radzen's own variables */
.rz-theme-software .rz-sidebar,
body.rz-theme-software .rz-sidebar {
    /* Base Sidebar Variables - using 100/200 for "softer" white */
    --rz-sidebar-background-color: var(--rz-base-100) !important;
    --rz-sidebar-color: var(--rz-text-color) !important;

    /* Panel Menu Variables */
    --rz-panel-menu-item-background-color: var(--rz-base-100) !important;
    --rz-panel-menu-item-color: var(--rz-text-color) !important;
    --rz-panel-menu-icon-color: var(--rz-text-color) !important;

    /* Nesting Levels - Force all to base-100 to avoid darkening */
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-100) !important;
    --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-100) !important;

    /* Interaction Styles */
    --rz-panel-menu-item-hover-background-color: var(--rz-base-200) !important;
    --rz-panel-menu-item-hover-color: var(--rz-primary) !important;

    --rz-panel-menu-item-active-background-color: var(--rz-base-200) !important;
    --rz-panel-menu-item-active-color: var(--rz-primary) !important;
    --rz-panel-menu-item-active-indicator: var(--rz-primary) !important;

    /* Text & Icon Specifics */
    --rz-panel-menu-item-2nd-level-color: var(--rz-text-color) !important;
    --rz-panel-menu-item-3rd-level-color: var(--rz-text-color) !important;
}

/* Hard reset for all backgrounds in sidebar to force the light theme */
.rz-theme-software .rz-sidebar *,
.rz-theme-software .rz-sidebar .rz-navigation-item-wrapper {
    background-color: transparent;
}

.rz-theme-software .rz-sidebar .rz-sidebar-content {
    background-color: var(--rz-base-100) !important;
}

/* Hard reset for nested background inherited from Radzen's specific level selectors */
.rz-theme-software .rz-panel-menu .rz-navigation-item-wrapper,
.rz-theme-software .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: inherit !important;
}

/* Ensure active marker is visible */
.rz-theme-software .rz-navigation-item-active::before,
.rz-theme-software .rz-navigation-item-wrapper-active::before {
    background-color: var(--rz-primary) !important;
}

/* Theme-aware Icon Filtering */
/* In light mode (Software), custom icons should be original or dark */
.rz-theme-software .rz-sidebar img[src*="/icons/"],
body.rz-theme-software .rz-sidebar img[src*="/icons/"] {
    filter: none !important;
}

/* In dark mode (Software-dark), custom icons should be bright/inverted */
.rz-theme-software-dark .rz-sidebar img[src*="/icons/"],
body.rz-theme-software-dark .rz-sidebar img[src*="/icons/"] {
    filter: brightness(0) invert(1) !important;
}

/* ========== DARK MODE SIDEBAR ========== */
/* Fix white-on-white by using proper dark theme colors */
.rz-theme-software-dark .rz-sidebar,
body.rz-theme-software-dark .rz-sidebar {
    --rz-sidebar-background-color: var(--rz-base-700) !important;
    --rz-sidebar-color: var(--rz-text-color) !important;

    /* Panel Menu Variables */
    --rz-panel-menu-item-background-color: var(--rz-base-700) !important;
    --rz-panel-menu-item-color: var(--rz-text-color) !important;
    --rz-panel-menu-icon-color: var(--rz-text-color) !important;

    /* Nesting Levels */
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-700) !important;
    --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-700) !important;

    /* Interaction Styles */
    --rz-panel-menu-item-hover-background-color: var(--rz-base-600) !important;
    --rz-panel-menu-item-hover-color: var(--rz-primary-lighter) !important;
    --rz-panel-menu-item-active-background-color: var(--rz-base-600) !important;
    --rz-panel-menu-item-active-color: var(--rz-primary-lighter) !important;
}

.rz-theme-software-dark .rz-sidebar .rz-sidebar-content {
    background-color: var(--rz-base-700) !important;
}

.rz-theme-software-dark .rz-sidebar *,
.rz-theme-software-dark .rz-sidebar .rz-navigation-item-wrapper {
    background-color: transparent;
}

/* Fix UI shifting caused by SmartPage loader */
.smart-page-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}