/* Extraído de ../../../../wireframes-crm.html — só os tokens/classes usados
   nas 3 telas da Fase 3 (Login, Leads, Configurações). As classes exclusivas
   de Clientes/Editar cliente (admin, Fase 4) e Obrigado/Suspenso (Fase 2,
   já vivem em templates/transcar) não entraram aqui. */
:root {
  --paper: #F3F4EE;
  --paper-raised: #FFFFFF;
  --surface-sunken: #EAEBE1;
  --ink: #14181B;
  --ink-soft: #4B535A;
  --ink-faint: #7A8179;
  --line: #D8DBD0;
  --line-strong: #C2C6B8;
  --accent: #AD5A1E;
  --accent-ink: #7A3E12;
  --accent-soft: #F1E4D4;
  --good: #1B6E62;
  --good-soft: #DCEDE8;
  --warn: #96650A;
  --warn-soft: #F3E7CE;
  --critical: #A83B2E;
  --critical-soft: #F5DFDA;
  --info: #3E5C76;
  --info-soft: #DEE6ED;
  /* Dois estágios novos do funil (Em negociação / Proposta enviada, ver
     leadService.js STATUS_VALIDOS) — sem token semântico existente que
     coubesse (info/warn/good/critical já são usados noutro sentido em
     outros componentes), então ganharam token próprio, mesmo padrão dos
     demais. Nomeados por posição (stage2/stage3), não pelo texto do
     status, pra não precisar renomear se o rótulo mudar depois. */
  --stage2: #6B4C93;
  --stage2-soft: #EDE7F5;
  --stage3: #9C3F6B;
  --stage3-soft: #F5E3EB;
  --shadow: 0 1px 2px rgba(20,24,27,0.05), 0 8px 24px rgba(20,24,27,0.07);
  /* Poppins em todo o app (17/08/2026) — era mono (--font-display, pros
     labels/botões/badges) + system sans (--font-ui, pro corpo/inputs);
     as duas viram Poppins agora, cada uma com a mesma pilha de fallback
     (sem fallback monospace: se o Google Fonts falhar, cai num sans-serif
     comum, não em texto de editor de código). Carregado via Google Fonts
     no <head> de cada view do painel (única fonte externa além da já
     usada no site público do tenant). */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fundos da barra lateral e da área de conteúdo — tokens à parte de
     --surface-sunken/--paper-raised (que continuam usados em botões, cards,
     inputs etc.) justamente pra poder trocar só essas duas áreas no modo
     claro sem arrastar o resto da UI junto. */
  --sidebar-bg: var(--surface-sunken);
  --content-bg: var(--paper-raised);

  /* ---- Redesign visual estilo HeroUI (30/08/2026, ver LOG.md) — escala de
     raio, sombra em camadas, transição e anel de foco. Cores acima não
     mudaram; isto só padroniza o estilo estrutural dos componentes, que
     hoje tinha 6 valores de raio e 1 sombra única espalhados sem critério. */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(20,24,27,0.04);
  --shadow-sm: 0 1px 2px rgba(20,24,27,0.05), 0 4px 12px rgba(20,24,27,0.06);
  --shadow-md: 0 2px 4px rgba(20,24,27,0.08), 0 12px 24px rgba(20,24,27,0.10);
  --shadow-lg: 0 4px 8px rgba(20,24,27,0.10), 0 20px 40px rgba(20,24,27,0.14);
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 200ms cubic-bezier(0.4,0,0.2,1);
  --focus-ring: 0 0 0 3px var(--accent-soft);
}

/* Modo claro explícito (alternado pelo botão no canto superior direito,
   persistido em localStorage por theme.js) — cores pedidas pelo usuário,
   só pras duas áreas estruturais (sidebar/conteúdo). O resto da paleta
   clara (botões, cards, inputs) continua vindo do :root base acima. */
:root[data-theme="light"] {
  --sidebar-bg: #EAF7F8;
  --content-bg: #FFF4CD;
}

/* Componentes específicos do modo claro — cor literal pedida pelo usuário
   só pra estes elementos, não pro token --accent-soft (usado por outros
   componentes que não devem mudar junto). #EAF7F8 combina com o novo
   --sidebar-bg (mesma família); #BCDFE3 marca "selecionado/ativo" — e
   (18/08/2026) também o botão "Ver detalhes" do card do Kanban, a pedido
   do usuário. Escuro não muda: .kanban-card-detail continua var(--paper)
   de sempre lá (só o claro foi pedido). */
