/* Intentionally minimal — the UI theme is stock Bootstrap 5 (the same "Dashboard" example layout prepaidHmoProject uses: navbar-dark bg-dark top bar, bg-light sidebar). Add overrides here only when Bootstrap's defaults genuinely don't cover a case. */ /* Rotates the sidebar's collapsible-group chevron based on the aria-expanded state Bootstrap's collapse plugin already maintains on the toggler — no extra JS needed. */ .sidebar .nav-link .bi-chevron-down { transition: transform 0.2s ease; } .sidebar .nav-link[aria-expanded="false"] .bi-chevron-down { transform: rotate(-90deg); } /* Icon-only collapsed sidebar, toggled by #sidebarToggle in the navbar. Keyed off .sidebar-collapsed (not .sidebar itself) so the inline script in base.html's can apply it before first paint. Folder groups have no icon of their own, so their header row (label + chevron) is hidden entirely and its contents forced open -- the collapsed sidebar becomes one flat column of icons rather than icon-only folders. */ html.sidebar-collapsed .sidebar { flex: 0 0 4.5rem; max-width: 4.5rem; width: 4.5rem; transition: max-width 0.15s ease; } html.sidebar-collapsed .main-content { flex: 1 0 0%; max-width: 100%; } html.sidebar-collapsed .sidebar .nav-link-label, html.sidebar-collapsed .sidebar .sidebar-group-header { display: none; } html.sidebar-collapsed .sidebar .collapse { display: block !important; } html.sidebar-collapsed .sidebar .nav-link { text-align: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .sidebar .nav-link i { font-size: 1.15rem; } /* The footer used to sit in normal document flow right after the sidebar/ main-content row, so toggling the icon-only collapse -- which force-expands every nav group via the rule above, changing the sidebar's rendered height -- visibly shifted the footer up/down. Pinning it to the viewport bottom decouples it from that reflow entirely; app-shell reserves matching bottom padding so page content never sits underneath it. */ .app-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; } .app-shell { padding-bottom: 4rem; }