/* /afspraak/ (build 7): weekweergave in de stijl van Barts planbord
   (redder-repo tools/acties-board.html, Agenda-view), met een kwartierraster.
   Alleen de --rm-*-tokens uit brand.css, geen eigen kleuren. */

.afspraak-tabs {
    display: flex;
    justify-content: var(--justify-content, flex-start);
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.afspraak-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--rm-border-warm);
    background: var(--rm-white);
    color: var(--rm-teal-deep);
    font-family: "Syne", sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.afspraak-tab span {
    font-family: "DM Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rm-slate-light);
}

.afspraak-tab:hover {
    border-color: var(--rm-teal);
}

.afspraak-tab.is-active {
    background: var(--rm-teal-deep);
    border-color: var(--rm-teal-deep);
    color: var(--rm-white);
}

.afspraak-tab.is-active span {
    color: var(--rm-teal-light);
}

.afspraak-melding {
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rm-amber-bright) 14%, white);
    color: var(--rm-amber-dark);
    font-weight: 600;
}

/* Weekrij */
.ag-week {
    background: color-mix(in srgb, var(--rm-teal-light) 14%, white);
    border-radius: 14px;
    padding: 12px 14px 14px;
}

.ag-week__kop {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.ag-week__lbl {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--rm-teal-deep);
}

.ag-week__m {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--rm-slate-light);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ag-week__nav {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
}

.ag-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--rm-white);
    border: 1px solid var(--rm-border-warm);
    color: var(--rm-teal-deep);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.ag-knop:hover {
    background: color-mix(in srgb, var(--rm-teal) 14%, white);
}

.ag-knop.is-uit {
    opacity: 0.35;
}

.ag-leeg {
    margin: 0;
    color: var(--rm-slate);
}

/* Raster: tijd-as + dagkolommen, elke rij = een kwartier */
.ag-grid {
    --rij: 22px;
    display: grid;
    grid-template-columns: 44px repeat(var(--dagen), minmax(0, 1fr));
    gap: 8px;
}

/* Zelfde verticale opbouw als een dagkolom (rand + padding), zodat de uren uitlijnen. */
.ag-as {
    padding-top: 9px;
}

.ag-as__kop,
.ag-dag__kop {
    height: 30px;
    margin-bottom: 6px;
}

.ag-as__raster,
.ag-dag__raster {
    display: grid;
    grid-template-rows: repeat(var(--rijen), var(--rij));
}

.ag-as__raster span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rm-slate);
    line-height: 1;
    transform: translateY(-0.35em);
}

.ag-dag {
    background: var(--rm-white);
    border: 1px solid var(--rm-border-warm);
    border-radius: 10px;
    padding: 8px;
    min-width: 0;
}

.ag-dag.is-vandaag {
    border-color: var(--rm-amber);
    box-shadow: inset 0 0 0 1px var(--rm-amber);
}

.ag-dag__kop {
    display: flex;
    align-items: baseline;
    gap: 5px;
    border-bottom: 1px solid var(--rm-off-white);
}

.ag-dag__dn {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--rm-teal-deep);
}

.ag-dag.is-vandaag .ag-dag__dn {
    color: var(--rm-amber-dark);
}

.ag-dag__dd {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rm-slate);
    white-space: nowrap;
}

/* Hele uren doorgetrokken, kwartieren licht, zoals op het planbord. */
.ag-dag__raster {
    background-image:
        repeating-linear-gradient(to bottom,
            color-mix(in srgb, var(--rm-slate) 55%, white) 0 1px,
            transparent 1px calc(var(--rij) * 4)),
        repeating-linear-gradient(to bottom,
            color-mix(in srgb, var(--rm-slate-light) 30%, white) 0 1px,
            transparent 1px var(--rij));
}

.ag-blok {
    margin: 2px 0 1px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 5px;
    border-left: 3px solid var(--rm-teal);
    background: color-mix(in srgb, var(--rm-teal) 18%, white);
    color: var(--rm-teal-deep);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(13, 61, 64, 0.12);
    overflow: hidden;
}

.ag-blok:hover,
.ag-blok:focus-visible {
    background: color-mix(in srgb, var(--rm-teal) 32%, white);
}

.ag-blok.is-gekozen {
    background: var(--rm-amber);
    border-left-color: var(--rm-amber-dark);
    color: var(--rm-white);
}

.ag-dag__geen {
    grid-row: 1 / -1;
    padding: 2px 6px;
    background: var(--rm-white);
    align-self: center;
    justify-self: center;
    font-size: 0.75rem;
    color: var(--rm-slate-light);
}

/* Formulier */
/* Volle contentbreedte (vaste wens Bart): twee kolommen, keuze en vraag over de hele breedte. */
.afspraak-form {
    margin-top: 24px;
    scroll-margin-top: 90px;
}

.afspraak-form__raster {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.afspraak-form__raster > * {
    grid-column: 1 / -1;
}

.afspraak-form__raster > .rm-form__field.is-half {
    grid-column: auto;
}

.afspraak-form__raster .rm-form__submit {
    justify-self: start;
}

.afspraak-form__titel {
    font-size: 1.4rem;
    color: var(--rm-teal-deep);
}

.afspraak-form__titel span {
    font-family: "DM Sans", sans-serif;
    font-size: 0.9rem;
    color: var(--rm-slate-light);
}

.afspraak-form .rm-form input[type="radio"] {
    width: auto;
    margin: 0 6px 0 0;
}

.afspraak-form .rm-form__field > div {
    display: flex;
    gap: 16px;
}

.afspraak-form .rm-form__field > div label {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.afspraak-form__privacy {
    font-size: 0.85rem;
    color: var(--rm-slate);
}

.afspraak-bevestigd__wanneer {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--rm-teal-deep);
}

/* Telefoon: dagen onder elkaar, blokjes als knoppen naast elkaar. */
@media (max-width: 640px) {
    .afspraak-form__raster > .rm-form__field.is-half {
        grid-column: 1 / -1;
    }

    .ag-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ag-as {
        display: none;
    }

    .ag-dag.is-leeg {
        display: none;
    }

    .ag-dag__raster {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        background: none;
        padding-top: 8px;
    }

    .ag-blok {
        margin: 0;
        min-height: 44px;
        padding: 0 16px;
    }
}