/* Ledenadmin, nieuwe interface. Bron van het ontwerp: docs/ui-concept (PR #664). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-wght.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin-700.woff2') format('woff2'); }

/*
 * Ledenadmin UI-concept — designsysteem
 * ------------------------------------------------------------
 * Eén bron van waarheid voor kleur, typografie, spacing en componenten.
 * Merkkleuren en lettertypes komen uit de ledenadmin-website (app.css) en de
 * signup-pagina, zodat portaal en website één geheel vormen.
 *
 * Structuur:
 *   1. Tokens (licht + donker)
 *   2. Basis
 *   3. Layout (sidebar, topbar, content)
 *   4. Componenten
 *   5. Pagina-specifieke patronen (tijdlijn, wizard, lidkaart, ...)
 *   6. Responsief
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
    /* Merk */
    --la-green: #00c853;
    --la-green-hover: #00b54b;
    --la-green-dark: #00a844;
    --la-green-text: #0e7c3d;          /* groen dat leesbaar blijft op wit */
    --la-green-soft: #e6f8ed;
    --la-green-border: #b3e9c8;
    --la-navy: #14133b;
    --la-navy-deep: #060816;
    --la-navy-surface: #0d0b2e;
    --la-navy-light: #1a1850;

    /* Neutraal */
    --la-bg: #f6f7fb;
    --la-surface: #ffffff;
    --la-surface-2: #f1f3f8;
    --la-surface-3: #e9ecf3;
    --la-border: #e4e7ee;
    --la-border-strong: #cdd3de;
    --la-text: #14133b;
    --la-text-2: #465064;
    --la-text-3: #6a7c92;
    --la-text-4: #98a2b3;

    /* Status */
    --la-amber: #b45309;
    --la-amber-dot: #f59e0b;
    --la-amber-soft: #fff5e6;
    --la-amber-border: #fbd38d;
    --la-red: #b91c1c;
    --la-red-dot: #ef4444;
    --la-red-soft: #fdecec;
    --la-red-border: #f5b5b5;
    --la-blue: #1d4ed8;
    --la-blue-dot: #3b82f6;
    --la-blue-soft: #e9efff;
    --la-blue-border: #bcd0fb;

    /* Typografie */
    --la-font-heading: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --la-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Radius: kleiner = dichter bij de actie, groter = container */
    --la-r-s: 6px;
    --la-r-m: 10px;
    --la-r-l: 14px;
    --la-r-xl: 20px;

    /* Schaduw alleen voor zwevende lagen */
    --la-shadow-float: 0 16px 40px -12px rgba(20, 19, 59, .28), 0 2px 6px rgba(20, 19, 59, .08);
    --la-shadow-menu: 0 10px 28px -8px rgba(20, 19, 59, .22), 0 1px 3px rgba(20, 19, 59, .08);

    --la-sidebar-w: 248px;
    --la-topbar-h: 56px;
    --la-focus: 0 0 0 3px rgba(0, 200, 83, .22);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --la-bg: #0b0d1c;
    --la-surface: #141730;
    --la-surface-2: #1b1f3a;
    --la-surface-3: #232846;
    --la-border: #272c4a;
    --la-border-strong: #363c5e;
    --la-text: #eef0f8;
    --la-text-2: #c3c8dc;
    --la-text-3: #8f97b3;
    --la-text-4: #656d8c;

    --la-green-text: #3ddc84;
    --la-green-soft: rgba(0, 200, 83, .14);
    --la-green-border: rgba(0, 200, 83, .35);
    --la-amber: #fbbf24;
    --la-amber-soft: rgba(245, 158, 11, .14);
    --la-amber-border: rgba(245, 158, 11, .35);
    --la-red: #f87171;
    --la-red-soft: rgba(239, 68, 68, .14);
    --la-red-border: rgba(239, 68, 68, .35);
    --la-blue: #7fa6ff;
    --la-blue-soft: rgba(59, 130, 246, .16);
    --la-blue-border: rgba(59, 130, 246, .4);

    --la-shadow-float: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    --la-shadow-menu: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
}

/* ============================================================
   2. Basis
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font: 400 14px/1.5 var(--la-font-body);
    color: var(--la-text);
    background: var(--la-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--la-font-heading);
    color: var(--la-text);
    margin: 0;
    letter-spacing: -.01em;
}
h1 { font-size: 24px; font-weight: 600; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.3; }
h3 { font-size: 15px; font-weight: 600; line-height: 1.35; }
p { margin: 0; }
a { color: var(--la-green-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
::selection { background: rgba(0, 200, 83, .25); }

:focus-visible { outline: 2px solid var(--la-green); outline-offset: 2px; }

.la-num { font-variant-numeric: tabular-nums; }
.la-muted { color: var(--la-text-3); }
.la-small { font-size: 12.5px; }
.la-strong { font-weight: 600; }
.la-heading-font { font-family: var(--la-font-heading); }
.la-visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
/* De honeypot van de openbare formulieren: uit het zicht gehaald in plaats van verborgen, want een bot die enkel
   display:none overslaat, moet dit veld wel zien staan. */
.la-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.la-flex { display: flex; align-items: center; gap: 8px; }
.la-flex--between { justify-content: space-between; }
.la-flex--wrap { flex-wrap: wrap; }
.la-stack { display: flex; flex-direction: column; gap: 8px; }
.la-mt-1 { margin-top: 8px; } .la-mt-2 { margin-top: 16px; } .la-mt-3 { margin-top: 24px; }
.la-mb-1 { margin-bottom: 8px; } .la-mb-2 { margin-bottom: 16px; } .la-mb-3 { margin-bottom: 24px; }
.la-grow { flex: 1; min-width: 0; }
.la-right { text-align: right; }
.la-nowrap { white-space: nowrap; }

/* Iconen (inline sprite via app.js) */
.la-i {
    width: 18px; height: 18px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
}
.la-i--s { width: 15px; height: 15px; }
.la-i--l { width: 22px; height: 22px; }
.la-i--xl { width: 28px; height: 28px; stroke-width: 1.5; }

/* ============================================================
   3. Layout
   ============================================================ */
