/*
 * data4all-dashboard :: style.css
 * ─────────────────────────────────────────────────────────────
 * Port do template v2 (aprovado pela equipe) com a paleta
 * EnvironBIT extraida do logo (ADR-003).
 *
 * Estrutura, layout e classes preservados do v2 — a mudanca esta
 * apenas em ':root', onde os tokens verdes originais foram
 * remapeados para os tokens laranja+navy institucionais. Todas as
 * classes '.kval.amber', '.kval.red' etc. continuam funcionando.
 *
 * Referencia: Storytelling com Dados (Knaflic)
 *   - cor para o que importa, cinza para o resto
 *   - decluttering: sem gridlines fortes, sem sombras decorativas
 *   - hierarquia clara: header > filtros > mapa/painel > legenda
 */

@import url('./tokens.css');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   TOKENS LOCAIS — REMAPEADOS PARA A PALETA ENVIRONBIT
   ============================================================
   Nomes das variaveis mantidos do v2 para que TODAS as classes
   originais (.chip.active, .kval.amber, .stbr-br etc.) continuem
   funcionando sem mudanca. Os valores agora apontam para os
   tokens do ADR-003.
   ============================================================ */
:root {
  /* Superficies (era verde-preto; agora navy-preto) */
  --bg:        var(--brand-navy-dark);   /* #1a2340 */
  --bg2:       #1f2a48;
  --bg3:       #263353;
  --bg4:       #303f61;

  /* Bordas */
  --border:    rgba(232, 236, 243, 0.08);
  --border2:   rgba(232, 236, 243, 0.14);
  --border3:   rgba(241, 113, 54, 0.35);   /* borda de destaque com halo laranja */

  /* Cor primaria (era verde forest; agora laranja marca) */
  --green:     var(--brand-orange);        /* #f17136 - foi remapeado */
  --green2:    var(--brand-orange-soft);   /* #f18d59 */
  --green3:    #d9612d;                     /* laranja mais escuro */
  --forest:    rgba(241, 113, 54, 0.25);    /* halo de fundo do laranja */

  /* Acentos categoricos remapeados */
  --amber:     #f59e0b;                     /* mantido - aviso institucional */
  --amber2:    #fbbf24;
  --blue:      var(--cat-rodovias);         /* #8ea3c4 - azul infra */
  --red:       #dc2626;                     /* alerta - severidade alta */
  --purple:    #a78bfa;                     /* mantido - incerteza (WVC std) */
  --teal:      #06b6d4;                     /* teal ajustado (mais azul) */
  --orange:    var(--brand-orange);         /* consistente com marca */

  /* Texto */
  --txt:       var(--brand-off-white);      /* #e8ecf3 */
  --txt2:      #b0bacd;                     /* secundario */
  --txt3:      var(--brand-orange-soft);
  --muted:     #7c8aa5;
  --muted2:    #9aa5bc;

  /* Tipografia (Source Sans 3 + Source Code Pro - identidade v2) */
  --font:      'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:      'Source Code Pro', 'SF Mono', Menlo, monospace;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LOADING
   ============================================================ */
#loading {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  transition: opacity .4s;
}
#loading.hide { opacity: 0; pointer-events: none; }
.load-spinner {
  width: 44px; height: 44px;
  border: 2px solid var(--border);
  border-top-color: var(--brand-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-title {
  color: var(--txt); font-size: 13px;
  letter-spacing: 0.5px; font-weight: 600;
}
#load-detail {
  color: var(--muted); font-size: 11px; font-family: var(--mono);
}

/* ============================================================
   HEADER
   ============================================================ */
#hdr {
  height: 60px;
  flex-shrink: 0;
  background: linear-gradient(90deg,
    var(--brand-navy-dark) 0%,
    #1e2947 50%,
    var(--brand-navy-dark) 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  box-shadow: 0 2px 20px rgba(0,0,0,.6);
  z-index: 500;
}
#hdr-logo {
  height: 38px; width: auto;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  padding: 3px;
}
.hdr-t h1 {
  font-family: var(--font-serif); /* usa serif dos tokens */
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-off-white);
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.hdr-t p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.hdr-kpis {
  display: flex;
  gap: 26px;
  align-items: center;
}
.hkpi { text-align: center; min-width: 62px; }
.hkpi-v {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-orange);
  line-height: 1;
}
.hkpi-v.amber { color: var(--amber); }
.hkpi-v.blue { color: var(--blue); }
.hkpi-v.purple { color: var(--purple); }
.hkpi-v.teal { color: var(--teal); }
.hkpi-l {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* usuario + logout no canto direito */
.hdr-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--muted2);
}
.hdr-user strong { color: var(--txt); font-weight: 600; }
.hdr-user button {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted2);
  padding: 5px 11px;
  font-family: var(--font);
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.hdr-user button:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* ============================================================
   BANNER DE MODO DEMO (dados sinteticos temporarios)
   ============================================================ */
