/* ═══════════════════════════════════════════════════════════════════════════
   AZUL — o mundo aprovado no canvas, trazido para o sistema.

   Registro de painel SaaS moderno: quase-preto FRIO (matiz ~218°), painel
   lateral recuado e arredondado em vez de laje colada na borda, cartão de
   borda fina com sombra própria, e um azul corporativo como única cor de ação.

   Carrega por último, depois de bento.css e dashboard.css, e trabalha por
   TOKEN: quase tudo aqui é retonalização, não reescrita de componente. O que
   estava estruturalmente certo continua valendo.

   Toda cor de texto aqui foi medida no navegador com as camadas compostas,
   tema a tela, e não estimada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ TIPOGRAFIA ═════════════════════════════════════════════════════════════ */
:root, :root[data-theme="dark"] {
  --sans: 'Ruda', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-system: var(--sans);
}

/* ══ TEMA CLARO ═════════════════════════════════════════════════════════════ */
:root, :root[data-theme="light"] {
  --canvas: #F1F4F8; --mesh: var(--canvas);
  --surface: #FFFFFF; --surface-2: #F7F9FC; --surface-sunken: #F3F6FA;

  --label: #0F1722; --label1: #0F1722; --heading: #0B1119;
  --label2: #4E5B6E;
  /* tinta3 pinta rótulo, cabeçalho de tabela e placeholder — texto FUNCIONAL.
     Medido: mais claro que isto reprova sobre branco. */
  --label3: #5E6B7D;

  --acento: #1B4D8F; --acento-forte: #143B6E; --acento-sobre: #FFFFFF;
  --acento-suave: #EAF1FA; --acento-linha: #C2D6EE; --acento-brilho: rgba(27,77,143,.18);
  --brand: #1B4D8F; --brand-bright: #143B6E;
  --accent-solid: #2B5EA8; --accent-solid-ink: #FFFFFF;

  --hairline: rgba(16,28,45,.10); --hairline-firm: rgba(16,28,45,.16); --edge: var(--hairline);
  --fill: #EEF2F7; --fill2: #E3E9F1;

  --blue: #146074; --blue-ink: #10505F; --blue-bg: rgba(20,96,116,.10); --blue-chip: rgba(20,96,116,.16);
  --green: #15704E; --green-fill: #15704E; --green-ink: #10593E; --green-bg: rgba(21,112,78,.10);
  --teal: #146074; --teal-ink: #10505F; --teal-bg: rgba(20,96,116,.10);
  --red: #A3352F; --red-fill: #A3352F; --red-ink: #8A2B26; --red-bg: rgba(163,53,47,.10); --red-chip: rgba(163,53,47,.16);
  --orange: #7E5810; --orange-fill: #7E5810; --orange-ink: #6A4A0D; --orange-bg: rgba(126,88,16,.11);
  --purple: #5B47A0; --purple-ink: #4B3A85; --purple-bg: rgba(91,71,160,.10);
  --sinal-red: #A3352F; --sinal-red-ink: #FFFFFF;
  --sinal-green: #15704E; --sinal-green-ink: #FFFFFF;

  --shadow-s: 0 1px 2px rgba(16,28,45,.05);
  --shadow-m: 0 1px 2px rgba(16,28,45,.05), 0 10px 26px -12px rgba(16,28,45,.16);
  --shadow-r: 0 2px 4px rgba(16,28,45,.06), 0 18px 40px -14px rgba(16,28,45,.20);
  --shadow-l: 0 4px 10px rgba(16,28,45,.08), 0 34px 70px -20px rgba(16,28,45,.28);

  --r-xs: 6px; --r-s: 10px; --r-m: 16px; --r-l: 18px; --r-xl: 22px; --r-cap: 999px;
  color-scheme: light;
}

