/**
 * com_zlapptrailcondition - "Verken een locatie" (site-kant)
 *
 * @copyright   (C) 2026 Armand Jansen. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

.zlapptrailcondition-explore {
    max-width: 720px;
    margin: 0 auto;
}

.zlapptrailcondition-intro {
    color: #555;
    margin-bottom: 1rem;
}

.zlapptrailcondition-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.zlapptrailcondition-search-wrap {
    position: relative;
    flex: 1 1 260px;
}

.zlapptrailcondition-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.zlapptrailcondition-search-results {
    position: absolute;
    z-index: 500;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.zlapptrailcondition-search-results li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.zlapptrailcondition-search-results li:hover,
.zlapptrailcondition-search-results li:focus {
    background: #f0f0f0;
}

.zlapptrailcondition-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.zlapptrailcondition-btn-primary {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
}

/* (op verzoek: "vergroenen" bleek "vergroten" te zijn) - de
   kaart was met een vaste 400px op mobiel merkbaar klein t.o.v. de
   rest van de pagina. Nu schaalt de hoogte mee met het beschikbare
   scherm (60vh) i.p.v. een vaste waarde, met een ondergrens zodat 'm
   op een kort scherm niet te klein wordt, en een bovengrens zodat 'm
   op een heel lang scherm niet buitensporig groot wordt. Groter op
   bredere schermen (desktop) via de media query hieronder. */
#zlapptrailcondition-explore-map {
    width: 100%;
    height: 60vh;
    min-height: 420px;
    max-height: 620px;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    #zlapptrailcondition-explore-map {
        height: 65vh;
        max-height: 700px;
    }
}

.zlapptrailcondition-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* 7-punts mul-tot-modder-schaal - warm/droog naar koel/nat */
/* (op verzoek): doorlopende kleurgradiënt geel -> groen ->
   blauw over de 7-punts-schaal, i.p.v. de eerdere ad-hoc kleuren
   (extreem_modderig eindigde bijvoorbeeld in paars, geen logische
   schaal). Bewust intenser/verzadigder richting de twee EXTREMEN
   (extreem_mul/extreem_modderig) en rustiger/pasteller richting het
   kalme midden (ideaal) - ondersteunt visueel dat de extremen de
   aandachtspunten zijn. */
