/* ========================================================================== AutoAgenda — Folha de estilo única. CSS puro, sem framework. Mesma paleta e os mesmos componentes do FitMulti (a marca #ff5722, a sidebar recolhível, cards, tabelas, badges e modais) — de propósito: os dois sistemas são do mesmo fornecedor e precisam parecer a mesma família. As cores podem ser sobrescritas em Configurações > Cores, que injeta as variáveis de :root no (ver App\Support\Branding::themeTag). ========================================================================== */ :root { --bg: #0f1115; --surface: #171a21; --surface-2: #1f232c; --border: #2a2f3a; --text: #e6e8ee; --text-muted: #9aa3b2; --brand: #ff5722; --brand-soft: rgba(255, 87, 34, .14); --ok: #22c55e; --ok-soft: rgba(34, 197, 94, .14); --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, .14); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, .14); --radius: 10px; --shadow: 0 6px 24px rgba(0, 0, 0, .35); --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================================================== Layout administrativo + sidebar recolhível ========================================================================== */ :root { --sidebar-w: 248px; --sidebar-w-collapsed: 68px; } .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* Recolhido: só os ícones. A classe vive no , aplicada antes da pintura. */ html.is-collapsed .layout { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } /* ---------- Marca ---------- */ .sidebar-head { padding: 4px 6px 16px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .logo:hover { text-decoration: none; } .logo-mark { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 800; font-size: 17px; } .logo-text { font-size: 18px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; } .logo-text span { color: var(--brand); } .logo-img { height: 32px; width: auto; max-width: 180px; object-fit: contain; flex-shrink: 0; } /* Logotipo do cliente na sidebar (ver layouts/app.php) — troca pro "A" quadrado só quando a sidebar está recolhida (ícone-only), porque o logotipo enviado pode ser bem mais largo que os 32px do trilho de ícones. */ .logo-mark-recolhido { display: none; } html.is-collapsed .logo-mark-recolhido { display: grid; } html.is-collapsed .logo-img-expandido { display: none; } /* Recolhido, encolhe para caber na trilha de ícones em vez de sumir. */ html.is-collapsed .logo-img { height: 28px; max-width: 36px; } /* ---------- Itens ---------- */ .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: 9px; color: var(--text-muted); font-size: 14px; font-family: inherit; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; position: relative; transition: background .12s, color .12s; } .nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } /* Ícones herdam a cor do item — nenhum tem cor própria. */ .nav-link .icon { flex-shrink: 0; opacity: .85; } .nav-link:hover .icon, .nav-link.active .icon { opacity: 1; } .nav-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } /* Barra de destaque do item ativo */ .nav-link.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand); } .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Submenus (accordion) ---------- */ .nav-caret { flex-shrink: 0; opacity: .6; transition: transform .18s ease; } .nav-section.open > .nav-toggle .nav-caret { transform: rotate(90deg); } .nav-section.open > .nav-toggle { color: var(--text); } .nav-sub { display: grid; grid-template-rows: 0fr; /* animação de altura sem JS medir nada */ transition: grid-template-rows .2s ease; margin-left: 21px; border-left: 1px solid var(--border); padding-left: 7px; } .nav-section.open > .nav-sub { grid-template-rows: 1fr; } /** * Filho ÚNICO, obrigatoriamente. `grid-template-rows: 0fr` dimensiona só a * primeira linha; qualquer irmão vira linha implícita `auto` e o submenu não * fecha nunca. O min-height:0 permite o colapso e o overflow:hidden esconde o * conteúdo durante a transição. */ .nav-sub-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; } .nav-sub-title { display: none; } /* só aparece no flyout do modo recolhido */ /* Navegadores que não animam 0fr: alterna display, sem transição. */ @supports not (grid-template-rows: 0fr) { .nav-sub { display: none; } .nav-section.open > .nav-sub { display: block; } } .nav-child { font-size: 13.5px; padding: 8px 10px; } .nav-child.active::before { left: -8px; height: 16px; } /* ---------- Botão de recolher ---------- */ .sidebar-collapse { margin-top: 8px; flex-shrink: 0; } html.is-collapsed .sidebar-collapse .icon { transform: scaleX(-1); } .topbar-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 6px; border-radius: 8px; } .topbar-burger:hover { background: var(--surface-2); color: var(--text); } /* ---------- Estado recolhido ---------- */ /** * `overflow: visible` é obrigatório aqui. Com o overflow-y:auto do estado * expandido, tooltips e flyouts posicionados em `left: 100%` são recortados * pela própria sidebar e nunca aparecem. * * Trocar o scroll por visible é seguro neste estado: recolhida a sidebar tem * só ícones (~350px de altura), e abaixo de 900px ela vira gaveta. */ html.is-collapsed .sidebar { padding: 14px 10px; overflow: visible; } html.is-collapsed .logo-text, html.is-collapsed .nav-label, html.is-collapsed .nav-caret { display: none; } html.is-collapsed .nav-link { justify-content: center; padding: 10px; } html.is-collapsed .nav-link.active::before { left: -10px; } /* Recolhido, o submenu vira flyout no hover — não empurra o layout. */ html.is-collapsed .nav-sub { position: absolute; left: 100%; top: 0; z-index: 60; display: block; grid-template-rows: none; min-width: 208px; margin-left: 6px; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .14s, transform .14s, visibility .14s; } /* No flyout a altura é livre: o wrapper não pode mais cortar o conteúdo. */ html.is-collapsed .nav-sub-inner { overflow: visible; min-height: auto; } html.is-collapsed .nav-section { position: relative; } /** * Ponte invisível sobre o vão de 6px entre o ícone e o flyout. Sem ela o mouse * sai do .nav-section ao atravessar o espaço, o hover cai e o menu pisca — * torna impossível alcançar os itens. * * Fica no .nav-section, não no .nav-sub: o flyout tem overflow-y:auto e * recortaria um pseudo-elemento posicionado fora do seu box. * * pointer-events só no hover — do contrário esta faixa de 12px ficaria * permanentemente sobre o conteúdo, engolindo cliques ao lado do menu. */ html.is-collapsed .nav-section::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 12px; pointer-events: none; } html.is-collapsed .nav-section:hover::after, html.is-collapsed .nav-section:focus-within::after { pointer-events: auto; } html.is-collapsed .nav-section:hover > .nav-sub, html.is-collapsed .nav-section:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: translateX(0); } /* Grupo do rodapé não pode empurrar o flyout para fora da tela. */ html.is-collapsed .nav-sub { max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; } html.is-collapsed .nav-sub-title { display: block; padding: 4px 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 6px; } html.is-collapsed .nav-child { justify-content: flex-start; padding: 8px 10px; } html.is-collapsed .nav-child .nav-label { display: block; } /* Tooltip dos itens simples quando recolhido. Os grupos ficam de fora: neles o próprio flyout já mostra o nome no título. */ html.is-collapsed .nav-link[data-tip]:not(.nav-toggle)::after { content: attr(data-tip); position: absolute; left: 100%; top: 50%; transform: translate(-6px, -50%); margin-left: 10px; padding: 6px 10px; z-index: 70; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; font-weight: 400; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; opacity: 0; visibility: hidden; /* Atraso na entrada evita tooltip piscando ao varrer o menu de cima a baixo; na saída some na hora. */ transition: opacity .12s, transform .12s, visibility .12s; transition-delay: 0s; } html.is-collapsed .nav-link[data-tip]:not(.nav-toggle):hover::after, html.is-collapsed .nav-link[data-tip]:not(.nav-toggle):focus-visible::after { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: .35s; } .sidebar-backdrop { display: none; } /* ---------- Conteúdo ---------- */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 40; } .topbar h1 { font-size: 18px; margin: 0; flex: 1; } .content { padding: 24px; flex: 1; } /* ---------- Seletor de unidade (Admin) ----------------------------------- */ .unit-switch { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; } .unit-switch label { font-size: 12px; color: var(--text-muted); } .unit-switch select { background: transparent; border: 0; color: var(--text); font-size: 14px; font-weight: 600; outline: none; cursor: pointer; } .unit-switch select option { background: var(--surface-2); } /* ---------- Cartões e KPIs ----------------------------------------------- */ /* gap real (era 1px): passa despercebido entre .card — que já tem margin próprio — mas grids de campo (ex.: "Local do Atendimento" em Ordens de Serviço, cols-4 de .field direto) dependiam só desse gap pra separar as colunas, então ficavam praticamente coladas horizontalmente. */ .grid { display: grid; gap: 14px; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* * Catálogos de cards com quantidade variável (vitrine de serviços) — com * auto-fit, menos itens que colunas na última linha faz o(s) card(s) * sobrarem ESTICADOS pra ocupar a linha inteira (ex.: 1 serviço numa * categoria vira um card gigante). auto-fill mantém as colunas "fantasmas" * vazias em vez de colapsá-las, então o card fica do tamanho normal e só * sobra espaço em branco ao lado — comportamento de catálogo de produtos. */ .grid.catalogo { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 10px; /* Sem isso, um item de grid não encolhe abaixo do min-content do que tem dentro — uma tabela larga (célula com texto que não quebra, tipo "Instalação Portão Deslizante") empurrava o card (e a página inteira) pra fora da tela no celular, em vez de só rolar de lado dentro do próprio .table-wrap (que já tem overflow-x:auto, mas não adianta se o pai nunca deixa encolher até precisar dele). */ min-width: 0; } .card h2, .card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; } /* ---------- Cards de Ordem de Serviço (listagem admin + "Minhas OS" do técnico) — mesmo componente nas duas telas, daí ficar aqui global em vez de duplicado/inline em cada view. ---------- */ /* Mobile-first: 1 coluna por padrão, mais colunas conforme a tela cresce (ver breakpoints logo abaixo) — evita cards de OS espremidos demais em tablet/notebook só porque a régua antiga pulava direto pra 4 colunas a partir de 768px (largura típica de tablet em retrato, onde 4 colunas de ~170px não cabem nem o rótulo "Cliente:"). */ .os-tecnico-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .os-tecnico-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: all .2s ease; /* Mesma razão do min-width:0 em .card: sem isso, um nome comprido sem quebra (cliente/técnico com nome de empresa gigante, por exemplo) força o card — e a coluna inteira do grid — a crescer além do espaço disponível, desproporcional aos cards vizinhos e vazando pra fora da tela no celular, em vez de truncar com reticências. */ min-width: 0; } .os-tecnico-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); } .os-tecnico-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; } .os-tecnico-numero { font-weight: 700; font-size: 14px; } .os-tecnico-numero a { color: var(--brand); text-decoration: none; } .os-tecnico-numero a:hover { text-decoration: underline; } /* Cabeçalho "checkbox + avatar + nome" (técnicos/clientes/gerentes) — o nome trunca com reticências em vez de esticar o card; min-width:0 nos dois níveis (label E strong) é o que de fato deixa o flex encolher: só no não bastaria, o