/* ================================================================
   SIDEBAR – Dark design with gold accent
   Matches the SD Bullion ERP sidebar redesign.
   Uses #menuComponent ID selector for maximum specificity to
   override Radzen theme (.rz-sidebar) and styles.css rules.
   ================================================================ */

/* ── Design tokens (scoped to sidebar) ─────────────────────────── */
#menuComponent,
.custom-menu-sidebar {
    --sidebar-w: 260px;
    --bg-deep:       var(--sidebar-color, #0f1117);
    --bg-hover:      #1e2538;
    --bg-active:     #1a3358;
    --accent:        #c9a84c;
    --accent-dim:    rgba(201,168,76,.12);
    --text-primary:  var(--sidebar-text, #e8eaf0);
    --text-secondary:var(--sidebar-text, #8b92a8);
    --text-muted:    #545d75;
    --border:        rgba(255,255,255,.06);
    --radius:        7px;
    --transition:    180ms ease;
}

/* ── Sidebar container ─────────────────────────────────────────── */
#menuComponent.rz-sidebar-expanded,
.custom-menu-sidebar.rz-sidebar-expanded {
    width: var(--sidebar-w) !important;
    max-width: none !important;
    background: var(--bg-deep) !important;
    border-right: 1px solid var(--border) !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'DM Sans', sans-serif !important;
}

#menuComponent.rz-sidebar,
.custom-menu-sidebar.rz-sidebar {
    background: var(--bg-deep) !important;
    color: var(--text-secondary) !important;
}

/* ── Scrollable nav area ───────────────────────────────────────── */
#menuComponent .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}
#menuComponent .sidebar-nav::-webkit-scrollbar       { width: 3px; }
#menuComponent .sidebar-nav::-webkit-scrollbar-thumb  { background: var(--text-muted); border-radius: 4px; }

/* ── Nav sections ──────────────────────────────────────────────── */
#menuComponent .nav-section {
    margin-bottom: 1px;
}

/* ── Section toggle (top-level buttons & links) ────────────────── */
#menuComponent .section-toggle {
    width: 100%;
    background: none !important;
    border: none !important;
    cursor: pointer;
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--radius);
    color: var(--text-secondary) !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.45;
    word-break: break-word;
    white-space: normal;
    text-align: left;
    text-decoration: none !important;
    transition: background var(--transition), color var(--transition);
}
#menuComponent .section-toggle:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
#menuComponent .section-toggle.open {
    color: var(--text-primary) !important;
}
#menuComponent .section-toggle.section-active {
    color: var(--text-primary) !important;
}

#menuComponent .section-label {
    flex: 1;
}

/* ── Chevron icon ──────────────────────────────────────────────── */
#menuComponent .chevron {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--text-muted);
    transition: transform var(--transition), color var(--transition);
}
#menuComponent .section-toggle.open .chevron {
    transform: rotate(180deg);
    color: var(--accent) !important;
}

/* ── Submenu (collapsible) ─────────────────────────────────────── */
#menuComponent .submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms cubic-bezier(.4,0,.2,1);
}
#menuComponent .submenu.open {
    max-height: 2000px;
}
#menuComponent .submenu-inner {
    padding: 2px 0 6px 14px;
    margin-left: 14px;
    border-left: 1.5px solid var(--border);
}

/* ── Leaf nav items ────────────────────────────────────────────── */
#menuComponent .nav-item {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.5;
    word-break: break-word;
    white-space: normal;
    text-decoration: none !important;
    position: relative;
    transition: background var(--transition), color var(--transition);
}
#menuComponent .nav-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
#menuComponent .nav-item.active {
    background: var(--bg-active) !important;
    color: var(--accent) !important;
    font-weight: 500;
}
#menuComponent .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2.5px;
    border-radius: 2px;
    background: var(--accent);
}
#menuComponent .nav-item.nav-item-label {
    cursor: default;
    color: var(--text-muted) !important;
}

/* ── Nested sub-sections (level 3 groups) ──────────────────────── */
#menuComponent .sub-section {
    margin-top: 2px;
}
#menuComponent .sub-section-toggle {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
    white-space: normal;
    text-transform: uppercase;
    letter-spacing: .06em;
    user-select: none;
    transition: background var(--transition), color var(--transition);
}
#menuComponent .sub-section-toggle:hover {
    background: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
}
#menuComponent .sub-section-toggle.open {
    color: var(--accent) !important;
}

#menuComponent .sub-arrow {
    margin-top: 2px;
    flex-shrink: 0;
    width: 11px !important;
    height: 11px !important;
    color: currentColor;
    transition: transform var(--transition);
}
#menuComponent .sub-section-toggle.open .sub-arrow {
    transform: rotate(90deg);
}
#menuComponent .sub-arrow-label {
    flex: 1;
}

#menuComponent .sub-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 250ms ease;
}
#menuComponent .sub-items.open {
    max-height: 800px;
}
#menuComponent .sub-items .nav-item {
    font-size: 12.5px !important;
}

/* ── Divider ───────────────────────────────────────────────────── */
#menuComponent .nav-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

/* ── Footer ────────────────────────────────────────────────────── */
#menuComponent .sidebar-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 10px !important;
    color: var(--text-muted) !important;
    letter-spacing: .04em;
    flex-shrink: 0;
}
#menuComponent .sidebar-footer span {
    color: var(--accent) !important;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #menuComponent.rz-sidebar,
    .custom-menu-sidebar.rz-sidebar {
        position: fixed;
        left: -260px;
        top: var(--rz-header-min-height, 51px);
        height: calc(100vh - var(--rz-header-min-height, 51px));
        transition: left 0.3s ease;
    }
    #menuComponent.rz-sidebar.open,
    #menuComponent.rz-sidebar-expanded,
    .custom-menu-sidebar.rz-sidebar.open,
    .custom-menu-sidebar.rz-sidebar-expanded {
        left: 0;
    }
}

