/* ============================================================================ cc-shell.css — topbar e sidebar (offcanvas) do ERP. ---------------------------------------------------------------------------- Vinha de um bloco de CSS inline dentro de templates/partials/header.php, emitido no meio do . A estrutura e o comportamento da navegacao seguem os mesmos de proposito; o que mudou foi a origem das cores de marca, que agora sao os tokens do cc-ui.css em vez de hexes proprios. A paleta escura da sidebar e os --icon-* continuam daqui: sao a identidade da navegacao, e o PHP do header referencia os --icon-* por nome. ========================================================================== */ /* ====== VARIÁVEIS DE COR EMOÇÃO ====== */ :root { /* Cores de Fundo (neutros escuros, alinhados ao preto da marca Center) */ --side-bg: #1c1c1c; --side-bg-hover: #141414; --side-header-bg: #101010; --side-submenu-bg: #161616; --side-text: #b3b3bd; /* Cinza suave neutro */ /* Cores de Destaque (extraídas de logo.jpg: vermelho do anel + vinho do fundo) */ --accent: var(--cc-red); /* mesmo vermelho do cc-ui.css */ --accent-hover: #e5555c; --accent-dark: var(--cc-red-escuro); /* mesmo vinho do cc-ui.css */ /* Cores dos Ícones Psicológicos */ --icon-home: #a3aed0; /* Neutro */ --icon-financeiro: #22c55e; /* Verde Dinheiro */ --icon-fiscal: #f97316; /* Laranja Atenção */ --icon-os: #3b82f6; /* Azul Ferramenta */ --icon-adm: #e879f9; /* Rosa Adm */ } /* Topbar */ .topbar-erp { background: linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%); height: 65px; z-index: 1030; box-shadow: 0 2px 10px rgba(0,0,0,0.15); } .hamburger-btn { background: transparent; border: none; color: white; font-size: 1.5rem; transition: opacity 0.2s; outline: none; padding: 0; } .hamburger-btn:hover { opacity: 0.8; } /* Atalhos rápidos do superadmin no topbar. São doze chips com `white-space: nowrap`. Sem contenção, eles não cabem em 1440px e vazavam para fora do container -- por cima da marca, à esquerda, e do nome do usuário, à direita, que ficavam ilegíveis. `overflow-x: auto` mantém a fila numa linha só e deixa rolar o excedente; a barra de rolagem fica oculta porque o gesto natural aqui é o scroll horizontal do trackpad/roda. `safe center` centraliza enquanto sobra espaço e passa a alinhar à esquerda quando falta -- sem ele, o `center` do flexbox transborda dos DOIS lados e o primeiro chip fica inalcançável pelo scroll. */ .topbar-atalhos { flex: 1 1 auto; justify-content: center; justify-content: safe center; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; /* o hover levanta o chip 1px; sem folga, o topo dele era cortado. */ padding-block: 3px; padding-inline: 2px; margin-inline: .5rem; /* Esmaece as pontas: com a fila cortada em seco, o ultimo chip encostava no avatar e parecia defeito. O fade diz "tem mais, role para o lado". */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } .topbar-atalhos::-webkit-scrollbar { display: none; } .chip-atalho { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.20); color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: background 0.15s, transform 0.15s; } .chip-atalho:hover { background: rgba(255,255,255,0.28); color: #fff; transform: translateY(-1px); } .chip-atalho.active { background: #fff; color: var(--accent); border-color: #fff; } .chip-atalho i { font-size: 0.9rem; } /* Dark Sidebar VIBRANT */ .sidebar-erp { background-color: var(--side-bg); color: var(--side-text); width: 300px; border-right: none; box-shadow: 5px 0 25px rgba(0,0,0,0.2); } .sidebar-erp .offcanvas-header { background-color: var(--side-header-bg); border-bottom: 1px solid rgba(255,255,255,0.05); } .sidebar-erp .btn-close-white { opacity: 0.5; } .sidebar-erp .btn-close-white:hover { opacity: 1; } /* CLASSES DE ÍCONE COLORIDOS (Vida) */ .icon-financeiro { color: var(--icon-financeiro) !important; } .icon-fiscal { color: var(--icon-fiscal) !important; } .icon-os { color: var(--icon-os) !important; } .icon-adm { color: var(--icon-adm) !important; } .icon-home { color: var(--icon-home) !important; } /* Estilos dos Links Pai */ .sidebar-erp .nav-link { color: var(--side-text); padding: 12px 20px; font-weight: 500; font-size: 1rem; transition: all 0.2s; border-left: 3px solid transparent; display: flex; align-items: center; text-decoration: none; } .sidebar-erp .nav-link:hover { color: #ffffff; background-color: var(--side-bg-hover); } .sidebar-erp .nav-link:hover i { transform: scale(1.1); filter: brightness(1.2); } /* Efeito no ícone no hover */ .sidebar-erp .nav-link.active-parent { color: #ffffff; background-color: var(--side-bg-hover); border-left-color: var(--accent); font-weight: 600; box-shadow: inset 5px 0 10px rgba(214,36,44,0.12); } .sidebar-erp .nav-link i, .sidebar-erp .accordion-button i { transition: transform 0.2s, filter 0.2s; } /* Sanfonas (Accordion) */ .sidebar-erp .accordion-item { background-color: transparent; border: none; } .sidebar-erp .accordion-button { background-color: transparent; color: var(--side-text); box-shadow: none; font-weight: 500; font-size: 1rem; padding: 12px 20px; border-left: 3px solid transparent; transition: all 0.2s; } .sidebar-erp .accordion-button:hover { color: #ffffff; background-color: var(--side-bg-hover); } .sidebar-erp .accordion-button:not(.collapsed) { color: #ffffff; background-color: var(--side-bg-hover); border-left-color: var(--accent); } .sidebar-erp .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.5; } .sidebar-erp .accordion-collapse { background-color: var(--side-submenu-bg); } /* Submenus (Filhos) */ .sidebar-erp .sub-nav-link { color: #87889a; padding: 10px 20px 10px 52px; display: block; text-decoration: none; font-size: 0.9rem; transition: color 0.2s, background-color 0.2s; border-radius: 6px; margin: 2px 10px; } .sidebar-erp .sub-nav-link:hover { color: var(--accent-hover); background-color: rgba(214,36,44,0.12); } .sidebar-erp .sub-nav-link.active-child { color: var(--accent); font-weight: 600; background-color: rgba(214,36,44,0.12); border-left: 2px solid var(--accent); box-shadow: 2px 0 8px rgba(214,36,44,0.22); } .sidebar-erp .sub-nav-divider { border-top: 1px solid rgba(255,255,255,0.05); margin: 0.5rem 20px; }