.la-app {
    display: grid;
    grid-template-columns: var(--la-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.la-sidebar {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: var(--la-navy-deep);
    color: #c9cce3;
    z-index: 40;
}
.la-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 12px;
}
.la-brand img { height: 40px; width: 40px; }
.la-brand__name { font: 600 17px/1.1 var(--la-font-heading); color: #fff; letter-spacing: -.01em; }
.la-brand__club { font-size: 12px; color: #8b91b8; margin-top: 3px; }

.la-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.la-nav__group { margin: 16px 10px 6px; font-size: 11.5px; color: #6c73a0; }
.la-nav__item {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 8px 10px; margin-bottom: 2px;
    border-radius: var(--la-r-s);
    color: #c5c9e2; font-weight: 500; font-size: 13.5px;
    text-decoration: none;
}
.la-nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.la-nav__item.is-active { background: rgba(0, 200, 83, .13); color: #fff; }
.la-nav__item.is-active::before {
    content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px;
    background: var(--la-green); border-radius: 0 3px 3px 0;
}
.la-nav__item .la-i { color: #9ea4c9; }
.la-nav__item.is-active .la-i, .la-nav__item:hover .la-i { color: var(--la-green); }
.la-nav__count {
    margin-left: auto; font-size: 11.5px; font-weight: 600;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .09); color: #e3e5f3;
    font-variant-numeric: tabular-nums;
}
.la-nav__count--alert { background: rgba(239, 68, 68, .28); color: #ffc0c0; }
.la-nav__count--warn { background: rgba(245, 158, 11, .25); color: #ffd58a; }
.la-nav__item .la-nav__kbd { margin-left: auto; background: rgba(255, 255, 255, .07); color: #9ea4c9; border-color: rgba(255, 255, 255, .16); }
.la-nav__item .la-nav__count + .la-nav__kbd { margin-left: 6px; }
.la-nav__item:hover .la-nav__kbd, .la-nav__item.is-active .la-nav__kbd { color: #e3e5f3; }

.la-sidebar__foot { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.la-user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: var(--la-r-s); color: #fff;
}
.la-user__name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.la-user__role { font-size: 11.5px; color: #8b91b8; }
.la-icon-btn--dark { color: #9ea4c9; background: transparent; border: 0; }
.la-icon-btn--dark:hover { color: #fff; background: rgba(255, 255, 255, .08); }

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

.la-topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--la-topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 28px;
    background: var(--la-surface);
    border-bottom: 1px solid var(--la-border);
}
.la-search {
    display: flex; align-items: center; gap: 10px;
    height: 36px; width: 380px; max-width: 100%; min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--la-border); border-radius: var(--la-r-m);
    background: var(--la-surface-2); color: var(--la-text-3);
    font-size: 13.5px; cursor: text; text-align: left;
}
.la-search:hover { border-color: var(--la-border-strong); }
.la-search > span:not(.la-kbd) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-kbd {
    font: 500 11.5px/1 var(--la-font-body);
    padding: 3px 6px; border: 1px solid var(--la-border-strong);
    border-bottom-width: 2px; border-radius: 5px;
    background: var(--la-surface); color: var(--la-text-3);
}
.la-search .la-kbd { margin-left: auto; }
.la-topbar__spacer { flex: 1; }

.la-content {
    width: 100%; max-width: 1340px;
    padding: 28px 32px 96px;
}

.la-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 22px;
}
.la-page-head__sub { color: var(--la-text-3); margin-top: 4px; font-size: 14px; }
.la-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--la-text-3); margin-bottom: 10px;
}
.la-back:hover { color: var(--la-text); text-decoration: none; }
.la-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.la-grid { display: grid; gap: 20px; }
.la-grid > * { min-width: 0; }
.la-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.la-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.la-grid--profile { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.la-grid--wizard { grid-template-columns: 200px minmax(0, 1fr) 320px; align-items: start; }
.la-grid--today { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
.la-sticky { position: sticky; top: calc(var(--la-topbar-h) + 20px); }

/* ============================================================
   4. Componenten
   ============================================================ */

/* Knoppen */
.la-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 14px;
    border: 1px solid transparent; border-radius: var(--la-r-m);
    font: 500 14px/1 var(--la-font-body);
    background: var(--la-surface); color: var(--la-text);
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.la-btn:hover { text-decoration: none; }
.la-btn--primary { background: var(--la-green); color: var(--la-navy-deep); }
.la-btn--primary:hover { background: var(--la-green-hover); }
.la-btn--secondary { border-color: var(--la-border-strong); }
.la-btn--secondary:hover { background: var(--la-surface-2); }
.la-btn--ghost { background: transparent; color: var(--la-text-2); }
.la-btn--ghost:hover { background: var(--la-surface-2); color: var(--la-text); }
.la-btn--danger { color: var(--la-red); border-color: var(--la-red-border); }
.la-btn--danger:hover { background: var(--la-red-soft); }
.la-btn--danger-solid { background: var(--la-red-dot); color: #fff; }
.la-btn--danger-solid:hover { background: #dc2626; }
.la-btn--navy { background: var(--la-navy); color: #fff; }
.la-btn--navy:hover { background: var(--la-navy-light); }
.la-btn--on-dark { background: rgba(255, 255, 255, .1); color: #fff; }
.la-btn--on-dark:hover { background: rgba(255, 255, 255, .18); }
.la-btn--s { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 6px; }
.la-btn--l { height: 42px; padding: 0 18px; font-size: 15px; }
.la-btn--icon { width: 36px; padding: 0; }
.la-btn--icon.la-btn--s { width: 30px; }
.la-btn--block { width: 100%; }
.la-btn--dashed {
    width: 100%; height: 46px; background: transparent;
    border: 1.5px dashed var(--la-border-strong); color: var(--la-text-2);
}
.la-btn--dashed:hover { border-color: var(--la-green-dark); color: var(--la-green-text); background: var(--la-green-soft); }
.la-btn[disabled] { opacity: .5; cursor: not-allowed; }
.la-btn-group { display: inline-flex; }
.la-btn-group .la-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.la-btn-group .la-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.la-btn-group .la-btn--primary:not(:first-child) { border-left: 1px solid rgba(6, 8, 22, .18); margin-left: 0; }

/* Filterchips (segmentkeuze) */
.la-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.la-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--la-border-strong); border-radius: 999px;
    background: var(--la-surface); color: var(--la-text-2);
    font: 500 13px/1 var(--la-font-body); cursor: pointer;
}
.la-chip:hover { background: var(--la-surface-2); }
.la-chip.is-active { background: var(--la-navy); border-color: var(--la-navy); color: #fff; }
:root[data-theme="dark"] .la-chip.is-active { background: #fff; border-color: #fff; color: var(--la-navy-deep); }
.la-chip__count { font-variant-numeric: tabular-nums; color: var(--la-text-3); font-weight: 500; }
.la-chip.is-active .la-chip__count { color: inherit; opacity: .75; }
.la-chip__dot { width: 8px; height: 8px; border-radius: 50%; }

/* Statuspillen */
.la-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px 0 8px;
    border-radius: 999px; border: 1px solid transparent;
    font: 500 12.5px/1 var(--la-font-body); white-space: nowrap;
}
.la-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, currentColor); flex-shrink: 0; }
.la-pill--ok { background: var(--la-green-soft); border-color: var(--la-green-border); color: var(--la-green-text); --dot: var(--la-green); }
.la-pill--warn { background: var(--la-amber-soft); border-color: var(--la-amber-border); color: var(--la-amber); --dot: var(--la-amber-dot); }
.la-pill--bad { background: var(--la-red-soft); border-color: var(--la-red-border); color: var(--la-red); --dot: var(--la-red-dot); }
.la-pill--info { background: var(--la-blue-soft); border-color: var(--la-blue-border); color: var(--la-blue); --dot: var(--la-blue-dot); }
.la-pill--neutral { background: var(--la-surface-2); border-color: var(--la-border); color: var(--la-text-2); --dot: var(--la-text-4); }
.la-pill--plain::before { display: none; }
/* Een pill die je aanklikt om de toestand te wisselen, zoals een aanwezigheid op het profiel van een hond. */
button.la-pill { cursor: pointer; }
button.la-pill:hover { border-color: currentColor; }
button.la-pill:disabled { cursor: progress; opacity: .6; }

/* Tag (ledengroep, federatie, trainingsgroep) */
.la-tag {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 8px; border-radius: 6px;
    background: var(--la-surface-2); color: var(--la-text-2);
    font: 500 12px/1 var(--la-font-body); white-space: nowrap;
}
.la-tag__dot { width: 8px; height: 8px; border-radius: 2px; }

/* Avatars: cirkel = mens, afgeronde rechthoek = hond */
.la-avatar {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    font: 600 13px/1 var(--la-font-heading);
    background: var(--la-surface-3); color: var(--la-text-2);
    overflow: hidden;
}
.la-avatar--s { width: 28px; height: 28px; font-size: 11px; }
.la-avatar--l { width: 48px; height: 48px; font-size: 16px; }
.la-avatar--xl { width: 76px; height: 76px; font-size: 26px; }
.la-avatar--dog { border-radius: 9px; }
.la-avatar--dog.la-avatar--s { border-radius: 7px; }
.la-avatar--dog.la-avatar--xl { border-radius: 18px; }
.la-avatar--dog .la-i { width: 55%; height: 55%; }
.la-avatar--1 { background: #dcefe4; color: #1c6b41; }
.la-avatar--2 { background: #e2e7fb; color: #33429a; }
.la-avatar--3 { background: #fbe7d6; color: #93470f; }
.la-avatar--4 { background: #e9e1f7; color: #5b3a94; }
.la-avatar--5 { background: #d9eef3; color: #175b6b; }
.la-avatar--6 { background: #f8e1e8; color: #8f2c4b; }
:root[data-theme="dark"] .la-avatar--1 { background: #1d4732; color: #9be3b8; }
:root[data-theme="dark"] .la-avatar--2 { background: #2b3468; color: #b9c3ff; }
:root[data-theme="dark"] .la-avatar--3 { background: #5a3418; color: #ffcfa6; }
:root[data-theme="dark"] .la-avatar--4 { background: #3d2a5f; color: #d5c2f5; }
:root[data-theme="dark"] .la-avatar--5 { background: #163f4b; color: #a6dbe8; }
:root[data-theme="dark"] .la-avatar--6 { background: #582736; color: #ffbcd0; }
.la-avatar-stack { display: inline-flex; }
.la-avatar-stack .la-avatar { box-shadow: 0 0 0 2px var(--la-surface); }
.la-avatar-stack .la-avatar + .la-avatar { margin-left: -8px; }

/* Persoon/hond-chip: naam + avatar, klikbaar */
.la-entity {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--la-text); text-decoration: none; min-width: 0;
}
.la-entity:hover { text-decoration: none; }
.la-entity:hover .la-entity__name { color: var(--la-green-text); }
.la-entity__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-entity__meta { font-size: 12.5px; color: var(--la-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-entity__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

.la-dog-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 9px 0 3px;
    border: 1px solid var(--la-border); border-radius: 999px;
    background: var(--la-surface); color: var(--la-text); font-size: 12.5px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
}
.la-dog-chip:hover { border-color: var(--la-green-dark); text-decoration: none; }
.la-dog-chip .la-avatar { width: 22px; height: 22px; border-radius: 6px; }
.la-dog-chip .la-avatar .la-i { width: 13px; height: 13px; }
.la-dog-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Kaarten */
.la-card {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-r-l);
}
.la-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-bottom: 1px solid var(--la-border);
}
.la-card__head h2, .la-card__head h3 { font-size: 15px; }
.la-card__body { padding: 20px; }
.la-card__body--flush { padding: 0; }
.la-card__foot { padding: 12px 20px; border-top: 1px solid var(--la-border); display: flex; gap: 8px; align-items: center; }
.la-card--soft { background: var(--la-surface-2); border-color: transparent; }

/* Tabs */
.la-tabs {
    display: flex; gap: 4px; overflow-x: auto;
    border-bottom: 1px solid var(--la-border);
    scrollbar-width: none;
}
.la-tabs::-webkit-scrollbar { display: none; }
.la-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 12px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    font: 500 14px/1 var(--la-font-heading); color: var(--la-text-3);
    cursor: pointer; white-space: nowrap;
}
.la-tab:hover { color: var(--la-text); }
.la-tab.is-active { color: var(--la-text); border-bottom-color: var(--la-green); }
.la-tab__count {
    font: 500 11.5px/1 var(--la-font-body); padding: 3px 6px; border-radius: 999px;
    background: var(--la-surface-3); color: var(--la-text-2); font-variant-numeric: tabular-nums;
}
.la-tab.is-active .la-tab__count { background: var(--la-green-soft); color: var(--la-green-text); }
[data-panel] { display: none; }
[data-panel].is-active { display: block; }

/* Tabellen */
.la-table-wrap { overflow-x: auto; }
.la-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.la-table th {
    text-align: left; font: 500 12.5px/1.2 var(--la-font-body); color: var(--la-text-3);
    padding: 10px 14px; border-bottom: 1px solid var(--la-border); white-space: nowrap;
    background: var(--la-surface);
}
.la-table td { padding: 12px 14px; border-bottom: 1px solid var(--la-border); vertical-align: middle; font-size: 13.5px; }
.la-table tbody tr:last-child td { border-bottom: 0; }
.la-table tbody tr:hover td { background: var(--la-surface-2); }
.la-table--clickable tbody tr { cursor: pointer; }
.la-table th:first-child, .la-table td:first-child { padding-left: 20px; }
.la-table th:last-child, .la-table td:last-child { padding-right: 20px; }
.la-table .la-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.la-table .la-td-actions { width: 1%; white-space: nowrap; text-align: right; }
.la-td-actions > .la-btn + .la-menu-wrap { margin-left: 4px; }
.la-pill + .la-hint { margin-top: 4px; }
.la-contact-cell { line-height: 1.35; }
.la-contact-cell small { display: block; color: var(--la-text-3); }

/* Werkbalk boven een lijst: statuschips links, zoeken, filters en kolommen rechts. */
.la-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.la-toolbar .la-input-group { width: 340px; max-width: 100%; }
.la-toolbar .la-select { width: auto; }
.la-chip:hover, .la-segment__btn:hover { text-decoration: none; }

/* Paginering met keuze voor het aantal rijen; een lijst die via list.js laadt, dimt even. */
.la-pager__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.la-pager__size { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.la-select.la-select--s { height: 32px; width: auto; padding: 0 30px 0 10px; font-size: 13px; background-position: right 8px center; }
[data-list][aria-busy="true"] [data-list-part="table"] { opacity: .55; transition: opacity .15s; }
.la-table tr.is-selected td, .la-table tr.is-current td { background: var(--la-green-soft); }
.la-check { width: 16px; height: 16px; accent-color: var(--la-green-dark); cursor: pointer; margin: 0; vertical-align: middle; }

/* Formulieren */
.la-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.la-label { font-size: 13px; font-weight: 500; color: var(--la-text-2); }
.la-label .req { color: var(--la-red-dot); margin-left: 2px; }
.la-input, .la-select, .la-textarea {
    width: 100%; height: 38px; padding: 0 12px;
    border: 1px solid var(--la-border-strong); border-radius: 8px;
    background: var(--la-surface); color: var(--la-text);
    font: 400 14px/1.4 var(--la-font-body);
    transition: border-color .12s, box-shadow .12s;
}
.la-input::placeholder, .la-textarea::placeholder { color: var(--la-text-4); }
.la-input:focus, .la-select:focus, .la-textarea:focus {
    outline: none; border-color: var(--la-green-dark); box-shadow: var(--la-focus);
}
.la-input:disabled, .la-select:disabled, .la-textarea:disabled { background-color: var(--la-surface-2); color: var(--la-text-3); cursor: not-allowed; }
.la-textarea { height: auto; min-height: 112px; padding: 10px 12px; resize: vertical; }

/* Tekst met opmaak uit het opmaakveld, zoals de beschrijving van een les. */
.la-prose { font: 400 14px/1.55 var(--la-font-body); color: var(--la-text-2); }
.la-prose > :first-child { margin-top: 0; }
.la-prose > :last-child { margin-bottom: 0; }
.la-prose p { margin: 0 0 8px; }
.la-prose ul, .la-prose ol { margin: 0 0 8px; padding-left: 22px; }
.la-prose a { color: var(--la-green-dark); }
.la-select {
    appearance: none; padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7c92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.la-input-group { position: relative; }
.la-input-group .la-i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--la-text-3); }
.la-input-group .la-input { padding-left: 36px; }
.la-input-group__suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--la-text-3); font-size: 13px; }
.la-input--prefix { padding-left: 30px; }
.la-input-group__prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--la-text-3); font-size: 14px; }
.la-hint { font-size: 12.5px; color: var(--la-text-3); }
/* Een plaatshouder in een hint, zoals %firstname% bij de tekst van een bericht. */
.la-hint code { padding: 1px 4px; border-radius: 4px; background: var(--la-surface-2); color: var(--la-text-2); font-size: 12px; }
.la-error { font-size: 12.5px; color: var(--la-red); display: flex; gap: 5px; align-items: center; }
.la-field.is-invalid .la-input { border-color: var(--la-red-dot); }
/* Een veld over de volle breedte waarvan het invoerveld zelf smal blijft, zodat de hint eronder de ruimte krijgt. */
.la-field--narrow > .la-input, .la-field--narrow > .la-select, .la-field--narrow > .la-input-group { max-width: 320px; }
.la-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 16px; }
.la-phone { display: flex; gap: 8px; }
.la-phone .la-select { width: auto; flex: none; }
.la-col-12 { grid-column: span 12; } .la-col-8 { grid-column: span 8; } .la-col-6 { grid-column: span 6; }
.la-col-4 { grid-column: span 4; } .la-col-3 { grid-column: span 3; } .la-col-9 { grid-column: span 9; }
.la-fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.la-fieldset__title { font: 600 15px var(--la-font-heading); }
.la-fieldset__desc { font-size: 13px; color: var(--la-text-3); margin: 3px 0 14px; }
.la-fieldset__title + .la-form-grid { margin-top: 12px; }

.la-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.la-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.la-switch__track {
    width: 36px; height: 20px; border-radius: 999px; background: var(--la-border-strong);
    position: relative; transition: background .15s; flex-shrink: 0;
}
.la-switch__track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform .15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.la-switch input:checked + .la-switch__track { background: var(--la-green); }
.la-switch input:checked + .la-switch__track::after { transform: translateX(16px); }
.la-switch input:focus-visible + .la-switch__track { box-shadow: var(--la-focus); }
.la-switch:has(input:disabled), .la-color-pick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.la-switch__text { display: flex; flex-direction: column; line-height: 1.3; }
.la-switch__text small { color: var(--la-text-3); font-size: 12.5px; }

.la-choice {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border: 1px solid var(--la-border-strong); border-radius: 12px;
    cursor: pointer; background: var(--la-surface);
}
.la-choice input { margin: 3px 0 0; accent-color: var(--la-green-dark); }
.la-choice:hover { border-color: var(--la-text-4); }
.la-choice:has(input:checked) { border-color: var(--la-green-dark); box-shadow: inset 0 0 0 1px var(--la-green-dark); background: var(--la-green-soft); }
.la-choice__title { font-weight: 500; }
.la-choice__desc { font-size: 12.5px; color: var(--la-text-3); margin-top: 2px; }
.la-choices { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Kaartjes onder elkaar, zoals de lessen bij Inschrijven voor een les (choice_cards in het formulierthema). */
.la-choice-list { display: flex; flex-direction: column; gap: 8px; }

/* Menu's (dropdown) */
.la-menu-wrap { position: relative; display: inline-flex; }
.la-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
    min-width: 220px; padding: 6px;
    background: var(--la-surface); border: 1px solid var(--la-border);
    border-radius: 12px; box-shadow: var(--la-shadow-menu);
    display: none;
}
.la-menu.is-open { display: block; }
.la-menu--left { right: auto; left: 0; }
.la-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 8px; background: none;
    font-size: 13.5px; color: var(--la-text); text-align: left; cursor: pointer; text-decoration: none;
}
.la-menu__item:hover { background: var(--la-surface-2); text-decoration: none; }
.la-menu__item .la-i { color: var(--la-text-3); }
.la-menu__item--danger, .la-menu__item--danger .la-i { color: var(--la-red); }
.la-menu__item--danger:hover { background: var(--la-red-soft); }
.la-menu__sep { height: 1px; background: var(--la-border); margin: 6px 4px; }
.la-menu__label { font-size: 11.5px; color: var(--la-text-3); padding: 6px 10px 2px; }
.la-menu__hint { margin-left: auto; font-size: 12px; color: var(--la-text-4); }

/* Zwevende lagen: zijpaneel, dialoog, palet */
.la-layer {
    position: fixed; inset: 0; z-index: 70;
    visibility: hidden; opacity: 0;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.la-layer.is-open { visibility: visible; opacity: 1; transition: opacity .18s ease; }
.la-layer__backdrop { position: absolute; inset: 0; background: rgba(6, 8, 22, .48); }
.la-drawer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(500px, 100%);
    display: flex; flex-direction: column;
    background: var(--la-surface); box-shadow: var(--la-shadow-float);
    transform: translateX(24px); transition: transform .22s ease;
}
.la-layer.is-open .la-drawer { transform: none; }
.la-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--la-border);
}
.la-drawer__body { flex: 1; overflow-y: auto; padding: 20px; }
.la-drawer__foot {
    display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    padding: 14px 20px; border-top: 1px solid var(--la-border); background: var(--la-surface);
}
.la-dialog {
    position: absolute; left: 50%; top: 50%;
    width: min(520px, calc(100% - 32px));
    transform: translate(-50%, calc(-50% + 12px));
    background: var(--la-surface); border-radius: var(--la-r-xl);
    box-shadow: var(--la-shadow-float); transition: transform .2s ease;
    max-height: calc(100vh - 32px); display: flex; flex-direction: column;
}
.la-layer.is-open .la-dialog { transform: translate(-50%, -50%); }
.la-dialog__head { padding: 20px 24px 0; }
.la-dialog__body { padding: 16px 24px 4px; overflow-y: auto; }
.la-dialog__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px 20px; }
.la-drawer__body.la-stack > *, .la-dialog__body.la-stack > * { flex-shrink: 0; }
/* Een waarde die je meteen in de lijst aanpast (inline-edit.js), zoals het lidgeld van een aanvraag. */
.la-inline-edit { margin-top: 4px; }
.la-inline-edit__value { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--la-text-3); text-decoration: none; }
.la-inline-edit__value .la-i { opacity: .55; }
.la-inline-edit__value:hover, .la-inline-edit__value:focus-visible { color: var(--la-text); text-decoration: none; }
.la-inline-edit__value:hover .la-i, .la-inline-edit__value:focus-visible .la-i { opacity: 1; }
.la-inline-edit__form { display: flex; gap: 6px; align-items: center; }
.la-inline-edit__form .la-input { width: 92px; height: 30px; padding: 0 8px; }
.la-inline-edit .la-error { margin-top: 4px; }
/* Een deelformulier dat je openklapt (collapsible_subform_row), zoals een hond in de dialoog van een aanvraag. */
.la-subform { border-top: 1px solid var(--la-border); }
.la-subform:last-child { border-bottom: 1px solid var(--la-border); }
.la-subform__head { display: flex; align-items: center; gap: 8px; padding: 11px 2px; cursor: pointer; list-style: none; }
.la-subform__head::-webkit-details-marker { display: none; }
.la-subform__head .la-i { flex: none; color: var(--la-text-3); transition: transform .15s ease; }
.la-subform[open] > .la-subform__head .la-i { transform: rotate(90deg); }
.la-subform__title { font: 600 14px var(--la-font-heading); color: var(--la-text); white-space: nowrap; }
.la-subform__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--la-text-3); }
.la-subform__body { padding: 2px 0 16px; }
.la-subform__foot { display: flex; justify-content: flex-end; margin-top: 10px; }
/* Formulier in een dialoog (shell/dialog_form.html.twig): volgt de kolom van de dialoog, zodat het lichaam scrolt. */
.la-dialog__form { display: flex; flex-direction: column; min-height: 0; }
.la-drawer__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Een dialoog of zijpaneel dat laadt (dialog-form.js): een draaiend rondje met tekst in het midden. */
.la-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 180px; padding: 24px; color: var(--la-text-3); font-size: 13px; }
.la-drawer > .la-loading { flex: 1; }
.la-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--la-border); border-top-color: var(--la-green-dark); animation: la-spin .8s linear infinite; }
@keyframes la-spin { to { transform: rotate(360deg); } }
/* De onderdelen van een zijpaneel staan vast onder de kop: ze scrollen niet weg en worden niet samengedrukt door een lang onderdeel. */
.la-drawer__tabs { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid var(--la-border); }
/* Bestand kiezen (file_widget in het formulierthema): het echte veld ligt onzichtbaar over de knop. */
.la-file-pick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; max-width: 100%; }
.la-file-pick__button { position: relative; overflow: hidden; }
.la-file-pick__button:focus-within { outline: 2px solid var(--la-green); outline-offset: 2px; }
.la-file-pick__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.la-file-pick__name { font-size: 13px; color: var(--la-text-3); min-width: 0; overflow-wrap: anywhere; }
.la-file-pick__name.is-chosen { color: var(--la-text); }
.la-photo-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Aanwezigheden van een hond dit jaar: één vakje per les (profiel van een hond). */
.la-attend { display: flex; flex-wrap: wrap; gap: 4px; }
.la-attend > span, .la-attend-legend__dot { width: 14px; height: 14px; border-radius: 4px; background: var(--la-border-strong); }
.la-attend > .is-present, .la-attend-legend__dot.is-present { background: var(--la-green); }
.la-attend > .is-absent, .la-attend-legend__dot.is-absent { background: var(--la-red-dot); }
.la-attend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--la-text-3); }
.la-attend-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.la-attend-legend__dot { width: 10px; height: 10px; border-radius: 3px; }

/* Segmentkeuze (kanaal) */
.la-segment { display: inline-flex; padding: 3px; background: var(--la-surface-2); border-radius: 10px; gap: 2px; }
.la-segment__btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--la-text-3); font: 500 13px/1 var(--la-font-body); cursor: pointer;
}
.la-segment__btn.is-active { background: var(--la-surface); color: var(--la-text); box-shadow: 0 1px 2px rgba(20, 19, 59, .12); }
.la-segment__btn[disabled] { opacity: .45; cursor: not-allowed; }
/* De lesdagen van een cursusreeks: per weekdag een schakelaar met een uur van en tot. */
.la-weekdays { display: flex; flex-direction: column; gap: 8px; }
.la-weekday { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; align-items: center; gap: 10px; }
.la-weekday--head { font-size: 12px; color: var(--la-text-3); }
/* Tabbladen als links: op een smal scherm scrollen ze binnen hun eigen breedte, niet de pagina. */
.la-segment--nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.la-segment--nav .la-segment__btn { flex-shrink: 0; }