:root[data-theme="light"] .nav-item.active { background: #BCDFE3; color: #000000; }
:root[data-theme="light"] .lead-row.selected td { background: #BCDFE3; }
:root[data-theme="light"] .kanban-col { background: #EAF7F8; }
/* :root[data-theme="light"] .kanban-col sozinho tem especificidade maior
   (0,3,0: :root + [data-theme] + .kanban-col) que .kanban-col[data-status]
   (0,2,0) lá embaixo — sem repetir o :root[data-theme="light"] aqui, o
   cyan genérico sempre ganhava dos verde/vermelho por status, mesmo vindo
   depois no arquivo. Achado testando (a cor não mudava no navegador). */
:root[data-theme="light"] .kanban-col[data-status="convertido"] { background: var(--good-soft); }
:root[data-theme="light"] .kanban-col[data-status="perdido"] { background: var(--critical-soft); }
:root[data-theme="light"] .stat-tile { background: #EAF7F8; }
:root[data-theme="light"] .kanban-card-detail { background: #BCDFE3; border-color: #BCDFE3; color: #000000; }
:root[data-theme="light"] .kanban-card-detail:hover { filter: brightness(0.95); }

/* Botão de destaque (.btn.accent) no claro — cor literal pedida pelo
   usuário, só no claro (escuro continua com --accent laranja de sempre).
   Unificado em 30/08/2026 na revisão do redesign HeroUI: até então este
   valor variava por área (verde #1B6E62 só no painel do cliente via
   .painel-cliente, laranja padrão --accent no admin sem override nenhum,
   #BCDFE3 só no login/home via .brand-stage) — o usuário revisou o mockup
   e pediu #BCDFE3 em todo botão de destaque, sem distinção de área. Não
   pega .btn.primary (verde do WhatsApp, é a cor da marca) nem .btn.critical/
   .btn.good (ação destrutiva/positiva, cor semântica própria). .brand-stage
   .btn.accent (login/home) manteve o mesmo valor por coincidência — pode
   ficar como está, é redundante mas não conflita. */
:root[data-theme="light"] .btn.accent { background: #BCDFE3; border-color: #BCDFE3; color: #000000; }

/* Sem @media (prefers-color-scheme) de propósito — o padrão do produto é
   sempre claro, independente do SO do usuário; escuro só entra se a pessoa
   escolher pelo botão (persistido por theme.js). Antes disso seguia o SO;
   trocado a pedido do usuário. */
:root[data-theme="dark"] {
  --paper: #14171B; --paper-raised: #1B1F24; --surface-sunken: #20242A;
  --ink: #ECEEE7; --ink-soft: #A7AEA2; --ink-faint: #767D74;
  --line: #2B3038; --line-strong: #3A414A;
  --accent: #E08A4A; --accent-ink: #F3C199; --accent-soft: #3A2A1C;
  --good: #4FB3A2; --good-soft: #16302B; --warn: #D6A548; --warn-soft: #392C13;
  --critical: #E07362; --critical-soft: #3A211D; --info: #8CA9C4; --info-soft: #1E2A36;
  --stage2: #B79FE0; --stage2-soft: #2E2540; --stage3: #E0A0C0; --stage3-soft: #3A2430;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 10px rgba(0,0,0,0.5), 0 24px 56px rgba(0,0,0,0.55);
  /* Só pra controles nativos do navegador (o ícone do <input type="date">
     do filtro do Dashboard) — o app não segue prefers-color-scheme (ver
     nota abaixo), então isto é o que faz o ícone virar claro no escuro. */
  color-scheme: dark;
}
/* Pedido do usuário (30/08/2026, revisão do mockup): todo botão no escuro
   fica #E08A4A (mesmo valor de --accent escuro), inclusive
   .kanban-card-detail ("Ver detalhes" do kanban, que não é .btn e usava
   paper/ink). Especificidade (:root+[data-theme]+.classe = 3 seletores de
   classe) já vence .btn.primary/.critical/.good (2 cada) sem precisar
   reordenar o arquivo — o verde do WhatsApp e o soft-red/soft-green de ação
   também viram essa cor no escuro, perda de distinção semântica sinalizada
   e confirmada pelo usuário. Texto com --paper-raised (quase preto no
   escuro) por cima do laranja, mesmo padrão que .btn.accent já usava. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .kanban-card-detail {
  background: #E08A4A; border-color: #E08A4A; color: var(--paper-raised);
}
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .kanban-card-detail:hover { filter: brightness(1.08); }

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
code { font-family: var(--font-display); }
a { color: inherit; }

/* ---- App shell ---- */
.app { display: flex; min-height: 100vh; }
/* height:100vh + sticky (18/08/2026, pedido do usuário): sem isso a sidebar
   inteira esticava junto com .app (que só tem min-height:100vh, cresce com
   o conteúdo de .main) — numa lista de leads longa, Sair/logo do cliente
   (empurrados pro rodapé da sidebar pelo .sidebar-spacer, ver abaixo)
   ficavam lá embaixo da página inteira, fora da tela até rolar tudo.
   sticky+top:0 prende a 100vh da viewport sem tirar do fluxo do flex (ao
   contrário de position:fixed, que exigiria compensar a largura em .main).
   Só no desktop — a media query de mobile reseta pra position:static de
   propósito, porque lá a sidebar é uma barra horizontal curta no topo, não
   uma coluna alta ao lado do conteúdo. */
.sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--sidebar-bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 1.1rem 0.9rem;
  overflow-x: hidden; overflow-y: auto; transition: width 0.15s ease;
  position: sticky; top: 0; height: 100vh;
}
.sidebar.collapsed { width: 60px; padding-left: 0.5rem; padding-right: 0.5rem; }

.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.1rem 1.3rem; }
.sidebar.collapsed .sidebar-top { justify-content: center; }
.sidebar-brand { display: flex; align-items: center; }
.sidebar-brand-logo { display: block; height: 30px; width: auto; }
.sidebar.collapsed .sidebar-top { flex-direction: column; gap: 0.5rem; }
.sidebar.collapsed .sidebar-brand-logo { height: 24px; }

.sidebar-toggle {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink-soft); cursor: pointer;
}
.sidebar-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.sidebar-toggle svg { width: 13px; height: 13px; }
.sidebar-toggle .icon-expand { display: none; }
.sidebar.collapsed .sidebar-toggle .icon-collapse { display: none; }
.sidebar.collapsed .sidebar-toggle .icon-expand { display: flex; }

/* Só existe em telas pequenas — ver regras dentro de @media abaixo. */
.mobile-nav-toggle { display: none; }

/* Envolve abas/sair/usuário (tudo exceto a logo+toggles de .sidebar-top).
   No desktop é só um wrapper transparente pro layout de sempre continuar
   idêntico (flex:1 deixa o .sidebar-spacer de dentro empurrar sair/usuário
   pro rodapé, como já era); no mobile vira o painel que abre/fecha. */
.sidebar-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 0.81rem; letter-spacing: 0.02em; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 0.6rem 0.5rem; border-radius: var(--radius-md); margin-bottom: 0.15rem;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-item:not(.active):hover { background: var(--surface-sunken); color: var(--ink); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-item.active { background: var(--paper-raised); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .nav-label { display: none; }

.sidebar-spacer { flex: 1; }
.sidebar-logout { color: var(--ink-faint); }
.sidebar-logout:hover { color: var(--critical); }

.sidebar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.5rem; border-top: 1px solid var(--line); margin-top: 0.6rem; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-user-info { display: none; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }
/* Logo do cliente no lugar das iniciais (18/08/2026) — a logo real quase
   nunca é quadrada nem tem fundo transparente redondo, então troca o
   fundo/cor de iniciais por branco (contorno neutro pra logo colorida
   "flutuar" em cima) e usa object-fit:contain (nunca cover, que cortaria
   uma logo retangular) com uma folga interna pra não encostar na borda. */
.avatar.avatar-logo { background: var(--paper-raised); border: 1px solid var(--line); padding: 3px; }
.avatar.avatar-logo img { width: 100%; height: 100%; object-fit: contain; }
.user-name { font-size: 0.82rem; font-weight: 600; }
.user-tenant { font-size: 0.72rem; color: var(--ink-faint); }

.main { flex: 1; min-width: 0; padding: 1.5rem 1.75rem; background: var(--content-bg); overflow-x: auto; }
/* padding-right reserva espaço pro .theme-toggle fixo no canto superior
   direito (achado testando Editar cliente: o botão de suspender/ativar
   novo colidia visualmente com ele). */
.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; padding-right: 3.5rem; }
.topbar h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.topbar .sub { font-size: 0.82rem; color: var(--ink-faint); }

/* ---- Stat tiles ---- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 1.5rem; }
.stat-tile { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.9rem 1rem; background: var(--paper); }
.stat-label { font-family: var(--font-display); font-size: 0.81rem; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 0.4rem; }
.stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.good { color: var(--good); }

/* ---- Dashboard ---- */
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 1.5rem; }

/* Filtro de data dos gráficos (18/08/2026) — <input type="date"> nativo,
   mesma linguagem visual do .search-input (borda/fundo/raio), não um
   componente de calendário próprio; escopo é só os 3 gráficos abaixo, os
   8 cards acima têm significado fixo (hoje/mês/total) e não mudam com o
   filtro — ver leadService.getDashboardSeries. */
.dashboard-filter { display: flex; align-items: end; gap: 0.9rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.dashboard-filter label { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-faint); }
.dashboard-filter input[type="date"] { font-family: var(--font-ui); font-size: 0.85rem; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }

.dashboard-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-bottom: 1.5rem; }
.chart-card { display: flex; flex-direction: column; gap: 0.7rem; }
.chart-card h3 { font-family: var(--font-display); font-size: 0.81rem; letter-spacing: 0.05em; margin: 0; color: var(--ink-soft); }
.chart-empty { font-size: 0.8rem; color: var(--ink-faint); padding: 1.5rem 0; text-align: center; }

/* ---- Gráficos SVG (dashboard.js) ---- */
.chart-svg { width: 100%; height: auto; overflow: visible; }
.chart-svg .grid-line { stroke: var(--line); stroke-width: 1; }
.chart-svg .axis-label { fill: var(--ink-faint); font-size: 10px; font-family: var(--font-ui); }
/* Hit target maior que o desenho (bar/dot visível) pra hover não exigir
   mirar num alvo de 2px — ver dataviz#interaction. Bar: a própria largura
   da coluna. Dot: círculo invisível maior por cima do marcador real. */
.chart-svg .bar-hit, .chart-svg .dot-hit { fill: transparent; cursor: pointer; }
.chart-svg .bar-mark { transition: opacity 0.1s; }
.chart-svg .bar-group:hover .bar-mark { opacity: 0.75; }
.chart-svg .dot-mark {
  stroke: var(--paper); stroke-width: 2;
  transition: transform 0.1s; transform-box: fill-box; transform-origin: center;
}
.chart-svg .dot-group:hover .dot-mark { transform: scale(1.4); }
.chart-tooltip {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--ink); color: var(--paper); border-radius: 8px;
  padding: 0.45rem 0.65rem; font-size: 0.76rem; line-height: 1.4;
  box-shadow: var(--shadow-sm); opacity: 0; transition: opacity 0.1s;
  white-space: nowrap;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tooltip .tt-label { color: var(--paper); opacity: 0.65; }

/* ---- Filter bar ---- */
.filter-bar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
/* Botão de colapso do filtro da Lista (31/08/2026) — só existe visualmente
   abaixo de 860px (ver @media). Em desktop fica display:none e
   .filter-bar-items usa display:contents, então os pills/form continuam
   filhos diretos do flex .filter-bar exatamente como antes — nenhuma
   mudança de layout em telas largas. */
.filter-bar-toggle { display: none; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.02em; font-weight: 600; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--paper); color: var(--ink-soft); cursor: pointer; }
.filter-bar-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.filter-bar-toggle-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.filter-bar-items { display: contents; }
.pill { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.35rem 0.75rem; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; transition: background-color var(--transition-fast), color var(--transition-fast); }
.pill.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* min-width 300px pedido pelo usuário (18/08/2026) — era 200px. */
.search-input { font-family: var(--font-ui); font-size: 0.85rem; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); min-width: 300px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
/* Formulário de busca+data da Lista (18/08/2026) — empurrado pro fim da
   .filter-bar (o margin-left:auto morava no próprio .search-input antes de
   ele ganhar vizinhos De/Até; agora é o form inteiro que se empurra, os
   campos de dentro ficam em fila normal). */
.filter-bar-form { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.filter-date-label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-faint); }
.filter-date-label input[type="date"] { font-family: var(--font-ui); font-size: 0.85rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.dashboard-filter input[type="date"]:focus-visible,
.search-input:focus-visible,
.filter-date-label input[type="date"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---- View toggle ---- */
.view-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.03em; font-weight: 700; padding: 0.5rem 1rem; border: none; background: var(--paper); color: var(--ink-soft); cursor: pointer; }
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button.active { background: var(--ink); color: var(--paper); }

/* ---- Kanban ---- */
/* 6 colunas agora (Novo, Primeiro contato, Em negociação, Proposta
   enviada, Convertido, Perdido) — minmax garante que nenhuma coluna fique
   estreita demais pro conteúdo do card; overflow-x deixa rolar de lado em
   telas menores que ~6×220px em vez de espremer tudo (mobile continua com
   a regra própria dentro do @media, 1 coluna só). */
.kanban-board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: 0.3rem; }
.kanban-col { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.75rem; min-height: 380px; transition: outline-color 0.15s; outline: 2px dashed transparent; outline-offset: -2px; }
/* Fundo por status (18/08/2026) — reaproveita os tokens semânticos que já
   existem pro mesmo par good/critical (status-pill.convertido, toggle-chip,
   .btn.good/.btn.critical etc.), não uma cor nova: verde/vermelho claro no
   claro, a variante escura calibrada de cada um no escuro (não um hex fixo,
   que ficaria sem contraste no escuro). Isto aqui só faz efeito no ESCURO —
   no claro quem manda é o par :root[data-theme="light"] .kanban-col[data-status=...]
   lá em cima (maior especificidade que o cyan genérico do claro, ver
   comentário lá). Precisa vir ANTES de .dragover (mesma especificidade — 1
   classe + 1 atributo — quem vem depois no arquivo vence; dragover tem que
   continuar ganhando durante o arraste). */
