/*
 * UC-Dashboard (#280) en UC-Accountinstellingen (#282): de visuele vertaling van de goedgekeurde HTML-referentie
 * docs/previews/athene-dashboard-accountinstellingen.html naar de bestaande MudBlazor-appshell. Maten, kleuren en
 * rasterverhoudingen komen letterlijk uit de referentie; alle klassen hebben het voorvoegsel dash- zodat niets buiten
 * het dashboard en de accountinstellingen wordt geraakt.
 */
:root {
    /* Gevoed door de appshell (Theme/AtheneKleurThemas.CssVariabelen); de fallbacks zijn de referentiewaarden. */
    --dash-navy: var(--athene-primary, #203b58);
    --dash-ink: var(--athene-ink, #243b55);
    --dash-muted: var(--athene-muted, #708198);
    --dash-cream: var(--athene-bg, #f9f8f5);
    --dash-surface: var(--athene-surface, #ffffff);
    --dash-line: var(--athene-line, #e8ebed);
    --dash-soft: var(--athene-soft, #f7fafb);
    --dash-shadow: 0 8px 28px #233b5810;
}

/* Warme off-white ondergrond, alleen op pagina's die het dashboard of de accountinstellingen tonen. */
.mud-main-content:has(.athene-dash),
.mud-main-content:has(.athene-account) {
    background: var(--dash-cream);
    min-height: 100vh;
}

.athene-dash {
    container-type: inline-size;
    container-name: dashboard;
    color: var(--dash-ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 21px;
}

.dash-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dash-muted);
    font-weight: 700;
}

.athene-dash h1 {
    font-size: 1.625rem;
    font-weight: 750;
    margin: 3px 0;
    color: var(--dash-ink);
}

.dash-ster {
    font-weight: 400;
    color: var(--dash-muted);
}

.dash-sub {
    margin: 0;
    color: var(--dash-muted);
}

.dash-muted {
    font-size: 0.75rem;
    color: var(--dash-muted);
}

/*
 * Drie kolommen (1.6fr 1fr 1fr) en rijen van vaste hoogte; ieder venster staat op zijn opgeslagen positie en afmeting
 * uit Accountinstellingen → Dashboard aanpassen (#282). Overal 16px tussen aangrenzende vensters (#280); vensters zijn
 * niet uitgerekt over een gedeelde rijhoogte, lange inhoud scrollt binnen het venster. De rijhoogte is in rem, zodat
 * een grotere tekstgrootte (Leesbaarheid) de vensters mee laat groeien.
 */
.dash-board {
    --dash-rij: 3.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: var(--dash-rij);
    gap: 16px;
}

.dash-board > .dash-tile {
    grid-column: var(--dash-kolom, auto) / span var(--dash-breedte, 1);
    grid-row: var(--dash-rijstart, auto) / span var(--dash-hoogte, 4);
    display: flex;
    flex-direction: column;
}

.dash-board > .dash-tile > .dash-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.dash-tile {
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    border-radius: 17px;
    box-shadow: var(--dash-shadow);
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.dash-tilehead {
    padding: 15px 17px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dash-tiletitle {
    font-weight: 750;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9375rem;
}

.dash-symbol {
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
}

.dash-body {
    padding: 0 17px 18px;
}

/* Vensterkoppen per venster (niet per kleur), zodat een thema als Lollipop zijn pastels kan verdelen. */
.dash-tile { --dash-tile: var(--athene-tile-day, #edf3fc); }
.dash-tile.day { --dash-tile: var(--athene-tile-day, #edf3fc); }
.dash-tile.agenda { --dash-tile: var(--athene-tile-agenda, #f2ecfa); }
.dash-tile.jarigen { --dash-tile: var(--athene-tile-jarigen, #fcf0e8); }
.dash-tile.todo { --dash-tile: var(--athene-tile-todo, #ecf6ef); }
.dash-tile.acties { --dash-tile: var(--athene-tile-acties, #f2ecfa); }
.dash-tile .dash-tilehead { background: var(--dash-tile); }
.dash-tile .dash-symbol { background: color-mix(in srgb, var(--dash-tile) 82%, var(--dash-navy)); }

.dash-small.mud-button-root {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-width: 0;
    min-height: 0;
    line-height: 1.2;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 8px;
    color: var(--dash-navy);
    text-transform: none;
}

.dash-tag {
    background: var(--athene-accent, #e7f2ea);
    border-radius: 20px;
    padding: 5px 9px;
    font-size: 0.75rem;
    color: var(--athene-accent-text, #4a7860);
}

.dash-noitems {
    padding: 10px;
    background: var(--dash-soft);
    border-radius: 8px;
    color: var(--dash-muted);
    font-size: 0.75rem;
}

.dash-fout {
    background: #fdf1ef;
    color: #9a4b43;
}

/* Mijn dagplanning */

.dash-daydate {
    margin: 5px 0 14px;
}

.dash-daylist {
    position: relative;
    padding: 4px 0 0;
}

.dash-event {
    display: flex;
    gap: 15px;
    position: relative;
    padding: 9px 5px 9px 12px;
    border-left: 2px solid var(--dash-line);
    margin-left: 7px;
    min-height: 63px;
    cursor: pointer;
    border-radius: 0 9px 9px 0;
}

.dash-event:hover { background: var(--dash-soft); }
.dash-event:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }
.dash-event.break { background: var(--athene-event-break, #f0f8f2); }
.dash-event.meet { background: var(--athene-event-meet, #fcf1e9); }

.dash-time {
    color: var(--dash-muted);
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 650;
    /* In em, zodat de tijdkolom bij grotere tekst mee groeit en de titel niet overlapt. */
    min-width: 6.2em;
    flex-shrink: 0;
}

.dash-eventbody { min-width: 0; }
.dash-eventtext { font-weight: 700; overflow-wrap: anywhere; }

/* Smal venster of grote tekst: de tijd boven de titel, zodat niets overlapt of wordt afgekapt. */
@container dashboard (max-width: 30em) {
    .dash-event { flex-direction: column; gap: 2px; }
}

.dash-detail {
    font-size: 0.6875rem;
    color: var(--dash-muted);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* De tijdspijl: alleen een klokpositie, nooit een status van de les. */
.dash-nowmark {
    height: 2px;
    background: #d37c73;
    position: absolute;
    left: -9px;
    right: 0;
    z-index: 3;
    pointer-events: none;
}

.dash-nowmark::before {
    content: '➤';
    position: absolute;
    left: -8px;
    top: -13px;
    color: #d37c73;
    font-size: 1.125rem;
}

.dash-nowmark span {
    position: absolute;
    right: 0;
    top: -19px;
    background: var(--dash-surface);
    color: var(--athene-ink, #243b55);
    border: 1px solid #d37c73;
    font-size: 0.6875rem;
    padding: 1px 5px;
    border-radius: 5px;
}

/* Agenda */
.dash-weekbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 7px 0 10px;
}

.dash-weekknop.mud-icon-button {
    background: var(--dash-soft);
    border-radius: 8px;
    padding: 4px;
}

.dash-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dash-weekday {
    background: var(--dash-soft);
    border: 1px solid var(--dash-line);
    border-radius: 8px;
    text-align: center;
    padding: 7px 1px;
    font-size: 0.6875rem;
}

.dash-weekday.selected {
    background: var(--athene-selected, #dfd4f4);
    border-color: color-mix(in srgb, var(--athene-selected, #dfd4f4) 80%, var(--dash-navy));
}

.dash-weekday .n {
    font-weight: 750;
    font-size: 0.8125rem;
}

.dash-appt {
    font-size: 0.75rem;
    margin-top: 11px;
    background: var(--dash-soft);
    padding: 10px;
    border-radius: 9px;
    cursor: pointer;
}

.dash-appt:hover { background: color-mix(in srgb, var(--dash-soft) 85%, var(--dash-navy)); }
.dash-appt:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

/* Jarigen */
.dash-listrow {
    display: flex;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--dash-line);
    align-items: flex-start;
}

.dash-listrow:last-child { border: 0; }

.dash-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #eebaa2;
    flex-shrink: 0;
    margin-top: 7px;
}

/* Mijn to-do */
.dash-todo {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    padding: 3px 0;
    border-bottom: 1px solid var(--dash-line);
}

.dash-todo > span { padding-top: 9px; }

.dash-todo .mud-checkbox { margin-left: -8px; }

.dash-date {
    font-size: 0.6875rem;
    color: var(--dash-muted);
}

.dash-done {
    text-decoration: line-through;
    color: var(--dash-muted);
}

/* Snelle acties */
.dash-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 5px;
}

.dash-action {
    display: block;
    border: 1px solid var(--dash-line);
    border-radius: 11px;
    background: var(--dash-surface);
    padding: 12px 5px;
    text-align: center;
    color: var(--dash-navy);
    font-size: 0.6875rem;
    min-height: 74px;
    text-decoration: none;
}

.dash-action span {
    display: block;
    font-size: 1.3125rem;
    margin-bottom: 3px;
}

a.dash-action:hover { background: var(--dash-soft); }
a.dash-action:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

.dash-action-uit {
    opacity: .45;
    cursor: not-allowed;
}

.dash-actionchoices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: 330px;
    overflow: auto;
    margin-top: 12px;
}

.dash-choice {
    border: 1px solid var(--dash-line);
    border-radius: 9px;
    font-size: 0.75rem;
}

/* Accountinstellingen */
.dash-settingsheader { margin-bottom: 24px; }

.dash-settingsgrid {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(240px, 1fr);
    gap: 18px;
    align-items: start;
}

.dash-settingcard,
.dash-settingaside {
    border-radius: 19px;
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow);
    padding: 22px;
}

.dash-settingaside { background: var(--athene-tile-agenda, #f0eafa); }
.dash-settingaside h3 { margin-top: 0; }
.dash-settingaside p { color: var(--dash-muted); }

.dash-settingscardhead {
    display: flex;
    gap: 14px;
    border-bottom: 1px solid var(--dash-line);
    padding-bottom: 15px;
    align-items: flex-start;
}

.dash-settingscardhead h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.dash-settingssymbol {
    background: var(--athene-tile-day, #e5effb);
    border-radius: 13px;
    padding: 12px;
    font-size: 1.375rem;
    line-height: 1;
}

.dash-settingsrow {
    padding: 14px 0;
    border-bottom: 1px solid var(--dash-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dash-settingstools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-settingstools .mud-select { width: 130px; }

.dash-settingsfooter {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.dash-note {
    padding: 11px;
    color: var(--dash-muted);
    background: var(--dash-soft);
    border-radius: 9px;
    font-size: 0.75rem;
}

/*
 * Weinig ruimte of grote tekst (11b, contract F): de vensters vloeien naar twee kolommen of één kolom, kolom voor kolom
 * in de volgorde van de indeling (de DOM staat per kolom van boven naar beneden). Iedere kaart sluit met 16px direct
 * aan op de vorige in dezelfde kolom en houdt haar eigen hoogte: geen gedeelde rijhoogte, dus geen uitgerekte kaart
 * of gat naast een hoge dagplanning (#280, aansluitende kaarten). Dit verandert alleen de weergave, nooit de opgeslagen
 * indeling. De grens staat in em van het dashboard, zodat ook tekstvergroting de reflow activeert.
 */
@container dashboard (max-width: 70em) {
    .dash-board { display: block; columns: 2; column-gap: 16px; }
    .dash-board > .dash-tile { break-inside: avoid; margin: 0 0 16px; }
    .dash-board > .dash-tile > .dash-body { max-height: 32rem; }
}

@container dashboard (max-width: 46em) {
    .dash-board { columns: 1; }
}

@media (max-width: 1100px) {
    .dash-settingsgrid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .athene-dash h1 { font-size: 1.4375rem; }
    .dash-settingsrow { align-items: flex-start; flex-direction: column; }
    .dash-settingstools { width: 100%; }
}

.dash-choice .mud-typography {
    font-size: 0.75rem;
}

.dash-settingstools .mud-checkbox .mud-typography {
    font-size: 0.75rem;
    color: var(--dash-navy);
}

/* Onderdelenmenu van Accountinstellingen. */
.dash-settingsnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.dash-settingsnav a {
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    color: var(--dash-ink);
    text-decoration: none;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.dash-settingsnav a.actief {
    background: var(--dash-navy);
    border-color: var(--dash-navy);
    color: var(--athene-primary-text, #fff);
    font-weight: 650;
}

.dash-settingsnav a:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

/* Gebruikerskleuren: twaalf themakeuzes. */
.dash-themas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.dash-themakeuze {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    background: var(--dash-surface);
    color: var(--dash-ink);
    cursor: pointer;
    text-align: left;
    font: inherit;
    min-height: 44px;
}

.dash-themakeuze.gekozen {
    border: 2px solid var(--dash-navy);
    padding: 9px;
}

.dash-themakeuze:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

.dash-themakleuren {
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--dash-line);
}

.dash-themakleuren span { flex: 1; }

.dash-themanaam { font-weight: 650; }

.dash-tag-klein {
    padding: 2px 7px;
    font-size: 0.6875rem;
}

/* Live voorbeeld (alleen in Accountinstellingen). */
.dash-voorbeeld {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--athene-line);
    background: var(--athene-bg);
    color: var(--athene-ink);
    font-size: 0.6875rem;
    margin-top: 10px;
}

.dash-voorbeeld .vb-balk {
    background: var(--athene-nav);
    color: var(--athene-nav-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-weight: 700;
}

.dash-voorbeeld .vb-init {
    background: var(--athene-accent);
    color: var(--athene-accent-text);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 0.5625rem;
}

.dash-voorbeeld .vb-romp { display: flex; min-height: 150px; }

.dash-voorbeeld .vb-nav {
    width: 34%;
    background: var(--athene-surface);
    border-right: 1px solid var(--athene-line);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dash-voorbeeld .vb-navitem { padding: 4px 6px; border-radius: 6px; }

.dash-voorbeeld .vb-navitem.actief {
    background: color-mix(in srgb, var(--athene-primary) 14%, var(--athene-surface));
    color: var(--athene-ink);
    font-weight: 700;
}

.dash-voorbeeld .vb-inhoud { flex: 1; padding: 8px; min-width: 0; }
.dash-voorbeeld .vb-groet { font-weight: 750; font-size: 0.8125rem; margin-bottom: 6px; }
.dash-voorbeeld .vb-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.dash-voorbeeld .vb-tegel {
    background: var(--athene-surface);
    border: 1px solid var(--athene-line);
    border-radius: 8px;
    overflow: hidden;
}

.dash-voorbeeld .vb-kop { padding: 4px 6px; font-weight: 700; }
.dash-voorbeeld .vb-regel { padding: 3px 6px; color: var(--athene-muted); }
.dash-voorbeeld .vb-regel.pauze { background: var(--athene-event-break); }

.dash-voorbeeld .vb-tag {
    background: var(--athene-accent);
    color: var(--athene-accent-text);
    border-radius: 10px;
    padding: 1px 6px;
}

.dash-voorbeeld .vb-knop {
    display: inline-block;
    margin: 4px 6px 6px;
    background: var(--athene-primary);
    color: var(--athene-primary-text);
    border-radius: 6px;
    padding: 3px 8px;
    font-weight: 600;
}

/* Dashboardafbeelding (#282): achtergrond van de bestaande kop, even breed als de vensters. Padding plus even grote
   negatieve marge houdt de hoogte gelijk, dus geen extra hoogte en geen verschuiving van de vijf vensters. Een verloop in de
   achtergrondkleur houdt de begroeting leesbaar; laadt het beeld niet, dan blijft alleen dat rustige vlak over. */
.dash-head.dash-head-banner,
.dash-bannervoorbeeld {
    position: relative;
    border-radius: 17px;
    background-color: var(--dash-cream);
    background-image:
        linear-gradient(90deg,
            color-mix(in srgb, var(--dash-cream) 94%, transparent) 0%,
            color-mix(in srgb, var(--dash-cream) 82%, transparent) 38%,
            color-mix(in srgb, var(--dash-cream) 20%, transparent) 75%,
            transparent 100%),
        var(--dash-banner);
    background-size: 100% 100%, cover;
    background-position: 0 0, var(--dash-banner-pos, 50% 50%);
    background-repeat: no-repeat;
}

.dash-head.dash-head-banner {
    padding: 14px 18px;
    margin: -14px 0 7px;
}

@media (max-width: 800px) {
    .dash-head.dash-head-banner,
    .dash-bannervoorbeeld {
        background-image:
            linear-gradient(90deg,
                color-mix(in srgb, var(--dash-cream) 92%, transparent) 0%,
                color-mix(in srgb, var(--dash-cream) 72%, transparent) 100%),
            var(--dash-banner);
    }
}

/* Dashboardafbeelding-instellingen. */
.dash-sectiekop {
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 18px 0 8px;
    color: var(--dash-ink);
}

.dash-bannervoorbeeld {
    padding: 14px 18px;
    border: 1px solid var(--dash-line);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.dash-bannervoorbeeld.dash-bannervoorbeeld-standaard { cursor: default; }
.dash-bannervoorbeeld:active { cursor: grabbing; }
.dash-bannervoorbeeld:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

.dash-voorbeeldgroet {
    font-size: 1.625rem;
    font-weight: 750;
    margin: 3px 0;
    color: var(--dash-ink);
}

.dash-focusbediening {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dash-focusbediening > span { flex: 1 1 260px; }

.dash-afbeeldingen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.dash-afbeeldingkeuze {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    background: var(--dash-surface);
    color: var(--dash-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.dash-afbeeldingkeuze.gekozen {
    border: 2px solid var(--dash-navy);
    padding: 7px;
}

.dash-afbeeldingkeuze:focus-visible,
.dash-afbeeldingknop:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

.dash-afbeeldingkeuze img {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--dash-soft);
}

.dash-afbeeldingknop {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dash-uploadbalk {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0;
}

button.dash-action {
    width: 100%;
    font: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
}

button.dash-action:hover { background: var(--dash-soft); }
button.dash-action:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

/*
 * Accountinstellingen (#282) volgens docs/previews/athene-accountinstellingen.html (commit 696487e): één smalle kolom,
 * vier rubriekkoppen en tien afgeronde uitklaponderdelen. Kleuren uit het actieve thema (--athene-*).
 */
.athene-account {
    container-type: inline-size;
    container-name: account;
    max-width: 830px;
    margin: 0 auto;
    padding: 30px 30px 48px;
    color: var(--dash-ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.athene-account h1 {
    font-size: 1.6875rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--dash-ink);
}

.ak-sub {
    color: var(--dash-muted);
    margin: 0 0 30px;
}

.ak-rubriek {
    font-size: 0.75rem;
    color: var(--dash-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 26px 0 10px;
    font-weight: 600;
}

.ak-onderdeel {
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    margin: 8px 0;
}

.ak-onderdeel > summary {
    padding: 16px 18px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 12px;
}

.ak-onderdeel > summary:focus-visible {
    outline: 3px solid var(--dash-navy);
    outline-offset: 2px;
}

.ak-onderdeel > section {
    padding: 4px 18px 20px;
}

.ak-concept {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 8px;
    background: var(--athene-accent, #e9e2f4);
    color: var(--athene-accent-text, #203b58);
    font-size: 0.6875rem;
    font-weight: 600;
}

.ak-acties {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 16px 0 0;
}

.ak-acties .mud-button-root { text-transform: none; }

.ak-veld { max-width: 280px; }

/* Twee tabbladen als knoppen, zoals in de preview; ze lopen mee naar een volgende regel op een smal scherm. */
.ak-tabknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }

.ak-tab {
    font: inherit;
    padding: 9px 14px;
    border-radius: 9px;
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    color: var(--dash-navy);
    cursor: pointer;
}

.ak-tab.actief { background: var(--dash-navy); color: var(--athene-primary-text, #ffffff); border-color: var(--dash-navy); }
.ak-tab:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }

/* Gebruikerskleuren: radiobuttons met naam en alle paletkleuren, twee kolommen waar het past. */
.ak-paletten {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ak-paletten legend { margin-bottom: 10px; padding: 0; }

.ak-palet {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--dash-line);
    border-radius: 10px;
    padding: 12px;
    margin: 0;
    cursor: pointer;
}

.ak-palet:has(input:checked) {
    border-color: var(--dash-navy);
    background: var(--dash-soft);
    box-shadow: inset 0 0 0 1px var(--dash-navy);
}

.ak-palet:has(input:focus-visible) {
    outline: 3px solid var(--dash-navy);
    outline-offset: 2px;
}

.ak-palet input { accent-color: var(--dash-navy); margin: 0; width: 18px; height: 18px; }
.ak-palet strong { font-weight: 500; }
.ak-paletinhoud { min-width: 0; display: block; }

.ak-staal {
    display: flex;
    height: 28px;
    overflow: hidden;
    border-radius: 5px;
    margin-top: 8px;
    border: 1px solid color-mix(in srgb, var(--dash-line) 70%, transparent);
}

.ak-staal span { flex: 1; min-width: 0; }

@container account (max-width: 550px) {
    .ak-paletten { grid-template-columns: minmax(0, 1fr); }
    .ak-profiel { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
    .ak-profiel dd { margin-bottom: 8px; }
}

/* De pagina is zelf de container; haar eigen marge volgt daarom het venster (16px gutter op een telefoon). */
@media (max-width: 600px) {
    .athene-account { padding: 20px 16px 40px; }
}

.athene-account h1,
.ak-profiel dd,
.ak-onderdeel > summary { overflow-wrap: anywhere; hyphens: auto; }

/* Leesbaarheid */
.ak-schuif label { display: flex; gap: 8px; margin: 9px 0; }
.ak-schuif output { color: var(--dash-muted); }
.ak-schuif input[type=range] { width: min(100%, 420px); accent-color: var(--dash-navy); }
.ak-tekstvoorbeeld { margin: 10px 0 0; line-height: 1.4; }

/* Meldingen en Hulp */
.ak-switchkop { margin: 4px 0 6px; }
.ak-switch { display: flex; }

.ak-kaarten { display: grid; gap: 12px; }

.ak-kaart {
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    padding: 14px 16px;
}

.ak-kaart h3 { font-size: 0.9375rem; margin: 6px 0 4px; }
.ak-kaart p { margin: 0 0 8px; }
.ak-kaartkop { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 1px solid var(--dash-line); }
.ak-kaartkop strong { font-size: 1rem; }

.ak-label { display: block; margin: 8px 0 4px; font-weight: 600; }

.ak-invoer {
    width: min(100%, 360px);
    padding: 9px;
    border: 1px solid var(--dash-line);
    border-radius: 8px;
    font: inherit;
    color: inherit;
    background: var(--dash-surface);
}

.ak-invoer:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 1px; }
.ak-fout { color: #b3261e; }
.ak-invoer-fout { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.ak-fouttekst { color: #b3261e; margin-top: 4px; }

/* Persoonlijk profiel (alleen lezen) */
.ak-profiel { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 4px 0 0; }
.ak-profiel dt { color: var(--dash-muted); }
.ak-profiel dd { margin: 0; }

/* Dashboard aanpassen: vijf checkboxen boven de visuele editor. */
.ak-vensterkeuze { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.ak-editoruitleg { margin: 0 0 10px; }

/* Op een smal scherm of bij grote tekst blijft het raster bruikbaar: het schuift binnen het onderdeel. */
.ak-editorschuif { overflow-x: auto; padding-bottom: 4px; }

.ak-editor {
    --ak-rij: 26px;
    min-width: 34rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(var(--ak-rijen, 10), var(--ak-rij));
    grid-auto-rows: var(--ak-rij);
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: var(--dash-cream);
    border: 1px solid var(--dash-line);
    user-select: none;
}

.ak-cel { border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--dash-line) 80%, var(--dash-muted)); opacity: .55; }

.ak-editkaart {
    --dash-tile: var(--athene-tile-day, #edf3fc);
    position: relative;
    z-index: 1;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--dash-shadow);
    cursor: grab;
    touch-action: none;
    min-width: 0;
}

.ak-editkaart.day { --dash-tile: var(--athene-tile-day, #edf3fc); }
.ak-editkaart.agenda { --dash-tile: var(--athene-tile-agenda, #f2ecfa); }
.ak-editkaart.jarigen { --dash-tile: var(--athene-tile-jarigen, #fcf0e8); }
.ak-editkaart.todo { --dash-tile: var(--athene-tile-todo, #ecf6ef); }
.ak-editkaart.acties { --dash-tile: var(--athene-tile-acties, #f2ecfa); }

.ak-editkaart:focus-visible { outline: 3px solid var(--dash-navy); outline-offset: 2px; }
.ak-editkaart.ak-doel { outline: 3px dashed var(--dash-navy); outline-offset: 2px; }
.ak-editkaart.ak-geweigerd { animation: ak-schud .35s; box-shadow: 0 0 0 3px #b3261e; }

@keyframes ak-schud {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .ak-editkaart.ak-geweigerd { animation: none; }
}

.ak-editkaart.ak-sleept { z-index: 5; cursor: grabbing; opacity: .85; box-shadow: 0 14px 30px #233b5830; }

.ak-editkop {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--dash-tile);
    color: var(--athene-tile-text, var(--dash-ink));
    overflow-wrap: anywhere;
}

.ak-editkop .dash-symbol { width: 20px; height: 20px; border-radius: 6px; font-size: 0.6875rem; background: color-mix(in srgb, var(--dash-tile) 82%, var(--dash-navy)); }

.ak-editinhoud { padding: 8px 10px; display: grid; gap: 6px; }
.ak-editregel { display: block; height: 6px; border-radius: 3px; background: var(--dash-line); }

.ak-greep { position: absolute; z-index: 2; }
.ak-greep-e { top: 0; right: 0; width: 12px; height: 100%; cursor: ew-resize; }
.ak-greep-s { left: 0; bottom: 0; height: 12px; width: 100%; cursor: ns-resize; }
.ak-greep-se {
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--dash-muted) 50% 58%, transparent 58% 70%, var(--dash-muted) 70% 78%, transparent 78%);
}

.ak-status { min-height: 1.5em; margin-top: 8px; color: var(--dash-ink); font-weight: 600; }
.ak-vensterkeuze .mud-typography { font-size: 0.875rem; }
.ak-donkernoot { margin: -4px 0 10px; color: var(--dash-muted); }

/* Snelle acties kiezen: de gekozen volgorde. */
.dash-actievolgorde { margin: 10px 0 4px; padding-left: 22px; }
.dash-actievolgorde li { display: flex; align-items: center; gap: 4px; }
.dash-actievolgorde li span { flex: 1; }

/* Hulppagina (#282 contract E). */
.athene-hulp { max-width: 980px; }
.dash-hulpgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.dash-hulpchat, .dash-hulpuitleg {
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 10px;
    align-content: start;
}
.dash-hulpuitleg h2 { font-size: 1rem; margin: 0; }
.dash-hulpuitleg ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.dash-chatbericht { padding: 10px 12px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; }
.dash-chatbericht.assistent { background: var(--athene-tile-day, #edf3fc); justify-self: start; }
.dash-chatbericht.gebruiker { background: var(--athene-tile-todo, #ecf6ef); justify-self: end; }
.dash-chatinvoer { display: grid; gap: 8px; justify-items: end; }
.dash-chatinvoer .mud-input-control { width: 100%; }

@container dashboard (max-width: 52em) {
    .dash-hulpgrid { grid-template-columns: minmax(0, 1fr); }
}

/* #280 stap 10: een bronpagina in een dashboarddialoog. De dialoog laat de bronpagina haar eigen breedte gebruiken en
   scrolt zelf; op een smal scherm vult hij het scherm (geen horizontale paginascroll). */
.dash-bronfunctie .dash-bronfunctie-inhoud {
    max-height: calc(100vh - 12rem);
    overflow: auto;
}

@media (max-width: 599.98px) {
    .mud-dialog.dash-bronfunctie { margin: 0; max-height: 100vh; width: 100vw; max-width: 100vw; border-radius: 0; }
}