/* Commandopalet */
.la-palette {
    position: absolute; left: 50%; top: 12vh;
    width: min(640px, calc(100% - 32px));
    transform: translate(-50%, 8px);
    background: var(--la-surface); border-radius: 16px;
    box-shadow: var(--la-shadow-float); border: 1px solid var(--la-border);
    overflow: hidden; transition: transform .18s ease;
}
.la-layer.is-open .la-palette { transform: translate(-50%, 0); }
.la-palette__input {
    width: 100%; height: 54px; padding: 0 20px 0 48px; border: 0; border-bottom: 1px solid var(--la-border);
    background: transparent; font: 400 16px var(--la-font-body); color: var(--la-text); outline: none;
}
.la-palette__icon { position: absolute; left: 18px; top: 18px; color: var(--la-text-3); }
.la-palette__list { max-height: 60vh; overflow-y: auto; padding: 8px; }
.la-palette__group { font-size: 11.5px; color: var(--la-text-3); padding: 8px 10px 4px; }
.la-palette__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 10px; background: none;
    text-align: left; cursor: pointer; color: var(--la-text); text-decoration: none;
}
.la-palette__item:hover, .la-palette__item.is-focus { background: var(--la-surface-2); text-decoration: none; }
.la-palette__item .la-kbd { margin-left: auto; }
.la-palette__foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--la-border); font-size: 12px; color: var(--la-text-3); }
.la-palette__empty { padding: 24px; text-align: center; color: var(--la-text-3); }

/* Toasts */
.la-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.la-toast {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 12px;
    background: var(--la-navy); color: #fff; font-size: 13.5px;
    box-shadow: var(--la-shadow-float);
    animation: la-toast-in .2s ease-out;
}
:root[data-theme="dark"] .la-toast { background: #fff; color: var(--la-navy-deep); }
.la-toast .la-i { color: var(--la-green); }
@keyframes la-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bulk-actiebalk */
.la-bulkbar {
    position: fixed; left: 50%; bottom: 24px; z-index: 60;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 8px 8px 16px; border-radius: 14px;
    background: var(--la-navy); color: #fff; box-shadow: var(--la-shadow-float);
    transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}
.la-bulkbar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.la-bulkbar__count { font: 600 14px var(--la-font-heading); margin-right: 8px; white-space: nowrap; }

/* Banners */
.la-banner {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border-radius: 12px; border: 1px solid;
    font-size: 13.5px; margin-bottom: 18px;
}
.la-banner--info { background: var(--la-blue-soft); border-color: var(--la-blue-border); color: var(--la-blue); }
.la-banner--warn { background: var(--la-amber-soft); border-color: var(--la-amber-border); color: var(--la-amber); }
.la-banner__body { flex: 1; color: var(--la-text); }
.la-banner__title { font-weight: 600; color: inherit; }
.la-banner .la-btn--icon { height: 28px; width: 28px; color: inherit; background: transparent; margin-left: auto; }

/* Lege staat */
.la-empty { padding: 36px 20px; text-align: center; color: var(--la-text-3); }
.la-empty h3 { color: var(--la-text); margin-bottom: 4px; }
.la-empty > .la-i { width: 32px; height: 32px; color: var(--la-text-4); margin: 0 auto 10px; stroke-width: 1.4; }

/* Definitielijst (gegevens) */
.la-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: 13.5px; margin: 0; }
.la-dl dt { color: var(--la-text-3); }
.la-dl dd { margin: 0; color: var(--la-text); }

/* Contactregels */
.la-contact { display: flex; flex-direction: column; gap: 8px; }
/* Een lijst die je openklapt, zoals de eerdere vaccinaties op de kaart van een hond. */
.la-more > summary { list-style: none; cursor: pointer; margin-top: 10px; font-size: 12.5px; color: var(--la-green-text); }
.la-more > summary::-webkit-details-marker { display: none; }
.la-more > summary:hover { text-decoration: underline; }
.la-more > summary:focus-visible { outline: 2px solid var(--la-green-dark); outline-offset: 2px; border-radius: 3px; }
.la-more[open] > summary { margin-bottom: 8px; }
.la-contact__row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--la-text-2); min-width: 0; line-height: 1.4; }
.la-contact__row .la-i { color: var(--la-text-4); margin-top: 2px; }
.la-contact__row span { min-width: 0; overflow-wrap: anywhere; }
.la-contact__row a { color: inherit; }
.la-contact__row a:hover { color: var(--la-green-text); }

/* Voortgangsbalk */
.la-bar { height: 6px; border-radius: 999px; background: var(--la-surface-3); overflow: hidden; }
.la-bar__fill { height: 100%; border-radius: 999px; background: var(--la-green); }
.la-bar__fill--warn { background: var(--la-amber-dot); }
.la-bar__fill--bad { background: var(--la-red-dot); }

/* ============================================================
   5. Patronen
   ============================================================ */

/* Identiteitskaart (linkerkolom profiel) */
.la-identity { padding: 22px 20px 20px; }
.la-identity__top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.la-identity__name { font: 600 20px/1.2 var(--la-font-heading); }
.la-identity__number { color: var(--la-text-3); font-size: 13px; margin-top: 2px; }
.la-identity__pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
/* In de smalle kaart van een profiel loopt een lang label (bv. "Hondenziekte (distemper) verlopen sinds …") over meer regels. */
.la-identity__pills .la-pill { height: auto; min-height: 24px; max-width: 100%; padding-top: 4px; padding-bottom: 4px; line-height: 1.35; white-space: normal; }
.la-identity__section { border-top: 1px solid var(--la-border); padding-top: 14px; margin-top: 14px; }
.la-identity__section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.la-identity__section-title h3 { font-size: 13px; color: var(--la-text-3); font-weight: 500; }
.la-identity__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.la-dog-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px;
    border-radius: 10px; text-decoration: none; color: inherit;
}
.la-dog-row:hover { background: var(--la-surface-2); text-decoration: none; }
.la-dog-row .la-entity__text { flex: 1; }

/* Lidmaatschapsstrook */
.la-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border: 1px solid var(--la-border); border-radius: var(--la-r-l); overflow: hidden;
    background: var(--la-surface);
}
.la-strip__cell { padding: 14px 18px; border-right: 1px solid var(--la-border); min-width: 0; }
.la-strip__cell:last-child { border-right: 0; }
.la-strip__label { font-size: 12px; color: var(--la-text-3); margin-bottom: 4px; }
.la-strip__value { font: 500 15px/1.3 var(--la-font-heading); color: var(--la-text); }
.la-strip__value small { display: block; font: 400 12.5px var(--la-font-body); color: var(--la-text-3); margin-top: 2px; }

/* Tijdlijn */
.la-timeline { list-style: none; margin: 0; padding: 0; }
.la-tl {
    position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
    column-gap: 14px; padding: 10px 0;
}
.la-tl::before {
    content: ''; position: absolute; left: 15.5px; top: 0; bottom: 0; width: 1px; background: var(--la-border);
}
.la-tl:first-child::before { top: 18px; }
.la-tl:last-child::before { bottom: calc(100% - 26px); }
.la-tl__icon {
    position: relative; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--la-surface); border: 1px solid var(--la-border); color: var(--la-text-3);
}
.la-tl__icon .la-i { width: 15px; height: 15px; }
.la-tl--fee .la-tl__icon { background: var(--la-green-soft); border-color: var(--la-green-border); color: var(--la-green-text); }
.la-tl--training .la-tl__icon { background: var(--la-blue-soft); border-color: var(--la-blue-border); color: var(--la-blue); }
.la-tl--message .la-tl__icon { background: var(--la-navy); border-color: var(--la-navy); color: #fff; }
:root[data-theme="dark"] .la-tl--message .la-tl__icon { background: #e8eaff; color: var(--la-navy-deep); border-color: #e8eaff; }
.la-tl--alert .la-tl__icon { background: var(--la-amber-soft); border-color: var(--la-amber-border); color: var(--la-amber); }
.la-tl--bad .la-tl__icon { background: var(--la-red-soft); border-color: var(--la-red-border); color: var(--la-red); }
.la-tl__title { font-size: 14px; font-weight: 500; color: var(--la-text); line-height: 1.35; padding-top: 5px; }
.la-tl__title a { color: inherit; }
.la-tl__title a:hover { color: var(--la-green-text); }
.la-tl__meta { font-size: 13px; color: var(--la-text-3); margin-top: 2px; }
.la-tl__date { font-size: 12.5px; color: var(--la-text-3); white-space: nowrap; padding-top: 7px; font-variant-numeric: tabular-nums; }
.la-tl__extra {
    margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    background: var(--la-surface-2); font-size: 13px; color: var(--la-text-2);
}
.la-tl__extra--quote { border-left: 3px solid var(--la-border-strong); border-radius: 0 10px 10px 0; font-style: italic; }
.la-tl__actions { display: flex; gap: 6px; margin-top: 8px; }
.la-tl-month { position: relative; font: 500 12.5px var(--la-font-heading); color: var(--la-text-3); padding: 14px 0 2px 46px; }
.la-tl-month::before {
    content: ''; position: absolute; left: 15.5px; top: 0; bottom: 0; width: 1px; background: var(--la-border);
}
.la-tl-month:first-child { padding-top: 0; }
.la-tl-month:first-child::before { display: none; }
.la-tl-month:first-child + .la-tl::before { top: 18px; }
.la-tl.is-hidden, .la-tl-month.is-hidden { display: none; }
.la-tl.is-new { animation: la-tl-in .35s ease-out; }
@keyframes la-tl-in { from { background: var(--la-green-soft); opacity: .4; } to { background: transparent; opacity: 1; } }

/* Aandachtslijst (Vandaag) */
.la-att { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--la-border); }
.la-att:last-child { border-bottom: 0; }
.la-att__icon {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--la-surface-2); color: var(--la-text-2);
}
.la-att--bad .la-att__icon { background: var(--la-red-soft); color: var(--la-red); }
.la-att--warn .la-att__icon { background: var(--la-amber-soft); color: var(--la-amber); }
.la-att--info .la-att__icon { background: var(--la-blue-soft); color: var(--la-blue); }
.la-att--ok .la-att__icon { background: var(--la-green-soft); color: var(--la-green-text); }
.la-att__text { flex: 1; min-width: 0; }
.la-att__title { font-weight: 500; font-size: 14.5px; }
.la-att__title strong { font-family: var(--la-font-heading); font-weight: 600; }
.la-att__desc { font-size: 13px; color: var(--la-text-3); margin-top: 1px; }

