/*
 * Faria OS — Design System
 * Tokens e componentes base aprovados no blueprint. Este arquivo cresce
 * módulo a módulo (novos componentes entram junto com o módulo que os
 * usa pela primeira vez) — nunca componentes especulativos.
 */

:root {
  --bg: #F5F6F7;
  --surface: #FFFFFF;
  --surface-2: #EEF0F2;
  --surface-hover: #E7E9EC;
  --surface-elevated: #FFFFFF;
  --border: #DEE1E5;
  --border-subtle: #E9EBEE;
  --border-strong: #C7CBD1;
  --ink: #1B1E24;
  --ink-muted: #5B6270;
  --ink-faint: #8B93A1;
  --accent: #8F6122;
  --accent-strong: #6E4B1A;
  --accent-soft: rgba(143, 97, 34, 0.10);
  --accent-contrast: #FFFFFF;
  --success: #217A48;
  --success-soft: rgba(33, 122, 72, .10);
  --danger: #B23A32;
  --danger-soft: rgba(178, 58, 50, .10);
  /* UI_PRODUCTION_BLOCKER audit — `--accent` sempre teve `--accent-contrast` (texto correto sobre
     fundo sólido, revalidado por tema); `--danger` nunca ganhou o equivalente, então `.btn-danger`/
     `.notif-count` usavam `#fff` fixo — funcionava enquanto o vermelho escuro do claro também era
     usado no escuro, quebrou no dia em que o escuro ganhou um vermelho mais claro (`#F0665C`) sem
     ninguém revisar o par cor-de-fundo/cor-de-texto. Mesmo padrão do accent, nunca mais hardcoded. */
  --danger-contrast: #FFFFFF;
  --info: #2F63AE;
  --info-soft: rgba(47, 99, 174, .10);
  --warn: #A24E30;
  --warn-soft: rgba(162, 78, 48, .10);
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .04);
  --shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .12);
  --shadow-lg: 0 4px 8px rgba(20, 20, 20, .05), 0 16px 40px -16px rgba(20, 20, 20, .16);

  /* Radius — três tamanhos nomeados (UI 1, seção 5); --radius permanece o valor "medium" já usado
     em dezenas de componentes existentes, nunca renumerado, para não exigir troca em massa. */
  --radius-sm: 7px;
  --radius: 10px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Escala tipográfica nomeada (UI 1, seção 6) — componentes novos/refinados usam os tokens; regras
     antigas com rem cru continuam funcionando (nunca quebradas), migradas gradualmente. */
  --text-xs: .75rem;      /* 12px  — badges, table headers, timestamps */
  --text-sm: .9375rem;    /* 15px  — navegação, labels, corpo secundário (UI 1.1: 14->15px) */
  --text-base: 1rem;      /* 16px  — corpo padrão */
  --text-md: 1.0625rem;   /* 17px  — corpo com ênfase, section titles */
  --text-lg: 1.375rem;    /* 22px  — títulos de card/painel (UI 1.1: 20->22px) */
  --text-xl: 1.625rem;    /* 26px  — títulos secundários de página (UI 1.1: 24->26px) */
  --text-page-title: 2rem; /* 32px — título de página, claramente dominante (UI 1.1: 30->32px) */
  --text-greeting: 2.375rem; /* 38px — só a saudação do Dashboard (seção 9/17 do pedido UI 1.1: "30-36px quando apropriado" — a abertura do Centro de Comando é o caso apropriado) */
  --text-metric: 2.25rem; /* 36px — números grandes de card (R$ / contagens em destaque) */

  /* Alturas consistentes (UI 1, seção 5; UI 1.1 sobe de novo — inputs/botões/nav item precisam de
     presença real, não só "tecnicamente consistente") */
  --h-input: 46px;
  --h-button: 46px;
  --h-button-sm: 36px;
  --h-nav-item: 46px; /* UI 1.2: 44->46, unificado com --h-input/--h-button */

  --font-sans: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas, monospace;

  /* UI 1.2, problema 3/14-17 — a "Faria AI" da sidebar (rodapé) precisa ler como "escura, elevada,
     dourada" em QUALQUER tema. Causa real do "faixa quase branca" (achado da auditoria, não um
     palpite): `.ai-teaser` usava `--accent-soft` (10% de opacidade em claro) sobre `--surface`
     branco — matematicamente quase indistinguível de branco puro. Como os tokens de superfície se
     invertem entre claro/escuro, nenhum token existente serve; estes 3 são deliberadamente FIXOS
     (declarados uma única vez aqui, nunca sobrescritos nos blocos de dark mode) para o chip nunca
     "seguir" o tema — o mesmo tratamento que o pedido descreve (seção 15) precisa valer sempre. */
  --ai-teaser-bg-start: #241608;
  --ai-teaser-bg-end: #170F05;
  --ai-teaser-ink: #EBD9B8;
}

/* Dark mode (UI 1 seção 30; UI 1.1 seção 18 — "superfícies ainda parecem próximas demais", degraus
   alargados de novo) — níveis de superfície graduais e deliberadamente NUNCA preto puro
   (#0D0F13 -> #101317 -> #0E1013, o bg em si quase não mudou; o que mudou foi o SALTO entre cada
   nível: surface/surface-2/surface-hover/elevated agora têm ~5-6% de luminosidade de distância
   entre si, contra ~2-3% antes — perto do preto, uma diferença pequena em RGB lê como "quase
   igual"; precisa de um salto maior para ler como camadas distintas). `--surface-elevated` deixou
   de ser idêntico a `--surface-2` (para modals/dropdowns realmente "flutuarem" acima de um card
   comum). Sombra discreta — offsets menores, opacidade reduzida (seção 34: "shadows muito fortes
   não funcionam no escuro"). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1013; --surface: #191D24; --surface-2: #232830; --surface-hover: #2E3441; --surface-elevated: #262C36;
    --border: #333944; --border-subtle: #262B33; --border-strong: #454C59;
    --ink: #EDEEF0; --ink-muted: #ABB1BC; --ink-faint: #7A8290;
    --accent: #D9A94D; --accent-strong: #F0C169; --accent-soft: rgba(217, 169, 77, 0.14); --accent-contrast: #17130A;
    --success: #4CC178; --success-soft: rgba(76, 193, 120, .14);
    --danger: #F0665C; --danger-soft: rgba(240, 102, 92, .14); --danger-contrast: #2A0806;
    --info: #6FA8F5; --info-soft: rgba(111, 168, 245, .14);
    --warn: #E07B5A; --warn-soft: rgba(224, 123, 90, .14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 20px -12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .25), 0 16px 32px -16px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --bg: #0E1013; --surface: #191D24; --surface-2: #232830; --surface-hover: #2E3441; --surface-elevated: #262C36;
  --border: #333944; --border-subtle: #262B33; --border-strong: #454C59;
  --ink: #EDEEF0; --ink-muted: #ABB1BC; --ink-faint: #7A8290;
  --accent: #D9A94D; --accent-strong: #F0C169; --accent-soft: rgba(217, 169, 77, 0.14); --accent-contrast: #17130A;
  --success: #4CC178; --success-soft: rgba(76, 193, 120, .14);
  --danger: #F0665C; --danger-soft: rgba(240, 102, 92, .14); --danger-contrast: #2A0806;
  --info: #6FA8F5; --info-soft: rgba(111, 168, 245, .14);
  --warn: #E07B5A; --warn-soft: rgba(224, 123, 90, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 20px -12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .25), 0 16px 32px -16px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] {
  --bg: #F5F6F7; --surface: #FFFFFF; --surface-2: #EEF0F2; --surface-hover: #E7E9EC; --surface-elevated: #FFFFFF;
  --border: #DEE1E5; --border-subtle: #E9EBEE; --border-strong: #C7CBD1;
  --ink: #1B1E24; --ink-muted: #5B6270; --ink-faint: #8B93A1;
  --accent: #8F6122; --accent-strong: #6E4B1A; --accent-soft: rgba(143, 97, 34, 0.10); --accent-contrast: #FFFFFF;
  --success: #217A48; --success-soft: rgba(33, 122, 72, .10);
  --danger: #B23A32; --danger-soft: rgba(178, 58, 50, .10); --danger-contrast: #FFFFFF;
  --info: #2F63AE; --info-soft: rgba(47, 99, 174, .10);
  --warn: #A24E30; --warn-soft: rgba(162, 78, 48, .10);
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .04);
  --shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .12);
  --shadow-lg: 0 4px 8px rgba(20, 20, 20, .05), 0 16px 40px -16px rgba(20, 20, 20, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
p { margin: 0 0 var(--space-4); }
a { color: var(--accent); }
code, .mono { font-family: var(--font-mono); }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/*
 * Tamanho padrão de todo ícone gerado por Icon::svg()/icon() — sem isso,
 * um <svg> com viewBox mas sem width/height cai no tamanho padrão do
 * navegador (~300x150) em qualquer contexto que não tenha uma regra
 * própria. Contextos específicos (sidebar, topbar, empty-state) podem
 * sobrescrever depois no arquivo — a cascata resolve normalmente.
 */
svg.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.2em; }

/* Botões (UI 1, seção 21-23) — altura explícita e consistente (--h-button), área clicável maior
   sem virar "mobile gigante" no desktop; variantes completas (antes só existiam primary/secondary
   + .btn-link solto) — ghost/danger/icon novas, nunca estilizadas ponto a ponto por página. */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  height: var(--h-button);
  padding: 0 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.btn-secondary { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
/* Ghost — sem preenchimento nem borda até o hover; para ações secundárias dentro de listas/toolbars
   onde .btn-secondary já seria pesado demais ao lado de outros elementos. */
.btn-ghost { background: transparent; color: var(--ink-muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--danger); color: var(--danger-contrast); }
.btn-danger:hover:not(:disabled) { opacity: .9; }
/* Contorno de perigo — para confirmações destrutivas secundárias (ex.: "Cancelar" ao lado de um
   .btn-danger primário), nunca dois botões vermelhos sólidos competindo pela atenção. */
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); }
.btn-icon { width: var(--h-button); padding: 0; flex: 0 0 auto; }
.btn-sm { height: var(--h-button-sm); padding: 0 14px; font-size: var(--text-xs); }
.btn-block { width: 100%; }

/* Campos */
/* UI 1, seção 24 — altura consistente via --h-input (44px) para input/select em QUALQUER contexto
   (campo de formulário normal OU filtro solto dentro de .toolbar, achado real da auditoria: um
   <select> de filtro sem wrapper .field caía numa regra à parte, mais apertada — .toolbar select
   antiga tinha padding/font-size menores, então os mesmos filtros pareciam "soltos" comparados a
   um formulário normal por puro acidente de especificidade CSS, nunca por decisão de design). Uma
   única fonte de verdade agora: `.field input/select/textarea` E `.toolbar input/select` sempre a
   mesma régua. textarea cresce em altura (nunca trava em --h-input) mas mantém o mesmo padding.
   Label um pouco maior (--text-sm) — .82rem estava no limite do "não usar 10-11px" do pedido. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field[hidden] { display: none; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); }
.field-input-group { position: relative; display: flex; align-items: center; }
.field input, .field select, .field textarea, .toolbar input, .toolbar select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  height: var(--h-input);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field textarea { height: auto; padding: 11px var(--space-3); resize: vertical; min-height: 96px; font-family: var(--font-body); }
.field input[type="color"] { width: 64px; padding: 4px; cursor: pointer; }
/* Final Autonomous QA — achado real: checkbox/radio nativos nunca tinham accent-color
   definido, então renderizavam com o estilo padrão claro do navegador (quadrado branco
   sólido) sobre o tema escuro, em Empresas/Tarefas/Produtos/Usuários/Conversas/Fornecedores.
   accent-color sozinho só recolore o estado marcado — o quadrado desmarcado continua sendo
   o widget nativo (claro) do navegador; por isso o checkbox é redesenhado por completo aqui. */
