/* ================================
   SIDEBAR — FULL COMPONENT STYLES
   ================================ */

/* Default sidebar width */
.sidebar-panel {
    width: var(--sidebar-width-expanded);
    flex-shrink: 0;
    position: relative;
    top: 0;
    height: auto; /* ← allow natural height */
    overflow: visible;
    background: #fff;
}


/* Arrow rotation */
.rotate-arrow {
    transition: transform .3s ease;
}
.rotate-arrow.rotated {
    transform: rotate(180deg);
}


/* Child items: custom divider aligned with text */
.child-item {
    position: relative;
    padding-left: 3rem !important;   /* pixel-perfect text indent */
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;  /* remove Bootstrap divider */
}

/* Divider line that starts at same indent as text */
.child-item::before {
    content: "";
    position: absolute;
    left: 3rem;                      /* same as text indent */
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #ddd;   /* custom divider */
    pointer-events: none;
    box-sizing: border-box;
}



/* ================================
   MOBILE PORTRAIT — COLLAPSED + EXPANDED
   ================================ */
@media (max-width: 650px) { /* (max-width: 575.98px) and (orientation: portrait) */

    /* COLLAPSED (default) */
    .sidebar-panel {
        width: var(--sidebar-width-collapsed) !important;
    }

    .sidebar-panel:not(.expanded) #sidebarAccordion .list-group-item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .sidebar-panel:not(.expanded) #sidebarAccordion .list-group-item i {
        margin-right: 0 !important;
    }

    /* Hide labels + arrows when collapsed */
    .sidebar-panel:not(.expanded) #sidebarAccordion .list-group-item span,
    .sidebar-panel:not(.expanded) #sidebarAccordion .rotate-arrow,
    .sidebar-panel:not(.expanded) #sidebarAccordion .child-item {
        display: none !important;
    }

    /* DO NOT override Bootstrap collapse behaviour */
    /* No .collapse { display:block } anywhere */

    /* EXPANDED */
    .sidebar-panel.expanded {
        width: var(--sidebar-width-expanded) !important;
    }

    .sidebar-panel.expanded #sidebarAccordion .list-group-item {
        justify-content: flex-start !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        text-align: left !important;
    }

    .sidebar-panel.expanded #sidebarAccordion .list-group-item i {
        margin-right: .5rem !important;
    }

    /* Show labels + arrows again */
    .sidebar-panel.expanded #sidebarAccordion .list-group-item span,
    .sidebar-panel.expanded #sidebarAccordion .rotate-arrow {
        display: inline !important;
    }

    /* Child items should only appear when their parent is open */
    .sidebar-panel.expanded #sidebarAccordion .child-item {
        display: block !important;
    }

    /* Indent child items in expanded mode (mobile portrait) */
    .sidebar-panel.expanded #sidebarAccordion .child-item {
        padding-left: 2.5rem !important; /* matches desktop-style indentation */
    }




}