/* Lesrij (vanavond) */
.la-lesson { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px auto; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--la-border); }
.la-lesson:last-child { border-bottom: 0; }
.la-lesson__time { font: 600 16px/1 var(--la-font-heading); font-variant-numeric: tabular-nums; }
.la-lesson__time small { display: block; font: 400 12px var(--la-font-body); color: var(--la-text-3); margin-top: 3px; }
.la-lesson__name { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.la-lesson__meta { font-size: 13px; color: var(--la-text-3); margin-top: 2px; }
.la-lesson__count { font-size: 13px; color: var(--la-text-2); margin-bottom: 6px; display: flex; justify-content: space-between; }

/* Weekstrook: één rij per dag, leesbaar in een smalle kolom */
.la-week { display: flex; flex-direction: column; gap: 2px; }
.la-day { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.la-day.is-today { background: var(--la-green-soft); border-color: var(--la-green-border); }
.la-day__name { grid-column: 1; grid-row: 1; align-self: end; font-size: 11.5px; color: var(--la-text-3); line-height: 1; }
.la-day__num { grid-column: 1; grid-row: 2; align-self: start; font: 600 16px/1 var(--la-font-heading); }
.la-day.is-today .la-day__num { color: var(--la-green-text); }
.la-day__ev { grid-column: 2; justify-self: start; max-width: 100%; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-day:not(:has(.la-day__ev))::after { content: attr(data-empty); grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12.5px; color: var(--la-text-4); }
.la-day__ev--training { background: var(--la-blue-soft); color: var(--la-blue); }
.la-day__ev--event { background: var(--la-green-soft); color: var(--la-green-text); border: 1px solid var(--la-green-border); padding: 1px 7px; }
.la-day__ev--birthday { background: var(--la-amber-soft); color: var(--la-amber); }
.la-day__ev--dog-birthday { background: var(--la-amber-soft); color: var(--la-amber); border: 1px dashed var(--la-amber-border); padding: 1px 7px; }
.la-day__ev .la-i { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* Wizardstappen */
.la-steps { list-style: none; margin: 0; padding: 0; }
.la-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 0 0 22px; color: var(--la-text-3); }
.la-step::before { content: ''; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--la-border); }
.la-step:last-child::before { display: none; }
.la-step__num {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    border: 1.5px solid var(--la-border-strong); background: var(--la-surface);
    font: 600 12.5px var(--la-font-heading); color: var(--la-text-3);
}
.la-step__title { display: block; font: 500 14px var(--la-font-heading); color: var(--la-text-2); padding-top: 4px; }
.la-step__desc { display: block; font-size: 12.5px; margin-top: 1px; }
.la-step.is-active .la-step__num { background: var(--la-green); border-color: var(--la-green); color: var(--la-navy-deep); }
.la-step.is-active .la-step__title { color: var(--la-text); font-weight: 600; }
.la-step.is-done .la-step__num { background: var(--la-green-soft); border-color: var(--la-green-border); color: var(--la-green-text); }
.la-step.is-done::before { background: var(--la-green-border); }
.la-step button { all: unset; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; }
[data-step] { display: none; }
[data-step].is-active { display: block; }
.la-wizard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--la-border); margin-top: 8px; }

/* Hondblok in de wizard */
.la-dog-block { border: 1px solid var(--la-border); border-radius: var(--la-r-l); padding: 18px 20px; margin-bottom: 14px; background: var(--la-surface); }
.la-dog-block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.la-dog-block__title { font: 600 15px var(--la-font-heading); flex: 1; }
/* Nieuw lid (ZODI-915): het volgnummer van elke hond telt CSS, zodat weghalen en toevoegen het niet in de war sturen. */
.la-dog-list { counter-reset: dog; }
.la-dog-list > .la-dog-block { counter-increment: dog; }
.la-dog-list > .la-dog-block .la-dog-block__title::after { content: ' ' counter(dog); }
.la-step-intro { margin-bottom: 24px; }
.la-step-intro h2:focus { outline: none; }
.la-step-intro p { color: var(--la-text-3); margin-top: 4px; }
.la-number-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--la-surface-2); font-size: 13.5px; margin-bottom: 24px; }
.la-number-row strong { font-family: var(--la-font-heading); font-size: 15px; }
.la-number-row__action { margin-left: auto; }
.la-email-taken { color: var(--la-amber); }

/* Lidkaart-voorvertoning: geometrie gemeten op voorkant.png (243x153), accentkleur per club */
.la-idcard {
    --card-accent: #00b132;
    position: relative; aspect-ratio: 243 / 153; border-radius: 12px; overflow: hidden;
    background: #fff; border: 1px solid var(--la-border); color: #0b0d1c;
}
.la-idcard__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.la-idcard__badge { position: absolute; left: 4.5%; top: 5%; width: 20%; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.la-idcard__qr { position: absolute; right: 3.5%; top: 4%; width: 25%; aspect-ratio: 1; z-index: 1; display: block; background: #fff; border-radius: 3px; padding: 2%; box-sizing: border-box; }
.la-idcard__text { position: absolute; right: 4%; bottom: 6%; max-width: 70%; text-align: right; z-index: 1; }
.la-idcard__member { font: 500 11px/1.3 var(--la-font-body); color: #3b4256; }
.la-idcard__club { font: 600 18px/1.15 var(--la-font-heading); color: #0b0d1c; }
.la-idcard .is-placeholder { color: var(--la-text-4); }
.la-color-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.la-color-pick label { position: relative; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }
.la-color-pick input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.la-color-pick label:has(input:checked) { box-shadow: 0 0 0 2px var(--la-surface), 0 0 0 4px var(--la-navy); }
:root[data-theme="dark"] .la-color-pick label:has(input:checked) { box-shadow: 0 0 0 2px var(--la-surface), 0 0 0 4px #fff; }
.la-color-pick input[type="color"] { width: 30px; height: 30px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.la-color-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.la-color-pick input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }

/* Samenvattinglijst "wat gebeurt er" */
.la-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.la-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--la-text-2); }
.la-checklist .la-i { color: var(--la-green-text); margin-top: 2px; width: 15px; height: 15px; }
.la-numbered { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--la-text-2); }
.la-numbered li::marker { color: var(--la-text-3); font-weight: 600; }

/* Import: de meldingen en tabellen van de controle (Club › Import en export) */
.la-import-heading, .la-import-messages h3 { font: 600 14px var(--la-font-heading); margin: 18px 0 8px; }
.la-import-messages__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.la-import-messages__list--errors { color: var(--la-red); }
.la-import-messages__list--warnings { color: var(--la-amber); }

/* Mijn account: de QR-code en de herstelcodes van de tweestapsverificatie */
.la-two-factor { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 16px; }
.la-two-factor__qr { width: 200px; height: 200px; padding: 8px; background: #fff; border: 1px solid var(--la-border); border-radius: var(--la-r); }
.la-two-factor__secret, .la-backup-codes code { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.la-backup-codes { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.la-backup-codes li { padding: 8px 12px; border: 1px solid var(--la-border); border-radius: 8px; background: var(--la-surface-2); text-align: center; }

/* Overzicht van gegevens in de controlestap */
.la-review { border: 1px solid var(--la-border); border-radius: var(--la-r-l); overflow: hidden; }
.la-review__section { padding: 16px 20px; border-bottom: 1px solid var(--la-border); }
.la-review__section:last-child { border-bottom: 0; }
.la-review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.la-review__head h3 { font-size: 14px; }
/* Nieuw lid: per hond een eigen lijst onder Honden. */
.la-review__dog h4 { font: 600 13.5px var(--la-font-heading); margin: 0 0 8px; }
.la-review__dog + .la-review__dog { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--la-border); }

/* Cijferregel (geen tegels) */
.la-figures { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 13.5px; color: var(--la-text-3); }
.la-figures strong { font: 600 18px/1 var(--la-font-heading); color: var(--la-text); margin-right: 6px; font-variant-numeric: tabular-nums; }

/* Documentpagina (conceptoverzicht) */
.la-doc { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; }
.la-doc h1 { font-size: 34px; letter-spacing: -.02em; line-height: 1.15; }
.la-doc h2 { font-size: 22px; margin-top: 48px; margin-bottom: 12px; padding-top: 24px; border-top: 1px solid var(--la-border); }
.la-doc h3 { font-size: 16px; margin-top: 24px; margin-bottom: 6px; }
.la-doc p, .la-doc li { font-size: 15px; line-height: 1.65; color: var(--la-text-2); max-width: 70ch; }
.la-doc ul { padding-left: 20px; }
.la-doc li { margin-bottom: 4px; }
.la-doc .la-lead { font-size: 18px; color: var(--la-text-2); margin-top: 14px; max-width: 62ch; }
.la-doc-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: var(--la-navy-deep); color: #fff; }
.la-doc-nav .la-brand { padding: 0; }
.la-doc-nav a { color: #c5c9e2; font-size: 13.5px; }
.la-doc-nav a:hover { color: #fff; }
.la-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.la-screen {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px; border: 1px solid var(--la-border); border-radius: var(--la-r-l);
    background: var(--la-surface); color: inherit; text-decoration: none;
}
.la-screen:hover { border-color: var(--la-green-dark); text-decoration: none; }
.la-screen h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.la-screen h3 .la-i { color: var(--la-green-text); }
.la-screen p { font-size: 13.5px; color: var(--la-text-3); line-height: 1.5; margin: 0; }
.la-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.la-swatch { border-radius: 10px; border: 1px solid var(--la-border); overflow: hidden; font-size: 12px; }
.la-swatch__color { height: 56px; }
.la-swatch__label { padding: 8px 10px; color: var(--la-text-2); }
.la-swatch__label span { display: block; color: var(--la-text-3); font-variant-numeric: tabular-nums; }
.la-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.la-compare__col { border: 1px solid var(--la-border); border-radius: var(--la-r-l); padding: 16px 18px; background: var(--la-surface); }
.la-compare__col h4 { font: 600 13px var(--la-font-heading); color: var(--la-text-3); margin: 0 0 10px; }
.la-compare__col ul { margin: 0; padding-left: 18px; }
.la-compare__col li { font-size: 13.5px; line-height: 1.55; }
.la-type-sample { display: grid; grid-template-columns: 160px 1fr; gap: 12px 20px; align-items: baseline; margin-top: 12px; }
.la-type-sample .la-muted { font-size: 12.5px; }

/* ============================================================
   6. Responsief
   ============================================================ */
.la-nav-toggle { display: none; }
.la-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(6, 8, 22, .5); z-index: 39; }

@media (max-width: 1180px) {
    .la-grid--wizard { grid-template-columns: 180px minmax(0, 1fr); }
    .la-grid--wizard > .la-wizard-side { grid-column: 1 / -1; position: static; }
    .la-grid--today { grid-template-columns: 1fr; }
    .la-choices { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .la-app { grid-template-columns: 1fr; }
    .la-sidebar {
        position: fixed; left: 0; top: 0; width: var(--la-sidebar-w);
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .la-app.is-nav-open .la-sidebar { transform: none; }
    .la-app.is-nav-open .la-nav-backdrop { display: block; }
    .la-nav-toggle { display: inline-flex; }
    .la-topbar { padding: 0 16px; }
    .la-content { padding: 20px 16px 96px; }
    .la-grid--profile { grid-template-columns: 1fr; }
    /* Op een smal scherm eerst de lijst, daarna de uitleg die op een breed scherm links staat (Club › Lidkaarten). */
    .la-grid--aside-last > aside { order: 1; }
    .la-sticky { position: static; }
    .la-grid--2, .la-grid--3 { grid-template-columns: 1fr; }
    .la-search { width: auto; flex: 1; }
    .la-search .la-kbd { display: none; }
}

@media (max-width: 720px) {
    .la-page-head { flex-direction: column; }
    .la-att { flex-wrap: wrap; row-gap: 10px; }
    .la-att__text { flex: 1 1 calc(100% - 52px); }
    .la-att__text + .la-btn { margin-left: 52px; }
    .la-table--responsive thead { display: none; }
    .la-table--responsive tbody tr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--la-border); }
    .la-table--responsive tbody tr[hidden] { display: none; }
    .la-table--responsive td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; }
    .la-table--responsive td:first-child { grid-column: 1; grid-row: 1; }
    .la-table--responsive td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .la-table--responsive td.la-td-actions { grid-column: 3; grid-row: 1; }
    .la-table--responsive td:nth-child(3), .la-table--responsive td:nth-child(4) { grid-column: 2 / -1; }
    .la-table--responsive td.la-col-hide-m { display: none; }
    .la-table--responsive tbody tr:last-child { border-bottom: 0; }
    /* Zonder vinkjes: de eerste cel bovenaan met de acties ernaast, de rest eronder, met het label uit data-label. */
    .la-table--responsive.la-table--no-check tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
    .la-table--responsive.la-table--no-check td:first-child { grid-column: 1; grid-row: 1; }
    .la-table--responsive.la-table--no-check td:not(:first-child):not(.la-td-actions) { grid-column: 1 / -1; grid-row: auto; }
    .la-table--responsive.la-table--no-check td.la-td-actions { grid-column: 2; grid-row: 1; }
    /* Meer dan één knop: onderaan over de hele breedte, zodat de eerste cel niet in een smal kolommetje belandt. */
    .la-table--responsive.la-table--no-check td.la-td-actions--below { grid-column: 1 / -1; grid-row: auto; text-align: left; }
    .la-table--responsive td[data-label]::before { content: attr(data-label) ' '; color: var(--la-text-3); }
    .la-actions { justify-content: flex-start; }
    .la-grid--wizard { grid-template-columns: 1fr; }
    .la-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
    .la-step { padding: 0; flex-shrink: 0; }
    .la-step::before { display: none; }
    .la-step__desc { display: none; }
    .la-step:not(.is-active) .la-step__title { display: none; }
    .la-steps { gap: 12px; }
    .la-col-6, .la-col-4, .la-col-3, .la-col-8, .la-col-9 { grid-column: span 12; }
    .la-lesson { grid-template-columns: 56px minmax(0, 1fr); }
    .la-lesson > :nth-child(3), .la-lesson > :nth-child(4) { grid-column: 2; }
    .la-screens, .la-compare { grid-template-columns: 1fr; }
    .la-strip { grid-template-columns: 1fr 1fr; }
    .la-strip__cell:nth-child(2n) { border-right: 0; }
    .la-strip__cell { border-bottom: 1px solid var(--la-border); }
    .la-tl { grid-template-columns: 32px minmax(0, 1fr); }
    .la-tl__date { grid-column: 2; padding-top: 0; }
    .la-toasts { left: 16px; right: 16px; bottom: 16px; }
    .la-bulkbar { left: 16px; right: 16px; transform: translateY(16px); flex-wrap: wrap; }
    .la-bulkbar.is-visible { transform: none; }
    .la-topbar .la-btn--primary span { display: none; }
    .la-topbar .la-btn--primary { width: 36px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .la-sidebar, .la-topbar, .la-bulkbar, .la-toasts { display: none !important; }
    .la-app { display: block; }
}

/* Extra kolombreedtes voor adresvelden */
.la-col-1 { grid-column: span 1; } .la-col-2 { grid-column: span 2; } .la-col-5 { grid-column: span 5; }
.la-col-7 { grid-column: span 7; } .la-col-10 { grid-column: span 10; } .la-col-11 { grid-column: span 11; }
@media (max-width: 720px) { .la-col-1, .la-col-2, .la-col-5, .la-col-7, .la-col-10, .la-col-11 { grid-column: span 12; } }

/* Splitknop: hoofdactie met kanaalkeuze ernaast */
.la-split { display: flex; }
.la-split .la-menu-wrap .la-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(6, 8, 22, .18); }

/* Bewerken per onderdeel */
.la-identity { position: relative; }
.la-identity.la-sticky { position: sticky; } /* sticky is ook "positioned": het potlood blijft in de kaart */
@media (max-width: 1024px) { .la-identity.la-sticky { position: relative; top: auto; } }
.la-identity__edit { position: absolute; top: 12px; right: 12px; }
.la-drawer .la-segment { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.la-repeat-head, .la-repeat-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 8px; align-items: end; }
.la-repeat-head.la-repeat--2, .la-repeat-row.la-repeat--2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 30px; }
.la-repeat-head.la-repeat--1, .la-repeat-row.la-repeat--1 { grid-template-columns: minmax(0, 1fr) 30px; }
.la-repeat-head { font-size: 12px; color: var(--la-text-3); margin-bottom: 4px; }
.la-repeat-row { margin-bottom: 8px; }
.la-readonly { min-height: 38px; padding: 9px 12px; border-radius: 8px; background: var(--la-surface-2); font-size: 14px; color: var(--la-text-2); }

/* Instellingen: subnavigatie en instellingsrijen */
.la-grid--settings { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.la-subnav { display: flex; flex-direction: column; gap: 2px; }
.la-subnav__group { font-size: 11.5px; color: var(--la-text-3); margin: 14px 12px 6px; }
.la-subnav__group:first-child { margin-top: 0; }
.la-subnav__item {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border: 0; border-radius: var(--la-r-s); background: none;
    font: 500 13.5px var(--la-font-body); color: var(--la-text-2); text-align: left; cursor: pointer;
}
.la-subnav__item:hover { background: var(--la-surface-2); color: var(--la-text); }
.la-subnav__item.is-active { background: var(--la-surface-2); color: var(--la-text); font-weight: 600; }
.la-subnav__item.is-active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--la-green); }
.la-subnav__item .la-i { color: var(--la-text-3); }
.la-subnav__item.is-active .la-i { color: var(--la-green-text); }
.la-subnav__item.is-hidden { display: none; }
.la-subnav__badge { margin-left: auto; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--la-amber-soft); color: var(--la-amber); }
.la-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 8px 32px; padding: 16px 20px; border-bottom: 1px solid var(--la-border); align-items: center; }
.la-setting:last-child { border-bottom: 0; }
.la-setting--stack { grid-template-columns: 1fr; }
/* Gestapeld staat het veld onder de naam: dan links uitlijnen en de volle breedte nemen. */
.la-setting--stack .la-setting__control { justify-content: flex-start; }
.la-setting--stack .la-setting__control > * { width: 100%; }
.la-setting__title { font-weight: 500; font-size: 14px; }
.la-setting__desc { font-size: 13px; color: var(--la-text-3); margin-top: 2px; line-height: 1.45; }
.la-setting__control { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; }
.la-setting__control > .la-input, .la-setting__control > .la-select, .la-setting__control > .la-input-group { width: 100%; }
.la-setting__control--left { justify-content: flex-start; }
/* Instellingen (ZODI-887): de titel is het label van het veld, een getal staat met zijn eenheid erachter, en de knoppen
   Ongedaan maken en Opslaan staan rechts onder de laatste instelling, zonder dubbele lijn. */
