/* =========================================================
   TOOLTIPS.CSS - Sistema Unificado de Tooltips
   Versão: 4.1 - AJUSTADO: Largura do campo cod_imovel
   Projeto: MPPE Caatinga Resiste 2026
========================================================= */

/* ===== CONTAINER BASE DO TOOLTIP ===== */
.tooltip-container {
    max-width: 400px;
    min-width: 280px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0;
    overflow: hidden;
    font-family: var(--font-primary);
    animation: fadeIn 0.2s ease-out;
}

/* ===== CABEÇALHO DO TOOLTIP ===== */
.tooltip-header {
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tooltip-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    flex: 1;
}

.tooltip-badge {
    background-color: var(--bg-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-sm);
    white-space: nowrap;
}

/* ===== CORPO DO TOOLTIP ===== */
.tooltip-body {
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.tooltip-body.single-col {
    grid-template-columns: 1fr;
}

/* ===== LINHA DE INFORMAÇÃO ===== */
.tooltip-info-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tooltip-info-label {
    font-weight: 600;
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ===== VALOR DO CAMPO - AJUSTE PARA COD_IMOVEL ===== */
.tooltip-info-value {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    background-color: var(--bg-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
    
    /* AJUSTE: Permite que o texto não quebre e adiciona scroll horizontal se necessário */
    word-break: keep-all; /* Não quebra palavras */
    white-space: nowrap; /* Mantém em linha única */
    overflow-x: auto; /* Adiciona scroll horizontal se necessário */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Scroll suave em mobile */
    scrollbar-width: thin; /* Scroll mais fino */
    font-family: 'Courier New', monospace; /* Fonte monospace para melhor legibilidade */
    letter-spacing: -0.5px; /* Ajuste fino para códigos longos */
}

/* Estilo da scrollbar para não poluir visualmente */
.tooltip-info-value::-webkit-scrollbar {
    height: 4px;
}

.tooltip-info-value::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.tooltip-info-value::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.tooltip-info-value::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.tooltip-info-value.highlight {
    background-color: #fff3e0;
    font-weight: bold;
    font-size: var(--font-size-base);
}

/* ===== RODAPÉ DO TOOLTIP ===== */
.tooltip-footer {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
}

/* ===== ESTILOS ESPECÍFICOS POR TIPO ===== */

/* -- Alertas -- */
.tooltip-container.alertas .tooltip-header {
    background-color: var(--color-alertas-header);
}

.tooltip-container.alertas .tooltip-badge {
    color: var(--color-alertas-header);
    border: 1px solid var(--color-alertas-light);
}

.tooltip-container.alertas .tooltip-info-label {
    color: var(--color-alertas-header);
}

.tooltip-container.alertas .tooltip-info-value {
    border-left-color: var(--color-alertas);
}

/* -- CAR -- */
.tooltip-container.car .tooltip-header {
    background-color: var(--color-car);
}

.tooltip-container.car .tooltip-badge {
    color: var(--color-car);
    border: 1px solid var(--color-car-light);
}

.tooltip-container.car .tooltip-info-label {
    color: var(--color-car);
}

.tooltip-container.car .tooltip-info-value {
    border-left-color: var(--color-car);
    
    /* AJUSTE ESPECÍFICO PARA CAR: Código maior */
    font-size: calc(var(--font-size-sm) - 1px); /* Reduz um pouco a fonte */
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* -- Unidades de Conservação -- */
.tooltip-container.uc .tooltip-header {
    background-color: var(--color-uc);
}

.tooltip-container.uc .tooltip-badge {
    color: var(--color-uc);
    border: 1px solid var(--color-uc-light);
}

.tooltip-container.uc .tooltip-info-label {
    color: var(--color-uc);
}

.tooltip-container.uc .tooltip-info-value {
    border-left-color: var(--color-uc);
}

/* -- Embargos IBAMA -- */
.tooltip-container.embargos .tooltip-header {
    background-color: var(--color-embargos);
}

.tooltip-container.embargos .tooltip-badge {
    color: var(--color-embargos);
    border: 1px solid var(--color-embargos-light);
}

.tooltip-container.embargos .tooltip-info-label {
    color: var(--color-embargos);
}

.tooltip-container.embargos .tooltip-info-value {
    border-left-color: var(--color-embargos);
}

.tooltip-container.embargos .tooltip-info-value.area-destaque {
    background-color: #ffebee;
    font-weight: bold;
    color: var(--color-embargos);
}

/* -- Estado -- */
.tooltip-container.estado .tooltip-header {
    background-color: var(--color-primary);
}

/* ===== SOBRESCRITAS LEAFLET PARA TOOLTIPS ===== */
.leaflet-tooltip.custom-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Esconde a setinha padrão */
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
    content: none !important;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
    .tooltip-container {
        max-width: 300px;
        min-width: 240px;
    }
    
    .tooltip-body {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .tooltip-header h4 {
        font-size: var(--font-size-sm);
    }
    
    /* Ajuste para mobile */
    .tooltip-info-value {
        font-size: calc(var(--font-size-sm) - 1px);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}