/**
 * map-tools.css - Stili per il modulo SitviMapTools
 *
 * Pannello strumenti mappa con design glassmorphic (backdrop-blur, ombre layered)
 * coerente con selection-toolbar.css. Contiene stili per:
 *
 *   - Pannello principale draggabile (posizione assoluta sulla mappa)
 *   - Header con drag handle e bottone chiudi
 *   - Sezioni accordion collassabili (Misurazioni, Overlay, Servizi)
 *   - Bottoni azione con stati active/hover/danger
 *   - Lista elementi (misurazioni, overlay, servizi) con azioni inline
 *   - Drop zone per upload file GeoJSON
 *   - Form input per connessione a servizi WMS/WFS
 *   - Tooltip misura che segue il cursore sulla mappa
 *   - Lista capabilities (GetCapabilities) per selezione layer
 *   - Spinner di caricamento animato
 *   - Scrollbar custom per pannello e lista capabilities
 *
 * Tutte le classi usano il prefisso .sitvi-mt- per evitare conflitti.
 * Palette colori: slate (testi), sky (#0ea5e9 accent), red (#ef4444 danger)
 *
 * @see assets/js/map-tools.js - Modulo JS che crea e gestisce questo pannello
 * @version 1.0.0
 */

/*
 * ===== PANNELLO PRINCIPALE =====
 * Container flottante posizionato in alto a destra della mappa.
 * Usa backdrop-filter per effetto glassmorphic.
 * Nascosto di default (display:none), visibile con classe .open.
 * Il JS _initDrag() converte right/top a left/top al primo trascinamento.
 */
.sitvi-mt-panel {
    position: absolute;
    top: 10px;
    right: 60px;
    width: 320px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    /* Sopra info-panel docked (500) e floating (1000): il pannello strumenti
       e' trascinabile e deve restare in primo piano quando aperto. */
    z-index: 1100;
    display: none;
}

.sitvi-mt-panel.open {
    display: block;
}

/*
 * Header pannello (drag handle)
 * Mostra titolo "Strumenti Mappa" e bottone chiudi.
 * cursor:grab indica che e' trascinabile; durante il drag diventa grabbing.
 * user-select:none previene la selezione testo durante il trascinamento.
 */
.sitvi-mt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.sitvi-mt-header:active {
    cursor: grabbing;
}

.sitvi-mt-panel.dragging {
    opacity: 0.92;
    transition: none;
}

.sitvi-mt-header-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s ease;
}

.sitvi-mt-header-close:hover {
    background: #f1f5f9;
    color: #334155;
}

/*
 * ===== SEZIONI ACCORDION =====
 * Tre sezioni collassabili: Misurazioni, Overlay GeoJSON, Servizi esterni.
 * Header cliccabile con icona chevron che ruota di -90deg quando collassato.
 * Body nascosto con display:none quando ha classe .collapsed.
 */
.sitvi-mt-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sitvi-mt-section:last-child {
    border-bottom: none;
}

.sitvi-mt-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sitvi-mt-section-header:hover {
    background: #f8fafc;
}

.sitvi-mt-section-header i {
    font-size: 14px;
    color: #64748b;
}

