/* ============================================================
 *  CRM Automotive — Sistema de design
 *  ------------------------------------------------------------
 *  Redesign 100% (20/08/2026). O visual anterior era o do MY LED
 *  (produto de painéis de LED do mesmo dev) e o cliente já conhece
 *  aquele sistema — nada aqui pode lembrar ele.
 *
 *  Direção: linguagem Apple (tipografia como protagonista, muito
 *  espaço em branco, superfícies em camadas com material fosco,
 *  sombras difusas, cantos generosos, movimento com curva física)
 *  aplicada à identidade da Auttomotive — Eletronic Performance:
 *  preto, cinza e o dourado #F5B700 usado como acento cirúrgico,
 *  nunca como cor de preenchimento geral.
 *
 *  Regra de cor deste sistema: o dourado só aparece em (1) ação
 *  primária, (2) ícone do item de menu ativo, (3) anel de foco,
 *  (4) números/estados que precisam ser lidos primeiro. Todo o
 *  resto é neutro. Se o dourado começar a aparecer em mais de um
 *  lugar por tela, algo saiu do lugar.
 *
 *  Contém: tokens (claro/escuro), reset, sidebar, topbar, main,
 *  componentes (botão, card, badge, segmented, tabela, kanban,
 *  estado vazio), modal (openForm/mlPanel), toast e o blur de
 *  valores em R$ (a tela da recepção fica virada pro cliente).
 *
 *  Compatibilidade: os módulos em assets/*.js consomem os tokens
 *  --bg --surface --surface-elevated --surface-hover --border
 *  --border-strong --accent --accent-soft --on-accent
 *  --text-primary --text-secondary --text-muted --positive
 *  --positive-soft --negative --warning --info. Todos continuam
 *  existindo com esses nomes — não renomear sem varrer os .js.
 * ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── superfícies (escuro é o padrão: a marca é preta) ──
     Elevação por luminosidade, à moda iOS: o fundo é preto de
     verdade e cada camada acima clareia um degrau. */
  --bg:               #000000;
  --bg-sunken:        #08080A;
  --surface:          #111113;
  --surface-elevated: #1A1A1D;
  --surface-hover:    #232327;
  --surface-glass:    rgba(16,16,18,.74);
  --border:           rgba(255,255,255,.09);
  --border-strong:    rgba(255,255,255,.16);
  --hairline:         rgba(255,255,255,.06);

  /* ── texto (cinzas da Apple) ── */
  --text-primary:   #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-muted:     #6E6E73;

  /* ── marca ──
     --accent é cor de PREENCHIMENTO (fica igual nos dois temas,
     é o dourado da Auttomotive). --accent-text é a versão pra
     usar como cor de TEXTO/ícone, que escurece no tema claro
     porque #F5B700 sobre branco não tem contraste legível. */
  --accent:       #F5B700;
  --accent-hi:    #FFC933;
  --accent-dark:  #A87A00;
  --accent-text:  #F5B700;
  --accent-soft:  rgba(245,183,0,.13);
  --accent-line:  rgba(245,183,0,.32);
  --on-accent:    #1A1400;

  /* ── estados ── */
  --positive:      #30D158;
  --positive-soft: rgba(48,209,88,.14);
  --negative:      #FF453A;
  --negative-soft: rgba(255,69,58,.14);
  --warning:       #FFD60A;
  --warning-soft:  rgba(255,214,10,.14);
  --info:          #0A84FF;
  --info-soft:     rgba(10,132,255,.14);

  /* ── raios ── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ── sombras: largas, difusas, nunca duras ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.24);
  --shadow-2: 0 2px 6px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.34);
  --shadow-3: 0 8px 24px rgba(0,0,0,.40), 0 40px 80px rgba(0,0,0,.48);

  /* ── movimento ── */
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);   /* curva de apresentação da Apple */
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 380ms;

  /* ── tipografia ──
     Stack de sistema: no Mac vira SF Pro de verdade, no Windows
     Segoe UI. Sem webfont — o projeto é servido por nginx sem
     build e não deve depender de CDN externo. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── layout ── */
  --sidebar-w:  252px;
  --topbar-h:   56px;
  --content-max: 1480px;
}

