/* ============================================================================
   LEAFLET FIXES - SIMPLIFICADO
   Baseado EXATAMENTE no test-clean.html que funcionou
   ============================================================================ */

/* Container do mapa - dimensoes e background */
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    background: #aad3df !important;
    position: relative !important;
    overflow: hidden !important;
    /* Conter visualizacao dentro do container */
}

/* Garantir que o Leaflet container esteja no contexto correto */
#fishing-map .leaflet-container {
    transform: translateZ(0) !important;
    /* Cria contexto de empilhamento */
    will-change: transform !important;
    -webkit-transform: translateZ(0) !important;
}

/* Garantir que controles do Leaflet sejam sempre visiveis */
.leaflet-control-zoom,
.leaflet-control-attribution {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 1000 !important;
}

/* Botões de zoom - garantir visibilidade e funcionalidade */
.leaflet-control-zoom a {
    background-color: white !important;
    color: #333 !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 28px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.leaflet-control-zoom a:hover {
    background-color: #f4f4f4 !important;
    color: #4285f4 !important;
}

.leaflet-control-zoom a:active {
    background-color: #e8e8e8 !important;
}

/* Desabilitar estados que podem interferir */
.leaflet-control-zoom a.leaflet-disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

/* Panes do Leaflet - garantir posicionamento e z-index correto */
.leaflet-pane {
    position: absolute !important;
}

.leaflet-map-pane {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: auto !important;
    width: 100% !important;
    height: 100% !important;
}

.leaflet-tile-pane {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 200 !important;
}

.leaflet-overlay-pane {
    z-index: 400 !important;
    pointer-events: auto !important;
    /* IMPORTANTE: permitir cliques nos markers */
    position: absolute !important;
}

.leaflet-overlay-pane svg {
    pointer-events: auto !important;
    /* SVG deve capturar cliques */
    position: relative !important;
    display: block !important;
    visibility: visible !important;
}

.leaflet-overlay-pane svg path {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.leaflet-overlay-pane canvas {
    pointer-events: none !important;
    /* Canvas do heatmap nao bloqueia cliques */
}

.leaflet-shadow-pane {
    z-index: 500 !important;
}

.leaflet-marker-pane {
    z-index: 600 !important;
}

.leaflet-tooltip-pane {
    z-index: 650 !important;
}

.leaflet-popup-pane {
    z-index: 700 !important;
}

/* Tiles do Leaflet - garantir renderizacao correta */
.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    width: 256px !important;
    height: 256px !important;
    image-rendering: auto !important;
    -ms-interpolation-mode: bicubic !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
}

/* Imagens dentro de tiles */
.leaflet-tile-container img,
.leaflet-image-layer img,
.leaflet-layer img {
    max-width: none !important;
    max-height: none !important;
    image-rendering: auto !important;
    -ms-interpolation-mode: bicubic !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Garantir que o tile container seja posicionado corretamente */
.leaflet-tile-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    transform-origin: 0 0 !important;
}

