/* ─── Dashboard Analítico — Terceira Paleta ───────────────────────────────
   Neutros + acento azul-ardósia (#5a7fa8). Distinto do principal (bronze)
   e do TV (ciano). Escopo: .dash-wrap e seletores prefixados com .dash-
────────────────────────────────────────────────────────────────────────── */

/* ── Variáveis ─────────────────────────────────────────────────────────── */
.dash-wrap {
  --da-bg:           #f0f2f5;
  --da-panel:        #ffffff;
  --da-border:       #dde2ea;
  --da-text:         #2d3748;
  --da-text-muted:   #718096;
  --da-accent:       #5a7fa8;
  --da-accent-d:     #3d6491;
  --da-accent-bg:    #eef3f8;
  --da-shadow:       0 1px 4px rgba(45,55,72,.10);
  --da-shadow-md:    0 3px 10px rgba(45,55,72,.13);
  --da-radius:       8px;
  --da-bar:          #5a7fa8;
  --da-bar-hover:    #3d6491;
  --da-cia1:         #5a7fa8;
  --da-cia2:         #5a9e82;
  --da-cia3:         #9e8b5a;
  --da-cia4:         #9e5a7a;
  --da-ciaem:        #7a8090;
  font-family: inherit;
}

/* ── Layout base ───────────────────────────────────────────────────────── */
.dash-wrap {
  background: var(--da-bg);
  min-height: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* ── Cabeçalho da tela ─────────────────────────────────────────────────── */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  background: var(--da-panel);
  border-bottom: 2px solid var(--da-accent);
  position: sticky;
  top: 0;
  z-index: 10;
}
.dash-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--da-accent);
  letter-spacing: .03em;
}
.dash-header-actions { display: flex; gap: 8px; align-items: center; }

/* ── Botão Apresentação ────────────────────────────────────────────────── */
.btn-dash-apresentacao {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--da-accent);
  color: #fff;
  border: none; border-radius: 6px;
  font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .18s;
}
.btn-dash-apresentacao:hover { background: var(--da-accent-d); }
.btn-dash-apresentacao svg { flex-shrink: 0; }

/* ── Botão Transmitir (Google Cast) ────────────────────────────────────── */
.btn-dash-cast {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: transparent; color: var(--da-accent);
  border: 1px solid var(--da-accent); border-radius: 6px;
  font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .18s, color .18s;
}
.btn-dash-cast:hover     { background: var(--da-accent); color: #fff; }
.btn-dash-cast:disabled  { opacity: .5; cursor: default; }
.btn-dash-cast svg { flex-shrink: 0; }
.btn-dash-cast[hidden]   { display: none; }

/* ── Filtros ───────────────────────────────────────────────────────────── */
.dash-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px 20px;
  background: var(--da-panel);
  border-bottom: 1px solid var(--da-border);
}
.dash-filtro-grupo { display: flex; flex-direction: column; gap: 3px; }
.dash-filtro-grupo label {
  font-size: .72rem; font-weight: 600;
  color: var(--da-text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.dash-filtros select,
.dash-filtros input[type="date"] {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--da-border);
  border-radius: 6px;
  background: var(--da-bg);
  color: var(--da-text);
  font-size: .82rem;
  text-transform: none;
  outline: none;
  transition: border-color .15s;
}
.dash-filtros select:focus,
.dash-filtros input[type="date"]:focus { border-color: var(--da-accent); }
.dash-filtros select { min-width: 130px; }
.dash-filtros input[type="date"] { min-width: 130px; }
.dash-filtro-periodo { display: flex; align-items: flex-end; gap: 6px; }
.dash-filtro-periodo span {
  font-size: .78rem; color: var(--da-text-muted); padding-bottom: 6px;
}
.dash-filtro-btns { display: flex; gap: 6px; }
.btn-dash-aplicar {
  height: 32px; padding: 0 16px;
  background: var(--da-accent); color: #fff;
  border: none; border-radius: 6px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-dash-aplicar:hover { background: var(--da-accent-d); }
.btn-dash-limpar {
  height: 32px; padding: 0 14px;
  background: transparent; color: var(--da-text-muted);
  border: 1px solid var(--da-border); border-radius: 6px;
  font-size: .82rem; cursor: pointer; transition: all .15s;
}
.btn-dash-limpar:hover { background: var(--da-bg); color: var(--da-text); }

/* ── Breadcrumb drill-down ─────────────────────────────────────────────── */
.dash-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 20px;
  background: var(--da-accent-bg);
  border-bottom: 1px solid var(--da-border);
  font-size: .78rem;
}
.dash-breadcrumb-label { color: var(--da-text-muted); font-weight: 600; }
.dash-breadcrumb-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: var(--da-accent); color: #fff;
  border-radius: 20px; font-size: .75rem; font-weight: 600;
}
.dash-breadcrumb-tag button {
  background: none; border: none; color: #fff;
  font-size: .85rem; line-height: 1; cursor: pointer;
  padding: 0; margin-left: 2px; opacity: .7;
}
.dash-breadcrumb-tag button:hover { opacity: 1; }