input[type="radio"] { accent-color: var(--accent); }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--bg); cursor: pointer; position: relative;
  vertical-align: middle;
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--accent-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-toggle {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 6px 8px;
}
.field-toggle:hover { color: var(--ink); }

/* Alertas */
.alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  color: var(--ink);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  font-size: .88rem;
  margin-bottom: var(--space-4);
}
.alert.alert-info { border-left-color: var(--info); background: var(--info-soft); }

/* Cartão centralizado (login / erros) */
.center-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: var(--space-6);
}
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.auth-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(155deg, var(--accent), var(--accent-strong));
}
.auth-brand strong { font-family: var(--font-sans); font-size: 1.05rem; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: var(--space-1); }
.auth-card .subtitle { color: var(--ink-muted); font-size: .88rem; margin-bottom: var(--space-5); }
.auth-links { display: flex; justify-content: flex-end; margin: -6px 0 var(--space-5); }
.auth-links a, .auth-links button {
  font-size: .82rem; color: var(--ink-faint); text-decoration: none; background: none; border: none;
  cursor: pointer; font-family: var(--font-body); padding: 0;
}
.auth-links a:hover, .auth-links button:hover { color: var(--accent); }
.auth-foot { text-align: center; font-size: .76rem; color: var(--ink-faint); margin-top: var(--space-6); }

/* Páginas de erro */
.error-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: var(--space-7) var(--space-6);
}
.error-code {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.error-card h1 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.error-card p { color: var(--ink-muted); font-size: .9rem; margin-bottom: var(--space-6); }

/* ======================================================================
   Shell autenticado — layout definitivo (Módulo 4)
   Mobile first: o bloco base é o layout de celular; a media query
   min-width:960px liga a sidebar e desliga a navegação inferior.
   Usado por app-head.php/app-foot.php — nenhuma página de conteúdo
   precisa conhecer estas classes.
   ====================================================================== */
:root {
  /* UI 1.1 — validação visual real (screenshot) mostrou que a UI 1 foi conservadora demais ("parece
     que não mudou nada"). Estes números sobem de novo, desta vez perceptivelmente: sidebar 248->266,
     topbar 64->72. Ainda longe do teto que o próprio pedido pôs (seção 28: nunca 300px de sidebar). */
  --sidebar-w: 266px;
  --sidebar-w-collapsed: 80px;
  --topbar-h: 72px;
  --bottom-nav-h: 64px;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--accent); color: var(--accent-contrast);
  padding: 10px 16px; border-radius: 8px; font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

.app-shell { display: flex; min-height: 100vh; background: var(--bg); }

/* Sidebar — escondida por padrão (mobile); vira coluna fixa no desktop */
.app-sidebar {
  display: none;
  flex-direction: column;
  width: var(--sidebar-w);
  flex: 0 0 auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
  height: 100vh;
  position: sticky;
  top: 0;
  transition: width .18s ease;
}
.app-shell[data-sidebar="collapsed"] .app-sidebar { width: var(--sidebar-w-collapsed); }

/* UI 1, seção 12 — marca com mais presença (28->34px, alinhada ao .auth-mark do login em vez de
   menor que ele) sem ficar gigante; padding vertical maior dá mais respiro ao topo da sidebar. */
/* UI 1.1 (validação visual real: "parece que não mudou nada") — presença bem maior de propósito:
   marca 34->40px com sombra própria, padding do topo da sidebar maior, item de navegação com mais
   respiro lateral e gap ícone/texto maior. */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 22px var(--space-5); border-bottom: 1px solid var(--border); }
.sidebar-head .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; }
.sidebar-head .mark { width: 40px; height: 40px; border-radius: var(--radius); flex: 0 0 auto; background: linear-gradient(155deg, var(--accent), var(--accent-strong)); box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--accent) 45%, transparent); }
.sidebar-head .brand-name { font-family: var(--font-sans); font-weight: 650; color: var(--ink); font-size: 1.2rem; white-space: nowrap; overflow: hidden; letter-spacing: -0.01em; }
.app-shell[data-sidebar="collapsed"] .brand-name { display: none; }

.sidebar-toggle { flex: 0 0 auto; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-faint); cursor: pointer; padding: 7px; display: flex; transition: background-color .15s ease, color .15s ease; }
.sidebar-toggle:hover { background: var(--surface-2); color: var(--ink); }
.app-shell[data-sidebar="collapsed"] .sidebar-toggle svg { transform: rotate(180deg); }

/* UI 1.5 — min-height:0 evita o bug clássico de flexbox onde um filho com
   overflow:auto não encolhe abaixo do próprio conteúdo e "empurra" o rodapé
   (.sidebar-foot) para fora da tela em vez de rolar internamente. */
.sidebar-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
/* Scrollbar discreta (achado real do screenshot em notebook: a scrollbar nativa
   branca/larga competia visualmente com a navegação) — trilho invisível, thumb
   fino que só fica mais evidente no hover, nunca escondida por completo. */
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background-color: var(--border-strong); border-radius: var(--radius-full);
  border: 2px solid transparent; background-clip: padding-box;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }

/* UI 1, seção 7-10 — item de navegação mais confortável (altura explícita via --h-nav-item, texto
   maior) e um estado ativo de verdade: barra de acento à esquerda (::before, nunca desloca o
   padding) + tinta + peso — não só "uma faixa apagada" (achado real da auditoria, seção 9).
   `background`/`border`/`font`/`text-align` explícitos aqui NUNCA são supérfluos para o <a>: são o
   que impede o item da Faria AI (mesma classe, mas um <button> de verdade) de herdar o chrome
   nativo do navegador — sem isso ele aparece branco/com borda, destoando do resto (seção 58,
   causa raiz confirmada lendo nav-items.php: só o item "Faria AI" é renderizado como <button>). */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  height: var(--h-nav-item); padding: 0 14px; border-radius: var(--radius-sm);
  text-decoration: none; background: none; border: none; width: 100%;
  font-family: inherit; text-align: left; cursor: pointer;
  color: var(--ink-muted); font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: background-color .15s ease, color .15s ease;
}
/* UI 1.2, problema 2/10-12 — sidebar mais larga (266px) deixou os ícones/gap desproporcionalmente
   pequenos; ícone 20->22px e altura 44->46px (unificado com --h-input/--h-button, já em 46px),
   "levemente" (seção 12 pede explicitamente para não exagerar). */
.nav-item svg { flex: 0 0 auto; width: 22px; height: 22px; }
.nav-item span.label { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.nav-item.active {
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 650;
}
.nav-item.active::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
/* UI 1.2, problema 47-50 — 3 pontos de entrada da Faria AI precisam de papéis visuais distintos
   (nunca o mesmo componente repetido): o item de navegação é só "ir para o workspace", por isso
   fica quase idêntico a qualquer outro item — só o ícone ganha o tom dourado como pista discreta,
   nunca o mesmo tratamento "chip escuro" do CTA do rodapé (`.ai-teaser`, abaixo) nem do Command Bar
   do Dashboard. */
#ai-nav-trigger svg { color: var(--accent); }
.nav-item.soon { color: var(--ink-faint); cursor: default; }
.nav-item.soon .soon-badge {
  margin-left: auto; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-faint);
  padding: 1px 6px; border-radius: var(--radius-full); flex: 0 0 auto;
}
.app-shell[data-sidebar="collapsed"] .nav-item span.label,
.app-shell[data-sidebar="collapsed"] .nav-item .soon-badge { display: none; }
.app-shell[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 0; }

/* Clusters conceituais da sidebar (Fase 4D, seção 7) — só um rótulo discreto entre grupos, nunca
   um componente novo; primeiro grupo (sem antecessor) não recebe a margem extra do topo. UI 1,
   seção 6/11 — .68rem (10.88px) estava abaixo do que o pedido considera legível; --text-xs (12px)
   continua discreto mas legível, com mais respiro antes/depois para separar grupos de verdade.
   UI 1.5 — grupo virou <details>/<summary> (mesmo padrão nativo já usado em .ws-nav-more/
   .see-all-modules/.advanced-field): fecha/abre sem JS, teclado/leitor de tela ganham semântica de
   disclosure de graça, e o conteúdo fechado nem entra na árvore de foco (nunca um item invisível
   mas ainda tabável). .nav-group-label agora é o <summary> — mesma aparência de antes, só ganhou
   cursor/hover/chevron de controle real. */
.nav-group { margin-top: var(--space-3); }
.nav-group:first-child { margin-top: 0; }
.nav-group-label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--ink-faint); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-1);
  border-radius: var(--radius-sm); cursor: pointer; list-style: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav-group-label::-webkit-details-marker { display: none; }
.nav-group-label:hover { background: var(--surface-hover); color: var(--ink-muted); }
.nav-group-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.nav-group-chevron { width: 15px !important; height: 15px !important; flex: 0 0 auto; transform: rotate(-90deg); transition: transform .15s ease; }
.nav-group[open] > .nav-group-label .nav-group-chevron { transform: rotate(0deg); }
/* Grupo da rota atual: rótulo levemente mais forte que os outros fechados, mas nunca competindo
   com a cor de destaque do próprio item ativo dentro dele (seção 27). */
.nav-group[data-group-active="1"] > .nav-group-label { color: var(--ink-muted); }
.nav-group-items { display: flex; flex-direction: column; gap: 4px; }
.app-shell[data-sidebar="collapsed"] .nav-group-label { display: none; }
/* Sidebar recolhida sempre mostrou TODOS os ícones em lista plana (nunca dependeu de grupo) —
   o accordion não pode mudar isso: força os itens visíveis mesmo em grupos fechados. */
.app-shell[data-sidebar="collapsed"] .nav-group:not([open]) .nav-group-items { display: flex; }

.sidebar-foot { padding: var(--space-3); border-top: 1px solid var(--border); }
/* UI 1.2, problema 3/14-17 — causa raiz real (lida no CSS, não suposta): o tratamento anterior
   dependia de `--accent-soft` (translúcido) sobre `--surface`, que em tema claro é ~10% de opacidade
   sobre branco puro — matematicamente quase branco, nunca ia parecer "destacado" em nenhum tema
   claro, independente de hover/hover state/qualquer outra coisa. Correção na causa: fundo próprio,
   opaco, deliberadamente FIXO entre temas (tokens `--ai-teaser-*` do :root, nunca sobrescritos nos
   blocos de dark mode) — sempre escuro/dourado, nunca "segue" o tema, como pedido explicitamente. */
