/* TEMA "ASFALTO E SINAL" — SISTEMA DO LOCADOR (08/10/2026, aprovado pelo dono na prévia).
   Carregado DEPOIS de tema-locapronto.css: troca as variáveis daquele tema (marinho e vermelho)
   pelo grafite e verde-limão e acerta o texto dos botões principais. Nenhuma estrutura muda.
   Para desfazer: apagar o <link ... tema-asfalto-sistema.css> do public/index.html. */
:root {
  --la-grafite: #0E1A24;
  --la-grafite-2: #1B2A36;
  --la-grafite-3: #22323F;
  --la-sinal: #D4F04A;
  --la-sinal-hover: #C3DE3A;
  --la-sinal-texto: #3E5200;
  --la-chao: #F3F5F2;
  --la-linha: #DDE3DE;
  --la-suave: #52606B;
  --la-atraso: #B42318;

  /* variáveis do tema anterior passam a apontar para a paleta nova */
  --lp-navy: var(--la-grafite);
  --lp-navy-2: var(--la-grafite);
  --lp-navy-3: var(--la-grafite-3);
  --lp-vermelho: var(--la-sinal-texto);
  --lp-vermelho-hover: #2F3F00;
  --lp-vermelho-suave: rgba(212, 240, 74, 0.14);
  --lp-verde: #1F7A4D;
  --lp-verde-claro: #2E9A62;
  --lp-fundo: var(--la-chao);
  --lp-borda: var(--la-linha);
  --lp-texto: var(--la-grafite);
  --lp-suave: var(--la-suave);
  --amr-roxo: var(--la-grafite);
  --amr-roxo-escuro: #000;
  --amr-foco: 0 0 0 3px rgba(212, 240, 74, 0.6);
  --lcf-violeta: var(--la-grafite);
  --lcf-fonte: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --lcf-fonte-num: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --la-fonte-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
}

html body { font-family: var(--lcf-fonte); }
html body h1, html body h2, html body .lista-card-cabecalho h3, html body .form-card h2 {
  font-family: var(--la-fonte-titulo); letter-spacing: -0.01em;
}