.la-setting__title { display: block; }
.la-setting.is-invalid .la-setting__title { color: var(--la-red); }
.la-setting .la-error { margin-top: 6px; }
.la-setting__unit { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--la-text-3); }
.la-setting__unit .la-input { width: 96px; }
/* Een dag in het jaar: de dag en de maand naast elkaar (MonthDayType) */
.la-month-day { display: inline-flex; gap: 8px; }
.la-month-day .la-select:first-child { width: 80px; }
.la-month-day .la-select:last-child { width: 150px; }
/* Wat een lidmaatschapsperiode betekent: de weg van een nieuw lid en wat er bij een andere keuze verandert */
.la-period__steps { margin-top: 6px; }
.la-period__impact { margin: 10px 0 0; }
.la-period__impact ul { margin: 6px 0 8px; padding-left: 18px; }
.la-period__impact li + li { margin-top: 3px; }
.la-period__impact p { margin: 0; }
.la-setting + .la-card__foot { border-top: 0; }
.la-card__foot--actions { justify-content: flex-end; }
.la-settings-search { width: 300px; max-width: 100%; }
/* Federaties (ZODI-868): een vinkje met zijn naam. De waarschuwing onder een federatie met leden verschijnt zodra het vinkje uit
   staat, en gaat weg als het weer aan gaat of de kaart ongedaan gemaakt wordt. */
.la-fed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; }
.la-fed__warn { display: none; flex-basis: 100%; margin-left: 26px; font-size: 12.5px; color: var(--la-amber); }
.la-fed .la-check:not(:checked) ~ .la-fed__warn { display: block; }
.la-subnav__empty { margin: 8px 12px; font-size: 12.5px; color: var(--la-text-3); }
.la-avatar--logo { background: #fff; box-shadow: inset 0 0 0 1px var(--la-border); }
.la-avatar--logo img { object-fit: contain; }
.la-signature.la-signature--image { height: auto; min-height: 72px; padding: 10px; background: #fff; }
.la-signature img { display: block; max-width: 100%; max-height: 120px; }
.la-crop { max-height: 50vh; overflow: hidden; border-radius: 10px; }
.la-crop img { display: block; max-width: 100%; }
.la-card__foot--meta { justify-content: space-between; font-size: 12.5px; color: var(--la-text-3); }
.la-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--la-border); font-size: 13.5px; }
.la-list-row:last-child { border-bottom: 0; }
.la-list-row__meta { color: var(--la-text-3); font-size: 12.5px; }
.la-list-row .la-input { height: 32px; width: 110px; }
.la-tpl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.la-tpl__card { border: 1px solid var(--la-border-strong); border-radius: 12px; padding: 10px; cursor: pointer; }
.la-tpl__card:has(input:checked) { border-color: var(--la-green-dark); box-shadow: inset 0 0 0 1px var(--la-green-dark); }
.la-tpl__card input { position: absolute; opacity: 0; }
.la-tpl__preview { aspect-ratio: 1.586; border-radius: 8px; margin-bottom: 8px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; font-size: 9px; }
.la-tpl__name { font-size: 12.5px; font-weight: 500; }
.la-signature { height: 72px; border: 1px dashed var(--la-border-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--la-surface); }
.la-qr { width: 88px; height: 88px; border-radius: 10px; background: var(--la-surface-2); display: grid; place-items: center; color: var(--la-navy); }
.la-usage { display: flex; align-items: baseline; gap: 8px; }
.la-usage strong { font: 600 22px/1 var(--la-font-heading); }
.la-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.la-module { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--la-border); font-size: 13.5px; }
.la-module .la-i { color: var(--la-green-text); }
.la-module.is-off { color: var(--la-text-3); }
.la-module.is-off .la-i { color: var(--la-text-4); }
.la-module__meta { margin-left: auto; font-size: 12.5px; color: var(--la-text-3); }
.la-invoice { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--la-border); font-size: 13.5px; }
.la-invoice:last-child { border-bottom: 0; }
@media (max-width: 1024px) {
    .la-grid--settings { grid-template-columns: 1fr; }
    .la-subnav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
    .la-subnav__group { display: none; }
    .la-subnav__item { flex-shrink: 0; border: 1px solid var(--la-border-strong); border-radius: 999px; padding: 6px 12px; }
    .la-subnav__item.is-active::before { display: none; }
    .la-subnav__item.is-active { background: var(--la-navy); color: #fff; }
    :root[data-theme="dark"] .la-subnav__item.is-active { background: #fff; color: var(--la-navy-deep); }
    .la-subnav__item.is-active .la-i { color: inherit; }
}
@media (max-width: 720px) {
    .la-setting { grid-template-columns: 1fr; }
    .la-setting__control { justify-content: flex-start; }
    .la-tpl, .la-modules { grid-template-columns: 1fr; }
    .la-list-row { grid-template-columns: minmax(0, 1fr) auto; }
    .la-list-row__meta { grid-column: 1 / -1; }
    .la-invoice { grid-template-columns: 1fr auto; }
}
.la-list-row__actions { display: flex; justify-content: flex-end; gap: 4px; min-width: 200px; }
@media (max-width: 720px) { .la-list-row__actions { min-width: 0; } }
.la-tag--v3 { background: var(--la-amber-soft); color: var(--la-amber); cursor: help; }

/* Aanwezigheden op het terrein */
.la-attrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--la-border); border-left: 4px solid transparent; }
.la-attrow:last-child { border-bottom: 0; }
.la-attrow.is-present { border-left-color: var(--la-green); }
.la-attrow.is-absent { border-left-color: var(--la-red-dot); }
.la-attrow.is-hidden { display: none; }
.la-attrow__note { grid-column: 2 / -1; font-size: 13px; color: var(--la-text-2); background: var(--la-surface-2); border-radius: 8px; padding: 8px 10px; }
.la-attrow__note:empty { display: none; }
.la-att-seg .la-segment__btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.la-att-seg .la-segment__btn.is-active[data-att="present"] { background: var(--la-green); color: var(--la-navy-deep); }
.la-att-seg .la-segment__btn.is-active[data-att="absent"] { background: var(--la-red-dot); color: #fff; }
@media (max-width: 720px) {
    .la-attrow { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .la-attrow .la-att-seg { grid-column: 1 / -1; }
    .la-attrow .la-att-seg .la-segment { width: 100%; }
    .la-attrow .la-att-seg .la-segment__btn { flex: 1; justify-content: center; height: 42px; }
}

/* Weekagenda */
.la-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.la-agenda__day { min-height: 200px; border: 1px solid var(--la-border); border-radius: 12px; padding: 8px; background: var(--la-surface); }
.la-agenda__day.is-today { border-color: var(--la-green); box-shadow: inset 0 0 0 1px var(--la-green); }
.la-agenda__head { display: flex; align-items: baseline; gap: 6px; margin: 2px 4px 8px; }
.la-agenda__head strong { font: 600 16px var(--la-font-heading); }
.la-agenda__head span { font-size: 11.5px; color: var(--la-text-3); }
.la-lesson-card { display: block; width: 100%; text-align: left; border: 1px solid var(--la-border); border-left: 3px solid var(--dot, var(--la-blue-dot)); border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; background: var(--la-surface); cursor: pointer; font: inherit; color: inherit; }
.la-lesson-card:hover { border-color: var(--la-border-strong); background: var(--la-surface-2); }
.la-lesson-card__time { font: 600 12.5px var(--la-font-heading); }
.la-lesson-card__name { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.la-lesson-card__meta { font-size: 11.5px; color: var(--la-text-3); margin-top: 2px; }
.la-lesson-card.is-cancelled { opacity: .55; text-decoration: line-through; }
@media (max-width: 1024px) { .la-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } .la-agenda__day { min-height: 0; } }
@media (max-width: 720px) { .la-agenda { grid-template-columns: 1fr; } }

/* Groepskaarten */
.la-group-card { border: 1px solid var(--la-border); border-radius: var(--la-r-l); padding: 16px 18px; background: var(--la-surface); border-top: 4px solid var(--dot, var(--la-blue-dot)); }
.la-group-card h3 { font-size: 15px; }
.la-group-card__meta { font-size: 13px; color: var(--la-text-3); margin-top: 2px; }
.la-group-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; }

/* Ontvangerskiezer en composer */
.la-grid--composer { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.la-chipbox { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border: 1px solid var(--la-border-strong); border-radius: 8px; min-height: 42px; background: var(--la-surface); }
.la-chipbox:focus-within { border-color: var(--la-green-dark); box-shadow: var(--la-focus); }
.la-chipbox input { flex: 1; min-width: 160px; border: 0; outline: none; background: transparent; font: 400 14px var(--la-font-body); color: var(--la-text); padding: 4px; }
.la-rchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--la-surface-2); font-size: 13px; }
.la-rchip button { border: 0; background: none; padding: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--la-text-3); cursor: pointer; }
.la-rchip button:hover { background: var(--la-surface-3); color: var(--la-text); }
.la-mail { border: 1px solid var(--la-border); border-radius: 12px; overflow: hidden; background: #fff; color: #14133b; }
.la-mail__head { background: #060816; color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font: 600 14px var(--la-font-heading); }
.la-mail__body { padding: 18px; font-size: 14px; line-height: 1.6; }
.la-mail__foot { padding: 12px 18px; border-top: 1px solid #e4e7ee; font-size: 11.5px; color: #6a7c92; }
@media (max-width: 1024px) { .la-grid--composer { grid-template-columns: 1fr; } }
.la-composer__foot { justify-content: flex-end; flex-wrap: wrap; }
.la-composer__count { opacity: .75; font-weight: 500; }
.la-composer__rows { gap: 10px; font-size: 13.5px; }
.la-composer__note { border-top: 1px solid var(--la-border); padding-top: 10px; }
.la-composer__tip { padding: 14px 18px; font-size: 13px; }
.la-composer__quick { gap: 6px; }
.la-composer__recipient { padding: 12px 14px; }
.la-composer__preview { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; border-radius: var(--la-r-m); background: #f4f5f9; }
.la-drawer--wide { width: min(680px, 100%); }
.la-drawer:has(.la-composer) { width: min(640px, 100%); }
a.la-tab, a.la-tab:hover { text-decoration: none; }

/* Verzonden, sjablonen, polls en meldingen van Berichten (ZODI-885). */
.la-table--compact th, .la-table--compact td { padding: 8px 10px; }
.la-table--compact th:first-child, .la-table--compact td:first-child { padding-left: 0; }
.la-table--compact th:last-child, .la-table--compact td:last-child { padding-right: 0; }
.la-message-frame { display: block; width: 100%; height: 420px; border: 1px solid var(--la-border); border-radius: var(--la-r-m); background: #f4f5f9; }
.la-sms-bubble { align-self: flex-start; max-width: 340px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--la-surface-2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.la-push-preview { max-width: 380px; padding: 12px 14px; border: 1px solid var(--la-border); border-radius: var(--la-r-l); background: var(--la-surface); box-shadow: 0 6px 18px -10px rgba(20, 19, 59, .35); }
.la-push-preview__title { font: 600 14px var(--la-font-heading); }
.la-push-preview__text { font-size: 13.5px; color: var(--la-text-2); margin-top: 2px; }
.la-template-card { display: flex; flex-direction: column; }
.la-template-card .la-card__body { flex: 1; display: flex; flex-direction: column; }
.la-template-card h3 { font-size: 15px; }
.la-template-card__excerpt { color: var(--la-text-2); margin: 0; flex: 1; }
.la-template-card__actions { gap: 6px; }
.la-template-card__actions form, .la-poll-card form { display: inline-flex; }
.la-poll-bars { gap: 12px; }
.la-poll-bar .la-bar { height: 8px; margin-top: 4px; }
.la-poll-bar .la-bar__fill { background: var(--la-border-strong); }
.la-poll-bar.is-leading .la-bar__fill { background: var(--la-green); }
.la-poll-description { font-size: 14px; line-height: 1.6; color: var(--la-text-2); }
.la-poll-description > :first-child { margin-top: 0; }
.la-poll-description > :last-child { margin-bottom: 0; }
.la-poll-description img { max-width: 100%; height: auto; }
.la-poll-locked { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.la-public__done-icon--muted { background: var(--la-surface-2); color: var(--la-text-3); }
.la-public__note { max-width: 440px; }

/* Evenementkaarten */
.la-event { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border: 1px solid var(--la-border); border-radius: var(--la-r-l); background: var(--la-surface); }
.la-event__date { text-align: center; border-radius: 10px; background: var(--la-surface-2); padding: 8px 4px; }
.la-event__date strong { display: block; font: 600 20px/1 var(--la-font-heading); }
.la-event__date span { font-size: 11.5px; color: var(--la-text-3); text-transform: none; }
.la-event.is-past { opacity: .75; }
.la-event h3 { font-size: 15px; }
.la-event__meta { font-size: 13px; color: var(--la-text-3); margin-top: 2px; }
.la-event__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.la-event__menu { margin-left: auto; }
/* Een instelling die enkel een stand toont (een label of waarde): de tekst neemt de breedte, de stand rechts zo smal als nodig. */
.la-setting--status { grid-template-columns: minmax(0, 1fr) auto; }

/* Onboarding-takenlijst */
.la-todo { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--la-border); }
.la-todo:last-child { border-bottom: 0; }
.la-todo__num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--la-border-strong); font: 600 12.5px var(--la-font-heading); color: var(--la-text-3); }
.la-todo.is-done .la-todo__num { background: var(--la-green-soft); border-color: var(--la-green-border); color: var(--la-green-text); }
.la-todo.is-done .la-todo__title { text-decoration: line-through; color: var(--la-text-3); }
.la-todo.is-next .la-todo__num { background: var(--la-green); border-color: var(--la-green); color: var(--la-navy-deep); }
.la-todo__title { font-weight: 500; }
.la-todo__desc { font-size: 13px; color: var(--la-text-3); margin-top: 2px; }

/* Rood puntje op de bel */
.la-btn.has-dot { position: relative; }
.la-btn.has-dot::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--la-red-dot); box-shadow: 0 0 0 2px var(--la-surface); }
.la-notif { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--la-border); }
.la-notif:last-child { border-bottom: 0; }
.la-notif.is-unread .la-notif__title { font-weight: 600; }
.la-notif__title { font-size: 14px; }
.la-notif__meta { font-size: 12.5px; color: var(--la-text-3); margin-top: 2px; }

/* Voortgang met label */
.la-progress { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--la-text-3); white-space: nowrap; }
.la-progress .la-bar { flex: 1; min-width: 60px; }

