:root,
:root[data-thema="zand"] {
    --bg: #f5f3ef;
    --surface: #ffffff;
    --sidebar: #1f2a33;
    --sidebar-soft: #2c3a45;
    --sidebar-text: #b9c6cf;
    --sidebar-dim: #8fa3b0;
    --sidebar-line: #3a4a56;
    --sidebar-strong: #eef3f6;
    --ink: #1d2429;
    --muted: #6b7780;
    --line: #e2ddd5;
    --line-strong: #cfc7bb;
    --accent: #c2571f;
    --accent-dark: #a94916;
    --accent-soft: #fdf0e7;
    --accent-light: var(--accent-light);
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --danger-line: #f2c6c2;
    --placeholder: #e9e4dc;
    --placeholder-dark: #ded8d0;
    --placeholder-soft: #f0ebe4;
    --skelet-a: #e7e2da;
    --skelet-b: #f3efe9;
    --radius: 10px;
    --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 6px 18px rgb(0 0 0 / 6%);
}

/* Elk schema is enkel deze lijst opnieuw: geen enkel scherm weet welke kleur het draagt.
   Zie DESIGN.md — nooit een kleur rechtstreeks in een stijlregel. */
/* Lavendel: zachter en blauwer dan het lila van vroeger. De oude naam blijft meelezen, want
   die staat nog in de browser van wie hem toen gekozen heeft. */
:root[data-thema="lavendel"],
:root[data-thema="lila"] {
    --bg: #f8f6fd;
    --surface: #ffffff;
    --sidebar: #524a75;
    --sidebar-soft: #63598a;
    --sidebar-text: #ded9f0;
    --sidebar-dim: #b0a9c9;
    --sidebar-line: #675e8d;
    --sidebar-strong: #f3f0fc;
    --ink: #2b2739;
    --muted: #7a7590;
    --line: #e7e3f2;
    --line-strong: #d3cce7;
    --accent: #7c6bb5;
    --accent-dark: #6a589f;
    --accent-soft: #f1eefb;
    --accent-light: #c9bde9;
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --danger-line: #f2c6c2;
    --placeholder: #eae6f4;
    --placeholder-dark: #dcd7ea;
    --placeholder-soft: #f3f1fa;
    --skelet-a: #eae6f4;
    --skelet-b: #f6f4fb;
}

:root[data-thema="goud"] {
    --bg: #faf6ec;
    --surface: #ffffff;
    --sidebar: #423824;
    --sidebar-soft: #55492f;
    --sidebar-text: #e6dcc0;
    --sidebar-dim: #b7a887;
    --sidebar-line: #5c5034;
    --sidebar-strong: #fbf6e8;
    --ink: #2a2519;
    --muted: #7a7159;
    --line: #ece3cd;
    --line-strong: #dccfae;
    --accent: #b8891f;
    --accent-dark: #9a7018;
    --accent-soft: #fbf2dd;
    --accent-light: #ecc772;
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --danger-line: #f2c6c2;
    --placeholder: #ece5d2;
    --placeholder-dark: #ded5bd;
    --placeholder-soft: #f4efe0;
    --skelet-a: #ece5d2;
    --skelet-b: #f8f4e9;
}

:root[data-thema="munt"] {
    --bg: #f2faf6;
    --surface: #ffffff;
    --sidebar: #2f5a4a;
    --sidebar-soft: #3d6e5c;
    --sidebar-text: #cfe6dc;
    --sidebar-dim: #96b8ab;
    --sidebar-line: #47705f;
    --sidebar-strong: #eff9f4;
    --ink: #1e2b26;
    --muted: #64796f;
    --line: #dcece4;
    --line-strong: #c2ddd0;
    --accent: #2f9e74;
    --accent-dark: #24805d;
    --accent-soft: #e6f6ee;
    --accent-light: #8fd9bb;
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --danger-line: #f2c6c2;
    --placeholder: #dcebe3;
    --placeholder-dark: #cbded4;
    --placeholder-soft: #eef7f2;
    --skelet-a: #dcebe3;
    --skelet-b: #f0f8f4;
}

:root[data-thema="lucht"] {
    --bg: #f2f8fd;
    --surface: #ffffff;
    --sidebar: #274a63;
    --sidebar-soft: #35607d;
    --sidebar-text: #cfe2ef;
    --sidebar-dim: #92b3c8;
    --sidebar-line: #3e6b88;
    --sidebar-strong: #eef6fc;
    --ink: #1c2833;
    --muted: #64788a;
    --line: #dbe9f3;
    --line-strong: #c0d8e8;
    --accent: #2b7fbd;
    --accent-dark: #23689c;
    --accent-soft: #e6f2fb;
    --accent-light: #91c8ea;
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --danger-line: #f2c6c2;
    --placeholder: #dbe8f2;
    --placeholder-dark: #c9dbe8;
    --placeholder-soft: #edf5fb;
    --skelet-a: #dbe8f2;
    --skelet-b: #f1f7fc;
}

:root[data-thema="boter"] {
    --bg: #fdfbea;
    --surface: #ffffff;
    --sidebar: #5b5330;
    --sidebar-soft: #6e653e;
    --sidebar-text: #ece2c2;
    --sidebar-dim: #bcb08a;
    --sidebar-line: #746a45;
    --sidebar-strong: #fbf8e9;
    --ink: #2c2818;
    --muted: #7a7355;
    --line: #f0e8cd;
    --line-strong: #ddd2ac;
    --accent: #c9a227;
    --accent-dark: #a8851b;
    --accent-soft: #fdf7dc;
    --accent-light: #edd77e;
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --danger-line: #f2c6c2;
    --placeholder: #efe9d1;
    --placeholder-dark: #e0d8bb;
    --placeholder-soft: #f7f2e1;
    --skelet-a: #efe9d1;
    --skelet-b: #faf6ea;
}

