/* Applicatie-stijl voor de agenda (inloggen, planbord, inplannen) — losstaand van de
   CMS-content, die z'n eigen opmaak uit het CMS krijgt. */

:root {
    --plum-900: #2f1f3e;
    --plum-700: #4a2e63;
    --plum-500: #6b3f8c;
    --plum-100: #f3edf7;
    --plum-050: #faf7fc;
    --ink: #241a2c;
    --muted: #6b6070;
    --line: #e3d9ea;
    --ok: #2e7d4f;
    --warn: #b7791f;
    --danger: #b23b3b;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(47, 31, 62, 0.08), 0 8px 24px rgba(47, 31, 62, 0.06);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--plum-050);
    line-height: 1.5;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: var(--plum-900);
}

h2 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--plum-900);
}

a {
    color: var(--plum-700);
}

/* ── Kaderloze pagina's: inloggen, foutmeldingen, geen-toegang ─────────────────────────── */

.agenda-login,
main:not(.agenda-login):not(.planbord):not(.planbord-nieuw):not(.planbord-detail):not(.catering):not(.provider-dashboard):not(.family-dashboard):not(.ur-main) {
    max-width: 420px;
    margin: 4rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ── Formulieren (BEM: .form-field / .form-actions, zie AGENTS.md) ─────────────────────── */

.form-field {
    margin-bottom: 1rem;
}

.form-field__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--plum-900);
    margin-bottom: 0.3rem;
}

.form-field--checkbox .form-field__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.form-field__control {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
    color: var(--ink);
}

.form-field__control:focus {
    outline: 2px solid var(--plum-500);
    outline-offset: 1px;
}

/* Meerdere velden onder één label (bv. voornaam/tussenvoegsel/achternaam). */
.form-field__group {
    display: flex;
    gap: 0.5rem;
}

.form-field__group .form-field__control {
    width: auto;
    flex: 2;
}

.form-field__control--narrow {
    flex: 1;
}

.form-field__error {
    color: var(--danger);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.form-actions {
    margin-top: 1.5rem;
}

.form-actions button,
button[type="submit"] {
    appearance: none;
    border: none;
    background: var(--plum-700);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    cursor: pointer;
}

.form-actions button:hover,
button[type="submit"]:hover {
    background: var(--plum-900);
}

/* Annuleren is destructief en mag nooit dezelfde nadruk krijgen als Bevestigen — ook niet
   als het (bij een al bevestigde uitvaart) de enige knop op de pagina is. */
.planbord-detail__cancel button[type="submit"] {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.planbord-detail__cancel button[type="submit"]:hover {
    background: var(--danger);
    color: #fff;
}

/* ── Goedkeuren/afwijzen door het centrum (de Boer) ─────────────────────────────────────── */

.planbord-detail__approval {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 1.25rem 0;
    padding: 1.25rem;
    background: var(--plum-050, #f5f2f8);
    border: 1px solid var(--plum-100, #e2d9ec);
    border-radius: 10px;
}

.planbord-detail__reject {
    flex: 1 1 18rem;
}

.planbord-detail__reject textarea {
    width: 100%;
    margin: 0.35rem 0 0.6rem;
    resize: vertical;
}

/* Afwijzen is een tegenhanger van bevestigen, geen primaire actie. */
.planbord-detail__reject-btn {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.planbord-detail__reject-btn:hover {
    background: var(--danger);
    color: #fff;
}

.planbord-detail__proposal {
    padding: 0.75rem 1rem;
    background: #fdf6ec;
    border-left: 3px solid #d79a3a;
    border-radius: 4px;
}

/* ── Header: merknaam, locatie(-wissel), uitloggen ──────────────────────────────────────── */

.agenda-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.agenda-header__brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--plum-900);
    text-decoration: none;
}

.agenda-header__location {
    color: var(--muted);
    font-size: 0.9rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--line);
}

.agenda-header__link {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.9rem;
}

.agenda-header__link:hover {
    color: var(--plum-900);
}

.agenda-header__switch {
    margin-left: auto;
}

.agenda-header__switch ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.agenda-header__switch a {
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--muted);
}

.agenda-header__switch a[aria-current] {
    background: var(--plum-100);
    color: var(--plum-900);
    font-weight: 600;
}

.agenda-header__logout {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.9rem;
    /* Staat aan het eind; als de locatie-switcher er niet is duwt niets 'm naar rechts. */
    margin-left: auto;
}

.agenda-header__switch + .agenda-header__logout {
    margin-left: 0;
}

/* ── Planbord: het weekrooster ───────────────────────────────────────────────────────────── */

.planbord {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1.5rem 3rem;
}

.planbord__action-required {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.planbord__action-required-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--plum-900);
}

.planbord__action-required-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planbord__action-required-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: var(--plum-100);
    text-decoration: none;
    color: var(--ink);
    font-size: 0.9rem;
}

.planbord__action-required-list a:hover {
    background: var(--plum-050);
    outline: 1px solid var(--plum-500);
}

.planbord__action-required-meta {
    color: var(--warn);
    font-weight: 600;
    white-space: nowrap;
}

.planbord nav[aria-label="Week"] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--muted);
}

.planbord nav[aria-label="Week"] a {
    text-decoration: none;
    font-weight: 600;
}

.planbord table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.planbord th,
.planbord td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.planbord th:last-child,
.planbord td:last-child {
    border-right: none;
}

.planbord thead th {
    background: var(--plum-900);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.planbord tbody th {
    background: var(--plum-100);
    color: var(--plum-900);
    font-weight: 600;
    white-space: nowrap;
    width: 11rem;
}

.planbord tbody tr:last-child td,
.planbord tbody tr:last-child th {
    border-bottom: none;
}

/* Lege cel: het "+" om in te plannen. Groot klikvlak, niet alleen het teken zelf. */
.planbord__add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    text-decoration: none;
    color: var(--line);
    font-size: 1.4rem;
    border-radius: 6px;
}

.planbord__add:hover {
    background: var(--plum-050);
    color: var(--plum-500);
}

.planbord__item {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    background: var(--plum-500);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.planbord__item:last-child {
    margin-bottom: 0;
}

.planbord__item strong {
    display: block;
}

.planbord__item--held {
    background: var(--warn);
}

.planbord__item--confirmed {
    background: var(--plum-700);
}

.planbord__item--cancelled {
    background: #a8a2ac;
    text-decoration: line-through;
}

/* ── Inplan-formulier en detailscherm ────────────────────────────────────────────────────── */

.planbord-nieuw,
.planbord-detail {
    max-width: 560px;
    margin: 2rem auto 3rem;
    padding: 1.75rem 2rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.planbord-detail__status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--muted);
}

.planbord-detail__status--held {
    background: var(--warn);
}

.planbord-detail__status--confirmed {
    background: var(--ok);
}

.planbord-detail__status--cancelled {
    background: var(--danger);
}

.planbord-detail dl {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 0.5rem 1rem;
    margin: 1.25rem 0;
}