/* ── Container fullscreen quando dashboard está ativo ──────────────────── */
#conteudo-principal:has(.dash-wrap) {
  padding: 0;
  overflow: hidden;
  height: 100vh;
}

/* ── Layout sem scroll ─────────────────────────────────────────────────── */
.dash-wrap {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Conteúdo principal ────────────────────────────────────────────────── */
.dash-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 5px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Grid 3 colunas (Município | CRPM+OPM+Tipo | Mapa) ─────────────────── */
.dash-content-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 1fr;
  gap: 7px;
  overflow: hidden;
}

/* ── Coluna de gráficos empilhados ─────────────────────────────────────── */
.dash-col-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}
.dash-col-stack .dash-panel { flex: 1; min-height: 0; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.dash-cards {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
/* Drogas: 3 cards de tipo de droga (MACONHA, COCAÍNA, CRACK) */
#dw-drogas .dash-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .dash-cards,
  #dw-drogas .dash-cards { grid-template-columns: repeat(2, 1fr); }
}
.dash-card {
  background: var(--da-panel);
  border-radius: var(--da-radius);
  padding: 7px 10px;
  box-shadow: var(--da-shadow);
  cursor: pointer;
  border-top: 3px solid transparent;
  transition: box-shadow .18s, transform .15s;
  user-select: none;
}
.dash-card:hover {
  box-shadow: var(--da-shadow-md);
  transform: translateY(-1px);
}
.dash-card.ativo {
  box-shadow: var(--da-shadow-md);
  border-top-color: currentColor;
}
.dash-card-label {
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--da-text-muted); margin-bottom: 2px;
}
.dash-card-valor {
  font-size: 1.1rem; font-weight: 700; line-height: 1;
  color: var(--da-text);
}
.dash-card-sub {
  font-size: .6rem; color: var(--da-text-muted); margin-top: 1px;
}
/* Cores por CIA (dashboard armas) */
.dash-card[data-cia="total"]  { border-top-color: var(--da-accent); color: var(--da-accent); }
.dash-card[data-cia="1ª CIA"] { border-top-color: var(--da-cia1); color: var(--da-cia1); }
.dash-card[data-cia="2ª CIA"] { border-top-color: var(--da-cia2); color: var(--da-cia2); }
.dash-card[data-cia="3ª CIA"] { border-top-color: var(--da-cia3); color: var(--da-cia3); }
.dash-card[data-cia="4ª CIA"] { border-top-color: var(--da-cia4); color: var(--da-cia4); }
.dash-card[data-cia="EM"]     { border-top-color: var(--da-ciaem); color: var(--da-ciaem); }

/* Cards de tipo de droga (dashboard drogas) */
.dash-card-droga {
  cursor: default;
  border-top-color: var(--card-cor, var(--da-accent));
}
.dash-card-droga:hover { transform: none; }
.dash-card-droga .dash-card-valor { color: var(--card-cor, var(--da-accent)); }