.ai-teaser {
  display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-3);
  width: 100%; border-radius: var(--radius-sm);
  background: linear-gradient(155deg, var(--ai-teaser-bg-start), var(--ai-teaser-bg-end));
  /* UX 2.0 — borda mais discreta e sem anel de foco/glow no hover (era idêntico ao tratamento do
     Command Field do Dashboard): o rodapé da sidebar continua sempre acessível e legível (cor/fundo
     fixos preservados, ver UI 1.2 acima), só deixa de "competir" por status de CTA principal — esse
     papel é do painel da IA no Dashboard. */
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ai-teaser-ink);
  font-size: var(--text-xs); font-weight: 600; font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s ease;
}
button.ai-teaser:hover { border-color: var(--accent-strong); color: #FFF3DD; }
.ai-teaser svg { flex: 0 0 auto; color: var(--accent-strong); }
.app-shell[data-sidebar="collapsed"] .ai-teaser span { display: none; }

/* Coluna principal */
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: var(--space-5);
  height: var(--topbar-h); flex: 0 0 auto;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
/* display fica por conta de .only-desktop (esconde no mobile) — não repetir aqui, para não vencer por especificidade */
.app-topbar .breadcrumb { align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-faint); flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.app-topbar .breadcrumb a { color: var(--ink-faint); text-decoration: none; transition: color .15s ease; }
.app-topbar .breadcrumb a:hover { color: var(--accent); }
/* Final Autonomous QA — achado real: o nav inteiro tem overflow:hidden/nowrap, então o
   último crumb (o dinâmico — nome do registro) era cortado no meio da palavra, sem
   reticências. Deixa só o crumb-current encolher e truncar com "…", preservando os
   crumbs fixos anteriores (Início / Módulo) sempre inteiros. */
.app-topbar .breadcrumb .crumb-current { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; position: relative; }

/* Botões de ícone (UI 1, seção 14; UI 1.1: 38->40px) e transição suave. */
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }

/* Ícone do tema mostra o estado atual (sol = claro, lua = escuro) */
#theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  #theme-toggle .icon-sun { display: none; }
  #theme-toggle .icon-moon { display: block; }
}
:root[data-theme="light"] #theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] #theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: block; }

/* Busca global com presença de ferramenta central (UI 1, seção 15; UI 1.1: 260->304px, dentro da
   faixa 280-340 pedida) — altura consistente com o resto dos campos, focus state real. */
.search-trigger {
  display: none; align-items: center; gap: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink-faint); border-radius: var(--radius-sm);
  height: var(--h-input); padding: 0 var(--space-4); font-size: var(--text-sm); cursor: pointer;
  /* UI 1.5, seção 41 — 304px fixo sobrava pouco espaço para breadcrumb+ações em notebooks
     estreitos (1280-1366px); clamp() cede um pouco nesses casos sem encolher em telas largas
     (>=1660px de viewport já bate no teto de 304px de novo, igual antes). */
  width: clamp(220px, 22vw, 304px); flex: 0 0 auto;
  transition: border-color .15s ease, background-color .15s ease;
}
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface-2); }
.search-trigger:focus-visible { border-color: var(--accent); }
.search-trigger .kbd { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }

.dropdown-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 30; overflow: hidden;
}
.dropdown-panel[hidden] { display: none; }
.dropdown-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.dropdown-body { padding: var(--space-2); }
.dropdown-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: none; border: none; color: var(--ink); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; font-family: inherit; transition: background-color .15s ease; }
.dropdown-item:hover { background: var(--surface-hover); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

.profile-menu { position: relative; }
.profile-trigger { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 10px 5px 5px; cursor: pointer; height: 44px; }
.profile-trigger:hover { background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(155deg, var(--accent), var(--accent-strong)); color: var(--accent-contrast); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* UI 1, seção 17; UI 1.2, problema 44-45 — role continua "metadata", não texto de mesmo peso do
   nome: tamanho um pouco maior (.72rem->--text-xs, 11.5->12px) e mais distância real do nome
   (margin-top 2->4px) para nunca ler como "colado". */
/* Final Autonomous QA — achado real: .only-desktop vira display:inline-flex (row) no
   breakpoint desktop e vence por especificidade sobre ".role { display:block }" acima,
   colando nome+cargo numa linha só ("Ana DemoProprietário") em toda página. Reforça a
   pilha vertical original só para este elemento, sem tocar em nenhum outro .only-desktop. */
.profile-meta.only-desktop { flex-direction: column; align-items: flex-start; }
.profile-meta { display: none; text-align: left; line-height: 1.3; }
.profile-meta .name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.profile-meta .role { font-size: var(--text-xs); color: var(--ink-faint); margin-top: 4px; display: block; }
.profile-panel-head { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.profile-panel-head .name { font-weight: 650; font-size: .9rem; }
.profile-panel-head .email { font-size: .78rem; color: var(--ink-faint); }
.profile-panel form { margin: 0; }
.profile-panel .dropdown-item { width: 100%; }

.app-content { flex: 1 1 auto; padding: var(--space-4) var(--space-4) calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-6)); }

/* Navegação inferior (mobile, UI 1 seção 46) — altura maior (60->64px + safe-area) para touch
   target real; rótulo mais legível (.66rem era abaixo do limite pedido na seção 26); indicador
   ativo com peso de ícone + cor, nunca só cor sozinha (mesmo princípio do nav-item da sidebar). */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--border);
}
.bottom-nav a, .bottom-nav button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--ink-faint); background: none; border: none; font-family: var(--font-body);
  font-size: .72rem; font-weight: 500; cursor: pointer;
}
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav .active { color: var(--accent); font-weight: 700; }
.bottom-nav .active svg { stroke-width: 2.1; }

/* Painel "Mais" (mobile) */
.mobile-sheet-overlay { position: fixed; inset: 0; background: rgba(10,10,12,.4); z-index: 40; display: flex; align-items: flex-end; }
.mobile-sheet-overlay[hidden] { display: none; }
.mobile-sheet { width: 100%; max-height: 80vh; overflow-y: auto; background: var(--surface); border-radius: 16px 16px 0 0; padding: var(--space-4); }
.mobile-sheet-handle { width: 36px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto var(--space-4); }
.mobile-sheet .nav-item { color: var(--ink); }

/* FariaOS 2.0 Fase 2 (Agenda Operacional, seção 22 do pedido) — "+ Novo compromisso" fixo no
   mobile: só ≤640px (no desktop o botão do .page-header já basta), acima do .bottom-nav (mesma
   variável --bottom-nav-h já usada por .app-content, nunca sobrepõe). Puramente aditivo — mesmos
   tokens de cor/sombra do resto do sistema, nenhum componente novo além deste seletor. */
@media (max-width: 640px) {
  .mobile-quick-create {
    position: fixed; right: var(--space-4); z-index: 15;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-4));
    display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 999px;
    background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-lg);
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  }
  .mobile-quick-create svg { width: 18px; height: 18px; }
  /* O botão do .page-header vira redundante quando o FAB fixo já cobre o mesmo destino
     (confirmado por screenshot real — os dois "+ Novo compromisso" apareciam juntos). */
  .page-header .has-mobile-fab { display: none; }
}
@media (min-width: 641px) {
  .mobile-quick-create { display: none; }
}

@media (min-width: 960px) {
  .app-sidebar { display: flex; }
  .bottom-nav, .mobile-sheet-overlay, #mobile-menu-toggle { display: none !important; }
  .search-trigger { display: flex; }
  /* UI 1, seção 18/41/43-44 — container único com largura confortável no target principal
     (notebook 1366x768/1440x900): mais generoso que antes (1200 -> 1280px), nunca "grudado" na
     sidebar. `.is-wide` é opt-in (seção 41 — "não usar uma única largura cega") para as páginas
     de dado denso indicadas pelo pedido (Dashboard/Command Center, CRM, Financeiro, Inbox);
     formulários continuam restritos pelo próprio `.panel { max-width: 560px }`, aninhado dentro
     deste container, sem precisar de nenhuma variante estreita própria. */
  .app-content { padding: var(--space-6) var(--space-7); max-width: 1280px; margin: 0 auto; width: 100%; }
  .app-content.is-wide { max-width: 1480px; }
  /* UI 1.2, problema 1/5-9 — achado real do screenshot: em 1366x768 o Command Center "termina cedo"
     e sobra uma faixa vazia grande (1366 - 266 de sidebar = 1100px disponíveis, mas o teto de
     1480/1600px de `.is-wide` nem chega a ser o limite real em telas menores — então o problema é
     mais visível em monitores GRANDES/ultrawide, onde 1480-1600px deixa centenas de pixels vazios).
     `.is-command-center` é opt-in (só o Dashboard, seção 7 — "não aplicar cegamente ao sistema
     inteiro"): sem teto de largura nenhum, só o mesmo padding confortável de sempre — o conteúdo
     (cards/grids, não texto corrido) usa o espaço disponível de verdade, sem perder legibilidade
     (seção 9), porque um grid de cards mais largo não vira uma linha de texto ilegível. */
  .app-content.is-command-center { max-width: none; }
  /* UI 1.2, problema 43 — achado real: a topbar usava --space-6 (32px) de padding lateral enquanto
     `.app-content` desktop usa --space-7 (48px); breadcrumb/ações da topbar ficavam 16px à esquerda
     do início real do conteúdo abaixo. Mesma régua nos dois — nunca "dois lugares definindo a
     mesma margem". */
  .app-topbar { padding: 0 var(--space-7); }
  .profile-meta { display: block; }
}
@media (min-width: 1600px) {
  /* Desktop grande (seção 43 da UI 1) — o container ainda cresce um pouco, mas nunca acompanha
     100% da largura da tela: acima disso o próprio pedido pede "não deixar 60% da tela vazia" sem
     virar linhas de texto ilegíveis por excesso de largura. `.is-command-center` (acima) já não tem
     teto nenhum, então nenhuma regra aqui precisa mencioná-la — o `max-width: none` já vale em
     qualquer largura de tela, por especificidade (0,2,0 de `.app-content.is-command-center` sempre
     vence o 0,1,0 de `.app-content` sozinho, não importa a ordem das media queries). */
  .app-content { max-width: 1360px; }
  .app-content.is-wide { max-width: 1600px; }
}

/* UI 1.5 — densidade por ALTURA de viewport (notebook), não por largura: o problema real do
   screenshot era 1366x768 sobrando pouca altura útil (chrome do navegador + barra de tarefas do
   SO comem ~100-150px reais), nunca a largura. 820px cobre 1280x720/1366x768 sem afetar
   1440x900+ (permanece "confortável, sem compactação excessiva", seção 55 do pedido) — nunca
   reduz fonte/ícone (seção 24), só respiro vertical: padding de cabeçalho/rodapé da sidebar,
   altura de item de navegação/grupo, gap entre seções do Dashboard e padding dos .command-card
   (reaproveita os mesmos valores já usados por .command-card.is-compact — nenhum número novo). */