#demo-banner {
  height: 28px;
  flex-shrink: 0;
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.10),
    rgba(245, 158, 11, 0.04));
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 11px;
}
#demo-banner[hidden] { display: none; }
.db-badge {
  background: var(--amber);
  color: #1a0f00;
  font-weight: 700;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.6px;
  font-family: var(--mono);
}
.db-msg { color: var(--amber2); }
.db-msg b { color: #fef3c7; font-weight: 600; }

/* ============================================================
   FILTER BAR
   ============================================================ */
#filter-bar {
  /* Altura auto para acomodar 1 ou 2 linhas conforme fase.
     Linha 1: identificadores de escopo (categoria, metrica, res, ecorregiao, ano, estado)
     Linha 2 (so quando chip Acidentes ativa): refinamentos (severidade, br, visualizacao) */
  min-height: 56px;
  flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 22px;
  padding: 10px 18px;
  z-index: 400;
}
.fb-block { display: flex; flex-direction: column; gap: 4px; }
.fb-block.fb-right { align-items: flex-end; }
.fb-spacer { flex: 1; }

/* Separador que quebra visualmente a linha 1 da linha 2 (refinamentos).
   Ocupa 100% da largura, forcando os proximos itens para nova linha.
   Fica invisivel na "borda" pra separar de forma discreta. */
.fb-row-break {
  flex-basis: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  margin: 2px 0 0;
}
.fb-row-break[hidden] { display: none !important; }

.fb-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.fb-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt2);
}

/* Chips (categoria) */
.fb-chips { display: flex; gap: 5px; }
.chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted2);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.chip:hover { color: var(--txt); border-color: var(--border2); }
.chip.active {
  background: rgba(241, 113, 54, 0.14);
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}
/* variantes coloridas por categoria (usando os cat-* dos tokens) */
.chip.active[data-cat='acidentes'] {
  background: rgba(201, 72, 22, 0.18);
  border-color: var(--cat-acidentes);
  color: var(--cat-acidentes);
}
.chip.active[data-cat='ambiental'] {
  background: rgba(42, 56, 87, 0.35);
  border-color: var(--cat-ambientais);
  color: var(--brand-off-white);
}
.chip.active[data-cat='rodoviaria'] {
  background: rgba(142, 163, 196, 0.15);
  border-color: var(--cat-rodovias);
  color: var(--cat-rodovias);
}

/* Segmented control (resolucao) */
.fb-seg {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* ── Badge estatica de resolucao H3 (Caminho A aprovado pela Milena) ──
   Substituiu o segmentado interativo apos descoberta de que RES 9
   nao renderiza no browser por volume (~400k hex/ecorregiao). O dado
   existe no PG e continua acessivel via query direta para analises
   focais em sub-recortes menores. */
.fb-res-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: help;
}
.fb-res-badge {
  background: rgba(241, 113, 54, 0.20);
  color: var(--brand-orange);
  border: 1px solid rgba(241, 113, 54, 0.3);
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.fb-res-note {
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  white-space: nowrap;
}
.fb-seg button {
  background: transparent;
  border: none;
  color: var(--muted2);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--mono);
  border-right: 1px solid var(--border);
  transition: all 0.15s;
}
.fb-seg button:last-child { border-right: none; }
.fb-seg button:hover { color: var(--txt); background: rgba(241, 113, 54, 0.05); }
.fb-seg button.active {
  background: rgba(241, 113, 54, 0.20);
  color: var(--brand-orange);
}

/* Select */
.fb-select {
  background: var(--bg);
  color: var(--txt);
  border: 1px solid var(--border);
  padding: 5px 10px;
  font-size: 11.5px;
  font-family: var(--font);
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  min-width: 150px;
}
.fb-select:hover { border-color: var(--border2); }
.fb-select:focus { border-color: var(--brand-orange); }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
}
#map-wrap {
  flex: 1;
  position: relative;
  background: var(--bg);
}
#map {
  width: 100%;
  height: 100%;
  background: var(--bg2);
}
.leaflet-container {
  background: var(--bg2) !important;
  font-family: var(--font) !important;
}
.leaflet-tile {
  filter: brightness(0.62) contrast(1.05) saturate(0.75);
}

#panel {
  width: 440px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(0,0,0,0.5);
  z-index: 300;
}

/* ============================================================
   TABS
   ============================================================ */
#tabs {
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tab {
  flex: 1;
  padding: 12px 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: var(--font);
}
.tab.active {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
  background: rgba(241, 113, 54, 0.05);
}
.tab:hover:not(.active) { color: var(--txt2); }

