/* ============================================================ sidebar-modes.css — 3 modos da sidebar lateral (sessão 134) Modos: expanded → 240px, labels visíveis (default) collapsed → 64px fixo, só ícones (mais espaço pra tela) auto → 64px por padrão, expande pra 240px no hover (overlay) Ativado via data-sidebar-mode no . Persistido em localStorage. ============================================================ */ /* Transições gerais */ body[data-design="v2"] .sidebar { transition: width var(--t-base, 200ms) ease-out; } body[data-design="v2"] .sidebar .ni { transition: justify-content var(--t-fast, 150ms) ease-out, padding var(--t-fast, 150ms); } /* ─── Toggle button no rodapé da sidebar ─── */ .sb-mode-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 24px); margin: 0 12px 4px; padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; cursor: pointer; color: rgba(255,255,255,0.65); font-size: 11.5px; font-family: inherit; transition: background var(--t-fast, 150ms), color var(--t-fast, 150ms); } .sb-mode-toggle:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); } .sb-mode-toggle i { width: 13px; height: 13px; } .sb-mode-toggle .sb-mode-label { line-height: 1; } /* ─────────── COLLAPSED (fixo retraído) ─────────── */ body[data-design="v2"][data-sidebar-mode="collapsed"] { --sidebar-w: 64px; } body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .ni span, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .sb-group-label, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .sb-logo, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar #sysLogoWrap, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .sb-submenu, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .sb-foot > span, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .sb-mode-toggle .sb-mode-label, body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .ni-badge { display: none !important; } body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .ni { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } body[data-design="v2"][data-sidebar-mode="collapsed"] .sidebar .sb-mode-toggle { width: 40px; padding: 8px; } /* ─────────── AUTO (retrai padrão, expande no hover) ─────────── */ body[data-design="v2"][data-sidebar-mode="auto"] { --sidebar-w: 64px; } /* Estado base = recolhido */ body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .ni span, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .sb-group-label, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .sb-logo, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar #sysLogoWrap, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .sb-submenu, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .sb-foot > span, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .sb-mode-toggle .sb-mode-label, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .ni-badge { display: none !important; } body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .ni { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } body[data-design="v2"][data-sidebar-mode="auto"] .sidebar .sb-mode-toggle { width: 40px; padding: 8px; } /* No hover: expande sobre o conteúdo (overlay, sem reflow do main) */ body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover { width: 240px !important; position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 50; box-shadow: 4px 0 24px rgba(0,0,0,0.25); } body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .ni span, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .sb-group-label, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .sb-logo, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover #sysLogoWrap, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .sb-submenu.cf-submenu-open, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .sb-foot > span, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .sb-mode-toggle .sb-mode-label, body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .ni-badge { display: revert !important; } body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .ni { justify-content: flex-start !important; padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } body[data-design="v2"][data-sidebar-mode="auto"] .sidebar:hover .sb-mode-toggle { width: calc(100% - 24px); padding: 8px 10px; } /* Mobile: tudo vira modo expanded normal (já tem media query no shell-v2.css) */ @media (max-width: 720px) { body[data-design="v2"][data-sidebar-mode] { --sidebar-w: 240px; } body[data-design="v2"][data-sidebar-mode] .sidebar .ni span, body[data-design="v2"][data-sidebar-mode] .sidebar .sb-group-label, body[data-design="v2"][data-sidebar-mode] .sidebar .sb-logo { display: revert !important; } }