[data-theme="light"] {
  --bg:               #F5F5F7;
  --bg-sunken:        #EDEDF0;
  --surface:          #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-hover:    #F0F0F3;
  --surface-glass:    rgba(250,250,252,.76);
  --border:           rgba(0,0,0,.09);
  --border-strong:    rgba(0,0,0,.16);
  --hairline:         rgba(0,0,0,.07);

  --text-primary:   #1D1D1F;
  --text-secondary: #6E6E73;
  --text-muted:     #8E8E93;

  --accent-text:  #8A6200;      /* dourado escurecido: legível sobre branco */
  --accent-soft:  rgba(245,183,0,.18);
  --accent-line:  rgba(176,126,0,.40);

  --positive:      #1D9E42;
  --positive-soft: rgba(29,158,66,.12);
  --negative:      #D70015;
  --negative-soft: rgba(215,0,21,.10);
  --warning:       #8A6200;
  --warning-soft:  rgba(245,183,0,.18);
  --info:          #0060DF;
  --info-soft:     rgba(0,96,223,.10);

  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.08);
  --shadow-3: 0 8px 20px rgba(0,0,0,.10), 0 36px 72px rgba(0,0,0,.14);
}

/* ═══════════════════════════════════════════════════════════
   2. RESET E BASE
   ═══════════════════════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box }

html, body {
  height:100%;
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:15px;
  line-height:1.47;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body { overflow-x:hidden }

/* Brilho ambiente fixo atrás de tudo. Existe por um motivo
   funcional além do estético: a sidebar e a topbar são materiais
   translúcidos e precisam de alguma variação por baixo pra que o
   desfoque tenha o que amostrar — sobre um preto chapado, vidro
   não se lê como vidro. */
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(760px 520px at 8% -8%,  rgba(245,183,0,.055), transparent 62%),
    radial-gradient(680px 620px at 96% 104%, rgba(120,120,128,.07), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(760px 520px at 8% -8%,  rgba(245,183,0,.10), transparent 62%),
    radial-gradient(680px 620px at 96% 104%, rgba(120,120,128,.10), transparent 60%);
}

h1,h2,h3,h4 { font-weight:600; letter-spacing:-.022em; line-height:1.15 }
button, input, select, textarea { font-family:inherit }

/* Foco visível — piso de acessibilidade. Só no teclado, pra não
   desenhar anel em clique de mouse. */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
::selection { background:var(--accent-soft); color:var(--text-primary) }

/* Barras de rolagem discretas, no espírito das overlay scrollbars
   do macOS: aparecem, não ocupam espaço visual. */
::-webkit-scrollbar { width:10px; height:10px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb {
  background:var(--border-strong);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); background-clip:content-box }
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent }

/* Números sempre em largura fixa: coluna de valor não pode dançar
   quando o dígito muda (relógio, R$, contadores). */
.tabular, #clock, .card-value, .stat-value, .tbl td, .kb-count { font-variant-numeric:tabular-nums }

/* ═══════════════════════════════════════════════════════════
   3. GATE DE SESSÃO
   Enquanto /api/auth.php?action=me não respondeu, a tela fica
   tampada — nunca mostra estado não confirmado pelo servidor.
   ═══════════════════════════════════════════════════════════ */
html.ca-sessao-pendente #sidebar,
html.ca-sessao-pendente #main,
html.ca-sessao-pendente #topbar { visibility:hidden !important }

