/* ============================================================================
   MAIN.CSS — base de design do Kanban de Produção
   ============================================================================
   Este é o ÚNICO lugar onde tokens (cor/tipografia/espaçamento/sombra),
   tipografia base (H1–H6), botões, blocos e modais são definidos.

   Toda página/módulo carrega este arquivo primeiro; CSS específico de tela
   (board.css, task-modal.css, filters.css, topbar.css...) só faz layout —
   nunca redefine cor, fonte ou raio de borda "no olho". Se um componente
   novo precisar de uma variação, adicione uma variável ou uma classe aqui,
   não um valor solto no arquivo da tela.

   Índice:
     1. Reset
     2. Tokens (cor, sombra, raio, fonte) — claro / escuro
     3. Tipografia (H1–H6, corpo, legendas)
     4. Layout & utilitários
     5. Botões
     6. Formulários
     7. Blocos (cards / painéis)
     8. Modais
     9. Chips, tags, badges, pills
     10. Popovers / menus de contexto
     11. Toasts
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
/* SVG fica em linha de propósito: quase todo ícone daqui vive dentro de um
   botão ou selo, ao lado de um texto. Com display:block ele empurrava o
   texto para a linha de baixo — era o que deixava o "+" e os ícones dos
   selos de data desalinhados. */
svg { max-width: 100%; vertical-align: middle; flex: 0 0 auto; }
button { font-family: inherit; }
input, textarea, select, button { font-size: 14px; color: inherit; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--blue-500); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 2. Tokens ---------- */
:root {
  /* marca */
  --navy-900: #0f2d4d;
  --navy-700: #134674;
  --blue-500: #00b5ff;
  --blue-600: #0092d1;
  --coral-500: #ff6b52;
  --coral-600: #e6533b;
  --amber-500: #f2b134;
  --green-500: #3fb87f;

  /* neutros (tema claro) */
  --paper: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --ink: #152238;
  --ink-dim: #5c6b83;
  --ink-faint: #93a1b8;
  --line: #dde4ec;
  --line-strong: #c7d0dc;

  /* sombra / raio */
  --shadow-sm: 0 1px 2px rgba(21,34,56,.06), 0 6px 16px -8px rgba(21,34,56,.18);
  --shadow-lg: 0 12px 32px -8px rgba(15,45,77,.28), 0 4px 12px -4px rgba(15,45,77,.16);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* tipografia */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI Semibold", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* escala de espaçamento — use isto em vez de valores soltos */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b1622;
    --surface: #132234;
    --surface-2: #0f1c2b;
    --ink: #e7edf7;
    --ink-dim: #9fb0c8;
    --ink-faint: #647389;
    --line: #22344a;
    --line-strong: #2c4258;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.6);
    --blue-500: #33c6ff;
    --coral-500: #ff8168;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1622; --surface: #132234; --surface-2: #0f1c2b;
  --ink: #e7edf7; --ink-dim: #9fb0c8; --ink-faint: #647389;
  --line: #22344a; --line-strong: #2c4258;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.6);
  --blue-500: #33c6ff; --coral-500: #ff8168;
}
:root[data-theme="light"] {
  --paper: #eef2f6; --surface: #ffffff; --surface-2: #f5f8fb;
  --ink: #152238; --ink-dim: #5c6b83; --ink-faint: #93a1b8;
  --line: #dde4ec; --line-strong: #c7d0dc;
  --blue-500: #00b5ff; --coral-500: #ff6b52;
}

/* ---------- 3. Tipografia ---------- */
/* Escala única — todo H novo em qualquer tela usa isto, nunca font-size solto. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1, .h1 { font-size: 28px; letter-spacing: -.2px; }
h2, .h2 { font-size: 21px; letter-spacing: -.1px; }
h3, .h3 { font-size: 17px; }
h4, .h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); }
h5, .h5 { font-size: 14px; font-weight: 600; }
h6, .h6 { font-size: 12px; font-weight: 600; color: var(--ink-dim); }

p { margin: 0 0 var(--space-3); max-width: 65ch; }
p:last-child { margin-bottom: 0; }
small, .text-caption { font-size: 12px; color: var(--ink-faint); }
.text-dim { color: var(--ink-dim); }
.text-faint { color: var(--ink-faint); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout & utilitários ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.spacer { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* ---------- 5. Botões ---------- */
/* As variantes repetem a base de propósito: em boa parte da tela o botão é
   escrito só como class="btn-ghost", sem o "btn" junto. Se a base valesse
   apenas para .btn, esses botões perderiam tamanho, espaçamento e alinhamento
   (o ícone caía acima do texto). Escrever assim faz as duas formas
   funcionarem — class="btn btn-ghost" e class="btn-ghost". */
