/* ============================================================
   GESTÃO DE ROTAS — TEMA ESCURO (03/10/2026)

   Pedido do dono: "importa essa UI de sistema (Efferd dashboard,
   shadcn) para o gestão rotas, salva como um tema escuro". O app não é
   React e esta máquina não tem Node, então não entra shadcn nem Tailwind:
   entra o que define aquele visual — superfícies escuras chapadas, borda
   de 1px quase invisível, texto em três tons e cor só onde informa — por
   cima dos tokens que o app.css já tem.

   COMO FUNCIONA: o app.css desenha tudo com tokens (--bg-app, --surface,
   --border, --text-*). Aqui eles mudam de valor quando o <html> tem
   data-tema="escuro". Quem liga e desliga é o js/tema.js; a escolha fica
   no aparelho. O tema CLARO continua o padrão: vendedor no sol lê melhor
   no claro.

   O resto deste arquivo cobre o que NÃO passa por token: o Bootstrap
   5.1.3 (que ainda não tem modo escuro próprio e pinta #fff fixo), as 18
   regras do app.css com fundo claro fixo, a gaveta do mapa (CSS injetado
   pelo mapa-unificado.js) e os popups do MapLibre e do Leaflet.

   🔴 Tudo aqui começa com html[data-tema="escuro"]: sem o atributo, este
   arquivo não muda NADA no tema claro.
   ============================================================ */

/* ---------- tokens extras do pedido (Efferd), valem nos dois temas ---- */
:root {
    --info: oklch(0.623 0.214 259.815);
    --info-foreground: oklch(0.488 0.243 264.376);
    --success: oklch(0.696 0.17 162.48);
    --success-foreground: oklch(0.508 0.118 165.612);
    --warning: oklch(0.769 0.188 70.08);
    --warning-foreground: oklch(0.555 0.163 48.998);
    --destructive-foreground: oklch(0.505 0.213 27.518);

    /* vocabulário shadcn apontando para os tokens do app: componente novo
       no estilo shadcn usa estes nomes e já sai certo nos dois temas */
    --background: var(--bg-app);
    --foreground: var(--text-strong);
    --card: var(--surface);
    --card-foreground: var(--text-strong);
    --muted: var(--surface-muted);
    --muted-foreground: var(--text-muted);
    --border-shadcn: var(--border);
    --ring: var(--blue-500);

    /* selo azul-claro (#E8EEFC + texto azul) que o app.css repete em 9 regras */
    --selo-azul-bg: #E8EEFC;
    --selo-azul-tx: var(--blue-600);
}

html[data-tema="escuro"] {
    color-scheme: dark;           /* barra de rolagem, campo nativo, calendário */

    /* superfícies: navy quase preto, para não perder a identidade do app */
    --bg-app: #0A0F1C;
    --surface: #10172A;
    --surface-muted: #151E33;
    --border: #222C44;
    --border-strong: #2E3A57;

    /* texto em três tons (contraste medido contra --surface: ver o fim) */
    --text-strong: #F2F5FB;
    --text-body: #C9D1E3;
    --text-muted: #9AA6C2;
    --text-faint: #7A88A8;

    /* tons "soft" viram a mesma cor, transparente, sobre o escuro */
    --laranja-soft: rgba(255, 138, 30, .14);
    --green-soft: rgba(16, 185, 129, .15);
    --red-soft: rgba(244, 63, 94, .15);
    --amber-soft: rgba(245, 158, 11, .15);
    --violet-soft: rgba(139, 92, 246, .17);

    --selo-azul-bg: rgba(59, 130, 246, .16);
    --selo-azul-tx: #9CBCFF;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);

    /* tokens do pedido, versão escura */
    --destructive-foreground: oklch(0.704 0.191 22.216);
    --info-foreground: oklch(0.707 0.165 254.624);
    --success-foreground: oklch(0.765 0.177 163.223);
    --warning-foreground: oklch(0.828 0.189 84.429);

    /* Bootstrap 5.1 lê estes dois no body */
    --bs-body-bg: var(--bg-app);
    --bs-body-color: var(--text-body);
}

