/* ═══════════════════════════════════════════════════════════════
   rail_inspector.css — Layout 3a: Rail + Inspetor
   Carregar DEPOIS de sidebar.css / controls.css / panels.css / coord.css /
   search.css no index.html, pois este arquivo sobrescreve o posicionamento
   antigo desses componentes. Nenhum ID ou classe usado pelo JS foi alterado.
═══════════════════════════════════════════════════════════════ */

:root{
  --rail-w: 46px;
  --inspector-w: 260px;
  --dock-w: calc(var(--rail-w) + var(--inspector-w)); /* 306px */
  --primary: #1a73e8;
  --ink: #202124;
  --ink-soft:rgb(111, 114, 117);
  --hint: #9aa0a6;
  --line: #dadce0;
}

/* ── RESET geral dos controles antigos que estamos reaproveitando ──
   Neutraliza qualquer position/top/left/margin herdado de controls.css.
   IMPORTANTE: aplica só aos DESCENDENTES (.icon-rail *), nunca ao próprio
   contêiner — senão o "inset: auto !important" zera o top/left/bottom
   que definimos mais abaixo para .icon-rail. */
.icon-rail *{
  position: static !important;
  float: none !important;
  margin: 0 !important;
  inset: auto !important;
}

/* ═══════════════════════ RAIL ═══════════════════════ */
.icon-rail{
  position: fixed !important;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 10px rgba(60,64,67,.06);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 12px;
  gap: 4px;
  z-index: 1200;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.rail-logo{
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: flex !important;
  align-items: center; justify-content: center;
  font: 800 13px 'DM Sans', sans-serif;
  margin-bottom: 10px;
  flex: none;
}

.rail-group{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.rail-divider{
  width: 22px;
  height: 1px;
  background: var(--line);
  margin: 5px 0 !important;
}

.rail-spacer{ flex: 1 1 auto; }

.rail-btn{
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  display: flex !important;
  align-items: center; justify-content: center;
  cursor: pointer;
  flex: none;
  transition: background .15s, color .15s;
  position: relative !important; /* para o unit-picker e o tooltip */
}
.rail-btn:hover{ background: #f1f3f4; color: var(--ink); }
.rail-btn.active{ background: #e8f0fe; color: var(--primary); }
.rail-btn-ghost{ color: var(--hint); }

/* tooltip simples via data-tip, ao passar o mouse */
.rail-btn[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute !important;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) !important;
  background: var(--ink);
  color: #fff;
  font: 500 11px 'DM Sans', sans-serif;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1300;
}

/* ═══════════════════════ ZOOM CARD / DOCK — direita ═══════════════════════ */
/* IMPORTANTE: reset só nos DESCENDENTES (.right-dock *), nunca no próprio
   .right-dock — mesmo motivo do bug corrigido na rail: "inset: auto
   !important" no próprio contêiner travaria seu top/right em auto. */
.right-dock *{
  position: static !important;
  float: none !important;
  margin: 0 !important;
  inset: auto !important;
}

.right-dock{
  position: fixed !important;
  top: 14px; right: 14px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 1150;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.dock-toprow{
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.dock-text-btn{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font: 600 12px 'DM Sans', sans-serif;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(60,64,67,.12);
  cursor: pointer;
  white-space: nowrap;
}
.dock-text-btn:hover{ color: var(--primary); border-color: #aecbfa; }

.dock-card{
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(60,64,67,.16);
  overflow: hidden;
}

#toolsCard{
  overflow: visible !important;
}

.dock-card.dock-card-row{ flex-direction: row; }

.dock-btn{
  width: 34px; height: 34px;
  border: none; background: transparent;
  color: var(--ink-soft);
  display: flex !important;
  align-items: center; justify-content: center;
  cursor: pointer;
  flex: none;
  position: relative !important; /* para o unit-picker e o tooltip */
}
.dock-card:not(.dock-card-row) .dock-btn:not(:last-child){ border-bottom: 1px solid #eceff1; }
.dock-card.dock-card-row .dock-btn:not(:last-child){ border-right: 1px solid #eceff1; }
.dock-btn:hover{ background: #f1f3f4; color: var(--ink); }
.dock-btn.active{ background: #e8f0fe; color: var(--primary); }

/* tooltip simples via data-tip, ao passar o mouse (mesmo padrão da rail) */
.dock-btn[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute !important;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) !important;
  background: var(--ink);
  color: #fff;
  font: 500 11px 'DM Sans', sans-serif;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1300;
}

/* seletor de unidade (m/km, m²/km²/ha) inserido por measure.js dentro de
   #medLineBtn / #medAreaBtn — agora dentro do #toolsCard, à direita */
   #medLineBtn .measure-unit-picker,
   #medAreaBtn .measure-unit-picker{
     position: absolute !important;
     right: calc(100% + 10px) !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(60,64,67,.16);
     padding: 3px;
     gap: 2px;
     z-index: 1300;
   }
   
#medLineBtn .measure-unit-picker button,
#medAreaBtn .measure-unit-picker button{
  position: static !important;
  border: none; background: transparent;
  font: 500 11px 'JetBrains Mono', monospace;
  padding: 4px 8px; border-radius: 6px; color: var(--ink-soft); cursor: pointer;
}
#medLineBtn .measure-unit-picker button.sel,
#medAreaBtn .measure-unit-picker button.sel{
  background: var(--primary); color: #fff;
}

/* ícones mínimos (o markup dos botões de zoom não traz SVG próprio) */
#zoomInBtn::before, #zoomInBtn::after{ content:''; position:absolute !important; background: currentColor; }
#zoomInBtn::before{ width:14px; height:2px; }
#zoomInBtn::after{ width:2px; height:14px; }
#zoomOutBtn::before{ content:''; position:absolute !important; width:14px; height:2px; background: currentColor; }
#centerBtn::before{
  content:''; position:absolute !important;
  width:10px; height:10px; border:2px solid currentColor; border-radius:50%;
}

/* ═══════════════════════ INSPETOR (sidebar.html) ═══════════════════════ */
.sidebar, .sidebar *{
  box-sizing: border-box;
}
.sidebar{
  position: fixed !important;
  left: var(--rail-w) !important;
  top: 0; bottom: 0;
  right: auto !important;
  width: var(--inspector-w) !important;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 12px rgba(60,64,67,.06);
  display: flex !important;
  flex-direction: column;
  z-index: 1100;
  transform: none !important;
  transition: transform .22s ease;
  overflow-y: auto;   /* já deveria ser assim — troque de "scroll" se estiver diferente */
  padding-bottom: 34px;
  scrollbar-width: thin;             /* Firefox: barra fina */
  scrollbar-color: transparent transparent;  /* invisível até precisar */
}

.sidebar:hover{
  scrollbar-color: var(--md-grey-300, #dadce0) transparent; /* aparece só no hover */
}

/* Chrome/Edge/Safari */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--md-grey-300, #dadce0);
}

/* Confirmado em sidebar.css: o estado recolhido usa .collapsed no próprio
   #sidebar, com transform: translateX(-<largura>). Ajustamos a distância
   para a nova largura do Inspetor (--inspector-w) — o JS não precisa mudar,
   ele só faz .classList.toggle('collapsed') em #sidebar. */
.sidebar.collapsed{
  transform: translateX(calc(-1 * var(--inspector-w))) !important;
}

.sidebar-head{
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border, #f1f3f4);
  flex: none;
  background: var(--surface, #fff);
}
.sidebar-head-title{ display: flex; align-items: baseline; gap: 7px; }
.sidebar-head-sga{ font: 800 20px var(--font-ui, 'DM Sans', sans-serif); color: var(--primary, #1a73e8); letter-spacing: .02em; }
.sidebar-head-emmapas{ font: 700 9px var(--font-ui, 'DM Sans', sans-serif); letter-spacing: .12em; color: var(--md-grey-900, #202124); }
.sidebar-head-subtitle{ font: 400 10.5px/1.4 var(--font-ui, 'DM Sans', sans-serif); color: var(--text-hint, #9aa0a6); margin-top: 6px; text-align: center; }

.sidebar-search{ padding: 12px 14px 6px; flex: none; }
.sidebar-search .search-field{
  display: flex; align-items: center; gap: 8px;
  background: var(--md-grey-100, #f1f3f4); border-radius: var(--r-pill, 8px); padding: 8px 11px;
  color: var(--text-hint, #9aa0a6);
  transition: all var(--t-fast, .15s);
}
.sidebar-search .search-field:focus-within{
  background: var(--surface, #fff);
  border: 1px solid var(--primary, #1a73e8);
  box-shadow: 0 0 0 2px var(--md-blue-100, #d2e3fc);
}
.sidebar-search input{
  border: none; background: transparent; outline: none;
  font: 400 12.5px var(--font-ui, 'DM Sans', sans-serif); color: var(--text-primary, #202124); width: 100%;
}

.sidebar-layers{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 10px 14px;
}

/* O antigo botão de recolher (div.sidebar-toggle, chevron fora do #sidebar)
   não existe mais no HTML — essa função foi absorvida pelo botão #sidebarToggle
   dentro da rail. A regra abaixo é só uma rede de segurança caso o template
   antigo ainda seja incluído em algum lugar por engano. */
.sidebar-toggle{ display: none !important; }

/* ═══════════════════════ PAINÉIS MOVIDOS PARA DENTRO DO INSPETOR ═══════════════════════
   #searchPanel e #coordPanel deixaram de ser flutuantes (position:absolute
   herdado de search.css/coord.css) e agora moram dentro de .sidebar, como
   mais uma seção da coluna. Ficam ocultos por padrão via .search-panel/
   .coord-panel{display:none}, e aparecem com a classe .open (mesma lógica
   de sempre, controlada por ui.js/coord.js). */
#searchPanel{
  position: relative !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: none;
}

#coordPanel{
  position: static !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: none;
}

/* #activeLayersPanel continua como painel flutuante, ancorado à direita
   da rail+inspetor (não foi movido para dentro da sidebar). */
#activeLayersPanel{
  position: fixed !important;
  left: calc(var(--dock-w) + 14px) !important;
  bottom: 14px !important;
  right: auto !important;
  top: auto !important;
}

#legendPanel{
  position: fixed !important;
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  top: auto !important;
}

/* ═══════════════════════ RESPONSIVO ═══════════════════════ */
@media (max-width: 760px){
  :root{ --inspector-w: 78vw; }
  .sidebar{ box-shadow: 4px 0 20px rgba(0,0,0,.22); }
  #activeLayersPanel{
    left: calc(var(--rail-w) + 10px) !important;
  }
}

/* ═══════════════════════ CHEVRON DE BORDA (esconder/mostrar Inspetor) ═══════════════════════ */
.inspector-edge-toggle{
  position: fixed !important;
  top: 50%;
  left: calc(var(--rail-w) + var(--inspector-w)) !important;
  transform: translateY(-50%) !important;
  width: 22px;
  height: 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 10px 10px 0;
  box-shadow: 2px 0 8px rgba(60,64,67,.12);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  z-index: 1150;
  transition: left .22s ease, background .15s, box-shadow .15s;
}
.inspector-edge-toggle:hover{
  background: #f8f9fa;
  color: var(--primary);
  box-shadow: 3px 0 10px rgba(26,115,232,.18);
}
.inspector-edge-toggle svg{
  transition: transform .22s ease;
}
.inspector-edge-toggle.collapsed-pos{
  left: var(--rail-w) !important;
}
.inspector-edge-toggle.collapsed-pos svg{
  transform: rotate(180deg);
}

/* Logo MAPAS | SGA — força o SVG injetado a escalar dentro do contêiner,
   em vez de manter os atributos width/height originais (500x120) que
   causavam overflow visual. */
#logoMapasSga svg{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* Evita que os botões do fim da rail (tutorial, sobre, login) fiquem
   escondidos atrás da barra de status (30px de altura, z-index acima da rail). */
.icon-rail{
  padding-bottom: 44px !important;
}


.sp-tabs{
  display:flex !important;
  border-bottom:1px solid var(--line);
}
.sp-tab{
  flex:1;
  padding:10px 0;
  background:transparent;
  border:none;
  font:600 12px "DM Sans", sans-serif;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:2px solid transparent;
}
.sp-tab.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}
.sp-tab-content{ display:none; padding:16px; min-height:220px; box-sizing:border-box; }
.sp-tab-content.active{ display:flex !important; flex-direction:column; }
.sp-tab-content .sp-footer{ margin-top:auto; padding-top:12px; }

.sp-header{
  padding:14px 16px 4px;
}
.sp-header-title{ font:600 14px "DM Sans", sans-serif; color:var(--ink); }
.sp-header-subtitle{ font:400 11.5px "DM Sans", sans-serif; color:var(--ink-soft); margin-top:1px; }








.sp-footer{
  display:flex !important;
  align-items:stretch;
  gap:8px;
  margin-top:12px;
}
.sp-clear-btn{
  width:40px;
  flex:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--r-md, 8px);
  color:var(--ink-soft);
  display:flex !important;
  align-items:center; justify-content:center;
  cursor:pointer;
  font-size:11px;
  transition:background .15s, color .15s;
}
.sp-clear-btn:hover{ background:#f1f3f4; color:var(--ink); }
.sp-footer .md-btn-primary{
  width:auto; flex:1; margin:0;
  height:30px;
  padding:0 16px;
  display:flex !important;
  align-items:center; justify-content:center;
  box-sizing:border-box;
}