:root[data-thema="brons"] {
    --bg: #241c16;
    --surface: #33281f;
    --sidebar: #1b1510;
    --sidebar-soft: #2b221a;
    --sidebar-text: #d9cbbb;
    --sidebar-dim: #9e8b78;
    --sidebar-line: #3d3125;
    --sidebar-strong: #f2e7db;
    --ink: #f0e6da;
    --muted: #b0a08e;
    --line: #46382c;
    --line-strong: #5b493a;
    --accent: #d08b3f;
    --accent-dark: #b87532;
    --accent-soft: #3d2f21;
    --accent-light: #f0b57a;
    --danger: #ef8a80;
    --danger-soft: #3a2422;
    --danger-line: #6b3b36;
    --placeholder: #3f3227;
    --placeholder-dark: #4a3b2e;
    --placeholder-soft: #382c22;
    --skelet-a: #3a2e24;
    --skelet-b: #47392c;
}


* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1 {
    font-size: 1.6rem;
    margin: 0 0 .5rem;
}

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

h3 {
    font-size: 1rem;
    margin: 0 0 .5rem;
}

a {
    color: inherit;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: .85rem;
}

.error {
    color: var(--danger);
}

/* ---------- raamwerk ---------- */

.app {
    display: grid;
    grid-template-columns: 290px 1fr;
    height: 100dvh;
}

.sidebar {
    background: var(--sidebar);
    color: var(--sidebar-text);
    overflow-y: auto;
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.brand {
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    flex: none;
}

/* De reis waar je in zit, naast de naam van de app. */
.brand-separator {
    display: flex;
    color: var(--muted);
    flex: none;
}

.brand-separator .icon {
    width: 1em;
    height: 1em;
}

.brand-trip {
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.nav-toggle {
    display: none;
    font-size: 1.2rem;
}

.nav-scrim {
    display: none;
}

.content {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* ---------- zijnavigatie ---------- */

.navigator {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem .75rem 2rem;
    min-height: 100%;
}

.navigator-head {
    padding: .25rem .5rem .5rem;
}

.navigator-title {
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--sidebar-dim);
}

.navigator-empty {
    color: var(--sidebar-dim);
    padding: 0 .5rem;
    font-size: .9rem;
}

/* Je profiel, helemaal onderaan: de lijst met reizen duwt het naar beneden (margin-top: auto),
   dus staat het bij een korte lijst tegen de onderkant en bij een lange gewoon eronder. */
.navigator-voet {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--sidebar-line);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.navigator-profiel {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .1rem .5rem;
    color: var(--sidebar-dim);
    text-decoration: none;
    font-size: .9rem;
}

.navigator-profiel span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigator-profiel:hover,
.navigator-profiel.current {
    color: var(--sidebar-strong);
}

.navigator-afmelden {
    color: var(--sidebar-dim);
}

.navigator-afmelden:hover {
    color: var(--sidebar-strong);
}

/* Kop boven een groep reizen of logboeken. Iets steviger dan de maandkop in een reis: die
   verdeelt binnen één lijst, deze scheidt twee lijsten. */
.navigator-groep {
    margin: .9rem 0 .2rem;
    padding: 0 .5rem;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sidebar-dim);
}

.navigator-groep:first-of-type {
    margin-top: .2rem;
}

.trip-list, .day-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trip-list {
    flex: 1;
}

.trip-row {
    display: flex;
    align-items: flex-start;
    gap: .15rem;
    border-radius: var(--radius);
}

.trip-item.current > .trip-row {
    background: var(--sidebar-soft);
}

.twisty {
    background: none;
    border: 0;
    color: var(--sidebar-dim);
    cursor: pointer;
    font-size: .8rem;
    padding: .55rem .3rem;
    line-height: 1;
}

.twisty:hover {
    color: #fff;
}

.trip-link {
    display: block;
    flex: 1;
    padding: .45rem .5rem;
    text-decoration: none;
    border-radius: var(--radius);
    min-width: 0;
}

.trip-link:hover {
    background: var(--sidebar-soft);
}

.trip-name {
    display: block;
    font-weight: 600;
}

.trip-meta {
    display: block;
    font-size: .78rem;
    color: var(--sidebar-dim);
}

.day-list {
    margin: .1rem 0 .5rem 1.35rem;
    border-left: 1px solid var(--sidebar-line);
    padding-left: .35rem;
}

.month-head {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sidebar-dim);
    padding: .5rem .5rem .15rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.month-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sidebar-line);
}

.day-link {
    display: grid;
    grid-template-columns: 1.55rem 1.35rem 1fr auto;
    align-items: center;
    gap: .35rem;
    padding: .22rem .4rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: .88rem;
    color: var(--sidebar-text);
}

.day-link:hover {
    background: var(--sidebar-soft);
    color: #fff;
}

.day-link.current {
    background: var(--accent);
    color: #fff;
}

/* Klein kalenderblaadje: het dagnummer met een streepje bovenaan als scheurrand. */
.day-badge {
    display: block;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sidebar-strong);
    background: rgb(255 255 255 / 8%);
    border-top: 2px solid var(--sidebar-dim);
    border-radius: 3px 3px 5px 5px;
}

.day-link:hover .day-badge {
    background: rgb(255 255 255 / 14%);
}

/* Vandaag krijgt een randje, ook als het niet de geopende dag is. */
.day-link.vandaag {
    box-shadow: inset 0 0 0 1px var(--accent);
}