#ca-carregando {
  position:fixed; inset:0; z-index:99997;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
  background:var(--bg); color:var(--text-secondary);
  font-size:13.5px; text-align:center; padding:24px;
}
html.ca-sessao-pendente #ca-carregando { display:flex }
#ca-carregando .ca-spin {
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  animation:caspin .8s linear infinite;
}
@keyframes caspin { to { transform:rotate(360deg) } }
#ca-carregando-txt { max-width:280px; animation:caFade .5s var(--ease-out) both .25s }
@keyframes caFade { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }

/* ═══════════════════════════════════════════════════════════
   4. SIDEBAR
   Mudança estrutural mais visível em relação ao layout antigo:
   saiu a trilha de 68px só com ícones (e tooltip no hover) e
   entrou uma barra lateral larga com rótulo sempre visível, no
   padrão de app nativo do macOS. O item ativo NÃO é uma pastilha
   dourada cheia — é um retângulo neutro com o ÍCONE dourado.
   Um glifo pequeno marca onde você está; a cor da marca não vira
   papel de parede.
   ═══════════════════════════════════════════════════════════ */
#sidebar {
  position:fixed; top:0; left:0;
  width:var(--sidebar-w); height:100%;
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column;
  padding:18px 12px 16px;
  gap:2px;
  z-index:100;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
}
#sidebar::-webkit-scrollbar { display:none }

/* ── wordmark ──
   Sem logo ainda: o cliente vai mandar a arte depois.
   PARA TROCAR POR IMAGEM: substitua o conteúdo de .sb-logo em
   index.html por <img src="assets/logo.svg" alt="CRM Automotive">
   — a regra .sb-logo img abaixo já dimensiona e alinha. */
.sb-logo {
  display:flex; align-items:center; gap:10px;
  height:38px; padding:0 10px;
  margin-bottom:22px;
  font-size:16px; font-weight:600; letter-spacing:-.024em;
  color:var(--text-primary);
  white-space:nowrap;
  border:none; background:none; border-radius:0;
}
.sb-logo img, .sb-logo svg.brand-mark { height:24px; width:auto; display:block }
.sb-logo .wm-accent { color:var(--accent-text) }

.sb-group-label {
  font-size:11.5px; font-weight:590; color:var(--text-muted);
  letter-spacing:.01em;
  padding:0 10px; margin:14px 0 6px;
}

.sb-item {
  display:flex; align-items:center; gap:11px;
  width:100%; height:38px;
  padding:0 10px;
  border:none; background:transparent;
  border-radius:var(--r-sm);
  color:var(--text-secondary);
  font-size:14px; font-weight:450; letter-spacing:-.01em;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sb-item svg { flex-shrink:0; opacity:.9; transition:color var(--dur-2) var(--ease) }
.sb-item:hover { background:var(--surface-hover); color:var(--text-primary) }
.sb-item.active {
  background:var(--surface-hover);
  color:var(--text-primary);
  font-weight:530;
}
.sb-item.active svg { color:var(--accent-text); opacity:1 }
.sb-label { display:block; overflow:hidden; text-overflow:ellipsis }

/* rótulo já está visível: o tooltip do layout antigo não faz mais
   sentido e só polui o hover. */
.sb-item[title]:hover::after { content:none }

.sb-sep { height:1px; background:var(--hairline); margin:12px 10px }
.sb-close { display:none }
/* especificidade casada com .icon-btn (que também define display) —
   sem o .icon-btn na frente, a regra da topbar mais abaixo ganharia
   e o botão de gaveta apareceria no desktop. */
.icon-btn.sb-toggle { display:none }
#sb-overlay {
  display:none; position:fixed; inset:0; z-index:98;
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* ═══════════════════════════════════════════════════════════
   5. TOPBAR
   Barra utilitária fina em material fosco. Sem borda em repouso:
   a linha só nasce quando a página rola por baixo (classe
   .is-scrolled vinda de ui-shell.js) — mesmo comportamento das
   title bars do macOS.
   ═══════════════════════════════════════════════════════════ */
#topbar {
  position:fixed; top:0; left:var(--sidebar-w); right:0;
  height:var(--topbar-h);
  display:flex; align-items:center;
  padding:0 20px; gap:12px;
  z-index:99;
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease);
}
#topbar.is-scrolled { border-bottom-color:var(--hairline) }