.planbord-detail dt {
    color: var(--muted);
}

.planbord-detail dd {
    margin: 0;
}

.planbord-detail form {
    display: inline-block;
    margin-top: 1rem;
    margin-right: 0.75rem;
}

.planbord-detail h2 {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.planbord-detail__link-box {
    background: var(--plum-100);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    word-break: break-all;
    font-size: 0.9rem;
}

.planbord-detail__link-box code {
    color: var(--plum-900);
}

/* ── Tabel (verzorgersscherm) ────────────────────────────────────────────────────────────── */

.verzorgers__table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
}

.verzorgers__table th,
.verzorgers__table td {
    padding: 0.5rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.verzorgers__table th {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.verzorgers__table td:last-child {
    width: 9rem;
    text-align: right;
}

.verzorgers__status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--warn);
}

.verzorgers__status--approved {
    background: var(--ok);
}

.verzorgers__table form {
    display: inline-block;
    margin: 0;
}

/* ── Catering: productkaarten + meelopende prijsindicatie ───────────────────────────────── */

.catering {
    max-width: 900px;
    margin: 2rem auto 6rem;
    padding: 0 1.5rem;
}

.catering h1,
.catering > p {
    max-width: 640px;
}

.catering__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.catering__card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.catering__card-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--plum-100);
}

.catering__card-photo--placeholder {
    background: linear-gradient(135deg, var(--plum-100), var(--plum-050));
}

.catering__card-body {
    padding: 0.9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.catering__card-name {
    font-weight: 600;
    color: var(--plum-900);
}

.catering__card-price {
    color: var(--muted);
    font-size: 0.9rem;
}

.catering__card-qty {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.catering__card-qty-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.catering__card-qty input[type="number"] {
    width: 4.5rem;
}

.catering__sticky-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--plum-900);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-top: 1.5rem;
}

.catering__sticky-bar-label {
    opacity: 0.8;
    font-size: 0.9rem;
}

.catering__sticky-bar-amount {
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: auto;
}

.catering__sticky-bar button {
    background: #fff;
    color: var(--plum-900);
}

/* ── Uitvaartreserveren concept: rustige paarstinten, ruime agenda en mobiel rooster ─────── */
:root {
    --plum-900: #3d1d4b;
    --plum-700: #5d3278;
    --plum-500: #7541a2;
    --plum-100: #eee5f2;
    --plum-050: #f7f3f8;
    --ink: #382642;
    --muted: #786985;
    --line: #e5dceb;
    --ok: #478067;
    --warn: #9e7317;
    --danger: #a34257;
    --radius: 16px;
    --shadow: 0 8px 24px rgba(61, 29, 75, 0.1);
    --agenda-gradient: linear-gradient(112deg, #efe9f2 0%, #d9c8e1 56%, #c8afd5 100%);
    --agenda-card-gradient: linear-gradient(112deg, #542376 0%, #7650a6 100%);
    --agenda-header-background: rgba(255, 255, 255, 0.94);
    --agenda-mark: #65438e;
    --agenda-menu-background: #d7c6e0;
    --agenda-frosted-border: rgba(255, 255, 255, 0.65);
    --agenda-separator: #e5d9eb;
    --agenda-add-border: #e7dfea;
    --agenda-held-gradient: linear-gradient(110deg, #a6792b, #c49742);
    --agenda-action: #b72f7b;
    --agenda-section-surface: rgba(250, 247, 251, 0.78);
    --agenda-cancelled: #84798a;
    --agenda-focus: #8b62aa;
    --agenda-shadow-soft: 0 3px 10px rgba(61, 29, 75, 0.07);
    --agenda-surface: #fff;
    --agenda-on-accent: #fff;
    --agenda-soft-overlay: rgba(255, 255, 255, 0.92);
    --agenda-board-gradient: linear-gradient(115deg, rgba(250, 247, 251, 0.75), rgba(236, 225, 241, 0.72));
    --agenda-nav-separator: rgba(93, 50, 120, 0.12);
    --agenda-shadow-add: 0 2px 5px rgba(61, 29, 75, 0.15);
    --agenda-shadow-sticky: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 22px rgba(61, 29, 75, 0.22);
}

body {
    min-height: 100vh;
    background: var(--agenda-gradient);
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    color: var(--ink);
}

.agenda-header {
    min-height: 82px;
    padding: 0.65rem clamp(1rem, 2vw, 2.25rem);
    background: var(--agenda-header-background);
    border-bottom: 1px solid var(--agenda-nav-separator);
    justify-content: space-between;
    position: relative;
    z-index: 5;
}

.agenda-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--agenda-mark);
    line-height: 0.9;
}

.agenda-header__mark {
    width: 55px;
    height: 52px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agenda-header__wordmark {
    display: flex;
    flex-direction: column;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.agenda-header__account {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.agenda-header__account-name {
    color: var(--plum-900);
    font-weight: 600;
}

.agenda-menu {
    position: relative;
}

.agenda-menu summary {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--agenda-menu-background);
    color: var(--plum-900);
    list-style: none;
    cursor: pointer;
}

.agenda-menu summary::-webkit-details-marker {
    display: none;
}

.agenda-menu summary span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.agenda-menu__panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    display: grid;
    gap: 0.15rem;
    min-width: 220px;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--agenda-surface);
    box-shadow: var(--shadow);
}

.agenda-menu__panel a {
    padding: 0.7rem 0.8rem;
    border-radius: 9px;
    color: var(--ink);
    text-decoration: none;
}

.agenda-menu__panel a:hover,
.agenda-menu__panel a:focus-visible {
    background: var(--plum-050);
    color: var(--plum-700);
}

.planbord {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1rem, 1.6vw, 1.75rem);
}

.planbord__board {
    padding: clamp(1rem, 1.25vw, 1.5rem);
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 22px;
    background: var(--agenda-board-gradient);
}

.planbord__toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.planbord__toolbar h1 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 500;
}

.planbord__venue {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.planbord__week {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    color: var(--plum-900);
    font-size: 1rem;
    font-weight: 600;
}

.planbord__week-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--plum-900);
    color: var(--agenda-on-accent);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
}

.planbord__week-arrow:hover,
.planbord__week-arrow:focus-visible {
    background: var(--plum-500);
}

.planbord__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.55rem;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.planbord table.planbord__table {
    border-spacing: 0 0.55rem;
}

.planbord__table thead th {
    padding: 0.4rem 0.75rem 0.7rem;
    border: 0;
    background: transparent;
    color: var(--plum-700);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0;
}

.planbord__table thead th:first-child {
    width: 180px;
}

.planbord__table tbody th,
.planbord__table tbody td {
    height: 82px;
    padding: 0.7rem 0.9rem;
    border: 0;
    border-right: 2px solid var(--agenda-separator);
    background: var(--agenda-soft-overlay);
    vertical-align: middle;
}