/* ══ TEMA ESCURO ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --canvas: #0B0F14; --mesh: var(--canvas);
  --surface: #151C27; --surface-2: #1B2431; --surface-sunken: #101620;

  --label: #EEF2F7; --label1: #EEF2F7; --heading: #FFFFFF;
  --label2: #A3B0C0;
  /* Espelho do claro: o MESMO token erra para o lado oposto em cada tema.
     Medido, não herdado. */
  --label3: #93A0B1;

  --acento: #7CB0F2; --acento-forte: #A6CBFA; --acento-sobre: #0A1626;
  --acento-suave: #16283F; --acento-linha: #27405F; --acento-brilho: rgba(124,176,242,.22);
  --brand: #7CB0F2; --brand-bright: #A6CBFA;
  --accent-solid: #2B5EA8; --accent-solid-ink: #FFFFFF;

  --hairline: rgba(255,255,255,.08); --hairline-firm: rgba(255,255,255,.14); --edge: var(--hairline);
  --fill: #1B2431; --fill2: #232F3F;

  --blue: #5BC0D4; --blue-ink: #7FD3E3; --blue-bg: rgba(91,192,212,.13); --blue-chip: rgba(91,192,212,.20);
  --green: #4FC79A; --green-fill: #4FC79A; --green-ink: #7CDCB7; --green-bg: rgba(79,199,154,.13);
  --teal: #5BC0D4; --teal-ink: #7FD3E3; --teal-bg: rgba(91,192,212,.13);
  --red: #E77C74; --red-fill: #E77C74; --red-ink: #F2A19B; --red-bg: rgba(231,124,116,.13); --red-chip: rgba(231,124,116,.20);
  --orange: #E0A93B; --orange-fill: #E0A93B; --orange-ink: #EDC275; --orange-bg: rgba(224,169,59,.13);
  --purple: #A78BD6; --purple-ink: #C0AAE5; --purple-bg: rgba(167,139,214,.13);
  --sinal-red: #E77C74; --sinal-red-ink: #2A0E0C;
  --sinal-green: #4FC79A; --sinal-green-ink: #06231A;

  --shadow-s: none;
  --shadow-m: 0 4px 16px -8px rgba(0,0,0,.55);
  --shadow-r: 0 12px 36px -16px rgba(0,0,0,.65);
  --shadow-l: 0 24px 70px -22px rgba(0,0,0,.75);
  color-scheme: dark;
}

body { background: var(--canvas) !important; }

/* ══ ÍCONE ══════════════════════════════════════════════════════════════════
   Mesmo conjunto desenhado, outra VOZ: ponta e junta arredondadas, traço mais
   fino. O desenho técnico de esquadria pertencia ao mundo anterior. */
svg[data-ico] {
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 4;
}

/* ══ A COLUNA ═══════════════════════════════════════════════════════════════
   Deixa de ser laje colada na borda e passa a ser painel recuado e arredondado
   — o gesto que separa este registro do admin genérico. */
.shell { padding: 12px 12px 12px 12px; gap: 12px; background: var(--canvas); }
.sidebar, :root[data-theme="dark"] .sidebar {
  background: var(--surface) !important;
  border: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--shadow-m);
  overflow: hidden;
}
.sidebar .brand {
  min-height: 68px; padding: 18px 18px 12px;
  border-bottom: 1px solid var(--hairline);
}
.brand-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--orange-bg); color: var(--orange); box-shadow: none;
}
.sidebar .brand-name, .mm-panel .brand-name { color: var(--heading); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.sidebar .brand-ver, .mm-panel .brand-ver { color: var(--label3); }
/* 11px é o piso de texto funcional — 10,5 era regressão minha. */
.nav-section-label { color: var(--label3); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.nav-item { border-radius: 11px; color: var(--label2); font-size: 13.5px; font-weight: 500; letter-spacing: -.008em; }
.nav-item .nav-icon { color: var(--label3); }
.sidebar .nav-item:hover, .mm-panel .nav-item:hover { background: var(--fill); color: var(--label); }
.sidebar .nav-item.active, .mm-panel .nav-item.active {
  background: var(--accent-solid); color: var(--accent-solid-ink); font-weight: 600; box-shadow: none;
}
.sidebar .nav-item.active .nav-icon { color: var(--accent-solid-ink); }
/* Branco sobre branco-a-24% sobre o azul mede 3,6:1 — o mesmo defeito que
   corrigi no canvas. Fundo cheio com tinta azul resolve. */
.sidebar .nav-item.active .nav-badge { background: #fff; color: var(--accent-solid); }
.sidebar-footer { color: var(--label3) !important; }

/* ══ O TOPO ═════════════════════════════════════════════════════════════════ */
.topbar {
  min-height: 68px; padding: 14px 22px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 22px; box-shadow: var(--shadow-m);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.main { padding-right: 12px; gap: 12px; display: flex; flex-direction: column; }
.search-bar {
  border-radius: var(--r-cap); background: var(--fill);
  border: 1px solid var(--hairline); box-shadow: none; height: 38px;
}
.search-bar:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-brilho); }
.theme-toggle, .notif-btn, .mt-btn {
  border-radius: 11px; background: var(--fill); border: 1px solid var(--hairline); color: var(--label2);
}
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.032em; }
.page-sub { font-size: 12.5px; font-weight: 500; color: var(--label3); }

/* ══ SUPERFÍCIES ════════════════════════════════════════════════════════════ */
.card, .panel, .stat-card, .kpi, .table-wrap, .aprov-grid, .stat-grid {
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
  background: var(--surface);
}
.modal, .ap-pop, .row-menu, .notif-pop, .combo-results, .mm-panel, .price-pop, .ax-box {
  border: 1px solid var(--hairline); border-radius: var(--r-l); box-shadow: var(--shadow-l);
}
.card-header { background: transparent; border-bottom: 1px solid var(--hairline); }
.card-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.022em; }
.card-sub { font-size: 12.5px; font-weight: 500; color: var(--label3); }