.kanban-col[data-status="convertido"] { background: var(--good-soft); }
.kanban-col[data-status="perdido"] { background: var(--critical-soft); }
.kanban-col.dragover { outline-color: var(--accent); background: var(--accent-soft); }
.kanban-col-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 0.81rem; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 0.7rem; padding: 0 0.15rem; }
.kanban-col-head .count { background: var(--paper-raised); border-radius: 999px; padding: 0.05rem 0.5rem; font-weight: 700; }
/* Redesenho do card (17/08/2026, ajustado no mesmo dia depois do feedback
   do usuário — 1ª versão deixava "Ver detalhes" fraco demais e apertava o
   nome do vendedor na mesma linha do botão, cortando nomes maiores).
   Nome é a única linha em destaque (cor cheia, negrito); detalhes do
   veículo ficam secundários (cor apagada); vendedor vira uma etiqueta
   (pill) na própria linha, largura cheia disponível — não corta mais;
   "Ver detalhes" é um botão de verdade, largura cheia, abaixo de tudo. */
.kanban-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.85rem 0.9rem; margin-bottom: 0.6rem; cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast); }
.kanban-card:hover { box-shadow: var(--shadow-md); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.4; }
/* Ícones (17/08/2026) — um por campo (nome/telefone/recebido/vendedor),
   mesmo estilo de traço das outras telas (viewBox 20, stroke 1.6). Cor
   sempre currentColor: acompanha a cor do texto de cada linha sem regra
   própria por ícone. */