/* ---------- app.css: as 18 regras com fundo claro fixo ----------------- */
html[data-tema="escuro"] .topbar {
    background: linear-gradient(var(--bg-app) 82%, rgba(10, 15, 28, 0));
}
html[data-tema="escuro"] .count-chip,
html[data-tema="escuro"] .pill.blue,
html[data-tema="escuro"] .rota-auto-badge,
html[data-tema="escuro"] .coord-badge.cidade,
html[data-tema="escuro"] .rota-badge.cidades,
html[data-tema="escuro"] .cidade-cliente-count,
html[data-tema="escuro"] .cliente-ultima-ligacao,
html[data-tema="escuro"] .badge-gps,
html[data-tema="escuro"] .city-count-badge {
    background: var(--selo-azul-bg);
    color: var(--selo-azul-tx);
    border-color: rgba(59, 130, 246, .28);
}
html[data-tema="escuro"] .city-item.selected { background: var(--selo-azul-bg); }
html[data-tema="escuro"] .icon-btn:hover,
html[data-tema="escuro"] .upload-area:hover {
    background: var(--selo-azul-bg);
    color: var(--selo-azul-tx);
}
html[data-tema="escuro"] .search-field input:focus,
html[data-tema="escuro"] .gps-search-box input[type="text"]:focus,
html[data-tema="escuro"] .search-city-input:focus,
html[data-tema="escuro"] .cliente-edit-form input,
html[data-tema="escuro"] .cliente-edit-form select {
    background: var(--surface-muted);
    color: var(--text-strong);
}
html[data-tema="escuro"] .login-demo code,
html[data-tema="escuro"] .sv-aviso code {
    background: var(--surface-muted);
    color: var(--text-strong);
}

/* ---------- Bootstrap 5.1.3 (pinta #fff fixo nos componentes) ---------- */
html[data-tema="escuro"] body { background: var(--bg-app); color: var(--text-body); }

html[data-tema="escuro"] .card,
html[data-tema="escuro"] .modal-content,
html[data-tema="escuro"] .dropdown-menu,
html[data-tema="escuro"] .list-group-item,
html[data-tema="escuro"] .offcanvas,
html[data-tema="escuro"] .popover,
html[data-tema="escuro"] .accordion-item,
html[data-tema="escuro"] .accordion-button,
html[data-tema="escuro"] .page-link,
html[data-tema="escuro"] .toast {
    background-color: var(--surface);
    color: var(--text-body);
    border-color: var(--border);
}
html[data-tema="escuro"] .accordion-button:not(.collapsed) {
    background-color: var(--surface-muted);
    color: var(--text-strong);
}
html[data-tema="escuro"] .card-header,
html[data-tema="escuro"] .card-footer,
html[data-tema="escuro"] .modal-header,
html[data-tema="escuro"] .modal-footer,
html[data-tema="escuro"] .toast-header {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text-strong);
}
html[data-tema="escuro"] .modal-title,
html[data-tema="escuro"] .card-title,
html[data-tema="escuro"] h1, html[data-tema="escuro"] h2, html[data-tema="escuro"] h3,
html[data-tema="escuro"] h4, html[data-tema="escuro"] h5, html[data-tema="escuro"] h6 {
    color: var(--text-strong);
}
html[data-tema="escuro"] .modal-backdrop.show { opacity: .7; }

/* o X do Bootstrap é um SVG preto em background-image */
html[data-tema="escuro"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

html[data-tema="escuro"] .dropdown-item { color: var(--text-body); }
html[data-tema="escuro"] .dropdown-item:hover,
html[data-tema="escuro"] .dropdown-item:focus { background-color: var(--surface-muted); color: var(--text-strong); }
html[data-tema="escuro"] .dropdown-divider { border-color: var(--border); }

/* campos: fonte nunca abaixo de 16px é regra do app.css, aqui só a cor */
html[data-tema="escuro"] .form-control,
html[data-tema="escuro"] .form-select,
html[data-tema="escuro"] .input-group-text {
    background-color: var(--surface-muted);
    color: var(--text-strong);
    border-color: var(--border-strong);
}
html[data-tema="escuro"] .form-control:focus,
html[data-tema="escuro"] .form-select:focus {
    background-color: var(--surface-muted);
    color: var(--text-strong);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .3);
}
html[data-tema="escuro"] .form-control::placeholder { color: var(--text-faint); opacity: 1; }
html[data-tema="escuro"] .form-control:disabled,
html[data-tema="escuro"] .form-control[readonly],
html[data-tema="escuro"] .form-select:disabled {
    background-color: var(--bg-app);
    color: var(--text-muted);
}
/* a seta do select do Bootstrap é um SVG escuro: troca por uma clara */
html[data-tema="escuro"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C9D1E3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-tema="escuro"] .form-select option { background: var(--surface); color: var(--text-strong); }
html[data-tema="escuro"] .form-check-input {
    background-color: var(--surface-muted);
    border-color: var(--border-strong);
}
html[data-tema="escuro"] .form-check-input:checked { background-color: var(--blue-500); border-color: var(--blue-500); }
html[data-tema="escuro"] .form-label,
html[data-tema="escuro"] label { color: var(--text-body); }