/* No desktop o wordmark mora na sidebar; a topbar só o mostra
   quando a sidebar vira gaveta (mobile). */
.tb-brand { display:none; align-items:center; gap:8px; flex-shrink:0; min-width:0 }
.tb-brand-name {
  font-size:15px; font-weight:600; letter-spacing:-.024em;
  color:var(--text-primary); white-space:nowrap;
}
.tb-center { flex:1; display:flex; justify-content:center; gap:6px; min-width:0 }
.tb-right { display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto }

#clock {
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  color:var(--text-muted);
  letter-spacing:0;
  padding-right:6px;
}

.icon-btn {
  width:32px; height:32px;
  border-radius:var(--r-xs);
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer;
  color:var(--text-secondary);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icon-btn:hover { background:var(--surface-hover); color:var(--text-primary) }
.icon-btn:active { transform:scale(.94) }

/* ═══════════════════════════════════════════════════════════
   6. MENU DE CONTA
   ═══════════════════════════════════════════════════════════ */
.tb-account { position:relative }
.tb-account-btn {
  display:flex; align-items:center; gap:8px;
  padding:4px 10px 4px 4px;
  border-radius:var(--r-pill);
  border:1px solid transparent; background:transparent;
  color:var(--text-primary); cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:450;
  transition:background var(--dur-1) var(--ease);
}
.tb-account-btn:hover { background:var(--surface-hover) }
.tb-account-btn svg { color:var(--text-muted) }

/* Avatar neutro de propósito: no layout antigo era um disco
   dourado e virava o elemento mais chamativo da tela inteira,
   competindo com a ação primária. */
.tb-account-avatar {
  width:27px; height:27px; border-radius:50%;
  background:linear-gradient(180deg, var(--surface-hover), var(--surface-elevated));
  border:1px solid var(--border);
  color:var(--text-primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:590; font-size:11px; letter-spacing:.01em;
  flex-shrink:0; overflow:hidden;
}
.tb-account-avatar-lg { width:42px; height:42px; font-size:15px }
.tb-account-nome { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.tb-account-menu {
  display:none;
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:264px;
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  backdrop-filter:blur(34px) saturate(180%);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-3);
  padding:7px; z-index:500;
  transform-origin:top right;
}
.tb-account-menu.open { display:block; animation:menuIn var(--dur-2) var(--ease-out) both }
@keyframes menuIn {
  from { opacity:0; transform:scale(.94) translateY(-6px) }
  to   { opacity:1; transform:none }
}
.tb-account-menu-head {
  display:flex; align-items:center; gap:11px;
  padding:9px 10px 13px; margin-bottom:5px;
  border-bottom:1px solid var(--hairline);
}
.tb-account-nome-full { font-weight:590; font-size:14px; letter-spacing:-.014em; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tb-account-email { font-size:12.5px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tb-account-item {
  display:flex; align-items:center; gap:10px;
  width:100%; box-sizing:border-box;
  padding:9px 10px;
  border:none; background:transparent;
  color:var(--text-primary);
  font:inherit; font-size:13.5px; text-align:left;
  border-radius:var(--r-xs); cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
.tb-account-item:hover { background:var(--surface-hover) }
.tb-account-item svg, .tb-account-item span[id] { color:var(--text-secondary) }
.tb-account-sep { height:1px; background:var(--hairline); margin:5px 2px }
.tb-account-sair { color:var(--negative) }
.tb-account-sair svg { color:var(--negative) }

/* ═══════════════════════════════════════════════════════════
   7. MAIN / SEÇÕES / CABEÇALHO DE PÁGINA
   ═══════════════════════════════════════════════════════════ */
#main {
  position:relative; z-index:1;
  margin-left:var(--sidebar-w);
  margin-top:var(--topbar-h);
  padding:44px 40px 80px;
  min-height:calc(100vh - var(--topbar-h));
}
#main > .section { max-width:var(--content-max); margin:0 auto }

.section { display:none }
.section.active { display:block; animation:secIn var(--dur-3) var(--ease-out) both }
@keyframes secIn {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:none }
}

/* Título grande é o protagonista da página — 32px/semibold com
   tracking negativo. O layout anterior tinha 22px/800, que lia
   como painel administrativo genérico. */
.page-header {
  margin-bottom:36px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
}
.page-title {
  font-size:32px; font-weight:600;
  letter-spacing:-.028em; line-height:1.1;
  color:var(--text-primary);
}
.page-sub {
  font-size:15px; color:var(--text-secondary);
  margin-top:7px; letter-spacing:-.008em;
  max-width:62ch;
}
.page-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* ═══════════════════════════════════════════════════════════
   8. BOTÕES
   ═══════════════════════════════════════════════════════════ */
.btn, .tab-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 15px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface-elevated);
  color:var(--text-primary);
  font:inherit; font-size:13.5px; font-weight:510; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease),
             opacity var(--dur-1) var(--ease);
}
.btn:hover, .tab-btn:hover { background:var(--surface-hover); border-color:var(--border-strong) }
.btn:active, .tab-btn:active { transform:scale(.975) }
.btn:disabled, .tab-btn:disabled { opacity:.45; cursor:default; transform:none }