.kanban-card .name, .kanban-card .meta, .vendedor-tag { display: flex; align-items: flex-start; gap: 0.4rem; }
.kanban-card .name svg, .kanban-card .meta svg, .vendedor-tag svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 0.15em; }
.kanban-card .name svg { color: var(--ink-faint); }

.kanban-card .name { font-weight: 600; font-size: 0.81rem; color: var(--ink); margin-bottom: 0.3rem; }
/* Telefone, detalhes do veículo e data/hora de recebimento — 3 linhas
   possíveis de "info secundária", por isso o espaçamento entre elas em
   vez de num único .meta (17/08/2026: telefone e data/hora adicionados). */
.kanban-card .meta { font-size: 0.75rem; font-weight: 400; color: var(--ink-faint); margin-bottom: 0.2rem; }
.kanban-card .meta:last-of-type { margin-bottom: 0; }
/* Data/hora é a info menos importante das três — menor e mais apagada
   que telefone/veículo, não o mesmo peso. */
.kanban-card .meta.time { font-size: 0.74rem; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.kanban-card .meta.time svg { width: 12px; height: 12px; }

.kanban-card-footer { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }

/* Sem vendedor: texto e ícone apagados. Com vendedor (.assigned): cor de
   destaque (--accent-ink) — o ícone já marca "isto é o campo vendedor",
   sem precisar do "●" nem de chip/pill de fundo (removidos a pedido do
   usuário em rodadas anteriores). Quebra linha em vez de cortar com
   reticências — melhor mostrar o nome inteiro do vendedor (2 linhas, se
   precisar) do que esconder parte dele. */
.vendedor-tag { font-size: 0.76rem; font-weight: 600; color: var(--ink-faint); line-height: 1.25; }
.vendedor-tag.assigned { color: var(--accent-ink); }

/* Botão de verdade agora — borda mais forte, texto na cor cheia (não
   --ink-soft) e inverte pra preenchido no hover, mesma linguagem de
   ênfase que .view-toggle button.active já usa noutro lugar do painel. */
.kanban-card-detail { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.03em; font-weight: 700; padding: 0.5rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); cursor: pointer; width: 100%; text-align: center; transition: background-color var(--transition-fast), color var(--transition-fast); }
.kanban-card-detail::after { content: " →"; }
.kanban-card-detail:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- Modal de detalhe da lead (aberto a partir do kanban) ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1.5rem; overflow-y: auto; z-index: 50; }
.modal-overlay[hidden] { display: none; }
.modal-box { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); max-width: 520px; width: 100%; box-shadow: var(--shadow-lg); }
.modal-body { padding: 1.5rem 1.6rem; }
.modal-close { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--ink); background: var(--surface-sunken); }