.planbord__table tbody th {
    width: 180px;
    border-radius: 16px 0 0 16px;
    background: var(--plum-900);
    color: var(--agenda-on-accent);
    text-align: left;
    text-transform: lowercase;
    white-space: normal;
}

.planbord__table tbody th span,
.planbord__table tbody th strong {
    display: block;
}

.planbord__table tbody th span {
    font-size: 0.9rem;
    font-weight: 400;
}

.planbord__table tbody th strong {
    font-size: 0.95rem;
}

.planbord__table tbody td:last-child {
    border: 0;
    border-radius: 0 16px 16px 0;
}

.planbord__table tbody tr:last-child td,
.planbord__table tbody tr:last-child th {
    border-bottom: 0;
}

.planbord__add {
    width: 42px;
    min-height: 42px;
    margin: 0 auto;
    border: 1px solid var(--agenda-add-border);
    border-radius: 50%;
    background: var(--agenda-surface);
    color: var(--plum-700);
    box-shadow: var(--agenda-shadow-add);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
}

.planbord__add:hover,
.planbord__add:focus-visible {
    background: var(--plum-100);
    color: var(--plum-900);
}

.planbord__item {
    display: block;
    max-width: 270px;
    margin: 0 auto;
    padding: 0.6rem 0.8rem;
    border-radius: 15px;
    background: var(--agenda-card-gradient);
    color: var(--agenda-on-accent);
    font-size: 0.88rem;
    line-height: 1.3;
}

.planbord__item strong {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
}

.planbord__item--held {
    background: var(--agenda-held-gradient);
}

.planbord__item--cancelled {
    background: var(--agenda-cancelled);
    text-decoration: line-through;
}

.planbord__action-required {
    margin: 0 0 1rem;
}

.planbord-nieuw,
.planbord-detail {
    max-width: 760px;
    margin: clamp(1rem, 3vw, 2.5rem) auto;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 20px;
    background: var(--agenda-header-background);
    box-shadow: var(--shadow);
}

.agenda-login {
    max-width: 560px;
    margin: clamp(1.5rem, 8vh, 5rem) auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 20px;
}

.agenda-login h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.agenda-login__eyebrow {
    margin: 0 0 0.35rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.form-field__control {
    min-height: 46px;
    border-radius: 9px;
}

.planbord-detail dl {
    grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr);
}

.catering__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.planbord-nieuw__back {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.planbord-nieuw__summary {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: var(--plum-100);
}

.planbord-nieuw__summary h1 {
    margin: 0.25rem 0 0.5rem;
}

.planbord-nieuw__summary p {
    margin: 0;
    color: var(--muted);
}

.planbord-nieuw__summary strong {
    color: var(--plum-900);
}

.planbord-nieuw__step {
    color: var(--plum-700);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.planbord-nieuw__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 1.25rem;
}

.planbord-nieuw__form h2,
.planbord-nieuw__form .form-actions {
    grid-column: 1 / -1;
}

.planbord-nieuw__form h2 {
    margin-top: 0;
}

.planbord-nieuw__form .form-field__group {
    flex-wrap: wrap;
}

.planbord-nieuw__form .form-field__group .form-field__control {
    min-width: 105px;
}

.form-field__help {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.catering {
    max-width: 1120px;
    margin-top: clamp(1rem, 3vw, 2.5rem);
}

.catering > h1 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.catering > p {
    line-height: 1.7;
}

.catering__event {
    margin: 0 0 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 20px;
    background: var(--agenda-section-surface);
}

.catering__event h1 {
    margin: 0;
    color: var(--plum-900);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.catering__event p {
    margin: 0.35rem 0 0;
    line-height: 1.5;
}

.catering__event .catering__event-name {
    margin-top: 0;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
}

.catering__offer {
    padding: clamp(1rem, 2vw, 1.6rem);
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 20px;
    background: var(--agenda-section-surface);
}

.catering__offer h2 {
    margin: 0;
    color: var(--plum-900);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.catering__offer > p {
    margin: 0.25rem 0 1rem;
    color: var(--ink);
}

.catering__card {
    border: 1px solid var(--agenda-frosted-border);
}

.catering__card-qty input[type="number"] {
    text-align: center;
    font-weight: 600;
}

.planbord-detail__status {
    color: var(--agenda-on-accent);
}

.provider-dashboard {
    max-width: 1280px;
    min-width: 0;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3rem);
}

.provider-dashboard__heading {
    margin: 0 0 1.5rem;
}

.provider-dashboard__heading h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
}

.provider-dashboard__heading p {
    margin: 0;
    font-size: 1.1rem;
}

.provider-dashboard__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(250px, 0.95fr);
    align-items: start;
    gap: 2rem;
}

.provider-dashboard__main,
.provider-dashboard__aside {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.provider-dashboard__section,
.provider-dashboard__stats {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 16px;
    background: var(--agenda-section-surface);
}

.provider-dashboard__section h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.8rem;
    font-size: 1.15rem;
    font-weight: 500;
}

.provider-dashboard__section h2 > span {
    color: var(--plum-700);
    font-size: 1.6rem;
    line-height: 1;
}

.provider-dashboard__actions {
    display: grid;
    gap: 0.65rem;
}

.provider-dashboard__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 11px;
    background: var(--agenda-soft-overlay);
    color: var(--ink);
    text-decoration: none;
}

.provider-dashboard__action > span:first-child,
.provider-dashboard__action-person {
    display: block;
}

.provider-dashboard__action-person {
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.provider-dashboard__due {
    color: var(--agenda-action);
    font-size: 0.85rem;
    white-space: nowrap;
}

.provider-dashboard__table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border-radius: 12px;
    background: var(--agenda-soft-overlay);
}

.provider-dashboard__table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.provider-dashboard__table th,
.provider-dashboard__table td {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.provider-dashboard__table thead th {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.provider-dashboard__table tbody th {
    color: var(--plum-900);
    font-size: 0.9rem;
}

.provider-dashboard__details,
.provider-dashboard__overview {
    color: var(--plum-900);
    font-size: 1.2rem;
    text-decoration: none;
}

.provider-dashboard__overview {
    display: block;
    width: max-content;
    margin: 0.8rem 0 0 auto;
    padding: 0.55rem 0.8rem;
    border-radius: 9px;
    background: var(--plum-900);
    color: var(--agenda-on-accent);
    font-size: 0.9rem;
}

.provider-dashboard__empty {
    margin: 0;
    color: var(--muted);
}

.provider-dashboard__stats {
    display: grid;
    gap: 0.55rem;
}

.provider-dashboard__stats p {
    margin: 0;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--agenda-separator);
}

.provider-dashboard__stats p:last-child {
    border-bottom: 0;
}

.provider-dashboard__stat-icon {
    color: var(--plum-700);
    font-size: 2rem;
}

.provider-dashboard__book {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 12px;
    background: var(--agenda-surface);
    color: var(--ink);
    font-size: 1.05rem;
    text-decoration: none;
}

.provider-dashboard__book > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--plum-700);
    color: var(--agenda-on-accent);
    font-size: 1.5rem;
}

