/* Mobile-first: dit wordt in de eerste plaats op een gsm op de werf gebruikt.
   Grote raakvlakken (44px+), weinig franje, alles onder elkaar. */

:root {
    --achtergrond: #f4f2ee;
    --kaart: #ffffff;
    --inkt: #2a2723;
    --stil: #8a8377;
    --rand: #e2ddd4;
    --accent: #b4531f;
    --accent-zacht: #f6e3d7;
    --gevaar: #b3261e;
    /* Zelfde rood, maar lichter: op de donkere achtergrond van de fotokijker is --gevaar
       te donker om een dunne rand nog te zien. */
    --gevaar-licht: #e5544d;

    --soort-taak: #2563eb;
    --soort-vraag: #7c3aed;
    --soort-probleem: #dc2626;
    --soort-beslissing: #d97706;
    --soort-offerte: #059669;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--achtergrond);
    color: var(--inkt);
    line-height: 1.45;
}

.pagina {
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 14px 40px;
}

/* Kop van elke pagina */

.top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 12px;
}

.top h1 {
    flex: 1;
    margin: 0;
    font-size: 1.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kopknoppen allemaal even groot, wat er ook in staat (pijl, emoji, ＋). */
/* Kleiner dan ze waren: 44px vierkanten bovenaan trokken meer aandacht dan de projectnaam
   ernaast. Blijft ruim genoeg om met een duim te raken. */
.top .knop {
    flex: none;
}

h2 {
    margin: 0;
    font-size: 1.15rem;
}

h3 {
    margin: 14px 0 6px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--stil);
}

a {
    color: var(--accent);
}

/* Invoer en knoppen */

input,
select,
textarea {
    font: inherit;
    color: inherit;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 44px;
    max-width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.knop {
    font: inherit;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--kaart);
    color: var(--inkt);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Elke knop die enkel een icoon draagt is even groot, waar hij ook staat: in de paginakop, in
   een sectiekop, naast een bijlage, in de fotokijker. Er stonden vier verschillende maten door
   elkaar (34, 38, 40 en de standaard van .knop) en dat viel op zodra er twee naast elkaar
   kwamen. De kleine maat, want die vraagt de minste aandacht.

   :has() doet het werk zodat er geen extra klasse op elke knop hoeft; knoppen met tekst
   ("Voeg toe", "Wissen") houden gewoon hun padding. */
.knop:has(> .icon) {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 10px;
}

.knop:has(> .icon) .icon {
    width: 17px;
    height: 17px;
}

.knop-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-size: 1.2rem;
}

.knop-gevaar {
    background: var(--gevaar);
    border-color: var(--gevaar);
    color: #fff;
}

/* Snelinvoer */

.snelinvoer {
    display: flex;
    gap: 8px;
    margin: 4px 0 8px;
}

.snelinvoer input {
    flex: 1;
    font-size: 1rem;
}

/* Chips, segmenten en filterbalk */

.rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.chip {
    font: inherit;
    font-size: 0.85rem;
    padding: 6px 12px;
    min-height: 36px;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--kaart);
    color: var(--stil);
    cursor: pointer;
}

.chip-actief {
    background: var(--accent-zacht);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.filters {
    margin: 6px 0 14px;
}

.filters select {
    min-height: 36px;
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: 999px;
    color: var(--stil);
}

/* Segment: een omlijst vakje met de keuzes erin. De actieve keuze is een afgerond blokje
   binnen die rand — niet een scherp blok dat uit een pilletje steekt. */

.seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--rand);
    border-radius: 11px;
    background: var(--kaart);
    padding: 3px;
}

.seg-knop {
    font: inherit;
    font-size: 0.85rem;
    padding: 4px 12px;
    min-height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--stil);
    cursor: pointer;
}

.seg-actief {
    background: var(--accent-zacht);
    color: var(--accent);
    font-weight: 600;
}

/* Puntenlijst */

.puntenlijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.punt {
    font: inherit;
    text-align: left;
    width: 100%;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.punt-rond {
    opacity: 0.55;
}

.punt-rond .punt-titel {
    text-decoration: line-through;
}

.punt-titel {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.punt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--achtergrond);
    color: var(--stil);
    /* Doorzichtige rand in plaats van geen rand: de varianten hieronder kleuren hem in, en zo
       blijven alle badges even hoog. Een grijze rand rond een grijs vlakje op wit is dubbelop. */
    border: 1px solid transparent;
}

.badge-bal-mij {
    background: var(--accent-zacht);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.badge-bal-partij {
    background: transparent;
    border-style: dashed;
    border-color: var(--rand);
}

.soort-taak { color: var(--soort-taak); border-color: currentColor; background: transparent; }
.soort-vraag { color: var(--soort-vraag); border-color: currentColor; background: transparent; }
.soort-probleem { color: var(--soort-probleem); border-color: currentColor; background: transparent; }
.soort-beslissing { color: var(--soort-beslissing); border-color: currentColor; background: transparent; }
.soort-offerte { color: var(--soort-offerte); border-color: currentColor; background: transparent; }

/* De soort als icoon in plaats van als woord: vijf woorden zoals "Beslissing" namen op een
   gsm meer plaats in dan de titel zelf. De kleur blijft dezelfde, dus je herkent ze van ver;
   de naam zit in het title-attribuut voor wie twijfelt. */
.soort-icoon {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.soort-icoon .icon {
    width: 16px;
    height: 16px;
}

/* Projectlijst */

.projectlijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.projectkaart {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projectnaam {
    font-weight: 600;
    font-size: 1.05rem;
}

/* Overlay-paneel: onderaan op gsm, gecentreerd op groot scherm */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 39, 35, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 10;
}

.paneel {
    background: var(--achtergrond);
    width: 100%;
    max-width: 600px;
    max-height: 94dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 700px) {
    .overlay {
        align-items: center;
        padding: 24px;
    }

    .paneel {
        border-radius: 16px;
        max-height: 88vh;
    }
}

.paneel-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.paneel-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--rand);
}

.soort-select {
    font-weight: 600;
    border-radius: 999px;
    min-height: 40px;
}

.titel {
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
}

.velden {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 480px) {
    .velden {
        grid-template-columns: 1fr;
    }
}