.day-link.current.vandaag {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 75%);
}

.day-link.current .day-badge {
    background: rgb(255 255 255 / 92%);
    border-top-color: var(--accent-dark);
    color: var(--accent);
}

.day-weekday {
    font-size: .74rem;
    opacity: .7;
    text-align: center;
}

.day-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-count {
    font-size: .72rem;
    background: rgb(255 255 255 / 15%);
    border-radius: 999px;
    padding: 0 .4rem;
}

/* ---------- weergave kiezen ---------- */

.topbar-eind {
    margin-left: auto;
    color: var(--muted);
}

.thema-keuze {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
    margin-top: 1rem;
    max-width: 34rem;
}

.thema {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.thema.gekozen {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Het staal toont het schema zelf: de achtergrond, de zijbalk en de accentkleur. */
.thema-staal {
    position: relative;
    width: 2.6rem;
    height: 2rem;
    border-radius: 6px;
    background: var(--voor);
    border: 1px solid rgb(0 0 0 / 12%);
    overflow: hidden;
    flex: none;
}

.thema-staal::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .8rem;
    background: var(--zij);
}

.thema-accent {
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    width: .8rem;
    height: .8rem;
    border-radius: 999px;
    background: var(--stip);
}

.thema-titel {
    font-weight: 600;
}

/* ---------- skelet tijdens het laden ---------- */

.skelet {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .25rem;
}

/* Een lichte glans die traag overloopt: genoeg om te zien dat er iets gebeurt, zonder te
   flikkeren. Wie beweging uitzet, krijgt gewoon een rustig vlak. */
.skelet-vlak {
    background: linear-gradient(90deg, var(--skelet-a) 25%, var(--skelet-b) 37%, var(--skelet-a) 63%);
    background-size: 400% 100%;
    border-radius: 8px;
    animation: skelet 1.6s ease-in-out infinite;
}

@keyframes skelet {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .skelet-vlak {
        animation: none;
    }
}

.skelet-titel {
    height: 1.7rem;
    width: min(14rem, 60%);
}

.skelet-regel {
    height: .85rem;
    width: min(22rem, 85%);
}

.skelet-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .7rem;
    margin-top: .6rem;
}

.skelet-tegel {
    aspect-ratio: 4 / 3;
}

/* ---------- bijsnijden ---------- */

.modal.wide {
    width: min(46rem, 100%);
}

/* touch-action uit, anders scrollt de pagina mee terwijl je een kader sleept. */
.crop-stage {
    position: relative;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #1d2429;
}

.crop-stage img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* De schaduw eromheen verduistert alles buiten het kader. */
.crop-box {
    position: absolute;
    display: none;
    outline: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 55%);
}

/* ---------- wachtrij ---------- */

/* Een knop met een teller erin: er wacht nog werk. */
.button.square.wacht {
    border-color: var(--accent);
    color: var(--accent);
    gap: .25rem;
}

.wacht-teller {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* Op een gsm één foto per rij; vanaf een laptop drie grote, zodat je kan zien welke van de
   drie bijna-dezelfde je houdt. */
.inbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .9rem;
    margin-top: 1rem;
}

@media (min-width: 900px) {
    .inbox-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

.inbox-item {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem;
}

.inbox-item p {
    margin: 0;
}

.inbox-image {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
}

/* Hier kijk je om te kiezen, dus moet de foto volledig in beeld staan — niet bijgesneden.
   De grijze rand eromheen is de lege ruimte van een staande foto in een liggend vak. */
.inbox-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
    background: var(--placeholder-dark);
}

/* Zeven knoppen op één regel van 360 pixels: dan mogen ze wat krapper dan elders. */
.inbox-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.inbox-actions .button.square {
    min-width: 0;
    padding: .3rem .42rem;
}

/* De marge links duwt het streepje en alles erna naar rechts: bewerken blijft links staan,
   beslissen komt aan de kant waar je duim zit. */
.inbox-scheiding {
    width: 1px;
    align-self: stretch;
    background: var(--line);
    margin: .1rem .15rem .1rem auto;
}

.bin-actions {
    margin-top: 1rem;
}

.verborgen {
    display: none;
}

/* ---------- vlaggen ---------- */

.flag {
    width: 1.35em;
    height: .9em;
    display: inline-block;
    vertical-align: -.05em;
    border-radius: 2px;
    /* Een dun randje, anders vervaagt een witte vlag in een lichte achtergrond. */
    box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);
}

/* Rechts in de gekleurde strook van een kalenderblaadje. */
.leaf-flag {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
}

.day-date-line {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ---------- iconen ---------- */

/* Het soort dag of activiteit, als klein merkteken bij een titel of datum. */
.kind-mark {
    display: inline-flex;
    vertical-align: -.15em;
    margin-right: .3rem;
    color: var(--muted);
}

.kind-mark .icon {
    width: 1.05em;
    height: 1.05em;
}

/* In de gekleurde strook van een kalenderblaadje, links van de datum. */
.leaf-kind {
    position: absolute;
    left: .35rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    opacity: .85;
}

.leaf-kind .icon {
    width: 1rem;
    height: 1rem;
}

.day-link .kind-mark {
    color: inherit;
    opacity: .75;
}

/* Getekend, niet als emoji: dezelfde lijndikte en kleur als de tekst eromheen. */
.icon {
    width: 1.15em;
    height: 1.15em;
    display: block;
    flex: none;
}

.button .icon {
    width: 1.05em;
    height: 1.05em;
}

/* ---------- knoppen en velden ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .4rem .8rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}

.button:hover {
    border-color: var(--line-strong);
}

.button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.button.primary:hover {
    background: var(--accent-dark);
}

.button.danger {
    color: var(--danger);
    border-color: var(--danger-line);
}

.button.ghost {
    background: transparent;
}

.button.block {
    display: flex;
    margin-top: auto;
}

/* Vierkante knop met enkel een icoon erin; de betekenis zit in de tooltip. */
.button.square {
    padding: .32rem .55rem;
    font-size: 1rem;
    line-height: 1.3;
    min-width: 2.1rem;
}

.button:disabled {
    opacity: .5;
    cursor: default;
}

.icon-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: .15rem .35rem;
    border-radius: 6px;
    color: inherit;
}

