/* app.css — CSS compartilhado por todo o sistema OurBIOS. Avatar/menu de perfil e gaveta lateral (menu de módulos + favoritos). Cada tela ainda mantém seu próprio layout e estilos específicos — isso aqui é só a parte 100% repetida em todo lugar. */ /* Paleta padrão (tema escuro) — o :root de cada tela pode acrescentar variáveis próprias (ex.: --alert-red, --amber) quando precisar, mas não precisa mais redeclarar as que já estão aqui. */ :root{ --asphalt:#0A0A0A; --steel:#A7ACB8; --steel-light:#7A7F8A; --concrete:#0A0A0A; --concrete-dark:#242424; --paper:#171717; /* Identidade Doca: laranja vivo = detalhe raro (CTA/foco/item ativo/faixa do topo), azul royal = cor de destaque mais presente (eyebrow de cada tela, hover de botão). Cores oficiais extraídas da logo. */ --hazard:#FA7A0B; --hazard-dark:#022F60; --route-blue:#3B82F6; --safe-green:#22C55E; --violet:#6C4CF1; --ink:#F5F7FA; --ink-soft:#A7ACB8; --radius:4px; --font-display:'Oswald',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; } .avatar{width:32px;height:32px;border-radius:50%;background:var(--hazard);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;flex-shrink:0;overflow:hidden;} ::selection{background:var(--hazard);color:#fff;} /* Trilha de navegação — injetada por obAtualizarTrilha() (app.js) logo abaixo do hazard-strip, em toda página. Vazia (sem passos) não ocupa espaço. */ .ob-trilha{display:flex;align-items:center;gap:7px;padding:0 clamp(16px,4vw,48px); background:var(--paper);border-bottom:1px solid var(--concrete-dark); font-family:var(--font-mono);font-size:11px;overflow-x:auto;white-space:nowrap;} .ob-trilha:empty{display:none;} .ob-trilha:not(:empty){padding-top:8px;padding-bottom:8px;} .ob-trilha a{color:var(--ink-soft);text-decoration:none;flex-shrink:0;} .ob-trilha a:hover{color:var(--hazard);} .ob-trilha-casa{display:flex;} .ob-trilha-atual{color:var(--ink);font-weight:600;flex-shrink:0;} .ob-trilha-sep{color:var(--concrete-dark);flex-shrink:0;} html[data-theme="light"] { --concrete:#FFFFFF; --paper:#FFFFFF; --concrete-dark:#E2E4E9; --ink:#000000; --ink-soft:#5B6472; --steel:#5B6472; --steel-light:#8891A0; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="file"], .csel-input { background:var(--paper) !important; color:var(--ink) !important; } /* Campo de arquivo igual em todas as telas: o botão do navegador vira um botão do sistema, no mesmo desenho do .btn-secundario. */ input[type="file"]{ padding:6px 10px; border:1px solid var(--concrete-dark); border-radius:4px; font-family:inherit; font-size:13px; cursor:pointer; width:100%; } input[type="file"]::file-selector-button{ font-family:inherit; font-weight:600; font-size:12.5px; background:transparent; color:var(--ink); border:1px solid var(--concrete-dark); border-radius:6px; padding:6px 14px; margin:0 12px 0 0; cursor:pointer; transition:all .15s ease; } input[type="file"]::file-selector-button:hover{ border-color:var(--hazard); color:var(--hazard); } input[type="file"]:focus{ outline:2px solid var(--route-blue); outline-offset:1px; } input[type="date"] { color-scheme: dark; } html[data-theme="light"] input[type="date"] { color-scheme: light; } input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.7; cursor:pointer; } html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter:none; } /* Tabelas em todo o sistema: - poucas colunas -> a tabela estica e ocupa a largura disponível (width:100%) - muitas colunas -> cada coluna mantém o tamanho do seu conteúdo (nowrap), a tabela passa da largura da tela e rola na horizontal dentro do próprio quadro, em vez de espremer o texto até ficar ilegível. O quadro de rolagem é criado automaticamente pelo app.js (obPrepararTabelas). */ .tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;} .tabela-scroll > table{display:table;width:100%;} table th, table td{white-space:nowrap;} /* coluna que pode quebrar linha (nome de produto): absorve a sobra de espaço */ .col-wrap{white-space:normal;} /* ========================================================= MENU LATERAL No desktop fica fixo e sempre visível (com opção de recolher só nos ícones). Abaixo de 1100px vira gaveta, como era antes. ========================================================= */ :root{ --sn-largura:250px; --sn-min:62px; } .sidenav-toggle{width:34px;height:34px;border-radius:9px;background:var(--paper);border:1px solid var(--concrete-dark);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;flex-shrink:0;transition:all .15s ease;} .sidenav-toggle:hover{color:var(--hazard);border-color:var(--hazard);background:var(--concrete-dark);} .sidenav-toggle svg{width:16px;height:16px;} .sidenav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;display:none;} .sidenav-backdrop.show{display:block;} .sidenav{position:fixed;top:0;left:0;bottom:0;width:var(--sn-largura);max-width:85vw; background:var(--paper);border-right:1px solid var(--concrete-dark);z-index:300; transform:translateX(-100%);transition:transform .2s ease,width .18s ease; display:flex;flex-direction:column;overflow:visible;padding:14px 10px 14px;} .sidenav.show{transform:translateX(0);} /* Linha de topo do menu: marca + botão de recolher */ .sn-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;} .sn-btn-recolher{width:26px;height:26px;border-radius:8px;background:var(--concrete); border:1px solid var(--concrete-dark);color:var(--ink-soft);display:flex;align-items:center; justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:all .15s ease;} .sn-btn-recolher:hover{color:var(--hazard);border-color:var(--hazard);} .sn-btn-recolher svg{width:14px;height:14px;} /* Aba na borda da tela para reabrir o menu no celular */ .sn-abrir{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:298; width:24px;height:54px;border-radius:0 10px 10px 0;background:var(--paper); border:1px solid var(--concrete-dark);border-left:none;color:var(--ink-soft); display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;} .sn-abrir svg{width:14px;height:14px;} .sn-abrir:hover{color:var(--hazard);} @media (max-width:1099px){ .sn-abrir{display:flex;} } body.sn-gaveta-aberta .sn-abrir{display:none;} /* A logo oficial (Doca by Lastrix) vem em PNG com fundo branco sólido — o cartão branco por trás garante contraste igual nos dois temas, em vez de um retângulo branco "flutuando" sozinho no tema escuro. */ .sn-brand{display:flex;align-items:center;justify-content:center;overflow:hidden; background:#fff;border-radius:8px;padding:8px 10px;} .sn-brand-logo{display:block;width:100%;max-width:180px;height:auto;} /* Perfil + ajustes, logo abaixo da marca (substitui o antigo gatilho no canto superior direito da página — agora fica só aqui, no topo do menu). */ .sn-perfil{position:relative;display:flex;align-items:center;gap:9px;margin-top:14px;padding:8px; border-radius:10px;background:var(--concrete);border:1px solid var(--concrete-dark);cursor:pointer; flex-shrink:0;transition:border-color .15s ease;} .sn-perfil:hover{border-color:var(--hazard);} .sn-perfil .avatar{width:32px;height:32px;font-size:13px;} .sn-perfil-texto{flex:1;overflow:hidden;} .sn-perfil-texto .p-nome{font-family:var(--font-display);font-size:12.5px;font-weight:600; color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sn-perfil-texto .p-cargo{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sn-perfil-ajustes{width:15px;height:15px;flex-shrink:0;color:var(--ink-soft);} .sn-perfil:hover .sn-perfil-ajustes{color:var(--hazard);} .profile-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper); border:1px solid var(--concrete-dark);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.4); padding:8px;display:none;z-index:310;} .profile-menu.show{display:block;} .profile-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;color:var(--ink); text-decoration:none;font-size:13px;font-family:var(--font-body);border-radius:var(--radius);} .profile-menu a:hover{background:var(--concrete-dark);color:var(--hazard);} .profile-menu a .m-icon{width:16px;height:16px;flex-shrink:0;} .sn-tema{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:var(--radius); background:none;border:none;color:var(--ink);font-family:inherit;font-size:13px;cursor:pointer;text-align:left;} .sn-tema:hover{background:var(--concrete-dark);color:var(--hazard);} .sn-tema-icone{width:14px;height:14px;flex-shrink:0;} .sn-tema-trilho{width:30px;height:17px;border-radius:20px;background:var(--concrete-dark); position:relative;flex-shrink:0;transition:background .15s ease;} .sn-tema-bola{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%; background:var(--ink-soft);transition:transform .15s ease;} .sn-tema[data-tema="light"] .sn-tema-trilho{background:var(--hazard);} .sn-tema[data-tema="light"] .sn-tema-bola{transform:translateX(13px);background:#fff;} .sn-tema #themeLabel{flex:1;} .sn-scroll{flex:1;overflow-y:auto;overflow-x:hidden;margin-top:10px;padding:0 1px;} .sn-scroll::-webkit-scrollbar{width:8px;} .sn-scroll::-webkit-scrollbar-thumb{background:var(--concrete-dark);border-radius:8px;} .sidenav h3{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em; color:var(--ink-soft);opacity:.75;margin:16px 0 6px;padding:0 8px;white-space:nowrap;} .sidenav h3:first-of-type{margin-top:2px;} .sn-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px; transition:background .12s ease;position:relative;} .sn-item:hover{background:var(--concrete-dark);} .sn-item a{flex:1;color:var(--ink);text-decoration:none;font-size:13px;font-family:var(--font-body); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Item com filhos: a linha inteira abre/fecha o conteúdo */ .sn-item.sn-node{cursor:pointer;} .sn-item.sn-node > a{cursor:pointer;font-weight:600;} .sn-item.sn-node .sn-rotulo{user-select:none;} /* O ícone continua sendo o atalho para a tela do próprio módulo */ /* flex:0 é obrigatório: a regra ".sn-item a{flex:1}" também pega este link e, sem isso, o ícone estica e empurra o nome do módulo para o meio da linha. */ .sn-item a.sn-ir{display:flex;align-items:center;justify-content:center; flex:0 0 auto;color:inherit;text-decoration:none;border-radius:5px;padding:1px;} .sn-ir:hover{background:color-mix(in srgb, var(--hazard) 22%, transparent);} .sn-ir:hover .sn-icone{color:var(--hazard);} .sn-item.sn-ativo{background:color-mix(in srgb, var(--hazard) 16%, transparent);} .sn-item.sn-ativo > a{color:var(--hazard);font-weight:600;} .sn-item.sn-ativo::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px; border-radius:0 3px 3px 0;background:var(--hazard);} .sn-icone{width:17px;height:17px;flex-shrink:0;color:var(--ink-soft);} .sn-item:hover .sn-icone,.sn-item.sn-ativo .sn-icone{color:var(--hazard);} .sn-espaco{width:13px;flex-shrink:0;} .sn-children{margin-left:16px;border-left:1px solid var(--concrete-dark);padding-left:5px;display:none;} .sn-children.open{display:block;} .sn-pin{width:14px;height:14px;flex-shrink:0;cursor:pointer;color:var(--concrete-dark);opacity:0;transition:opacity .12s ease;} .sn-item:hover .sn-pin{opacity:1;} .sn-pin.pinned{color:var(--hazard);opacity:1;} .sn-empty{font-size:12px;color:var(--ink-soft);padding:4px 8px;} @media (min-width:1100px){ .sidenav{transform:none;} .sidenav-backdrop{display:none !important;} body{padding-left:var(--sn-largura);transition:padding-left .18s ease;} /* Recolhido: só os ícones */ body.sn-recolhido{padding-left:var(--sn-min);} body.sn-recolhido .sidenav{width:var(--sn-min);padding-left:8px;padding-right:8px;} body.sn-recolhido .sidenav h3, body.sn-recolhido .sidenav a span, body.sn-recolhido .sn-espaco, body.sn-recolhido .sn-pin, body.sn-recolhido .sn-empty, body.sn-recolhido .sn-brand{display:none;} body.sn-recolhido .sn-topo{justify-content:center;} body.sn-recolhido .sn-children{display:none !important;} body.sn-recolhido .sn-item{justify-content:center;padding:9px 0;} body.sn-recolhido .sn-item a{flex:0;} /* Sem isso, a regra acima (mais específica que ".sn-item a.sn-ir") encolhe pra zero o link que embrulha o ícone dos itens com submenu (Armazém, Configurações) — o ícone deles some quando o menu recolhe, enquanto itens sem submenu (sem essa embrulhagem) ficam OK. */ body.sn-recolhido .sn-item a.sn-ir{flex:0 0 auto;} /* Perfil + ajustes recolhidos: só o avatar, centralizado */ body.sn-recolhido .sn-perfil{justify-content:center;padding:8px 0;gap:0;} body.sn-recolhido .sn-perfil-texto, body.sn-recolhido .sn-perfil-ajustes{display:none;} /* O menu de conta (tema/senha/sair) precisa de mais largura que a gaveta recolhida (62px) pra caber texto — flutua por cima do conteúdo. */ body.sn-recolhido .profile-menu{left:8px;right:auto;width:210px;} /* Aproveita a tela larga em vez de deixar sobrando dos dois lados */ main{max-width:1700px;} } /* ========================================================= GRADE DE CARDS DOS HUBS (Armazém, Acuracidade, Contagem de Estoque, etc.) — cada tela tinha sua própria cópia deste bloco, com um max-width em pixel fixo (300 a 952px) calibrado à mão pro número de cards daquele momento. Ficava desatualizado assim que um card era adicionado ou removido (ex.: Contagem de Estoque cresceu pra 9 cards sem o max-width acompanhar, sobrando muito espaço vazio nas laterais em telas largas). Uma cópia só aqui, sem número mágico por tela: a grade usa a largura disponível e quebra linha sozinha. As telas ainda têm sua própria cópia deste bloco (não removida ainda), mas esta aqui vence — vem depois no HTML (todo `