@media (min-width: 961px) and (max-height: 820px) {
  .sidebar-head { padding: 14px var(--space-5); }
  .sidebar-nav { padding: var(--space-3) var(--space-3); gap: 2px; }
  .nav-group { margin-top: var(--space-2); }
  .nav-item, .nav-group-label { height: 40px; }
  .nav-group-label { padding: var(--space-1) var(--space-3); }
  .sidebar-foot { padding: var(--space-2) var(--space-3); }
  .ai-teaser { padding: 9px var(--space-3); }

  .dashboard-flow { gap: var(--space-4); }
  .command-card { padding: 16px var(--space-5); }
  .command-card .command-card-label { margin-bottom: 4px; }
}

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-header h1 { font-size: var(--text-page-title); margin: 0; }
.page-header .subtitle { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 4px; }

/* UI 1.1, seção 9 — abertura do Centro de Comando: maior que qualquer page-header do resto do
   sistema (só o Dashboard usa esta classe), letter-spacing mais fechado para não "flutuar" num
   tamanho tão grande, resumo do dia com peso próprio (nunca um <p> solto competindo com o body).
   UI 1.2, seção 73/75 — sem margin-bottom própria: o espaçamento entre a saudação e o resto do
   Centro de Comando agora vem de `.dashboard-flow` (gap único, --space-5), menor que o --space-6
   que esta regra usava sozinha — "saudação ocupa menos altura total", nunca uma 2ª fonte de margem
   competindo com o gap do fluxo. */
.dashboard-greeting h1 { font-size: var(--text-greeting); letter-spacing: -0.025em; margin: 0; }
/* FariaOS 2.0 Fase 1 (seção 18 do pedido) — indicador de escopo (nome da Empresa quando o ator só
   enxerga 1), nunca gritante — é contexto, não a informação principal da saudação. */
.dashboard-scope { display: inline-block; font-size: var(--text-md); font-weight: 600; color: var(--ink-muted); vertical-align: middle; margin-left: 4px; }
.dashboard-greeting-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: var(--space-2); }
.dashboard-greeting-date { font-size: var(--text-md); color: var(--ink-muted); font-weight: 600; }
.dashboard-greeting-summary { font-size: var(--text-md); color: var(--ink-muted); position: relative; padding-left: 14px; }
.dashboard-greeting-summary::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }
@media (max-width: 640px) {
  .dashboard-greeting h1 { font-size: var(--text-page-title); }
}

/* Tabelas de listagem */
/* UI 1, seção 35 — linha mais alta (10px14 -> 13px16 de padding), cabeçalho um pouco mais legível
   e com contraste real (--ink-muted já suficiente, mantido), hover de linha para orientar leitura
   horizontal (antes não existia nenhum feedback ao passar o mouse). */
/* Final Autonomous QA — achado real: overflow-x:auto já existia, mas sem nenhum indício
   visual de que a tabela rola pro lado no mobile — colunas/ações ficavam cortadas na borda
   da tela sem nenhuma pista de que dava pra arrastar. Scrollbar sempre visível (não só
   durante o gesto) resolve a descoberta sem mudar layout nenhum. */
/* Final Autonomous QA — achado real: o select de Produto na tabela de itens do Pedido não
   tinha width definido, então encolhia junto com a célula e "Selecione" aparecia cortado
   ("Se…") mesmo em desktop 1440px. */
#order-items-table select[data-order-product] { width: 100%; min-width: 160px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
.table-wrap::-webkit-scrollbar { height: 7px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data-table th, table.data-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data-table th { font-family: var(--font-sans); font-weight: 600; color: var(--ink-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
table.data-table tbody tr { transition: background-color .1s ease; }
table.data-table tbody tr:hover { background: var(--surface-2); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table td.actions { text-align: right; white-space: nowrap; }
table.data-table td.actions form { display: inline-block; margin-left: 6px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); letter-spacing: .02em; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.b-success { background: var(--success-soft); color: var(--success); }
.badge.b-danger { background: var(--danger-soft); color: var(--danger); }
.badge.b-info { background: var(--info-soft); color: var(--info); }
.badge.b-warn { background: var(--warn-soft); color: var(--warn); }
.badge.b-neutral { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--border); }

/* Filtros e toolbar (UI 1, seção 25) — mesma baseline (align-items:flex-end alinha o rodapé de
   cada campo, inclusive um <select> solto sem .field/label ao lado de campos com label, já que
   ambos agora têm a MESMA altura --h-input); gap maior, wrap responsivo preservado. Dimensão real
   de input/select já vem da regra unificada acima — aqui só o essencial de LAYOUT do toolbar. */
.toolbar { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); align-items: flex-end; }
.toolbar .field { margin-bottom: 0; min-width: 180px; }
.toolbar > select, .toolbar > input { min-width: 180px; width: auto; }

/* Cartão de formulário / detalhe */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-6); max-width: 560px; }
.panel-wide { max-width: 100%; }
.field-hint { font-size: .78rem; color: var(--ink-faint); margin-top: -4px; }
.field-error { font-size: .78rem; color: var(--danger); margin-top: -4px; }
.field select:disabled, .field input:disabled { background: var(--surface-2); color: var(--ink-faint); }
.actions-row { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

/* FariaOS 2.0 Fase 2 (Agenda Operacional) — formulário de reagendamento inline dos follow-ups
   (Leads/Clientes/Oportunidades), alternado via [hidden] + toggleAttribute(). Achado real por
   screenshot: um `display:flex` inline no mesmo elemento vence o `[hidden]{display:none}` do
   UA stylesheet (estilo inline sempre tem prioridade sobre QUALQUER regra de folha de estilo,
   mesmo `!important` de classe) — o formulário aparecia sempre aberto, ignorando o toggle.
   `:not([hidden])` aqui garante que só define `display` quando o atributo já foi removido. */
.inline-reschedule-form:not([hidden]) { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }

/* Revelação única de senha temporária */
.reveal-box {
  border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px;
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.reveal-box .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.reveal-box .value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--ink); user-select: all; }
.reveal-box p { margin: 8px 0 0; font-size: .82rem; color: var(--ink-muted); }

/* Matriz de permissões */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
.matrix-wrap::-webkit-scrollbar { height: 7px; }
.matrix-wrap::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 99px; }
.matrix-wrap::-webkit-scrollbar-track { background: transparent; }
table.matrix { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.matrix th, table.matrix td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: center; }
table.matrix td:first-child, table.matrix th:first-child { text-align: left; }
table.matrix th { font-family: var(--font-sans); font-weight: 600; color: var(--ink-muted); font-size: .72rem; text-transform: uppercase; background: var(--surface-2); }
table.matrix .yes { color: var(--success); font-weight: 700; }
table.matrix .no { color: var(--ink-faint); }
table.matrix .module-row td:first-child { font-weight: 600; color: var(--ink); background: var(--surface-2); }

/* ======================================================================
   Utilitários de visibilidade e grid (Módulo 4)
   ====================================================================== */
.only-mobile { display: inline-flex; }
.only-desktop { display: none; }
@media (min-width: 960px) {
  .only-mobile { display: none !important; }
  .only-desktop { display: inline-flex; }
}

.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Override pontual para pares onde o item menor NUNCA deve esticar até a altura do maior (o padrão
   do CSS Grid é `stretch`, correto na maioria dos casos — ver Empresas/Projetos do Dashboard). */
.grid.is-align-start { align-items: start; }
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* FariaOS 2.0 — Fase 8, PHASE K. Central do Cliente/Lead 360: MAIN ~65% / SIDE ~35%.
   Empilha no mobile. Aditivo — nenhum outro layout muda. */
.record-360 { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .record-360 { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}
.record-360 > * { min-width: 0; }
.r360-header { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: baseline; }
.r360-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .88rem; margin-top: 6px; }
.r360-facts dt { color: var(--ink-muted); }
.r360-facts dd { margin: 0; }
@media (min-width: 721px) and (max-width: 959px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* UI 1.2, problema 18-20/62-63 — débito real de UI 1.1 (achado da auditoria): cada bloco do
   Dashboard definia sua PRÓPRIA margin-bottom inline (repetida em 5 arquivos diferentes) para criar
   ritmo vertical entre seções — e 2 blocos (`activity-feed`/`quick-actions`) nem tinham nenhuma,
   um bug real e não percebido antes (ficavam colados no bloco anterior). Fonte única agora: o
   próprio fluxo do Dashboard usa flex column + gap, então nenhum bloco (nem os pares em grid) mais
   precisa saber de margem — resolve os 2 problemas (inline style novo zerado, seção 63; espaçamento
   consistente) com 1 regra só, nunca N regras por arquivo. */
.dashboard-flow { display: flex; flex-direction: column; gap: var(--space-5); }

/* ======================================================================
   Modal genérico — qualquer <form data-confirm="mensagem"> ganha
   confirmação sem precisar de JS próprio (ver app.js).
   ====================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 10, 12, .45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.modal-overlay[hidden] { display: none; }
.modal { width: 100%; max-width: 440px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.modal h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.modal p { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* Toast (confirmações transitórias — erros de validação continuam em .alert, que persiste na tela) */
.toast-region { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 150; display: flex; flex-direction: column; gap: var(--space-2); max-width: 320px; }
.toast { display: flex; align-items: flex-start; gap: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: 10px; padding: var(--space-3) var(--space-4); box-shadow: var(--shadow); font-size: .86rem; animation: toast-in .18s ease; }
.toast svg { color: var(--success); flex: 0 0 auto; margin-top: 1px; }
.toast button { margin-left: auto; background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Skeleton loading */
.skeleton { display: flex; flex-direction: column; gap: 8px; }
.skel-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.6s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-bar { animation: none; } }

/* Empty state */
/* UI 1, seção 27-28 — estado vazio como ORIENTAÇÃO, nunca erro: ícone dentro de um círculo de
   superfície (nunca solto no vazio), mais respiro vertical, título com peso real, CTA sempre com
   aparência de botão (achado real da auditoria: metade das páginas já usava `.btn btn-primary`
   no CTA, a outra metade tinha só um <a> cru dentro de `.cta` — `:not(.btn)` cobre exatamente essa
   segunda metade sem tocar em nenhuma view, sem duplicar nada em quem já declarava `.btn`). */
.empty-state { text-align: center; padding: var(--space-7) var(--space-5); color: var(--ink-faint); }
/* Ícone dentro de um círculo de superfície via padding+background no próprio <svg> — nenhuma view
   precisa de um wrapper novo; box-sizing garante que os 56px totais incluem o padding. */
.empty-state > svg {
  width: 56px; height: 56px; padding: 14px; box-sizing: border-box;
  margin-bottom: var(--space-4); border-radius: 50%; background: var(--surface-2); color: var(--ink-faint);
}
.empty-state .title { font-size: var(--text-lg); font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.empty-state .hint { font-size: var(--text-sm); max-width: 380px; margin: 0 auto; line-height: 1.55; }
.empty-state .cta { margin-top: var(--space-5); }
/* UI_PRODUCTION_BLOCKER fix — este seletor e `.empty-state.is-compact .cta a` (abaixo) tinham
   especificidade IDÊNTICA (0,3,1 os dois: 3 classes + 1 elemento) e ambos casavam com o mesmo <a>
   sempre que `.is-compact` estava presente — a cascata resolve por PROPRIEDADE, não por regra, então
   `color` vinha da regra de baixo (texto = --accent) mas `background` continuava vindo desta regra
   (fundo = --accent), produzindo TEXTO DOURADO SOBRE FUNDO DOURADO (ilegível por construção, não um
   problema de tema/token). `:not(.is-compact)` torna as 2 regras mutuamente exclusivas na origem —
   nunca mais dependem de ordem de declaração para não se misturar. */
.empty-state:not(.is-compact) .cta a:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-button); padding: 0 20px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-contrast); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color .15s ease;
}
.empty-state:not(.is-compact) .cta a:not(.btn):hover { background: var(--accent-strong); }

