/*
  =============================================
  INMAP DRAWING TOOLS MENU
  Nicholas — 15/05/2026, reescrito 17/07/2026 (Doc 36)

  Era um popover com lista de texto; agora é uma coluna de ícones no mesmo
  padrão visual das colunas de medição/Geoman que ficam sobre o canto
  superior-esquerdo do mapa (ver Doc 36). Persistente enquanto aberta — não
  fecha ao clicar fora, só pelo próprio botão pincel, Esc, ou por outra
  ferramenta exclusiva da toolbar superior (deactivateTopToolbarTools).
  Identidade Millenio (#00623e).
  =============================================
*/

/* Indicador visual no botão da toolbar enquanto a coluna está aberta */
#liDrawingTools.active i {
    color: #00623e;
}

/* Restaura o afastamento do CORNER INTEIRO do Geoman (.inmap-geoman-corner —
   onde vivem as colunas de desenho/edição, operações espaciais e esta
   coluna nova) em telas menores. Regra legada responsiva (`css/main/
   responsivo/mobile-sidebar.css`, "6. FIX LEAFLET LEFT CONTROLS", ativa
   abaixo de 1360px de largura) zera margin-left de QUALQUER elemento com a
   classe genérica "leaflet-left" via !important — e .inmap-geoman-corner
   carrega essa classe (criada assim pelo próprio Geoman em
   inmap-geoman-annotations.js), então perde o `margin-left:45px` do
   main.css nessa faixa de largura, colando o corner inteiro (com as 3
   colunas dentro, incluindo esta) contra a coluna de medição. Especificidade
   igual (0,0,1,1) não bastaria pra empatar com a regra legada por causa da
   ordem de carregamento (mesma lição do bug de margem desta ADR) — usa um
   seletor com especificidade deliberadamente mais alta (0,0,1,2). */
html body .inmap-geoman-corner {
    margin-left: 45px !important;
}

/* ─── Coluna (Leaflet control, fluxo normal — SEM position:absolute) ────── */

/* A coluna é anexada DENTRO de .inmap-geoman-corner com a classe
   "leaflet-control" (JS), que já ganha margin-left:10px do CSS base do
   Leaflet e participa do FLUXO NORMAL do corner — exatamente como as
   toolbars nativas do Geoman (desenho, edição, operações espaciais) já se
   posicionam entre si. Nenhum left/top calculado: o navegador empilha
   sozinho, do jeito certo, em qualquer tamanho de tela. Várias tentativas
   anteriores de imitar essa posição via position:absolute falharam em
   produção (ver ADR-227) — a correção foi entrar no mesmo sistema de fluxo
   que todo o resto já usa, não tentar reproduzi-lo de fora. */
.inmap-drawing-tools-corner {
    display: none;
    pointer-events: auto;
}

.inmap-drawing-tools-corner.is-open {
    display: block;
}

/* Quando anexada DENTRO da toolbar de operações espaciais do Geoman (3ª
   coluna) — o caso normal, ver JS `spatialOpsToolbar()` — usa top:100% para
   ficar colada logo abaixo dela, sem medir a altura (que varia conforme
   quantos botões espaciais estão habilitados). Funciona porque essa toolbar
   já é `position:absolute` (main.css), tornando-se o próprio contexto de
   posicionamento dos filhos — não precisa de nenhum cálculo em JS. */
/* Seletor composto (2 classes no mesmo elemento) para ter especificidade
   igual às regras do leaflet.css base que precisam ser zeradas aqui
   (".leaflet-top .leaflet-control { margin-top:10px }" e
   ".leaflet-left .leaflet-control { margin-left:10px }", ambas com 2
   classes de especificidade). Mesmo com especificidade igual, o
   drawing-tools-menu.css é incluído em index.html ANTES do leaflet.css
   (ordem histórica dos <link>, não relacionada a este módulo) — em caso de
   empate de especificidade, quem carrega DEPOIS vence a cascata, e é o
   Leaflet. Por isso o !important abaixo: sem ele a coluna nascia deslocada
   10px pra baixo e 10px pra direita da toolbar espacial (margin-top/
   margin-left do Leaflet vencendo mesmo com o seletor composto). */