/* ══ CONTROLES ══════════════════════════════════════════════════════════════ */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: -.008em; }
.btn-primary { background: var(--accent-solid); color: var(--accent-solid-ink); border-color: var(--accent-solid); }
.btn-ghost { background: var(--fill); border: 1px solid var(--hairline); color: var(--label2); }
.btn-ghost:hover { background: var(--fill2); color: var(--label); }
.fpill { border-radius: 10px; background: var(--fill); border: 1px solid var(--hairline); color: var(--label2); font-weight: 500; }
.fpill.active { background: var(--accent-solid); color: var(--accent-solid-ink); border-color: var(--accent-solid); }
.fselect { border-radius: 10px; background: var(--fill); border-color: var(--hairline); color: var(--label2); font-weight: 500; }
.badge { border-radius: 8px; font-size: 12px; font-weight: 600; padding: 3px 10px; }

/* ══ TABELA ═════════════════════════════════════════════════════════════════ */
thead th { background: var(--surface); color: var(--label3); font-weight: 600; letter-spacing: .05em; }
tbody tr:hover { background: var(--surface-2); }

/* ══ O PAINEL DO DASHBOARD ══════════════════════════════════════════════════
   dashboard.css carrega uma paleta LOCAL (--dash-teal) que não segue os tokens
   do tema. Sem isto, o painel continuaria verde-azulado num sistema azul. */
.dash-page {
  /* --dash-teal marca o POSITIVO ("Regular", dentro do mínimo). Apontá-lo para o
     azul faria o estado bom vestir a cor de AÇÃO — e no resto do sistema azul
     significa "clique aqui". Positivo é verde; o azul fica reservado. */
  --dash-teal: var(--green);
  --dash-teal-soft: var(--green-bg);
  --dash-red: var(--red);
  --dash-amber: var(--orange);
}

/* O terciário do apple-tokens é ALFA (38%/40%) e não alcança 4,5:1 em nenhum
   dos dois temas — e os rótulos de gráfico o usam por dentro de style inline,
   fora do alcance de qualquer regra de componente. Aponta para o token do tema. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --color-label-tertiary: var(--label3);
}

/* Topo e marca com o conteúdo encostado no fio, sem folga vertical. */
.mobile-topbar { padding: 10px 14px; }
.mm-panel .brand { padding: 16px 18px; }

/* ══ A COLUNA REESCOPAVA A TINTA ════════════════════════════════════════════
   `.sidebar` redefinia --label/--label2/--label3/--acento para uma laje NAVY.
   Eu troquei o fundo dela por painel claro e deixei os tokens: no tema claro os
   itens inativos ficaram #C0CEE0 sobre branco — perto de invisíveis.

   É a segunda vez que esta armadilha me pega neste sistema: propriedade
   personalizada resolve NO ELEMENTO, então trocar a superfície sem trocar o
   escopo do token deixa a tinta do mundo anterior. Fica registrado. */
