/* Terra V6 — sistema visual único para controles do mapa e filtros. */

/* ═══════════════════════════════════════════════════════════════════
   FAMILIA DE TEMAS — tres identidades distintas, mesma gramatica.
     Terra  = titanio claro
     Aurora = navy
     Noite  = quase preto
   Este arquivo carrega por ultimo, entao os tokens daqui mandam:
   `--top-bar-bg` (cor da topbar), `--nav-accent` (indicador das abas) e a
   familia `--map-glass-*` (todo o chrome sobre o mapa, sidebar e tour).

   Os seletores precisam incluir `body[data-site-theme=...]`: o terra-v4.css
   declara `--top-bar-bg` no BODY, e valor declarado no body sombreia o do
   :root para todo o conteudo — declarar so em :root aqui nao adiantava.
   ═══════════════════════════════════════════════════════════════════ */
:root,
:root[data-site-theme="terra"],
body[data-site-theme="terra"] {
  /* ── TERRA — titanio claro ────────────────────────────────────────
     O alfa do vidro e um PISO de contraste, nao so estetica: o mapa por
     baixo varia de branco (CartoDB claro) a quase preto (satelite/dark),
     entao um vidro leve fazia o icone accent oscilar de ~9:1 para ~2,2:1.
     Com estes valores o pior caso (composto sobre branco puro) fica acima
     de 4:1 no icone e 7:1 no texto. Nao baixar sem remedir — ha teste. */
  --top-bar-bg: #e9ecef;
  --nav-accent: 255, 255, 255;
  --nav-text: #29323a;
  --nav-text-soft: rgba(41, 50, 58, 0.68);
  --nav-active-text: #20272d;
  --nav-topbar-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.62) 58%,
    rgba(210, 215, 220, 0.16) 100%
  );
  --nav-topbar-border: rgba(43, 51, 59, 0.16);
  --nav-topbar-shadow: 0 5px 18px rgba(44, 52, 60, 0.16);
  --nav-tabs-bg: rgba(255, 255, 255, 0.46);
  --nav-tabs-border: rgba(43, 51, 59, 0.13);
  --nav-tabs-sheen: rgba(255, 255, 255, 0.82);
  --nav-control-bg: rgba(255, 255, 255, 0.56);
  --nav-control-border: rgba(43, 51, 59, 0.14);
  --nav-control-sheen: rgba(255, 255, 255, 0.86);
  --nav-control-hover-bg: rgba(255, 255, 255, 0.92);
  --nav-control-hover-border: rgba(43, 51, 59, 0.28);
  --nav-control-hover-text: #20272d;
  --nav-search-panel-bg: rgba(255, 255, 255, 0.72);
  --nav-search-panel-border: rgba(43, 51, 59, 0.16);
  --nav-search-field-bg: rgba(255, 255, 255, 0.68);
  --nav-logo-shadow: 0 2px 10px rgba(44, 52, 60, 0.14);

  /* O filtro acompanha a topbar, mas sem trocar os tokens globais do mapa:
     zoom, basemap e modais continuam com o vidro escuro de alto contraste. */
  --filter-glass-bg: rgba(241, 244, 246, 0.92);
  --filter-glass-bg-strong: rgba(248, 250, 251, 0.98);
  --filter-glass-bg-hover: rgba(255, 255, 255, 0.98);
  --filter-glass-border: rgba(43, 51, 59, 0.16);
  --filter-glass-border-strong: rgba(43, 51, 59, 0.34);
  --filter-glass-text: #29323a;
  --filter-glass-muted: rgba(41, 50, 58, 0.72);
  --filter-glass-accent: #46535e;
  --filter-glass-accent-soft: rgba(70, 83, 94, 0.12);
  --filter-glass-on-accent: #ffffff;
  --filter-glass-sheen: rgba(255, 255, 255, 0.90);
  --filter-glass-shadow: 0 10px 28px rgba(44, 52, 60, 0.18);
  --filter-glass-shadow-raised: 0 16px 38px rgba(44, 52, 60, 0.22);
  --filter-card-bg: rgba(255, 255, 255, 0.62);
  --filter-card-bg-current: rgba(255, 255, 255, 0.86);
  --filter-field-bg: rgba(255, 255, 255, 0.78);
  --map-glass-bg: rgba(36, 40, 46, 0.82);
  --map-glass-bg-strong: rgba(36, 40, 46, 0.93);
  --map-glass-bg-hover: rgba(58, 64, 72, 0.90);
  --map-glass-border: rgba(255, 255, 255, 0.14);
  --map-glass-border-strong: rgba(196, 206, 220, 0.55);
  --map-glass-text: #eef1f5;
  --map-glass-muted: rgba(219, 224, 232, 0.80);
  --map-glass-accent: #aebac9;
  --map-glass-accent-soft: rgba(174, 186, 201, 0.22);
  /* Texto/icone que fica SOBRE o accent claro (branco daria ~2:1). */
  --map-glass-on-accent: #1a1e24;
  /* Brilho superior do vidro: discreto: 0.68 era resto do tema claro e virava
     um risco branco sobre a superficie escura. */
  --map-glass-sheen: rgba(255, 255, 255, 0.12);
  --map-glass-shadow: 0 10px 28px rgba(10, 12, 16, 0.32);
  --map-glass-shadow-raised: 0 16px 38px rgba(10, 12, 16, 0.44);
  --map-control-size: 44px;   /* piso de alvo de toque (WCAG 2.5.5) */

  /* Escala unica de raios — antes cada grupo tinha o seu (11/12/14/16).
     Grupo = controle + padding, para os cantos ficarem concentricos. */
  --map-control-radius: 14px;                 /* qualquer botao de 40-44px */
  --map-group-pad: 3px;                       /* respiro interno dos grupos */
  --map-group-radius: 17px;                   /* = controle + padding */
  --map-surface-radius: 18px;                 /* popover / sidebar */
  --map-surface-item-radius: 12px;            /* item dentro do popover */
}

/* ── AURORA — navy ─────────────────────────────────────────────────── */
html[data-site-theme="aurora"],
body[data-site-theme="aurora"] {
  --top-bar-bg: #16315c;
  --nav-accent: 90, 140, 220;
  --map-glass-bg: rgba(24, 46, 82, 0.80);
  --map-glass-bg-strong: rgba(24, 46, 82, 0.92);
  --map-glass-bg-hover: rgba(34, 62, 104, 0.90);
  --map-glass-border: rgba(255, 255, 255, 0.18);
  --map-glass-border-strong: rgba(140, 190, 255, 0.6);
  --map-glass-text: #f0f6ff;
  --map-glass-muted: rgba(214, 230, 252, 0.82);
  --map-glass-accent: #9ccaff;
  --map-glass-accent-soft: rgba(140, 185, 255, 0.28);
  --map-glass-on-accent: #0b1b2f;
  --map-glass-sheen: rgba(255, 255, 255, 0.14);
  --map-glass-shadow: 0 10px 28px rgba(6, 16, 32, 0.30);
  --map-glass-shadow-raised: 0 16px 38px rgba(6, 16, 32, 0.42);
}

/* ── NOITE — quase preto ───────────────────────────────────────────── */
html[data-site-theme="night"],
body[data-site-theme="night"] {
  --top-bar-bg: #0a0c11;
  --nav-accent: 74, 104, 156;
  --map-glass-bg: rgba(10, 12, 16, 0.88);
  --map-glass-bg-strong: rgba(12, 14, 19, 0.95);
  --map-glass-bg-hover: rgba(30, 34, 42, 0.94);
  --map-glass-border: rgba(190, 202, 220, 0.18);
  --map-glass-border-strong: rgba(147, 167, 196, 0.55);
  --map-glass-text: #e9edf4;
  --map-glass-muted: rgba(206, 214, 228, 0.76);
  --map-glass-accent: #93a7c4;
  --map-glass-accent-soft: rgba(120, 140, 175, 0.24);
  --map-glass-on-accent: #0a0c11;
  --map-glass-sheen: rgba(255, 255, 255, 0.09);
  --map-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.50);
  --map-glass-shadow-raised: 0 16px 38px rgba(0, 0, 0, 0.58);
}

