/* ========================================================================== GRS — MD3 Sidebar Light Theme Override -------------------------------------------------------------------------- Projeto : Grupo Rocha Saude (GRS) — Intranet Criado : 2026-04-11 Versao : 1.0.0 OBJETIVO -------- Substitui o visual da sidebar escura original (bg #111827 + color white) por um tema CLARO Material Design 3 usando a paleta GRS: - Background: surface-container-low (cinza esverdeado bem claro) - Texto: on-surface (quase preto) - Item ativo: primary-container (verde Rocha suave) - Hover: surface-container - Bordas: outline-variant IMPORTANTE ---------- Este arquivo DEVE ser carregado DEPOIS do intranet.css no . Não mexe em lógica, layout ou estrutura — só substitui cores/backgrounds. Reversível removendo a linha correspondente. ========================================================================== */ /* ============================== SIDEBAR CONTAINER ============================== */ .sidebar { background: var(--md-surface-container-low, #F5F7F3) !important; color: var(--md-on-surface, #1A1C18) !important; border-right: 1px solid var(--md-outline-variant, #DFE4D7) !important; } /* Header (logo + brand) */ .sidebar-header { border-bottom: 1px solid var(--md-outline-variant, #DFE4D7) !important; } /* Logo "GR" — mantém verde MD3 primary */ .sidebar-logo { background: var(--md-primary, #2E7D4F) !important; color: var(--md-on-primary, #FFFFFF) !important; box-shadow: var(--md-elev-1, 0 1px 3px rgba(0,0,0,0.08)) !important; } .sidebar-brand { color: var(--md-on-surface, #1A1C18) !important; } .sidebar-brand small { color: var(--md-on-surface-variant, #52634F) !important; opacity: 1 !important; } /* ============================== SECTIONS (labels "ATENDIMENTO", "VENDAS", etc) ============================== */ .sidebar-section { color: var(--md-on-surface-variant, #52634F) !important; opacity: 0.75 !important; font-weight: 700 !important; } /* ============================== ITEMS (nível 1 do menu) ============================== */ .sidebar-item { color: var(--md-on-surface, #1A1C18) !important; opacity: 1 !important; border-radius: var(--md-shape-full, 9999px) !important; /* pill MD3 full */ margin: 2px 12px !important; } .sidebar-item:hover { background: var(--md-surface-container, #E8EDE6) !important; opacity: 1 !important; } .sidebar-item.active { background: var(--md-primary-container, #A8F0C0) !important; color: var(--md-on-primary-container, #002106) !important; font-weight: 600 !important; } /* Indicator bar do item ativo — usa primary MD3 */ .sidebar-item.active::before { background: var(--md-primary, #2E7D4F) !important; } .sidebar-item.locked { opacity: 0.4 !important; color: var(--md-on-surface-variant, #52634F) !important; } .sidebar-item .icon { color: inherit !important; } /* Notif badge mantém vermelho MD3 error */ .sidebar-item .notif-badge { background: var(--md-error, #BA1A1A) !important; color: var(--md-on-error, #FFFFFF) !important; } /* ============================== SUBITEMS (Dashboard, Contatos, etc dentro de um grupo) ============================== */ .sidebar-subitem { color: var(--md-on-surface-variant, #52634F) !important; opacity: 1 !important; } .sidebar-subitem:hover { background: var(--md-surface-container, #E8EDE6) !important; color: var(--md-on-surface, #1A1C18) !important; } .sidebar-subitem.active { background: var(--md-primary-container, #A8F0C0) !important; color: var(--md-on-primary-container, #002106) !important; font-weight: 600 !important; } .sidebar-subitem .icon { color: inherit !important; } /* ============================== ITEM PARENT (grupos expansíveis) ============================== */ .sidebar-item-parent { color: var(--md-on-surface, #1A1C18) !important; } .sidebar-item-parent .expand-arrow { color: var(--md-on-surface-variant, #52634F) !important; } /* ============================== USER CARD (rodapé da sidebar) ============================== */ .sidebar-user { border-top: 1px solid var(--md-outline-variant, #DFE4D7) !important; background: var(--md-surface-container, #E8EDE6) !important; } .sidebar-avatar { background: var(--md-primary, #2E7D4F) !important; color: var(--md-on-primary, #FFFFFF) !important; } .sidebar-username { color: var(--md-on-surface, #1A1C18) !important; } .sidebar-userrole { color: var(--md-on-surface-variant, #52634F) !important; opacity: 1 !important; } /* ============================== COLLAPSED STATE (sidebar minimizada) ============================== */ .sidebar.collapsed .sidebar-item { background: transparent !important; } .sidebar.collapsed .sidebar-item:hover { background: var(--md-surface-container, #E8EDE6) !important; } .sidebar.collapsed .sidebar-item.active { background: var(--md-primary-container, #A8F0C0) !important; } /* ============================== SCROLLBAR da sidebar (webkit) ============================== */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--md-outline-variant, #DFE4D7); border-radius: var(--md-shape-full, 9999px); } .sidebar::-webkit-scrollbar-thumb:hover { background: var(--md-outline, #72796F); }