/* ========================================================================== Lake Mead Admin — App Shell Fixed sidebar + blurred sticky topbar + scrolling main region. Shell state lives as classes on , set by shell.js: .is-collapsed desktop icon rail .is-open mobile drawer open ========================================================================== */ /* --- Frame ---------------------------------------------------------------- */ .app { min-height: 100vh; padding-left: var(--sidebar-w); transition: padding-left var(--t-base) var(--ease); } body.is-collapsed .app { padding-left: var(--sidebar-w-collapsed); } /* ========================================================================== SIDEBAR ========================================================================== */ .sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-sidebar); width: var(--sidebar-w); display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--line); transition: width var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-base) var(--ease); } body.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); } /* --- Brand ---------------------------------------------------------------- */ .sidebar__brand { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h); padding: 0 var(--sp-5); overflow: hidden; } .brand-mark { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); /* The aqua→blue diagonal is the signature gradient from the portfolio. */ background: linear-gradient(135deg, var(--aqua), var(--blue)); color: var(--on-accent); font-weight: var(--fw-heavy); font-size: var(--fs-md); letter-spacing: var(--track-tight); } .brand-name { font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: var(--track-tight); color: var(--ink); white-space: nowrap; } /* The rail toggle lives in the brand row on desktop. */ .sidebar__pin { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--muted); font-size: var(--fs-sm); transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); } .sidebar__pin:hover { background: var(--sidebar-hover); color: var(--ink); } /* --- Nav ------------------------------------------------------------------ */ .sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) var(--sp-3) var(--sp-5); } /* --- Collapsible sections ------------------------------------------------- Each group is a