/* Somente o acionador e o painel de filtros recebem a variante clara Terra.
   As variaveis sao herdadas pelos controles internos ja existentes. */
html[data-site-theme="terra"] :is(.map-filter-control, .sidebar),
body[data-site-theme="terra"] :is(.map-filter-control, .sidebar) {
  --map-glass-bg: var(--filter-glass-bg);
  --map-glass-bg-strong: var(--filter-glass-bg-strong);
  --map-glass-bg-hover: var(--filter-glass-bg-hover);
  --map-glass-border: var(--filter-glass-border);
  --map-glass-border-strong: var(--filter-glass-border-strong);
  --map-glass-text: var(--filter-glass-text);
  --map-glass-muted: var(--filter-glass-muted);
  --map-glass-accent: var(--filter-glass-accent);
  --map-glass-accent-soft: var(--filter-glass-accent-soft);
  --map-glass-on-accent: var(--filter-glass-on-accent);
  --map-glass-sheen: var(--filter-glass-sheen);
  --map-glass-shadow: var(--filter-glass-shadow);
  --map-glass-shadow-raised: var(--filter-glass-shadow-raised);
}

/* O painel tem um botão de fechar próprio. Ao abri-lo, remove o acionador
   duplicado da navegação visual e por teclado em qualquer largura de tela. */
body.has-filter-sidebar-open .map-filter-control {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Superfície compartilhada: translúcida, borda fina e profundidade curta. */
.map-filter-toggle,
#baseMapPicker > summary,
.map-controls,
.map-thumbnails-floating,
.leaflet-upload-actions.leaflet-upload-segmented,
.sidebar {
  background: var(--map-glass-bg) !important;
  border: 1px solid var(--map-glass-border) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow) !important;
  color: var(--map-glass-text) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

/* Filtro e mapa-base: menores visualmente, mantendo alvo acessível de 44px. */
.map-filter-toggle,
.map-basemap-control summary,
#baseMapPicker > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--map-control-size) !important;
  min-width: var(--map-control-size) !important;
  max-width: var(--map-control-size) !important;
  height: var(--map-control-size) !important;
  min-height: var(--map-control-size) !important;
  max-height: var(--map-control-size) !important;
  flex: 0 0 var(--map-control-size) !important;
  padding: 0 !important;
  border-radius: var(--map-control-radius) !important;
  cursor: pointer !important;
  transform: none !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

.map-filter-toggle span,
#baseMapPicker > summary span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.map-control-svg {
  width: 21px !important;
  height: 21px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: var(--map-glass-accent) !important;
  pointer-events: none !important;
}

.map-filter-toggle:hover,
.map-filter-toggle:focus-visible,
.map-filter-toggle[aria-expanded="true"],
#baseMapPicker > summary:hover,
#baseMapPicker > summary:focus-visible,
#baseMapPicker[open] > summary {
  background: var(--map-glass-bg-hover) !important;
  border-color: var(--map-glass-border-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    0 0 0 3px var(--map-glass-accent-soft),
    var(--map-glass-shadow-raised) !important;
  color: var(--map-glass-accent) !important;
  transform: translateY(-1px) !important;
}

.map-filter-toggle:active,
#baseMapPicker > summary:active {
  transform: translateY(0) scale(0.97) !important;
}

.map-filter-toggle:not([aria-expanded="true"]) .map-control-svg {
  animation: map-control-breathe 3.8s ease-in-out infinite;
}

@keyframes map-control-breathe {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 0 rgba(143, 186, 255, 0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(143, 186, 255, 0.32)); }
}

/* Seletor de mapa base: popover glass compacto em grade, não uma pilha pesada. */
.basemap-picker {
  position: relative !important;
}

.map-thumbnails-floating {
  position: absolute !important;
  top: calc(100% + 9px) !important;
  right: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 224px !important;
  min-width: 224px !important;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: var(--map-surface-radius) !important;
  background: var(--map-glass-bg-strong) !important;
  z-index: 3 !important;
}