.tc {
  flex: 1;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
}
.tc.active { display: flex; }
.tc::-webkit-scrollbar { width: 4px; }
.tc::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.tc::-webkit-scrollbar-track { background: var(--bg); }

/* ============================================================
   COMPONENTES
   ============================================================ */
.card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px;
  flex-shrink: 0;
}
.card h4 {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Narrativa (frase-tese Knaflic) */
.narr {
  padding: 12px 14px;
  border-left: 2px solid var(--brand-orange);
  border-radius: 0 8px 8px 0;
  background: rgba(241, 113, 54, 0.08);
  font-size: 12px;
  line-height: 1.65;
  color: var(--txt);
}
.narr strong { color: var(--brand-off-white); font-weight: 600; }
.narr .num { color: var(--brand-orange); font-family: var(--mono); font-weight: 600; }

/* KPI grid 2x2 */
.kgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.kval {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-orange);
  line-height: 1;
}
.kval.amber { color: var(--amber); }
.kval.blue { color: var(--blue); }
.kval.purple { color: var(--purple); }
.kval.teal { color: var(--teal); }
.kval.red { color: var(--red); }
.kval.muted { color: var(--muted2); }
.klbl {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.2px;
}

/* Chart containers */
.cwrap { position: relative; }
.cwrap.h140 { height: 140px; }
.cwrap.h160 { height: 160px; }
.cwrap.h180 { height: 180px; }
.cwrap.h220 { height: 220px; }

.chart-hint {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
  font-style: italic;
}

/* Ranking */
.ritem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.ritem:hover {
  border-color: var(--border2);
  background: var(--bg2);
}
.ritem.top1 { border-left: 3px solid var(--brand-orange); }
.ritem.top2 { border-left: 3px solid var(--brand-orange-soft); }
.ritem.top3 { border-left: 3px solid #d9612d; }

.r-rank {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-width: 22px;
  font-weight: 700;
}
.r-body { flex: 1; overflow: hidden; }
.r-title {
  font-size: 11.5px;
  color: var(--txt);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  font-family: var(--mono);
}
.r-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-orange);
  text-align: right;
  min-width: 50px;
}
.r-bar {
  height: 3px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 5px;
}
.r-bar-fill {
  height: 100%;
  background: var(--brand-orange);
  border-radius: 2px;
}

/* Score sliders */
.score-sliders { display: flex; flex-direction: column; gap: 8px; }
.ss-row { display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; gap: 8px; }
.ss-lbl { font-size: 10.5px; color: var(--txt2); }
.ss-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--border2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.ss-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--brand-orange);
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--bg);
}
.ss-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  background: var(--brand-orange);
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--bg);
}
.ss-val {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--brand-orange);
  text-align: right;
}

/* Stats BR table */
.stats-br-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1fr;
  gap: 6px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  align-items: center;
}
.stats-br-row.hdr {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom-color: var(--border2);
}
.stats-br-row:last-child { border-bottom: none; }
.stats-br-row .stbr-br { font-family: var(--mono); color: var(--amber); font-weight: 600; }
.stats-br-row .stbr-v { font-family: var(--mono); color: var(--txt2); text-align: right; }

/* Heatmap horario x dia */
#heatmap-container {
  display: grid;
  grid-template-columns: 90px repeat(4, 1fr);
  gap: 3px;
  font-size: 10px;
}
.hm-cell {
  padding: 8px 4px;
  text-align: center;
  border-radius: 3px;
  color: var(--txt);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
}
.hm-lbl {
  padding: 8px 4px;
  color: var(--muted);
  font-size: 10px;
  display: flex;
  align-items: center;
}
.hm-lbl.hdr { color: var(--muted2); font-weight: 700; justify-content: center; text-transform: uppercase; letter-spacing: 0.3px; font-size: 9px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty-icon {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--border2);
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.empty-state p {
  font-size: 12px;
  line-height: 1.6;
}

/* Meta hexagono */
#hex-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
}
#hex-meta .m-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border);
}
#hex-meta .m-row:last-child { border-bottom: none; }
#hex-meta .m-k { color: var(--muted); }
#hex-meta .m-v { color: var(--txt); }

#hex-brs .brs-item {
  padding: 7px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 4px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}
.brs-item .brs-sig { color: var(--amber); font-family: var(--mono); font-weight: 600; }
.brs-item .brs-lbl { color: var(--muted); }