.btn-primary, .tab-btn.btn-primary {
  background:var(--accent); border-color:transparent;
  color:var(--on-accent); font-weight:590;
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 6px 20px -8px rgba(245,183,0,.55);
}
.btn-primary:hover, .tab-btn.btn-primary:hover { background:var(--accent-hi); border-color:transparent }

.btn-ghost { background:transparent; border-color:transparent; color:var(--text-secondary) }
.btn-ghost:hover { background:var(--surface-hover); border-color:transparent; color:var(--text-primary) }
.btn-danger { color:var(--negative); border-color:var(--border) }
.btn-danger:hover { background:var(--negative-soft); border-color:transparent }
.btn-sm { height:30px; padding:0 11px; font-size:12.5px }

/* ═══════════════════════════════════════════════════════════
   9. GRID E CARDS
   ═══════════════════════════════════════════════════════════ */
.grid { display:grid; gap:18px }
.g2 { grid-template-columns:repeat(2,1fr) }
.g3 { grid-template-columns:repeat(3,1fr) }
.g4 { grid-template-columns:repeat(4,1fr) }
@media(max-width:1180px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.card {
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--shadow-1);
  transition:background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease);
}
.card:hover { background:var(--surface-elevated); border-color:var(--border); box-shadow:var(--shadow-2) }

/* Rótulo em caixa alta com tracking largo era a assinatura visual
   do sistema anterior. Aqui é frase normal, peso médio: o número
   é que precisa saltar, não a legenda dele. */
.card-title {
  font-size:13.5px; font-weight:450;
  color:var(--text-secondary);
  letter-spacing:-.008em;
  margin-bottom:14px;
  text-transform:none;
}
.card-value {
  font-size:34px; font-weight:600;
  letter-spacing:-.03em; line-height:1.05;
  color:var(--text-primary);
}
.card-value.sm { font-size:24px; letter-spacing:-.024em }
.card-value.accent { color:var(--accent-text) }
.card-sub { font-size:13px; color:var(--text-muted); margin-top:7px }

.divider { height:1px; background:var(--hairline); margin:22px 0; border:none }
canvas { max-width:100% }