/* Estado vazio compacto (Revisão do Centro de Comando, seção 14; reforçado
   no Refinamento de Densidade, 11/08/2026) — 1 linha, ícone pequeno em
   verde de "resolvido" (nunca o ícone cinza de "sem dado"), sem o
   padding/ícone grande de .empty-state. Usado nos blocos do Centro de
   Comando que sempre renderizam (Atenção, Hoje, Atividade) para não dar o
   mesmo peso visual vazio que cheio — a mudança é de comportamento, não só
   de tamanho: por isso o ícone muda de cor (cinza = "sem dado ainda",
   verde = "verificado, está tudo bem"), não só de tamanho. */
.empty-state.is-compact { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; text-align: left; padding: 6px 0; }
.empty-state.is-compact svg { width: 15px; height: 15px; padding: 0; margin-bottom: 0; border-radius: 0; background: none; flex-shrink: 0; color: var(--success); }
.empty-state.is-compact .title { font-size: .85rem; font-weight: 500; color: var(--ink-muted); margin-bottom: 0; }
.empty-state.is-compact .cta { margin: 0 0 0 auto; display: flex; gap: var(--space-4); }
.empty-state.is-compact .cta a { font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.empty-state.is-compact .cta a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .empty-state.is-compact .cta { margin-left: 0; width: 100%; padding-left: 23px; }
}

/* Cartões do Centro de Comando (Módulo 5, redimensionado na UI 1.1 — seção 12/13/16 do pedido:
   padding perceptivelmente maior, radius maior, borda mais discreta que antes — a separação entre
   cards vem mais de espaçamento/superfície do que de uma borda desenhada). */
.command-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.command-card .command-card-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; margin-bottom: var(--space-4); display: flex; align-items: center; gap: 7px; }
.command-card .command-card-label svg { width: 15px; height: 15px; }

/* UX 2.0 — rótulo de SEÇÃO (um nível acima de .command-card-label), usado só para agrupar
   visualmente 2 cards que já vivem lado a lado num .grid-2 (ex.: Atenção geral + comercial) como
   "1 seção com 2 painéis" em vez de "2 caixas concorrendo pelo mesmo peso" — sem fundir dado nem
   tocar no HTML interno de cada card. Puramente aditivo, mesmos tokens de .command-card-label. */
.dashboard-section-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint);
  font-weight: 700; margin: 0 0 var(--space-2) 2px;
}
/* Card cujo único conteúdo é um estado vazio compacto (Refinamento de Densidade) — bem menos
   padding e label mais próxima do status; um card com conteúdo real NUNCA usa este modificador,
   ele só se aplica ao caso "nada para mostrar aqui agora". */
.command-card.is-compact { padding: 16px var(--space-5); }
.command-card.is-compact .command-card-label { margin-bottom: 4px; }

/* UI 1.1, seção 13-14 — hierarquia real de card, nunca CSS próprio por módulo: 5 variantes
   genéricas que qualquer bloco pode declarar. `.is-primary` é reservado para a peça mais
   importante da tela (ex.: "Atenção agora"); `.is-warning` reaproveita o vocabulário de severidade
   já existente (`--danger`), nunca uma cor nova. */
.command-card.is-primary { border-color: color-mix(in srgb, var(--accent) 24%, var(--border-subtle)); box-shadow: var(--shadow); }
.command-card.is-warning { border-left: 3px solid var(--danger); }
.command-card.is-metric { display: flex; flex-direction: column; }
/* Número em destaque (UI 1.1, seção 14 — "R$ 420 mil" precisa parecer maior que "Pipeline
   aberto"): reaproveitável em qualquer card, nunca uma classe nova por card específico. */
.metric-value { font-family: var(--font-sans); font-size: var(--text-metric); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric-value.is-accent { color: var(--accent-strong); }
.metric-label { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 4px; }
/* Excellence Sprint III, seção 5 — "reduzir o hero de IA": a Faria AI é uma COMMAND BAR utilitária,
   não o card mais pesado da tela. Antes: borda com tom do accent, gradiente, --shadow-lg, input de
   52px — lia como hero, competindo com "Sua Empresa Agora"/"Eu faria primeiro" pela primeira
   impressão. Agora: mesmo tratamento neutro de QUALQUER `.command-card` do Centro de Comando
   (superfície plana, borda sutil, sem gradiente/elevação própria) — a IA continua no mesmo lugar
   (decisão de UI 1.1: nunca monopolizar o 1º viewport nem desaparecer), só para de gritar mais
   alto que o resto da página. Reaproveita os tokens de `.command-card`, não cria um 2º sistema. */
.ai-panel {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
}
.ai-panel .ai-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; margin-bottom: var(--space-2); display: flex; align-items: center; gap: 7px; }
.ai-panel .ai-eyebrow svg { width: 15px; height: 15px; color: var(--accent); }
.ai-panel-disabled-note { color: var(--ink-muted); }
.ai-panel-input { display: flex; gap: 10px; margin-top: var(--space-2); }
/* Campo de comando com ícone embutido (mesmo vocabulário do `.cmdk`) — altura unificada com
   --h-input (46px), a mesma régua de QUALQUER input/select/botão do produto (seção 5: parecer
   utilitário, não um componente hero à parte). */
.ai-command-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.ai-command-field > svg { position: absolute; left: var(--space-4); color: var(--accent); flex: 0 0 auto; pointer-events: none; }
.ai-command-field input {
  width: 100%; font-family: var(--font-body); font-size: var(--text-sm);
  height: var(--h-input); padding: 0 var(--space-4) 0 40px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-command-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-command-field input:disabled { color: var(--ink-faint); }
.ai-panel-input .btn { height: var(--h-input); padding: 0 22px; flex: 0 0 auto; }

/* Alertas / prioridades / recomendações — mesmo componente, 3 variantes de gravidade */
/* UI 1.1, seção 24 — ícone + accent + hierarquia real (título/descrição/ação), não só uma faixa de
   cor: cada item ganha um selo circular colorido próprio (mesma cor do severity), maior padding,
   título maior. */
.severity-item { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--space-3); }
.severity-item:last-child { margin-bottom: 0; }
.severity-item.critical { border-left-color: var(--danger); background: var(--danger-soft); }
.severity-item.warning { border-left-color: var(--warn); background: var(--warn-soft); }
.severity-item.info { border-left-color: var(--info); background: var(--info-soft); }
.severity-item-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.severity-item-icon svg { width: 17px; height: 17px; }
.severity-item.critical .severity-item-icon { background: var(--danger-soft); color: var(--danger); }
.severity-item.warning .severity-item-icon { background: var(--warn-soft); color: var(--warn); }
.severity-item.info .severity-item-icon { background: var(--info-soft); color: var(--info); }
.severity-item .severity-title { font-weight: 650; font-size: var(--text-md); margin-bottom: 3px; }
.severity-item .severity-desc { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.5; }
.severity-item .severity-action { margin-top: var(--space-3); }

/* FariaOS 2.0 Fase 1 (seção 12 do pedido) — "uma tentativa de login não deve competir
   visualmente com uma oportunidade de receita crítica". Antes disto (UI 1.2, problema 6/24-26)
   isto era `.severity-item.is-muted` — o mesmo item, só mais discreto, ainda disputando um dos 5
   slots de "Precisa da sua atenção". Correção real na fonte (`AttentionSummaryService`, não aqui):
   alerta administrativo/segurança NÃO crítico nunca mais entra nesse merge — o que sobra é só isto,
   uma lista de 1 linha cada, sempre no rodapé do mesmo card (nunca um card novo: conteúdo raro e
   pequeno não merece competir por espaço). */
.system-notices { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 6px; }
.system-notice { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--ink-faint); }
.system-notice svg { width: 14px; height: 14px; flex: 0 0 auto; }
.system-notice a { margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.system-notice a:hover { text-decoration: underline; }

/* FariaOS 2.0 Fase 1 (seção 4 do pedido) — "Eu faria primeiro": lista numerada compacta, número
   como única pista visual de ordem (nunca cor/ícone de severidade repetido — este bloco já é a
   síntese de outro bloco que tem essa cor/ícone; repetir aqui seria "grade de cards" de novo). */
.next-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.next-action { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.next-action:last-child { border-bottom: none; padding-bottom: 0; }
.next-action-index {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.next-action-body { flex: 1 1 auto; min-width: 0; }
.next-action-title { display: block; font-weight: 650; color: var(--ink); text-decoration: none; }
a.next-action-title:hover { color: var(--accent); }
.next-action-reason { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; }
.next-action .btn-link { flex: 0 0 auto; margin-top: 1px; }

/* FariaOS 2.0 Fase 1 (seção 5-6 do pedido) — "onde existe dinheiro"/vazamento de receita: uma
   linha de insight destacada (nunca um card novo), mesma linguagem visual de aviso já usada em
   `.severity-item.warning`/`.ai-block-warning` — nunca uma cor fora do design system. */
.insight-banner { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); padding: 10px var(--space-4); border-radius: var(--radius); background: var(--warn-soft); color: var(--ink); font-size: var(--text-sm); }
.insight-banner svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--warn); }
.insight-banner a { margin-left: auto; flex: 0 0 auto; font-size: var(--text-xs); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.insight-banner a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .insight-banner { flex-wrap: wrap; }
  .insight-banner a { margin-left: 22px; }
}

/* Atividade recente — linha do tempo */
.activity-feed { position: relative; padding-left: 22px; }
.activity-feed::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.activity-item { position: relative; padding-bottom: var(--space-4); font-size: .85rem; color: var(--ink); }
.activity-item:last-child { padding-bottom: 0; }
.activity-item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.activity-item .activity-time { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-faint); margin-top: 2px; }

/* Ações rápidas */
.quick-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Command palette (Ctrl+K) — estrutura visual, sem busca real ainda */
.cmdk { width: 100%; max-width: 580px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-elevated); box-shadow: var(--shadow-lg); overflow: hidden; }
.cmdk-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); }
.cmdk-input svg { color: var(--ink-faint); flex: 0 0 auto; }
.cmdk-input input { flex: 1 1 auto; border: none; background: none; font-size: .95rem; color: var(--ink); }
.cmdk-input input:focus { outline: none; }
.cmdk-input .kbd { font-family: var(--font-mono); font-size: .68rem; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--ink-faint); }

/* Cartões de Empresa/Projeto (Módulo 6) */
.entity-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease;
}
a.entity-card:hover { border-color: var(--accent); }
.entity-card .entity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.entity-card .entity-card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--accent); flex: 0 0 auto; }
.entity-card .entity-card-icon svg { width: 18px; height: 18px; }
.entity-card .entity-card-name { font-weight: 650; font-size: .96rem; color: var(--ink); margin-bottom: 2px; }
.entity-card .entity-card-sub { font-size: .8rem; color: var(--ink-faint); }
.entity-card .entity-card-meta { font-size: .8rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); }