/* Filter Sidebar Specific Styling */
.filter-sidebar {
    background-color: var(--sidebar-color) !important;
    color: var(--sidebar-text) !important;
}

.filter-sidebar * {
    color: var(--sidebar-text) !important;
}

.filter-sidebar .rz-text {
    color: var(--sidebar-text) !important;
}

.filter-sidebar .rz-accordion-item-header {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--sidebar-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.filter-sidebar .rz-accordion-item-content {
    color: #000000 !important; /* Black text for off-white background */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.filter-sidebar .rz-accordion-item-title {
    color: var(--sidebar-text) !important;
}

.filters-container {
    background-color: var(--sidebar-color);
    color: var(--sidebar-text);
}

.filters-container .rz-text {
    color: var(--sidebar-text) !important;
}

.filters-container .rz-accordion-item-header {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--sidebar-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.filters-container .rz-accordion-item-content {
    color: #000000 !important; /* Black text for off-white background */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.filters-container .rz-accordion-item-title {
    color: var(--sidebar-text) !important;
}

/* Ensure all text in the filter sidebar is visible */
.filters-container * {
    color: var(--sidebar-text) !important;
}

/* Override any dark text colors specifically for the filter sidebar */
.filters-container .rz-accordion .rz-accordion-item .rz-accordion-item-header {
    color: var(--sidebar-text) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.filters-container .rz-accordion .rz-accordion-item .rz-accordion-item-content {
    color: #000000 !important; /* Black text for off-white background */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Additional overrides for better visibility */
.filter-sidebar .rz-accordion .rz-accordion-item .rz-accordion-item-header-text,
.filter-sidebar .rz-accordion .rz-accordion-item .rz-accordion-item-header .rz-accordion-item-title,
.filter-sidebar .rz-accordion .rz-accordion-item .rz-accordion-item-content,
.filter-sidebar .rz-accordion .rz-accordion-item .rz-accordion-item-content *,
.filter-sidebar ul,
.filter-sidebar li,
.filter-sidebar span,
.filter-sidebar div {
    color: var(--sidebar-text) !important;
}

/* Ensure Radzen Text components use correct color */
.filter-sidebar .rz-text,
.filter-sidebar .RadzenText,
.filters-container .rz-text,
.filters-container .RadzenText {
    color: var(--sidebar-text) !important;
}

/* Additional Radzen accordion overrides for better contrast */
.filter-sidebar .rz-accordion-item,
.filters-container .rz-accordion-item {
    margin-bottom: 2px !important;
}

.filter-sidebar .rz-accordion-item-header-content,
.filter-sidebar .rz-accordion-item-title,
.filters-container .rz-accordion-item-header-content,
.filters-container .rz-accordion-item-title {
    color: var(--sidebar-text) !important;
    font-weight: bold !important;
}

/* Force all accordion text to be white */
.filter-sidebar .rz-accordion .rz-accordion-item .rz-accordion-item-header *,
.filter-sidebar .rz-accordion .rz-accordion-item .rz-accordion-item-content *,
.filters-container .rz-accordion .rz-accordion-item .rz-accordion-item-header *,
.filters-container .rz-accordion .rz-accordion-item .rz-accordion-item-content * {
    color: var(--sidebar-text) !important;
}

/* Hover effects for better UX */
.filter-sidebar .rz-accordion-item-header:hover,
.filters-container .rz-accordion-item-header:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Expanded state styling */
.filter-sidebar .rz-accordion-item-expanded .rz-accordion-item-header,
.filters-container .rz-accordion-item-expanded .rz-accordion-item-header {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Direct Radzen accordion header class override */
.filter-sidebar .rz-accordion-header,
.filters-container .rz-accordion-header {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: var(--sidebar-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.filter-sidebar .rz-accordion-header:hover,
.filters-container .rz-accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.filter-sidebar .rz-accordion-header *,
.filters-container .rz-accordion-header * {
    color: var(--sidebar-text) !important;
}

/* Direct Radzen accordion content wrapper class override */
.filter-sidebar .rz-accordion-content-wrapper,
.filters-container .rz-accordion-content-wrapper {
    color: #000000 !important; /* Black text for off-white background */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.filter-sidebar .rz-accordion-content-wrapper *,
.filters-container .rz-accordion-content-wrapper * {
    color: #000000 !important; /* Black text for all content elements */
}

/* Override any previous rules that force white text in content areas */
.filter-sidebar .rz-accordion-content,
.filter-sidebar .rz-accordion-item-content,
.filters-container .rz-accordion-content,
.filters-container .rz-accordion-item-content {
    color: #000000 !important; /* Black text for content */
    /* No background override - let it keep the natural off-white background */
}

.filter-sidebar .rz-accordion-content *,
.filter-sidebar .rz-accordion-item-content *,
.filters-container .rz-accordion-content *,
.filters-container .rz-accordion-item-content * {
    color: #000000 !important; /* Black text for all nested elements */
}

/* Keep accordion items spaced */
.filter-sidebar .rz-accordion-item,
.filters-container .rz-accordion-item {
    margin-bottom: 2px !important;
}

/* Constrain multiselect dropdown popup height so it doesn't grow
   unbounded and obscure page content. The popup is portaled to
   <RadzenComponents /> at the DOM root by Radzen's popup service,
   so this rule must be global (not scoped to .filter-sidebar). */
.rz-multiselect-items-wrapper {
    max-height: 200px !important;
}