/* Barra lateral: grafite liso, item ativo com marca verde-limão */
html body .sidebar { background: var(--la-grafite) !important; box-shadow: none !important; }
html body .sidebar-menu li.active { background: rgba(212, 240, 74, 0.12) !important; color: #fff !important; }
html body .sidebar-menu li.active::before { background: var(--la-sinal) !important; }

/* Botão principal (criar, salvar): verde-limão com texto grafite */
html body .btn-novo,
html body .btn-salvar {
  background: var(--la-sinal) !important;
  color: var(--la-grafite) !important;
  border: 1px solid var(--la-sinal) !important;
  font-weight: 700 !important;
}
html body .btn-novo:hover,
html body .btn-salvar:hover { background: var(--la-sinal-hover) !important; border-color: var(--la-sinal-hover) !important; }
html body .btn-editar { background: var(--la-grafite) !important; border-color: var(--la-grafite) !important; color: #fff !important; }
html body .btn-excluir { color: var(--la-atraso) !important; border-color: #F2C4BE !important; }

/* Campos e foco */
html body .form-group input:focus,
html body .form-group select:focus,
html body .form-group textarea:focus { border-color: var(--la-grafite) !important; box-shadow: var(--amr-foco) !important; }

/* Filtros em pílula: o ativo fica grafite */
html body .cob-chip.ativo { background: var(--la-grafite) !important; border-color: var(--la-grafite) !important; color: #fff !important; }

/* Placas e números */
html body .lcf-placa, html body .cob-placa { font-family: var(--lcf-fonte-num) !important; }

/* Tela de entrada */
html body .login-overlay { background: var(--la-grafite) !important; }

/* Peças que ainda vinham em roxo no CSS da própria página */
html body .form-card.recolhivel > h2::after { color: var(--la-grafite) !important; background: #E6EBE6 !important; }
html body details.veic-ajuda summary,
html body .veic-sit-card details summary,
html body .ficha-cnh-lida summary::before { color: var(--la-sinal-texto) !important; }
html body .form-section-title { color: var(--la-grafite) !important; border-color: var(--la-linha) !important; }
html body .filtro-chip.ativo,
html body .ficha-chip.ativo { background: var(--la-grafite) !important; border-color: var(--la-grafite) !important; color: #fff !important; }
html body .passos-barra > span { background: var(--la-sinal) !important; }
html body .dropzone:hover { border-color: var(--la-grafite) !important; background: #F7F9F6 !important; }
html body .ficha-anexar { border-color: var(--la-linha) !important; color: var(--la-grafite) !important; }
html body .ficha-ler-cnh:hover { border-color: var(--la-grafite) !important; }
html body .campo-busca input:focus { border-color: var(--la-grafite) !important; box-shadow: var(--amr-foco) !important; }
html body input:checked + .chave-switch-slider { background: var(--la-grafite) !important; }

/* Cores roxas escritas direto no HTML (style="…") */
html body [style*="color:#7c3aed"], html body [style*="color: #7c3aed"],
html body [style*="color:#6d28d9"], html body [style*="color: #6d28d9"],
html body [style*="color:#4c1d95"], html body [style*="color: #4c1d95"] { color: var(--la-sinal-texto) !important; }
html body [style*="background:#7c3aed"], html body [style*="background: #7c3aed"],
html body [style*="background:#6d28d9"], html body [style*="background: #6d28d9"] { background: var(--la-grafite) !important; }
html body [style*="background:#ede9fe"], html body [style*="background: #ede9fe"],
html body [style*="background:#f5f3ff"], html body [style*="background: #f5f3ff"] { background: #EEF1ED !important; }

/* ---------- Painel do dia no formato da prévia (08/10/2026) ---------- */
html body #view-hoje .header-title { font-family: var(--la-fonte-titulo); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.03em; }
html body .painel-dia-numeros > .stat-card:first-child { background: var(--la-grafite) !important; border-color: var(--la-grafite) !important; }
html body .painel-dia-numeros > .stat-card:first-child .valor { color: var(--la-sinal) !important; }
html body .painel-dia-numeros > .stat-card:first-child .rotulo,
html body .painel-dia-numeros > .stat-card:first-child div { color: #C9D3DA !important; }
html body .painel-dia-numeros > .stat-card:first-child .valor { color: var(--la-sinal) !important; }
html body .painel-dia-numeros .stat-card .valor { font-family: var(--la-fonte-titulo); letter-spacing: -0.02em; }
.pd-linha-dupla { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 18px; }
.pd-precisa { flex: 3 1 320px; min-width: 0; background: var(--la-grafite); color: #fff; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; }
.pd-frota { flex: 2 1 260px; min-width: 0; background: #fff; border: 1px solid var(--la-linha); border-radius: 16px; padding: 16px 18px; }
.pd-precisa h2, .pd-frota h2 { margin: 0 0 10px; font-family: var(--la-fonte-titulo); font-size: 1.1rem; font-weight: 700; }
.pd-precisa h2 { color: #fff; }
.pd-pendencia { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 0; background: none; border: 0; border-top: 1px solid var(--la-grafite-3); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.pd-pendencia:hover .pd-pendencia-acao, .pd-pendencia:focus-visible .pd-pendencia-acao { text-decoration: underline; }
.pd-pendencia:focus-visible { outline: 2px solid var(--la-sinal); outline-offset: 2px; }
.pd-pendencia-acao { color: var(--la-sinal); font-weight: 700; white-space: nowrap; }
.pd-tudo-certo { margin: 6px 0 0; color: #C9D3DA; }
.pd-frota .pd-tudo-certo { color: var(--la-suave); }
.pd-frota-barra { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; background: #EEF1ED; }
.pd-frota-fatia.locado { background: var(--la-grafite); }
.pd-frota-fatia.disponivel { background: var(--la-sinal); }
.pd-frota-fatia.parado { background: #C9D3DA; }
.pd-frota-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pd-frota-numeros b { display: block; font-family: var(--la-fonte-titulo); font-size: 1.6rem; font-weight: 800; color: var(--la-grafite); font-variant-numeric: tabular-nums; }
.pd-frota-numeros span { font-size: 0.85rem; color: var(--la-suave); }
html body .painel-dia-numeros > .stat-card .valor { color: var(--la-grafite) !important; }
html body .painel-dia-numeros > .stat-card:first-child .valor { color: var(--la-sinal) !important; }
html body #view-hoje .top-bar .btn-novo { background: #fff !important; color: var(--la-grafite) !important; border: 1px solid var(--la-linha) !important; width: auto !important; max-width: 200px !important; flex: 0 0 auto; }
html body #view-hoje .top-bar .btn-novo:hover { background: #EEF1ED !important; }

/* ---------- Cobranças: três cartões do topo no formato da prévia (08/10/2026) ---------- */
html body .cob-resumo.cob-resumo-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
html body .cob-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--la-linha) !important; border-radius: 14px; padding: 14px 16px; min-height: 44px; }
html body .cob-cartao .cob-kpi-rot { order: 0; font-size: 0.8rem; color: var(--la-suave); text-transform: none; letter-spacing: 0; }
html body .cob-cartao .cob-kpi-num { font-family: var(--la-fonte-titulo); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--la-grafite) !important; font-variant-numeric: tabular-nums; }
html body .cob-cartao-sub { font-size: 0.82rem; color: var(--la-suave); }
html body .cob-cartao.cob-kpi--ok { background: var(--la-grafite); border-color: var(--la-grafite) !important; }
html body .cob-cartao.cob-kpi--ok .cob-kpi-num { color: var(--la-sinal) !important; }
html body .cob-cartao.cob-kpi--ok .cob-kpi-rot, html body .cob-cartao.cob-kpi--ok .cob-cartao-sub { color: #C9D3DA; }
html body .cob-cartao.cob-kpi--vencido { border-left: 4px solid var(--la-atraso) !important; }
html body .cob-cartao:hover { border-color: var(--la-grafite) !important; }
html body .cob-cartao:focus-visible { outline: 2px solid var(--la-grafite); outline-offset: 2px; }
html body .cob-cartao.ativo { box-shadow: 0 0 0 3px var(--la-sinal); }
@media (max-width: 640px) {
  html body .cob-resumo.cob-resumo-3 { grid-template-columns: 1fr !important; gap: 8px; }
  html body .cob-cartao { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 12px 14px; }
  html body .cob-cartao .cob-kpi-rot { flex: 1 0 100%; }
  html body .cob-cartao .cob-kpi-num { font-size: 1.3rem; }
}

/* ---------- Barra de baixo do celular no formato da prévia (08/10/2026) ---------- */
@media (max-width: 980px) {
  html body #mobileNav { background: #fff !important; border-top: 1px solid var(--la-linha) !important; box-shadow: 0 -4px 14px rgba(14, 26, 36, 0.06) !important; }
  html body #mobileNav button { color: var(--la-suave) !important; font-weight: 700; border-radius: 12px; }
  html body #mobileNav button.ativo { color: var(--la-grafite) !important; background: #EEF1ED !important; box-shadow: inset 0 3px 0 var(--la-sinal); }
  html body #mobileNav button:focus-visible { outline: 2px solid var(--la-grafite); outline-offset: 1px; }
}