.sitvi-mt-section-header .sitvi-mt-chevron {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.sitvi-mt-section-header.collapsed .sitvi-mt-chevron {
    transform: rotate(-90deg);
}

.sitvi-mt-section-body {
    padding: 8px 14px 14px;
}

.sitvi-mt-section-body.collapsed {
    display: none;
}

/*
 * ===== BOTTONI MISURA E AZIONI =====
 * .sitvi-mt-btn: bottone generico (Distanza, Area, Connetti, Scarica, etc.)
 * .sitvi-mt-btn.active: stato attivo (sfondo sky-500 con glow)
 * .sitvi-mt-btn-sm: variante compatta per azioni secondarie
 * .sitvi-mt-btn-danger: variante rossa per azioni distruttive (Elimina)
 */
.sitvi-mt-measure-btns {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.sitvi-mt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    padding: 7px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sitvi-mt-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.sitvi-mt-btn:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.sitvi-mt-btn.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.sitvi-mt-btn i {
    font-size: 14px;
}

.sitvi-mt-btn-sm {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
}

.sitvi-mt-btn-danger {
    color: #ef4444;
    border-color: #fecaca;
}

.sitvi-mt-btn-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/*
 * ===== LISTA ELEMENTI (misurazioni, overlay, servizi) =====
 * Ogni elemento ha: pallino colore, info (titolo + valore), bottoni azione.
 * Layout flex con gap per allineamento uniforme.
 * I bottoni azione (zoom, toggle, elimina) sono 24x24px con hover visuale.
 */
.sitvi-mt-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitvi-mt-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: #f8fafc;
    font-size: 12px;
    transition: background 0.15s ease;
}

.sitvi-mt-list-item:hover {
    background: #f1f5f9;
}

.sitvi-mt-list-item-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sitvi-mt-list-item-info {
    flex: 1;
    min-width: 0;
}

.sitvi-mt-list-item-label {
    font-weight: 500;
    color: #334155;
}

.sitvi-mt-list-item-value {
    color: #64748b;
    font-size: 11px;
}

.sitvi-mt-list-item-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.sitvi-mt-list-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.sitvi-mt-list-item-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.sitvi-mt-list-item-btn.danger:hover {
    background: #fef2f2;
    color: #ef4444;
}

/* ===== PLACEHOLDER LISTA VUOTA ===== */
.sitvi-mt-empty {
    text-align: center;
    padding: 12px;
    color: #94a3b8;
    font-size: 12px;
}

/* ===== AZIONI FONDO SEZIONE (Scarica, Elimina tutte) ===== */
.sitvi-mt-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/*
 * ===== FORM: UPLOAD GEOJSON E CONNESSIONE SERVIZI =====
 * .sitvi-mt-file-label: drop zone con bordo tratteggiato per upload file GeoJSON
 * .sitvi-mt-input-group: riga con input + bottone/select affiancati
 * .sitvi-mt-input: campo testo per URL servizio esterno
 * .sitvi-mt-select: dropdown per tipo servizio (WMS/WFS)
 */
.sitvi-mt-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 8px;
}

.sitvi-mt-file-label:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
}

.sitvi-mt-input-group {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.sitvi-mt-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #334155;
    background: #fff;
    min-width: 0;
}

.sitvi-mt-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}

.sitvi-mt-select {
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #334155;
    background: #fff;
}

/*
 * ===== TOOLTIP MISURA SULLA MAPPA =====
 * Segue il cursore durante il disegno delle misurazioni.
 * Posizionato con left/top aggiornati via JS su mousemove.
 * pointer-events:none per non interferire con i click sulla mappa.
 * Sfondo scuro semi-trasparente con testo bianco per leggibilita'.
 */
.sitvi-mt-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap;
    /* Sopra info-panel (1000) per restare visibile anche quando il pannello
       di interrogazione e' aperto/docked. */
    z-index: 1100;
    transform: translate(14px, -50%);
}

/*
 * ===== LISTA CAPABILITIES WMS/WFS =====
 * Lista scrollabile dei layer disponibili dopo un GetCapabilities.
 * L'utente clicca un elemento per selezionarlo (.selected) e poi "Aggiungi".
 * Max-height 160px con scrollbar custom per non occupare troppo spazio.
 */
.sitvi-mt-cap-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
}

.sitvi-mt-cap-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    transition: background 0.1s;
}

.sitvi-mt-cap-item:hover {
    background: #f1f5f9;
}

.sitvi-mt-cap-item.selected {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 500;
}

/*
 * ===== SPINNER DI CARICAMENTO =====
 * Cerchietto animato usato durante GetCapabilities e caricamento WFS.
 * Ruota a 360deg in 0.6s con bordo-top colorato sky-500.
 */
.sitvi-mt-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #e2e8f0;
    border-top-color: #0ea5e9;
    border-radius: 50%;
    animation: sitviMtSpin 0.6s linear infinite;
}

@keyframes sitviMtSpin {
    to { transform: rotate(360deg); }
}

/*
 * ===== SCROLLBAR CUSTOM =====
 * Scrollbar sottile (4px) per pannello principale e lista capabilities.
 * Solo WebKit/Blink (Chrome, Edge, Safari). Firefox usa default OS.
 */
.sitvi-mt-panel::-webkit-scrollbar {
    width: 4px;
}

.sitvi-mt-panel::-webkit-scrollbar-track {
    background: transparent;
}

.sitvi-mt-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.sitvi-mt-cap-list::-webkit-scrollbar {
    width: 4px;
}

.sitvi-mt-cap-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}