/* Reserveringen (8 sep 2026, goedgekeurd ontwerp: telefonie-ontwerp/Overzicht
   en Inrichting). Het Reserveringen-EIGEN deel van de stylesheet voor
   Pages/Reserveringen/ReserveringenOverzicht.razor en
   ReserveringenInrichting.razor; prefix rv-, gescoped onder .app-root.
   De gedeelde primitieven (paginakop, statusregel, secties, inhoudsopgave,
   velden, knoppen, segment, lijst met rijen en detail, week, opslaanbalk)
   staan in css/ontwerp.css (ds-); de plattegrond-editor en het raster in
   css/plattegrond.css (pg-). Ontwerptaal: zie ontwerp.css -- alleen
   thematokens, nergens een hexkleur. De Widget-tab (rv-widget, rv-studio,
   rv-logo, rv-paletten/rv-palet, rv-stalen/rv-staal, rv-voorbeeld) staat
   onderaan; de enige hexkleuren dáár zijn de widget-paletten in de markup.
   rv-overzicht, rv-inrichting, rv-vestigingen en rv-plattegrond__werkbalk
   zijn alleen haken in de markup (geen eigen regels). */

/* ── Overzicht: kopregel ──────────────────────────────────────────────── */

.app-root .rv-head__acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* De vestigingkeuze zit in de statusregel: een kale select zonder rand, in
   dezelfde tekstkleur en -grootte als de rest van de regel. */
.app-root .rv-status__select {
    padding: 0 1.25rem 0 0;
    border: 0;
    background-color: transparent;
    color: var(--app-text-primary);
    font: inherit;
    cursor: pointer;
}

.app-root .rv-status__select:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
    border-radius: .25rem;
}

.app-root .rv-status__datum::first-letter {
    text-transform: lowercase;
}

/* Datumkiezer: ‹ datum › als één control van 40px. */
.app-root .rv-datum {
    display: inline-flex;
    align-items: stretch;
    height: 2.5rem;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    background-color: var(--app-surface);
    overflow: hidden;
}

.app-root .rv-datum__knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--app-text-secondary);
    font-size: .75rem;
    cursor: pointer;
}

.app-root .rv-datum__knop:hover {
    color: var(--app-text-primary);
    background-color: var(--app-secondary-soft);
}

.app-root .rv-datum__knop:focus-visible,
.app-root .rv-datum__invoer:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.app-root .rv-datum__invoer {
    box-sizing: border-box;
    height: 100%;
    padding: 0 .5rem;
    border: 0;
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    background-color: transparent;
    color: var(--app-text-primary);
    font-size: .8125rem;
    font-family: inherit;
}

/* ── Overzicht: boekformulier als paneel onder de kop ─────────────────── */