.sidebar, .mm-panel {
  --label: #0F1722; --label2: #4E5B6E; --label3: #5E6B7D;
  --acento: #1B4D8F; --acento-forte: #143B6E; --acento-sobre: #FFFFFF;
  --acento-suave: #EAF1FA;
}
:root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .mm-panel {
  --label: #EEF2F7; --label2: #A3B0C0; --label3: #93A0B1;
  --acento: #7CB0F2; --acento-forte: #A6CBFA; --acento-sobre: #0A1626;
  --acento-suave: #16283F;
}
/* E as cores CRAVADAS que sobraram da laje navy. */
.sidebar .brand-name, .mm-panel .brand-name { color: var(--heading); font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.sidebar .brand-ver, .mm-panel .brand-ver { color: var(--label3); }
.sidebar .brand { border-bottom: 1px solid var(--hairline); }
.sidebar .nav-section-label, .mm-panel .nav-section-label { color: var(--label3); }
.sidebar .nav-item, .mm-panel .nav-item { color: var(--label2); font-size: 13.5px; }
.sidebar .nav-item .nav-icon, .mm-panel .nav-item .nav-icon { color: var(--label3); }
.sidebar .nav-item:hover, .mm-panel .nav-item:hover { background: var(--fill); color: var(--label); }
.sidebar .nav-divider, .mm-panel .nav-divider { background: var(--hairline); }
.sidebar .nav-badge, .mm-panel .nav-badge {
  background: var(--red-bg); color: var(--red); border: 0; font-size: 11px; font-weight: 700;
}
.sidebar .nav-item.active .nav-badge, .mm-panel .nav-item.active .nav-badge {
  background: #fff; color: var(--accent-solid);
}
.sidebar .profile-section, .mm-panel .profile-section { border-top: 1px solid var(--hairline); }
.sidebar .profile-btn, .mm-panel .profile-btn { color: var(--label2); font-size: 13px; }
.sidebar .profile-btn:hover, .mm-panel .profile-btn:hover { background: var(--fill); color: var(--label); }
/* Rodapé da coluna: 1,00:1 no claro — a tinta era branca da laje navy. */
.sidebar .sidebar-footer, .sidebar .sidebar-foot-text,
.mm-panel .sidebar-footer, .mm-panel .sidebar-foot-text { color: var(--label3) !important; }

/* ══ CAMPO SOLTO TINHA DE TUDO, MENOS TAMANHO ═══════════════════════════════
   A regra base do mundo dava borda, raio, cor e fonte a `input/select/textarea`
   — mas altura e padding só chegavam por `.form-field input`. Um campo fora de
   .form-field (a busca do price list no orçamento, o select de cargo, a busca
   da medição) nascia com 19px de altura e padding ZERO: o texto colado na
   borda de cima. Era a "caixa de pesquisa feia".

   A medida é a mesma que o resto do sistema usa, não uma nova. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
select,
.input {
  height: var(--control-h);
  padding: 0 12px;
  font-size: 13.5px;
  font-family: var(--sans);
}
textarea {
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: var(--sans);
  line-height: 1.5;
}
/* Campo dentro de linha de tabela é apertado de propósito: a linha tem 46px, e
   40px ali encostam nas bordas. Precisa empatar a especificidade da regra
   acima — `td input` sozinho perde para `input:not(...)`. */
td input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
td select { height: var(--control-h-sm); font-size: 13px; }

/* ══ O SELECT NATIVO ════════════════════════════════════════════════════════
   A seta do sistema operacional não acompanha tema nenhum: no escuro ela vinha
   preta sobre superfície escura. Trocada por uma desenhada, na tinta do tema —
   é a "caixa de seleção fora do padrão". */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select::-ms-expand { display: none; }

/* Quantidade que vem de memória de cálculo: travada, e dizendo isso. Sem a
   marca, um campo desabilitado parece defeito em vez de decisão. */
.orc-n-medida {
  background: var(--acento-suave);
  border-color: var(--acento-linha);
  color: var(--acento);
  font-weight: 700;
  cursor: help;
  opacity: 1;
}

/* Contador dentro da pílula de filtro — mesma gramática do badge da coluna. */
.fpill-n {
  margin-left: 7px; padding: 1px 7px; border-radius: 6px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--fill2); color: var(--label2);
}
/* Branco sobre branco-22% sobre o azul mede 3,6:1 — o mesmo defeito que já
   corrigi na coluna e nas etapas. Fundo cheio com tinta azul resolve. */
.fpill.active .fpill-n { background: #fff; color: var(--accent-solid); }

/* Contador da aba de etapa ATIVA: 2,25:1 no escuro, pela mesma receita de
   branco translúcido sobre o azul. É a terceira vez que este padrão aparece no
   sistema — coluna, etapa e filtro. Onde o fundo é a cor de ação, o contador
   é fundo cheio com tinta de ação. */
.stage-tab.active .stage-tab-n { background: #fff; color: var(--accent-solid); }

/* Linha de item que já virou compra dentro do formulário de cotação: fica visível para o
   comprador saber que ela existe, mas sem campo — o preço dela é passado, não proposta. */
.cot-item-locked {
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-s);
  background: var(--fill);
}
.cot-item-locked .ci-nome { flex: 1; min-width: 130px; font-weight: 700; color: var(--label2); }

/* Prévia do que o orçamento herda da OM, na tela de criação. Campo que a OM não
   tem aparece dito por extenso — vazio silencioso vira "—" no documento do
   cliente, e ninguém descobre até ele chegar lá. */
.orc-previa {
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  background: var(--fill);
  padding: 10px 12px;
}
.orc-previa-t {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--label3); margin-bottom: 7px;
}
.orc-previa-l { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 12.5px; }
.orc-previa-l + .orc-previa-l { border-top: 1px solid var(--hairline); }
.orc-previa-l b { flex: 0 0 86px; font-weight: 600; color: var(--label3); font-size: 11.5px; }
.orc-previa-l span { flex: 1; min-width: 0; font-weight: 600; color: var(--label); }
.orc-previa-l i { flex: 1; min-width: 0; font-style: normal; font-weight: 600; color: var(--orange); }