.icon-button:hover:not(:disabled) {
    background: rgb(0 0 0 / 7%);
}

.icon-button:disabled {
    opacity: .3;
    cursor: default;
}

.icon-button.danger {
    color: var(--danger);
}

.link-button {
    border: 0;
    background: none;
    padding: 0 .15rem;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
}

.link-button.danger {
    color: var(--danger);
}

input[type="text"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select {
    font: inherit;
    color: inherit;
    padding: .4rem .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    width: 100%;
    max-width: 100%;
}

/* Een keuzelijst neemt anders het grijze systeemjasje aan en valt uit de toon naast de
   invoervelden ernaast. Eigen pijltje, zodat de hoogte overal gelijk blijft. */
select {
    appearance: none;
    padding-right: 1.9rem;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 1.05rem center, right .75rem center;
    background-size: .3rem .3rem, .3rem .3rem;
    background-repeat: no-repeat;
}

select:hover {
    border-color: var(--muted);
}

textarea {
    resize: vertical;
}

/* De router zet na elke navigatie de aandacht op de h1, zodat een schermlezer voorleest waar
   je terechtkomt (Routes.razor). Met een muis of een duim wil je die rand niet zien: die hoort
   alleen bij toetsenbordgebruik. */
h1:focus:not(:focus-visible) {
    outline: none;
}

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

label > span {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: .15rem;
}

label.block {
    display: block;
    margin: .75rem 0;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.form-row > label {
    flex: 0 1 12rem;
}

.label-like span {
    display: block;
    font-size: .8rem;
    margin-bottom: .15rem;
}

.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.empty-state {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    color: var(--muted);
}

/* ---------- overzicht ---------- */

.trip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* Twee per rij: grotere beelden, ook op een gsm. Blijft twee, want dat is wat je koos. */
:root[data-lijstvorm="twee"] .trip-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Lijst: één per regel, het beeld klein links ernaast. Zo passen er tien op een scherm en
   lees je de namen onder elkaar in plaats van ze te moeten zoeken tussen de foto's. */
:root[data-lijstvorm="lijst"] .trip-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}

:root[data-lijstvorm="lijst"] .trip-card {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
}

:root[data-lijstvorm="lijst"] .trip-card-image {
    aspect-ratio: 1 / 1;
}

:root[data-lijstvorm="lijst"] .trip-card-image .placeholder {
    font-size: .7rem;
    text-align: center;
    padding: 0 .3rem;
}

:root[data-lijstvorm="lijst"] .trip-card-body {
    padding: .6rem .9rem;
}

.trip-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.trip-card-image {
    aspect-ratio: 3 / 2;
    background: var(--placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trip-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trip-card-image .placeholder {
    color: var(--muted);
    font-size: .85rem;
}

.trip-card-body {
    padding: .75rem 1rem 1rem;
}

.trip-card-body h2 {
    margin: 0 0 .15rem;
    font-size: 1.05rem;
}

.trip-card-body p {
    margin: 0;
}

/* Kop van de reispagina: alles op één regel, de instellingen zitten achter Bewerken
   zodat de dagen zo hoog mogelijk op het scherm beginnen. */
.trip-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.trip-head-main {
    flex: 1 1 20rem;
}

/* Zoekbalk in de kop van het overzicht: het vergrootglas ligt in het veld. */
/* min-width: 0 laat het veld krimpen; zonder dat duwt het de knoppen naar de volgende regel. */
.search {
    position: relative;
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 24rem;
    display: flex;
}

.search input {
    padding-left: 2.1rem;
    /* 16px, anders zoomt de browser in bij het tikken op een gsm. */
    font-size: 16px;
}

.search input::-webkit-search-decoration,
.search input::-webkit-search-results-button {
    display: none;
}

.search-icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--muted);
    pointer-events: none;
}

/* Elke paginakop: titel links, knoppen rechts, op één regel. Wat erbij hoort — datums,
   tellers — loopt eronder over de volle breedte. */
.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.title-row h1 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Op de reispagina volgen de datums er direct onder: daar hoort geen ruimte tussen. */
.trip-head .title-row {
    margin-bottom: 0;
}

.trip-head h1 {
    font-size: 1.4rem;
}

.trip-head p {
    margin: 0;
}

.trip-description {
    max-width: 60ch;
    margin-top: .15rem !important;
}

.trip-settings {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem .9rem .9rem;
    margin-bottom: 1rem;
}

.trip-settings .form-row > label.grow {
    flex: 1 1 16rem;
}

.settings-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.afmelden {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.afmelden p {
    margin: 0;
}

/* Staat er al iemand bij, dan draagt het knopje de accentkleur: dan zie je in één oogopslag
   welke activiteiten apart gedeeld zijn. */
.icon-button.gedeeld {
    color: var(--accent);
}

/* Met wie iets gedeeld is: één regel per persoon, met wat hij mag. */
.delen-lijst {
    list-style: none;
    margin: .2rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.delen-rij {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.delen-naam {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delen-niveau {
    flex: 0 0 8.5rem;
}

/* De leden van een groep: een lijstje aankruisvakjes in het venster. */
.groep-leden {
    list-style: none;
    margin: .2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    max-height: 15rem;
    overflow-y: auto;
}

.keuze {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    cursor: pointer;
}

.keuze input {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}

/* ---------- gezin ---------- */

/* Eén regel per persoon: wie het is en wat hij mag. De code zit in het venster erachter —
   op het scherm zelf zegt ze niets en ze staat er dan ook niet zomaar bij. */
.gezin-lijst {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.gezin-rij {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .6rem .7rem;
}

.gezin-wie {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.gezin-naam {
    font-weight: 600;
}

/* ---------- locaties ---------- */

.places {
    margin-top: .9rem;
    border-top: 1px solid var(--line);
    padding-top: .7rem;
}

.places-title {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: .35rem;
}

.place-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.place-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.place-row .place-name {
    flex: 1 1 10rem;
}

.place-row .place-coordinates {
    flex: 1 1 12rem;
}

.place-row .place-kind {
    flex: 0 0 8rem;
}

.place-row .place-country {
    flex: 0 0 9rem;
}

.place-usage {
    flex: 1 1 9rem;
}

/* De keuzelijst en de knop ernaast horen op één lijn te staan, ook als het label wegvalt. */
.place-picker {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    flex: 1 1 16rem;
}

.place-picker > label {
    flex: 1 1 auto;
}

.day-stay {
    display: flex;
    max-width: 32rem;
}

/* Zeven kaarten per rij: elke rij is een week, en dezelfde weekdag valt
   telkens in dezelfde kolom omdat de dagen aaneensluiten. */
.day-cards {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .45rem;
}

@media (max-width: 1500px) {
    .day-cards {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .day-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .day-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Drie op een gsm, niet twee: anders is "raster" daar hetzelfde als "twee per rij" en heeft
   de knop maar twee standen. Drie blijft leesbaar — het blaadje is smal, de titel kort. */
@media (max-width: 560px) {
    .day-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .35rem;
    }
}

/* Een logboek heeft geen weken: de datums liggen los uit elkaar, dus zegt "zeven per rij"
   niets meer. Daar passen er zoveel naast elkaar als er ruimte is, en mogen de kaarten wat
   breder zijn — er staat één bezoek op, geen dag vol. */
.day-cards.logboek {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .7rem;
}

/* Twee per rij: grotere blaadjes en grotere foto's, ook op een gsm. */
:root[data-dagvorm="twee"] .day-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Lijst: één dag per regel. Het kalenderblaadje wordt een strook links, de titel staat ernaast,
   en de fotostrook valt weg — anders is een lijst even lang als een raster. */
:root[data-dagvorm="lijst"] .day-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
}

/* De vlag zakt naar een tweede regel onder het soort: alles op één rij maakte de strook een
   kwart van een gsm breed, terwijl er rechts toch al twee regels tekst staan. Zo is ze smaller
   zonder dat de kaart hoger wordt. */
:root[data-dagvorm="lijst"] .day-card {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
}

/* Op een blaadje staan het soort en de vlag absoluut op de randen, want daar staat de datum
   gecentreerd tussenin. Op één regel is er geen "tussenin": alles komt op een rij te staan,
   met de vlag achteraan. */
/* Twee kolommetjes: links het soort met de vlag eronder, rechts de datum — en die staat over
   allebei die regels heen, dus in het midden van de strook. */
:root[data-dagvorm="lijst"] .leaf-header {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    /* Het hele groepje in het midden van de strook, en icoon en vlag netjes onder elkaar. */
    justify-content: center;
    justify-items: center;
    column-gap: .22rem;
    row-gap: .1rem;
    padding: .3rem .35rem;
    white-space: nowrap;
}

:root[data-dagvorm="lijst"] .leaf-kind,
:root[data-dagvorm="lijst"] .leaf-flag {
    position: static;
    transform: none;
    margin: 0;
}

:root[data-dagvorm="lijst"] .leaf-kind {
    grid-column: 1;
    grid-row: 1;
}

/* Geen land? Dan is er geen tweede regel om boven te staan: het soort neemt allebei de regels
   en staat dus even hoog als de datum ernaast. */
:root[data-dagvorm="lijst"] .leaf-header:not(:has(.leaf-flag)) .leaf-kind {
    grid-row: 1 / span 2;
}

:root[data-dagvorm="lijst"] .leaf-flag {
    grid-column: 1;
    grid-row: 2;
}

:root[data-dagvorm="lijst"] .leaf-month {
    grid-column: 2;
}

:root[data-dagvorm="lijst"] .leaf-day {
    grid-column: 3;
}

:root[data-dagvorm="lijst"] .leaf-weekday {
    grid-column: 4;
}

/* Over allebei de regels heen, met line-height 1: dan staat elk deel op zijn eigen midden en
   liggen ze samen toch netjes op één lijn. */
:root[data-dagvorm="lijst"] .leaf-month,
:root[data-dagvorm="lijst"] .leaf-day,
:root[data-dagvorm="lijst"] .leaf-weekday {
    grid-row: 1 / span 2;
    line-height: 1;
}

:root[data-dagvorm="lijst"] .leaf-month,
:root[data-dagvorm="lijst"] .leaf-weekday {
    font-size: .64rem;
}

:root[data-dagvorm="lijst"] .leaf-day {
    font-size: .76rem;
}

:root[data-dagvorm="lijst"] .leaf-flag .flag {
    width: 1.1em;
    height: .75em;
}

:root[data-dagvorm="lijst"] .day-card-link {
    justify-content: center;
    padding: .35rem .7rem;
}

:root[data-dagvorm="lijst"] .day-strip {
    display: none;
}

/* De hele kaart is de knop naar die dag: het gekleurde blaadje, de titel, de witruimte.
   De link rekt zich met een ::after over de kaart uit; wat zelf iets moet doen (de prullenbak,
   de fotostrook) gaat er met z-index bovenop. */
.day-card {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Vandaag springt eruit tussen de zeven kaarten van de week. */
.day-card.vandaag {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent);
}

/* De kaart is zelf het kalenderblaadje: gekleurde strook bovenaan met "JUL 11 za",
   daaronder de titel en één foto. */
.leaf-header {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    padding: .12rem 1.6rem;
    background: var(--accent);
    color: #fff;
}

.leaf-month {
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.leaf-day {
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.leaf-weekday {
    font-size: .68rem;
    opacity: .85;
}

.leaf-delete {
    position: absolute;
    z-index: 2;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    opacity: .7;
    font-size: .85rem;
}

.leaf-delete:hover {
    opacity: 1;
    background: rgb(255 255 255 / 20%);
}

.day-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.day-card-link {
    display: flex;
    flex-direction: column;
    /* Een lege dag is enkel het blaadje met de datum: een dun randje wit eronder volstaat om
       de kaart aan te kunnen tikken. Anders staan er 25 halflege vakken op het scherm. */
    min-height: .9rem;
    padding: .3rem .55rem .35rem;
    text-decoration: none;
    min-width: 0;
    line-height: 1.35;
}

.day-card-title {
    font-weight: 600;
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-card-link .small {
    font-size: .76rem;
}

/* Eén foto per dag, over de volle breedte van de kaart. De volgende staat ernaast maar
   buiten beeld, en schuift in beeld zolang de muis erboven staat (wwwroot/js/daystrip.js). */
.day-strip {
    position: relative;
    z-index: 1;
    display: flex;
    margin: 0 .55rem .55rem;
    border-radius: 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--placeholder);
}

.day-strip::-webkit-scrollbar {
    display: none;
}

.strip-thumb {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    line-height: 0;
}

.strip-thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* ---------- dagweergave ---------- */

.day-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
}

/* De dag staat in het midden, met de vorige en de volgende ernaast: de pijl wijst naar waar
   je terechtkomt. */
.day-titelrij {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
}

/* De pijlen horen tégen de datum, niet tegen de schermranden: liet je de titel alle ruimte
   opeisen, dan staan ze op een breed scherm meters uit elkaar. */
.day-titelrij .day-heading {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}

.day-titelrij .day-date-line {
    justify-content: center;
}

/* Een rond, grijs schijfje met een duidelijke pijl erin: het leest meteen als "hier klik je",
   en het grijs is kleurloos genoeg om in elk thema te passen — geen groene randjes meer. */
.day-titelrij .button {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 999px;
    border-color: transparent;
    background: rgba(127, 127, 127, .14);
    color: var(--ink);
}

.day-titelrij .button .icon {
    width: 1.5em;
    height: 1.5em;
    stroke-width: 2.4;
}

.day-titelrij .button:hover:not(:disabled),
.day-titelrij .button:focus-visible:not(:disabled) {
    background: rgba(127, 127, 127, .24);
}

.day-titelrij .button:disabled {
    opacity: .3;
}

/* De naam van de dag is de kop; de datum staat er klein onder. */
.day-heading h1 {
    margin: 0;
    overflow-wrap: anywhere;
}

.day-heading p {
    margin: .1rem 0 0;
}

.day-nav {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.crumb {
    font-size: .85rem;
    color: var(--muted);
}

/* Blokken met een eigen rand: zonder die groepering staat een dagpagina op een gsm als één
   lange kolom losse velden, en weet je niet meer wat bij de dag hoort en wat bij de activiteit. */
/* De ruimte tussen velden komt van deze gap, niet van marges op de velden zelf: anders telt
   een marge erbij op en staat dat ene veld scheef. Zie DESIGN.md. */
.panel {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem 1.1rem;
    margin-top: 1rem;
}

.panel > label.block,
.panel > .metadata > label.block {
    margin: 0;
}

.panel-title {
    font-size: .95rem;
    margin: 0;
}

/* Buiten bewerken: gewoon lezen wat er staat. */
.day-summary {
    margin-top: .5rem;
    max-width: 60ch;
}

.day-name {
    font-size: 1.1rem;
    margin: 0;
}

.day-stay-line {
    margin: .15rem 0 0;
}

.day-notes-text {
    margin: .5rem 0 0;
    white-space: pre-wrap;
}

.activity-head h3 {
    margin: 0;
}

.activity-head p {
    margin: .1rem 0 0;
}

.activity-notes {
    margin: 0;
    max-width: 70ch;
    white-space: pre-wrap;
}

.day-title-input {
    font-size: 1.05rem;
    font-weight: 600;
    max-width: 30rem;
}

.day-notes {
    max-width: 46rem;
}

.activity-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.activity-block-head h3 {
    margin: 0;
    font-size: 1.15rem;
}

.block-tools {
    display: flex;
    align-items: center;
    gap: .1rem;
}

.activities-head {
    margin-top: 1.5rem;
}

.activities-head h2 {
    margin: 0;
}

.metadata {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.metadata .grow {
    flex: 1 1 16rem;
}

.metadata .narrow {
    flex: 0 0 7rem;
}

/* De ruimte tussen de onderdelen komt van de gap van het blok; hier niets bovenop. */
.two-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .9rem;
}

/* ---------- foto's ---------- */

/* Het bestandsveld achter de ＋: onzichtbaar, maar wel in de pagina zodat het label het opent. */
.hidden-file {
    display: none;
}

.button.square.disabled {
    opacity: .5;
    pointer-events: none;
}

.dropzone {
    position: relative;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.1rem;
    text-align: center;
    color: var(--muted);
    margin-bottom: .75rem;
}

.dropzone.small {
    padding: .7rem;
    font-size: .85rem;
}

.dropzone:hover, .dropzone:focus-within {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.dropzone.busy {
    border-color: var(--accent);
    color: var(--accent);
}

.dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Strook om opzij te vegen: één foto in beeld, de volgende kijkt om de hoek zodat je ziet
   dat er meer is. Het snappen doet de browser; er komt geen JavaScript aan te pas. */
.photo-strip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Ruimte voor de rand van het blok, zodat de eerste foto niet tegen de kant plakt. */
    padding-bottom: .15rem;
}

.photo-strip::-webkit-scrollbar {
    display: none;
}

.photo-slide {
    position: relative;
    flex: 0 0 min(86%, 24rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}

/* Eén foto: dan is er niets om naast te zetten. */
.photo-strip > .photo-slide:only-child {
    flex-basis: 100%;
}

.photo-slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--placeholder);
}

.slide-caption-strip {
    position: absolute;
    inset: auto 0 0 0;
    padding: .8rem .6rem .4rem;
    background: linear-gradient(transparent, rgb(0 0 0 / 55%));
    color: #fff;
    font-size: .8rem;
    line-height: 1.3;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}

.photo-tile {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: grab;
}

.photo-tile.dragging {
    opacity: .4;
}

.photo-open {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    padding: 0;
    background: var(--placeholder);
    cursor: pointer;
}

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

.no-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    font-size: .8rem;
    gap: .2rem;
}

.photo-tile figcaption {
    padding: .2rem .3rem .35rem;
}

.tile-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tile-position {
    font-size: .75rem;
    color: var(--muted);
}

.tile-caption {
    display: block;
    font-size: .8rem;
    padding: 0 .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-list {
    list-style: none;
    padding: .5rem .75rem;
    margin: 0 0 .75rem;
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: .85rem;
}

/* ---------- toegangscode ---------- */

.gate-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem;
}

.gate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.5rem 1.5rem;
    width: min(21rem, 100%);
}

.gate h1 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
}

.gate input {
    /* Groot genoeg om met een duim te raken, en 16px houdt iOS ervan af in te zoomen. */
    font-size: 16px;
    padding: .6rem .7rem;
}

.gate .button {
    margin-top: 1rem;
}

/* ---------- venster boven de pagina ---------- */

.modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(15 18 20 / 45%);
}

.modal {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
    padding: 1.1rem 1.25rem 1.25rem;
    width: min(26rem, 100%);
    max-height: 100%;
    overflow-y: auto;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .25rem;
}

.modal-head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.modal .hint {
    color: var(--muted);
    font-size: .8rem;
    margin: -.35rem 0 .2rem;
}

.modal .hint code {
    background: var(--bg);
    border-radius: 4px;
    padding: 0 .2rem;
}

.confirm-question {
    margin: 0;
    max-width: 40ch;
}

.modal .narrow-field {
    max-width: 10rem;
}

.modal .error {
    margin: .5rem 0 0;
}

/* Een veld zonder label komt anders tegen de kop aan te staan. */
.modal > input,
.modal > textarea {
    margin-top: .4rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.1rem;
}

/* ---------- lightbox ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgb(15 18 20 / 92%);
    display: grid;
    grid-template-columns: 3.5rem 1fr 3.5rem;
    grid-template-rows: 1fr auto;
    z-index: 50;
    color: #f2f2f2;
}

.lightbox-stage {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 0;
}

.lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Niet over de volle hoogte: anders ligt de rechterkolom onder het sluitkruisje, en tik je
   op een gsm de volgende foto aan in plaats van te sluiten. */
.lightbox-step {
    grid-row: 1;
    align-self: center;
    height: 70%;
    font-size: 2rem;
    color: #f2f2f2;
}

.lightbox-step.prev {
    grid-column: 1;
}

.lightbox-step.next {
    grid-column: 3;
}

.lightbox-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    /* Een duim mikt niet op een letter: minstens 44 pixels, met een eigen achtergrond zodat
       het kruisje ook op een lichte foto zichtbaar blijft. */
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(0 0 0 / 45%);
    font-size: 1.3rem;
    color: #f2f2f2;
}

.lightbox-close:hover:not(:disabled) {
    background: rgb(0 0 0 / 65%);
}

.lightbox-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: rgb(0 0 0 / 35%);
    flex-wrap: wrap;
}

.lightbox-caption {
    flex: 1 1 14rem;
    background: rgb(255 255 255 / 10%);
    border-color: transparent;
    color: #fff;
}

.lightbox-bar .muted {
    color: #b9c0c5;
}

/* ---------- diavoorstelling ---------- */

.slideshow {
    position: fixed;
    inset: 0;
    background: #0c0e10;
    color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slideshow:focus-visible {
    outline: none;
}

.slide {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: slide-in .45s ease-out;
}

@keyframes slide-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.slide-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.75rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 2.5rem 1.5rem .75rem;
    background: linear-gradient(to top, rgb(0 0 0 / 70%), transparent);
    pointer-events: none;
}

.slide-trip {
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-light);
}

.slide-date {
    font-size: 1.35rem;
    font-weight: 600;
}

.slide-activity {
    font-size: 1rem;
    color: #dfe4e7;
}

.slide-time {
    font-variant-numeric: tabular-nums;
    color: var(--accent-light);
    margin-right: .3rem;
}

.slide-note {
    font-size: .9rem;
    color: #b6bec3;
    font-style: italic;
}

.slide-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: rgb(0 0 0 / 55%);
    color: #f2f2f2;
}

