/* assets/css/components/sidebar-v2.css — sidebar-v2 accordion shell ( partial + Help & Legal section + collapse toggle). Linked from includes/header.php ONLY while the sidebar-v2 flag is on: its .sidebar-* selectors are the same class names used by the legacy sidebar (styled by layouts/sidebar.css, which loads BEFORE this sheet, so equal-specificity rules here win the cascade). Never load it standalone. */ /* ── CAMS2-exact section rows ───────────────────────────────────────────── CAMS2 sidebar spec (proposal audit): nav rows py-2.5 ≈ 40px, 13px text, gap-3, 20px icons, rounded-lg hovers, active = brand/10 bg + brand text, accordion motion 280ms. Compact density shrinks to 34/32px. Show/hide still runs through layouts/sidebar.css's max-height body mechanic. */ .sidebar-section-title { min-height: 40px; padding: var(--spacing-2, 0.5rem) 14px; font-size: 13px; gap: var(--spacing-3, 0.75rem); border-top-color: var(--border-subtle, #e3e3e3); border-radius: var(--radius-md, 0.5rem); transition: background 280ms ease, color 280ms ease; } .sidebar-section-title:hover { background: var(--bg-tertiary, #f3f4f6); } .sidebar-section-title > i:first-child { width: 20px; font-size: 15px; text-align: center; } .sidebar-section-chevron { transition: transform 280ms ease; } /* Product direction: no bold sidebar text, no left accent border — active is the brand/10 wash + brand text only. */ .sidebar-section-title, .sidebar-link { font-weight: 400; border-left: none; } .sidebar-link.active { font-weight: 500; } /* The group containing the active route is auto-opened server-side (the section renders with class "open"); its title reads as brand-coloured. */ .sidebar-section.open .sidebar-section-title { color: var(--color-brand); } .sidebar-link { min-height: 38px; padding: var(--spacing-2, 0.5rem) 14px var(--spacing-2, 0.5rem) 42px; font-size: 13px; gap: var(--spacing-3, 0.75rem); border-radius: var(--radius-md, 0.5rem); transition: background 280ms ease, color 280ms ease; } .sidebar-link > i { width: 20px; font-size: 15px; text-align: center; } /* Active child = brand tint bg + brand text (existing tokens). Same pair layouts/sidebar.css uses; repeated here so the v2 contract holds even if the base sheet's values move. */ .sidebar-link.active { color: var(--color-brand); background: color-mix(in srgb, var(--color-brand, #e5461f) 10%, transparent); } /* ── Desktop collapse toggle (>=1280px) ──────────────────────────────────── #sidebarCollapseToggle (sidebar footer) flips .sidebar--collapsed on the sidebar root and .cmd-sidebar-collapsed on . Persisted in localStorage "cmd_sidebar_collapsed"; the head boot script applies the class before first paint, so every rule below keys off it — flash-free, same pattern as the theme boot. The .sidebar--collapsed root class is JS state and mirrors the class 1:1 (sidebar.js keeps them in sync). Below 1280px the button is hidden and the class has no effect (the mobile drawer keeps full labels). */ .sidebar-collapse-toggle { display: none; } @media (min-width: 1280px) { .sidebar-collapse-toggle { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2, 0.5rem); width: calc(100% - 1rem); margin: var(--spacing-2, 0.5rem) auto; padding: var(--spacing-2, 0.5rem) 0; border: 1px solid var(--border-subtle, #e3e3e3); border-radius: var(--radius-md, 0.5rem); background: transparent; color: var(--text-secondary, #4b5563); cursor: pointer; font-size: 0.8rem; transition: all var(--transition-fast, 150ms); } .sidebar-collapse-toggle i { transition: transform var(--transition-fast, 150ms); } .sidebar-collapse-toggle:hover { background: var(--bg-tertiary, #f3f4f6); color: var(--color-brand); } html.cmd-sidebar-collapsed .sidebar-collapse-toggle i { transform: rotate(180deg); } /* 72px icon rail — same variable the 1024-1280 auto-rail repoints, so .sidebar, .content-wrapper and .topbar all follow it. */ html.cmd-sidebar-collapsed { --sidebar-width: var(--sidebar-collapsed-width, 4.5rem); } /* Section titles become icon-only (label + chevron hidden, children hidden). */ html.cmd-sidebar-collapsed .sidebar-section-title span, html.cmd-sidebar-collapsed .sidebar-section-chevron { display: none; } html.cmd-sidebar-collapsed .sidebar-section-title { justify-content: center; padding-left: 0; padding-right: 0; } html.cmd-sidebar-collapsed .sidebar-section-title > i:first-child { margin: 0; } html.cmd-sidebar-collapsed .sidebar-section-body { display: none; } /* Rest of the chrome follows the auto-rail treatment (reused, not duplicated: identical rules to the 1024-1279.98px block). */ html.cmd-sidebar-collapsed .sidebar-search { display: none; } html.cmd-sidebar-collapsed .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; } html.cmd-sidebar-collapsed .sidebar-logo { height: 1.75rem; max-width: 3rem; object-fit: contain; } html.cmd-sidebar-collapsed .sidebar-close { display: none; } html.cmd-sidebar-collapsed .sidebar-user-card { justify-content: center; } html.cmd-sidebar-collapsed .sidebar-user-card__info, html.cmd-sidebar-collapsed .sidebar-user-card__theme { display: none; } html.cmd-sidebar-collapsed .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; } html.cmd-sidebar-collapsed .sidebar-link span { display: none; } } /* Sidebar quick-create in rail (icon-only) mode — button centered, label hidden, menu fixed-width so it doesn't squeeze to the 72px rail. */ @media (min-width: 1280px) { html.cmd-sidebar-collapsed .sidebar-create { margin: 10px 8px 4px; } html.cmd-sidebar-collapsed .sidebar-create__btn span { display: none; } html.cmd-sidebar-collapsed .sidebar-create__menu { right: auto; width: 200px; } } /* CAMS2 compact density: sidebar rows shrink to 34px (links) / 32px (titles) and the icon column drops to 18px. */ [data-density="compact"] .sidebar-section-title { min-height: 32px; } [data-density="compact"] .sidebar-link { min-height: 34px; padding-left: 38px; } [data-density="compact"] .sidebar-link > i, [data-density="compact"] .sidebar-section-title > i:first-child { width: 18px; font-size: 14px; }