/* Horizontale stappen (import) */
.la-hsteps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.la-hsteps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--la-text-3); }
.la-hsteps li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--la-border-strong); font: 600 12px var(--la-font-heading); font-style: normal; }
.la-hsteps li.is-active { color: var(--la-text); font-weight: 600; }
.la-hsteps li.is-active i { background: var(--la-green); border-color: var(--la-green); color: var(--la-navy-deep); }
.la-hsteps li.is-done { color: var(--la-text-2); cursor: pointer; }
.la-hsteps li.is-done i { background: var(--la-green-soft); border-color: var(--la-green-border); color: var(--la-green-text); }

/* Keuzeblokken: titel en omschrijving onder elkaar */
.la-choice > span { min-width: 0; flex: 1; }
.la-choice__title, .la-choice__desc { display: block; }
/* Segmentknoppen breken niet af */
.la-segment { max-width: 100%; overflow-x: auto; }
.la-segment__btn { white-space: nowrap; }
/* Groepskaart: cijfers niet afbreken */
.la-group-card__row > span:first-child { white-space: nowrap; }
@media (max-width: 720px) {
    .la-table--responsive td:nth-child(n+5):not(.la-td-actions) { grid-column: 2 / -1; }
    .la-table--responsive td.la-td-num { text-align: left; }
    .la-progress { flex-wrap: wrap; white-space: normal; }
    .la-progress .la-bar { flex-basis: 100%; order: 3; }
}
.la-screen h3 a { color: inherit; display: inline-flex; align-items: center; gap: 8px; }

/* Keuzeveld met chips: zoeken, aanvinken, chips (data-picker) */
.la-picker { position: relative; }
.la-picker__box { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 42px; padding: 5px 36px 5px 8px; border: 1px solid var(--la-border-strong); border-radius: 8px; background: var(--la-surface); cursor: text; }
.la-picker__box::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--la-text-3); border-bottom: 1.5px solid var(--la-text-3); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; cursor: pointer; }
.la-picker.is-open .la-picker__box { border-color: var(--la-green-dark); box-shadow: var(--la-focus); }
.la-picker.is-open .la-picker__box::after { transform: translateY(-20%) rotate(-135deg); }
.la-picker__input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font: 400 14px var(--la-font-body); color: var(--la-text); padding: 4px 2px; }
.la-picker__input::placeholder { color: var(--la-text-4); }
.la-picker .la-rchip { max-width: 100%; }
.la-picker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--la-text-4)); flex-shrink: 0; }
.la-picker__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 300px; overflow: auto; padding: 6px; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: 10px; box-shadow: 0 14px 34px rgba(6, 8, 22, .16); }
.la-picker__actions { display: flex; gap: 14px; padding: 4px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--la-border); font-size: 12.5px; }
.la-picker__actions button { all: unset; cursor: pointer; color: var(--la-green-text); font-weight: 500; }
.la-picker__actions button:hover { text-decoration: underline; }
.la-picker__group { padding: 8px 8px 3px; font: 600 11.5px var(--la-font-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--la-text-4); }
.la-picker__opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.la-picker__opt:hover, .la-picker__opt:focus-within { background: var(--la-surface-2); }
.la-picker__opt:has(input:checked) { background: var(--la-green-soft); }
.la-picker__opt input { margin: 3px 0 0; accent-color: var(--la-green-dark); flex-shrink: 0; }
.la-picker__text { min-width: 0; }
.la-picker__text small { display: block; font-size: 12px; color: var(--la-text-3); }
/* Eén keuze uit een lange lijst: een zoekbalk met een vergrootglas, de keuze komt in het veld zelf te staan. */
.la-picker--search .la-picker__box { padding-left: 10px; }
.la-picker--search .la-picker__icon { color: var(--la-text-3); flex-shrink: 0; }
.la-picker--search .la-picker__opt input { position: absolute; opacity: 0; pointer-events: none; }
.la-picker--search .la-picker__opt { padding-left: 10px; }
.la-picker__empty { padding: 10px 8px; font-size: 13px; color: var(--la-text-3); }
/* In een dialoog of zijpaneel zweeft de lijst boven de inhoud (picker.js plaatst ze met position: fixed), zodat
   ze over de rand mag vallen zonder dat het scrollende lichaam ze afknipt of het venster groter wordt. */
.la-dialog .la-picker__menu, .la-drawer .la-picker__menu { z-index: 60; }

/* Kolommen verbergen (kolomkiezer) */
.la-col-off { display: none !important; }
.la-menu__item--check { cursor: pointer; }
.la-menu__item--check .la-check { margin: 0; }

/* Publieke pagina's (aanmelden, evenement): geen schil, wel de huisstijl van de club */
.la-public-body { background: var(--la-bg); min-height: 100vh; }
.la-public { max-width: 720px; margin: 0 auto; padding: 28px 20px 80px; }
.la-public__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.la-public__shield { width: 52px; height: 60px; flex-shrink: 0; }
.la-public__club { font: 600 20px var(--la-font-heading); letter-spacing: -.01em; }
.la-public__sub { font-size: 13px; color: var(--la-text-3); }
.la-public__hero { background: var(--la-navy-deep); color: #fff; border-radius: var(--la-r-l); padding: 26px 26px 22px; margin-bottom: 18px; }
.la-public__hero h1 { color: #fff; font-size: 26px; margin: 0 0 6px; }
.la-public__hero p { color: #c5c9e2; margin: 0; font-size: 14.5px; line-height: 1.55; }
.la-public__hero--langs { position: relative; padding-right: 150px; }
.la-public__langs { position: absolute; top: 18px; right: 18px; display: flex; gap: 2px; }
.la-public__langs a { padding: 3px 7px; border-radius: 6px; color: #9ea4c9; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.la-public__langs a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.la-public__langs a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .12); }
@media (max-width: 720px) {
    /* Op een gsm staat de taalkeuze boven de titel in plaats van ernaast. */
    .la-public__hero--langs { padding-right: 26px; }
    .la-public__langs { position: static; margin: -8px 0 10px -7px; }
}
.la-public .la-card { margin-bottom: 16px; }
.la-public__foot { margin-top: 28px; font-size: 12.5px; color: var(--la-text-4); text-align: center; }
.la-public__foot a { color: inherit; }
/* Aanmelden (ZODI-916): de eerste geleider is geen blok, dus een extra geleider telt vanaf 2. */
.la-person-list { counter-reset: person 1; }
.la-person-list > .la-dog-block { counter-increment: person; margin-top: 16px; }
.la-person-list > .la-dog-block .la-dog-block__title::after { content: ' ' counter(person); }
.la-terms { gap: 10px; align-items: flex-start; font-size: 14px; }
.la-terms .la-check { margin-top: 3px; }
.la-public__note { max-width: 420px; }
.la-public__done { text-align: center; padding: 36px 24px; }
.la-public__done h2 { margin: 0 0 6px; }
.la-public__done-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--la-green-soft); color: var(--la-green-text); }
.la-public__done-icon--pending { background: var(--la-amber-soft); color: var(--la-amber); }
.la-public__done-icon--closed { background: var(--la-surface-2); color: var(--la-text-3); }
.la-public__done-text { color: var(--la-text-2); max-width: 48ch; margin: 0 auto 18px; }
.la-public__next { text-align: left; max-width: 520px; margin: 0 auto 18px; padding: 14px 18px; border-radius: var(--la-r-l); background: var(--la-surface-2); }
/* De bevestigingstekst van de club (ZODI-869) staat waar anders de stappen staan: met hun letter, en zonder de smalle kolom en de marge van de zin erboven. */
.la-public__next-text { margin: 0; font-size: 13px; color: var(--la-text-2); overflow-wrap: anywhere; }
/* De pagina na een Mollie-betaling (ZODI-877): status, overzicht en wat nu. */
.la-result { text-align: center; padding: 36px 24px 28px; }
.la-result__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.la-result__icon .la-i { width: 30px; height: 30px; }
.la-result--paid .la-result__icon { background: var(--la-green-soft); color: var(--la-green-text); }
.la-result--pending .la-result__icon { background: var(--la-amber-soft); color: var(--la-amber); }
.la-result--failed .la-result__icon { background: var(--la-red-soft); color: var(--la-red); }
.la-result h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.01em; }
.la-result p { color: var(--la-text-2); max-width: 54ch; margin: 0 auto; }
.la-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.la-result__note { margin: 4px 0 0; font-size: 12.5px; color: var(--la-text-3); text-align: center; }
/* Lidgeld › Betaallinks (ZODI-942): de link met de QR-code ernaast, op gsm eronder. */
.la-link-share { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.la-link-share__text { margin: 0 0 14px; color: var(--la-text-2); max-width: 60ch; }
.la-link-share__qr { margin: 0; text-align: center; }
.la-link-share__qr img { display: block; width: 160px; height: 160px; padding: 8px; background: #fff; border: 1px solid var(--la-border); border-radius: var(--la-r-m); }
.la-link-share__qr figcaption { margin-top: 8px; font-size: 12.5px; }
.la-link-share__qr a { display: inline-flex; align-items: center; gap: 6px; color: var(--la-text-2); }
@media (max-width: 720px) { .la-link-share { grid-template-columns: 1fr; } .la-link-share__qr { justify-self: start; } }
.la-qty { display: inline-flex; align-items: center; border: 1px solid var(--la-border-strong); border-radius: 8px; overflow: hidden; }
.la-qty button { all: unset; width: 34px; height: 36px; text-align: center; cursor: pointer; font-size: 18px; color: var(--la-text-2); }
.la-qty button:hover { background: var(--la-surface-2); }
.la-qty output { min-width: 34px; text-align: center; font: 600 14px var(--la-font-heading); }
.la-qty input { width: 40px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--la-text); text-align: center; font: 600 14px var(--la-font-heading); -moz-appearance: textfield; appearance: textfield; }
.la-qty input::-webkit-outer-spin-button, .la-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.la-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 0; border-top: 1px solid var(--la-border); font: 600 18px var(--la-font-heading); }
@media (max-width: 720px) { .la-public { padding: 18px 16px 60px; } .la-public__hero { padding: 20px 18px; } }

/* Help: categoriekaarten zijn knoppen */
button.la-help-cat { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; padding: 0; }
.la-help-cat:hover { border-color: var(--la-green-dark); }
.la-help-cat h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 6px; }
.la-help-cat h3 .la-i { color: var(--la-green-text); }
.la-help-cat p { font-size: 13px; color: var(--la-text-3); margin: 0 0 8px; line-height: 1.5; }
a.la-help-cat { display: block; color: inherit; text-decoration: none; }
.la-help-cat h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 6px; }
.la-help-cat h2 .la-i { color: var(--la-green-text); }