/* ---- Split view: list + detail ---- */
.split-view { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; align-items: start; }
/* .table-wrap engloba .lead-table/.admin-table — radius aqui, não no
   <table> (border-collapse não aceita raio nas bordas internas). overflow-x
   sozinho já basta pra recortar os cantos nos dois eixos (overflow-y
   visível vira auto quando overflow-x não é visible, CSSOM padrão), sem
   perder a rolagem horizontal em telas médias. */
.table-wrap { border-radius: var(--radius-lg); overflow-x: auto; }
.lead-table { width: 100%; border-collapse: collapse; }
.lead-table th { text-align: left; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-faint); background: var(--surface-sunken); border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem; }
.lead-table td { padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; vertical-align: middle; transition: background-color var(--transition-fast); }
.lead-row { cursor: pointer; }
.lead-row:hover td { background: var(--surface-sunken); }
.lead-row.selected td { background: var(--accent-soft); }
.lead-name { font-weight: 600; }
.lead-meta { color: var(--ink-faint); font-size: 0.78rem; }
/* tenant_key — identificador exato usado no data-tenant do shell (ver
   shells/README.md); monospace de propósito, é pra copiar sem erro de
   digitação, não pra ler como prosa. */
.tenant-key { font-family: monospace; font-size: 0.75rem; background: var(--surface-sunken); padding: 0.1rem 0.4rem; border-radius: 4px; }
.status-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.03em; font-weight: 600; padding: 0.22rem 0.6rem; border-radius: var(--radius-full); }
.status-pill.novo { background: var(--info-soft); color: var(--info); }
.status-pill.contato { background: var(--warn-soft); color: var(--warn); }
.status-pill.negociacao { background: var(--stage2-soft); color: var(--stage2); }
.status-pill.proposta { background: var(--stage3-soft); color: var(--stage3); }
.status-pill.convertido { background: var(--good-soft); color: var(--good); }
.status-pill.perdido { background: var(--surface-sunken); color: var(--ink-faint); }
.time-cell { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 0.78rem; white-space: nowrap; }

