/* Malha — shell UX (R15: menus estratégicos, busca global, bottom-nav mobile).
   As variáveis de cor (--bg, --panel, …) vêm do <style> inline do index.html. */

/* Segurança: controles de escrita marcados .req-login só aparecem logado.
   auth.js seta html[data-malha-auth="in|out"] conforme a sessão Supabase. */
html[data-malha-auth="out"] .req-login { display: none !important; }

/* GATE de login (login ÚNICO, sem popup do navegador) — tela cheia bonita */
#malha-gate {
  position: fixed; inset: 0; z-index: 3000;
  background: radial-gradient(1200px 600px at 50% -10%, #15315a 0%, #0d1117 55%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#malha-gate form {
  width: min(360px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 26px; box-shadow: 0 24px 70px #000a;
  display: flex; flex-direction: column; gap: 12px;
}
#malha-gate .gate-logo { font-size: 24px; font-weight: 700; }
#malha-gate .gate-logo b { color: var(--blu); }
#malha-gate .gate-sub { color: var(--mut); font-size: 13px; margin-bottom: 8px; }
#malha-gate input {
  background: #0d1117; color: var(--tx); border: 1px solid var(--line);
  border-radius: 8px; padding: 11px 13px; font-size: 15px; outline: none;
}
#malha-gate input:focus { border-color: var(--blu); }
#malha-gate button {
  background: var(--blu); color: #04122b; border: none; border-radius: 8px;
  padding: 11px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 4px;
}
#malha-gate button:disabled { opacity: .6; cursor: default; }
#malha-gate #gate-erro { color: var(--red); font-size: 12px; min-height: 14px; }

/* ============================ MENUS DE TOPO ============================ */
#menus { display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid var(--line);
         position: relative; flex-wrap: wrap; }
#menus .menu { position: relative; }
#menus .menu-bt {
  background: none; border: none; color: var(--mut); cursor: pointer;
  font-size: 14px; padding: 11px 14px; display: flex; align-items: center; gap: 7px;
  border-bottom: 2px solid transparent; min-height: 44px;
}
#menus .menu-bt:hover { color: var(--tx); }
#menus .menu.on > .menu-bt,
#menus .menu.aberto > .menu-bt { color: var(--tx); border-bottom-color: var(--blu); }
#menus .menu-bt .ic { font-size: 15px; }
#menus .menu-bt .ca { font-size: 10px; opacity: .7; }
/* o grupo Mapa fica fixo e em destaque (ponto de partida) */
#menus .menu[data-grupo="mapa"] .menu-bt { color: var(--tx); font-weight: 600; }

#menus .drop {
  position: absolute; top: 100%; left: 0; z-index: 600; min-width: 210px;
  background: var(--panel); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 10px 10px; box-shadow: 0 10px 30px #0008; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
/* o display:flex acima (especificidade com #id) vencia o .hide global → menus presos abertos */
#menus .drop.hide { display: none; }
#menus .item-aba {
  background: none; border: none; color: var(--mut); text-align: left; cursor: pointer;
  font-size: 13px; padding: 9px 12px; border-radius: 7px; min-height: 40px;
}
#menus .item-aba:hover { background: #1f2630; color: var(--tx); }
#menus .item-aba.on { background: #1f2630; color: var(--blu); font-weight: 600; }

/* ============================ BUSCA NO HEADER ============================ */
#btn-busca {
  margin-left: 12px; background: #1b222c; color: var(--mut); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 7px; min-height: 36px;
}
#btn-busca:hover { color: var(--tx); border-color: var(--blu); }
#btn-busca kbd {
  background: #0d1117; border: 1px solid var(--line); border-radius: 4px;
  font-size: 10px; padding: 1px 5px; color: var(--mut);
}

/* ============================ MODAL DE BUSCA GLOBAL ============================ */
#busca-modal {
  position: fixed; inset: 0; background: #000b; z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
#busca-modal.hide { display: none; }
.busca-card {
  width: min(640px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 20px 60px #000a; overflow: hidden;
}
#busca-input {
  width: 100%; background: #0d1117; color: var(--tx); border: none;
  border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 16px; outline: none;
}
#busca-lista { max-height: 52vh; overflow-y: auto; }
.busca-item {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--tx); display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 16px; text-align: left; min-height: 48px;
}
.busca-item:hover, .busca-item.sel { background: #1f2630; }
.busca-item .bt-txt { display: flex; flex-direction: column; line-height: 1.3; }
.busca-item small { color: var(--mut); font-size: 12px; }
.bt-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; flex: none;
}
.bt-elemento { background: #58a6ff22; color: var(--blu); }
.bt-contrato { background: #3fb95022; color: var(--grn); }
.bt-endereco { background: #f0883e22; color: var(--org); }
.busca-vazio { padding: 14px 18px; color: var(--mut); font-size: 13px; }
.busca-dica { padding: 9px 16px; color: var(--mut); font-size: 11px; border-top: 1px solid var(--line); background: #10151c; }

/* ============================ BOTTOM-NAV (MOBILE) ============================ */
#botnav { display: none; }

/* ============================ LEGENDA COLAPSÁVEL ============================ */
.leg.colapso .leg-itens { display: none; }
.leg .leg-toggle {
  background: none; border: 1px solid var(--line); color: var(--mut); cursor: pointer;
  border-radius: 6px; padding: 2px 9px; font-size: 11px; min-height: 28px;
}
.leg .leg-itens { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ============================ RESPONSIVO (≤640px, técnico de campo) ============================ */
@media (max-width: 640px) {
  header { padding: 11px 16px; }
  header h1 { font-size: 16px; }
  #kpis { grid-template-columns: 1fr 1fr; padding: 10px 16px; gap: 8px; }
  main { padding: 12px 14px 76px; }      /* espaço pro bottom-nav */
  #map { height: 64vh; }
  #btn-busca .lb, #btn-busca kbd { display: none; }
  #btn-busca { padding: 8px 11px; }

  /* menus de topo viram uma régua rolável horizontal (gaveta = bottom-nav cobre o essencial) */
  #menus { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  #menus .menu-bt { padding: 11px 12px; white-space: nowrap; }
  #menus .drop { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; max-height: 50vh; overflow-y: auto; }

  /* bottom-nav fixo */
  #botnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--panel); border-top: 1px solid var(--line);
  }
  #botnav button {
    flex: 1; background: none; border: none; color: var(--mut); cursor: pointer;
    font-size: 11px; padding: 8px 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  #botnav button span { font-size: 19px; }
  #botnav button.on { color: var(--blu); }

  /* modal de busca ocupa a tela toda no celular */
  #busca-modal { padding-top: 0; align-items: stretch; }
  .busca-card { width: 100vw; height: 100vh; border-radius: 0; border: none; }
  #busca-lista { max-height: calc(100vh - 120px); }

  /* QA B12: tabelas largas (7 colunas) rolam na horizontal em vez de estourar a viewport.
     display:block + overflow faz a própria tabela virar uma faixa rolável no celular. */
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* Despacho: número da parada sobre o ponto da rota */
.leaflet-tooltip.rota-num { background: transparent; border: none; box-shadow: none;
  color: #fff; font-weight: 700; font-size: 11px; padding: 0; }