/* Help: zoeken, resultaten, een artikel uit de handleiding, de versies en de sneltoetsen */
.la-help-search { padding: 14px 16px; }
.la-help-search .la-input { height: 48px; font-size: 15px; }
.la-help-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 12px 20px; border-bottom: 1px solid var(--la-border); color: inherit; font-size: 14px; }
.la-help-result:last-child { border-bottom: 0; }
.la-help-result:hover { background: var(--la-surface-2); text-decoration: none; }
.la-help-result .la-muted { font-size: 12.5px; }
.la-help-result__text { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--la-text-3); }
.la-article { font-size: 14.5px; line-height: 1.65; color: var(--la-text-2); overflow-wrap: break-word; }
.la-article > h1:first-child { display: none; }
.la-article h2 { font-size: 18px; margin: 28px 0 8px; color: var(--la-text); }
.la-article h3 { font-size: 15.5px; margin: 20px 0 6px; color: var(--la-text); }
.la-article > :first-child, .la-article > h1:first-child + * { margin-top: 0; }
.la-article p, .la-article ul, .la-article ol, .la-article blockquote, .la-article table { margin: 0 0 12px; max-width: 75ch; }
.la-article ul, .la-article ol { padding-left: 22px; }
.la-article li { margin-bottom: 4px; }
.la-article strong { color: var(--la-text); }
.la-article blockquote { padding: 10px 14px; border-left: 3px solid var(--la-green); border-radius: 0 8px 8px 0; background: var(--la-surface-2); }
.la-article blockquote p { margin: 0; }
.la-article table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.la-article th, .la-article td { padding: 8px 10px; border-bottom: 1px solid var(--la-border); text-align: left; vertical-align: top; }
.la-article th { color: var(--la-text); font-weight: 600; }
.la-article code { padding: 1px 5px; border-radius: 4px; background: var(--la-surface-2); font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.la-article img { max-width: 100%; height: auto; border-radius: 8px; }
.la-changelog { align-items: flex-start; }
.la-changelog .la-att__title { margin: 0; }
.la-changelog .la-att__desc { margin: 4px 0 0; }
.la-changelog__group h4 { margin: 10px 0 4px; font-size: 13px; color: var(--la-text-2); }
.la-changelog__group ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--la-text-2); }
.la-shortcuts { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 13.5px; }
.la-shortcuts div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.la-shortcuts dd { display: flex; gap: 4px; margin: 0; }

/* Inzichten: staven per maand of groep en liggende staven, zonder script */
.la-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 200px; margin: 0; padding: 0; list-style: none; }
.la-columns__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.la-columns__track { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 0; padding-top: 18px; }
.la-columns__bar { width: min(100%, 34px); height: var(--size); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--la-green); }
.la-columns__value { font: 600 11px/1 var(--la-font-heading); color: var(--la-text); white-space: nowrap; }
.la-columns__label { overflow: hidden; font-size: 11px; color: var(--la-text-3); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
/* Op een smal scherm passen twaalf staven met hun bedrag niet naast elkaar: dan liggen ze, zoals de andere grafieken. */
@media (max-width: 720px) {
    .la-columns { grid-auto-flow: row; height: auto; gap: 8px; }
    .la-columns__col { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "label bar value"; align-items: center; gap: 10px; }
    .la-columns__track { display: contents; }
    .la-columns__label { grid-area: label; font-size: 13px; text-align: left; }
    .la-columns__bar { grid-area: bar; width: var(--size); height: 10px; min-width: 2px; min-height: 0; border-radius: 999px; }
    .la-columns__value { grid-area: value; font-size: 13px; }
}
.la-hb { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.la-hb__row { display: grid; grid-template-columns: minmax(0, 160px) 1fr minmax(44px, auto); gap: 10px; align-items: center; font-size: 13px; }
.la-hb__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-hb__row .la-bar { display: block; height: 10px; }
.la-hb__row .la-bar__fill { display: block; }
.la-hb__value { font: 600 13px var(--la-font-heading); text-align: right; white-space: nowrap; }
.la-insight { font-size: 13px; color: var(--la-text-2); }

/* Beheer Ledenadmin: de prijs op de kaart van een abonnement */
.la-platform-price { font: 600 26px/1.1 var(--la-font-heading); }

/* Een club aanmelden: de pagina en de abonnementen als keuzekaarten */
.la-cs { max-width: 880px; margin: 0 auto; padding: 28px 20px 80px; }
.la-cs .la-card { margin-bottom: 0; }
.la-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.la-plan__option { position: relative; }
.la-plan__tag { position: absolute; top: -10px; right: 12px; padding: 2px 8px; border-radius: 999px; background: var(--la-green); color: var(--la-navy-deep); font-size: 11px; font-weight: 600; }
.la-plan__price { display: block; margin: 4px 0 2px; font: 600 20px var(--la-font-heading); }
.la-plan__price small { font: 400 12.5px var(--la-font-body); color: var(--la-text-3); }
.la-plan__limit { display: block; font-size: 12.5px; font-weight: 600; color: var(--la-text-2); }
.la-plan__features { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: var(--la-text-3); }
.la-signup-done { padding: 36px 24px; text-align: center; }
.la-signup-done h1 { margin: 0 0 6px; font-size: 22px; }
.la-signup-done p { max-width: 50ch; margin: 0 auto 18px; color: var(--la-text-2); }
.la-signup-done__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--la-green-soft); color: var(--la-green-text); }

/* Nieuwe versie: badge in de zijbalk, item in de lade, aankondiging op Vandaag */
.la-version { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin: 0 0 6px; border-radius: 8px; font-size: 12px; color: #8e93b5; text-decoration: none; }
.la-version > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.la-version:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.la-version__new { background: var(--la-green); color: var(--la-navy-deep); font: 600 10.5px var(--la-font-heading); padding: 2px 7px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.la-avatar--release { background: var(--la-green) !important; color: var(--la-navy-deep) !important; }
.la-notif--release { background: var(--la-green-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.la-release { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--la-green-border); border-radius: var(--la-r-l); background: linear-gradient(90deg, var(--la-green-soft), var(--la-surface) 70%); }
.la-release__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--la-green); color: var(--la-navy-deep); display: grid; place-items: center; }
.la-release__title { font: 600 15px var(--la-font-heading); }
.la-release__desc { font-size: 13.5px; color: var(--la-text-2); margin-top: 2px; }
.la-release__actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 720px) { .la-release { grid-template-columns: 1fr; } .la-release__icon { display: none; } .la-release__actions { justify-content: flex-start; } }

/* Knop die eruitziet als een link (in tabelcellen) */
.la-link { all: unset; cursor: pointer; color: var(--la-green-text); font: inherit; }
.la-link:hover { text-decoration: underline; }
.la-link:focus-visible { outline: 2px solid var(--la-green-dark); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 720px) {
    .la-doc-nav { flex-wrap: wrap; padding: 12px 16px; gap: 10px 16px; }
    .la-doc-nav .la-flex { flex-wrap: wrap; row-gap: 8px; }
}

/* Sneltoets-hint in een knop of menu-item */
.la-btn .la-kbd, .la-menu__hint .la-kbd { margin-left: 8px; font-size: 11px; }
.la-btn--primary .la-kbd { background: rgba(6, 8, 22, .18); color: inherit; border-color: transparent; }
.la-btn--on-dark .la-kbd { background: rgba(255, 255, 255, .14); color: inherit; border-color: transparent; }
.la-btn--block .la-kbd--hint { margin-left: auto; }

/* Formulieren uit het register (data-form) */
.la-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 16px; border: 1.5px dashed var(--la-border-strong); border-radius: var(--la-r); background: var(--la-surface-2); color: var(--la-text-2); text-align: center; cursor: pointer; font-size: 13.5px; }
.la-file:hover { border-color: var(--la-green); background: var(--la-green-soft); }
.la-file .la-i { width: 22px; height: 22px; color: var(--la-text-3); }
.la-file small { color: var(--la-text-3); font-size: 12px; }
.la-kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-size: 14px; }
.la-kv dt { color: var(--la-text-3); } .la-kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.la-thread { display: grid; gap: 10px; }
.la-msg { padding: 12px 14px; border-radius: var(--la-r); background: var(--la-surface-2); font-size: 13.5px; }
.la-msg--reply { background: var(--la-green-soft); }
.la-msg p { margin: 6px 0 0; }
.la-msg .la-var { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--la-surface); border: 1px solid var(--la-border); font-family: var(--la-font-heading); font-size: 12.5px; }
.la-form-card { width: 100%; max-width: 320px; margin: 0 auto; }
.la-form__danger { color: var(--la-red); }
.la-dialog__foot .la-grow { flex: 1; }

/* Evaluaties na de les: schaal met drie niveaus, vragen in het zijpaneel, niveaublokjes en antwoorden */
.la-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.la-scale__opt {
    position: relative; min-height: 42px; padding: 6px 8px;
    border: 1px solid var(--la-border-strong); border-radius: 10px;
    background: var(--la-surface); color: var(--la-text-2);
    font: 500 13.5px/1.2 var(--la-font-body); cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.la-scale__opt:hover { background: var(--la-surface-2); color: var(--la-text); }
.la-scale__opt.is-active { font-weight: 600; }
.la-scale__opt--1.is-active { background: var(--la-amber-soft); border-color: var(--la-amber-dot); color: var(--la-amber); box-shadow: inset 0 0 0 1px var(--la-amber-dot); }
.la-scale__opt--2.is-active { background: var(--la-green-soft); border-color: var(--la-green-dark); color: var(--la-green-text); box-shadow: inset 0 0 0 1px var(--la-green-dark); }
.la-scale__opt--3.is-active { background: var(--la-green); border-color: var(--la-green); color: var(--la-navy-deep); }
/* Stipje: dit antwoord gaf de lesgever de vorige keer */
.la-scale__opt.was-prev::after { content: ''; position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--la-text-4); }
.la-scale__opt--3.is-active.was-prev::after { background: rgba(6, 8, 22, .4); }

.la-drawer--eval { width: min(560px, 100%); }
.la-eval__nav { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--la-border); font-size: 12.5px; color: var(--la-text-3); white-space: nowrap; background: var(--la-surface-2); }
.la-eval__nav .la-bar { flex: 1; min-width: 40px; background: var(--la-surface-3); }
.la-eval__pos { font-weight: 600; color: var(--la-text-2); }
[data-eval-done] { transition: color .2s; }
[data-eval-done].is-flash { color: var(--la-green-text); font-weight: 600; }
/* Zolang het evaluatiepaneel open is, komen meldingen bovenaan: de knop Bewaren blijft vrij */
body:has(#la-eval.is-open) .la-toasts { top: 16px; bottom: auto; }
.la-eval__dog { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.la-eval__name { display: flex; align-items: center; gap: 8px; font: 600 16px var(--la-font-heading); }
.la-evq { padding: 14px 0; border-top: 1px solid var(--la-border); }
.la-evq__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.la-evq__label { font-weight: 500; font-size: 14px; color: var(--la-text); }
.la-evq__label .req { color: var(--la-red-dot); margin-left: 2px; }
.la-evq__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--la-text-3); white-space: nowrap; }
.la-evq__hint { display: block; font-size: 12.5px; color: var(--la-text-3); margin: -4px 0 8px; }
.la-evq__prev { display: block; margin-top: 6px; font-size: 12px; color: var(--la-text-3); }
.la-evq__quick { margin-bottom: 8px; }
.la-evq__quick .la-chip { height: 28px; padding: 0 10px; font-size: 12.5px; }
.la-evq .la-textarea { min-height: 64px; }
.la-evq .la-segment__btn { min-width: 72px; justify-content: center; }
.la-evq.is-missing .la-evq__label { color: var(--la-red); }
.la-evq.is-missing .la-scale__opt, .la-evq.is-missing .la-chip { border-color: var(--la-red-border); }
@media (max-width: 720px) {
    .la-drawer--eval [data-eval-note], .la-drawer--eval .la-kbd--hint { display: none; }
    .la-eval__dog { flex-wrap: wrap; }
    .la-eval__dog > .la-grow { flex: 1 1 calc(100% - 60px); }
    .la-eval__dog > .la-btn { margin-left: 60px; }
}

/* Niveaublokjes: leeg = niet ingevuld, amber = nog oefenen, lichtgroen = lukt soms, groen = lukt goed */
.la-lvl { display: inline-block; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--la-border); background: var(--la-surface-2); vertical-align: middle; flex-shrink: 0; }
.la-lvl--s { width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; }
.la-lvl--1 { background: var(--la-amber-soft); border-color: var(--la-amber-dot); }
.la-lvl--2 { background: var(--la-green-soft); border-color: var(--la-green-dark); }
.la-lvl--3 { background: var(--la-green); border-color: var(--la-green); }
.la-lvl-row { display: inline-flex; gap: 3px; vertical-align: middle; }
.la-lvl-row .la-lvl { width: 12px; height: 12px; border-radius: 3px; }
.la-lvl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--la-text-3); }
.la-lvl-legend span { display: inline-flex; align-items: center; }