/* Paginação simples (Anterior/Próxima) */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); font-size: .85rem; color: var(--ink-muted); }

/* ===================================================================
 * Workspace por Empresa (Workspace Base)
 * =================================================================== */

/* Cabeçalho — identidade sempre evidente (ajuste 6 da aprovação) */
.ws-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.ws-identity { display: flex; align-items: center; gap: var(--space-4); }
.ws-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ws-header h1 { font-size: var(--text-xl); margin-bottom: 4px; }
.ws-meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--ink-muted); }
/* FariaOS 2.0 — Commercial Readiness Audit (seção 15/23) — dropdown de troca rápida de Empresa,
   mesmo padrão de .profile-menu/.dropdown-panel já usado no menu de perfil (nenhum componente
   novo). Só aparece quando o usuário tem mais de 1 Empresa no escopo (ver workspace-header.php). */
.ws-switcher { position: relative; }
.ws-switcher .dropdown-panel { max-height: 340px; overflow-y: auto; max-width: calc(100vw - 2 * var(--space-4)); }
.ws-switcher .dropdown-item.is-active { color: var(--accent); font-weight: 600; }
.ws-switcher .dropdown-item.is-active svg:last-child { margin-left: auto; width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 640px) {
  /* Achado real por screenshot: no cabeçalho do Workspace (.ws-header quebra em várias linhas no
     mobile, ver .ws-header flex-wrap), o gatilho pode acabar perto da borda ESQUERDA da tela —
     ancorar o painel pela direita (padrão do menu de perfil, sempre no canto direito da topbar)
     jogava boa parte do painel pra fora da tela à esquerda. Ancorar pela esquerda aqui é seguro
     porque este gatilho nunca fica colado na borda direita como o de perfil. */
  .ws-switcher .dropdown-panel { left: 0; right: auto; }
}

/* Excellence Sprint — indicador global de CONTEXTO OPERACIONAL (topbar), mesmo padrão de
   .ws-switcher/.profile-menu (nenhum componente novo). Fica entre o breadcrumb e as ações do
   topo; nunca compete por espaço com elas (min-width:0 permite truncar o nome da Empresa em vez
   de empurrar os ícones pra fora em telas estreitas de desktop). */
.org-context-switcher { position: relative; flex: 0 1 auto; min-width: 0; }
.org-context-switcher .btn { max-width: 260px; }
.org-context-switcher .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-context-switcher .dropdown-panel { max-height: 340px; overflow-y: auto; max-width: calc(100vw - 2 * var(--space-4)); }
.org-context-switcher .dropdown-item.is-active { color: var(--accent); font-weight: 600; }
.org-context-switcher .dropdown-item.is-active svg:last-child { margin-left: auto; width: 15px; height: 15px; flex-shrink: 0; }

/* Navegação interna — distinta da sidebar global (ajuste 6) */
.ws-nav { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); flex-wrap: wrap; }
.ws-tab { font-family: var(--font-sans); font-size: .86rem; font-weight: 600; padding: 9px 14px; border-radius: 8px 8px 0 0; border: none; background: none; color: var(--ink-faint); text-decoration: none; display: inline-block; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.ws-tab:hover { color: var(--ink); background: var(--surface-2); }
.ws-tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }

/* Clusters conceituais (Fase 4D, seções 4-5) — os grupos continuam 100% clicáveis em linha, só
   com um divisor sutil entre clusters (Operação | Comercial | Catálogo e Suprimentos); nenhuma
   área real fica atrás de um clique extra/dropdown. */
.ws-nav-groups { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ws-nav-group { display: flex; align-items: center; gap: var(--space-2); }
.ws-nav-group + .ws-nav-group { margin-left: var(--space-1); padding-left: var(--space-3); border-left: 1px solid var(--border); }

/* Alternativa mobile (Fase 4D, seção 6) — troca a linha de abas por um <select> agrupado por
   <optgroup>, mesmo padrão já usado para troca de Empresa nos formulários; evita tanto o scroll
   horizontal quanto o empilhamento de várias linhas de pills. Escondido no desktop por padrão. */
.ws-nav-mobile { display: none; }

/* "Mais áreas" — os 12 módulos futuros, recolhidos, sem o mesmo peso das abas reais (ajuste 1) */
.ws-nav-more { margin-left: auto; position: relative; }
.ws-nav-more summary { list-style: none; cursor: pointer; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--ink-faint); padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px; }
.ws-nav-more summary::-webkit-details-marker { display: none; }
.ws-nav-more summary:hover { background: var(--surface-2); color: var(--ink-muted); }
.ws-nav-more-count { background: var(--surface-2); color: var(--ink-faint); font-size: .68rem; padding: 1px 7px; border-radius: 99px; }
.ws-nav-more[open] summary { color: var(--ink); }
.ws-nav-more-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-4); width: 320px; max-height: 60vh; overflow-y: auto; display: grid; gap: var(--space-3); }
.ws-nav-more-group .group-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
.ws-nav-more-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .84rem; color: var(--ink-muted); padding: 5px 0; }
.lock-badge { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); color: var(--ink-faint); padding: 2px 7px; border-radius: 99px; flex: 0 0 auto; }