.detail-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; background: var(--paper); position: sticky; top: 1.5rem; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
/* No modal (diferente do painel de detalhe da lista), .detail-head fica sob
   o .modal-close absoluto (top/right do .modal-box) — reserva espaço à
   direita pra o status-pill não ficar embaixo do X (31/08/2026). */
.modal-body .detail-head { padding-right: 2.2rem; }
.detail-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; }
.btn { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.03em; font-weight: 700; padding: 0.55rem 0.9rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.btn:hover { border-color: var(--line-strong); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.btn.primary { background: #25d366; color: #06371f; border-color: #25d366; }
.btn.accent { background: var(--accent); color: var(--paper-raised); border-color: var(--accent); }
.detail-section { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.detail-section h4 { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 0.6rem; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; font-size: 0.85rem; }
.kv-grid dt { color: var(--ink-faint); font-size: 0.74rem; margin-bottom: 0.1rem; }
.kv-grid dd { margin: 0; font-weight: 500; }
/* ---- Histórico de mudança de status (substitui o antigo "Funil" de 3
   passos fixos — uma lead pode mudar de status mais de duas vezes, inclusive
   "voltar", e o timeline fixo não tinha onde mostrar isso). Uma linha por
   evento de lead_events, mais antigo primeiro (mesma ordem da query). ---- */
.history-list { display: flex; flex-direction: column; gap: 0.55rem; }
.history-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.82rem; }
.history-time { color: var(--ink-faint); font-size: 0.74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-change { display: inline-flex; align-items: center; gap: 0.4rem; }
.history-arrow { color: var(--ink-faint); }
.status-select { font-family: var(--font-ui); font-size: 0.82rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.obs-textarea { width: 100%; min-height: 76px; resize: vertical; font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.45; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.status-select:focus-visible, .obs-textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---- Forms (Configurações) ---- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 880px; }
.field-group { margin-bottom: 1.1rem; }
.field-group label { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink-soft); }
.field-group input[type="text"], .field-group input[type="tel"] { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 0.88rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.field-group input:disabled { background: var(--surface-sunken); color: var(--ink-soft); cursor: not-allowed; }
.field-group input[type="text"]:focus-visible, .field-group input[type="tel"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Aviso curto embaixo de um campo somente-leitura explicando quem pode
   mudar aquele dado (ex. WhatsApp de recebimento, em Configurações) —
   --warn/--warn-soft porque é um "atenção", não um erro nem confirmação. */
.field-alert { margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 0.78rem; }
.color-row { display: flex; align-items: center; gap: 0.6rem; }
.swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.logo-drop { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 1.4rem; text-align: center; color: var(--ink-faint); font-size: 0.82rem; background: var(--surface-sunken); }
.logo-drop img { max-height: 40px; }
.domain-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 0.8rem; }
.status-readonly { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; background: var(--good-soft); border-radius: 10px; }
.status-readonly.suspenso { background: var(--critical-soft); }
.status-readonly .status-pill { background: var(--good); color: var(--paper-raised); }
.status-readonly.suspenso .status-pill { background: var(--critical); }
.status-readonly small { display: block; color: var(--ink-faint); margin-top: 0.15rem; }

/* Seção com moldura de cartão em volta de uma tabela (ou qualquer bloco),
   sem largura máxima — diferente de .admin-form (pensado pra listas
   estreitas/formulários), essa preenche a largura disponível de .main. */
.card-section { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; background: var(--paper); }

/* ---- Clientes (admin) e Vendedores (cliente) — tabela normal no desktop;
   ver regra responsiva dentro de @media (max-width: 860px) que transforma
   cada linha num cartão empilhado nessa largura, a pedido do usuário
   (mantém horizontal no desktop, só vira vertical no mobile). ---- */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-faint); background: var(--surface-sunken); border-bottom: 1px solid var(--line); padding: 0.6rem; }
.admin-table td { padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; transition: background-color var(--transition-fast); }
.admin-table tbody tr:hover td { background: var(--surface-sunken); }
.toggle-chip { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.03em; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--radius-full); cursor: pointer; border: 1px solid transparent; }
.toggle-chip.on { background: var(--good-soft); color: var(--good); }
.toggle-chip.off { background: var(--critical-soft); color: var(--critical); }
/* Badge de status só informativo (Editar cliente) — a ação de suspender/
   ativar vive num botão separado ao lado, não é mais o próprio chip que se
   clica. */
.toggle-chip.static { cursor: default; }
.btn.critical { background: var(--critical-soft); color: var(--critical); border-color: var(--critical-soft); }
.btn.good { background: var(--good-soft); color: var(--good); border-color: var(--good-soft); }
.admin-form { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; max-width: 640px; margin-top: 1.5rem; background: var(--paper); }
/* Editar cliente: o formulário principal (nome/logo/cores/rastreamento)
   precisa de mais largura que o padrão de .admin-form (pensado pra listas
   estreitas, como domínios autorizados) — o .settings-grid de dentro é de
   2 colunas com até 880px. */
.admin-form.wide { max-width: 920px; }
.admin-form.wide:first-of-type { margin-top: 0; }
.admin-form h3 { font-family: var(--font-display); font-size: 0.85rem; margin: 0 0 1rem; }
.admin-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.admin-form-row label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--ink-soft); }
.admin-form-row input, .admin-form-row select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-family: var(--font-ui); font-size: 0.85rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.admin-form-row input:focus-visible, .admin-form-row select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---- Login ---- */
.login-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); }
.login-card { width: 100%; max-width: 340px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.9rem; box-shadow: var(--shadow-sm); }
.login-brand { margin-bottom: 0.3rem; }
.login-brand img { display: block; height: 48px; width: auto; }
.login-card p.lede { color: var(--ink-faint); font-size: 0.84rem; margin: 0 0 1.4rem; }
.login-card label { display: block; font-size: 0.78rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--ink-soft); }
.login-card input { width: 100%; padding: 0.65rem 0.8rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-family: var(--font-ui); font-size: 0.88rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.login-card input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.login-card .btn { width: 100%; justify-content: center; padding: 0.7rem; margin-top: 0.3rem; }
.login-error { background: var(--critical-soft); color: var(--critical); font-size: 0.82rem; padding: 0.6rem 0.8rem; border-radius: 8px; margin-bottom: 1rem; display: none; }
.login-error.visible { display: block; }

.note { max-width: 720px; margin: 1.25rem 0 0; padding: 0.9rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: 0.82rem; color: var(--ink-soft); background: var(--paper-raised); }

/* ---- Alternância de tema (claro/escuro) ---- */
.theme-toggle {
  position: fixed; top: 1.1rem; right: 1.5rem; z-index: 55;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-full);
  color: var(--ink-soft); cursor: pointer; box-shadow: var(--shadow-sm);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: flex; }