/* ═══════════════════════════════════════════════════════════
   10. BADGE
   ═══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  font-size:12px; font-weight:510; letter-spacing:-.005em;
  line-height:1.5;
}
.badge-red    { background:var(--negative-soft); color:var(--negative) }
.badge-green  { background:var(--positive-soft); color:var(--positive) }
.badge-yellow { background:var(--warning-soft);  color:var(--warning) }
.badge-blue   { background:var(--info-soft);     color:var(--info) }
.badge-gray   { background:var(--surface-hover); color:var(--text-secondary) }
.badge-accent { background:var(--accent-soft);   color:var(--accent-text) }

/* ═══════════════════════════════════════════════════════════
   11. SEGMENTED CONTROL (.tabs)
   Pastilha que desliza, no padrão do controle segmentado do iOS.
   ═══════════════════════════════════════════════════════════ */
.tabs {
  display:inline-flex; gap:2px;
  background:var(--bg-sunken);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  padding:3px;
  margin-bottom:24px;
  width:fit-content;
}
.tabs .tab-btn {
  height:30px; padding:0 15px;
  border:none; background:transparent;
  border-radius:7px;
  color:var(--text-secondary);
  font-size:13px; font-weight:490;
  box-shadow:none;
}
.tabs .tab-btn:hover { background:transparent; color:var(--text-primary) }
.tabs .tab-btn.active {
  background:var(--surface-elevated);
  color:var(--text-primary);
  font-weight:530;
  box-shadow:var(--shadow-1);
}
.tab-pane { display:none }
.tab-pane.active { display:block; animation:secIn var(--dur-2) var(--ease-out) both }

/* ═══════════════════════════════════════════════════════════
   12. TABELA
   ═══════════════════════════════════════════════════════════ */
.tbl { width:100%; border-collapse:collapse; font-size:13.5px }
.tbl th {
  text-align:left; padding:0 14px 10px;
  border-bottom:1px solid var(--border);
  font-size:12.5px; font-weight:510;
  color:var(--text-muted);
  letter-spacing:-.005em; text-transform:none;
  white-space:nowrap;
}
.tbl td {
  padding:13px 14px;
  border-bottom:1px solid var(--hairline);
  color:var(--text-secondary);
}
.tbl td:first-child { color:var(--text-primary); font-weight:470 }
.tbl tr:last-child td { border-bottom:none }
.tbl tbody tr { transition:background var(--dur-1) var(--ease) }
.tbl tbody tr:hover td { background:var(--surface-hover); color:var(--text-primary) }

/* ═══════════════════════════════════════════════════════════
   13. KANBAN (esqueleto do Funil)
   ═══════════════════════════════════════════════════════════ */
.kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media(max-width:1060px){ .kanban{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){ .kanban{grid-template-columns:1fr} }
.kb-col {
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:16px;
}
.kb-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.kb-title { font-size:13.5px; font-weight:560; letter-spacing:-.012em; text-transform:none; color:var(--text-primary) }
.kb-count {
  background:var(--surface-hover); color:var(--text-secondary);
  font-size:12px; font-weight:520;
  padding:1px 8px; border-radius:var(--r-pill);
}
.kb-card {
  background:var(--surface-elevated);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:13px; margin-bottom:9px;
  font-size:13px; color:var(--text-secondary);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.kb-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-2) }
.kb-card:last-child { margin-bottom:0 }

/* ═══════════════════════════════════════════════════════════
   14. ESTADO VAZIO
   Era uma caixa tracejada com texto cinza. Vira um estado vazio
   de verdade: um glifo contido, uma frase que diz o que vai
   aparecer ali e uma segunda linha que explica o que a tela faz.
   ═══════════════════════════════════════════════════════════ */
