/* =============================================================
   sf-overrides.css
   Loaded AFTER the Syncfusion theme link in App.razor so these
   rules win the cascade. Uses Syncfusion's documented classes.
   ============================================================= */

/* ── Mobile hamburger menu ──────────────────────────────────── */

/* Outer wrapper + hamburger button row */
.nav-mobile-hamburger .e-menu-wrapper,
.nav-mobile-hamburger .e-menu-wrapper.e-hamburger {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    box-shadow: none !important;
}

/* The ≡ hamburger button */
.nav-mobile-hamburger .e-hburger {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-mobile-hamburger .e-hbars,
.nav-mobile-hamburger .e-hbars::before,
.nav-mobile-hamburger .e-hbars::after {
    background-color: var(--text-primary) !important;
}

.nav-mobile-hamburger .e-menu-text {
    color: var(--text-primary) !important;
}

/* Menu container (the documented customization class) */
.nav-mobile-hamburger .e-menu-container {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--nav-border) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
    z-index: 9999 !important;
}

/* Popup variant */
.nav-mobile-hamburger .e-menu-container.e-menu-popup {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--nav-border) !important;
}

/* All menu items */
.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* Icons */
.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item .e-menu-icon {
    color: var(--text-primary) !important;
}

/* Caret icon */
.nav-mobile-hamburger .e-menu-container ul .e-menu-item .e-caret::before {
    color: var(--text-primary) !important;
}

/* Focused item */
.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item.e-focused {
    background-color: var(--accent-warm-bg) !important;
    color: var(--accent-warm) !important;
}

.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item.e-focused .e-menu-icon,
.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item.e-focused .e-caret::before {
    color: var(--accent-warm) !important;
}

/* Selected item */
.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item.e-selected {
    background-color: var(--accent-warm-bg) !important;
    color: var(--accent-warm) !important;
}

.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon {
    color: var(--accent-warm) !important;
}

/* Hover (for mouse users) */
.nav-mobile-hamburger .e-menu-container .e-ul .e-menu-item:hover {
    background-color: var(--accent-warm-bg) !important;
    color: var(--accent-warm) !important;
}

/* Separator */
.nav-mobile-hamburger .e-menu-container .e-separator {
    border-color: var(--nav-border) !important;
}