/* ---- Homepage (/) e Login (/entrar) ---- reutilizam .login-stage/.login-card/.btn,
   com a identidade visual própria pedida pelo usuário — escopado por
   .brand-stage pra não mudar os botões "accent" do resto do painel
   (Criar cliente, Cadastrar vendedor, Salvar alterações etc.), que usam a
   mesma classe .btn.accent mas não devem herdar essas cores. */
.brand-stage { background: #FFF4CD; }
.brand-stage .login-brand { justify-content: center; display: flex; }
.brand-stage .login-brand img { margin: 0 auto; }
.brand-stage .lede { text-align: center; }
.brand-stage .btn.accent { background: #BCDFE3; color: #000000; border-color: #BCDFE3; }
.empty-state { color: var(--ink-faint); font-size: 0.88rem; padding: 2rem; text-align: center; }

/* ---- Toast (30/08/2026) — escopo mínimo, só os 2 alert() de falha em
   admin.js (suspender/ativar tenant, mudar domínio); ver toast.js. Não usado
   em mais nenhum lugar do painel de propósito (ver LOG.md). ---- */
.toast-stack { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.toast { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; box-shadow: var(--shadow-md); max-width: 320px; opacity: 0; transform: translateY(6px); animation: unacrm-toast-in var(--transition-base) forwards; }
.toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.toast.error { background: var(--critical-soft); color: var(--critical); }
.toast.success { background: var(--good-soft); color: var(--good); }
@keyframes unacrm-toast-in { to { opacity: 1; transform: translateY(0); } }
.toast.leaving { animation: unacrm-toast-out var(--transition-base) forwards; }
@keyframes unacrm-toast-out { to { opacity: 0; transform: translateY(6px); } }
/* Motion novo introduzido no redesign (toast, hover/focus/press) — respeita
   quem pediu menos animação no SO; o app não tinha nenhum @media de motion
   antes disso. */
@media (prefers-reduced-motion: reduce) {
  .toast, .kanban-card, .kanban-card-detail, .btn, .nav-item, .pill,
  .status-select, .obs-textarea, .search-input, .field-group input,
  .admin-form-row input, .admin-form-row select, .login-card input,
  .dashboard-filter input, .filter-date-label input, .sidebar {
    transition: none !important; animation-duration: 0.001ms !important;
  }
}

@media (max-width: 860px) {
  .app { flex-direction: column; }
  /* Em telas pequenas a barra vira uma lista vertical retrátil no topo da
     página — só a linha com logo + botão de abrir/fechar (.mobile-nav-toggle)
     fica sempre visível; o resto (abas, Sair, usuário — tudo dentro de
     .sidebar-nav) só aparece com .sidebar.mobile-open, e começa FECHADO
     por padrão (sidebar.js só abre se o usuário já tiver aberto antes,
     nunca por padrão). Troca a rolagem lateral e a lista sempre-aberta
     das duas rodadas anteriores — ambas ainda incomodavam o usuário.
     Recolher de desktop (.collapsed) não existe aqui (sidebar-toggle
     escondido); se essa classe tiver persistido de uma sessão desktop
     anterior, é neutralizada — largura cheia, sem afetar o mobile-open. */
  /* height:100vh/position:sticky são só pro desktop (regra base acima,
     18/08/2026) — aqui a sidebar é uma barra horizontal curta, não uma
     coluna alta; sem resetar os dois, ela viraria uma coluna de 100vh de
     altura ocupando a tela inteira mesmo com width:auto. */
  .sidebar, .sidebar.collapsed { width: auto; padding: 0.6rem; position: static; height: auto; }
  .sidebar-toggle { display: none; }
  .sidebar.collapsed .sidebar-top { flex-direction: row; }
  .mobile-nav-toggle {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; padding: 0;
    background: none; border: 1px solid var(--line); border-radius: 6px;
    color: var(--ink-soft); cursor: pointer;
  }
  .mobile-nav-toggle svg { width: 15px; height: 15px; }
  .mobile-nav-toggle .icon-close { display: none; }
  .sidebar.mobile-open .mobile-nav-toggle .icon-open { display: none; }
  .sidebar.mobile-open .mobile-nav-toggle .icon-close { display: flex; }
  .sidebar-nav { display: none; padding-top: 0.6rem; }
  .sidebar.mobile-open .sidebar-nav { display: flex; }
  .split-view { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .stat-row, .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-charts { grid-template-columns: 1fr; }
  .kanban-board { grid-template-columns: 1fr; }
  .main { padding: 1.25rem 1rem; }

  /* Tabela de Clientes (admin) e Vendedores (cliente) — linhas viravam
     colunas espremidas com rolagem lateral nessa largura (achado direto
     pelo usuário: "os dados continuam quebrado"). Cada <tr> vira um cartão
     empilhado verticalmente; cada <td> mostra o rótulo da coluna (via
     data-label, adicionado no EJS) acima do valor, exceto a 1ª célula
     (nome — já é autoexplicativa, vira o "título" do cartão) e a última
     (botão de ação, sem rótulo). */
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.85rem 1rem; margin-bottom: 0.8rem; background: var(--paper); }
  .admin-table td { border-bottom: none; padding: 0.3rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; text-align: right; }
  .admin-table td::before { content: attr(data-label); font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.05em; color: var(--ink-faint); text-align: left; }
  .admin-table td:first-child { display: block; text-align: left; padding-bottom: 0.6rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
  .admin-table td:first-child::before { content: none; }
  .admin-table td:last-child { justify-content: flex-end; padding-top: 0.5rem; }
  .admin-table td:last-child::before { content: none; }

  /* O .theme-toggle fixo no canto superior direito (pensado pro layout de
     desktop, sidebar à esquerda) passa a sobrepor a barra de navegação
     horizontal aqui embaixo de 860px — link "Sair" e avatar do usuário
     ficavam cobertos por ele (achado testando o app inteiro em mobile).
     Reposicionado pro canto inferior direito, flutuando sobre o conteúdo
     em vez da navegação; não colide com mais nada porque nenhuma tela usa
     esse canto. */
  .theme-toggle { top: auto; bottom: 1rem; right: 1rem; }
  /* Reserva de espaço pro toggle não se aplica mais — ele não está perto
     do topo nesta largura. */
  .topbar { padding-right: 0; }

  /* Filtro da Lista vira retrátil (31/08/2026) — nesta largura os pills de
     status + o form de busca/data não cabem numa linha só; com
     flex-wrap:wrap eles quebravam em várias linhas desalinhadas e o
     .search-input (min-width:300px fixo) ainda estourava a largura do
     container, sobrepondo o texto sobre os campos vizinhos (achado direto
     pelo usuário). Em vez de só ajustar o wrap, o filtro inteiro fica
     escondido atrás do botão "Filtros" por padrão — abre com
     .filter-bar-open (classe ligada por leads.js, ou já vem aberta do
     servidor se algum filtro estiver ativo, ver leads.ejs). */
  .filter-bar-toggle { display: inline-flex; }
  .filter-bar-items { display: none; flex-direction: column; align-items: stretch; gap: 0.6rem; width: 100%; margin-top: 0.75rem; }
  .filter-bar.filter-bar-open .filter-bar-items { display: flex; }
  .filter-bar-items .pill { text-align: center; }
  .filter-bar-form { margin-left: 0; flex-direction: column; align-items: stretch; width: 100%; }
  .filter-date-label { justify-content: space-between; }
  .search-input { min-width: 0; width: 100%; }
}