.basemap-popover-title {
  grid-column: 1 / -1 !important;
  display: block !important;
  padding: 2px 3px 5px !important;
  color: var(--map-glass-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.map-thumbnails-floating .map-thumb {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 9px !important;
  border: 1px solid transparent !important;
  border-radius: var(--map-surface-item-radius) !important;
  background: transparent !important;
  color: var(--map-glass-text) !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

.map-thumbnails-floating .map-thumb:last-child {
  grid-column: 1 / -1 !important;
}

.map-thumbnails-floating .map-thumb:hover,
.map-thumbnails-floating .map-thumb:focus-visible {
  background: var(--map-glass-bg-hover) !important;
  border-color: var(--map-glass-border) !important;
  color: var(--map-glass-text) !important;
}

.map-thumbnails-floating .map-thumb.active,
.map-thumbnails-floating .map-thumb[aria-pressed="true"] {
  background: var(--map-glass-accent-soft) !important;
  border-color: var(--map-glass-border-strong) !important;
  /* Era #00584a (verde-escuro do tema claro antigo): sobre a tinta accent na
     navy dava 1,06:1 — o mapa base ativo era ilegivel. Texto claro = 7,2:1. */
  color: var(--map-glass-text) !important;
  box-shadow: inset 3px 0 0 var(--map-glass-accent) !important;
}

.map-thumbnails-floating .map-thumb i {
  color: currentColor !important;
  font-size: 13px !important;
}

.map-thumbnails-floating .map-thumb span {
  overflow: hidden !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Zoom e tela cheia viram uma única torre, sem três cards soltos. */
.map-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: var(--map-group-pad) !important;
  border-radius: var(--map-group-radius) !important;
  overflow: hidden !important;
}

.map-controls .control-btn,
.map-controls #zoomIn,
.map-controls #zoomOut,
.map-controls #fullscreen {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--map-control-size) !important;
  min-width: var(--map-control-size) !important;
  max-width: var(--map-control-size) !important;
  height: var(--map-control-size) !important;
  min-height: var(--map-control-size) !important;
  max-height: var(--map-control-size) !important;
  flex: 0 0 var(--map-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--map-control-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--map-glass-accent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.map-controls .control-btn + .control-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 9px !important;
  right: 9px !important;
  height: 1px !important;
  background: var(--map-glass-border) !important;
  pointer-events: none !important;
}

.map-controls .control-btn:hover,
.map-controls .control-btn:focus-visible {
  background: var(--map-glass-accent-soft) !important;
  border-color: transparent !important;
  color: var(--map-glass-accent) !important;
  transform: none !important;
}

.map-controls .control-btn:active {
  background: var(--map-glass-bg-hover) !important;
  transform: scale(0.94) !important;
}

.map-controls .control-btn i {
  color: currentColor !important;
  font-size: 14px !important;
}

/* Enviar / Desenhar / Limpar: um único vidro segmentado com brilho compartilhado. */
.leaflet-upload-actions.leaflet-upload-segmented {
  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  grid-template-columns: repeat(3, minmax(82px, auto)) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: var(--map-group-pad) !important;
  overflow: hidden !important;
  border-radius: var(--map-group-radius) !important;
  background: var(--map-glass-bg) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

.leaflet-upload-actions.leaflet-upload-segmented::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: -90% !important;
  bottom: -90% !important;
  left: -34% !important;
  width: 30% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent) !important;
  opacity: 0 !important;
  transform: translateX(-220%) rotate(16deg) !important;
  transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease !important;
  pointer-events: none !important;
}

.leaflet-upload-actions.leaflet-upload-segmented:hover,
.leaflet-upload-actions.leaflet-upload-segmented:focus-within {
  border-color: var(--map-glass-border-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    0 0 0 3px var(--map-glass-accent-soft),
    var(--map-glass-shadow-raised) !important;
  transform: translateY(-1px) !important;
}

.leaflet-upload-actions.leaflet-upload-segmented:hover::before,
.leaflet-upload-actions.leaflet-upload-segmented:focus-within::before {
  opacity: 0.7 !important;
  transform: translateX(520%) rotate(16deg) !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 82px !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-right: 1px solid var(--map-glass-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--map-glass-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:last-child {
  border-right: 0 !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:hover,
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:focus-visible {
  background: var(--map-glass-accent-soft) !important;
  color: var(--map-glass-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 7px !important;
  background: var(--map-glass-accent-soft) !important;
  color: var(--map-glass-accent) !important;
  font-size: 11px !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch__label {
  display: block !important;
  min-width: 0 !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch__title {
  display: block !important;
  max-width: 86px !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch__hint,
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch__status {
  display: none !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch.has-upload,
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch.is-processing,
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch[aria-pressed="true"] {
  background: var(--map-glass-accent-soft) !important;
  color: var(--map-glass-accent) !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch.has-error {
  background: rgba(176, 62, 53, 0.12) !important;
  color: #a43a32 !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:disabled {
  background: transparent !important;
  color: var(--map-glass-muted) !important;
  opacity: 0.42 !important;
  filter: none !important;
}

/* Painel de filtros: vidro leve, menos caixas dentro de caixas e controles coerentes. */
.sidebar {
  width: min(316px, calc(100vw - 32px)) !important;
  padding: 12px !important;
  border-radius: var(--map-surface-radius) !important;
  background: var(--map-glass-bg-strong) !important;
  color: var(--map-glass-text) !important;
}

.sidebar::after {
  display: none !important;
}

.sidebar .section-header {
  min-height: 44px !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--map-glass-border) !important;
}

.sidebar .section-toggle {
  min-height: 40px !important;
  color: var(--map-glass-text) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
}

.sidebar .section-toggle:hover,
.sidebar .section-toggle:focus-visible,
.sidebar .section-toggle:hover i {
  color: var(--map-glass-accent) !important;
}

.sidebar .section-action-btn {
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  color: var(--map-glass-muted) !important;
}

.sidebar .section-action-btn:hover,
.sidebar .section-action-btn:focus-visible {
  background: var(--map-glass-accent-soft) !important;
  border-color: var(--map-glass-border) !important;
  color: var(--map-glass-accent) !important;
}

.sidebar .section-close-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--map-glass-muted) !important;
}

.sidebar .section-close-btn:hover,
.sidebar .section-close-btn:focus-visible {
  background: var(--map-glass-accent-soft) !important;
  border-color: var(--map-glass-border-strong) !important;
  color: var(--map-glass-accent) !important;
}

.sidebar .layer-stack {
  gap: 8px !important;
}

.sidebar .layer-section-label {
  margin: 7px 3px 0 !important;
  color: var(--map-glass-muted) !important;
}

.sidebar .layer-card {
  overflow: hidden !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.sidebar .layer-card:not(.is-locked):hover,
.sidebar .layer-card.open,
.sidebar .layer-card.active,
.sidebar .layer-card.is-active {
  border-color: var(--map-glass-border-strong) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    inset 3px 0 0 var(--map-glass-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transform: none !important;
}

html[data-site-theme="night"] .sidebar .layer-card:not(.is-locked):hover,
html[data-site-theme="night"] .sidebar .layer-card.open,
html[data-site-theme="night"] .sidebar .layer-card.active,
html[data-site-theme="night"] .sidebar .layer-card.is-active {
  background: rgba(255, 255, 255, 0.07) !important;
}

.sidebar .layer-card-head {
  padding: 9px 10px 0 !important;
}

.sidebar .layer-toggle {
  min-height: 32px !important;
}

.sidebar .layer-title-text,
.sidebar .layer-card.open .layer-title-text {
  color: var(--map-glass-text) !important;
}

.sidebar .layer-summary,
.sidebar .layer-card:not(.active) .layer-summary {
  padding: 0 10px 8px 34px !important;
  color: var(--map-glass-muted) !important;
}

.sidebar .layer-filter-panel {
  padding: 0 10px 10px 34px !important;
}

.sidebar .estado-filter-search,
.sidebar .estado-filter-trigger,
.sidebar .filter-select,
.sidebar .section .public-layer-show-all,
.sidebar .public-layer-show-all {
  min-height: 44px !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 11px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--map-glass-text) !important;
  box-shadow: none !important;
}

html[data-site-theme="night"] .sidebar .estado-filter-search,
html[data-site-theme="night"] .sidebar .estado-filter-trigger,
html[data-site-theme="night"] .sidebar .filter-select,
html[data-site-theme="night"] .sidebar .section .public-layer-show-all,
html[data-site-theme="night"] .sidebar .public-layer-show-all {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.sidebar .estado-filter-search:focus,
.sidebar .estado-filter-trigger:hover,
.sidebar .estado-filter-trigger:focus-visible,
.sidebar .estado-filter-trigger.is-open,
.sidebar .filter-select:focus {
  background-color: var(--map-glass-bg-hover) !important;
  border-color: var(--map-glass-border-strong) !important;
  box-shadow: 0 0 0 3px var(--map-glass-accent-soft) !important;
}

.sidebar #estadoFilterUf.filter-chip-group,
.sidebar #estadoFilterUf.uf-list-control {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 12px !important;
  background: var(--map-glass-bg-strong) !important;
  box-shadow: var(--map-glass-shadow) !important;
}

.sidebar #estadoFilterUf .filter-chip {
  min-height: 40px !important;
  border-color: transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--map-glass-text) !important;
}

.sidebar #estadoFilterUf .filter-chip:hover,
.sidebar #estadoFilterUf .filter-chip.is-selected,
.sidebar #estadoFilterUf .filter-chip[aria-pressed="true"] {
  border-color: var(--map-glass-border) !important;
  background: var(--map-glass-accent-soft) !important;
  color: var(--map-glass-accent) !important;
  box-shadow: inset 3px 0 0 var(--map-glass-accent) !important;
}

.sidebar .section .public-layer-show-all:not(:disabled),
.sidebar .public-layer-show-all:not(:disabled) {
  background: var(--map-glass-accent) !important;
  border-color: var(--map-glass-accent) !important;
  /* Branco sobre o accent claro dava 1,97:1; a navy sobre ele da 8,8:1. */
  color: var(--map-glass-on-accent) !important;
  box-shadow: 0 8px 20px rgba(6, 16, 32, 0.28) !important;
}

.sidebar .section .public-layer-show-all:disabled,
.sidebar .public-layer-show-all:disabled,
.sidebar .filter-select:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--map-glass-muted) !important;
  opacity: 0.55 !important;
}

/* Ações contextuais e atribuição seguem a mesma superfície. */
.map-context-actions .map-inspector-eye,
.map-context-actions .report-selection-toggle,
.map-context-actions .top-btn-report {
  background: var(--map-glass-bg) !important;
  border-color: var(--map-glass-border) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow) !important;
  color: var(--map-glass-text) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

@media (max-width: 640px) {
  .leaflet-upload-actions.leaflet-upload-segmented {
    grid-template-columns: repeat(3, 44px) !important;
  }

  .leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
  }

  .leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch__label {
    display: none !important;
  }

  .map-thumbnails-floating {
    width: min(234px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
  }

  .sidebar {
    width: min(316px, calc(100vw - 24px)) !important;
    padding: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-filter-toggle:not([aria-expanded="true"]) .map-control-svg {
    animation: none !important;
  }

  .leaflet-upload-actions.leaflet-upload-segmented::before {
    display: none !important;
  }

  .map-filter-toggle,
  #baseMapPicker > summary,
  .leaflet-upload-actions.leaflet-upload-segmented,
  .leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch,
  .map-controls .control-btn {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PASSE DE PROPORCAO — botoes menores, simbolos e rotulos maiores.
   ═══════════════════════════════════════════════════════════════════ */
.map-filter-toggle i,
.map-basemap-control summary i,
#baseMapPicker > summary i,
#zoomIn i, #zoomOut i, #fullscreen i, .control-btn i {
  font-size: 16px !important;
}

/* Pills contextuais (Detalhes / Gerar relatorio): altura de 40px e rotulo 13px */
.map-context-actions .map-inspector-eye,
.map-context-actions .report-selection-toggle,
.map-context-actions .top-btn-report {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 14px !important;
  border-radius: var(--map-control-radius) !important;
}

.map-inspector-eye-label,
.map-context-actions .top-btn-report .top-btn-label {
  font-size: 13px !important;
  font-weight: 650 !important;
}

.map-context-actions .map-inspector-eye i {
  font-size: 15px !important;
}

/* Upload segmentado acompanha a mesma altura e ganha corpo no rotulo */
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch {
  min-height: 40px !important;
  font-size: 12.5px !important;
}

.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch i {
  font-size: 15px !important;
}

/* Miniaturas do basemap: rotulo legivel */
.map-thumb span { font-size: 12px !important; }
.map-thumb i { font-size: 15px !important; }

/* ═══════════════════════════════════════════════════════════════════
   NAVY GLASS — passe autoritativo (IDs para vencer restos por especificidade)
   Botoes arredondados, translucidos, com blur do mapa por baixo.
   ═══════════════════════════════════════════════════════════════════ */
#zoomIn, #zoomOut, .control-btn,
.map-filter-toggle,
.map-basemap-control summary,
#baseMapPicker > summary {
  width: var(--map-control-size) !important;
  height: var(--map-control-size) !important;
  min-height: var(--map-control-size) !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-control-radius) !important;
  background: var(--map-glass-bg) !important;
  color: var(--map-glass-text) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

#zoomIn:hover, #zoomOut:hover, .control-btn:hover,
.map-filter-toggle:hover,
.map-basemap-control summary:hover,
#baseMapPicker > summary:hover {
  background: var(--map-glass-bg-hover) !important;
  border-color: var(--map-glass-border-strong) !important;
  transform: translateY(-1px) !important;
}

#zoomIn i, #zoomOut i, .control-btn i,
.map-filter-toggle i,
.map-basemap-control summary i,
#baseMapPicker > summary i {
  color: var(--map-glass-accent) !important;
  font-size: 18px !important;
}

/* Pilulas contextuais (Detalhes / Gerar relatorio) */
.map-context-actions .map-inspector-eye,
.map-context-actions .report-selection-toggle,
.map-context-actions .top-btn-report {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  /* Pilula de 999px era o unico raio fora da escala do chrome do mapa. */
  border-radius: var(--map-control-radius) !important;
  border: 1px solid var(--map-glass-border) !important;
  background: var(--map-glass-bg) !important;
  color: var(--map-glass-text) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
}
.map-context-actions .map-inspector-eye:hover:not(:disabled),
.map-context-actions .report-selection-toggle:hover:not(:disabled),
.map-context-actions .report-selection-toggle[aria-expanded="true"],
.map-context-actions .top-btn-report:not(:disabled):hover {
  background: var(--map-glass-bg-hover) !important;
  border-color: var(--map-glass-border-strong) !important;
}
.map-inspector-eye-label,
.map-context-actions .top-btn-report .top-btn-label {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  color: var(--map-glass-text) !important;
}
.map-context-actions .map-inspector-eye i { font-size: 16px !important; color: var(--map-glass-accent) !important; }

.report-selection-menu {
  position: relative;
}

.report-selection-menu[hidden],
.report-selection-popover[hidden] {
  display: none !important;
}

.map-context-actions .report-selection-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--map-glass-border);
  border-radius: var(--map-control-radius);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.map-context-actions .report-selection-toggle > i:first-child {
  color: var(--map-glass-accent);
  font-size: 14px;
}

.report-selection-toggle-caret {
  color: var(--map-glass-muted);
  font-size: 10px;
  transition: transform 160ms ease;
}

.report-selection-toggle[aria-expanded="true"] .report-selection-toggle-caret {
  transform: rotate(180deg);
}

.report-selection-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(390px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 14px;
  z-index: 1010;
}

@media (max-width: 760px) {
  .map-context-actions .report-selection-toggle {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .map-context-actions .report-selection-toggle span,
  .map-context-actions .report-selection-toggle-caret {
    display: none;
  }

  .report-selection-popover {
    right: -76px;
  }
}

/* Estado desabilitado (o padrao ao abrir o app, antes de escolher fazenda):
   `.map-report-control .top-btn-report:disabled` do v5-polish (0,3,0) vencia a
   regra de vidro (0,2,0) e devolvia a superficie BRANCA do tema antigo — a
   pilula "Selecione uma fazenda" era o unico elemento claro sobre o mapa.
   Empatar a especificidade e vir depois na cascata resolve. */
.map-context-actions .top-btn-report:disabled,
.map-context-actions .top-btn-report[disabled],
.map-context-actions .map-inspector-eye:disabled,
.map-context-actions .map-inspector-eye[disabled] {
  background: var(--map-glass-bg) !important;
  border-color: var(--map-glass-border) !important;
  color: var(--map-glass-muted) !important;
  /* Sem opacity no container: ela derrubaria junto o alfa do vidro e o texto
     voltaria a depender do mapa por baixo. O estado vem so da cor. */
  opacity: 1 !important;
}

.map-context-actions .top-btn-report:disabled .top-btn-label,
.map-context-actions .map-inspector-eye:disabled .map-inspector-eye-label,
.map-context-actions .map-inspector-eye:disabled i {
  color: var(--map-glass-muted) !important;
}

/* Segmentado de upload (Enviar / Desenhar / Limpar) — navy glass arredondado */
.leaflet-upload-actions.leaflet-upload-segmented {
  gap: 0 !important;
  padding: var(--map-group-pad) !important;
  border-radius: var(--map-group-radius) !important;
  border: 1px solid var(--map-glass-border) !important;
  background: var(--map-glass-bg) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
}
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch {
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: var(--map-control-radius) !important;
  background: transparent !important;
  color: var(--map-glass-text) !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:hover:not(:disabled),
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:focus-visible {
  background: var(--map-glass-accent-soft) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:disabled {
  color: var(--map-glass-muted) !important;
  opacity: 0.6 !important;
}
.leaflet-upload-launch__icon i { font-size: 16px !important; color: var(--map-glass-accent) !important; }
.leaflet-upload-launch__title { font-size: 12.5px !important; font-weight: 650 !important; }
.leaflet-upload-launch__hint { color: var(--map-glass-muted) !important; }

/* Atribuicao discreta */
.leaflet-control-attribution {
  background: var(--map-glass-bg) !important;
  border: 1px solid var(--map-glass-border) !important;
  color: var(--map-glass-muted) !important;
  box-shadow: var(--map-glass-shadow) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.leaflet-control-attribution a { color: var(--map-glass-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════
   CONTRASTE NA SIDEBAR/TOPBAR NAVY — quatro textos herdaram cores dos
   temas claros anteriores e ficaram ilegiveis sobre a navy (medidos:
   1.04:1, 1.12:1, 1.84:1 e 3.82:1; AA exige 4.5:1).
   ═══════════════════════════════════════════════════════════════════ */

/* "Limpar municipio" e afins: era rgba(18,56,50,.46) = 1.04:1 */
.sidebar .filter-link-btn {
  color: var(--map-glass-muted) !important;
}
.sidebar .filter-link-btn:not(:disabled):hover,
.sidebar .filter-link-btn:not(:disabled):focus-visible {
  color: var(--map-glass-accent) !important;
}
.sidebar .filter-link-btn:disabled {
  /* Desabilitado e isento de AA, mas 0.34 ficava apagado demais para ler. */
  color: var(--map-glass-muted) !important;
}

/* Placeholder da busca de estado: era 1.12:1 */
.sidebar .estado-filter-search::placeholder,
.sidebar input::placeholder {
  color: var(--map-glass-muted) !important;
  opacity: 1 !important;
}

/* Atribuicao do rodape: era 1.84:1 */
.sidebar .sidebar-attribution {
  color: var(--map-glass-muted) !important;
}
.sidebar .sidebar-attribution strong {
  color: var(--map-glass-accent) !important;
}

/* Passe final de contraste: textos secundarios que ficavam entre 2.9 e 4.5.
   Sobem para >= 4.5 (AA) mantendo a hierarquia visual. */
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch,
.leaflet-upload-launch__title {
  color: var(--map-glass-text) !important;
}
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:disabled,
.leaflet-upload-actions.leaflet-upload-segmented .leaflet-upload-launch:disabled .leaflet-upload-launch__title {
  color: var(--map-glass-muted) !important;
  opacity: 1 !important;
}
.sidebar .filter-link-btn:disabled {
  color: var(--map-glass-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTROS — REPAGINAÇÃO (UX)
   O fluxo e sequencial: Estado → Municipio → libera CAR/SIGEF/SNCI.
   Antes nada comunicava isso: o usuario via campos desabilitados sem
   saber por que. Agora vira um passo-a-passo numerado, com estados
   visiveis de "bloqueado / ativo / concluido".
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Cabecalho mais leve ─────────────────────────────────────────── */
.sidebar .section-header {
  align-items: center !important;
  gap: 8px !important;
}
.sidebar .section-toggle span {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}

/* ─── Trilha do passo-a-passo ─────────────────────────────────────── */
.sidebar .layer-stack {
  position: relative !important;
  gap: 10px !important;
}

/* Rotulos de secao viram titulo de etapa */
.sidebar .layer-section-label {
  margin: 10px 2px 2px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--map-glass-muted) !important;
}

/* Numero da etapa em cada bloco */
.sidebar .layer-card[data-layer-card="estados"],
.sidebar .layer-card[data-layer-card="municipios"],
.sidebar .public-layer-actions {
  position: relative !important;
  padding-left: 38px !important;
}

.sidebar .layer-card[data-layer-card="estados"]::before,
.sidebar .layer-card[data-layer-card="municipios"]::before,
.sidebar .public-layer-actions::before {
  position: absolute !important;
  left: 11px !important;
  top: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 999px !important;
  border: 1px solid var(--map-glass-border-strong) !important;
  background: var(--map-glass-accent-soft) !important;
  color: var(--map-glass-text) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  z-index: 1 !important;
}
.sidebar .layer-card[data-layer-card="estados"]::before  { content: "1" !important; }
.sidebar .layer-card[data-layer-card="municipios"]::before { content: "2" !important; }
.sidebar .public-layer-actions::before { content: "3" !important; top: 15px !important; }

/* Linha conectando as etapas */
.sidebar .layer-card[data-layer-card="estados"]::after,
.sidebar .layer-card[data-layer-card="municipios"]::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 34px !important;
  bottom: -12px !important;
  width: 1px !important;
  background: var(--map-glass-border) !important;
  z-index: 0 !important;
}

/* Etapa concluida: numero vira marca de confirmacao.
   O gatilho NAO e `.active` (isso e so "camada ligada", verdadeiro ja na
   abertura — o passo 1 nascia marcado como concluido sem nenhum estado
   escolhido). `has-active-filters` so entra quando existe selecao real. */
.sidebar .layer-card[data-layer-card="estados"]:has(.layer-summary.has-active-filters)::before,
.sidebar .layer-card[data-layer-card="municipios"]:has(.layer-summary.has-active-filters)::before {
  content: "\2713" !important;   /* ✓ */
  background: var(--map-glass-accent) !important;
  border-color: var(--map-glass-accent) !important;
  color: var(--map-glass-on-accent) !important;
}

/* Etapa bloqueada: esmaecida, sem competir com a etapa atual */
.sidebar .layer-card.is-locked {
  opacity: 0.62 !important;
}
.sidebar .layer-card.is-locked::before {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--map-glass-border) !important;
  color: var(--map-glass-muted) !important;
}

/* ─── Cartao mais limpo ───────────────────────────────────────────── */
.sidebar .layer-card {
  padding-bottom: 4px !important;
}
.sidebar .layer-card-head {
  padding: 11px 10px 0 !important;
}
.sidebar .layer-title-text {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.sidebar .layer-summary,
.sidebar .layer-card:not(.active) .layer-summary {
  padding: 2px 10px 8px 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}
.sidebar .layer-filter-panel {
  padding: 0 10px 10px 0 !important;
}

/* Alinha o conteudo interno com o numero da etapa */
.sidebar .layer-card[data-layer-card="estados"] .layer-card-head,
.sidebar .layer-card[data-layer-card="municipios"] .layer-card-head {
  padding-left: 0 !important;
}

/* ─── Campos de filtro ────────────────────────────────────────────── */
.sidebar .estado-filter-search-row {
  position: relative !important;
}
.sidebar .estado-filter-search-row i {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  color: var(--map-glass-muted) !important;
  pointer-events: none !important;
}
.sidebar .estado-filter-search {
  padding-left: 32px !important;
}

/* Acoes de limpar: discretas, alinhadas a direita */
.sidebar .filter-inline-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 6px !important;
}
.sidebar .filter-link-btn {
  padding: 4px 2px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ─── Botao da etapa 3 ────────────────────────────────────────────── */
.sidebar .public-layer-actions {
  margin-top: 2px !important;
}
.sidebar .section .public-layer-show-all,
.sidebar .public-layer-show-all {
  width: 100% !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* Camadas publicas ja liberadas: recuo menor, sem numero */
.sidebar .layer-card-public {
  padding-left: 10px !important;
}

/* ─── Rodape ──────────────────────────────────────────────────────── */
.sidebar .sidebar-attribution {
  margin: 12px 4px 2px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--map-glass-border) !important;
  font-size: 9.5px !important;
  line-height: 1.5 !important;
}

/* Siglas UF e chips ativos: herdavam verde-escuro dos temas claros e sumiam
   sobre a lista navy (medido 1.17:1). */
.sidebar .filter-chip-code {
  color: var(--map-glass-muted) !important;
}
.sidebar .filter-chip.is-selected .filter-chip-code,
.sidebar .filter-chip[aria-pressed="true"] .filter-chip-code {
  color: var(--map-glass-accent) !important;
}
.sidebar .filter-chip-main {
  color: var(--map-glass-text) !important;
}

/* Chips de estado selecionado (topo do passo 1) */
.sidebar .estado-active-chip {
  border: 1px solid var(--map-glass-border-strong) !important;
  background: var(--map-glass-accent-soft) !important;
  color: var(--map-glass-text) !important;
  border-radius: 999px !important;
}
.sidebar .estado-active-chip button,
.sidebar .estado-active-chip [aria-label*="Remover"] {
  color: var(--map-glass-text) !important;
  opacity: 0.85 !important;
}
.sidebar .estado-active-chip button:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* As regras canonicas usam ID (#estadoFilterUf, 1-1-0) e venciam a classe. */
#estadoFilterUf .filter-chip-code {
  color: var(--map-glass-muted) !important;
}
#estadoFilterUf .filter-chip.is-selected .filter-chip-code,
#estadoFilterUf .filter-chip[aria-pressed="true"] .filter-chip-code {
  color: var(--map-glass-accent) !important;
}
#estadoFilterUf .filter-chip-main {
  color: var(--map-glass-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GAVETA FECHADA NO MOBILE — o Chromium continua pintando a camada de
   `backdrop-filter` mesmo com `opacity: 0` no proprio elemento, entao a
   gaveta de filtros (fechada com opacity/pointer-events em style.css,
   <=760px) aparecia como um painel fantasma legivel sobre o mapa.
   `visibility` tira do paint sem alterar a animacao de abertura.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .sidebar:not(.is-open) {
    visibility: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .sidebar.is-open {
    visibility: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MENU DE MAPA BASE — de grade quebrada para lista com amostra.
   Era uma grade 2xN com 5 itens: o ultimo ocupava a linha inteira e
   ficava centralizado enquanto os outros alinhavam a esquerda, e o
   item ativo levava anel + barra + borda (tres marcas para uma coisa
   so). Vira uma lista de uma coluna: amostra da cor real do mapa,
   rotulo alinhado e um unico check para o ativo.
   ═══════════════════════════════════════════════════════════════════ */
.map-thumbnails-floating {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1px !important;
  width: 234px !important;
  min-width: 234px !important;
  padding: 8px !important;
}

.basemap-popover-title {
  padding: 3px 8px 9px !important;
  margin-bottom: 5px !important;
  border-bottom: 1px solid var(--map-glass-border) !important;
}

.map-thumbnails-floating .map-thumb,
.map-thumbnails-floating .map-thumb:last-child {
  grid-column: auto !important;
  /* amostra | rotulo | check — a 3a coluna existe sempre, para o rotulo
     nao dancar quando o item ativo muda. */
  grid-template-columns: 30px minmax(0, 1fr) 14px !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
}

.map-thumbnails-floating .map-thumb::after {
  content: "" !important;
  justify-self: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--map-glass-accent) !important;
}

.map-thumbnails-floating .map-thumb.active::after,
.map-thumbnails-floating .map-thumb[aria-pressed="true"]::after {
  content: "\2713" !important;   /* ✓ */
}

/* Amostra: a cor real de cada base, em vez de um icone solto no escuro. */
.map-thumbnails-floating .map-thumb i {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}

.map-thumbnails-floating .map-thumb[data-layer="osm"] i {
  background: linear-gradient(140deg, #f4eee1 0%, #ddd1b7 100%) !important;
  color: #5c5140 !important;
}
.map-thumbnails-floating .map-thumb[data-layer="cartodb"] i {
  background: linear-gradient(140deg, #fbfcfd 0%, #d5dbe1 100%) !important;
  color: #404a55 !important;
}
.map-thumbnails-floating .map-thumb[data-layer="dark"] i {
  background: linear-gradient(140deg, #3b434e 0%, #151920 100%) !important;
  color: #dfe6ef !important;
}
.map-thumbnails-floating .map-thumb[data-layer="esri"] i {
  background: linear-gradient(140deg, #3a7a45 0%, #1f5566 55%, #143050 100%) !important;
  color: #eef7ee !important;
}
.map-thumbnails-floating .map-thumb[data-layer="terrain"] i {
  background: linear-gradient(140deg, #9dba7b 0%, #c8ab7c 100%) !important;
  color: #3c3621 !important;
}

.map-thumbnails-floating .map-thumb span {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.map-thumbnails-floating .map-thumb:hover,
.map-thumbnails-floating .map-thumb:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: transparent !important;
}

.map-thumbnails-floating .map-thumb.active,
.map-thumbnails-floating .map-thumb[aria-pressed="true"] {
  background: var(--map-glass-accent-soft) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.map-thumbnails-floating .map-thumb.active span,
.map-thumbnails-floating .map-thumb[aria-pressed="true"] span {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAINEL DE FILTROS — acabamento.
   Problemas corrigidos aqui: (1) o numero da etapa nascia em cima da
   borda do cartao, parecendo desalinhado — agora existe uma trilha a
   esquerda e ele fica nela; (2) etapa marcada tres vezes (numero +
   checkbox verde + contorno azul aceso); (3) caixa dentro de caixa —
   campo e cartao tinham o mesmo preenchimento; (4) restos do tema
   claro: checkbox #009579 e aviso em italico com bolinha laranja.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Cabecalho: o titulo manda, as acoes recuam ──────────────────── */
.sidebar .section-action-btn {
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
}

.sidebar .section-close-btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--map-glass-muted) !important;
}

.sidebar .section-close-btn:hover,
.sidebar .section-close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 0 !important;
  color: var(--map-glass-text) !important;
}

/* ─── Trilha das etapas ───────────────────────────────────────────── */
.sidebar .layer-stack {
  padding-left: 26px !important;
}

.sidebar .layer-section-label {
  margin-left: 11px !important;
}

.sidebar .layer-card[data-layer-card="estados"],
.sidebar .layer-card[data-layer-card="municipios"],
.sidebar .public-layer-actions {
  padding-left: 0 !important;
  /* o cartao clipava (overflow:hidden) e comia o numero da etapa, que agora
     vive na trilha, fora da caixa. */
  overflow: visible !important;
}

.sidebar .layer-card[data-layer-card="estados"]::before,
.sidebar .layer-card[data-layer-card="municipios"]::before,
.sidebar .public-layer-actions::before {
  left: -26px !important;
  top: 13px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}

.sidebar .public-layer-actions::before {
  top: 12px !important;
}

.sidebar .layer-card[data-layer-card="estados"]::after,
.sidebar .layer-card[data-layer-card="municipios"]::after {
  left: -17px !important;
  top: 37px !important;
  bottom: -14px !important;
  width: 2px !important;
  border-radius: 2px !important;
}

/* Conteudo do cartao recupera o respiro que era do padding-left antigo */
.sidebar .layer-card[data-layer-card="estados"] .layer-card-head,
.sidebar .layer-card[data-layer-card="municipios"] .layer-card-head {
  padding-left: 11px !important;
}

.sidebar .layer-summary,
.sidebar .layer-card:not(.active) .layer-summary {
  padding: 2px 11px 9px !important;
}

.sidebar .layer-filter-panel {
  padding: 0 11px 11px !important;
}

/* ─── Uma marca por etapa, nao tres ───────────────────────────────── */
.sidebar .layer-card {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.sidebar .layer-card:not(.is-locked):hover,
.sidebar .layer-card.open,
.sidebar .layer-card.active,
.sidebar .layer-card.is-active {
  border-color: var(--map-glass-border) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
}

/* ─── Profundidade invertida: o campo afunda, o cartao sustenta ───── */
.sidebar .estado-filter-search,
.sidebar .estado-filter-trigger,
.sidebar .filter-select,
.sidebar #estadoFilterUf.filter-chip-group,
.sidebar #estadoFilterUf.uf-list-control {
  background-color: rgba(8, 17, 32, 0.55) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.sidebar .estado-filter-trigger i,
.sidebar .estado-filter-search-row i {
  color: var(--map-glass-muted) !important;
  font-size: 11px !important;
}

/* Lista de UF fechada e linha de acoes sem botao visivel nao devem reservar
   espaco: era isso que abria o vazio no pe do cartao da etapa 1. */
.sidebar .filter-field-uf-grid:has(#estadoFilterUf:empty) {
  display: none !important;
}

.sidebar .filter-inline-actions:not(:has(button:not([hidden]))) {
  display: none !important;
}

/* ─── Checkbox no idioma navy (era #009579 do tema claro) ─────────── */
.sidebar .checkbox-custom {
  width: 15px !important;
  height: 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 5px !important;
  background: rgba(8, 17, 32, 0.55) !important;
}

.sidebar .checkbox-item input:checked + .checkbox-custom {
  border-color: var(--map-glass-accent) !important;
  background: var(--map-glass-accent) !important;
}

.sidebar .checkbox-item input:checked + .checkbox-custom::after {
  color: var(--map-glass-on-accent) !important;
}

/* ─── Aviso de etapa bloqueada: sem italico nem bolinha piscando ──── */
.sidebar .layer-card.is-locked .layer-summary {
  font-style: normal !important;
  color: var(--map-glass-muted) !important;
}

.sidebar .layer-card.is-locked .layer-summary::before {
  display: none !important;
}

/* ─── Etapa 3 desabilitada continua legivel ───────────────────────── */
.sidebar .section .public-layer-show-all:disabled,
.sidebar .public-layer-show-all:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--map-glass-muted) !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GERACAO DE RELATORIO — barra de progresso ancorada embaixo.
   O indicador existia (overlay com % animada), mas ficava em z-index 3000
   embaixo do modal de relatorio (8000), que so fechava quando o PDF
   terminava: clicar em "Gerar" parecia nao fazer nada. Agora o dialogo sai
   de cena na hora (app.js) e o progresso vira uma barra ancorada no rodape,
   acima de qualquer modal.
   ═══════════════════════════════════════════════════════════════════ */
#reportLoadingOverlay {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 16px 22px !important;
  background: rgba(4, 12, 20, 0.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 9000 !important;
}

/* A moldura do video virava uma caixa preta no meio do cartao. */
#reportLoadingOverlay .loading-brand-media {
  display: none !important;
}

#reportLoadingOverlay .loading-shell,
#reportLoadingOverlay .loading-shell-report {
  display: block !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: none !important;
  /* a moldura tinha altura fixa (360px) reservada para o video; sem zerar,
     o cartao ficava boiando no meio da moldura e nao encostava no rodape. */
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#reportLoadingOverlay .loading-spinner.report-loading {
  /* Ancorado direto no overlay: a moldura legada tem altura propria e regras
     antigas de alinhamento, entao nao da para depender dela para encostar o
     cartao no rodape. */
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 32px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "kicker valor"
    "titulo valor"
    "sub    valor"
    "barra  barra" !important;
  align-items: center !important;
  gap: 2px 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px 16px !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-surface-radius) !important;
  background: var(--map-glass-bg-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow-raised) !important;
  color: var(--map-glass-text) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  text-align: left !important;
}

#reportLoadingOverlay .loading-kicker {
  grid-area: kicker !important;
  margin: 0 !important;
  color: var(--map-glass-muted) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#reportLoadingOverlay #reportLoadingMessage {
  grid-area: titulo !important;
  margin: 2px 0 0 !important;
  color: var(--map-glass-text) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#reportLoadingOverlay #reportLoadingSubmessage {
  grid-area: sub !important;
  margin: 3px 0 0 !important;
  color: var(--map-glass-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

#reportLoadingOverlay #reportLoadingProgressValue {
  grid-area: valor !important;
  align-self: center !important;
  color: var(--map-glass-accent) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

#reportLoadingOverlay #reportLoadingProgress {
  grid-area: barra !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 6px !important;
  margin: 12px 0 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

#reportLoadingOverlay #reportLoadingProgressBar {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    var(--map-glass-accent-soft) 0%,
    var(--map-glass-accent) 100%
  ) !important;
  transition: width 240ms cubic-bezier(0.3, 0.9, 0.3, 1) !important;
}

/* Brilho percorrendo a barra: deixa claro que o processo esta vivo mesmo
   quando a porcentagem passa alguns segundos parada. */
#reportLoadingOverlay #reportLoadingProgress::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  ) !important;
  transform: translateX(-100%) !important;
  animation: report-progress-sheen 1.6s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes report-progress-sheen {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  #reportLoadingOverlay #reportLoadingProgress::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ESCOPO DE DADOS DENTRO DO CARD DA CONTA
   Saiu da topbar (onde era uma barra larga disputando espaco com a busca)
   e virou um bloco do menu da conta. A visibilidade continua no JS
   (`updateAuthChrome`): so master/admin recebem.
   ═══════════════════════════════════════════════════════════════════ */
/* O painel da conta era o unico pedaco do chrome que nao seguia o tema:
   ficava navy mesmo com Terra (cinza) ou Noite ativo. */
.account-menu-panel {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-surface-radius) !important;
  background: var(--map-glass-bg-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow-raised) !important;
  color: var(--map-glass-text) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

.account-menu-panel .account-menu-item {
  border-radius: var(--map-surface-item-radius) !important;
  color: var(--map-glass-text) !important;
}

.account-menu-panel .account-menu-item i {
  color: var(--map-glass-accent) !important;
}

.account-menu-panel .account-menu-item:hover,
.account-menu-panel .account-menu-item:focus-visible {
  background: var(--map-glass-accent-soft) !important;
}

.account-menu-panel .account-menu-divider {
  background: var(--map-glass-border) !important;
}

.account-menu-panel .account-menu-identity strong,
.account-menu-panel #authAccountMenuName {
  color: var(--map-glass-text) !important;
}

.account-menu-panel .account-menu-theme-label {
  color: var(--map-glass-muted) !important;
}

.account-menu-panel .account-menu-theme-opt {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--map-glass-muted) !important;
}

.account-menu-panel .account-menu-theme-opt[aria-checked="true"] {
  border-color: var(--map-glass-accent) !important;
  background: var(--map-glass-accent) !important;
  color: var(--map-glass-on-accent) !important;
}

/* Mesmo padrao da secao "Aparencia" logo abaixo: rotulo miudo + controle de
   largura total. A versao anterior repetia a moldura do painel (caixa dentro
   de caixa) e deixava o globo numa coluna propria, desalinhado do rotulo. */
.account-menu-panel .auth-userbar.topbar-scope {
  display: block !important;
  /* As regras da topbar davam largura de 188px e altura fixa de 40px ao bloco;
     dentro do menu ele precisa acompanhar o painel e crescer com o conteudo. */
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.account-menu-panel .auth-userbar.topbar-scope[hidden] {
  display: none !important;
}

/* O globo vira marcador do rotulo, na mesma linha. */
.account-menu-panel .auth-userbar .topbar-scope-icon {
  float: left !important;
  margin: 1px 6px 0 0 !important;
  color: var(--map-glass-muted) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.account-menu-panel .auth-userbar .topbar-scope-copy {
  display: block !important;
  min-width: 0 !important;
}

.account-menu-panel .auth-userbar .topbar-scope-caption {
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--map-glass-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.account-menu-panel .auth-userbar:not([hidden]) .auth-client-select {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  /* espaco a direita reservado para a seta desenhada abaixo */
  padding: 0 30px 0 10px !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 10px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--map-glass-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  /* Seta propria: a nativa vinha clara demais e destoava do painel. */
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 11px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.account-menu-panel .auth-userbar:not([hidden]) .auth-client-select:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

.account-menu-panel .auth-userbar:not([hidden]) .auth-client-select:focus-visible {
  border-color: var(--map-glass-border-strong) !important;
  box-shadow: 0 0 0 3px var(--map-glass-accent-soft) !important;
  outline: none !important;
}

/* O menu nativo abre com as cores do sistema; forcar para nao virar
   texto claro sobre fundo claro. */
.account-menu-panel .auth-userbar .auth-client-select option {
  background-color: #1b1f26 !important;
  color: #eef1f5 !important;
}

/* ─── Estado "com selecao": ultimos verdes do tema claro ──────────── */
/* Marcador do resumo era #009579 (unico verde no painel navy). */
.sidebar .layer-summary.has-active-filters {
  color: var(--map-glass-text) !important;
}

.sidebar .layer-summary.has-active-filters::before {
  background: var(--map-glass-accent) !important;
  box-shadow: none !important;
}

/* Chip do estado escolhido: o "x" de remover era rgba(18,56,50,.42) sobre a
   tinta accent (1,2:1) — sumia. E o hover virava #dff1e9 (verde claro) com
   texto branco por cima. */
.sidebar .estado-active-chip strong,
.sidebar .estado-active-chip span {
  color: var(--map-glass-text) !important;
}

.sidebar .estado-active-chip i {
  color: var(--map-glass-accent) !important;
  opacity: 1 !important;
}

.sidebar .estado-active-chip:hover,
.sidebar .estado-active-chip:focus-visible {
  border-color: var(--map-glass-border-strong) !important;
  background: var(--map-glass-bg-hover) !important;
}

.sidebar .estado-active-chip:hover i {
  color: var(--map-glass-text) !important;
}

/* "Limpar estados" perdia para a regra de ID (#clearEstadoFilters, 1-1-0) e
   ficava em rgba(47,74,66,.66) — 1,2:1 sobre o cartao navy. */
.sidebar #clearEstadoFilters:not([hidden]),
.sidebar #clearMunicipioFilters {
  color: var(--map-glass-muted) !important;
}

.sidebar #clearEstadoFilters:not([hidden]):hover,
.sidebar #clearEstadoFilters:not([hidden]):focus-visible,
.sidebar #clearMunicipioFilters:not(:disabled):hover,
.sidebar #clearMunicipioFilters:not(:disabled):focus-visible {
  color: var(--map-glass-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MODAIS — ultimo bolsao do tema claro/verde.
   Relatorio, upload e perfil ainda eram cartoes brancos com cabecalho
   em gradiente verde e botoes #009579: destoavam de todo o resto do app
   e, no tema Noite, davam um susto de luminosidade. Aqui eles passam a
   usar a mesma familia `--map-glass-*`.
   Os seletores levam `.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content` (0,3,0) porque boa parte das
   regras legadas ja e 0,2,0 com !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Superficie ──────────────────────────────────────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .report-modal-content,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .upload-modal-content,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .user-settings-modal {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-surface-radius) !important;
  background: var(--map-glass-bg-strong) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 var(--map-glass-sheen),
    var(--map-glass-shadow-raised) !important;
  color: var(--map-glass-text) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

/* ─── Cabecalho: some o gradiente verde, entra hairline ───────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .modal-header,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-modal-header,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-modal-header,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-modal-header {
  border: 0 !important;
  border-bottom: 1px solid var(--map-glass-border) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--map-glass-text) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .modal-body,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-modal-body,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-modal-body,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-modal-body,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-body {
  background: transparent !important;
  background-image: none !important;
  color: var(--map-glass-text) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .modal-footer,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-modal-footer {
  border-top: 1px solid var(--map-glass-border) !important;
  background: transparent !important;
  background-image: none !important;
}

/* ─── Tipografia ──────────────────────────────────────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content h2,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content h3,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content h4,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content label,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content strong,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content legend {
  color: var(--map-glass-text) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content p,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content small,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content em,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-block-description,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-identity-meta,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-copy {
  color: var(--map-glass-muted) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-kicker,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-modal-eyebrow,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-block-kicker,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-column-head {
  color: var(--map-glass-muted) !important;
}

/* ─── Cartoes internos (eram brancos sobre branco) ────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-option,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-token-panel,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-dropzone,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-analysis-preview,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-empty-state,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-workbench,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-identity-card,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-block,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-shell,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-client-editor,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-metrics,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .admin-activity-summary {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-surface-item-radius) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--map-glass-text) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-admin-code-card {
  border: 1px solid var(--map-glass-border-strong) !important;
  border-radius: var(--map-surface-item-radius) !important;
  background: var(--map-glass-accent-soft) !important;
  background-image: none !important;
  color: var(--map-glass-text) !important;
}

/* Opcao de tipo de relatorio: selecao marcada uma vez so. */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-option:hover {
  border-color: var(--map-glass-border-strong) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-option:has(input:checked) {
  border-color: var(--map-glass-accent) !important;
  background: var(--map-glass-accent-soft) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-check {
  color: var(--map-glass-accent) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-topline em {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--map-glass-muted) !important;
}

/* ─── Selos e avatares ────────────────────────────────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-modal-icon,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-icon,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-dropzone-icon,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-identity-avatar {
  border: 1px solid var(--map-glass-border) !important;
  background: var(--map-glass-accent-soft) !important;
  background-image: none !important;
  color: var(--map-glass-accent) !important;
  box-shadow: none !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-identity-role {
  border: 1px solid var(--map-glass-border) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--map-glass-muted) !important;
}

/* ─── Campos ──────────────────────────────────────────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content input:not([type="radio"]):not([type="checkbox"]),
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content select,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content textarea {
  min-height: 44px !important;
  border: 1px solid var(--map-glass-border) !important;
  border-radius: 10px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  color: var(--map-glass-text) !important;
  box-shadow: none !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content input::placeholder,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content input:focus,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content select:focus,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content textarea:focus {
  border-color: var(--map-glass-border-strong) !important;
  box-shadow: 0 0 0 3px var(--map-glass-accent-soft) !important;
  outline: none !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content select option {
  background-color: #1b1f26 !important;
  color: #eef1f5 !important;
}

/* ─── Botoes ──────────────────────────────────────────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-primary,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-primary-btn,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-submit-btn,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .filter-btn-primary {
  border: 1px solid var(--map-glass-accent) !important;
  border-radius: var(--map-control-radius) !important;
  background: var(--map-glass-accent) !important;
  background-image: none !important;
  /* branco sobre o accent claro daria ~2:1 */
  color: var(--map-glass-on-accent) !important;
  box-shadow: none !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-primary:hover:not(:disabled),
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-primary-btn:hover:not(:disabled),
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-submit-btn:hover:not(:disabled) {
  filter: brightness(1.08) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-secondary,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn:not(.btn-primary):not(.btn-link) {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-control-radius) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  color: var(--map-glass-text) !important;
  box-shadow: none !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-secondary:hover:not(:disabled),
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn:not(.btn-primary):not(.btn-link):hover:not(:disabled) {
  border-color: var(--map-glass-border-strong) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn:disabled,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-primary:disabled,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-secondary:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--map-glass-border) !important;
  color: var(--map-glass-muted) !important;
  opacity: 1 !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .btn-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--map-glass-accent) !important;
}

/* Fechar: sem moldura, so o alvo de toque. */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--map-glass-muted) !important;
  box-shadow: none !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .close:hover,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .close:focus-visible {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--map-glass-text) !important;
}

/* ─── Listas e divisorias ─────────────────────────────────────────── */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content hr,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-top,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-block-head {
  border-color: var(--map-glass-border) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-admin-client-list li,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .admin-activity-list li,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-managed-clients li {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-surface-item-radius) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--map-glass-text) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-feedback {
  color: var(--map-glass-muted) !important;
}

/* Molduras estruturais (fieldsets e agrupadores) ainda pintavam de branco por
   cima do vidro — o corpo do modal virava um bloco claro solido. */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content fieldset,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-type-selector,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-report-options,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-modal-footer-actions,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-token-purchase,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-form,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-form,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-form-grid,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-field,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-actions,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-account-section,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-identity-section,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-section,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-column,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-summary,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-actions,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-modal-body,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .report-modal-heading,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-modal-heading,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-create,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-managed-clients,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-managed-client-form {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--map-glass-border) !important;
  box-shadow: none !important;
  color: var(--map-glass-text) !important;
}

/* Ultimos blocos claros: metricas do admin e cartoes de cliente ficavam
   brancos com texto claro por cima (invisiveis). */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-metrics > span,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-admin-client-card,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-client-card,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-empty-state {
  border: 1px solid var(--map-glass-border) !important;
  border-radius: var(--map-surface-item-radius) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--map-glass-text) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .auth-admin-client-card.is-active,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-client-card.is-selected {
  border-color: var(--map-glass-accent) !important;
  background: var(--map-glass-accent-soft) !important;
}

.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .user-settings-admin-metrics > span small {
  color: var(--map-glass-muted) !important;
}

/* Filete verde-agua que sobrou embaixo do cabecalho do perfil. */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .profile-modal-header::after,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .modal-header::after {
  display: none !important;
}

/* Select do rodape do upload: mesma seta desenhada do seletor de escopo, com
   espaco reservado — a nativa cobria o fim do rotulo. */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-report-type-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 30px 0 12px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 11px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* Ultimo verde solto: o icone do estado vazio do upload. */
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-empty-state i,
.modal:is(#reportModal,#uploadVectorModal,#userSettingsModal,#adminPanelModal,.modal) .modal-content .upload-analysis-preview i {
  color: var(--map-glass-accent) !important;
}

/* Creditos do relatorio: o painel e seus controles nao podem herdar texto
   claro sobre superficies claras quando o modal usa a variante escura. */
.modal#reportModal .modal-content .report-token-panel {
  border-color: #526a6a !important;
  background: #17282b !important;
  color: #f4f8f7 !important;
}

.modal#reportModal .modal-content .report-token-icon {
  background: #0d6f65 !important;
  color: #ffffff !important;
}

.modal#reportModal .modal-content .report-token-label {
  color: #b9c9c7 !important;
}

.modal#reportModal .modal-content #reportTokenStatus {
  color: #ffffff !important;
}

.modal#reportModal .modal-content .report-token-details summary {
  border-color: #617a79 !important;
  background: #203438 !important;
  color: #f4f8f7 !important;
}

.modal#reportModal .modal-content .report-token-details[open] {
  border-color: #527b76 !important;
  background: #172a2d !important;
}

.modal#reportModal .modal-content .report-token-details[open] summary,
.modal#reportModal .modal-content .report-token-purchase label {
  color: #f4f8f7 !important;
}

.modal#reportModal .modal-content .report-token-purchase {
  background: transparent !important;
}

.modal#reportModal .modal-content .report-token-purchase input {
  border-color: #6b8583 !important;
  background: #0f2023 !important;
  color: #ffffff !important;
}

.modal#reportModal .modal-content #purchaseReportTokensBtn:not(:disabled) {
  border-color: #2bc6ad !important;
  background: #2bc6ad !important;
  color: #06211f !important;
}

.modal#reportModal .modal-content #purchaseReportTokensBtn:disabled {
  border-color: #526a6a !important;
  background: #344c4f !important;
  color: #d0dcda !important;
}

.modal#reportModal .modal-content .report-token-details .auth-feedback {
  color: #f4f8f7 !important;
}

.modal#reportModal .modal-content .report-token-details .auth-feedback[data-tone="success"] {
  border: 1px solid #3aa895 !important;
  background: #145548 !important;
  color: #f2fffb !important;
  font-weight: 700 !important;
}

.modal#reportModal .modal-content .report-token-details .auth-feedback[data-tone="error"] {
  border: 1px solid #d67b71 !important;
  background: #672d2a !important;
  color: #fff4f2 !important;
  font-weight: 700 !important;
}