/* ===================================================== COLLAPSIBLE ACCOUNT / ADMIN SIDEBAR ----------------------------------------------------- Shrinks the shared _AccountSidebar to an icon-only rail so wide admin lists (Organizations, Products, Locations …) get the space back. Loaded AFTER @RenderSection("Styles") in _Layout so the collapsed grid-template-columns overrides beat the per-page !important rules in admin-organizations.css and friends. The state class lives on and is set by an inline script in the head, so a collapsed sidebar never flashes open on navigation. ===================================================== */ :root { --wv-sidebar-rail: 76px; } /* ---------- Toggle button ---------- */ .sidebar-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin-bottom: 10px; padding: 0 12px; border: 1px solid #e4eaf3; border-radius: 10px; background: #f8fafc; color: #475569; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; text-align: left; transition: background .2s ease, color .2s ease, border-color .2s ease; } .sidebar-toggle:hover { border-color: #c7d7f5; background: #f3f7ff; color: #2453ff; } .sidebar-toggle i { width: 20px; flex: 0 0 20px; text-align: center; font-size: 14px; transition: transform .2s ease; } /* ---------- Collapsed layout columns ---------- */ html.sidebar-collapsed .account-section > .container > .account-grid, html.sidebar-collapsed .dashboard-layout, html.sidebar-collapsed .org-dashboard-layout { grid-template-columns: var(--wv-sidebar-rail) minmax(0, 1fr) !important; } /* ---------- Collapsed rail ---------- */ html.sidebar-collapsed .account-sidebar { width: 100% !important; padding-left: 8px; padding-right: 8px; overflow: visible; } html.sidebar-collapsed .sidebar-toggle { justify-content: center; gap: 0; padding: 0; } html.sidebar-collapsed .sidebar-toggle span { display: none; } html.sidebar-collapsed .sidebar-toggle i { transform: rotate(180deg); } /* Labels and the trailing chevrons go; icons centre in the rail. */ html.sidebar-collapsed .account-sidebar ul li a span, html.sidebar-collapsed .account-sidebar ul li a .fa-chevron-right, html.sidebar-collapsed .account-sidebar .logout-btn span { display: none; } html.sidebar-collapsed .account-sidebar ul li, html.sidebar-collapsed .account-sidebar ul li a, html.sidebar-collapsed .account-sidebar .logout-btn { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .account-sidebar ul li a, html.sidebar-collapsed .account-sidebar .logout-btn { position: relative; } html.sidebar-collapsed .account-sidebar ul li.sidebar-divider { padding: 0; } /* ---------- Hover label for the collapsed rail ---------- */ html.sidebar-collapsed .account-sidebar ul li a[data-label]::after, html.sidebar-collapsed .account-sidebar .logout-btn[data-label]::after { content: attr(data-label); position: absolute; top: 50%; left: calc(100% + 12px); z-index: 60; padding: 6px 10px; border-radius: 8px; background: #0b1b4d; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .15s ease; } html.sidebar-collapsed .account-sidebar ul li a:hover::after, html.sidebar-collapsed .account-sidebar ul li a:focus-visible::after, html.sidebar-collapsed .account-sidebar .logout-btn:hover::after, html.sidebar-collapsed .account-sidebar .logout-btn:focus-visible::after { opacity: 1; } /* ---------- Small screens ---------- */ /* Below 991px every layout already stacks to a single column, so the rail would only hide the labels without buying any width. Stay expanded. */ @media (max-width: 991px) { .sidebar-toggle { display: none; } html.sidebar-collapsed .account-section > .container > .account-grid, html.sidebar-collapsed .dashboard-layout, html.sidebar-collapsed .org-dashboard-layout { grid-template-columns: 1fr !important; } html.sidebar-collapsed .account-sidebar ul li a span, html.sidebar-collapsed .account-sidebar ul li a .fa-chevron-right, html.sidebar-collapsed .account-sidebar .logout-btn span { display: inline; } html.sidebar-collapsed .account-sidebar ul li, html.sidebar-collapsed .account-sidebar ul li a, html.sidebar-collapsed .account-sidebar .logout-btn { justify-content: flex-start; gap: 12px; padding-left: 14px; padding-right: 14px; } html.sidebar-collapsed .account-sidebar ul li a::after, html.sidebar-collapsed .account-sidebar .logout-btn::after { content: none; } }