.modulo-placeholder {
  border:1px solid var(--hairline);
  border-radius:var(--r-xl);
  background:
    linear-gradient(180deg, var(--surface) 0%, transparent 140%);
  padding:72px 32px;
  text-align:center;
  color:var(--text-secondary);
  font-size:14.5px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:var(--shadow-1);
}
.modulo-placeholder b {
  display:block;
  font-size:19px; font-weight:590; letter-spacing:-.022em;
  color:var(--text-primary);
  margin-bottom:2px;
}
.modulo-placeholder br { display:none }
.modulo-placeholder p { max-width:46ch; margin:0 auto }
.ph-glyph {
  width:52px; height:52px; margin-bottom:16px;
  border-radius:var(--r-md);
  background:var(--surface-hover);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   15. PRIVACIDADE FINANCEIRA
   Qualquer texto no padrão "R$ 123" recebe .money via
   MutationObserver (assets/ui-shell.js) e fica borrado por
   padrão. Motivo: o monitor da recepção fica virado pro cliente
   do outro lado do balcão — o orçamento de OUTRO cliente não
   pode ficar exposto sem querer.
   ═══════════════════════════════════════════════════════════ */
body.privacidade-fin .money {
  filter:blur(7px);
  transition:filter var(--dur-2) var(--ease);
  user-select:none;
}
body.privacidade-fin .money:hover { filter:blur(7px) }

/* ═══════════════════════════════════════════════════════════
   16. TOAST
   ═══════════════════════════════════════════════════════════ */
#toast-wrap {
  position:fixed; top:calc(var(--topbar-h) + 14px); right:22px;
  /* acima do modal (10000): confirmação de "salvo" precisa aparecer
     mesmo quando a janela de formulário ainda está aberta. */
  z-index:10050;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  pointer-events:none;
}
.toast-card {
  position:relative; pointer-events:auto;
  display:flex; align-items:center; gap:11px;
  padding:12px 16px;
  border-radius:var(--r-md);
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-3);
  font-size:13.5px; color:var(--text-primary);
  max-width:340px;
  opacity:0; transform:translateY(-10px) scale(.96);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.toast-card.show { opacity:1; transform:none }
.toast-card.hide { opacity:0; transform:translateY(-6px) scale(.97); transition-duration:var(--dur-2) }
.toast-card .toast-icon {
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:var(--accent-soft); color:var(--accent-text);
}
.toast-card.ok .toast-icon   { background:var(--positive-soft); color:var(--positive) }
.toast-card.erro .toast-icon { background:var(--negative-soft); color:var(--negative) }
.toast-card.erro { border-color:color-mix(in srgb, var(--negative) 45%, transparent) }

/* ═══════════════════════════════════════════════════════════
   17. MODAL (openForm / mlPanel)
   Folha que sobe e cresce com a curva de apresentação da Apple,
   sobre um fundo desfocado.
   ═══════════════════════════════════════════════════════════ */
#ml-modal {
  display:none; position:fixed; inset:0; z-index:10000;
  align-items:center; justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  animation:backdropIn var(--dur-2) var(--ease) both;
}
[data-theme="light"] #ml-modal { background:rgba(0,0,0,.22) }
@keyframes backdropIn { from { opacity:0 } to { opacity:1 } }

#ml-modal-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  max-width:540px; width:100%;
  max-height:88vh; overflow:auto;
  box-shadow:var(--shadow-3);
  animation:sheetIn var(--dur-3) var(--ease-sheet) both;
}
@keyframes sheetIn {
  from { opacity:0; transform:translateY(18px) scale(.97) }
  to   { opacity:1; transform:none }
}
#ml-modal-head {
  display:flex; justify-content:space-between; align-items:center;
  gap:14px;
  padding:20px 22px 16px;
}
#ml-modal-title { font-weight:600; font-size:18px; letter-spacing:-.022em; line-height:1.25 }
#ml-modal-close {
  background:var(--surface-hover); border:none;
  color:var(--text-secondary);
  width:28px; height:28px; border-radius:50%;
  font-size:17px; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
