← ÁREA COM ROLAGEM PRÓPRIA ============================================================= */ /* -------------------------------------------------------------- 1. RAIZ — Elimina o scroll do / e coloca a rolagem dentro do

. Isto permite header e sidebar fixos sem recorrer a "position: fixed" (que quebra o flex parent). -------------------------------------------------------------- */ html, body { height: 100%; } body { overflow: hidden; } /* apenas na tela principal do app */ /* Não afeta a tela de login (não usa o shell) — a login-page restaura o overflow em seu próprio body. */ body.login-page { overflow: auto; } /* -------------------------------------------------------------- 2. SHELL — O container raiz precisa preencher a viewport exatamente uma vez (sem crescer com o conteúdo). -------------------------------------------------------------- */ #app > .min-h-screen { height: 100vh; min-height: 100vh; max-height: 100vh; overflow: hidden; } /* -------------------------------------------------------------- 3. SIDEBAR — Fixa em toda a altura, rolagem interna apenas no

(id="nav"). Logo fica no topo, rodapé embaixo. -------------------------------------------------------------- */ #app > .min-h-screen > aside { position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow: hidden; /* a rolagem é interna, no

*/ z-index: 30; flex-shrink: 0; } /* Área de menus com scroll interno (o

) */ #app > .min-h-screen > aside > nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent; } #app > .min-h-screen > aside > nav::-webkit-scrollbar { width: 6px; } #app > .min-h-screen > aside > nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 3px; } /* -------------------------------------------------------------- 4. COLUNA DIREITA — Header (id="topbar") + Main -------------------------------------------------------------- */ #app > .min-h-screen > div.flex-1 { height: 100vh; max-height: 100vh; overflow: hidden; min-width: 0; /* previne overflow horizontal em telas menores */ } /* Header fixo no topo da coluna direita */ #topbar { position: sticky; top: 0; z-index: 20; flex-shrink: 0; background: #ffffff; border-bottom: 1px solid var(--cp-border, #e2e8f0); box-shadow: 0 1px 2px rgba(15,23,42,.04); } [data-theme="dark"] #topbar { background: #0f172a; border-bottom-color: rgba(148,163,184,.15); } /* MAIN — única área com scroll da página */ #app > .min-h-screen > div.flex-1 > main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; /* imprescindível dentro de flex para permitir scroll */ } /* -------------------------------------------------------------- 5. LIGHT MODE FIX — Textos que ficavam invisíveis -------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; } /* body claro deve ter fundo claro consistente */ [data-theme="light"] body { background: var(--cp-bg, #f8fafc); color: var(--cp-text, #1e293b); } /* Cards genéricos "bg-white" no light mantêm bordas visíveis */ [data-theme="light"] .bg-white { background: var(--cp-surface, #ffffff); color: var(--cp-text, #1e293b); } /* Correção: text-slate-300/400/500 sobre fundo claro ficavam quase invisíveis em algumas telas (labels de filtros de Máquinas/Colaboradores). Aumenta contraste no light. */ [data-theme="light"] .text-slate-300 { color: #64748b !important; } [data-theme="light"] .text-slate-400 { color: #475569 !important; } /* Inputs escuros (bg-slate-900/800/700) em telas de listagem ficavam invisíveis no light mode. Neutraliza para superfície clara sem alterar o markup. */ [data-theme="light"] input.bg-slate-900, [data-theme="light"] input.bg-slate-800, [data-theme="light"] select.bg-slate-900, [data-theme="light"] select.bg-slate-800, [data-theme="light"] textarea.bg-slate-900, [data-theme="light"] textarea.bg-slate-800 { background: var(--cp-surface, #ffffff) !important; color: var(--cp-text, #1e293b) !important; border-color: var(--cp-border, #cbd5e1) !important; } [data-theme="light"] input.bg-slate-900::placeholder, [data-theme="light"] input.bg-slate-800::placeholder, [data-theme="light"] textarea.bg-slate-900::placeholder, [data-theme="light"] textarea.bg-slate-800::placeholder { color: var(--cp-text-subtle, #94a3b8); } [data-theme="light"] input.border-slate-700, [data-theme="light"] select.border-slate-700, [data-theme="light"] textarea.border-slate-700 { border-color: var(--cp-border, #cbd5e1) !important; } /* Textos brancos em elementos com fundo neutralizado */ [data-theme="light"] input.text-white, [data-theme="light"] select.text-white, [data-theme="light"] textarea.text-white { color: var(--cp-text, #1e293b) !important; } /* Painéis "bg-slate-900/60" (containers de listagens) → superfície clara no light */ [data-theme="light"] .bg-slate-900\/60, [data-theme="light"] div[class*="bg-slate-900"] { background: var(--cp-surface, #ffffff) !important; color: var(--cp-text, #1e293b) !important; } [data-theme="light"] .border-slate-800, [data-theme="light"] div[class*="border-slate-800"] { border-color: var(--cp-border, #e2e8f0) !important; } /* Cabeçalhos de tabela e linhas */ [data-theme="light"] thead.bg-slate-800\/40, [data-theme="light"] thead[class*="bg-slate-800"] { background: var(--cp-bg-2, #f1f5f9) !important; } [data-theme="light"] tr.hover\:bg-slate-800\/30:hover, [data-theme="light"] tr[class*="hover:bg-slate-800"]:hover { background: var(--cp-surface-hover, #f8fafc) !important; } /* Divisórias */ [data-theme="light"] .divide-slate-800 > * + * { border-color: var(--cp-border, #e2e8f0) !important; } /* -------------------------------------------------------------- 6. RESPONSIVIDADE — Mobile drawer -------------------------------------------------------------- */ @media (max-width: 768px) { /* No mobile a sidebar vira drawer controlado por a classe .sidebar-open no (adicionada pelo botão hambúrguer no topbar). */ #app > .min-h-screen > aside { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 20px 40px rgba(0,0,0,.25); } html.sidebar-open #app > .min-h-screen > aside { transform: translateX(0); } /* Overlay quando drawer aberto */ html.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 25; } /* Sidebar em cima do overlay */ #app > .min-h-screen > aside { z-index: 40; } /* Coluna direita ocupa 100% no mobile */ #app > .min-h-screen > div.flex-1 { width: 100%; height: 100vh; } /* Botão hambúrguer (aparece só no mobile — inserido no topbar) */ #btnSidebarToggle { display: inline-flex !important; } /* Padding menor no main em mobile */ #app > .min-h-screen > div.flex-1 > main { padding: 1rem !important; } } /* Desktop: esconde o botão hambúrguer */ @media (min-width: 769px) { #btnSidebarToggle { display: none !important; } } /* -------------------------------------------------------------- 7. HEADER — ajustes finos (evitar sobreposição de logout/tema) -------------------------------------------------------------- */ #topbar .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } #topbar .header-action { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cp-border, #e2e8f0); background: var(--cp-surface, #ffffff); color: var(--cp-text-muted, #64748b); transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } #topbar .header-action:hover { background: var(--cp-surface-hover, #f1f5f9); color: var(--cp-text, #1e293b); border-color: var(--cp-border-strong, #cbd5e1); } #topbar .header-action-danger:hover { color: var(--cp-danger, #dc2626); border-color: var(--cp-danger, #dc2626); } [data-theme="dark"] #topbar .header-action { background: rgba(30,41,59,.6); border-color: rgba(148,163,184,.15); color: #cbd5e1; } [data-theme="dark"] #topbar .header-action:hover { background: rgba(51,65,85,.7); color: #f1f5f9; }