:root{
  --ink-900: #14110d;
  --ink-800: #1c1812;
  --ink-700: #29231a;
  --ink-600: #3a3226;
  --parchment: #d8c9a3;
  --parchment-dim: #9c8f72;
  --ember: #c47a3d;
  --ember-bright: #e2954f;
  --moss: #6f8f5c;
  --sky: #4d7ea8;
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing: border-box; }

/* [hidden] tem que vencer QUALQUER outra regra de display que a gente
   escreva pros mesmos elementos (senão a origem "autor" do CSS sempre bate
   a folha de estilo padrão do navegador pro atributo hidden, e ele para de
   funcionar — foi exatamente isso que quebrou o recolher do painel de
   marcadores e da grade de andares). */
[hidden]{ display: none !important; }


html, body{
  margin:0;
  height:100%;
  background: var(--ink-900);
  color: var(--parchment);
  font-family: var(--font-ui);
  /* NÃO forçar overflow:hidden aqui — isso trava o scroll da PÁGINA
     inteira quando este componente é embutido dentro de outro site (como
     no seu caso, dentro do base.html). O mapa não precisa disso: o
     próprio Leaflet fica contido dentro de #map/.stage, que já tem altura
     própria definida (pelo seu CSS inline no map.html). height:100% sozinho
     não trava scroll — só o overflow:hidden fazia isso. */
}

/* ---------- top bar ---------- */
.topbar{
  height: 56px;
  display:flex;
  align-items:center;
  gap: 20px;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-bottom: 1px solid var(--ink-600);
  position: relative;
  z-index: 20;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand-mark{
  color: var(--ember-bright);
  font-size: 20px;
}
.brand-name{
  font-size: 17px;
  color: var(--parchment);
}

.goto-form{
  display:flex;
  gap:8px;
  flex: 1;
  max-width: 420px;
}
.goto-form input{
  flex:1;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  color: var(--parchment);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
}
.goto-form input:focus{
  border-color: var(--ember);
}
.goto-form input::placeholder{ color: var(--parchment-dim); }

.goto-form button{
  background: var(--ember);
  border: none;
  color: var(--ink-900);
  font-weight: 600;
  padding: 0 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.goto-form button:hover{ background: var(--ember-bright); }

.coord-readout{
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--parchment-dim);
  font-size: 13px;
  white-space: nowrap;
}

.help-btn{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ink-600);
  background: var(--ink-700);
  color: var(--parchment-dim);
  font-size: 13px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}
.help-btn:hover{ color: var(--parchment); border-color: var(--ember); }

/* ---------- stage ---------- */
.stage{
  position: relative;
  height: calc(100% - 56px);
}

#map{
  position:absolute;
  inset:0;
  /* z-index (mesmo baixo) força este elemento a criar seu próprio
     "stacking context": tudo que o Leaflet desenha internamente (tiles,
     marcadores, tooltips, popups — alguns com z-index de até 700) fica
     contido aqui dentro, e não vaza para cima do floor-panel/legend/status,
     que são irmãos deste elemento no HTML. */
  z-index: 1;
  background: #0c0a08 !important;
}

/* Leaflet tweaks to match theme.
   !important porque, ao embutir isto no seu site, o CSS do próprio site
   (resets, frameworks) pode ter regras de fundo em img/div que entram
   depois desta folha de estilo e ganhariam da cascata sem o !important. */
.leaflet-container,
.leaflet-tile-pane,
.leaflet-layer{
  background: #0c0a08 !important;
  font-family: var(--font-ui);
}
/* Leaflet deixa o container focável (tabindex) pra funcionar bem com
   teclado. O problema: ao clicar no mapa (pra selecionar um ponto, por
   exemplo) o navegador foca esse container e desenha o anel de foco
   padrão em volta da tela inteira do mapa — o que parecia uma "seleção"
   aparecendo e sumindo ao trocar de foco. É só o outline nativo; removemos
   porque já temos indicação visual própria (a cruz) para o que está
   selecionado. */