.app-root .rv-boek {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.app-root .rv-boek__opties {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Een vinkje met titel én uitleg eronder. */
.app-root .rv-vink--uitleg {
    align-items: flex-start;
}

.app-root .rv-vink--uitleg input {
    margin-top: .2rem;
}

.app-root .rv-vink--uitleg > span {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

/* Velden in drie kolommen (boekformulier, regels, aanbetaling). */
.app-root .rv-velden {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.app-root .rv-velden--onder {
    align-items: end;
}

.app-root .rv-velden__breed {
    grid-column: 1 / -1;
}

/* Een schakelaar met tekst ernaast, op de hoogte van een veld. */
.app-root .rv-schakel {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    height: 2.5rem;
    font-size: .875rem;
    color: var(--app-text-primary);
    cursor: pointer;
}

.app-root .rv-schakel .app-toggle:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* Losse knoppen/velden naast elkaar. */
.app-root .rv-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.app-root .rv-inline__invoer {
    width: auto;
    flex: 1 1 12rem;
    max-width: 20rem;
    height: 2.25rem;
}

/* ── Overzicht: bezettingsstrook ──────────────────────────────────────── */

.app-root .rv-strook {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.app-root .rv-strook__kop {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .rv-strook__vakken {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: .375rem;
}

.app-root .rv-vak {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .rv-vak__balk {
    height: .375rem;
    border-radius: 999px;
    background-color: var(--app-border);
    overflow: hidden;
}

/* De API zegt per tijdvak alleen vol/niet-vol: een vol vak is een volle
   gouden balk, de rest blijft de lege baan -- geen verzonnen graad. */
.app-root .rv-vak__vulling {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background-color: var(--app-primary);
}

.app-root .rv-vak.is-vol .rv-vak__vulling {
    width: 100%;
}

.app-root .rv-vak__tekst {
    display: flex;
    justify-content: space-between;
    gap: .25rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .rv-vak.is-vol .rv-vak__tekst {
    color: var(--app-text-primary);
}

/* ── Overzicht: filters ───────────────────────────────────────────────── */

.app-root .rv-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-root .rv-zoek {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 16rem;
    max-width: 26rem;
}

.app-root .rv-zoek__icoon {
    position: absolute;
    left: .75rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    pointer-events: none;
}

.app-root .rv-zoek__invoer {
    height: 2.25rem;
    padding-left: 2.25rem;
    font-size: .8125rem;
}

/* ── Overzicht: de lijst ──────────────────────────────────────────────── */

.app-root .rv-tabel {
    --ds-kolommen: 64px minmax(0, 1fr) 72px 130px 200px 24px;
    --ds-detail-inspring: 64px;
}

/* Vanuit de plattegrond staat het detail los, met de gastnaam als kopregel. */
.app-root .rv-tabel__kopregel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
}

.app-root .rv-tabel--los .ds-detail {
    padding-left: 1.25rem;
}

.app-root .rv-rij .ds-rij__tijd {
    color: var(--app-text-primary);
    font-weight: 500;
}

.app-root .rv-rij__personen,
.app-root .rv-rij__tafel {
    color: var(--app-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* De eenheid achter het aantal personen bestaat alleen op smalle schermen,
   waar de kolomkop "Personen" is weggevallen. */
.app-root .rv-rij__eenheid {
    display: none;
}

.app-root .rv-rij__toevoeging {
    margin-left: .375rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--app-text-secondary);
}

.app-root .rv-rij__icoon {
    margin-left: .375rem;
    font-size: .6875rem;
    color: var(--app-text-secondary);
}

.app-root .rv-rij .ds-rij__status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Aanbetaling binnen (28 aug 2026): een gastheer scant de lijst van boven
   naar beneden; deze markering is voor dat scannen, de badge blijft voor
   het bedrag. Inset-schaduw en geen border-left, zodat de kolommen van
   betaalde en onbetaalde rijen op één lijn blijven. */
.app-root .rv-rij--betaald {
    box-shadow: inset 3px 0 0 var(--app-success);
}

.app-root .rv-pil--klein {
    font-size: .625rem;
    padding: .0625rem .375rem;
}

/* ── Overzicht: het detail onder de open rij ──────────────────────────── */

.app-root .rv-detail {
    --rv-detail-kolom: 300px;
    grid-template-columns: minmax(0, 1fr) var(--rv-detail-kolom);
}

.app-root .rv-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.app-root .rv-contact__item {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.app-root .rv-contact dt {
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .rv-contact dd {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-primary);
    word-break: break-word;
}

.app-root .rv-contact dd.is-leeg {
    color: var(--app-text-secondary);
}

.app-root .rv-regels {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

/* Een regel met een stip (icoon) ervoor: betaling, bevestiging, tafels. */
.app-root .rv-regel {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .rv-regel > i {
    font-size: .5rem;
    flex-shrink: 0;
    color: var(--app-text-secondary);
}

.app-root .rv-regel--open > i {
    color: var(--app-primary);
}

.app-root .rv-regel--ok > i {
    color: var(--app-success);
}

.app-root .rv-regel--uit {
    color: var(--app-text-secondary);
}

.app-root .rv-detail__opmerking {
    margin: 0;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
    white-space: pre-wrap;
}

/* De acties: knoppen onder elkaar, over de volle kolombreedte. */
.app-root .rv-acties .ds-knop {
    width: 100%;
    height: 2.25rem;
    font-size: .8125rem;
}

.app-root .rv-annuleer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ── Overzicht: plattegrond-weergave ──────────────────────────────────── */

.app-root .rv-plattegrond {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-root .rv-plattegrond__zone {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.app-root .rv-slot {
    width: auto;
    height: 2.25rem;
    font-size: .8125rem;
}

/* ── Inrichting: vestigingen ──────────────────────────────────────────── */

.app-root .rv-vestigingen__klein {
    font-size: .6875rem;
    color: var(--app-text-secondary);
}

.app-root .rv-vestiging-acties {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: -1.25rem;
}

.app-root .rv-badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--app-text-secondary);
}

/* ── Inrichting: zones en tafels ──────────────────────────────────────── */

.app-root .rv-zone {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
}

.app-root .rv-zone__kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-root .rv-zone__naam {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
}

.app-root .rv-zone__titel {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .rv-zone__samenvatting {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .rv-zone__acties {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-root .rv-zone__acties .rv-schakel {
    height: auto;
    font-size: .8125rem;
}

.app-root .rv-tafels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .5rem;
}

/* Een tafel als blokje: nummer, plaatsen, en de kleine acties eronder. */
.app-root .rv-tafel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .625rem .5rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
    min-width: 0;
}

.app-root .rv-tafel__naam {
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-root .rv-tafel__plaatsen {
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .rv-tafel__acties {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: .25rem;
}

.app-root .rv-tafel__hernoem {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    width: 100%;
    margin-top: .375rem;
}

.app-root .rv-tafel-nieuw {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: end;
    padding-top: .75rem;
    border-top: 1px solid var(--app-border);
}

/* ── Inrichting: berichten, Mollie, widget ────────────────────────────── */

.app-root .rv-schakelrijen {
    display: flex;
    flex-direction: column;
}

.app-root .rv-mollie {
    gap: .625rem;
}

.app-root .rv-mollie__status {
    margin: 0;
    font-size: .8125rem;
}

.app-root .rv-onboarding {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--app-border);
}

/* Embed-code en boekingslink: één regel met de tekst links en de
   knop(pen) rechts. */
.app-root .rv-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
}

.app-root .rv-code__tekst {
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-x: auto;
    background: none;
    border: 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    white-space: pre;
}

.app-root .rv-code__tekst--url {
    font-family: inherit;
    font-size: .875rem;
    color: var(--app-text-primary);
    word-break: break-all;
    white-space: normal;
}

/* ── Responsief ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .app-root .rv-velden,
    .app-root .rv-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-root .rv-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .rv-tafel-nieuw {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-root .rv-vestiging-acties {
        margin-top: 0;
    }

    .app-root .rv-rij__eenheid {
        display: inline;
    }
}

@media (max-width: 600px) {
    .app-root .rv-velden,
    .app-root .rv-contact,
    .app-root .rv-tafel-nieuw {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .rv-head__acties {
        width: 100%;
    }

    .app-root .rv-head__acties .ds-knop--primair {
        width: 100%;
    }

    .app-root .rv-zoek {
        max-width: none;
    }

    .app-root .rv-code {
        flex-direction: column;
        align-items: stretch;
    }

    .app-root .rv-strook__vakken {
        grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
    }
}

/* ── Overzicht: maandkalender met stipjes ─────────────────────────────── */
/* (9 sep 2026, klantvraag Omar: maanden vooruit in één blik zien waar iets
   staat, vooral voor feesten die ver van tevoren geboekt worden. Vervangt het
   native datumveld tussen de dag-pijltjes.) */

.app-root .rv-kalender {
    position: relative;
    display: inline-flex;
}

/* De knop die de kalender opent, zit ín de datumgroep en moet dus exact de
   maat en randen van het vroegere datumveld aanhouden. */
.app-root .rv-datum__knop--open {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: auto;
    min-width: 8.5rem;
    padding: 0 .75rem;
    color: var(--app-text-primary);
    white-space: nowrap;
}

.app-root .rv-datum__knop--open i {
    color: var(--app-text-secondary);
    font-size: .8125rem;
}

/* Het paneel hangt onder de knop en mag over de lijst eronder vallen. Op
   smalle schermen springt hij naar de linkerrand zodat hij niet half buiten
   beeld valt. */
.app-root .rv-kal {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 40;
    width: 19rem;
    max-width: calc(100vw - 2rem);
    padding: .875rem;
    border: 1px solid var(--app-border);
    border-radius: .875rem;
    background-color: var(--app-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}

.app-root .rv-kal__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .625rem;
}

.app-root .rv-kal__maand {
    flex: 1;
    text-align: center;
    font-size: .9375rem;
    color: var(--app-text-primary);
}

.app-root .rv-kal__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: transparent;
    color: var(--app-text-secondary);
    font-size: .75rem;
    cursor: pointer;
}

.app-root .rv-kal__nav:hover:not(:disabled) {
    color: var(--app-text-primary);
    border-color: var(--app-text-secondary);
}

.app-root .rv-kal__nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.app-root .rv-kal__nav:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .rv-kal__weekdagen,
.app-root .rv-kal__raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .125rem;
}

.app-root .rv-kal__weekdagen {
    margin-bottom: .25rem;
}

.app-root .rv-kal__weekdag {
    text-align: center;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-text-secondary);
}

/* Een dagvakje is een tikdoel: op een telefoon staan er zeven naast elkaar,
   dus de hoogte doet het werk dat de breedte niet kan. */
.app-root .rv-kal__dag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background-color: transparent;
    color: var(--app-text-primary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    transition: background-color .12s;
}

.app-root .rv-kal__leeg {
    min-height: 2.25rem;
}

.app-root .rv-kal__dag:hover {
    background-color: var(--app-secondary-soft, rgba(120, 120, 120, .1));
}

.app-root .rv-kal__dag.is-vandaag .rv-kal__nummer {
    font-weight: 700;
    color: var(--app-primary);
}

.app-root .rv-kal__dag[aria-pressed="true"] {
    background-color: var(--app-primary);
    color: var(--app-surface);
}

.app-root .rv-kal__dag[aria-pressed="true"] .rv-kal__nummer {
    color: var(--app-surface);
}

.app-root .rv-kal__dag:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

/* Het stipje: dít is waar het de klant om ging. Het staat onder het
   dagnummer, in de primaire kleur, en wordt op de gekozen (gevulde) dag wit
   zodat het ook daar zichtbaar blijft. */
.app-root .rv-kal__dag.heeft-boeking::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .3125rem;
    width: .3125rem;
    height: .3125rem;
    margin-left: -.15625rem;
    border-radius: 50%;
    background-color: var(--app-primary);
}

.app-root .rv-kal__dag.heeft-boeking[aria-pressed="true"]::after {
    background-color: var(--app-surface);
}

.app-root .rv-kal__uitleg {
    margin: .75rem 0 0;
    padding-top: .625rem;
    border-top: 1px solid var(--app-border);
    font-size: .75rem;
    line-height: 1.4;
    color: var(--app-text-secondary);
}

@media (max-width: 600px) {
    .app-root .rv-kalender {
        position: static;
    }

    /* Zonder eigen positioneringscontext hangt het paneel aan de kaart:
       volle breedte, zodat het op een telefoon niet half buiten beeld valt. */
    .app-root .rv-kal {
        left: .75rem;
        right: .75rem;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-root .rv-kal__dag {
        transition: none;
    }
}

/* ── Widget: studio met instellingen links en het voorbeeld rechts ────── */
/* (ontwerp 9 sep 2026, Pages/Reserveringen/ReserveringenWidget.razor) */

.app-root .rv-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 3rem;
    align-items: start;
}

.app-root .rv-studio__voorbeeld {
    position: sticky;
    top: 1.5rem;
    min-width: 0;
}

/* Logo-tegel: één vierkant dat de kleurkiezer van het systeem opent; leeg
   is hij gestippeld, met logo krijgt hij een gewone rand. De camera-overlay
   komt alleen bij hover/focus. */
.app-root .rv-logo {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.app-root .rv-logo__tegel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border: 1px dashed var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s;
}

.app-root .rv-logo__tegel.heeft-logo {
    border-style: solid;
}

.app-root .rv-logo__tegel:hover,
.app-root .rv-logo__tegel:focus-within {
    border-color: var(--app-primary);
}

.app-root .rv-logo__beeld {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: .625rem;
}

.app-root .rv-logo__leeg {
    font-size: 1.75rem;
    color: var(--app-text-secondary);
    opacity: .5;
}

.app-root .rv-logo__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--app-text-primary) 55%, transparent);
    color: var(--app-surface);
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity .15s;
}

.app-root .rv-logo__tegel:hover .rv-logo__overlay,
.app-root .rv-logo__tegel:focus-within .rv-logo__overlay {
    opacity: 1;
}

.app-root .rv-logo__invoer {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.app-root .rv-logo__tekst {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    min-width: 0;
}

.app-root .rv-logo__acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

/* Paletten: een rij chips met vier staaltjes en een naam; het palet dat
   precies overeenkomt met de huidige kleuren is goud omrand. */
.app-root .rv-paletten {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-root .rv-paletten__label {
    margin-right: .25rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--app-text-secondary);
}

.app-root .rv-palet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem .375rem .5rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.app-root .rv-palet:hover {
    border-color: var(--app-text-secondary);
}

.app-root .rv-palet.is-actief {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 1px var(--app-primary);
}

.app-root .rv-palet:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .rv-palet__stalen {
    display: inline-flex;
}

.app-root .rv-palet__stalen span {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid var(--app-surface);
    box-shadow: 0 0 0 1px var(--app-border);
}

.app-root .rv-palet__stalen span + span {
    margin-left: -.3rem;
}

/* Kleurstalen: vier vakken naast elkaar, elk met een grote ronde staal (de
   systeemkleurkiezer ligt er onzichtbaar overheen) en de hexcode als veld. */
.app-root .rv-stalen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}

.app-root .rv-staal {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.app-root .rv-staal__kleur {
    position: relative;
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    box-shadow: inset 0 0 0 3px var(--app-surface);
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}

.app-root .rv-staal__kleur:hover,
.app-root .rv-staal__kleur:focus-within {
    border-color: var(--app-primary);
    transform: scale(1.04);
}

.app-root .rv-staal__kiezer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.app-root .rv-staal__tekst {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .rv-staal__hex {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    text-transform: lowercase;
    max-width: 9rem;
}

/* Tekenteller rechts naast het label. */
.app-root .rv-teller-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.app-root .rv-teller {
    font-size: .75rem;
    font-weight: 400;
    color: var(--app-text-secondary);
}

.app-root .rv-tekstvak {
    height: auto;
    min-height: 5.5rem;
    padding-top: .625rem;
    padding-bottom: .625rem;
    line-height: 1.45;
    resize: vertical;
}

/* Het voorbeeld: kop met live-punt en desktop/mobiel-segment, daaronder de
   lijst om het iframe. Mobiel = telefoonbreedte met dikkere, rondere rand. */
.app-root .rv-voorbeeld {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.app-root .rv-voorbeeld__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.app-root .rv-voorbeeld__live {
    font-size: .8125rem;
    font-weight: 500;
}

.app-root .rv-voorbeeld__live .ds-status__dot {
    animation: rvPuls 2s ease-in-out infinite;
}

@keyframes rvPuls {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.app-root .rv-voorbeeld__lijst {
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-bg);
    padding: .5rem;
    transition: max-width .2s ease, border-radius .2s ease, padding .2s ease;
}

.app-root .rv-voorbeeld__lijst.is-mobiel {
    max-width: 400px;
    margin: 0 auto;
    padding: .875rem .5rem;
    border-width: 6px;
    border-color: var(--app-text-primary);
    border-radius: 2rem;
}

.app-root .rv-voorbeeld__iframe {
    display: block;
    width: 100%;
    min-height: 32rem;
    border: 0;
    border-radius: .5rem;
    background-color: var(--app-surface);
}

.app-root .rv-voorbeeld__test {
    margin: 0;
    padding-top: .875rem;
    border-top: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .rv-voorbeeld__test strong {
    color: var(--app-text-primary);
    font-weight: 600;
}

@media (max-width: 1100px) {
    .app-root .rv-studio {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .app-root .rv-studio__voorbeeld {
        position: static;
    }
}

@media (max-width: 600px) {
    .app-root .rv-logo {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .rv-stalen {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .rv-paletten__label {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-root .rv-voorbeeld__live .ds-status__dot {
        animation: none;
    }

    .app-root .rv-logo__tegel,
    .app-root .rv-logo__overlay,
    .app-root .rv-palet,
    .app-root .rv-staal__kleur,
    .app-root .rv-voorbeeld__lijst {
        transition: none;
    }
}

/* prefers-reduced-motion: de widget-regels hierboven zetten hun eigen overgangen stil;
   de opslaanbalk-animatie en de overgangen staan in ontwerp.css en worden
   daar stilgezet. */