#ml-modal-close:hover { background:var(--border-strong); color:var(--text-primary) }
#ml-modal-body { padding:4px 22px 22px; display:grid; gap:16px }
#ml-modal-foot {
  display:flex; gap:10px; justify-content:flex-end;
  padding:16px 22px 20px;
  border-top:1px solid var(--hairline);
  position:sticky; bottom:0;
  background:var(--surface);
}

/* ── campos do openForm ──
   As classes abaixo são aplicadas pelo próprio openForm() em
   assets/ui-shell.js (antes o estilo ia inline numa string). */
.mlf-label {
  display:block;
  font-size:13px; font-weight:480; color:var(--text-secondary);
  letter-spacing:-.008em; margin-bottom:7px;
}
.mlf-label .req { color:var(--accent-text) }
.mlf-field {
  width:100%;
  padding:10px 13px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--bg-sunken);
  color:var(--text-primary);
  font-size:14.5px; font-family:inherit;
  box-sizing:border-box;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
[data-theme="light"] .mlf-field { background:#FFF }
.mlf-field::placeholder { color:var(--text-muted) }
.mlf-field:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-soft);
}
select.mlf-field { appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
textarea.mlf-field { resize:vertical; min-height:76px; line-height:1.5 }
.mlf-hint { font-size:12.5px; color:var(--text-muted); margin-top:6px }

.mltag {
  padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:transparent;
  color:var(--text-primary); font:inherit; font-size:13px; font-weight:480;
  cursor:pointer;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.mltag:hover { border-color:var(--border-strong) }
.mlcor { width:26px; height:26px; border-radius:50%; border:1px solid var(--border); cursor:pointer; transition:transform var(--dur-1) var(--ease) }
.mlcor:hover { transform:scale(1.12) }

/* ═══════════════════════════════════════════════════════════
   18. RESPONSIVO
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1280px){
  :root { --sidebar-w:224px }
  #main { padding:36px 28px 72px }
}

@media(max-width:900px){
  :root { --sidebar-w:0px }
  .icon-btn.sb-toggle { display:flex }
  .tb-brand { display:flex }

  #sidebar {
    width:274px !important;
    transform:translateX(-100%);
    transition:transform var(--dur-3) var(--ease-sheet);
    box-shadow:var(--shadow-3);
    padding:16px 12px;
    border-right:1px solid var(--border);
  }
  #sidebar.open { transform:none }
  #sb-overlay.show { display:block; animation:backdropIn var(--dur-2) var(--ease) both }

  /* fica na mesma linha do wordmark, canto superior direito da gaveta */
  .sb-close {
    display:flex; position:absolute; top:18px; right:14px;
    width:30px; height:30px; border-radius:50%;
    align-items:center; justify-content:center;
    color:var(--text-secondary); cursor:pointer;
    background:var(--surface-hover); border:none;
  }
  .sb-logo { margin-bottom:14px }
  .sb-item { height:42px; font-size:15px }

  #main { padding:26px 20px 64px }
  #topbar { padding:0 12px; gap:8px }
  #clock { display:none }
  .page-title { font-size:27px }
  .page-sub { font-size:14.5px }
  .page-header { margin-bottom:26px; align-items:flex-start }
  #toast-wrap { left:14px; right:14px; align-items:stretch }
  .toast-card { max-width:none }
  .card { padding:20px; border-radius:var(--r-md) }
  .modulo-placeholder { padding:52px 22px; border-radius:var(--r-lg) }
  #ml-modal { padding:0; align-items:flex-end }
  #ml-modal-box { max-height:92vh; border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom:none }
  @keyframes sheetIn { from { opacity:0; transform:translateY(36px) } to { opacity:1; transform:none } }
}

@media(max-width:480px){
  .tb-account-nome { display:none }
  .page-title { font-size:24px }
}

/* ═══════════════════════════════════════════════════════════
   19. MENOS MOVIMENTO
   Quem pediu menos animação no sistema operacional recebe a
   mesma tela, parada.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .toast-card { opacity:1; transform:none }
}