.family-dashboard {
    max-width: 1280px;
    min-width: 0;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3rem);
}

.family-dashboard__heading {
    margin: 0 0 1.5rem;
}

.family-dashboard__heading h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
}

.family-dashboard__heading p {
    margin: 0;
    font-size: 1.1rem;
}

.family-dashboard__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(270px, 0.95fr);
    align-items: start;
    gap: 2rem;
}

.family-dashboard__main,
.family-dashboard__aside {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.family-dashboard__section,
.family-dashboard__checklist {
    padding: 1.25rem;
    border: 1px solid var(--agenda-frosted-border);
    border-radius: 16px;
    background: var(--agenda-section-surface);
}

.family-dashboard__section h2,
.family-dashboard__checklist h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.8rem;
    font-size: 1.15rem;
    font-weight: 500;
}

.family-dashboard__section h2 > span {
    color: var(--plum-700);
    font-size: 1.5rem;
}

.family-dashboard__service-card {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--agenda-soft-overlay);
}

.family-dashboard__service-card strong {
    color: var(--plum-900);
    font-size: 1.1rem;
}

.family-dashboard__location {
    color: var(--muted);
    font-size: 0.88rem;
}

.family-dashboard__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.family-dashboard__actions a {
    display: flex;
    align-items: center;
    min-height: 76px;
    gap: 0.7rem;
    border-radius: 11px;
    background: var(--agenda-surface);
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
}

.family-dashboard__actions a > span {
    display: grid;
    place-items: center;
    align-self: stretch;
    flex: 0 0 58px;
    border-radius: 11px 0 0 11px;
    background: var(--plum-700);
    color: var(--agenda-on-accent);
    font-size: 1.65rem;
}

.family-dashboard__status-table {
    overflow: hidden;
    border-radius: 11px;
    background: var(--agenda-soft-overlay);
}

.family-dashboard__status-head,
.family-dashboard__status-table > a {
    display: grid;
    grid-template-columns: minmax(115px, 1fr) minmax(150px, 1fr) 28px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 0.9rem;
    border-bottom: 1px solid var(--line);
}

.family-dashboard__status-head {
    grid-template-columns: minmax(115px, 1fr) minmax(150px, 1fr) 28px;
    color: var(--plum-700);
    font-size: 0.82rem;
}

.family-dashboard__status-head span:last-child {
    visibility: hidden;
}

.family-dashboard__status-table > a {
    color: var(--ink);
    font-size: 0.9rem;
    text-decoration: none;
}

.family-dashboard__status-table > a:last-child {
    border-bottom: 0;
}

.family-dashboard__status-table > a > span:last-child {
    text-align: right;
    font-size: 1.3rem;
}

.is-done {
    color: var(--ok);
}

.is-pending {
    color: var(--agenda-action);
}

.family-dashboard__notifications {
    list-style: none;
    margin: 0;
    padding: 0;
}

.family-dashboard__notifications li,
.family-dashboard__notifications li > a,
.family-dashboard__notifications li > span {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 42px;
    justify-content: space-between;
}

.family-dashboard__notifications li {
    border-bottom: 1px solid var(--agenda-separator);
}

.family-dashboard__notifications li:last-child {
    border-bottom: 0;
}

.family-dashboard__notifications li > a {
    width: 100%;
    color: var(--ink);
    text-decoration: none;
}

.family-dashboard__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--agenda-action);
}

.family-dashboard__dot--done {
    background: var(--ok);
}

.family-dashboard__checklist > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    margin: 0 0 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: var(--agenda-surface);
    font-size: 0.9rem;
}

.family-dashboard__checklist > p span {
    font-size: 1.2rem;
}

.family-dashboard__readiness {
    display: grid;
    gap: 0.1rem;
    margin-top: 1.2rem;
}

.family-dashboard__readiness span {
    color: var(--ink);
    font-size: 0.85rem;
}

.agenda-header__switch ul {
    flex-wrap: wrap;
}

.catering__sticky-bar {
    z-index: 2;
    box-shadow: var(--agenda-shadow-sticky);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--agenda-focus);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .agenda-header {
        min-height: 68px;
        padding: 0.45rem 0.8rem;
    }

    .agenda-header__mark {
        width: 42px;
        height: 42px;
    }

    .agenda-header__wordmark {
        font-size: 1rem;
    }

    .agenda-header__account-name {
        display: none;
    }

    .agenda-menu summary {
        width: 42px;
        height: 42px;
    }

    .planbord {
        padding: 0.7rem;
    }

    .planbord__board {
        padding: 0.9rem;
        border-radius: 18px;
    }

    .planbord__toolbar {
        align-items: center;
        margin-bottom: 0.7rem;
    }

    .planbord__week {
        gap: 0.5rem;
        font-size: 0.88rem;
    }

    .planbord__week-arrow {
        width: 30px;
        height: 30px;
    }

    .planbord__table,
    .planbord__table tbody {
        display: block;
        width: 100%;
    }

    .planbord table.planbord__table {
        border-spacing: 0;
    }

    .planbord__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        clip-path: inset(50%);
    }

    .planbord__table tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
        margin-bottom: 0.8rem;
        padding: 0.75rem;
        border-radius: 15px;
        background: var(--agenda-header-background);
        box-shadow: var(--agenda-shadow-soft);
    }

    .planbord__table tbody th,
    .planbord__table tbody td,
    .planbord__table tbody td:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: auto;
        min-height: 54px;
        padding: 0.4rem 0.5rem;
        border: 0;
        border-radius: 10px;
        background: transparent;
    }

    .planbord__table tbody th {
        display: block;
        min-height: 0;
        padding: 0 0.35rem 0.35rem;
        border-radius: 0;
        background: transparent;
        color: var(--plum-900);
    }

    .planbord__table tbody th span,
    .planbord__table tbody th strong {
        display: inline;
        font-size: 0.98rem;
    }

    .planbord__table tbody th strong::before {
        content: " · ";
        color: var(--muted);
        font-weight: 400;
    }

    .planbord__table tbody td {
        border-top: 1px solid var(--line);
    }

    .planbord__table tbody td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: lowercase;
    }

    .planbord__add {
        flex: 0 0 38px;
        width: 38px;
        min-height: 38px;
        margin: 0 0 0 auto;
    }

    .planbord__item {
        width: min(70%, 290px);
        margin: 0 0 0 auto;
        padding: 0.55rem 0.7rem;
    }

    .planbord-nieuw,
    .planbord-detail,
    .agenda-login {
        margin: 0.8rem;
        padding: 1.2rem;
        border-radius: 16px;
    }

    .planbord-nieuw__form {
        grid-template-columns: 1fr;
    }

    .planbord-nieuw__form h2,
    .planbord-nieuw__form .form-actions {
        grid-column: auto;
    }

    .form-field__group {
        flex-direction: column;
    }

    .form-field__group .form-field__control {
        width: 100%;
    }

    .planbord-detail dl {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .provider-dashboard {
        padding: 1rem;
    }

    .provider-dashboard__layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .provider-dashboard__aside {
        order: -1;
    }

    .provider-dashboard__action {
        align-items: flex-start;
        flex-direction: column;
    }

    .family-dashboard {
        padding: 1rem;
    }

    .family-dashboard__layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .family-dashboard__aside {
        order: -1;
    }

    .family-dashboard__actions {
        grid-template-columns: 1fr;
    }

    .family-dashboard__status-head,
    .family-dashboard__status-table > a {
        grid-template-columns: minmax(85px, 0.7fr) minmax(120px, 1fr) 22px;
        gap: 0.35rem;
        padding: 0.65rem 0.55rem;
        font-size: 0.78rem;
    }


    .planbord-detail dd {
        margin-bottom: 0.7rem;
        font-weight: 600;
    }

    .catering__sticky-bar {
        position: sticky;
        bottom: 0.5rem;
        gap: 0.6rem;
        padding: 0.8rem;
    }

    .catering__sticky-bar-label {
        font-size: 0.75rem;
    }

    .catering__sticky-bar-amount {
        font-size: 0.95rem;
    }

    .catering__sticky-bar button {
        padding: 0.6rem 0.8rem;
        font-size: 0.88rem;
    }

    .verzorgers__table {
        display: block;
        overflow-x: auto;
    }
}