.slide-controls .icon-button {
    color: #f2f2f2;
    font-size: 1.3rem;
    text-decoration: none;
    line-height: 1.4;
}

.slide-controls .icon-button:hover {
    background: rgb(255 255 255 / 12%);
}

.slide-controls .play {
    font-size: 1.1rem;
}

.slide-counter {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    color: #b6bec3;
    margin-left: .25rem;
}

.slide-interval {
    margin-left: auto;
}

.slide-interval select {
    font: inherit;
    font-size: .85rem;
    color: #f2f2f2;
    background: rgb(255 255 255 / 12%);
    border: 0;
    border-radius: 8px;
    padding: .25rem .4rem;
}

.slide-skipped {
    position: absolute;
    top: .75rem;
    left: 1rem;
    margin: 0;
    font-size: .8rem;
    color: #b6bec3;
    background: rgb(0 0 0 / 45%);
    padding: .25rem .6rem;
    border-radius: 999px;
}

.slideshow-empty {
    text-align: center;
    color: #dfe4e7;
}

.slideshow-empty .button {
    background: transparent;
    color: #f2f2f2;
    border-color: rgb(255 255 255 / 30%);
}

/* De knoppen horen op één regel bij de titel; ze wijken niet voor wat ernaast staat. */
.head-actions {
    display: flex;
    gap: .5rem;
    flex: none;
}

