/* ==========================================================================
   style.css - Centrale styling voor het Wandel Logboek
   ========================================================================== */

/* --- 1. Algemene Kaart Styling (Leaflet) --- */
/* Lichte slate kleur achter de kaart */
.leaflet-container { 
    background: #f8fafc; 
}

/* Custom donkere/grijze map tiles (gebruikt op index.php voor een strakke look) */
.dark-map-tiles,
.dark-map-tiles .leaflet-tile-pane {
    filter: grayscale(100%) opacity(0.6) contrast(1.2);
}

/* --- 2. Specifieke styling voor de detailpagina kaart --- */
#hero-map { 
    height: 50vh; 
    width: 100%; 
    z-index: 10; 
    min-height: 350px; 
}

/* --- 3. Tabel Interacties --- */
/* Sorteerbare tabelkoppen op het dashboard */
th.sortable { 
    cursor: pointer; 
    user-select: none; 
}
th.sortable:hover { 
    color: #10b981; /* Tailwind emerald-500 */
}

/* --- 4. Animaties --- */
/* Draai-animatie voor het laad-icoontje (spinner) */
@keyframes spin { 
    100% { transform: rotate(360deg); } 
}
.spin-anim { 
    animation: spin 1s linear infinite; 
}

/* --- 5. Accordeon Menu (voor stats.php) --- */
.accordion-content { 
    transition: max-height 0.3s ease-out; 
    max-height: 0; 
    overflow: hidden; 
}
.accordion-open { 
    max-height: 1500px; 
} 
.rotate-180 { 
    transform: rotate(180deg); 
}

/* --- 6. Moderne Scrollbars --- */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}