.btn, .btn-primary, .btn-ghost, .btn-navy, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; line-height: 1; text-decoration: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Botão sem classe nenhuma. Alguns são montados assim pela tela (ex.: o
   "Enviar" do comentário) e apareciam com o cinza padrão do navegador, que
   no tema escuro fica texto claro sobre fundo claro. O :not([class]) garante
   que isto só alcança quem não tem estilo próprio. */
button:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-sm); padding: 8px 14px; font: inherit; font-size: 13px;
  font-weight: 600; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
button:not([class]):hover { background: var(--line); }
.btn-primary { background: var(--blue-500); color: #04263a; }
.btn-primary:hover:not(:disabled) { filter: brightness(.96); }
.btn-navy { background: var(--navy-700); color: #fff; }
.btn-navy:hover:not(:disabled) { background: var(--navy-900); }
.btn-ghost { background: none; border-color: var(--line); color: var(--ink-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-danger { background: var(--coral-500); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--coral-600); }
.btn-link {
  background: none; border: none; padding: 0; color: var(--blue-600); font-weight: 600; font-size: 13px; cursor: pointer;
}
:root[data-theme="dark"] .btn-link { color: var(--blue-500); }
@media (prefers-color-scheme: dark) { .btn-link { color: var(--blue-500); } }

/* .icon-btn-dark repete a base porque na barra superior ele é escrito
   sozinho, sem o .icon-btn junto — sem isto ficava com o cinza padrão do
   navegador em vez de transparente. */
.icon-btn, .icon-btn-dark {
  width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent;
  color: var(--ink-faint); cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.icon-btn:hover { background: var(--line); color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn-dark { color: rgba(255,255,255,.65); }
.icon-btn-dark:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- 6. Formulários ---------- */

/* Base de TODO campo de digitação, tenha classe ou não. Vários campos são
   montados pela tela sem classe nenhuma (popovers, editor de modelos, criar
   etapa) e sem esta regra apareciam como caixa branca do navegador, ilegível
   no tema escuro. Classes específicas continuam podendo sobrescrever. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
select, textarea {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
  max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label, .field-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); font-weight: 700;
}
.field input[type="text"], .field input[type="date"], .field input[type="week"],
.field input[type="month"], .field input[type="number"], .field select, .field textarea,
.input {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
  background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; width: 100%;
}
/* Autofill do navegador (usuário/senha salvos) tenta forçar seu próprio
   fundo — sem isso o texto ficava ilegível assim que o navegador preenchia. */
.input:-webkit-autofill, .input:-webkit-autofill:hover,
.input:-webkit-autofill:focus, .input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.field textarea, textarea.input { resize: vertical; min-height: 76px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
/* Base de TODO checkbox, com classe ou não — mesmo motivo do input acima:
   vários (marcação de etapa, formatos de modelo, alocar pessoa) são
   montados pela tela sem nenhuma classe de contêiner, e sem isto ficavam
   com a caixinha crua do sistema operacional em vez de acompanhar o tema. */
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue-500); cursor: pointer; }
.checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---------- 7. Blocos (cards / painéis) ---------- */
/* Bloco de superfície genérico — base de qualquer "card" da aplicação */
.block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.block-pad { padding: var(--space-4); }
.panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.panel-pad { padding: var(--space-4); }

/* ---------- 8. Modais ---------- */
/* Toda tela de overlay (confirmação, formulário, detalhe) usa esta estrutura:
   .overlay > .modal > .modal-head + .modal-body (+ .modal-foot opcional) */
.overlay {
  position: fixed; inset: 0; background: rgba(10,20,32,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px;
}
.overlay[hidden] { display: none; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px; overflow: hidden; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.modal-head .crumb { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 5px; }
.modal-head .crumb b { color: var(--ink-dim); font-weight: 600; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--line); flex: 0 0 auto;
}
.close-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent;
  color: var(--ink-faint); cursor: pointer; font-size: 18px; flex: 0 0 auto;
}
.close-btn:hover { background: var(--line); color: var(--ink); }

/* ---------- 9. Chips, tags, badges, pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-dim); font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
}
.chip button { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0; font-size: 12px; line-height: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-dim); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 5px;
}
.badge {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-dim);
  font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px;
}
.tabela, .tabela-usuarios { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela-usuarios th {
  text-align: left; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.tabela td, .tabela-usuarios td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela tr:hover td, .tabela-usuarios tr:hover td { background: var(--surface); }
.tabela .pessoa, .tabela-usuarios .pessoa { display: flex; align-items: center; gap: 9px; }

.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2.5px 7px; border-radius: 5px; }

/* ---------- 9b. Blocos de página interna (relatórios, fichas) ----------
   Nasceram na tela de métricas e passaram a ser usados também pela carteira
   de clientes. Ficam aqui, e não em metricas.css, porque a regra do projeto
   é: o que se repete mora na base; por tela, só o layout dela. */
.pagina-topo { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pagina-topo > div { flex: 1 1 260px; min-width: 0; }
.subtitulo-pagina { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.abas .aba {
  padding: 9px 4px; margin-right: 20px; color: var(--ink-faint); text-decoration: none;
  font-weight: 600; font-size: 12.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas .aba:hover { color: var(--ink-dim); }
.abas .aba.ativa { color: var(--navy-700); border-bottom-color: var(--blue-500); }
@media (prefers-color-scheme: dark) { .abas .aba.ativa { color: var(--blue-500); } }
:root[data-theme="dark"] .abas .aba.ativa { color: var(--blue-500); }

.cartoes-numero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.cartao-numero {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 2px;
}
.cartao-numero .valor {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1;
}
.cartao-numero .valor .de { font-size: 18px; color: var(--ink-faint); font-weight: 600; }
.cartao-numero .rotulo { font-size: 12px; color: var(--ink-faint); }
.cartao-numero.atencao { border-color: color-mix(in srgb, var(--amber-500) 55%, var(--line)); }
.cartao-numero.atencao .valor { color: var(--amber-500); }
@media (max-width: 720px) { .cartoes-numero { grid-template-columns: 1fr; } }

.vazio { color: var(--ink-faint); font-size: 13px; padding: 10px 0 4px; }
.nota { color: var(--ink-faint); font-size: 11.5px; line-height: 1.5; margin-top: 10px; max-width: 62ch; }
.ink-faint { color: var(--ink-faint); font-size: 12px; }
.num-job { color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: 4px; }
.tabela .num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .pessoa .avatar { margin: 0; flex: 0 0 auto; }

/* ---------- 10. Popovers / menus de contexto ---------- */
.popover {
  position: fixed; z-index: 240; width: 280px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 420px;
}
.popover-list { overflow-y: auto; padding: 6px; flex: 1; }
.popover-item {
  width: 100%; text-align: left; background: none; border: none; padding: 8px; border-radius: 7px;
  cursor: pointer; color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.popover-item:hover { background: var(--surface-2); }
.popover-item .sub { font-size: 11px; color: var(--ink-faint); margin-left: auto; font-variant-numeric: tabular-nums; }

.ctx-menu {
  position: fixed; z-index: 240; width: 220px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
}
.ctx-item {
  width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 7px;
  cursor: pointer; color: var(--ink); font-size: 12.5px; display: flex; align-items: center; gap: 9px;
}
.ctx-item:hover { background: var(--surface-2); }
.ctx-item-perigo { color: var(--coral-600); }
.ctx-item-perigo:hover { background: var(--coral-500); color: #fff; }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 2px; }

/* ---------- 11. Toasts ---------- */
#toast-host {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast { background: var(--navy-900); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 12.5px; box-shadow: var(--shadow-lg); }


/* --- Regras recuperadas da prévia aprovada (perdidas na divisão do CSS) --- */
.btn-ghost:disabled{ opacity:.45; cursor:not-allowed; }