.veld {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.veld > span {
    font-size: 0.78rem;
    color: var(--stil);
}

.veld select,
.veld input {
    width: 100%;
}

.veld-nieuw {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.veld-nieuw input {
    flex: 1;
    min-width: 0;
}

.omschrijving {
    width: 100%;
    min-height: 90px;
    resize: vertical;
}

/* Opmerkingen */

.opmerkingen h3 {
    margin-top: 4px;
}

.opmerking {
    font: inherit;
    color: inherit;
    text-align: left;
    display: block;
    width: 100%;
    cursor: pointer;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
}

.opmerking p {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    /* Enters in een opmerking zijn opzettelijk: toon ze zoals ze getypt zijn. */
    white-space: pre-wrap;
}

/* Klein grut */

.stil {
    color: var(--stil);
    font-size: 0.85rem;
}

.leeg {
    text-align: center;
    padding: 24px 0;
}

/* Kleine modal, bv. nieuw project: één veld, geen scherm vol */

.paneel-klein {
    max-width: 420px;
}

/* Aanmeldpagina: statische HTML, los van Blazor */

.gate-pagina {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
}

.gate {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 16px;
    padding: 24px;
    margin: 16px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gate h1 {
    margin: 0 0 4px;
    font-size: 1.3rem;
}

.gate-fout {
    color: var(--gevaar);
    font-size: 0.85rem;
    margin: 0;
}

/* Wissen: rood vuilbakje zonder tekst; eerste tik kleurt hem vol (knop-gevaar), tweede voert uit */

.knop-wis {
    color: var(--gevaar);
    border-color: var(--gevaar);
    background: transparent;
}

/* Waardenrijen van een veld springen in onder hun veld */

.veldblok {
    margin-bottom: 10px;
}

.veld-nieuw.sub {
    margin-left: 18px;
}

/* Sectiekop: titel links, één knop rechts. Overal dezelfde maat en dezelfde lucht eronder,
   zodat de knop niet tegen de kaarten eronder komt te plakken. */

.sectie-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 10px;
}

.sectie-kop h3 {
    margin: 0;
}

.sectie-kop .knop {
    flex: none;
}

/* Instellingen: rustige lijstrijen; de details zitten achter een eigen modal */

.lijstrij {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lijstrij-naam {
    font-weight: 500;
}

/* Iconen: één lijndikte, kleur van de tekst eromheen */

.icon {
    width: 19px;
    height: 19px;
    display: block;
    flex: none;
}

.badge .icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: -2px;
}

.lijstrij-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lijstrij-meta .icon {
    width: 15px;
    height: 15px;
}

/* Kalenderweergave: punten op hun deadline */

.kal-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 8px;
}

.kal-titel {
    font-weight: 600;
    text-transform: capitalize;
}

.kalender {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.kal-dagnaam {
    text-align: center;
    font-size: 0.7rem;
    color: var(--stil);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 0;
}

.kal-dag {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 8px;
    min-height: 64px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.kal-buiten {
    opacity: 0.45;
}

.kal-vandaag {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.kal-nr {
    font-size: 0.7rem;
    color: var(--stil);
}

.kal-punt {
    font: inherit;
    font-size: 0.68rem;
    line-height: 1.25;
    text-align: left;
    color: inherit;
    background: var(--achtergrond);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 2px 4px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.kal-laat {
    border-color: var(--gevaar);
    color: var(--gevaar);
    font-weight: 600;
}

/* Deadline voorbij: ook op de lijstkaart in het rood */

.badge-laat {
    border-color: var(--gevaar);
    color: var(--gevaar);
    font-weight: 600;
    background: transparent;
}

/* Weekweergave: per dag een lijstje, leesbaar ook met veel punten op één dag */

.week {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.week-dagkop {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Enkel de eerste letter groot. Met capitalize werd elk woord aangepakt en las het als
   "Ma 31 Aug." - een hoofdletter midden in een maandafkorting valt meteen op als slordig. */
.week-dagkop::first-letter {
    text-transform: uppercase;
}

.week-vandaag .week-dagkop {
    color: var(--accent);
}

.week-punt {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 4px;
}

/* Projectfoto: op de kaart en als voorbeeld in de instellingen */

.projectkaart-foto {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.projectfoto-voorbeeld {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--rand);
}

/* Vandaag-lijstje op het dashboard, en klikbare week/kalender-punten op de agenda */

.vandaag {
    margin-bottom: 18px;
}

a.week-punt,
a.kal-punt {
    text-decoration: none;
    color: inherit;
}

a.kal-punt {
    display: block;
}

.badges-rechts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* De projectensectie krijgt een streep boven zich: dat scheidt hem van Vandaag */

.sectie-projecten {
    padding-top: 14px;
    border-top: 1px solid var(--rand);
}

/* Projectkleur: kleurbollen in de instellingen */

.kleurbol {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid var(--rand);
    background: var(--kaart);
    cursor: pointer;
    padding: 0;
}

.kleurbol-actief {
    border-color: var(--inkt);
    box-shadow: inset 0 0 0 2px var(--kaart);
}

/* Projectkaart in de vorm van MyTravel: foto links, tekst rechts */

.projectkaart {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.projectkaart-foto {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    flex: none;
    margin: 0;
}

.projectkaart-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* De kop van een project draagt zijn kleur, maar rustig: enkel een tint achter de titel */

/* Geen zijpadding: die 10px duwde de hele kopbalk naar binnen terwijl alles eronder tegen de
   paginarand staat, en dan lijkt de home-knop verkeerd te staan. De kleurband loopt nu even
   breed als de kaarten eronder. */
.projectkop {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 6px 0;
    margin-bottom: 10px;
}

/* Compacte lijst: één regel per punt, zo smal mogelijk. Voor lange lijsten. */

.regels {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 12px;
    overflow: hidden;
}

.regel {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rand);
    padding: 7px 12px;
    min-height: 38px;
}

.regel:last-child {
    border-bottom: none;
}

.regel-titel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.regel-datum {
    font-size: 0.75rem;
    color: var(--stil);
    flex: none;
}

.regel-laat {
    color: var(--gevaar);
    font-weight: 600;
}

.regel-bal {
    color: var(--stil);
    flex: none;
}

/* Foto's en opmerkingen op een lijstregel: een icoontje met het aantal, klein genoeg om de
   titel niet te verdringen. In de kalender staat dit bewust niet — daar is een dagvakje al
   krap voor de titel alleen. */
.regel-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--stil);
    flex: none;
}

.regel-meta .icon {
    width: 13px;
    height: 13px;
}

/* Het bolletje zegt welke soort punt het is, zonder plaats te vragen */

.stip {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: none;
}

.stip-taak { background: var(--soort-taak); }
.stip-vraag { background: var(--soort-vraag); }
.stip-probleem { background: var(--soort-probleem); }
.stip-beslissing { background: var(--soort-beslissing); }
.stip-offerte { background: var(--soort-offerte); }

/* Weergaveschakelaar met iconen in plaats van tekst: vierkante vakjes, één afgelijnd geheel */

/* De weergaveschakelaar staat naast de plus op dezelfde regel, dus moet hij even hoog zijn:
   28 binnenin + 2×2 padding + 2×1 rand = 34, precies de maat van een icoonknop. */
.seg-iconen {
    padding: 2px;
}

.seg-iconen .seg-knop {
    width: 34px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.seg-iconen .icon {
    width: 17px;
    height: 17px;
}

/* De voordeur: het merk in plaats van de naam, en een ronde knop met een pijl. */
.gate-logo {
    display: block;
    width: 78px;
    height: auto;
    margin: 0 auto 4px;
}

.gate-actie {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.gate-actie .knop {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
}

.gate-actie .icon {
    width: 22px;
    height: 22px;
}

/* Foto's bij een punt: een raster van duimnageltjes onder de omschrijving. Vierkant
   bijgesneden, want in een raster telt de rij, niet de vorm van elke foto apart. */

.puntfotos .sectie-kop {
    margin: 6px 0 8px;
}

.puntfotos .sectie-kop .stil {
    font-weight: normal;
}

/* Een gsm maakt van een zichtbaar bestandsveld zijn eigen brede knop; het label ernaast doet
   het werk. Weg met display:none mag niet: dan is het veld voor de browser onbereikbaar. */
.verborgen-bestand {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.knop-uit {
    opacity: 0.5;
    pointer-events: none;
}

.fotoraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
}

.fototegel {
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: 10px;
    overflow: hidden;
    background: var(--kaart);
    cursor: pointer;
    aspect-ratio: 1;
}

.fototegel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fotofouten {
    margin: 6px 0;
    padding-left: 18px;
    color: var(--gevaar);
    font-size: 0.85rem;
}

/* De kijker: één foto schermvullend, veeg of pijl voor de volgende. Donker eromheen, want
   daar kijk je naar de foto en niet naar de app. */

.kijker {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: #131211;
    color: #f4f2ee;
    display: flex;
    flex-direction: column;
    outline: none;
}

.kijker-kop,
.kijker-voet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    flex: none;
}

.kijker-kop {
    justify-content: space-between;
    padding-top: max(8px, env(safe-area-inset-top));
}

.kijker-voet {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.kijker-teller {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    font-size: 0.9rem;
}

.kijker-knop {
    background: transparent;
    border-color: rgba(244, 242, 238, 0.25);
    color: inherit;
    flex: none;
}

/* De wisknop moet dezelfde taal spreken als overal: rode rand, na een tik vol rood. Zonder
   deze twee regels wint .kijker-knop hierboven, want die staat later in dit bestand dan
   .knop-wis en .knop-gevaar - en dan bleef het icoontje grijs na de eerste tik. */
.kijker-knop.knop-wis {
    color: var(--gevaar-licht);
    border-color: var(--gevaar-licht);
    background: transparent;
}

.kijker-knop.knop-gevaar {
    color: #fff;
    border-color: var(--gevaar);
    background: var(--gevaar);
}

/* Het blad vangt de veeg op; de foto zelf blijft altijd volledig in beeld. */
.kijker-blad {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
}

.kijker-blad img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.kijker-stap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(19, 18, 17, 0.55);
    color: #f4f2ee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kijker-vorige {
    left: 8px;
}

.kijker-volgende {
    right: 8px;
}

/* De buren staan er enkel om alvast opgehaald te worden. */
.kijker-voorlaad {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kijker-bijschrift {
    flex: 1;
    background: rgba(244, 242, 238, 0.08);
    border-color: rgba(244, 242, 238, 0.25);
    color: inherit;
}

.kijker-bijschrift::placeholder {
    color: rgba(244, 242, 238, 0.5);
}

/* Tijdlijn: dezelfde dagblokken als de weekweergave, maar doorlopend. De dagkop blijft
   plakken zolang die dag in beeld is — in een lange stroom ben je anders kwijt waar je zit. */

.tijdlijn .week-dagkop {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--achtergrond);
    padding: 4px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--rand);
}


/* De regels dragen hier meer dan enkel hun soort — ruimte, lot, partij. Titel boven, badges
   eronder, zoals op een tegel; naast elkaar zou de titel wegdrukken op een gsm. */
.tijdlijn .week-punt {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Het detailpaneel in kijkstand: titel als kop, de soort als icoon met zijn naam ernaast, en
   de omschrijving als gewone tekst. Zo staan de foto's en de opmerkingen bovenaan het scherm
   in plaats van onder acht invoervelden. */

.soort-kop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    min-height: 40px;
}

/* Twee of meer knoppen samen aan de rechterkant. Zonder dit groepje zet space-between de
   middelste knop netjes in het midden van de kop - wat er zwevend uitziet. */
.knoppen-rechts {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.punt-kop {
    margin: 0;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Regeleindes uit het invoerveld blijven staan; anders wordt een lijstje maten één brij. */
.omschrijving-tekst {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Bijlages: regels met de naam en de grootte, en rechts de prullenbak. Geen raster zoals bij
   foto's — van een pdf valt niets te tonen, dus telt enkel hoe hij heet. */

.puntbijlages .sectie-kop {
    margin: 6px 0 8px;
}

.puntbijlages .sectie-kop .stil {
    font-weight: normal;
}

.bijlagelijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bijlage {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bijlage-open {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    min-height: 40px;
}

/* Een lange bestandsnaam mag de grootte en de prullenbak niet wegduwen. */
.bijlage-naam {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bijlage .knop {
    flex: none;
}

/* Het infokaartje van een foto: over de foto heen, links bovenaan onder de knoppenrij. Een
   definitielijst in twee kolommen — label links, waarde rechts. */
.kijker-info {
    position: absolute;
    top: 56px;
    left: 10px;
    right: 10px;
    max-width: 380px;
    margin: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(19, 18, 17, 0.92);
    border: 1px solid rgba(244, 242, 238, 0.2);
    font-size: 0.85rem;
}

.kijker-info dt {
    color: rgba(244, 242, 238, 0.6);
}

.kijker-info dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* De doffe tekst in het kaartje moet op zwart leesbaar blijven. */
.kijker-info .stil {
    color: rgba(244, 242, 238, 0.55);
}

/* Naam en opmerking onder elkaar op een bijlageregel; de grootte blijft rechts staan. */
.bijlage-tekst {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* De opmerking mag hier volledig staan, over zoveel regels als ze nodig heeft: in het
   overzicht wil je ze kunnen lezen zonder eerst het venster te moeten openen. De naam blijft
   wel op een regel - een lange bestandsnaam die afbreekt maakt de lijst onrustig. */
/* pre-wrap en niet normal: wat je in het venster op een nieuwe regel tikt, hoort hier ook op
   een nieuwe regel te staan. Met normal plakt HTML die regels gewoon aan elkaar. */
.bijlage-opmerking {
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Naam plus vaste extensie: een invoerveld met een kotje ertegenaan. */
.naamveld {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.naamveld input {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.naamveld-slot {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--rand);
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: var(--achtergrond);
    color: var(--stil);
    white-space: nowrap;
}

/* Links in de kop van het detailpaneel: de soort en, als hij er is, de deadline. Samen in een
   groepje, anders zet space-between de deadline midden in de kop. */
/* De titel staat op dezelfde regel als het soort-icoon: anders staat het icoon in zijn eentje
   op een halflege balk en de titel op een regel daaronder. */
.paneel-kop-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* De drie mogelijkheden in het statusvenster: onder elkaar op een gsm, zodat elke keuze een
   volle, ruime raakvlak is in plaats van drie smalle knopjes naast elkaar. */
.keuzerij {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.keuzerij .chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

/* De secties van een punt als kaarten. Zonder dit staan foto's, bijlages en opmerkingen als
   losse hopen op dezelfde vlakke ondergrond en oogt het paneel als een verzameling in plaats
   van een scherm. Een kaart per sectie geeft elk blok een eigen begin en einde. */
.paneel-sectie {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 10px 12px 12px;
}

/* Binnen een kaart is de kop een label, geen titel: klein, in kapitalen, rustig. Het aantal
   staat er als gewoon cijfer achter. */
.paneel-sectie .sectie-kop {
    margin: 0 0 8px;
    min-height: 36px;
}

.paneel-sectie .sectie-kop h3 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stil);
}

.paneel-sectie .sectie-kop .stil {
    font-size: 0.75rem;
    letter-spacing: normal;
}

/* Op een kaart hoeft een bijlageregel geen eigen kader meer - dat is een doos in een doos. */
.paneel-sectie .bijlage-open {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.paneel-sectie .bijlage + .bijlage {
    border-top: 1px solid var(--rand);
}

/* Een chip die enkel iets meldt en niets doet. */
.chip-stil {
    cursor: default;
}

.chip-laat {
    color: var(--gevaar);
    border-color: var(--gevaar);
}

.paneel-sectie .opmerking {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.paneel-sectie .opmerking + .opmerking {
    border-top: 1px solid var(--rand);
}

/* Het paneel zelf mag wat meer lucht tussen de kaarten. */
.paneel {
    gap: 12px;
}

/* De kop van een kaart: het soort-icoon voor de titel in plaats van ertussen de badges. Daar
   stond het tussen de tellertjes en las het als een knopje; hier is het wat het is - een
   markering van wat voor punt dit is. */
.punt-kopregel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* De badges hangen rechts: zo staan de tellertjes van alle kaarten onder elkaar in plaats van
   te verspringen met de lengte van elke titel. */
.punt > .punt-badges,
.week-punt > .punt-badges {
    justify-content: flex-end;
}

/* Een tijdlijnregel is een kolom met align-items: flex-start, dus krimpt elk kind tot zijn
   eigen inhoud - en dan heeft rechts uitlijnen niets om tegen uit te lijnen. Vandaar de volle
   breedte. In de tegels speelde dat niet: die kaart rekt zijn kinderen vanzelf op. */
.tijdlijn .week-punt > .punt-badges {
    width: 100%;
}

/* De plus duwt zichzelf naar rechts, wat er ook links van staat. Breekt de filterrij over
   twee regels, dan schuift hij mee naar het einde van de laatste regel. */
/* De weergaveregel breekt niet af: de plus hoort naast de weergaveknoppen te blijven staan,
   ook als er filters onder komen. */
.weergaverij {
    flex-wrap: nowrap;
}

.knop-nieuw {
    margin-left: auto;
}

/* Een projectkaart in de ordenstand: geen link, maar de naam links en de pijlen rechts. */
.projectkaart-ordenen {
    display: flex;
    align-items: center;
    gap: 10px;
}

.projectkaart-ordenen .projectkaart-tekst {
    flex: 1;
    min-width: 0;
}

.projectkaart-ordenen .knop {
    flex: none;
}

/* Een pijl die niet verder kan, blijft staan maar doet niets meer. */
.projectkaart-ordenen .knop:disabled {
    opacity: 0.35;
    cursor: default;
}