/* ---------------------------------------------------------------------
 * app.css — kleine aanvullingen op Bootstrap 5.
 * Doel: mobiel-first, compacte UI voor veldwerk.
 * --------------------------------------------------------------------- */

/* Algemene basis: iets ruimere tap-targets. */
html, body {
    -webkit-tap-highlight-color: transparent;
}

/* Kaart vult de hele viewport onder de header + toolbar. */
.vbmv-map {
    /* 56px navbar + 50px toolbar; aanpassen als layout verandert. */
    height: calc(100vh - 56px - 50px);
    width: 100%;
}

/* Toolbar zit sticky; geef 'm een vaste hoogte voor de berekening hierboven. */
.map-toolbar {
    min-height: 50px;
    z-index: 500;
}

/* Markers: groen = klaar, rood = nog te doen. We tekenen ze als
 * Leaflet circle markers, maar voor div-icon-fallback houden we deze
 * klassen achter de hand. */
.vbmv-marker-done {
    background: #198754;
    border: 2px solid white;
    border-radius: 50%;
    width: 16px; height: 16px;
}
.vbmv-marker-todo {
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
    width: 16px; height: 16px;
}

/* Soortregels: één rij, max ~48 px hoog. */
.vbmv-soort-list .list-group-item {
    padding: 6px 10px;
    min-height: 48px;
}
.vbmv-soort-list .min-w-0 {
    min-width: 0;
}
.vbmv-soort-list .form-select-sm.vbmv-tansley {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Soortnaam-kolommen: NL en wet. naam naast elkaar, beide gelijk
 * breed, allebei truncerend met ellipsis. Hover-title toont het
 * volledige veld. flex:1 1 0 + min-width:0 is nodig om binnen een
 * flex-row te kunnen truncen. */
.vbmv-soort-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Zoekresultaten dropdown — wrapper levert position context (zie
 * .vbmv-search-wrap in opname_form.php). Zonder die wrapper viel de
 * lijst (position: absolute) naar de viewport en kwam ie bovenaan
 * de pagina te staan. */
.vbmv-search-wrap {
    position: relative;
}
.vbmv-search-results {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-top: 2px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1050; /* boven .sticky-top (1020) en navbar */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
.vbmv-search-results .list-group-item {
    cursor: pointer;
}

/* --------- Leaflet popup-knoppen leesbaar maken ---------
 * Leaflet zet .leaflet-container a { color: #0078A8 }, wat met meer
 * specificiteit wint van .btn-success en onze 'Opname starten'-knop
 * blauwe tekst geeft op een groene achtergrond. Reset binnen popups. */
.leaflet-container a.btn,
.leaflet-popup-content a.btn {
    color: var(--bs-btn-color) !important;
}
.leaflet-container a.btn:hover,
.leaflet-popup-content a.btn:hover {
    color: var(--bs-btn-hover-color) !important;
}

/* --------- Synchronisatie-indicator per soortrij ---------
 * Drie zichtbare states:
 *   - 'saving'  → blauwe pulserende cirkel
 *   - 'saved'   → groen vinkje (vervaagt na 1.5s)
 *   - 'error'   → rode driehoek (blijft staan tot volgende poging)
 * Idle = geen icoon zichtbaar, maar de span houdt z'n breedte zodat
 * rijen niet 'klappen' bij state-wisselingen. */
.vbmv-sync {
    display: inline-block;
    width: 1.1em;
    min-width: 1.1em;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}
.vbmv-sync-spin {
    color: #0d6efd;
    animation: vbmv-spin 0.9s linear infinite;
}
.vbmv-sync-ok {
    color: #198754;
    transition: opacity .4s ease;
}
.vbmv-sync-ok.vbmv-fade { opacity: 0; }
.vbmv-sync-err { color: #dc3545; }

.vbmv-opname-soort.vbmv-row-error {
    background-color: rgba(220, 53, 69, 0.08);
}

@keyframes vbmv-spin {
    to { transform: rotate(360deg); }
}


/* Foto-preview netjes begrenzen. */
.vbmv-foto-preview {
    max-height: 200px;
    object-fit: contain;
}

/* Tap-target minimum 44 px op kleine schermen — eis voor veldgebruik. */
@media (max-width: 575.98px) {
    .vbmv-soort-list .btn,
    .map-toolbar .btn,
    .vbmv-opname .btn {
        min-height: 44px;
    }
    .vbmv-soort-list .vbmv-tansley,
    .vbmv-soort-list .form-check-input {
        min-height: 32px;
    }
    .vbmv-soort-list .form-check-input {
        width: 1.5rem; height: 1.5rem;
    }
}

/* Lege state op kaart-pagina centreren over de kaart. */
.vbmv-empty-overlay {
    z-index: 9999;
}