/* ==========================================================================
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; }
/* 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 ----------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, 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;
}
.card h2, .card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.kpi .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase;
letter-spacing: .05em; }
.kpi .value { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 6px; }
.kpi .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.kpi.ok .value { color: var(--ok); }
.kpi.warn .value { color: var(--warn); }
.kpi.danger .value { color: var(--danger); }
/* ---------- Abas (Configurações) ------------------------------------------ */
.tabs {
display: flex; gap: 4px; border-bottom: 1px solid var(--border);
margin-bottom: 20px; flex-wrap: wrap;
}
.tab-btn {
display: flex; align-items: center; gap: 6px;
padding: 10px 16px; background: none; border: 0; border-bottom: 2px solid transparent;
color: var(--text-muted); font-size: 14px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ---------- Marca (logo/favicon) ------------------------------------------ */
.brand-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand-preview {
width: 88px; height: 88px; border-radius: 12px; overflow: hidden;
background: var(--surface-2); border: 1px solid var(--border);
display: grid; place-items: center; flex-shrink: 0;
}
.brand-preview img { width: 100%; height: 100%; object-fit: contain; }
.brand-preview.is-favicon { width: 56px; height: 56px; border-radius: 8px; }
.brand-preview .empty-icon { color: var(--text-muted); opacity: .5; }
/* ---------- Banners da landing --------------------------------------------- */
.banner-row {
display: flex; align-items: center; gap: 12px; padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.banner-row:last-child { border-bottom: 0; }
.banner-row-thumb {
width: 72px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
background: var(--surface-2); border: 1px solid var(--border);
}
.banner-row-info { flex: 1; min-width: 0; }
.banner-row-info strong { display: block; font-size: 14px; }
.banner-row-info span { font-size: 12px; color: var(--text-muted); }
/* ---------- Barra de busca / ações no topo de listas --------------------- */
.toolbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.toolbar-form {
display: flex; gap: 8px; flex: 1 1 320px; min-width: 0; max-width: 520px;
}
/*
* O item flex de verdade é o `.field` que ENVOLVE o input (o filho direto de
* `.toolbar-form`) — não o em si. `flex:` num descendente que não é
* item flex não faz nada; sem isso, o wrapper do campo de busca encolhe pro
* min-content de um (praticamente zero), enquanto o
* de um