.zlapptrailcondition-badge.extreem_mul { background: #f9a825; color: #4a2c00; }
.zlapptrailcondition-badge.mul { background: #ffca28; color: #5c3d00; }
.zlapptrailcondition-badge.licht_mul { background: #d4e157; color: #3e4300; }
.zlapptrailcondition-badge.ideaal { background: #a5d6a7; color: #1b5e20; }
.zlapptrailcondition-badge.vochtig { background: #4dd0e1; color: #00363a; }
.zlapptrailcondition-badge.modderig { background: #4fc3f7; color: #01324a; }
.zlapptrailcondition-badge.extreem_modderig { background: #1976d2; color: #ffffff; }

/* v2.21.37 (BRO-subtype-mapping): eigen droog_nat-schaal voor verharde
   ondergrond - bewust GEEN hergebruik van de mul_modder-kleuren
   hierboven (andere schaal, andere betekenis). */
.zlapptrailcondition-badge.droog { background: #d7ccc8; color: #4e342e; }
.zlapptrailcondition-badge.nat { background: #29b6f6; color: #012e42; }
.zlapptrailcondition-badge.extreem_nat { background: #0d47a1; color: #ffffff; }

/* (op verzoek: "het tonen van de volledige schaal"): een
   horizontale balk met de volledige geel->groen->blauw-gradiënt
   (dezelfde 7 kleuren als de badge hierboven, als vloeiende overgang
   i.p.v. losse blokken) plus een wijzer die de huidige positie toont. */
.zlapptrailcondition-scale {
    position: relative;
    margin: 0.6rem 0 1.2rem;
}

.zlapptrailcondition-scale-track {
    height: 0.9rem;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        #f9a825 0%,
        #ffca28 16.6%,
        #d4e157 33.3%,
        #a5d6a7 50%,
        #4dd0e1 66.6%,
        #4fc3f7 83.3%,
        #1976d2 100%
    );
}

.zlapptrailcondition-scale-marker {
    position: absolute;
    top: -0.25rem;
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.7rem solid #1a1a1a;
    transform: translateX(-50%);
    transition: left 0.2s ease-out;
}

.zlapptrailcondition-scale-endlabels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #777;
    margin-top: 0.3rem;
}

/* (op verzoek: "geschiedenis/trend-grafiek per punt") */
.zlapptrailcondition-history {
    margin: 1rem 0;
}

.zlapptrailcondition-history h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.zlapptrailcondition-history-svg {
    width: 100%;
    height: 100px;
    background: #f7f7f7;
    border-radius: 4px;
}

.zlapptrailcondition-history-empty {
    font-size: 0.85rem;
    color: #777;
    font-style: italic;
}

/* v2.21.32 (op verzoek: "verwachting i.p.v. alleen nu") */
.zlapptrailcondition-forecast {
    margin: 1rem 0;
}

.zlapptrailcondition-forecast h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.zlapptrailcondition-forecast-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* zelfde 7-kleuren-schema als .zlapptrailcondition-badge hierboven -
   een aparte kleur zou de indruk wekken dat dit een ander soort
   informatie is, terwijl het dezelfde mul-tot-modder-schaal is, alleen
   dan voor een toekomstig moment. */
.zlapptrailcondition-forecast-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    min-width: 5.5rem;
    font-size: 0.8rem;
}

.zlapptrailcondition-forecast-chip-time {
    font-size: 0.7rem;
    opacity: 0.75;
}

.zlapptrailcondition-forecast-chip-label {
    font-weight: 600;
}

.zlapptrailcondition-forecast-chip-moisture {
    font-size: 0.7rem;
    opacity: 0.75;
}

.zlapptrailcondition-forecast-chip.extreem_mul { background: #f9a825; color: #4a2c00; }
.zlapptrailcondition-forecast-chip.mul { background: #ffca28; color: #5c3d00; }
.zlapptrailcondition-forecast-chip.licht_mul { background: #d4e157; color: #3e4300; }
.zlapptrailcondition-forecast-chip.ideaal { background: #a5d6a7; color: #1b5e20; }
.zlapptrailcondition-forecast-chip.vochtig { background: #4dd0e1; color: #00363a; }
.zlapptrailcondition-forecast-chip.modderig { background: #4fc3f7; color: #01324a; }
.zlapptrailcondition-forecast-chip.extreem_modderig { background: #1976d2; color: #ffffff; }

/* v2.21.37 (BRO-subtype-mapping) */
.zlapptrailcondition-forecast-chip.droog { background: #d7ccc8; color: #4e342e; }
.zlapptrailcondition-forecast-chip.nat { background: #29b6f6; color: #012e42; }
.zlapptrailcondition-forecast-chip.extreem_nat { background: #0d47a1; color: #ffffff; }

.zlapptrailcondition-surface-override-note {
    font-size: 0.85em;
    color: #555;
    font-style: italic;
    margin: 0.25rem 0 0.75rem;
}

/* - trend-badge naast de hoofdbadge */
.zlapptrailcondition-trend-badge {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85em;
    font-weight: 600;
    vertical-align: middle;
}

.zlapptrailcondition-trend-natter {
    color: #0d47a1;
}

.zlapptrailcondition-trend-droger {
    color: #8a5a00;
}

.zlapptrailcondition-trend-stabiel {
    color: #555;
}

/* - betrouwbaarheid */
.zlapptrailcondition-confidence-hoog {
    color: #1b5e20;
}

.zlapptrailcondition-confidence-gemiddeld {
    color: #8a5a00;
}

.zlapptrailcondition-confidence-laag {
    color: #c62828;
}

.zlapptrailcondition-result-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.zlapptrailcondition-result-details dt {
    font-weight: 600;
    color: #555;
}

/*: waterbalans-detailrij (regen/verdamping/drainage) - iets
   kleiner en grijzer dan de hoofdcijfers, zelfde soort ondergeschikte
   toon als een voetnoot/diagnose-regel. */
.zlapptrailcondition-result-details dd#zlapptrailcondition-result-waterbalance {
    font-size: 0.9em;
    color: #777;
}

.zlapptrailcondition-reports ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.zlapptrailcondition-reports li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.zlapptrailcondition-report-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 420px;
}

.zlapptrailcondition-report-form select,
.zlapptrailcondition-report-form textarea {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
}

.zlapptrailcondition-login-prompt {
    color: #555;
    font-style: italic;
}

.zlapptrailcondition-status.is-error {
    color: #c62828;
}

.zlapptrailcondition-report-status.is-success {
    color: #2e7d32;
}

.zlapptrailcondition-report-status.is-error {
    color: #c62828;
}

/* (op verzoek: "het vinkje en de tekst mag gewijzigd worden in
   een icoon"): compacte, cirkelvormige icoon-badge i.p.v. de eerdere
   lange tekstzin - drie duidelijke statussen (toegankelijk/niet
   toegankelijk/onbekend), altijd zichtbaar, naast de mul-modder-badge.
   Uitleg staat als title/aria-label op het element (JS), niet meer
   inline als tekst. */
/* (naar aanleiding van "het icoon voor toegankelijkheid is
   nog steeds erg onduidelijk"): van een vaste cirkel (icoon-only) naar
   een pil-vorm met zichtbare tekst erbij - zelfde visuele patroon als
   de conditiebadge ("Ideaal · 14.18%"), bewust hergebruikt zodat het
   meteen herkenbaar is als "hetzelfde soort ding". Een tooltip alleen
   ontdek je op mobiel niet zonder lang in te drukken. */
.zlapptrailcondition-access-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    /*: minder extreem afgerond dan de vorige volle pil-vorm
       (999px) - met een reden erbij (bv. "(OSM: fietsen niet
       toegestaan (bicycle=no))") kan de tekst nu over meerdere regels
       lopen, en dat oogt lelijk in een volledig ronde pil. */
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0 0.4rem 0.5rem 0;
    vertical-align: middle;
    cursor: default;
    max-width: 100%;
}

/* (naar aanleiding van "een klein groen ovaal ballonnetje blijft
   staan naast 'stabiel'"): klassieke CSS-valkuil - een class-selector
   met een expliciete `display`-waarde overschrijft het HTML
   `hidden`-attribuut (dat normaal `display: none` toepast via de
   browser se user-agent-stylesheet), want een auteur-stylesheet-regel
   wint altijd van de user-agent-stylesheet. Zonder deze regel bleef
   het element dus ZICHTBAAR ondanks `hidden = true` in JS, zodra
   `display: inline-flex` hierboven van toepassing was. */
.zlapptrailcondition-access-icon[hidden] {
    display: none;
}

.zlapptrailcondition-access-icon-positive {
    background: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #2e7d32;
}

.zlapptrailcondition-access-icon-negative {
    background: #fdecea;
    color: #c62828;
    border: 2px solid #c62828;
}

.zlapptrailcondition-access-icon-unknown {
    background: #f0f0f0;
    color: #888;
    border: 2px solid #ccc;
}

/*: onbevestigde OSM-suggestie - zelfde kleurrichting
   als de bevestigde variant, maar met een gestippelde rand i.p.v. een
   volle, om het verschil met een echte, door leden bevestigde status
   visueel te ondersteunen (nooit van toepassing op "onbekend" - die
   heeft sowieso geen bevestigde/suggestie-onderscheid). */
.zlapptrailcondition-access-icon-suggestion {
    border-style: dashed;
    opacity: 0.85;
}

/* (op verzoek: "de informatie is nu erg uitgebreid, kunnen we
   dit standaard verbergen"): native <details>/<summary>, minimale
   styling - de browser doet het meeste werk (in-/uitklappen,
   toegankelijkheid). */
.zlapptrailcondition-more-details {
    margin-top: 0.5rem;
}

.zlapptrailcondition-more-details summary {
    cursor: pointer;
    color: #1a5276;
    font-weight: 600;
    padding: 0.25rem 0;
}

.zlapptrailcondition-more-details summary:hover {
    text-decoration: underline;
}

/* (op verzoek: "UX niet echt gebruiksvriendelijk"): expliciete
   labels boven elk veld i.p.v. een kale dropdown/textarea zonder
   context. */
.zlapptrailcondition-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.zlapptrailcondition-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
}

/* (UX-herziening, op verzoek: "dit heeft het niet duidelijker
   gemaakt"): het verplichte deel (conditie) heeft geen toggle-knop meer
   nodig - staat gewoon altijd meteen open, zoals elk ander verplicht
   formulierveld. Alleen het OPTIONELE deel (toegankelijkheid) krijgt
   een expliciete "toevoegen"-knop, met een ondubbelzinnig +/×-icoon
   i.p.v. een knop die op een tab lijkt maar geen tab is (dat was de
   bron van de verwarring in v2.20.10). */
/* (naar aanleiding van "de blauwe balk voor toegankelijkheid
   is niet duidelijk"): `.zlapptrailcondition-report-form` is een
   flex-column zonder `align-items`-override, dus rekte deze knop
   standaard (align-items: stretch) uit tot de volledige breedte van het
   formulier - vandaar de onduidelijke "balk". `align-self: flex-start`
   houdt 'm compact, zoals een knop hoort te zijn. Ook de dashed rand
   vervangen door een volle rand + lichte vulling - dashed oogt al snel
   als "uitgeschakeld"/decoratief i.p.v. duidelijk klikbaar. */
.zlapptrailcondition-add-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid #1a5276;
    border-radius: 6px;
    background: #eaf1f6;
    color: #1a5276;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: background 0.15s, color 0.15s;
}

.zlapptrailcondition-add-btn:hover {
    background: #d9e6ee;
}

.zlapptrailcondition-add-btn.is-active {
    background: #1a5276;
    color: #fff;
}

/* (op verzoek: "niet duidelijk wat het gevolg is van het
   in-/uitschakelen"): permanente uitleg onder de knop, altijd zichtbaar
   (niet pas na klikken) - en een aparte, iets nadrukkelijkere zin
   BINNEN het uitgeklapte paneel over wat er met de melding gebeurt. */
.zlapptrailcondition-add-btn-caption {
    font-size: 0.8rem;
    color: #666;
    margin: -0.3rem 0 0.6rem 0;
}

.zlapptrailcondition-access-consequence-note {
    font-size: 0.8rem;
    color: #555;
    font-style: italic;
    margin: 0 0 0.4rem 0;
}

.zlapptrailcondition-add-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #1a5276;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
}

/*: zonder dit zou het icoon-bolletje (donkerblauw) onzichtbaar
   worden tegen de eveneens donkerblauwe knop-achtergrond in actieve
   staat - hier omgedraaid (wit bolletje, blauwe ×) voor contrast. */
.zlapptrailcondition-add-btn.is-active .zlapptrailcondition-add-btn-icon {
    background: #fff;
    color: #1a5276;
}

.zlapptrailcondition-access-fields-box {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.zlapptrailcondition-access-fields-box select,
.zlapptrailcondition-access-fields-box input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
}

/* (#1 van de tien voorgestelde toekomstige functionaliteiten:
   "foto's bij meldingen") */
.zlapptrailcondition-report-photo {
    max-width: 120px;
    max-height: 120px;
    border-radius: 4px;
    margin-top: 0.3rem;
    display: block;
}

/* v2.21.35 (foto-moderatie) */
.zlapptrailcondition-report-photo-pending {
    font-size: 0.8rem;
    color: #777;
    font-style: italic;
}

.zlapptrailcondition-photo-error {
    color: #c62828;
    font-size: 0.85rem;
    margin: 0.2rem 0 0 0;
}

/* (structurele fix, naar aanleiding van "een klein groen ovaal
   ballonnetje blijft staan naast 'stabiel'"): dezelfde CSS-valkuil
   (een class-selector met een expliciete `display`-waarde overschrijft
   het HTML `hidden`-attribuut) kon in principe bij ELK element binnen
   dit component optreden dat via JS `.hidden = true/false` wordt
   geschakeld ÉN een eigen `display:`-regel heeft. In plaats van elke
   class afzonderlijk te patchen: één brede, hoge-prioriteit regel die
   dit voor de hele component afdekt. `!important` is hier bewust en
   veilig - dit MOET altijd winnen, er is geen legitiem scenario waarin
   een element met het `hidden`-attribuut alsnog zichtbaar zou moeten
   zijn. */
[id^="zlapptrailcondition-"][hidden] {
    display: none !important;
}