/* sidebar.css — Unified sidebar styles shared across ALL authenticated pages.
   The sidebar HTML must use:
     - aside#unified-sidebar
     - .sidebar-link for nav items
     - .sidebar-label for text that hides on collapse
     - .sidebar-tooltip for hover tooltips when collapsed
     - .sidebar-toggle-btn for the toggle button
   The main content area must have class "unified-main". */

/* Base sidebar link styles */
.sidebar-link { color: rgba(255,255,255,0.7); transition: all 0.2s ease; position: relative; }
.sidebar-link:hover { background: rgba(255,255,255,0.1); color: white; }
.sidebar-link.active { background: rgba(255,255,255,0.18); color: white; }
.sidebar-link.active:hover { background: rgba(255,255,255,0.22); }

/* Sidebar dimensions + transitions */
#unified-sidebar { width: 16rem; transition: width 0.3s ease; }
.unified-main { margin-left: 16rem; transition: margin-left 0.3s ease; }

/* Collapsed state */
body.sidebar-collapsed #unified-sidebar { width: 5rem; }
body.sidebar-collapsed .unified-main { margin-left: 5rem; }

/* Labels hide when collapsed */
.sidebar-label { transition: opacity 0.2s ease, width 0.2s ease; white-space: nowrap; }
body.sidebar-collapsed .sidebar-label { opacity: 0; width: 0; overflow: hidden; }

/* Links center icons when collapsed */
body.sidebar-collapsed .sidebar-link { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; gap: 0; }

/* Tooltips (visible only when collapsed) */
.sidebar-tooltip {
    display: none; position: absolute; left: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.9); color: #fff; padding: 0.45rem 0.65rem; border-radius: 0.5rem;
    font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 60;
}
body.sidebar-collapsed .sidebar-link:hover .sidebar-tooltip { display: block; opacity: 1; }

/* Toggle button rotation */
.sidebar-toggle-btn { transition: transform 0.3s ease; }
body.sidebar-collapsed .sidebar-toggle-btn { transform: rotate(180deg); }