/* "Ver todas as áreas planejadas" — mesma listagem, embutida no conteúdo da Visão Geral */
.see-all-modules { margin-top: var(--space-4); }
.see-all-modules summary { cursor: pointer; font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--accent); list-style: none; }
.see-all-modules summary::-webkit-details-marker { display: none; }
.see-all-modules .ws-nav-more-panel { position: static; width: auto; box-shadow: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Cartão genérico usado na Visão Geral (estatística, contexto, listas) — UI 1.1: mesmo padding maior do .command-card */
.card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.card .card-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; margin-bottom: var(--space-3); }
.stat-value { font-family: var(--font-sans); font-size: var(--text-metric); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.stat-value-text { font-size: var(--text-lg); }
.stat-hint { font-size: .78rem; color: var(--ink-muted); margin-top: 2px; }
.hint, .hint-text { font-size: .78rem; color: var(--ink-faint); }

/* FariaOS 2.0 Fase 1 (seção 3B do pedido) — "Visão rápida": uma TIRA fina de 4-6 números, nunca
   mais uma grade de cards (o pedido pede explicitamente "evitar 10 cards"). 1 superfície com
   divisores internos lê como 1 elemento, não N caixas concorrendo por atenção. */
.quick-stats { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.quick-stat { flex: 1 1 160px; padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: background-color .15s ease; }
.quick-stat:last-child { border-right: none; }
.quick-stat:hover { background: var(--surface-2); }
.quick-stat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; margin-bottom: 4px; }
.quick-stat-value { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.quick-stat-value.is-negative { color: var(--danger); }
@media (max-width: 720px) {
  .quick-stat { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .quick-stat:last-child { border-bottom: none; }
}
p.hint-text { margin: 0 0 var(--space-3); }

/* Contexto — pares chave/valor, reaproveitado na Visão Geral, Configurações e Revisão do assistente */
.context-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
.context-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.context-row:last-child { border-bottom: none; }
.context-row .k { color: var(--ink-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.context-row .v.placeholder { color: var(--ink-faint); font-style: italic; }

/* Lista curta (Projetos recentes) */
.mini-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-list li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.mini-list li:last-child { border-bottom: none; }
.mini-list-more { font-size: .8rem; font-weight: 600; }

/* Cards de módulo futuro — nunca clicáveis, nunca parecem funcionais (ajuste 7) */
.soon-card { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; opacity: .7; cursor: default; user-select: none; }
.soon-card-name { font-size: .84rem; font-weight: 600; color: var(--ink-muted); }
.soon-card-tag { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* Assistente de cadastro em 4 passos */
.steps-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.step-pill { flex: 1 1 0; text-align: center; padding: 8px 4px; border-radius: 8px; font-size: .76rem; font-weight: 600; background: var(--surface-2); color: var(--ink-faint); }
.step-pill.current { background: var(--accent-soft); color: var(--accent-strong); }
.step-pill.done { color: var(--ink-muted); }
.wizard-cancel-form { margin-top: var(--space-4); text-align: center; }
.btn-link { background: none; border: none; color: var(--ink-faint); font-size: .82rem; text-decoration: underline; cursor: pointer; font-family: var(--font-body); padding: 4px; }
.btn-link:hover { color: var(--danger); }

/* Checkboxes de módulos (assistente passo 3 + Configurações) */
.module-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.module-checkbox { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-muted); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.module-checkbox:has(input:checked) { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }

/* Campo avançado (slug) — discreto, nunca em destaque (ajuste do formulário de Empresa) */
.advanced-field { margin-top: var(--space-4); }
.advanced-field summary { cursor: pointer; font-size: .8rem; color: var(--ink-faint); font-weight: 600; list-style: none; }
.advanced-field summary::-webkit-details-marker { display: none; }

.form-section-title { font-size: .95rem; margin: var(--space-6) 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.danger-zone { border-color: var(--danger-soft); }

/* Barra de progresso do Projeto — nunca lê como "concluído" quando cancelado (ajuste 5) */
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-row .bar-track { flex: 1 1 auto; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress-row .bar-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.progress-row .bar-fill.muted { background: var(--ink-faint); }
.progress-row .progress-label { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

@media (max-width: 640px) {
  .ws-nav { position: relative; }
  .ws-nav-groups { display: none; }
  .ws-nav-mobile {
    display: block; width: 100%; font-family: var(--font-body); font-size: .88rem;
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg); color: var(--ink);
  }
  .ws-nav-more { margin-left: 0; order: 99; width: 100%; }
  .ws-nav-more-panel { position: static; width: auto; box-shadow: none; }
}

/* ===================================================================
 * Fase 1 — Tarefas & Agenda
 * =================================================================== */

.text-danger { color: var(--danger); }
.placeholder { color: var(--ink-faint); font-style: italic; }

/* Abas de visualização (Tarefas: Hoje/Minhas/...; Agenda: Hoje/Semana/Mês/Lista) */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.filter-tab { font-family: var(--font-sans); font-size: .8rem; font-weight: 600; padding: 7px 13px; border-radius: 99px; background: var(--surface-2); color: var(--ink-muted); text-decoration: none; }
.filter-tab:hover { color: var(--ink); }
.filter-tab.is-active { background: var(--accent-soft); color: var(--accent-strong); }

/* Checklist */
.checklist-toggle { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--surface); font-size: .7rem; line-height: 1; flex: 0 0 auto; cursor: pointer; }
.checklist-toggle.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.mini-list li span.is-done { text-decoration: line-through; color: var(--ink-faint); }

/* Formulário embutido curto (adicionar item de checklist/dependência) */
.inline-add-form { display: flex; gap: 8px; margin-top: var(--space-3); }
.inline-add-form input { flex: 1 1 auto; font-family: var(--font-body); font-size: .85rem; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.inline-adjust-form { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.inline-adjust-form input { font-size: .78rem; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }

/* Controle de tempo */
.time-tracker-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* FariaOS 2.0 — Agenda Navigation 2.2 (seção 2 do pedido) — toolbar temporal universal (Dia/
   Semana/Mês; Lista não tem período, ver a view). Mesmos tokens/.icon-btn já usados no resto do
   app — nenhum componente novo, só uma composição nova de peças existentes. */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.calendar-toolbar-nav { display: flex; align-items: center; gap: 4px; }
.calendar-toolbar-label { font-size: var(--text-lg); font-weight: 650; min-width: 220px; text-align: center; }
.calendar-toolbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.calendar-date-picker input[type="date"] {
  height: 36px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .84rem;
}
@media (max-width: 640px) {
  .calendar-toolbar-label { min-width: 0; font-size: var(--text-base); }
}

/* Calendário — grade de mês (sem biblioteca externa) */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.month-grid-weekday { background: var(--surface-2); color: var(--ink-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 6px 8px; }
.month-grid-cell { background: var(--surface); min-height: 84px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.month-grid-cell.is-empty { background: var(--surface-2); }
.month-grid-cell.is-today { background: var(--accent-soft); }
.month-grid-cell-head { display: flex; align-items: center; justify-content: space-between; }
.month-grid-day { font-size: .74rem; font-weight: 700; color: var(--ink-muted); text-decoration: none; padding: 1px 5px; border-radius: 5px; }
.month-grid-day:hover { background: var(--surface-hover); color: var(--ink); }
.month-grid-cell.is-today .month-grid-day { color: var(--accent); }
.month-grid-add { font-size: .78rem; font-weight: 700; line-height: 1; color: var(--ink-faint); text-decoration: none; padding: 0 4px; border-radius: 4px; opacity: 0; transition: opacity .12s ease; }
/* :focus-visible garante que tab (teclado) revela o link antes de ativá-lo — só :hover deixaria
   um link focável mas invisível pra quem navega sem mouse (achado próprio, corrigido na hora). */
.month-grid-cell:hover .month-grid-add, .month-grid-add:focus-visible { opacity: 1; }
.month-grid-add:hover { background: var(--surface-hover); color: var(--accent); }
@media (max-width: 720px) {
  .month-grid-add { opacity: 1; } /* sem :hover confiável em touch — sempre visível */
}

/* Semana (Agenda Navigation 2.2, seção 6) — colunas por dia, cada cabeçalho abre o Dia
   (Daily Timeline), cada dia lista seus próprios compromissos (mesmo $byDate já agrupado,
   nenhuma query nova). Fallback deliberado à grade horária completa (permitido pela própria
   seção 6: "colunas/listas por dia bem organizadas" quando a grade horária for risco maior). */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.week-grid-col { background: var(--surface); min-height: 220px; display: flex; flex-direction: column; }
.week-grid-col.is-today { background: var(--accent-soft); }
.week-grid-col-head { padding: 8px; border-bottom: 1px solid var(--border-subtle); text-align: center; text-decoration: none; color: var(--ink); display: block; }
.week-grid-col-head:hover { background: var(--surface-hover); }
.week-grid-col-weekday { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 700; }
.week-grid-col-daynum { font-size: 1.1rem; font-weight: 700; }
.week-grid-col.is-today .week-grid-col-daynum { color: var(--accent); }
.week-grid-col-body { flex: 1 1 auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.week-grid-entry { font-size: .72rem; padding: 3px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.week-grid-entry.is-task { background: var(--info-soft, var(--surface-2)); }
.week-grid-col-add { font-size: .72rem; color: var(--ink-faint); text-decoration: none; padding: 3px 6px; border-radius: 5px; margin-top: auto; }
.week-grid-col-add:hover { background: var(--surface-hover); color: var(--accent); }
@media (max-width: 860px) {
  /* 7 colunas apertadas viram ilegíveis em telas médias/estreitas (seção 14 do pedido: "não 7
     colunas ilegíveis") — empilha em dias, cada um com scroll interno se tiver muita coisa. */
  .week-grid { display: flex; flex-direction: column; gap: var(--space-2); background: none; border: none; }
  .week-grid-col { border: 1px solid var(--border); border-radius: var(--radius); min-height: 0; }
  .week-grid-col-head { display: flex; align-items: baseline; gap: 8px; text-align: left; padding: 10px 12px; }
  .week-grid-col-body { flex-direction: row; flex-wrap: wrap; }
  .week-grid-entry { flex: 0 0 auto; }
}
.month-grid-entry { font-size: .68rem; padding: 2px 5px; border-radius: 5px; background: var(--surface-2); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-grid-entry.is-task { background: var(--info-soft, var(--surface-2)); }
.month-grid-more { font-size: .66rem; color: var(--ink-faint); }

@media (max-width: 720px) {
  .month-grid { grid-template-columns: repeat(7, minmax(36px, 1fr)); font-size: .8rem; }
  .month-grid-cell { min-height: 56px; padding: 3px; }
}

/* FariaOS 2.0 Fase 2.1 (Agenda Daily Timeline, seções 4-10 do pedido) — só a visão "Hoje" usa
   isto; Semana/Mês/Lista continuam com .month-grid/.mini-list de sempre. Duas camadas na MESMA
   caixa (position:relative): fundo em fluxo normal (linhas de meia-hora + rótulo + link de criar),
   sobreposição absoluta (eventos posicionados em % — nunca px fixo, pra funcionar igual no mobile
   sem media query própria; "56px" é a única largura fixa, reservada pro rótulo de hora). */
.day-timeline-allday { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.day-timeline-allday-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: .8rem; }
.day-timeline-grid { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.day-timeline-row { display: flex; height: var(--slot-px, 32px); border-top: 1px solid var(--border-subtle); }
.day-timeline-row:first-child { border-top: none; }
.day-timeline-row.is-hour { border-top-color: var(--border); }
.day-timeline-time { width: 52px; flex-shrink: 0; padding: 2px 8px 0 0; text-align: right; font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.day-timeline-slot { flex: 1 1 auto; display: block; text-decoration: none; }
a.day-timeline-slot:hover { background: var(--surface-2); cursor: pointer; }
.day-timeline-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 3; pointer-events: none; }
.day-timeline-now-label { position: absolute; left: 52px; top: -8px; background: var(--danger); color: var(--danger-contrast); font-size: .62rem; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.day-timeline-event {
  position: absolute; z-index: 2; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--surface-elevated, var(--surface-2)); border: 1px solid var(--border-strong, var(--border));
  border-left: 3px solid var(--accent); padding: 3px 8px; text-decoration: none; color: var(--ink);
  left: calc(52px + (100% - 52px) * var(--tl-left, 0)); width: calc((100% - 52px) * var(--tl-width, 1));
  top: var(--tl-top, 0); height: var(--tl-height, 30px); box-shadow: var(--shadow-sm);
}
.day-timeline-event:hover { background: var(--surface-hover, var(--surface-2)); }
.day-timeline-event-time { display: block; font-size: .68rem; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.day-timeline-event-title { display: block; font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-timeline-event-org { display: block; font-size: .68rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-timeline-event-badge { position: absolute; top: 3px; right: 6px; }
/* Bloco curto (30min) — 1 linha só, "HH:MM · Título" (achado real por screenshot: tempo+título+
   Empresa em linhas separadas cortava texto num bloco de ~28-30px de altura). */
.day-timeline-event.is-compact { display: flex; align-items: center; padding: 0 8px; }
.day-timeline-event.is-compact .day-timeline-event-title { font-size: .74rem; font-weight: 600; }
@media (max-width: 640px) {
  .day-timeline-time { width: 40px; font-size: .62rem; }
  .day-timeline-event { left: calc(40px + (100% - 40px) * var(--tl-left, 0)); width: calc((100% - 40px) * var(--tl-width, 1)); }
  .day-timeline-now-label { left: 40px; }
  .day-timeline-event-badge { display: none; } /* espaço reduzido — status já está no badge do evento quando aberto */
}

/* Notificações (sino da topbar, antes decorativo) */
.notif-count { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: var(--danger); color: var(--danger-contrast); font-size: .62rem; font-weight: 700; line-height: 15px; text-align: center; }
#notif-trigger { position: relative; }
.dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.notif-list li { border-bottom: 1px solid var(--border); }
.notif-list li:last-child { border-bottom: none; }
.notif-list li.is-unread .notif-item-title { font-weight: 700; }
.notif-list li.is-unread { background: var(--accent-soft); }
.notif-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 14px; cursor: pointer; font-family: var(--font-body); }
.notif-item-title { display: block; font-size: .84rem; color: var(--ink); }
.notif-item-body { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: 2px; }

/* ===================================================================
 * Fase 2 — CRM (Kanban)
 * =================================================================== */

.kanban-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.kanban-board { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); align-items: flex-start; }
.kanban-column {
  flex: 0 0 260px; width: 260px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-3); min-height: 120px; display: flex; flex-direction: column; gap: 8px;
}
.kanban-column.is-drag-over { border-color: var(--accent); background: var(--accent-soft); }
.kanban-column-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.kanban-column-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.kanban-column-total { font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kanban-column-count { font-size: .68rem; color: var(--ink-faint); background: var(--surface); border-radius: 99px; padding: 1px 7px; }
.kanban-cards { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.kanban-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: .82rem; color: var(--ink); text-decoration: none; display: block; cursor: grab;
}
.kanban-card:hover { border-color: var(--accent); }
.kanban-card.is-dragging { opacity: .4; }
.kanban-card-title { font-weight: 600; display: block; margin-bottom: 3px; }
.kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .72rem; color: var(--ink-faint); }
.kanban-empty { font-size: .74rem; color: var(--ink-faint); text-align: center; padding: 10px 0; }

@media (max-width: 720px) {
  .kanban-column { flex: 0 0 78vw; width: 78vw; }
}

/* ===================================================================
 * Fase 3 — Faria AI / AI Operating Layer
 * =================================================================== */

/* Dashboard — sugestões da Faria AI (chips de prompt pré-escrito), no máximo 3 (view já corta —
   Excellence Sprint III, seção 5: "sugestões pequenas abaixo", não uma 2ª fileira de botões grandes
   competindo com o campo de comando). Chip menor que um `.btn` — é atalho discreto, não CTA. */
.ai-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--space-2); }
.ai-suggestions-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; margin-right: 2px; }
.ai-suggestion-chip {
  border: 1px solid var(--border-subtle); background: transparent; color: var(--ink-muted); border-radius: var(--radius-full);
  padding: 6px 14px; font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ai-suggestion-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Comando rápido (Ctrl/Cmd+K) — turno único, some ao trocar de tela */
.cmdk-hint { padding: 0 var(--space-4); font-size: .74rem; color: var(--ink-faint); }
.cmdk-result { padding: var(--space-4); border-top: 1px solid var(--border); max-height: 320px; overflow-y: auto; font-size: .88rem; color: var(--ink); white-space: pre-wrap; }

/* FariaOS 2.0 — Subfase 2.2 (Interaction UX Foundation, seção 7/11 do pedido) — UM drawer
   reutilizável pra qualquer entidade, nunca "sete drawers diferentes" (mesmo padrão estrutural
   de .ai-side-panel logo abaixo, prefixo próprio pra não colidir). O conteúdo injetado é sempre
   o MESMO fragmento que a página cheia usaria (ver partials/event-context.php do Calendar) — só
   o painel força os grids de 2 colunas a empilhar, porque a largura aqui é bem menor. */
.context-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 110;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s ease;
}
.context-drawer.is-open { transform: translateX(0); }
.context-drawer-overlay { position: fixed; inset: 0; background: rgba(10, 10, 12, .35); z-index: 109; }
.context-drawer-overlay[hidden] { display: none; }
.context-drawer-head { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-3) 0; }
.context-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.context-drawer-entity-head { margin-bottom: var(--space-4); }
.context-drawer-entity-head h2 { margin: 0 0 4px; font-size: 1.25rem; }
.context-drawer-entity-head .subtitle { color: var(--ink-muted); font-size: .84rem; margin-bottom: 6px; }
.context-drawer-loading { color: var(--ink-faint); font-size: .86rem; padding: var(--space-6) 0; text-align: center; }
.context-drawer-body .grid-2 { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .context-drawer { width: 100vw; }
}

/* Painel lateral — conversa persistente, nunca trava a navegação atrás dele */
.ai-side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 110;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s ease;
}
.ai-side-panel.is-open { transform: translateX(0); }
.ai-side-panel-overlay { position: fixed; inset: 0; background: rgba(10, 10, 12, .35); z-index: 109; }
.ai-side-panel-overlay[hidden] { display: none; }
.ai-side-panel-head { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.ai-side-panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* Fase 6.1, seção 20 — linha curta, nunca um banner grande; hidden por padrão, JS só remove o
   atributo quando sabe o que mostrar (nunca aparece vazia ou com dado incerto). */
.ai-side-panel-context { margin-top: 6px; font-size: .76rem; color: var(--ink-muted); display: flex; align-items: center; gap: 5px; }
.ai-side-panel-context svg { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }
.ai-side-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.ai-side-panel-title svg { color: var(--accent); }
.ai-side-panel-head-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ai-side-panel-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; margin: 0 auto; width: 100%; }
.ai-empty-state { text-align: center; color: var(--ink-faint); font-size: .84rem; padding: var(--space-6) var(--space-4); }
.ai-empty-state svg { color: var(--accent); margin-bottom: var(--space-3); }
.ai-side-panel-input { display: flex; gap: 8px; padding: var(--space-3); border-top: 1px solid var(--border); }
.ai-side-panel-input textarea {
  flex: 1 1 auto; resize: none; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: var(--font-body); font-size: .88rem; padding: 8px 11px; max-height: 100px;
}
.ai-side-panel-input textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Mensagens — largura de leitura confortável, hierarquia clara entre usuário/Faria AI (Fase 6, seção 5) */
.ai-message { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: .89rem; line-height: 1.55; white-space: pre-wrap; }
.ai-message code { background: var(--surface-3, rgba(255,255,255,.08)); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.ai-message-list { margin: 4px 0; padding-left: 20px; }
.ai-message-list li { margin: 2px 0; }
.ai-message-table-wrap { overflow-x: auto; margin: 8px 0; }
.ai-message-table { border-collapse: collapse; width: 100%; font-size: .85em; white-space: normal; }
.ai-message-table th, .ai-message-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.ai-message-table th { background: var(--surface-3, rgba(255,255,255,.06)); font-weight: 600; }
.ai-message.is-user { align-self: flex-end; background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 4px; }
.ai-message.is-assistant { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; max-width: 100%; }
.ai-message.is-pending { opacity: .7; display: flex; align-items: center; gap: 8px; }
.ai-message.is-pending::before {
  content: ''; width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--ink-faint); border-top-color: var(--accent); animation: ai-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ai-message.is-pending::before { animation-duration: 1.6s; } }
.ai-message.is-error { align-self: flex-start; background: var(--danger-soft); color: var(--danger); }
/* Fase 6.1, seção 38/44 — aviso de sistema (provider indisponível/rede/conversa cheia): nunca
   vermelho de erro (não foi o usuário que errou, nem uma ação falhou) nem cinza neutro de resposta
   normal (não é uma resposta) — tom de aviso, deixando claro que é temporário e o resto continua
   funcionando. */
.ai-message.is-notice { align-self: flex-start; background: var(--warn-soft); color: var(--warn); border: 1px solid transparent; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Trilha de progresso real (Fase 6, seção 17/18) — eventos objetivos do sistema, nunca raciocínio
   interno do modelo: "Cliente", "Estoque"... vêm da categoria real das Tools chamadas no turno. */
.ai-steps { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; color: var(--ink-muted); }
.ai-steps .ai-step { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 99px; padding: 3px 10px 3px 8px; }
.ai-steps .ai-step svg { width: 12px; height: 12px; color: var(--success); flex: 0 0 auto; }

/* Blocos de resposta estruturada (Fase 6, seção 6/7) — cartão funcional, nunca texto cru/log técnico */
.ai-block { align-self: stretch; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.ai-block-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: var(--space-3) var(--space-4) 0; }
.ai-block-fields, .ai-block-items { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 7px; }
.ai-block-field, .ai-block-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: .87rem; }
.ai-block-field-label, .ai-block-item-label { color: var(--ink-muted); flex: 0 0 auto; }
.ai-block-field-value, .ai-block-item-value { color: var(--ink); font-weight: 600; text-align: right; }
.ai-block-item-hint { display: block; font-size: .72rem; font-weight: 400; color: var(--ink-faint); text-align: right; }
.ai-block-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--space-4) var(--space-4); }
.ai-block-links a { font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; }
.ai-block-links a:hover { background: var(--accent-soft); border-color: var(--accent); }
.ai-block-operation .ai-block-title { color: var(--success); }
.ai-block-warning { background: var(--warn-soft); border-color: var(--warn); padding: var(--space-3) var(--space-4); display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--ink); }
.ai-block-warning svg { color: var(--warn); flex: 0 0 auto; margin-top: 1px; }

/* Entity chips — Fase 6, seção 32: entidades resolvidas mostradas de forma leve, clicáveis quando têm link */
.ai-entity-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px;
  text-decoration: none;
}
a.ai-entity-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Card de confirmação — reaproveita .command-card/.severity-item/.btn-primary/.btn-secondary, nunca um componente novo do zero */
.ai-confirm-card { align-self: stretch; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); padding: var(--space-4); }
.ai-confirm-card-title { font-size: .78rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ai-confirm-card-list { margin: 0 0 var(--space-3); padding-left: 1.2em; font-size: .87rem; color: var(--ink); }
.ai-confirm-card-list li { margin-bottom: 6px; }
/* Fase 3.1 — confirmação composta: cada <li> é 1 ação do plano (descrição + argumentos), não mais
   1 linha solta por argumento — o mesmo card agora pode representar N ações, 1 confirmação só. */
.ai-confirm-card-list .ai-confirm-card-args { font-size: .78rem; color: var(--ink-muted); margin-top: 1px; }
/* Compacto por padrão (Fase 6, seção 14) — detalhe (estoque/margem/saldo antes-depois) só some quando
   expandido; melhor no mobile, resumo continua legível sem rolar. */
.ai-confirm-card-list .ai-confirm-card-args.is-detail { display: none; }
.ai-confirm-card.is-expanded .ai-confirm-card-list .ai-confirm-card-args.is-detail { display: block; }
/* Fase 6.1, seção 10/42 — aviso de que a ação vai falhar (ambiguidade/sem permissão/conta inválida)
   nunca fica escondido atrás de "Ver detalhes", nem se mistura com o texto neutro dos outros
   detalhes — sempre visível, sempre com destaque de aviso. */
.ai-confirm-card-warning {
  display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; font-weight: 600;
  color: var(--warn); margin-top: 4px;
}
.ai-confirm-card-warning svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.ai-confirm-card-toggle {
  background: none; border: none; padding: 0; margin: 0 0 var(--space-3); font-size: .78rem; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.ai-confirm-card-actions { display: flex; gap: 8px; }
.ai-confirm-card-actions .btn[disabled] { opacity: .6; cursor: default; }
.ai-confirm-card.is-resolved { opacity: .7; }
.ai-confirm-card.is-resolved .ai-confirm-card-actions, .ai-confirm-card.is-resolved .ai-confirm-card-toggle { display: none; }

/* Falha parcial (Fase 6, seção 46) — nunca "sucesso" genérico quando só parte do plano executou */
.ai-partial-results { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .84rem; }
.ai-partial-results li { display: flex; align-items: flex-start; gap: 7px; }
.ai-partial-results li svg { flex: 0 0 auto; margin-top: 2px; width: 14px; height: 14px; }
.ai-partial-results li.is-ok svg { color: var(--success); }
.ai-partial-results li.is-fail svg { color: var(--danger); }
.ai-partial-results li.is-fail { color: var(--danger); }

/* Histórico de conversas (Fase 6, seção 26-29) — lista curta dentro do próprio painel, nunca uma sidebar nova */
.ai-history-panel {
  position: absolute; inset: 0; background: var(--surface); z-index: 5; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease;
}
.ai-history-panel.is-open { transform: translateX(0); }
.ai-history-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--border); font-weight: 700; }
.ai-history-list { flex: 1 1 auto; overflow-y: auto; padding: var(--space-2); }
.ai-history-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none;
  border-radius: 9px; padding: 10px 12px; cursor: pointer; color: var(--ink);
}
.ai-history-item:hover { background: var(--surface-2); }
.ai-history-item-title { font-size: .87rem; font-weight: 600; }
.ai-history-item-date { font-size: .74rem; color: var(--ink-faint); }
.ai-history-empty { text-align: center; color: var(--ink-faint); font-size: .84rem; padding: var(--space-6) var(--space-4); }

@media (max-width: 640px) {
  .ai-side-panel { width: 100vw; }
}

/* FariaOS 2.0 — Fase 3, Subfase 3.5: Onboarding Inteligente de Empresa.
   Cartão selecionável (rádio nativo escondido, cartão inteiro clicável) —
   reaproveitado pelas perguntas de Segmento/Porte/Alcance/Canal/Capacidade,
   nunca um <select> gigante escondendo as opções. */
.option-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.option-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color .12s ease, background .12s ease; }
.option-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.option-card input[type="radio"], .option-card input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.option-card-body { display: flex; flex-direction: column; gap: 2px; }
.option-card-label { font-weight: 600; font-size: var(--text-sm); }
.option-card-hint { font-size: var(--text-xs); color: var(--ink-muted); }
.option-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.segment-search { margin-bottom: var(--space-4); }
.segment-category { border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: var(--space-2); overflow: hidden; }
.segment-category > summary { padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--text-sm); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.segment-category > summary::-webkit-details-marker { display: none; }
.segment-category-items { padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.business-profile-summary { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.business-profile-summary-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.business-profile-summary-row:last-child { border-bottom: none; }
.business-profile-summary-label { color: var(--ink-muted); }
.capability-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; margin: 2px 4px 2px 0; }
.capability-tag.is-override { background: var(--accent-soft); color: var(--accent-strong); }
.business-profile-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.business-profile-banner span { color: var(--ink-muted); }