/* Layer de tiles */
.leaflet-tile-pane .leaflet-layer {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

/* Garantir que tiles loaded sejam visiveis */
.leaflet-tile-loaded {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Animacao de tiles - CRITICO para renderizacao */
.leaflet-zoom-animated {
    -webkit-transform-origin: 0 0 !important;
    -ms-transform-origin: 0 0 !important;
    transform-origin: 0 0 !important;
}

/* Garantir que transform3d funcione */
.leaflet-tile-container.leaflet-zoom-animated {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    -webkit-transform-origin: 0 0 !important;
    -ms-transform-origin: 0 0 !important;
    transform-origin: 0 0 !important;
}

/* Garantir visibilidade de todos os tiles */
.leaflet-tile {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Sobrescrever estilos globais de img que podem interferir */
#fishing-map img,
.leaflet-container img,
.leaflet-tile-pane img,
.leaflet-overlay-pane img {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
}

/* Garantir que markers funcionem */
.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.leaflet-interactive {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Markers de locais - garantir clicabilidade */
.location-marker {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* SVG paths dos CircleMarkers devem ser clicáveis */
.leaflet-overlay-pane svg path.location-marker {
    cursor: pointer !important;
    pointer-events: all !important;
}

/* Todos os paths interativos no overlay pane */
.leaflet-overlay-pane svg path.leaflet-interactive {
    cursor: pointer !important;
    pointer-events: all !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* CRITICO: CircleMarkers de locais - FORÇAR VISIBILIDADE */
.leaflet-overlay-pane svg path {
    fill-opacity: 0.8 !important;
    stroke-opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
}

/* Garantir que círculos (CircleMarker) sejam sempre visíveis */
.leaflet-overlay-pane svg circle {
    fill-opacity: 0.8 !important;
    stroke-opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
}

/* Permitir cliques no mapa para pin customizado - SOMENTE no modal */
.modal-overlay .leaflet-container {
    cursor: crosshair !important;
    /* Cursor de mira para indicar que pode clicar */
}

.modal-overlay .leaflet-grab {
    cursor: crosshair !important;
}

.modal-overlay .leaflet-dragging {
    cursor: grabbing !important;
}

/* Mapa principal - cursor normal */
#fishing-map.leaflet-container {
    cursor: default !important;
}

#fishing-map .leaflet-grab {
    cursor: grab !important;
}

#fishing-map .leaflet-dragging {
    cursor: grabbing !important;
}

/* Marker pane - garantir visibilidade */
.leaflet-marker-pane {
    z-index: 600 !important;
}

.leaflet-marker-pane .leaflet-marker-icon {
    visibility: visible !important;
    display: block !important;
}

/* Popup - fundo branco e estilos melhorados */
.leaflet-popup-content-wrapper {
    background: white !important;
    color: #333 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
    padding: 1px !important;
}

.leaflet-popup-content {
    margin: 16px 20px !important;
    background: white !important;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    min-width: 120px !important;
}

@media (max-width: 480px) {
    .leaflet-popup-content {
        font-size: 11px !important;
        margin: 10px 12px !important;
        min-width: auto !important;
    }
}

.leaflet-popup-content strong {
    color: var(--primary-color, #4285f4) !important;
    font-weight: 600 !important;
}

.leaflet-popup-content small {
    color: #666 !important;
    font-size: 12px !important;
}

.leaflet-popup-tip {
    background: white !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-popup a.leaflet-popup-close-button {
    color: #999 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
}

.leaflet-popup a.leaflet-popup-close-button:hover {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
}

/* Proxy do Leaflet - usado para zoom */
.leaflet-proxy {
    position: absolute !important;
    visibility: hidden !important;
}

/* Forcar visibilidade de todos os elementos do map-pane */
.leaflet-map-pane,
.leaflet-map-pane>* {
    visibility: visible !important;
}

/* Tile fade animation - desabilitar para melhor performance */
.leaflet-fade-anim .leaflet-tile {
    will-change: auto !important;
}

/* Zoom hide - garantir que elementos ocultos no zoom nao interfiram */
.leaflet-zoom-hide {
    position: absolute !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* IMPORTANTE: Marker do usuario NAO pode ter zoom-hide */
.user-location-marker.leaflet-zoom-hide {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Marker de localizacao do usuario - permitir estilos inline */
.user-location-marker,
.leaflet-marker-icon.user-location-marker {
    z-index: 1000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* REMOVER estilos que sobrescrevem cores e dimensões inline */
/* Permite que o divIcon controle cor, tamanho e posição via HTML inline */

/* CircleMarker do usuário - SEM ANIMAÇÃO (animação removida) */

/* Marker de localizacao customizado (click to pin) */
.custom-location-marker {
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.custom-location-marker div {
    display: flex !important;
    visibility: visible !important;
    position: relative !important;
}

/* MARKERS CUSTOMIZADOS DO ASSISTENTE E MODAL */
.target-location-icon-custom,
.user-location-marker-custom,
.leaflet-marker-icon.target-location-icon-custom,
.leaflet-marker-icon.user-location-marker-custom,
.leaflet-div-icon.target-location-icon-custom,
.leaflet-div-icon.user-location-marker-custom {
    background: transparent !important;
    border: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    /* margin: 0 !important; REMOVED to allow Leaflet anchor positioning */
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Garantir que os DIVs internos dos markers sejam exibidos corretamente */
.target-location-icon-custom>div,
.user-location-marker-custom>div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Pulsing marker animation */
.pulsing-marker {
    width: 16px !important;
    height: 16px !important;
    background-color: #4285f4 !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7) !important;
    animation: pulse-blue 1.5s infinite !important;
    display: block !important;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
}

/* Botao de localizacao customizado */
.leaflet-control-custom {
    background: white !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
    margin-top: 10px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.location-button {
    width: 30px !important;
    height: 30px !important;
    background: white !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #333 !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.location-button:hover {
    background: #f4f4f4 !important;
    color: #4285f4 !important;
}

.location-button:active {
    background: #e8e8e8 !important;
}

.location-button svg {
    pointer-events: none !important;
}

/* Container de controles do Leaflet */
.leaflet-control-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 1000 !important;
}

.leaflet-control-container>*,
.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom,
.leaflet-control,
.leaflet-bar,
.leaflet-control-zoom,
.leaflet-control-custom {
    pointer-events: auto !important;
}

/* Posicionamento dos controles */
.leaflet-top,
.leaflet-bottom {
    position: absolute !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

.leaflet-top {
    top: 0 !important;
}

.leaflet-bottom {
    bottom: 0 !important;
}

.leaflet-left {
    left: 0 !important;
}

.leaflet-right {
    right: 0 !important;
}

.leaflet-top.leaflet-left {
    top: 10px !important;
    left: 10px !important;
}

.leaflet-top.leaflet-right {
    top: 10px !important;
    right: 10px !important;
}

.leaflet-bottom.leaflet-left {
    bottom: 10px !important;
    left: 10px !important;
}

.leaflet-bottom.leaflet-right {
    bottom: 10px !important;
    right: 10px !important;
}



/* ============================================================================
   FIX MARKERS VISIBILITY & Z-INDEX
   ============================================================================ */

/* FIX: Garantir que markers customizados fiquem acima do heatmap */
.target-location-icon-custom,
.user-location-marker-custom,
.leaflet-marker-icon.target-location-icon-custom,
.leaflet-marker-icon.user-location-marker-custom {
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
}

/* FIX: Resetar estilos que possam estar escondendo o ícone */
.leaflet-div-icon.target-location-icon-custom,
.leaflet-div-icon.user-location-marker-custom {
    background: transparent !important;
    border: none !important;
}



/* ============================================================================
   MARKER STYLES (Migrated from maps-markers.js)
   ============================================================================ */

/* Pulsing Blue Dot (User Location) */
.pulsing-marker {
    width: 16px;
    height: 16px;
    background-color: #4285f4;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
    animation: pulse-blue 1.5s infinite;
    display: block !important;
    position: relative;
    /* Ensure it renders within parent */
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
}

/* Green Target Marker */
.target-marker-inner {
    width: 16px;
    height: 16px;
    background-color: #28a745;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: block !important;
    margin: 0;
    padding: 0;
    box-sizing: content-box !important;
    /* Critical: Ensure size is 16+4=20px */
}

/* Ensure Leaflet DivIcon wrappers don't hide the content */
.leaflet-div-icon.user-location-marker-custom,
.leaflet-div-icon.target-location-icon-custom {
    background: transparent !important;
    border: none !important;
}