/* Op een gsm passen vier of vijf knoppen niet meer naast een titel: dan liep de laatste buiten
   beeld en schoof de hele pagina zijwaarts. Ze zakken naar een eigen regel, rechts uitgelijnd —
   liever een regel erbij dan een knop die er niet meer is. */
@media (max-width: 560px) {
    .title-row {
        flex-wrap: wrap;
    }

    .head-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
    }
}

/* ---------- opmerkingen en bijlages ---------- */

.comment-list, .attachment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Een lijst die niets bevat, hoort ook geen ruimte in te nemen. */
.comment-list:empty, .attachment-list:empty {
    display: none;
}

/* Onderdelen binnen een blok: zelfde ritme als de velden. */
.photos, .comments, .attachments {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.comment {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem .7rem;
}

.comment-text {
    margin: 0;
    white-space: pre-wrap;
}

.comment-meta {
    margin: .2rem 0 0;
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
}

.comment-actions {
    display: flex;
    gap: .5rem;
    margin-top: .4rem;
}

/* Elke tussenkop dezelfde vorm: titel links, knoppen rechts. */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* Rustiger dan de naam van de activiteit: dat is de kop waar je oog op moet landen. */
.section-head h3 {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.section-count {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.section-actions {
    display: flex;
    gap: .5rem;
}

.attachment-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .4rem .7rem;
}

.attachment-list a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- fouten van Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ---------- smal scherm ---------- */

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

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        z-index: 40;
    }

    .app.nav-open .sidebar {
        transform: none;
    }

    .app.nav-open .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        padding: 0;
        background: rgb(0 0 0 / 35%);
        z-index: 39;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .content {
        padding: 1rem;
    }

    /* Een lange datum als "zondag 9 augustus 2026" vult anders twee regels. */
    h1 {
        font-size: 1.3rem;
    }

    .day-head {
        gap: .6rem;
    }

    /* Op een gsm mag het dichter: een app zet rijen tegen elkaar, een webpagina laat ze
       uit elkaar staan. */
    .panel {
        gap: .7rem;
        padding: .7rem .8rem .8rem;
        margin-top: .7rem;
        border-radius: 12px;
    }

    .content {
        padding: .75rem;
    }

    .activity-block-head h3 {
        font-size: 1.05rem;
    }

    .activities-head {
        margin-top: 1.1rem;
    }

    .two-columns {
        gap: .7rem;
    }

    .day-summary {
        margin-top: .35rem;
    }

    /* Naast elkaar past niet op 400 pixels; onder elkaar met wat lucht leest beter. */
    .metadata {
        gap: .85rem;
    }

    .metadata .narrow {
        flex: 1 1 100%;
    }

    .lightbox {
        grid-template-columns: 2.5rem 1fr 2.5rem;
    }
}

/* De keuzeknoppen in de tv-instellingen: tijd en volgorde */
.tv-keuze {
    flex-wrap: wrap;
    display: flex;
    gap: .5rem;
    margin-top: .3rem;
}

/* De tijd per foto: vijf stappen die samen één balk vormen, ook op een gsm op één lijn. */
.tv-schuif {
    display: flex;
    width: 100%;
    margin-top: .3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.tv-stap {
    flex: 1 1 0;
    min-width: 0;
    padding: .5rem .2rem;
    border: none;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.tv-stap:first-child {
    border-left: none;
}

.tv-stap.aan {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* Bewerkvenster van een foto die al bij een activiteit hoort */
.foto-bewerk {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-items: center;
}

.foto-bewerk img {
    max-width: 100%;
    max-height: 50vh;
    border-radius: var(--radius);
}

.foto-bewerk-knoppen {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* De hoofdactie van een logboek staat naast de titel; de overige knoppen zakken daaronder
   zodat die regel niet volloopt. */
.trip-head .title-row h1 {
    flex: 1;
}

.trip-head .titel-actie {
    flex: none;
}

@media (max-width: 560px) {
    .trip-head .head-actions {
        flex-basis: 100%;
    }
}