.agenda-visually-hidden {
    position: absolute;
    top: auto;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================================================
   Verzorger-dashboard — pixel-afgestemd op Age's prototype (gemeten computed
   styles). Age's ONTWERP, niet diens klassenamen: identifiers blijven Engels.
   Gescoped onder .ur-page; tokens additief, botsen niet met --plum-*.
   =========================================================================== */
.ur-page {
    --brand: #381d4a;
    --accent: #6f58a2;
    --surface: #ece6f3;
    --hairline: #ddd5e6;
    --muted: #6a5d78;
    --alert: #c8006a;
    --card-bg: rgba(250, 247, 252, .78);
    --bg-1: #efe7f4;
    --bg-2: #dccde4;
    --bg-3: #b8a0cd;
    --r-sm: 8px;
    --r-lg: 10px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px;
    --shadow-card: 0 1px 2px rgba(56, 29, 74, .05), 0 10px 30px rgba(56, 29, 74, .08);

    font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--brand);
    background-color: var(--bg-2);
    background-image:
        radial-gradient(ellipse 60% 50% at 12% 8%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 50% 45% at 85% 90%, rgba(111, 88, 162, .22), rgba(111, 88, 162, 0) 70%),
        linear-gradient(115deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Verzorger-thema: gespiegelde gradient (paars→wit), tegenover de nabestaanden-base (wit→paars). */
.ur-page--provider {
    background-color: #b9a0cf;
    background-image:
        radial-gradient(ellipse 60% 50% at 88% 8%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 50% 45% at 15% 90%, rgba(56, 29, 74, .22), rgba(56, 29, 74, 0) 70%),
        linear-gradient(245deg, #d6c6e1 0%, #b9a0cf 50%, #a68dc3 100%);
}

.ur-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ur-page .icon {
    width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* Header */
.ur-top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--hairline); }
.ur-top__in {
    max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-3); height: 72px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.ur-logo { display: block; height: 44px; }
.ur-logo img { display: block; height: 44px; width: auto; }
.ur-user { position: relative; }
.ur-user__trigger { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ur-user__trigger::-webkit-details-marker { display: none; }
.ur-user__id { display: flex; flex-direction: column; text-align: right; line-height: 1.3; font-size: 14px; font-weight: 600; color: var(--brand); }
.ur-user__org { font-weight: 400; font-size: 13px; color: var(--muted); }
.ur-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.ur-menu {
    position: absolute; right: 0; top: 56px; width: 260px; background: #fff; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(56, 29, 74, .18); padding: var(--sp-2); z-index: 20;
}
.ur-menu a { display: flex; gap: var(--sp-3); align-items: center; padding: 12px var(--sp-3); border-radius: var(--r-sm); color: var(--brand); text-decoration: none; }
.ur-menu a:hover { background: var(--surface); }
.ur-menu .icon { color: var(--accent); }
.ur-menu hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-2) 0; }

/* Page */
.ur-main { max-width: 1120px; margin: 0 auto; padding: var(--sp-4) var(--sp-3) 48px; }
.ur-page .is-small { font-size: 14px; line-height: 20px; }
.ur-page .is-muted { color: var(--muted); }
.ur-page ul.is-plain { list-style: none; padding: 0; margin: 0; }

.ur-head { margin-bottom: var(--sp-4); }
.ur-head h1 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 500; color: var(--brand); }
.ur-head p { margin: 4px 0 0; font-size: 16px; font-weight: 400; color: var(--brand); }

.ur-grid { display: grid; gap: var(--sp-4); align-items: stretch; }
.ur-grid--primary { grid-template-columns: 2fr 1fr; }
.ur-grid--secondary { grid-template-columns: 1fr 2fr; margin-top: var(--sp-4); }

.ur-card { background: var(--card-bg); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--sp-4); min-width: 0; }
.ur-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ur-card__title { display: flex; align-items: center; gap: 12px; }
.ur-card__title .icon { color: var(--accent); }
.ur-card__head h2 { margin: 0; font-weight: 500; font-size: 19px; }
.ur-card__foot { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }

.ur-link { font: inherit; font-weight: 600; color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.ur-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ur-link .icon { color: var(--accent); }
.ur-link--plain { color: var(--accent); text-decoration: none; }
.ur-link--plain:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Profile card */
.ur-profile { padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.ur-profile__top { position: relative; display: grid; grid-template-columns: 210px 1fr; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); min-height: 240px; }
.ur-profile__bubble { position: absolute; left: -70px; top: -90px; width: 290px; height: 290px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 30px rgba(56, 29, 74, .10); }
.ur-profile__figure { position: relative; margin: 6px 0 0 10px; color: var(--accent); }
.ur-illustration { display: block; width: 104px; height: 104px; color: var(--accent); }
.ur-profile__info { display: flex; flex-direction: column; gap: 10px; padding-top: 28px; position: relative; }
.ur-profile__info h2 { margin: 0; font-weight: 500; font-size: 21px; }
.ur-profile__info li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.ur-profile__info li .icon { width: 18px; height: 18px; color: var(--accent); }
.ur-profile__actions { background: rgba(255, 255, 255, .28); border-top: 1px solid rgba(255, 255, 255, .6); padding: var(--sp-5) var(--sp-4) var(--sp-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

/* Shortcut tiles */
.ur-tile { display: flex; align-items: stretch; background: #fff; border-radius: 8px; text-decoration: none; color: var(--brand); min-height: 52px; overflow: hidden; box-shadow: 0 1px 2px rgba(56, 29, 74, .06), inset 0 0 0 1px var(--hairline); font-size: 14.5px; font-weight: 600; }
.ur-tile__icon { width: 52px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent)); }
.ur-tile__icon .icon { width: 24px; height: 24px; color: #fff; stroke-width: 1.6; }
.ur-tile__label { display: flex; align-items: center; padding: 8px 12px; line-height: 1.3; }
.ur-tile:hover { box-shadow: 0 0 0 2px var(--accent); }
.ur-tile--alert { position: relative; overflow: visible; }
.ur-tile--alert .ur-tile__icon { border-radius: 8px 0 0 8px; }
.ur-tile--alert::after { content: ""; position: absolute; right: -5px; top: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--alert); border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(56, 29, 74, .2); }

/* Lists inside cards */
.ur-list { list-style: none; margin: 0; padding: 0; }
.ur-list li { border-top: 1px solid var(--hairline); }
.ur-list li:first-child { border-top: 0; }
.ur-list a { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center; padding: 12px; margin: 0 -12px; border-radius: 10px; color: var(--brand); text-decoration: none; transition: background-color .2s ease; }
.ur-list a:hover { background: rgba(255, 255, 255, .55); }
.ur-list a:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ur-list a .icon { color: var(--accent); }

.ur-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ur-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ur-status--alert { color: var(--alert); }

@media (max-width: 900px) {
    .ur-grid--primary,
    .ur-grid--secondary { grid-template-columns: 1fr; }
    .ur-profile__top { grid-template-columns: 120px 1fr; padding: var(--sp-4) var(--sp-4) var(--sp-3); min-height: 0; }
    .ur-illustration { width: 92px; height: 92px; }
    .ur-profile__actions { grid-template-columns: 1fr; }
    .ur-head h1 { font-size: 28px; }
    .ur-user__id { display: none; }
}

/* ===========================================================================
   Planbord — weekoverzicht als tijd-as (08:00–24:00). Blokken op hun echte tijd
   via left/width. Stijl afgestemd op Age's agenda; gescoped onder .ur-page.
   =========================================================================== */
.ur-back {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
    color: var(--brand); text-decoration: none; margin-bottom: var(--sp-3); background: #fff;
    border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; padding: 8px 16px 8px 12px;
    box-shadow: 0 1px 2px rgba(56, 29, 74, .06), 0 4px 12px rgba(56, 29, 74, .08);
}
.ur-back .icon { color: var(--accent); transform: rotate(180deg); transition: transform .25s ease; }
.ur-back:hover { color: var(--accent); }
.ur-back:hover .icon { transform: rotate(180deg) translateX(-3px); }

.ur-pagehead--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.ur-pagehead--row h1 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 500; color: var(--brand); }
.ur-pagehead--row p { margin: 4px 0 0; }

.ur-week { display: flex; align-items: center; gap: 12px; }
.ur-week strong { min-width: 150px; text-align: center; font-weight: 700; }
.ur-round {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; background: #fff;
    color: var(--brand); display: grid; place-items: center; text-decoration: none; transition: background-color .2s ease, transform .2s ease;
}
.ur-round:hover { background: var(--surface); transform: scale(1.06); }
.ur-round .icon { color: var(--brand); }
.ur-round--prev .icon { transform: rotate(180deg); }

.ur-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); font-size: 14px; color: var(--muted); }
.ur-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ur-legend__swatch { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }
.ur-legend__swatch--own { background: linear-gradient(135deg, var(--brand), var(--accent)); }
.ur-legend__swatch--request { background: #fff7ea; border: 1.5px dashed #b86e0a; }
.ur-legend__swatch--busy { background: repeating-linear-gradient(135deg, #ece4f3 0 3px, #f6f2fa 3px 6px); border: 1px solid #e2d8ec; }
.ur-legend__swatch--free { background: #fff; border: 1.5px dashed rgba(111, 88, 162, .45); }

/* Rooster */
.ur-plan { background: var(--card-bg); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.ur-plan__head,
.ur-plan__row { display: grid; grid-template-columns: 170px 1fr; }
.ur-plan__dayhead { font-size: 13px; font-weight: 700; color: var(--brand); padding: 16px 14px 12px 22px; border-bottom: 1px solid rgba(56, 29, 74, .08); }
.ur-plan__axis { position: relative; border-bottom: 1px solid rgba(56, 29, 74, .08); }
.ur-plan__mark { position: absolute; bottom: 10px; transform: translateX(-2px); font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.ur-plan__mark span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }

.ur-plan__day { background: rgba(255, 255, 255, .45); color: var(--brand); padding: 10px 14px 10px 22px; border-bottom: 1px solid rgba(56, 29, 74, .07); display: flex; flex-direction: column; justify-content: center; }
.ur-plan__day small { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ur-plan__day strong { font-size: 16px; font-weight: 600; }
.ur-plan__day.is-today { box-shadow: inset 4px 0 0 var(--accent); }
.ur-plan__day em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.ur-plan__track { position: relative; min-height: 76px; border-left: 1px solid rgba(56, 29, 74, .07); border-bottom: 1px solid rgba(56, 29, 74, .07); }
.ur-plan__row.is-last .ur-plan__day,
.ur-plan__row.is-last .ur-plan__track { border-bottom: 0; }

/* Blokken op de tijd-as */
.ur-block, .ur-free { position: absolute; top: 8px; bottom: 8px; border-radius: 12px; box-sizing: border-box; overflow: hidden; }
.ur-block { padding: 9px 14px; font-size: 13px; line-height: 18px; text-decoration: none; }
.ur-block strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-block--own { background: linear-gradient(135deg, var(--brand), var(--accent)); color: rgba(255, 255, 255, .85); box-shadow: 0 6px 16px rgba(56, 29, 74, .18); }
.ur-block--own strong { color: #fff; }
.ur-block--own:hover { filter: brightness(1.08); }
.ur-block--request { background: #fff7ea; border: 1px dashed #b86e0a; color: #8f560a; }
.ur-block--request strong { color: var(--brand); }
.ur-block--busy { background: repeating-linear-gradient(135deg, rgba(236, 228, 243, .75) 0 6px, rgba(246, 242, 250, .75) 6px 12px); color: var(--muted); }
.ur-block--busy strong { color: var(--brand); }

.ur-free {
    display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--accent);
    font-size: 14px; font-weight: 600; text-decoration: none; border: 1px dashed transparent; background: transparent;
}
.ur-free .icon { opacity: .4; width: 18px; height: 18px; color: var(--accent); }
.ur-free span { opacity: 0; }
.ur-free:hover, .ur-free:focus-visible { border-color: var(--accent); background: rgba(250, 247, 252, .6); }
.ur-free:hover .icon, .ur-free:hover span, .ur-free:focus-visible .icon, .ur-free:focus-visible span { opacity: 1; }

.ur-login-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand); text-decoration: none; }
.ur-login-link .icon { color: var(--accent); }
.ur-login-link:hover { color: var(--accent); }

@media (max-width: 760px) {
    .ur-plan__head, .ur-plan__row { grid-template-columns: 110px 1fr; }
    .ur-plan__mark { font-size: 11px; }
}

/* ── Inplannen- en detailscherm (ur-* design) ───────────────────────────────────────────── */

/* Formulierschermen (inplannen) blijven leesbaar smal, niet de volle planbordbreedte. */
.ur-form-page, .ur-detail { max-width: 760px; }

.ur-form { display: block; }
.ur-form .form-field { margin-bottom: var(--sp-3); }
.ur-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ur-form .form-field__help { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ur-form .form-actions { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }

/* Kaarten onder elkaar, met lucht ertussen. */
.ur-detail > .ur-card { margin-bottom: var(--sp-4); }
.ur-detail__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* Statusbadge in Age-kleuren, per werkflow-status. */
.ur-status--confirmed { color: var(--ok); }
.ur-status--held      { color: var(--warn); }
.ur-status--requested { color: var(--accent); }
.ur-status--rejected,
.ur-status--cancelled { color: var(--danger); }

.ur-note { margin: 0 0 var(--sp-4); }
.ur-proposal {
    margin: 0 0 var(--sp-4);
    padding: 12px var(--sp-3);
    background: #fff7ea;
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
    font-size: 15px;
}

/* Feiten als label/waarde-paren, netjes uitgelijnd. */
.ur-facts { margin: 0; display: grid; gap: 0; }
.ur-facts > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.ur-facts > div:last-child { border-bottom: 0; }
.ur-facts dt { margin: 0; color: var(--muted); }
.ur-facts dd { margin: 0; font-weight: 600; }

/* Goedkeuren/afwijzen door het centrum. */
.ur-approval {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4);
    margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.ur-approval__reject { flex: 1 1 18rem; }
.ur-approval__reject textarea { width: 100%; margin: 6px 0 10px; resize: vertical; }
.ur-cancel { margin-top: var(--sp-3); }

/* Secundaire knoppen: omlijnd i.p.v. gevuld; de gevaarlijke variant in rood. */
.ur-btn-ghost {
    background: transparent; color: var(--brand); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer;
}
.ur-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.ur-btn-danger { color: var(--danger); border-color: var(--danger); }
.ur-btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.ur-link-box { padding: 12px var(--sp-3); background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-sm); word-break: break-all; }
.ur-bullets { margin: 0; display: grid; gap: 6px; }

/* Tabellen (catering/media) in de kaartstijl. */
.ur-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ur-table th, .ur-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ur-table th { color: var(--muted); font-weight: 600; }
.ur-table tr:last-child td { border-bottom: 0; }

@media (max-width: 560px) {
    .ur-form__row { grid-template-columns: 1fr; }
    .ur-facts > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
}

/* ── Cateringwensen: menukaart (nabestaande) ────────────────────────────────────────────── */

.ur-menu-form .ur-guests { max-width: 160px; }

.ur-menu-sec { margin: var(--sp-4) 0 var(--sp-3); }
.ur-menu-sec > h2 {
    margin: 0 0 var(--sp-2);
    font-size: 17px; font-weight: 700; color: var(--brand);
    padding-bottom: 6px; border-bottom: 2px solid var(--line);
}

.ur-dishes { display: grid; }
.ur-dish {
    display: grid;
    grid-template-columns: 1fr auto 120px;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.ur-dish:last-child { border-bottom: 0; }
.ur-dish__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ur-dish__price { white-space: nowrap; }
.ur-dish__qty { display: flex; flex-direction: column; gap: 2px; }
.ur-dish__qty input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font: inherit;
    text-align: center;
}
.ur-dish__qty input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111, 88, 162, .15); }

.ur-menu-form textarea { width: 100%; resize: vertical; }
.ur-menu-form .form-field { margin-bottom: var(--sp-3); }
.ur-menu-form .form-actions { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }

@media (max-width: 560px) {
    .ur-dish { grid-template-columns: 1fr auto; grid-template-areas: "info price" "qty qty"; row-gap: 8px; }
    .ur-dish__info { grid-area: info; }
    .ur-dish__price { grid-area: price; }
    .ur-dish__qty { grid-area: qty; flex-direction: row; align-items: center; gap: 8px; }
    .ur-dish__qty input { width: 90px; }
}

/* ── Nabestaande-overzicht + muziekwensen (ur-* design) ─────────────────────────────────── */

.ur-fam-nav { display: flex; align-items: center; gap: var(--sp-4); }

.ur-fam-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); }
.ur-fam-tile {
    display: flex; align-items: center; gap: var(--sp-3);
    text-decoration: none; color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ur-fam-tile:hover { box-shadow: 0 6px 20px rgba(56, 29, 74, .14); transform: translateY(-2px); }
.ur-fam-tile__icon {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
}
.ur-fam-tile__icon .icon { width: 24px; height: 24px; }
.ur-fam-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ur-fam-tile__body strong { color: var(--brand); }
.ur-fam-tile .icon { color: var(--accent); }

.ur-music-rows { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ur-music-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ur-music-form .form-actions { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); }

@media (max-width: 640px) {
    .ur-fam-tiles { grid-template-columns: 1fr; }
    .ur-fam-tile { flex-wrap: wrap; }
    .ur-music-row { grid-template-columns: 1fr; }
}

/* ── Media (foto's/video's) ─────────────────────────────────────────────────────────────── */

.ur-proposal--error { background: #fdecec; border-left-color: var(--danger); }

.ur-upload { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.ur-upload input[type="file"] { flex: 1 1 260px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: #fff; font: inherit; }

.ur-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.ur-media { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ur-media__thumb {
    display: block; aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden;
    background: #efe9f4; border: 1px solid var(--line);
}
.ur-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ur-media__video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; color: var(--accent); font-weight: 600; font-size: 14px; }
.ur-media__video .icon { width: 28px; height: 28px; }
.ur-media figcaption { display: flex; flex-direction: column; gap: 1px; }
.ur-media__name { word-break: break-word; }
.ur-media__del button { padding: 6px 12px; font-size: 13px; }

/* Inlogpagina-achtergrond per rol: de verzorger-gradient (zie .ur-page--provider) ligt als vaste
   laag over de nabestaanden-gradient en fadet in of uit bij het wisselen van tabblad. */
.ur-auth-page::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: #b9a0cf;
    background-image:
        radial-gradient(ellipse 60% 50% at 88% 8%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 50% 45% at 15% 90%, rgba(56, 29, 74, .22), rgba(56, 29, 74, 0) 70%),
        linear-gradient(245deg, #d6c6e1 0%, #b9a0cf 50%, #a68dc3 100%);
    opacity: 0;
    transition: opacity .7s ease;
}
.ur-auth-page[data-role="undertaker"]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .ur-auth-page::before { transition: none; }
}

/* ── Inlogpagina (Age-prototype): kaart met "Ik ben: Nabestaanden / Uitvaartverzorger" ──────
   De keuze werkt zonder JS: twee verborgen radioknoppen vóór de keuzebalk en de panelen,
   zichtbaarheid via :checked ~. */
.ur-auth { display: flex; justify-content: center; padding-top: 72px; }
.ur-auth__card { width: 100%; max-width: 440px; padding: var(--sp-5); text-align: center; }
.ur-auth__card h1 { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 400; color: var(--brand); }
.ur-auth__lead { margin: 4px 0 var(--sp-4); color: var(--muted); }
.ur-auth__ask { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.ur-auth__choice { position: absolute; opacity: 0; pointer-events: none; }

.ur-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: var(--sp-4); background: var(--surface); border-radius: var(--r-sm); }
.ur-seg__opt { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; border-radius: 6px; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ur-seg__opt .icon { width: 26px; height: 26px; color: var(--muted); }
.ur-seg__opt:hover { color: var(--brand); }
#role-family:checked ~ .ur-seg .ur-seg__opt--family,
#role-undertaker:checked ~ .ur-seg .ur-seg__opt--undertaker { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(56, 29, 74, .12); }
#role-family:checked ~ .ur-seg .ur-seg__opt--family .icon,
#role-undertaker:checked ~ .ur-seg .ur-seg__opt--undertaker .icon { color: var(--accent); }
#role-family:focus-visible ~ .ur-seg .ur-seg__opt--family,
#role-undertaker:focus-visible ~ .ur-seg .ur-seg__opt--undertaker { outline: 2px solid var(--accent); outline-offset: 2px; }

.ur-auth__panel { display: none; }
#role-family:checked ~ .ur-auth__panel--family,
#role-undertaker:checked ~ .ur-auth__panel--undertaker { display: block; }

.ur-auth__text { margin: 0 0 var(--sp-3); }
.ur-auth__notice { margin: 0 0 var(--sp-3); padding: 12px var(--sp-3); background: #fff; border-left: 3px solid var(--accent); border-radius: var(--r-sm); text-align: left; font-size: 15px; }
.ur-auth .form-field { text-align: center; }
.ur-auth .form-field__label { font-size: 14px; color: var(--brand); margin-bottom: 6px; }
.ur-auth .form-field__control { padding: 12px var(--sp-3); border-color: #b9aac8; font-size: 15px; font-weight: 600; color: var(--brand); }
.ur-auth .form-field__control:focus { outline: 2px solid var(--accent); }
.ur-auth .form-field__error { text-align: left; }
.ur-page .ur-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px var(--sp-3); border: 0; border-radius: var(--r-sm); background: var(--brand); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.ur-page .ur-btn .icon { width: 18px; height: 18px; color: #fff; }
.ur-page .ur-btn:hover { background: var(--accent); }
.ur-auth__foot { margin: var(--sp-4) 0 0; color: var(--muted); font-size: 15px; }
.ur-auth__foot a { color: var(--accent); text-underline-offset: 3px; }

@media (max-width: 520px) {
    .ur-auth { padding-top: var(--sp-4); }
    .ur-auth__card { padding: var(--sp-4) var(--sp-3); }
    .ur-seg__opt { flex-direction: column; gap: 4px; font-size: 14px; }
}

/* ── Uitvaartverzorgers beheren (kantoor) + aanvraagformulier ─────────────────────────────── */
.ur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ur-undertakers td { vertical-align: top; }
.ur-undertakers__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.ur-page .ur-btn--small { width: auto; padding: 8px 14px; font-size: 15px; }
.ur-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--brand); }
.ur-badge--requested { background: #fff4e0; color: #8a5a00; }
.ur-badge--approved { background: #e6f4ec; color: var(--ok); }
.ur-badge--revoked { background: #f7e6e6; color: var(--danger); }
.ur-confirm { position: relative; }
.ur-confirm > summary { list-style: none; display: inline-block; }
.ur-confirm > summary::-webkit-details-marker { display: none; }
.ur-confirm__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 240px; padding: var(--sp-3); background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-card); text-align: left; }
.ur-confirm__panel p { margin: 0 0 12px; font-size: 15px; }
.ur-auth .ur-auth__consent { text-align: left; }
.ur-auth .ur-auth__consent .form-field__label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; }
.ur-auth .ur-auth__consent input { margin: 3px 0 0; flex: none; }
.ur-main > .ur-auth__notice { margin-bottom: var(--sp-4); }

@media (max-width: 720px) {
    .ur-undertakers thead { display: none; }
    .ur-undertakers tr { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .ur-undertakers td { padding: 0; border: 0; }
    .ur-undertakers__actions { justify-content: flex-start; }
}

/* ── Mijn instellingen (verzorger) ───────────────────────────────────────────────────────── */
.ur-settings { max-width: 808px; }
.ur-settings > .ur-card { margin-bottom: var(--sp-5); }
.ur-settings > .ur-auth__notice { margin-bottom: var(--sp-4); }
.ur-settings__intro { margin: 0 0 var(--sp-2); font-size: 15px; color: var(--muted); }
.ur-settings__actions { display: flex; gap: var(--sp-3); align-items: center; }
.ur-staff li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 12px 0; }
.ur-staff li:first-child { border-top: 0; }
.ur-staff strong { display: block; font-weight: 600; }
.ur-invite { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: var(--sp-3); }
.ur-invite .form-field__control { padding: 12px var(--sp-3); }
@media (max-width: 640px) {
    .ur-invite { grid-template-columns: 1fr; }
    .ur-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Fases en acties (Alle acties, uitvaartpagina, dashboard) ────────────────────────────── */
.ur-actions { list-style: none; margin: 0; padding: 0; }
.ur-action { padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); }
.ur-action:first-child { border-top: 0; padding-top: 0; }
.ur-action__head { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center; color: var(--brand); text-decoration: none; }
.ur-action__head strong { display: block; font-weight: 600; }
.ur-action__head:hover strong { color: var(--accent); }
.ur-action__head > .icon { color: var(--accent); }
.ur-action__note { margin: 6px 0 0; }
.ur-badge--pending { background: var(--surface); color: var(--accent); }
.ur-tasks { list-style: none; margin: 12px 0 0; padding: 0; }
.ur-tasks li { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--sp-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.ur-tasks li:first-child { border-top: 0; }
.ur-task { font-size: 13px; font-weight: 600; }
.ur-task--open { color: var(--alert); }
.ur-task--done { color: var(--ok); }
.ur-tasks__rule { margin: 12px 0 0; }
@media (max-width: 640px) {
    .ur-tasks li { grid-template-columns: 1fr auto; }
    .ur-tasks li > .is-muted { grid-column: 1 / -1; grid-row: 2; }
    .ur-action__head { grid-template-columns: 1fr auto; }
    .ur-action__head > .icon { display: none; }
}