.inmap-drawing-tools-corner.inmap-drawing-tools-corner--below-spatial {
    position: absolute;
    /* +6px de respiro visual entre a 3ª coluna e esta — continua relativo a
       100% da altura real da toolbar espacial, então se adapta sozinho
       independente de quantos botões espaciais estiverem habilitados. */
    top: calc(100% + 6px);
    left: 0;
    margin: 0 !important;
}

/* Dimensões IDÊNTICAS às demais colunas do mapa: os botões do Leaflet
   (.leaflet-bar a) são 26px, ou 30px quando o container tem .leaflet-touch —
   e o toolbar do Geoman herda isso. Espelhamos as duas regras (base + touch)
   para a coluna nascer com exatamente o mesmo tamanho, seja qual for o
   dispositivo. Box-shadow/border-radius idênticos ao .leaflet-bar. */
.inmap-drawing-tools-bar {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    width: 26px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.leaflet-touch .inmap-drawing-tools-bar {
    width: 30px;
}

/* ─── Botões (um ícone por ferramenta) — cor de ícone #444 (mesmo tom dos
   ícones SVG do Geoman ao lado, que usam fill/stroke #5B5B5B/#444). ────── */
.inmap-drawing-tools-btn {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    background: #ffffff;
    color: #444;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.leaflet-touch .inmap-drawing-tools-btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}

.inmap-drawing-tools-bar .inmap-drawing-tools-btn:first-child {
    border-radius: 4px 4px 0 0;
}

.inmap-drawing-tools-bar .inmap-drawing-tools-btn:last-child {
    border-bottom: none;
    border-radius: 0 0 4px 4px;
}

.inmap-drawing-tools-btn:hover,
.inmap-drawing-tools-btn:focus {
    background-color: #f4f4f4;
    outline: none;
}

.inmap-drawing-tools-btn.active {
    background-color: #e0e0e0;
}

/*
  =============================================
  Aplica o MESMO visual aos dropdowns existentes:
  - #ddlPrint              (Impressão)
  - #ddlHelpMenu           (Ajuda)
  - #dropdown-mnupper-actions (Mapas Temáticos)
  =============================================
*/

#ddlPrint.dropdown-menu,
#ddlHelpMenu.dropdown-menu,
#dropdown-mnupper-actions.dropdown-menu {
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 6px 0;
    margin-top: 4px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

#ddlPrint .head-list,
#ddlHelpMenu .head-list,
#dropdown-mnupper-actions .head-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#ddlPrint .head-list > li > a,
#ddlHelpMenu .head-list > li > a,
#dropdown-mnupper-actions .head-list > li > a {
    cursor: pointer;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #333333;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    line-height: 1.2;
}

#ddlPrint .head-list > li > a:hover,
#ddlPrint .head-list > li > a:focus,
#ddlHelpMenu .head-list > li > a:hover,
#ddlHelpMenu .head-list > li > a:focus,
#dropdown-mnupper-actions .head-list > li > a:hover,
#dropdown-mnupper-actions .head-list > li > a:focus {
    background-color: #f0f7f4;
    color: #00623e;
    outline: none;
}

#ddlPrint .head-list > li > a:active,
#ddlHelpMenu .head-list > li > a:active,
#dropdown-mnupper-actions .head-list > li > a:active {
    background-color: #d9ebe2;
}

#ddlPrint .head-list > li > a > i,
#ddlHelpMenu .head-list > li > a > i,
#dropdown-mnupper-actions .head-list > li > a > i {
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: #00623e;
    margin: 0;
}

#ddlPrint .head-list > li > a:hover > i,
#ddlHelpMenu .head-list > li > a:hover > i,
#dropdown-mnupper-actions .head-list > li > a:hover > i {
    color: #004d30;
}

#ddlPrint .head-list > li > a > span,
#ddlHelpMenu .head-list > li > a > span,
#dropdown-mnupper-actions .head-list > li > a > span {
    flex: 1;
    white-space: nowrap;
}