html[data-tema="escuro"] .table {
    color: var(--text-body);
    border-color: var(--border);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--text-body);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--text-strong);
    --bs-table-active-bg: rgba(255, 255, 255, .07);
}
html[data-tema="escuro"] .table > :not(caption) > * > * { border-bottom-color: var(--border); }
html[data-tema="escuro"] .table-light,
html[data-tema="escuro"] .table-light > * > * {
    --bs-table-bg: var(--surface-muted);
    color: var(--text-strong);
    border-color: var(--border);
}

html[data-tema="escuro"] .btn-light {
    background-color: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text-strong);
}
html[data-tema="escuro"] .btn-light:hover { background-color: var(--border); color: var(--text-strong); }
html[data-tema="escuro"] .btn-outline-secondary,
html[data-tema="escuro"] .btn-outline-dark {
    color: var(--text-body);
    border-color: var(--border-strong);
}
html[data-tema="escuro"] .btn-outline-secondary:hover,
html[data-tema="escuro"] .btn-outline-dark:hover {
    background-color: var(--surface-muted);
    color: var(--text-strong);
}
html[data-tema="escuro"] .btn-outline-primary { color: #8DB2FF; border-color: rgba(59, 130, 246, .55); }

/* utilitários do Bootstrap usam !important: só !important vence */
html[data-tema="escuro"] .bg-white { background-color: var(--surface) !important; }
html[data-tema="escuro"] .bg-light { background-color: var(--surface-muted) !important; }
html[data-tema="escuro"] .text-dark { color: var(--text-strong) !important; }
html[data-tema="escuro"] .text-muted,
html[data-tema="escuro"] .text-secondary { color: var(--text-muted) !important; }
html[data-tema="escuro"] .text-primary { color: #8DB2FF !important; }
html[data-tema="escuro"] .border,
html[data-tema="escuro"] .border-top,
html[data-tema="escuro"] .border-bottom,
html[data-tema="escuro"] .border-start,
html[data-tema="escuro"] .border-end { border-color: var(--border) !important; }
html[data-tema="escuro"] .badge.bg-light { color: var(--text-strong) !important; }
html[data-tema="escuro"] hr { color: var(--border-strong); opacity: 1; }
html[data-tema="escuro"] .progress { background-color: var(--surface-muted); }

html[data-tema="escuro"] .nav-tabs { border-color: var(--border); }
html[data-tema="escuro"] .nav-tabs .nav-link { color: var(--text-muted); }
html[data-tema="escuro"] .nav-tabs .nav-link.active {
    background-color: var(--surface);
    color: var(--text-strong);
    border-color: var(--border) var(--border) var(--surface);
}

/* alertas: fundo escuro tingido, texto claro da mesma família */
html[data-tema="escuro"] .alert-info    { background: rgba(14, 165, 233, .13); border-color: rgba(14, 165, 233, .35); color: #9FDDFB; }
html[data-tema="escuro"] .alert-success { background: rgba(16, 185, 129, .13); border-color: rgba(16, 185, 129, .35); color: #8EE5C3; }
html[data-tema="escuro"] .alert-warning { background: rgba(245, 158, 11, .13); border-color: rgba(245, 158, 11, .35); color: #FBD58A; }
html[data-tema="escuro"] .alert-danger  { background: rgba(244, 63, 94, .13);  border-color: rgba(244, 63, 94, .35);  color: #FDA9B8; }
html[data-tema="escuro"] .alert-secondary,
html[data-tema="escuro"] .alert-light   { background: var(--surface-muted); border-color: var(--border); color: var(--text-body); }

/* ---------- gaveta do mapa (CSS injetado por js/mapa-unificado.js) ----- */
html[data-tema="escuro"] .mu-palco { --mu-g-borda: var(--border); }
html[data-tema="escuro"] .mu-gaveta,
html[data-tema="escuro"] .mu-pop,
html[data-tema="escuro"] .mu-acoes .btn,
html[data-tema="escuro"] .mu-pop .lista-rota button,
html[data-tema="escuro"] .mu-form-rota .mu-acoes button {
    background: var(--surface);
    color: var(--text-body);
    border-color: var(--border);
}
html[data-tema="escuro"] .mu-pop .lista-rota button:hover { background: var(--surface-muted); }
html[data-tema="escuro"] .mu-pop .mu-nova {
    background: var(--selo-azul-bg);
    border-color: rgba(59, 130, 246, .45);
    color: var(--selo-azul-tx);
}
html[data-tema="escuro"] .mu-form-rota .mu-acoes .mu-ok { background: #2B59C3; border-color: #2B59C3; color: #fff; }
html[data-tema="escuro"] .mu-pop .mu-bt-clis { color: var(--selo-azul-tx); }
html[data-tema="escuro"] .mu-form-rota label,
html[data-tema="escuro"] .mu-pop h6 { color: var(--text-strong); }
html[data-tema="escuro"] .mu-form-rota .mu-clis { border-color: var(--border); }
html[data-tema="escuro"] .mu-form-rota .mu-clis label { border-color: var(--border); color: var(--text-body); }
html[data-tema="escuro"] .mu-form-rota input[type=text] {
    background: var(--surface-muted);
    color: var(--text-strong);
    border-color: var(--border-strong);
}
html[data-tema="escuro"] .mu-alca span { background: var(--border-strong); }
html[data-tema="escuro"] .mu-alca:hover span { background: var(--text-faint); }
html[data-tema="escuro"] .mu-estilos { background: var(--bg-app); }
html[data-tema="escuro"] .mu-estilos button { color: var(--text-muted); }
html[data-tema="escuro"] .mu-estilos button.active {
    background: var(--surface-muted);
    color: var(--text-strong);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
html[data-tema="escuro"] .mu-lado > .mu-bloco { background: var(--surface-muted); border-color: var(--border); }
html[data-tema="escuro"] .mu-resumo {
    background: rgba(255, 138, 30, .1);
    border-color: rgba(255, 138, 30, .3);
    border-left-color: #FF8A1E;
    color: var(--text-body);
}
html[data-tema="escuro"] .mu-resumo b { color: var(--text-strong); }
html[data-tema="escuro"] .mu-chip { background: var(--surface-muted); color: var(--text-body); }
html[data-tema="escuro"] .mu-chip.ok { background: var(--green-soft); color: #7FE0BB; }
html[data-tema="escuro"] .mu-chip.alerta { background: var(--amber-soft); color: #F8C873; }
html[data-tema="escuro"] .mu-nota { color: var(--text-muted); }

/* ---------- MapLibre: popup, controles, atribuição, escala ------------- */
html[data-tema="escuro"] .maplibregl-popup-content {
    background: var(--surface);
    color: var(--text-body);
    box-shadow: var(--shadow-md);
}
html[data-tema="escuro"] .maplibregl-popup-content strong,
html[data-tema="escuro"] .maplibregl-popup-content b { color: var(--text-strong); }
html[data-tema="escuro"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html[data-tema="escuro"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html[data-tema="escuro"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
html[data-tema="escuro"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html[data-tema="escuro"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html[data-tema="escuro"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
html[data-tema="escuro"] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
html[data-tema="escuro"] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
html[data-tema="escuro"] .maplibregl-popup-close-button { color: var(--text-muted); }
html[data-tema="escuro"] .maplibregl-ctrl-group { background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
html[data-tema="escuro"] .maplibregl-ctrl-group button + button { border-top-color: var(--border); }
html[data-tema="escuro"] .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
html[data-tema="escuro"] .maplibregl-ctrl-attrib { background: rgba(10, 15, 28, .72); color: var(--text-muted); }
html[data-tema="escuro"] .maplibregl-ctrl-attrib a { color: var(--text-body); }
html[data-tema="escuro"] .maplibregl-ctrl-scale {
    background: rgba(10, 15, 28, .72);
    border-color: var(--text-muted);
    color: var(--text-body);
}

/* ---------- Leaflet (aba GPS antiga e roteamento) ----------------------- */
html[data-tema="escuro"] .leaflet-popup-content-wrapper,
html[data-tema="escuro"] .leaflet-popup-tip {
    background: var(--surface);
    color: var(--text-body);
}
html[data-tema="escuro"] .leaflet-bar a {
    background: var(--surface);
    color: var(--text-strong);
    border-color: var(--border);
}
html[data-tema="escuro"] .leaflet-control-attribution { background: rgba(10, 15, 28, .72) !important; color: var(--text-muted); }
html[data-tema="escuro"] .leaflet-control-attribution a { color: var(--text-body); }
html[data-tema="escuro"] .leaflet-routing-container {
    background: var(--surface);
    color: var(--text-body);
    box-shadow: var(--shadow-md);
}
html[data-tema="escuro"] .leaflet-routing-alt tr:hover { background: var(--surface-muted); }

/* ---------- achados da VARREDURA medida (03/10) --------------------------
   Duas passadas pelas 14 páginas no escuro: (1) todo elemento visível com
   fundo claro, (2) todo texto/ícone com contraste < 3:1 contra o fundo
   real. O que segue é exatamente o que elas acharam. Contraste medido de
   cada cor nova: verde 9,33 · ciano 8,68 · verde-selo 8,92 · botão do
   meio 6,38 · btn-secondary 15,20. */
html[data-tema="escuro"] .mobile-menu-btn { color: var(--text-strong); }   /* era navy-800: 1,09:1 */
html[data-tema="escuro"] .btn-secondary {
    background: var(--surface-muted);
    color: var(--text-strong);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
html[data-tema="escuro"] .btn-secondary:hover { background: var(--border); color: var(--text-strong); }
html[data-tema="escuro"] .pill.gray { background: var(--surface-muted); color: var(--text-muted); }
html[data-tema="escuro"] .bot-status.online { background: rgba(14, 165, 233, .14); color: #7DD3FC; }
/* app.js põe este selo com style inline (#d4edda): só !important vence */
/* style.cssText do app.js:1360 regrava a cor como rgb(212, 237, 218) */
html[data-tema="escuro"] .cidade-cliente-count[style*="d4edda"],
html[data-tema="escuro"] .cidade-cliente-count[style*="212, 237, 218"] {
    background: var(--green-soft) !important;
    color: #7FE0BB !important;
}
/* barra de baixo do celular (CSS injetado por js/barra-baixo.js) */
html[data-tema="escuro"] #bb-barra {
    background: var(--surface);
    border-top-color: var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .45);
}
html[data-tema="escuro"] #bb-barra button { color: var(--text-muted); }
html[data-tema="escuro"] #bb-barra button.bb-sel,
html[data-tema="escuro"] #bb-barra .bb-meio span { color: #4FD1A5; }
/* busca de lugares (CSS injetado por js/busca-lugares.js) */
html[data-tema="escuro"] .bl-linha {
    background: var(--surface-muted);
    border-color: var(--border-strong);
    color: var(--text-strong);
}
html[data-tema="escuro"] .bl-linha:focus-within { background: var(--surface-muted); }
html[data-tema="escuro"] .bl-linha input { color: var(--text-strong); background: transparent; }
/* contador da base da Receita (CSS injetado por js/base-lojas-ui.js) */
html[data-tema="escuro"] #blu-card .blu-num b,
html[data-tema="escuro"] .blu-ok { color: #4FD1A5; }

/* ---------- link do Google Maps: o verde do Bootstrap fica, só a borda ---- */
html[data-tema="escuro"] .gm-link { border-color: rgba(255, 255, 255, .12); }

/* ---------- troca suave de tema (só cor, nunca layout) ------------------- */
html.tema-trocando,
html.tema-trocando * {
    transition: background-color .25s ease, border-color .25s ease, color .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html.tema-trocando, html.tema-trocando * { transition: none !important; }
}

/* Contraste MEDIDO (WCAG 2, 03/10). Mínimo AA para texto normal: 4,5.
                     sobre --surface   sobre --bg-app   sobre --surface-muted
   --text-strong         16,32             17,51             15,20
   --text-body           11,64             12,49             10,84
   --text-muted           7,31              7,84              6,80
   --text-faint           5,02              5,39              4,67  (pior caso: placeholder)
   selo azul 7,66 · alertas 8,70 a 10,31 · chips 8,92 · resumo da rota 10,11.
   Cor nova que entrar aqui: medir antes, não chutar. */