/* Antwoorden van één evaluatie */
.la-evans { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 28px; margin: 0; font-size: 13.5px; }
.la-evans dt { color: var(--la-text-3); }
.la-evans dd { margin: 0; color: var(--la-text); display: flex; align-items: center; }
.la-evans__text { margin: 10px 0 0; font-size: 13.5px; color: var(--la-text-2); padding: 10px 12px; border-radius: 10px; background: var(--la-surface-2); }
.la-evans__text span { display: block; font-size: 12px; color: var(--la-text-3); margin-bottom: 2px; }
.la-evans__internal { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--la-border-strong); border-radius: 10px; }
.la-evans__internal-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--la-text-3); margin-bottom: 6px; }
.la-evcard { padding: 16px 20px; border-bottom: 1px solid var(--la-border); }
.la-evcard:last-child { border-bottom: 0; }
.la-evcard__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.la-evcard__compact { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--la-text-3); }
.la-evcard__compact .la-lvl-row { margin-top: 3px; flex-shrink: 0; }
.la-evcard .la-evcard__head:last-child { margin-bottom: 0; }
.la-evlist { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.la-evlist li { padding-left: 4px; }
.la-evlist li span { display: inline; }
.la-evlist__type { color: var(--la-text-3); font-size: 12.5px; margin-left: 6px; }
@media (max-width: 720px) { .la-evans { grid-template-columns: 1fr; gap: 2px; } .la-evans dd { margin-bottom: 6px; } .la-evcard__head { flex-wrap: wrap; row-gap: 8px; } .la-evcard__head > .la-grow { flex: 1 1 100%; } }

/* Verloop per onderdeel: één rij per schaalvraag, één kolom per evaluatie */
.la-evmatrix { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.la-evmatrix th { font: 500 12px var(--la-font-body); color: var(--la-text-3); padding: 0 5px 8px; text-align: center; white-space: nowrap; }
.la-evmatrix td { padding: 4px 5px; text-align: center; }
.la-evmatrix th:first-child, .la-evmatrix td:first-child { text-align: left; padding-left: 0; padding-right: 14px; color: var(--la-text-2); white-space: nowrap; }
.la-evmatrix .is-split { border-left: 1px dashed var(--la-border-strong); padding-left: 12px; }
.la-evmatrix__group th { font: 600 11.5px var(--la-font-heading); color: var(--la-text-4); text-align: left; padding-bottom: 4px; }
.la-evmatrix__now { text-align: left !important; white-space: nowrap; padding-left: 14px !important; color: var(--la-text); font-weight: 500; }

/* Aanwezigheden: evalueren per aanwezige hond */
.la-attrow:not(.is-present) .la-attrow__eval { visibility: hidden; }
.la-attrow__eval { min-width: 128px; }
.la-attrow__eval.is-done { color: var(--la-green-text); }
@media (max-width: 720px) { .la-attrow .la-attrow__eval { grid-column: 3; grid-row: 1; } }
/* Strook in een dialoog: vier smalle cellen naast elkaar */
.la-dialog .la-strip { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
@media (max-width: 720px) { .la-dialog .la-strip { grid-template-columns: 1fr 1fr; } }

/* Ledenlijst en andere lijsten met werkbalk op smalle schermen. */
@media (max-width: 900px) {
    .la-col-hide-m { display: none; }
}
@media (max-width: 720px) {
    .la-toolbar > .la-flex { width: 100%; }
    .la-toolbar .la-input-group { width: 100%; }
    .la-toolbar .la-select { flex: 1; }
}

/* Profiel van een lid: foto in de avatar, hondenkaarten, berichten en documenten */
.la-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.la-card__head--wrap { flex-wrap: wrap; row-gap: 10px; }
.la-menu-wrap--block { display: flex; }
.la-menu-wrap--block > .la-menu { left: 0; right: 0; }
.la-identity__remark { white-space: pre-line; }
.la-dog-cards { gap: 12px; }
.la-dog-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--la-border); border-radius: var(--la-r-l); background: var(--la-surface); }
.la-dog-card.is-archived { background: var(--la-surface-2); }
.la-dog-card__name { color: inherit; font: 600 16px/1.3 var(--la-font-heading); }
.la-dog-card__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--la-text-3); margin-top: 6px; }
.la-message-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--la-border); color: inherit; }
.la-message-row:hover { background: var(--la-surface-2); text-decoration: none; }
.la-message-row:last-child { border-bottom: 0; }
.la-message-row__subject { font-weight: 500; overflow-wrap: anywhere; }
.la-message-row__meta { font-size: 12.5px; color: var(--la-text-3); white-space: nowrap; }
.la-doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid var(--la-border); }
.la-doc-row:last-child { border-bottom: 0; }
.la-doc-row > .la-i { color: var(--la-text-3); }
@media (max-width: 720px) {
    .la-dog-card { grid-template-columns: 48px minmax(0, 1fr); }
    .la-dog-card > .la-flex { grid-column: 1 / -1; }
    .la-doc-row > .la-grow { flex-basis: calc(100% - 40px); }
}

/* Inloggen, wachtwoord en tweestapsverificatie (ZODI-962), zoals auth/*.html */
.la-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--la-bg); }
.la-auth__side { background: var(--la-navy-deep); color: #fff; padding: 36px 44px; display: flex; flex-direction: column; gap: 28px; }
.la-auth__side .la-brand { padding: 0; }
.la-auth__side h1 { color: #fff; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; margin: 0; max-width: 16ch; }
.la-auth__side p { color: #c5c9e2; font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 42ch; }
.la-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.la-auth__points li { display: flex; gap: 10px; align-items: flex-start; color: #e3e6f3; font-size: 14px; }
.la-auth__points .la-i { color: var(--la-green); flex-shrink: 0; margin-top: 2px; }
.la-auth__foot { margin-top: auto; font-size: 12px; color: #8e93b5; display: flex; gap: 14px; flex-wrap: wrap; }
.la-auth__foot a { color: inherit; }
.la-auth__main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.la-auth__box { width: 100%; max-width: 440px; }
.la-auth__box h2 { font-size: 24px; letter-spacing: -.01em; margin: 0 0 6px; }
.la-auth__box .la-lead { font-size: 14.5px; color: var(--la-text-3); margin: 0 0 22px; }
.la-auth__form { display: grid; gap: 16px; }
.la-auth__alt { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--la-border); font-size: 13.5px; color: var(--la-text-3); display: grid; gap: 8px; }
.la-auth__lang { margin-top: 28px; display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--la-text-3); }
@media (max-width: 900px) {
    .la-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .la-auth__side { padding: 22px 20px; gap: 16px; }
    .la-auth__side h1 { font-size: 22px; }
    .la-auth__points, .la-auth__foot { display: none; }
    .la-auth__main { justify-content: flex-start; padding: 28px 16px 48px; }
}

/* Foutpagina's (ZODI-962), zoals errors/*.html */
.la-err { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--la-bg); }
.la-err__box { width: 100%; max-width: 560px; text-align: center; }
.la-err__code { font: 700 96px/1 var(--la-font-heading); letter-spacing: -.04em; color: var(--la-navy); position: relative; display: inline-block; }
:root[data-theme="dark"] .la-err__code { color: #fff; }
.la-err__code::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 8px; height: 10px; background: var(--la-green); opacity: .45; z-index: -1; border-radius: 4px; }
.la-err h1 { font-size: 24px; margin: 14px 0 8px; }
.la-err p { color: var(--la-text-2); font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 44ch; }
.la-err__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.la-err__foot { margin-top: 34px; font-size: 12.5px; color: var(--la-text-4); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.la-err__foot a { color: inherit; }

/* Ledenzone (ZODI-964): een kop met de club en het account, de onderdelen als tabbladen, geen zijbalk. */
.la-zone-body { background: var(--la-bg); min-height: 100vh; }
.la-zone { max-width: 1080px; margin: 0 auto; padding: 20px 24px 56px; }
.la-zone__head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.la-zone__brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: inherit; }
.la-zone__brand:hover { text-decoration: none; }
.la-zone__brand .la-public__shield { width: 40px; height: 46px; }
.la-zone__name { display: flex; flex-direction: column; min-width: 0; }
.la-zone__club { font: 600 18px/1.25 var(--la-font-heading); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-zone__sub { font-size: 12.5px; color: var(--la-text-3); }
.la-zone__nav { display: flex; margin-bottom: 22px; }
.la-zone__nav .la-segment__btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.la-zone-member { display: flex; align-items: center; gap: 14px; }
.la-zone-member + .la-dl { margin-top: 18px; }
.la-zone-vaccinations { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--la-text-2); }
.la-zone-vaccinations li { display: inline-flex; align-items: center; gap: 6px; }
.la-zone-vaccinations .la-i { color: var(--la-text-4); }
.la-zone-dog { grid-template-columns: 48px minmax(0, 1fr); }
.la-zone-course .la-pill { margin-left: 6px; }
.la-zone .la-idcard { max-width: 340px; }
/* Op de gsm een tabbalk: elk onderdeel even breed, het icoon boven het label, zodat niets buiten beeld scrolt. */
@media (max-width: 720px) {
    .la-zone { padding: 14px 16px 44px; }
    .la-zone__club { font-size: 16px; }
    .la-zone__brand .la-public__shield { width: 34px; height: 40px; }
    .la-zone__nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 16px; }
    .la-zone__nav .la-segment__btn {
        flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 52px; padding: 6px 2px;
        font-size: 11.5px; line-height: 1.2; white-space: normal; text-align: center;
    }
    .la-zone .la-card__foot--actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* Modules buiten het abonnement (ZODI-1020): grijs in het menu, de tabbladen, chips en schakelaars, met het abonnement
   waarin ze wel zitten, en een link naar de pagina op slot in plaats van te verdwijnen. */
.la-nav__item--locked { color: #7d83ab; }
.la-nav__item--locked .la-i { color: #5f6590; }
.la-nav__item--locked:hover { color: #c5c9e2; }
.la-nav__item--locked:hover .la-i { color: #9ea4c9; }
.la-nav__plan {
    margin-left: auto; display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .06); color: #9ea4c9; white-space: nowrap;
}
.la-nav__item .la-nav__plan .la-i { color: inherit; }
.la-tab--locked, .la-chip--locked, .la-segment__btn--locked, .la-btn--locked { color: var(--la-text-4); }
.la-tab--locked:hover, .la-chip--locked:hover, .la-segment__btn--locked:hover, .la-btn--locked:hover { color: var(--la-text-3); text-decoration: none; }
.la-chip--locked { border-style: dashed; }
.la-tab__plan, .la-chip__plan, .la-segment__plan, .la-btn__plan {
    display: inline-flex; align-items: center;
    font: 600 11px/1 var(--la-font-body); padding: 3px 7px; border-radius: 999px;
    background: var(--la-surface-2); color: var(--la-text-3); white-space: nowrap;
}
.la-segment__plan { background: var(--la-surface-3); }
.la-btn--locked .la-btn__plan { margin-left: 2px; }
.la-locked__hint { text-align: center; margin: 0 0 24px; padding: 0 20px; }
/* Automatische mails; de mail zelf blijft wit, ook in het donkere thema. */
.la-table__group td { background: var(--la-surface-2); font: 600 12px var(--la-font-heading); text-transform: uppercase; letter-spacing: .04em; color: var(--la-text-3); padding: 8px 16px; }
.la-me { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.la-me > form, .la-me > aside { gap: 14px; }
.la-me__bar { gap: 12px; padding: 12px 16px; }
.la-me__langs { display: flex; gap: 6px; flex-wrap: wrap; }
.la-me__langs .la-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.la-me__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--la-text-4); }
.la-me__dot.is-own { background: var(--la-green); }
.la-me__subject { height: auto; min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.la-me__canvas { background: #e9ebf2; border: 1px solid var(--la-border); border-radius: var(--la-r-l); padding: 22px 16px; overflow-x: auto; }
:root[data-theme="dark"] .la-me__canvas { background: #0f1226; }
.la-me__mail { max-width: 600px; margin: 0 auto; }
.la-me .la-blk { position: relative; outline: 1px dashed transparent; outline-offset: 2px; border-radius: 8px; transition: outline-color .12s; }
.la-me .la-blk--edit { min-height: 1.6em; }
.la-me .la-blk--edit:hover, .la-me [data-me-field]:hover { outline-color: #b8c0cc; }
.la-me [data-me-field]:focus { outline: 2px solid var(--la-green-dark); }
.la-me .la-blk--locked:hover { outline-color: #e4e7ee; }
.la-me .la-blk--edit:empty::before { content: attr(data-me-label); color: #9aa4b5; }
.la-me [data-me-label]:focus::after, .la-me .la-blk--locked[data-locked]:hover::after {
    content: attr(data-me-label); position: absolute; right: 6px; top: -10px; font: 500 10.5px var(--la-font-body);
    background: #fff; color: #6a7c92; border: 1px solid #e4e7ee; border-radius: 999px; padding: 1px 7px; white-space: nowrap; z-index: 1;
}
.la-me .la-blk--locked[data-locked]:hover::after { content: attr(data-locked); }
/* De tekst zoals MessageHtml::forMail hem in de mail opmaakt (MAIL_STYLES). De basisstijl van de app zet de marge van
   een alinea op 0, waardoor de tekst in de editor tegen de vaste gegevens plakte en zonder witruimte tussen de alinea's
   stond. */
.la-me__mail [data-me-field] p { margin: 0 0 14px; }
.la-me__mail [data-me-field] h1 { margin: 0 0 12px; font: 600 24px/1.3 'IBM Plex Sans', Arial, sans-serif; color: #14133b; letter-spacing: normal; }
.la-me__mail [data-me-field] h2 { margin: 22px 0 10px; font: 600 20px/1.3 'IBM Plex Sans', Arial, sans-serif; color: #14133b; letter-spacing: normal; }
.la-me__mail [data-me-field] h3 { margin: 18px 0 8px; font: 600 16px/1.4 'IBM Plex Sans', Arial, sans-serif; color: #14133b; letter-spacing: normal; }
.la-me__mail [data-me-field] blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid #00c853; color: #3d4a5c; }
.la-me__mail [data-me-field] ul, .la-me__mail [data-me-field] ol { margin: 0 0 14px; padding-left: 22px; }
.la-me__mail [data-me-field] li { margin: 0 0 4px; }
.la-me__mail [data-me-field] a { color: #00873a; text-decoration: underline; }
.la-me__mail [data-me-field] hr { border: 0; border-top: 1px solid #e4e7ee; margin: 20px 0; }
.la-me__mail [data-me-field] img { max-width: 100%; height: auto; display: inline; }
.la-var { display: inline-block; padding: 0 6px; border-radius: 6px; background: #e9f9ee; color: #0b6b2c; border: 1px solid #9fdcb5; font: 500 13px var(--la-font-body); line-height: 1.5; white-space: nowrap; user-select: all; }
.la-var::before { content: '{'; opacity: .6; }
.la-var::after { content: '}'; opacity: .6; }
.is-preview .la-var { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; }
.is-preview .la-var::before, .is-preview .la-var::after { content: none; }
.la-me__vars { display: grid; gap: 4px; padding: 8px; }
.la-me__vars button { all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.la-me__vars button:hover { background: var(--la-surface-2); }
.la-me__vars button:disabled { cursor: default; opacity: .6; }
.la-me__vars code { font-size: 12px; color: var(--la-green-text); }
.la-me__vars small { color: var(--la-text-3); text-align: right; }
.la-me__about { gap: 8px; color: var(--la-text-2); }
@media (max-width: 1024px) { .la-me { grid-template-columns: 1fr; } }