/* ======================================== SIDEBAR ======================================== */ /* CSS Custom Properties for sidebar dimensions */ :root { --sidebar-width: 256px; /* 16rem / w-64 */ --sidebar-collapsed-width: 64px; /* 4rem / w-16 */ --sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Base sidebar: width driven by CSS variable (no Tailwind width classes) */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); position: relative; width: var(--sidebar-width); } /* Mobile: transition transform only (for drawer slide) */ @media (max-width: 1023px) { .sidebar { transition: transform var(--sidebar-transition); } } /* Desktop: transition width only (for collapse), NO transition on other props */ @media (min-width: 1024px) { .sidebar { transition: width var(--sidebar-transition); } /* Disable transition during initial load to prevent animated collapse */ html.sidebar-no-transition .sidebar { transition: none !important; } } /* ======================================== COLLAPSIBLE SIDEBAR (Desktop) ======================================== */ /* On desktop, prevent translate-x-0 from creating a containing block for position:fixed children (dropup menus). translate-x-0 maps to transform: translateX(0px) which is NOT transform: none and traps fixed-positioned descendants inside the sidebar's overflow:hidden. Also no transition on children — only the sidebar width transitions. */ @media (min-width: 1024px) { .sidebar { transform: none !important; } /* Ensure child elements don't inherit/cause stray transitions during collapse */ .sidebar[data-collapsed="true"] .sidebar-link, .sidebar[data-collapsed="true"] nav, .sidebar[data-collapsed="true"] turbo-frame, .sidebar[data-collapsed="true"] .sidebar-bottom-section { transition: none !important; } } /* FOUC prevention: html.sidebar-collapsed is set by inline