.leaflet-container:focus,
.leaflet-container:focus-visible{
  outline: none !important;
}
/* ampliando: qualquer elemento DENTRO do mapa que ganhe foco do navegador
   (não só o container do Leaflet) — clicar pra selecionar um ponto, por
   exemplo, pode focar elementos diferentes dependendo do navegador. Sem
   isso aparecia um contorno pontilhado em volta de toda a tela do mapa. */
.stage *:focus,
.stage *:focus-visible{
  outline: none !important;
}
.leaflet-tile{
  background: transparent !important;
}
.leaflet-control-zoom a{
  background: var(--ink-700) !important;
  color: var(--parchment) !important;
  border-color: var(--ink-600) !important;
}
.leaflet-control-zoom a:hover{
  background: var(--ink-600) !important;
}
.leaflet-control-zoom a.leaflet-disabled{
  opacity: 0.35 !important;
}
.leaflet-bar{
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* pixelated tiles: the minimap is a small-scale raster, keep it crisp when zoomed */
.leaflet-tile{
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
#subarea-overlay image{
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
}

/* ---------- overlay (crosshair / exiva / grid) ---------- */
.overlay-svg,
.subarea-overlay-svg,
.subarea-labels{
  transform-origin: 0 0 !important;
}
/* Sem isso, o transform que aplicamos via JS durante o zoom (ver
   'zoomanim' no app.js) muda de valor instantaneamente — o navegador só
   ANIMA uma mudança de transform se existir uma transition ativa no
   momento da troca. O Leaflet faz isso nos próprios panes internos, mas
   como nossos overlays ficam FORA da árvore do mapa (são irmãos de #map,
   não filhos), a transição interna dele não alcança esses elementos —
   precisamos da nossa própria, com o mesmo tempo/curva que o Leaflet usa
   por padrão. Só fica ligada durante o zoom (classe adicionada no
   'zoomanim' e removida no 'zoomend'), pra não animar reposicionamentos
   normais (arrastar o mapa, por exemplo), que devem ser instantâneos. */
.zoom-transition{
  transition: transform 0.25s cubic-bezier(0,0,0.25,1) !important;
}
.overlay-svg{
  position:absolute;
  inset:0;
  z-index: 5;         /* acima do mapa (1), abaixo dos painéis (15) */
  pointer-events: none; /* cliques atravessam pro mapa por baixo */
  width: 100%;
  height: 100%;
}
.subarea-overlay-svg{
  position:absolute;
  inset:0;
  z-index: 3;          /* acima do mapa (1), abaixo da cruz/exiva (5) */
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.subarea-labels{
  position:absolute;
  inset:0;
  z-index: 4;           /* acima do spotlight (3), abaixo da cruz/exiva (5) */
  pointer-events: none;
  overflow: hidden;
}
.subarea-label-pill{
  position:absolute;
  transform: translate(-50%, -50%);
  background: rgba(20,17,13,0.72);
  border: 1px solid rgba(58,50,38,0.8);
  color: var(--parchment-dim);
  font-family: var(--font-display);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.subarea-label-pill.active{
  background: rgba(20,17,13,0.95);
  border-color: var(--ember);
  color: var(--ember-bright);
  font-size: 12px;
  z-index: 1;
}
.ov-grid line{
  stroke: rgba(216,201,163,0.42);
  stroke-width: 1.25;
}
.ov-cross line{
  stroke: #1a1410;
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  opacity: 0.9;
}
.ov-cross rect{
  fill: none;
  stroke: #1a1410;
  stroke-width: 2.5;
}
.ov-cross circle{
  fill: #1a1410;
}
.ov-exiva .ov-exiva-square{
  fill: none;
  stroke: #0d1b2b;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  opacity: 0.85;
}
.ov-exiva .ov-exiva-diag{
  stroke: #0d1b2b;
  stroke-width: 2;
  opacity: 0.7;
}
.ov-exiva .ov-exiva-origin{
  fill: #0d1b2b;
}

/* ---------- floor panel ---------- */
.floor-panel{
  position:absolute;
  right: 16px;
  top: 16px;
  z-index: 15;
  display:flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(28,24,18,0.9);
  border: 1px solid var(--ink-600);
  border-radius: 6px;
  padding: 5px;
  backdrop-filter: blur(2px);
}
.floor-compact{
  display:flex;
  flex-direction: column;
  gap: 3px;
}
.floor-full{
  display:flex;
  flex-direction: column;
  gap: 3px;
}
/* menor número em cima (andar 0 = mais alto), maior embaixo (15 = mais
   fundo) — segue a ordem natural dos botões no HTML (0 primeiro). */
.floor-expand{
  border-top: 1px solid var(--ink-600);
  margin-top: 2px;
  padding-top: 5px;
  font-size: 11px;
  opacity: 0.85;
}

.floor-btn{
  width: 30px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--parchment-dim);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.floor-btn:hover{
  background: var(--ink-600);
  color: var(--parchment);
}
.floor-btn.active{
  background: var(--ember);
  color: var(--ink-900);
}
.floor-btn.ground{
  border-bottom: 2px solid var(--moss);
}
.floor-btn:disabled{
  opacity: 0.3;
  cursor: default;
}
.floor-btn:disabled:hover{ background: transparent; }

/* ---------- marker tooltips ---------- */
.leaflet-tooltip.marker-tip{
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 4px 8px;
}
.leaflet-tooltip.marker-tip::before{
  border-top-color: var(--ink-600);
}

/* ---------- pontos de marcador no mapa (DOM, não canvas — ver app.js) --- */
.marker-dot-icon{
  background: transparent;
  border: none;
}
.marker-dot-icon span{
  display:block;
  width:11px;
  height:11px;
  border-radius:50%;
  border: 1.5px solid rgba(20,17,13,0.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* ---------- marker type panel ---------- */
.marker-panel{
  position:absolute;
  left: 16px;
  bottom: 16px;
  z-index: 15;
  background: rgba(28,24,18,0.92);
  border: 1px solid var(--ink-600);
  border-radius: 6px;
  padding: 8px 10px;
  width: 208px;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
}
.marker-panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.marker-panel-toggle{
  background: transparent;
  border: none;
  color: var(--parchment-dim);
  font-size: 12px;
  cursor: pointer;
  width: 16px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.marker-panel.collapsed .marker-panel-toggle{ transform: rotate(0deg); }
.marker-panel:not(.collapsed) .marker-panel-toggle{ transform: rotate(90deg); }
.marker-panel-title{
  font-family: var(--font-display);
  color: var(--ember-bright);
  font-size: 12px;
  flex: 1;
}
.marker-panel-actions{ display:flex; gap:6px; }
.marker-panel-actions button{
  background: transparent;
  border: 1px solid var(--ink-600);
  color: var(--parchment-dim);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.marker-panel-actions button:hover{ color: var(--parchment); border-color: var(--ember); }

/* recolhido: só a barra de título aparece, corpo e ações somem */
.marker-panel.collapsed{ max-height: none; }
.marker-panel.collapsed .marker-panel-body,
.marker-panel.collapsed .marker-panel-actions{ display: none; }

.marker-panel-body{
  overflow-y: auto;
  display:flex;
  flex-direction: column;
  gap: 3px;
}
.marker-row{
  display:flex;
  align-items:center;
  gap: 7px;
  font-size: 11px;
  color: var(--parchment-dim);
  cursor: pointer;
  padding: 2px 2px;
  border-radius: 3px;
}
.marker-row:hover{ background: var(--ink-700); color: var(--parchment); }
.marker-row input{ accent-color: var(--ember); flex-shrink: 0; }
.marker-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.marker-row-count{ margin-left:auto; opacity:0.6; font-variant-numeric: tabular-nums; }

/* ---------- status ---------- */
.status{
  position:absolute;
  left: 16px;
  top: 16px;
  z-index: 15;
  font-size: 11px;
  color: var(--parchment-dim);
  background: rgba(28,24,18,0.85);
  border: 1px solid var(--ink-600);
  border-radius: 6px;
  padding: 6px 10px;
  pointer-events: none;
  max-width: 280px;
  line-height: 1.6;
}
.status b{ color: var(--ember-bright); }
.status .tag{
  display:inline-block;
  border: 1px solid var(--ink-600);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 4px;
  font-size: 10px;
}
.status .tag.on{ border-color: var(--ember); color: var(--ember-bright); }