/* Loperscherm: telefoon eerst */
#app { min-height: 100%; }
.laden { padding: 2rem; text-align: center; color: var(--inkt-zacht); }
.pagina { max-width: 640px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.kop { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kop h1 { margin: 0; }

/* inloggen */
.pin { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; text-align: center; }
.pin input { font-size: 2rem; letter-spacing: .4em; text-align: center; padding-left: .4em; }

/* kaarten in lijsten */
.rij { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.rij .tekst { flex: 1; min-width: 0; }
.ronde-kaart h3 { margin: 0 0 .2rem; }
.ronde-kaart .feit { display: inline-block; margin-right: 1rem; }
.ronde-kaart.mijn { border-left: 6px solid var(--sloot); }
.ronde-kaart.vol { opacity: .7; }

/* kaartscherm van een ronde */
.ronde-scherm { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; }
.balk { background: var(--vlak); border-bottom: 1px solid var(--lijn); padding: calc(6px + env(safe-area-inset-top)) 10px 8px; z-index: 500; }
.balk .rij { align-items: center; }
.balk .titel { font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balk .stand { font-size: .9rem; color: var(--inkt-zacht); margin: 4px 0; }
#kaart { min-height: 0; }
.modus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--sloot); border-radius: var(--radius); overflow: hidden; margin-top: 6px; }
.modus button { border: 0; border-radius: 0; min-height: 40px; background: var(--vlak); color: var(--sloot); }
.modus button[aria-pressed="true"] { background: var(--sloot); color: #fff; }

/* vaste hoogte (geen max-height): de kaart verspringt niet als je een ander adres of tabblad opent;
   alleen de greep (klein / normaal / groot) verandert de hoogte */
.paneel { background: var(--vlak); border-top: 1px solid var(--lijn); z-index: 500; height: 46vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); transition: height .2s ease; }
/* stickers tellen: precies hoog genoeg voor het adres en alle stickerknoppen, met daaronder ruimte voor de zwarte balk
   met Ongedaan maken (altijd twee regels, 68 px); de kaart krijgt de rest. De thuisbalk van de telefoon komt erbij,
   omdat de zwarte balk daarboven zweeft. Gemeten nodig: 379 px op 360 en 390 px breed. */
.paneel.tellen { height: min(calc(380px + env(safe-area-inset-bottom)), 72vh); }
.paneel.groot { height: 82vh; }
.paneel.klein { height: 112px; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--lijn); }
.tabs button { border: 0; border-radius: 0; background: none; color: var(--inkt-zacht); min-height: 44px; border-bottom: 3px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--inkt); border-bottom-color: var(--sloot); }
.paneel-inhoud { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 16px; -webkit-overflow-scrolling: touch; }
.greep { border: 0; background: none; width: 100%; min-height: 22px; padding: 6px 0 2px; color: var(--inkt-zacht); }
.greep::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--lijn); margin: 0 auto; }

/* straatdelen */
.deel { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--lijn); }
.deel .naam { font-weight: 700; }
.deel .nog { font-size: .9rem; color: var(--inkt-zacht); }
.deel.klaar .naam { color: var(--gras); }
.deel button { min-width: 112px; }
.straatkop { margin: .9rem 0 .1rem; font-size: .95rem; color: var(--inkt-zacht); }

/* adreskaart (na tik op een adres) */
.adreskaart h3 { margin: .2rem 0; }
.stickerknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; }
.stickerknoppen button[aria-pressed="true"] { outline: 3px solid var(--geel); outline-offset: 1px; }
/* herstelknoppen (Toch niet bezorgd, Toch niet geteld): grijs, zodat je ze overal herkent en Toch niet geteld
   niet als zesde sticker leest; uitgeschakeld als er niets te herstellen is */
.adreskaart button.herstel { color: var(--inkt-zacht); border-color: var(--inkt-zacht); padding-inline: .3rem; }
.adreskaart button.herstel:disabled { opacity: .4; cursor: default; }

.zwevend { position: absolute; right: 10px; z-index: 600; display: flex; flex-direction: column; gap: 8px; }
.zwevend button { min-width: var(--tik); padding: .4rem .6rem; box-shadow: 0 2px 8px rgba(34, 48, 60, .25); }
.wachtrij { font-size: .85rem; color: var(--amber); font-weight: 700; }

.leaflet-control-attribution { font-size: 10px; }

/* campagne-uitleg */
.omschrijving { white-space: pre-line; }
.omschrijving.kort { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: .4rem 0; }
.feiten > div { margin: .2rem 0; }

/* link kwijt */
.linkkwijt { margin-top: 1.5rem; text-align: left; }
.linkkwijt summary { cursor: pointer; color: var(--sloot); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.linkkwijt input { font-size: inherit; letter-spacing: normal; text-align: left; padding-left: .7rem; }

/* loopmomenten */
.moment.afgesproken { border-left: 6px solid var(--gras); }
.moment.beste { border-left: 6px solid var(--geel); }
.momentkop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.stand-m { margin-top: .4rem; font-weight: 700; }
.antwoorden { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.antw { font-size: .85rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); }
.antw.ja { background: #dcefe3; border-color: #b9dcc6; color: var(--gras); }
.antw.misschien { background: #fbefc4; border-color: #efdb93; color: #6b5200; }
.antw.nee { background: #f8e8e6; border-color: #e8c3be; color: var(--rood); }
.antw.geen { color: #5d6a66; border-style: dashed; }
.knoppen button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
details.andere { margin: .6rem 0; }
details.andere > summary { cursor: pointer; color: var(--sloot); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.datumrij { align-items: flex-end; }
.datumkop { display: flex; justify-content: flex-end; margin: .6rem 0 -.6rem; }
.datumkop button { min-height: 36px; font-size: .9rem; }
.buren { padding-left: 1.1rem; margin: .4rem 0 0; }
.buren li { margin: .45rem 0; }
.melding.goed a { font-weight: 700; }

/* navigatie: overal dezelfde terugknop met tekst */
.pagina > .terug { margin-bottom: .2rem; }
.balkkop { align-items: center; }
.balk .terug { min-height: 40px; }
.balk .titel { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kop h1 { min-width: 0; overflow-wrap: anywhere; }
/* bij een groot paneel is de kaart klein: knoppen op de kaart dan verbergen */
.ronde-scherm[data-paneel="groot"] .zwevend, .ronde-scherm[data-paneel="groot"] .leaflet-control-zoom { display: none; }
.appmenu ~ .pagina, .appbalk ~ .pagina { padding-top: 16px; }
.balkkop .wachtrij { margin-left: auto; }
/* bovenste regel van de rondebalk in dezelfde donkere kleur als de kopbalk elders, zodat het menu erop aansluit.
   De regel loopt door tot de randen; de hoogte blijft gelijk (menuknop 4 px lager, 4 px ruimte boven de titel). */
.balkkop { background: var(--inkt); color: #fff; margin: calc(-6px - env(safe-area-inset-top)) -10px 0; padding: calc(6px + env(safe-area-inset-top)) 2px 0 10px; }
.balkkop .terug { color: #fff; }
.balkkop .wachtrij { color: var(--geel); }
.balkkop .menuknop { min-height: 44px; min-width: 44px; }
.balk .titel { margin-top: 4px; }
/* lijst naar kaart: regel en straatnaam zijn aan te tikken */
.deeltekst, .straatnaam { cursor: pointer; }
.straatnaam { padding: .3rem 0; }

.adreskop { align-items: center; margin-bottom: .2rem; }
.adreskop h3 { margin: 0; }
.niet-bezorgen { color: var(--rood); }