/* WVC card */
.wvc-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.wvc-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  text-align: center;
}
.wvc-kpi .wk-val {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.wvc-kpi .wk-val.high { color: var(--risk-5); }
.wvc-kpi .wk-val.med { color: var(--risk-3); }
.wvc-kpi .wk-val.low { color: var(--risk-1); }
.wvc-kpi .wk-val.std { color: var(--purple); }
.wvc-kpi .wk-lbl {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* ============================================================
   MAPA - LEGENDA E INFO BAR
   ============================================================ */
#leg {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(26, 35, 64, 0.92);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 200px;
  z-index: 1000;
  backdrop-filter: blur(6px);
}
.leg-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.leg-bar {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 5px;
  /* Gradiente padrao usa a escala de risco EnvironBIT do ADR-003 */
  background: linear-gradient(
    90deg,
    var(--risk-0) 0%,
    var(--risk-2) 33%,
    var(--risk-3) 66%,
    var(--risk-5) 100%
  );
}
.leg-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted2);
}
.leg-unit {
  margin-top: 4px;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.3px;
}

#map-info {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(26, 35, 64, 0.9);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--txt);
  z-index: 1000;
  backdrop-filter: blur(4px);
}
#map-info .sep { color: var(--muted); margin: 0 5px; }

/* Tooltip Leaflet - dark theme */
.leaflet-tooltip.lf-tip {
  background: rgba(26, 35, 64, 0.95) !important;
  border: 1px solid var(--border2) !important;
  color: var(--txt) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(6px);
}
.leaflet-tooltip.lf-tip::before { display: none; }
.leaflet-tooltip.lf-tip b { color: var(--brand-orange); }

/* Leaflet controls dark */
.leaflet-bar {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}
.leaflet-bar a {
  background: var(--bg2) !important;
  color: var(--txt2) !important;
  border-color: var(--border) !important;
}
.leaflet-bar a:hover {
  background: var(--bg3) !important;
  color: var(--brand-orange) !important;
}

.leaflet-control-attribution {
  background: rgba(26, 35, 64, 0.7) !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--brand-orange-soft) !important; }

/* ============================================================
   TELA DE LOGIN (mesma estetica do dashboard)
   ============================================================ */
body.login-body {
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%,
      rgba(241, 113, 54, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 70% 80%,
      rgba(42, 56, 87, 0.55) 0%, transparent 55%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 34px 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.login-brand img { width: 68px; height: 68px; object-fit: contain; }
.login-brand h1 {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--brand-off-white);
  letter-spacing: 0.02em;
  margin: 0;
}
.login-brand p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(241, 113, 54, 0.15);
}
.field input:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  background: var(--brand-orange);
  color: #fff;
  padding: 10px 16px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-orange-soft);
  box-shadow: 0 4px 14px rgba(241, 113, 54, 0.30);
  transform: translateY(-1px);
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.alert-error {
  padding: 10px 12px;
  border-radius: 5px;
  background: rgba(220, 38, 38, 0.10);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.30);
  font-size: 12px;
  line-height: 1.4;
}
.alert-error[hidden] { display: none; }

.login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* ============================================================
   PRINT (aba HEX printavel)
   ============================================================ */
@media print {
  #demo-banner, #hdr, #filter-bar, #tabs, #map-wrap, #leg, #map-info {
    display: none !important;
  }
  #panel { width: 100%; box-shadow: none; border-left: none; }
  body { background: white; color: black; height: auto; }
  .card, .narr { background: white; border-color: #ccc; color: black; break-inside: avoid; }
  .card h4, .klbl, .chart-hint { color: #555; }
  .kval { color: black; }
}

/* ============================================================
   POPUP DE ACIDENTES (Fase 2b.2.3)
   ============================================================
   Override do estilo default do Leaflet (que assume tema claro,
   com texto cinza-medio em fundo branco). Aqui usamos fundo
   escuro institucional + texto branco de alto contraste, para
   manter coerencia com o resto do dashboard e melhorar leitura
   quando o usuario abre popup sobre o mapa dark.
   ============================================================ */
.leaflet-popup.popup-acidente .leaflet-popup-content-wrapper {
  background: #1a2340;
  color: #f5f7fb;
  border: 1px solid #35435c;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
}
.leaflet-popup.popup-acidente .leaflet-popup-content {
  color: #f5f7fb;
  margin: 12px 14px;
  line-height: 1.4;
}
.leaflet-popup.popup-acidente .leaflet-popup-tip {
  background: #1a2340;
  border: 1px solid #35435c;
}
/* Codigo tecnico (tipo, causa em snake_case) mais legivel */
.leaflet-popup.popup-acidente code {
  background: rgba(241, 113, 54, 0.12);
  color: #ffbc8a;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}
/* Botao de fechar (X) legivel no fundo escuro */
.leaflet-popup.popup-acidente .leaflet-popup-close-button {
  color: #f5f7fb;
  font-size: 18px;
  padding: 4px 8px;
}
.leaflet-popup.popup-acidente .leaflet-popup-close-button:hover {
  color: #f17136;
  background: transparent;
}