/* Ranking de CIA dentro do card de droga */
.dash-card-cia-list {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--da-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-card-cia-row {
  display: grid;
  grid-template-columns: 44px 1fr 52px;
  align-items: center;
  gap: 3px;
}
.dash-card-cia-nome {
  font-size: .6rem; font-weight: 700;
  color: var(--da-text-muted);
  white-space: nowrap;
}
.dash-card-cia-bar-wrap {
  background: var(--da-bg);
  border-radius: 2px;
  height: 3px;
  overflow: hidden;
}
.dash-card-cia-bar {
  display: block; height: 100%;
  background: var(--card-cor, var(--da-accent));
  border-radius: 2px;
  transition: width .35s ease;
}
.dash-card-cia-val {
  font-size: .6rem; font-weight: 700;
  color: var(--da-text);
  text-align: right; white-space: nowrap;
}
.dash-card-cia-vazio {
  font-size: .62rem; color: var(--da-text-muted);
  text-align: center; padding: 2px 0;
}

/* ── Painel (cards + charts) ────────────────────────────────────────────── */
.dash-panel {
  background: var(--da-panel);
  border-radius: var(--da-radius);
  box-shadow: var(--da-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-panel-header {
  flex-shrink: 0;
  padding: 4px 10px 4px;
  border-bottom: 1px solid var(--da-border);
  display: flex; align-items: center; justify-content: space-between;
}
.dash-panel-header h3 {
  margin: 0; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--da-text-muted);
}
.dash-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 5px 8px;
}

/* ── SVG bar charts ────────────────────────────────────────────────────── */
.dash-chart-wrap { width: 100%; overflow-x: hidden; }
.dash-bar-label  { font-size: 9px; fill: var(--da-text); font-family: inherit; }
.dash-bar-bg     { fill: #f0f2f5; }
.dash-bar-fill   { fill: var(--da-bar); transition: fill .15s; }
.dash-bar-fill:hover   { fill: var(--da-bar-hover); }
.dash-bar-fill.clickable { cursor: pointer; }
.dash-bar-value  { font-size: 9px; fill: var(--da-text-muted); font-family: inherit; }
.dash-empty      { padding: 16px 0; text-align: center; color: var(--da-text-muted); font-size: .8rem; }

/* ── Mapa (como painel na 3ª coluna do dash-content-grid) ──────────────── */
.dash-panel .dash-map-body {
  flex: 1;
  min-height: 0;
  position: relative;
}
#dash-map-drogas, #dash-map-armas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* ── Loading overlay ───────────────────────────────────────────────────── */
.dash-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; color: var(--da-text-muted); font-size: .88rem;
}
.dash-loading::before {
  content: '';
  width: 18px; height: 18px; margin-right: 10px;
  border: 2px solid var(--da-border);
  border-top-color: var(--da-accent);
  border-radius: 50%;
  animation: dash-spin .7s linear infinite;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* ── Modo Apresentação ─────────────────────────────────────────────────── */
body.dash-apresentacao #sidebar,
body.dash-apresentacao .dash-filtros,
body.dash-apresentacao .dash-breadcrumb,
body.dash-apresentacao #header-mobile,
body.dash-apresentacao #sidebar-overlay {
  display: none !important;
}
body.dash-apresentacao .dash-header { padding: 10px 18px; }
body.dash-apresentacao .btn-dash-apresentacao { background: var(--da-accent-d); }
/* Sem sidebar/cabeçalho/nav mobile, o conteúdo reclama a tela inteira (o
   !important vence o margin-left que reserva o espaço da sidebar mesmo
   com ela escondida — sem isso sobrava uma faixa em branco à esquerda e o
   dashboard ficava confinado a uma largura menor que a tela). */
body.dash-apresentacao #conteudo-principal {
  padding: 0 !important; margin: 0 !important;
  /* width explícito (não só margin:0) — o auto-sizing do flex layout
     (#area-principal sem flex-grow fora do breakpoint mobile) deixava o
     container mais estreito que a tela mesmo com a sidebar escondida e
     margin zerado. */
  width: 100vw !important;
}

/* Acima de 1024px (desktop/notebook): apresentação é tela cheia sem rolar,
   como o layout original foi desenhado (denso, tudo visível de uma vez). */
@media (min-width: 1025px) {
  body.dash-apresentacao #conteudo-principal { height: 100dvh; overflow: hidden; }
  body.dash-apresentacao .dash-wrap { height: 100dvh; overflow: hidden; }
}
/* Até 1024px (celular/tablet): o conteúdo empilhado é mais alto que uma
   tela só — apresentação aqui só tira o "cromo" (sidebar/filtros/nav) e
   mantém a rolagem normal, senão o conteúdo ficaria cortado sem como ver
   o resto. */

/* ── Mobile: empilha as colunas, permite rolagem, cards viram carrossel ──
   O layout fullscreen sem-scroll (pensado para TV/desktop) não cabe num
   celular — aqui ele vira uma tela comum, rolável, com o cabeçalho fixo
   do app (não o próprio .dash-header) como referência de contexto. ────── */
@media (max-width: 1024px) {
  #conteudo-principal:has(.dash-wrap) {
    padding: 0; overflow: visible; height: auto;
  }
  .dash-wrap { height: auto; overflow: visible; }

  .dash-header { position: static; }

  .dash-body { overflow: visible; padding: 8px 10px calc(env(safe-area-inset-bottom) + 12px); }

  .dash-content-grid {
    display: flex; flex-direction: column; overflow: visible; height: auto;
  }
  .dash-col-stack { overflow: visible; }
  .dash-col-stack .dash-panel { min-height: 220px; }

  /* Painéis com gráfico/lista: altura mínima para não colapsar fora do
     grid de altura fixa original */
  .dash-panel { min-height: 220px; }
  .dash-panel-body { overflow-y: visible; max-height: 320px; overflow-y: auto; }

  /* Mapa precisa de altura explícita — os elementos internos são
     absolutamente posicionados (top/left/right/bottom:0) e dependiam da
     altura do flex pai, que agora é automática. */
  .dash-panel .dash-map-body { min-height: 260px; }

  /* Cards de KPI — viram carrossel horizontal com deslizar suave,
     em vez de espremer 5 colunas numa tela de 375px. */
  .dash-cards,
  #dw-drogas .dash-cards {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .dash-card {
    flex: 0 0 auto; width: 132px; scroll-snap-align: start;
  }
  .dash-card-droga { width: 200px; }

  /* Filtros — cada campo ocupa a linha toda, mais fácil de tocar */
  .dash-filtros { padding: 10px 12px; }
  .dash-filtro-grupo { flex: 1 1 100%; }
  .dash-filtros select,
  .dash-filtros input[type="date"] { width: 100%; min-width: 0; height: 40px; }
  .dash-filtro-periodo { flex: 1 1 100%; flex-wrap: wrap; }
  .dash-filtro-btns { width: 100%; }
  .btn-dash-aplicar, .btn-dash-limpar { flex: 1; height: 40px; }
}