html, body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--mud-palette-background);
}

/* ---------- App-bar ---------- */
.app-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-title {
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobiel: de app-bar bestaat uit losse elementen; beeldmerk en naam blijven verborgen. Breed scherm: zie verderop. */
.app-bar-inner {
    display: contents;
}

.app-brand {
    display: none;
}

/* ---------- Paginakop ---------- */
/* Mobiel staat de titel in de app-bar; de h1 blijft alleen voor schermlezers en FocusOnNavigate (zelfde regels als .sr-only). */
.page-title {
    outline: none;
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-back {
    display: none;
}

/* Alleen voor schermlezers (h1 staat al in de app-bar) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* MudBlazor-uitklappaneel: titel mag krimpen zodat het bedrag rechts niet buiten beeld valt */
.mud-expand-panel-header .mud-expand-panel-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
}

/* ---------- Onder-navigatie (mobiel) ---------- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 !important;
}

.bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: color 120ms ease;
}

.bottom-nav-item.active {
    color: var(--mud-palette-primary);
}

.bottom-nav-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.bottom-nav-label {
    font-size: 0.75rem;
    line-height: 1.1;
}

.bottom-nav-item.active .bottom-nav-label {
    font-weight: 600;
}

/* Ruimte onder de content zodat de laatste kaart boven de navigatie uitkomt */
.main-content {
    padding-bottom: 72px;
}

/* ---------- Navigatie in de app-bar (brede schermen) ---------- */
/* Tabbladen op een lichte balk: gedempte tekst, actieve tab in de primaire kleur met een accentstreep onderaan. */
.top-nav {
    display: none;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
}

.top-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 10px 10px 0 0;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color 120ms ease, background-color 120ms ease;
}

.top-nav-item::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background-color 120ms ease;
}

.top-nav-item:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.top-nav-item.active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.top-nav-item.active::after {
    background: var(--mud-palette-primary);
}

.top-nav-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ---------- Pagina-indeling: één kolom op mobiel, twee kolommen op brede schermen ---------- */
/* Tot 960 px: contentbreedte als op een telefoon (max 600 px), daarboven 960 px met twee kolommen. */
@media (max-width: 959.98px) {
    .page-container {
        max-width: 600px !important;
    }
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.two-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.two-col > .col-main,
.two-col > .col-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.seg-toggle-desktop {
    display: none;
}

.cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 960px) {
    .bottom-nav {
        display: none;
    }

    .top-nav {
        display: flex;
    }

    .main-content {
        padding-bottom: 24px;
    }

    .page-container {
        padding-top: 24px !important;
    }

    .two-col {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 24px;
        align-items: start;
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .seg-toggle-mobile {
        display: none;
    }

    .seg-toggle-desktop {
        display: block;
    }

    .hero-amount {
        font-size: 2.75rem;
    }
}

/* Segmenten op Ik/Partner. Mobiel: één segment tegelijk. Breed: overzicht links, posten of jaar rechts. */
@media (max-width: 959.98px) {
    .budget-view[data-segment="overview"] .seg-items,
    .budget-view[data-segment="overview"] .seg-year,
    .budget-view[data-segment="items"] .seg-overview,
    .budget-view[data-segment="items"] .seg-year,
    .budget-view[data-segment="year"] .seg-overview,
    .budget-view[data-segment="year"] .seg-items {
        display: none;
    }
}

@media (min-width: 960px) {
    .budget-view .seg-btn-overview {
        display: none;
    }

    .budget-view[data-segment="year"] .seg-items,
    .budget-view:not([data-segment="year"]) .seg-year {
        display: none;
    }

    /* Zonder gekozen segment (overzicht) tonen we rechts de posten; markeer die knop als actief. */
    .budget-view[data-segment="overview"] .seg-btn-items {
        background-color: #4f46e5 !important;
    }

    .budget-view[data-segment="overview"] .seg-btn-items .mud-button-label {
        color: #fff !important;
    }
}

/* ---------- Zichtbare focus voor toetsenbordgebruik ---------- */
/* MudBlazor toont focus subtiel (ripple/achtergrond); een duidelijke ring op knoppen, keuzes, paneelkoppen en velden. */
.mud-button-root:focus-visible,
.mud-toggle-item:focus-visible,
.mud-expand-panel-header:focus-visible,
.mud-chip:focus-visible,
.mud-switch-input:focus-visible + .mud-switch-track,
.mud-input-control:has(input:focus-visible) .mud-input-outlined-border {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.mud-appbar .mud-button-root:focus-visible {
    outline-color: #fff;
}

/* ---------- Tikdoelen ---------- */
/* Kleine icoonknoppen behouden hun compacte uiterlijk maar krijgen een tikvlak van 44 px op touch-schermen. */
@media (pointer: coarse) {
    .mud-icon-button.mud-icon-button-size-small,
    .mud-button-root.mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Keuzeknoppen (Maand/Jaar, periode, segmenten), toevoegknoppen en alle gewone knoppen: minimaal 44 px hoog. */
    .mud-toggle-group.mud-toggle-group .mud-toggle-item,
    .segments.segments .mud-toggle-item,
    .segments-compact.segments-compact .mud-toggle-item,
    .add-button,
    .mud-button-root:not(.mud-icon-button):not(.mud-toggle-item),
    .account-form .btn-inline,
    .password-toggle {
        min-height: 44px;
    }

    .hero .mud-toggle-item {
        min-height: 40px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .account-form .form-check,
    .account-links a {
        min-height: 44px;
    }
}

/* ---------- Kaarten ---------- */
.card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 16px;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-title .mud-typography {
    flex: 1 1 auto;
    min-width: 0;
}

/* Hero-kaart met het belangrijkste getal */
.hero {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, #6366f1 60%, #7c3aed 100%);
    color: #fff;
    border-radius: 16px;
    padding: 18px 18px 14px;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
}

.hero .mud-text-secondary,
.hero .hero-label {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hero-amount {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.hero-amount.negative {
    color: #fecaca;
}

.hero-amount.warning {
    color: #fde68a;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
}

.hero-stat-value {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hero .mud-toggle-group {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Ook het label zelf kleuren: MudBlazor zet in de donkere modus de (donkere) primaire tekstkleur op het label. */
.hero .mud-toggle-item,
.hero .mud-toggle-item .mud-button-label {
    color: #fff !important;
}

.hero .mud-toggle-item.mud-toggle-item-selected,
.hero .mud-toggle-item.mud-toggle-item-selected .mud-button-label {
    background: #fff !important;
    color: #4f46e5 !important; /* vaste kleur: witte achtergrond in beide thema's */
}

/* Kleine cijfers als knop: tik opent de opbouw eronder */
.hero-stat-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 6px;
    margin: -4px -6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.hero-stat-button:hover,
.hero-stat-button.active {
    background: rgba(255, 255, 255, 0.14);
}

.hero-stat-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.hero-stat-chevron {
    vertical-align: middle;
    font-size: 1rem !important;
    opacity: 0.8;
}

.hero-breakdown {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
}

.hero-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.hero-row > span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.hero-transfer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    min-height: 44px;
}

.hero-transfer > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-transfer-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hero-transfer:hover {
    background: rgba(255, 255, 255, 0.22);
}

.hero-transfer:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Samen: wat ieder overmaakt, als tegels in de hero */
.hero-transfers {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-transfers-title {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 8px;
}

.hero-transfers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.hero-transfer-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    min-width: 0;
}

.hero-transfer-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Tegels (bijv. "maak over" per persoon) */
.tile {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 12px;
}

.tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Segmentkeuze (Overzicht / Posten / Jaar) ---------- */
.segments {
    margin-bottom: 12px;
}

.segments .mud-toggle-group {
    width: 100%;
}

.segments .mud-toggle-item {
    flex: 1 1 0;
    min-height: 40px;
}

/* Geselecteerd segment expliciet vullen met vaste kleuren (wit op #4f46e5 = 6,3:1 in beide thema's).
   Met var(--mud-palette-primary) bleek de knop na een klik soms transparant en in de donkere modus
   kreeg het label de donkere primaire tekstkleur op de lichte primaire kleur (3:1). */
.segments .mud-toggle-item.mud-toggle-item-selected {
    background-color: #4f46e5 !important;
}

.segments .mud-toggle-item.mud-toggle-item-selected .mud-button-label {
    color: #fff !important;
}

.segments-compact {
    margin-bottom: 0;
}

.segments-compact .mud-toggle-item {
    min-height: 34px;
    padding-left: 4px;
    padding-right: 4px;
}

/* ---------- Bedragen ---------- */
/* Startwizard: alle stappen naast elkaar op een telefoonscherm */
@media (max-width: 600px) {
    .mud-stepper.wizard-stepper .mud-stepper-nav .mud-step {
        padding: 8px 2px;
        flex: 1 1 0;
        min-width: 0;
    }

    .mud-stepper.wizard-stepper .mud-stepper-nav .mud-stepper-nav-connector {
        min-width: 8px;
        margin-top: 19px;
    }

    .mud-stepper.wizard-stepper .mud-stepper-nav .mud-step-label-content-title {
        display: none;
    }
}

@media (min-width: 600px) {
    .wizard-progress {
        display: none;
    }
}

.wizard-logout .logout-button,
.logout-button.wizard-logout {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    min-height: 44px;
    padding: 0 12px;
}

/* Chips niet kleiner dan captions (0,8125 rem) */
.mud-chip.mud-chip-size-small {
    font-size: 0.8125rem;
}

.amount-positive { color: var(--mud-palette-success); }
.amount-negative { color: var(--mud-palette-error); }
.amount-warning { color: var(--mud-palette-warning); }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- Samenvattingsregels ---------- */
.summary-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.summary-line-emphasis {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4px;
    padding-top: 10px;
}

.summary-line-hint {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* Specificatie van bruto naar netto in de salariseditor */
.salary-spec {
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.salary-spec .summary-line { padding: 3px 0; }

/* Loonstrookregel in de salariseditor: omschrijving, soort, bedrag, verwijderen; wikkelt op smalle schermen */
.salary-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px auto;
    grid-template-areas: "name kind amount remove" "hint hint hint hint";
    gap: 4px 8px;
    align-items: start;
    margin-bottom: 8px;
}

.salary-item-name { grid-area: name; }
.salary-item-kind { grid-area: kind; }
.salary-item-amount { grid-area: amount; }
.salary-item-remove { grid-area: remove; margin-top: 6px; }
.salary-item-hint { grid-area: hint; margin-top: -2px; }

@media (max-width: 599.98px) {
    .salary-item {
        grid-template-columns: minmax(0, 1fr) 140px auto;
        grid-template-areas: "name name remove" "kind amount amount" "hint hint hint";
    }
}

/* ---------- Lijsten met posten ---------- */
.item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    min-height: 52px;
}

.item-row + .item-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.item-row-clickable {
    position: relative;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}

.item-row-clickable:hover,
.item-row-clickable:has(.item-row-button:focus-visible) {
    background: var(--mud-palette-action-default-hover);
}

/* Titelknop: onzichtbaar als knop, klikvlak over de hele regel via ::after */
.item-row-button {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

.item-row-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.item-row-button:focus-visible::after {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Het menu ligt boven het klikvlak van de titelknop */
.item-row-menu {
    position: relative;
    z-index: 1;
}

/* Gedempte regel (bijv. aandeel gezamenlijk): via tekstkleur, niet via opacity, zodat het contrast boven 4,5:1 blijft. */
.item-row-muted .mud-typography-body1,
.item-row-muted .item-row-amount {
    color: var(--mud-palette-text-secondary);
}

.item-row-amount {
    flex-shrink: 0;
    text-align: right;
}

.min-width-0 {
    min-width: 0;
}

/* Paneltitel: naam links (afgekapt), bedrag rechts (niet afbreken) */
.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
}

.panel-title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-title-amount {
    flex-shrink: 0;
    white-space: nowrap;
}

.panel-title-count {
    flex-shrink: 0;
}

/* Toevoegknop: gecentreerd, niet afbreken */
.add-button {
    white-space: nowrap;
}

/* Eenvoudige staafjeslijst (verdeling) */
.bar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bar-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
}

.bar-list-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.bar-list-value {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bar-list-track {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.bar-list-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--mud-palette-primary);
}

.bar-list-fill.secondary {
    background: var(--mud-palette-secondary);
}

/* Wat als: vastgezette resultaatregel op de telefoon; op desktop staat de uitkomst ernaast en is de regel niet nodig */
.scenario-sticky {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4 + env(safe-area-inset-top, 0px));
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: -4px -16px 12px;
    padding: 8px 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.scenario-sticky-label {
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.scenario-sticky-amount {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.scenario-sticky-delta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.scenario-percent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.scenario-direction {
    flex-shrink: 0;
    margin-top: 4px;
}

.compare-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compare-block + .compare-block {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 12px;
}

.compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 4px 12px;
    align-items: baseline;
    padding: 4px 0;
}

.compare-value,
.compare-delta {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.compare-delta {
    font-weight: 700;
}

.compare-caption {
    display: block;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
}

@media (max-width: 599.98px) {
    .compare-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compare-label {
        grid-column: 1 / -1;
        font-weight: 500;
    }
}

@media (min-width: 960px) {
    .scenario-sticky {
        display: none;
    }
}

/* Jaartabel: compact, geen afbrekende bedragen */
.projection-table {
    width: 100%;
}

.projection-table td, .projection-table th {
    padding: 6px 4px !important;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ---------- Menulijst (Meer) ---------- */
.menu-card > .card-title {
    padding: 14px 16px 6px;
    margin-bottom: 0;
}

.menu-list {
    display: flex;
    flex-direction: column;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    min-height: 56px;
    color: inherit;
    text-decoration: none;
}

.menu-item + .menu-item {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.menu-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.menu-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

.menu-item .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.menu-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

.projection-table td:first-child, .projection-table th:first-child {
    padding-left: 0 !important;
}

.projection-table td:last-child, .projection-table th:last-child {
    padding-right: 0 !important;
}

.projection-table tr.current-month td {
    font-weight: 600;
    background: var(--mud-palette-primary-hover);
}

/* MudChart-tekst leesbaar houden op smalle schermen (de SVG schaalt met de breedte). De grafiek krijgt zijn eigen hoogte
   plus die van de legenda, zodat de legenda niet over de tabel eronder valt. */
.chart-mobile .mud-chart {
    width: 100%;
    height: auto !important;
    display: flex;
    flex-direction: column;
}

.chart-mobile .mud-chart-legend {
    position: static !important;
    margin-top: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Op een telefoon zijn veertien y-aslabels op 240 px onleesbaar; de tabel eronder heeft de getallen. */
@media (max-width: 599.98px) {
    .chart-mobile .mud-chart svg text[text-anchor="end"] {
        display: none;
    }
}

.chart-mobile .mud-chart svg text {
    font-size: 26px;
}

.chart-mobile .mud-chart-legend {
    font-size: 0.8125rem;
}

/* ---------- Dialogen: bottom sheet op smalle schermen ---------- */
@media (max-width: 599.98px) {
    .mud-dialog-container {
        align-items: flex-end !important;
    }

    .mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mud-dialog .mud-dialog-content {
        max-height: calc(92dvh - 130px);
        overflow-y: auto;
    }

    .mud-dialog .mud-dialog-actions {
        position: sticky;
        bottom: 0;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
        padding: 12px 16px;
    }
}

.mud-dialog .mud-dialog-actions .mud-button {
    min-height: 44px;
}

/* ---------- Static SSR Identity-formulieren ---------- */
/* Eén kolom van maximaal 480 px: velden van 900 px breed lezen niet. */
.account-card {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.account-form .form-field {
    margin-bottom: 16px;
}

/* 16 px in de velden: kleiner laat iOS inzoomen bij focus, en de pagina blijft dan verschoven staan. */
.account-form .form-control {
    font-size: 1rem !important;
}

.account-form .form-control.invalid,
.account-form .form-control[aria-invalid="true"] {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 1px var(--mud-palette-error);
}

.account-form .form-label {
    display: block;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.account-form .form-static {
    padding: 12px 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.account-form .form-hint {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.password-input {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.password-input .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.password-toggle {
    flex-shrink: 0;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Links onder een formulier: rijen van 40 px, ruim genoeg voor een duim. */
.account-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.account-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 8px;
}

.account-form .btn-danger {
    background: var(--mud-palette-error);
    color: #fff;
}

.account-form a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

.account-title {
    outline: none;
}

/* Links in lopende tekst (privacyverklaring, "download eerst je gegevens") ook zonder kleur herkenbaar. */
.account-form .mud-typography .mud-link,
.account-form .mud-alert .mud-link,
.landing .mud-link {
    text-decoration: underline;
}

/* Submenu van Mijn account: tabs van 44 px die op een smal scherm horizontaal scrollen */
.manage-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    scrollbar-width: none;
}

.manage-nav::-webkit-scrollbar {
    display: none;
}

.manage-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 0 auto;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

/* Op een smal scherm passen de vier tabs zonder icoon precies naast elkaar. */
@media (max-width: 599.98px) {
    .manage-nav-item {
        padding: 0 6px;
        font-size: 0.8125rem;
    }

    .manage-nav-item .mud-icon-root {
        display: none;
    }
}

.manage-nav-item.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.manage-nav-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.error-code code {
    word-break: break-all;
}

.btn-plain-primary {
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn-plain-primary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.provider-logo {
    flex-shrink: 0;
}

.admin-tabs .mud-tab {
    text-transform: none;
}

.account-form label {
    display: block;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.account-form .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: inherit;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.account-form .form-control:focus {
    outline: 2px solid var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.account-form .text-danger,
.account-form .validation-message {
    color: var(--mud-palette-error);
    font-size: 0.8125rem;
    margin-top: 4px;
}

.account-form .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-form .form-check input {
    width: 20px;
    height: 20px;
}

.account-form .btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    cursor: pointer;
}

.account-form .btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Doorgaan met Apple/Google/Microsoft (Inloggen, Registreren, Koppelingen). */
.external-logins {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.external-logins-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.external-logins-heading::before,
.external-logins-heading::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.external-login-form {
    margin: 0;
}

.account-form .btn-external {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
}

.account-form .btn-external .mud-icon-root {
    font-size: 1.25rem;
}

.account-form .btn-external-apple {
    background: #000;
    color: #fff;
    border-color: #000;
}

.account-form .btn-inline {
    width: auto;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.8125rem;
}

.linked-logins {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.linked-login {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.linked-login form {
    margin: 0 0 0 auto;
}

.linked-login-name {
    font-weight: 500;
}

.account-form .btn-secondary {
    background: transparent;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
}

/* ---------- Uitloggen (POST-formulier) ---------- */
.logout-form {
    margin: 0;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.logout-button-full {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding: 12px;
    border-radius: 8px;
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* ---------- Blazor-foutbalk ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: #fef3c7;
    color: #1f2937;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1300;
}

#blazor-error-ui .reload {
    margin-left: 8px;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.6rem;
}

/* ---------- Startwizard ---------- */
/* Smalle kolom op brede schermen: een formulier van 960 px breed leest niet prettig. */
.narrow {
    max-width: 640px;
    margin: 0 auto;
}

.wizard-row + .wizard-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.wizard-row .mud-checkbox {
    min-height: 44px;
}

.wizard-row-fields {
    padding: 4px 0 12px 42px;
}

.wizard-field-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wizard-field-pair > * {
    flex: 1 1 110px;
    min-width: 0;
}

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.wizard-actions .mud-button {
    min-height: 44px;
}

@media (max-width: 599.98px) {
    .wizard-row-fields {
        padding-left: 12px;
    }
}

/* ---------- Meldingen (snackbar) ---------- */
/* Op smalle schermen boven de onder-navigatie, zodat de melding de navigatie niet afdekt. */
@media (max-width: 959.98px) {
    .mud-snackbar-location-bottom-center,
    .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-right {
        bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
}

.mud-snackbar {
    width: calc(100vw - 24px);
    max-width: 480px;
}

/* Tekst krijgt de ruimte die overblijft naast de knop en breekt op woorden, niet op letters. */
.mud-snackbar .mud-snackbar-content-message {
    flex: 1 1 auto;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Actieknop (bijv. "Ongedaan maken") op één regel en met een volwaardig tikvlak. */
.mud-snackbar .mud-snackbar-action-button,
.mud-snackbar .mud-button-root:not(.mud-icon-button) {
    white-space: nowrap;
    min-height: 40px;
    flex-shrink: 0;
}

/* ---------- Lege staat ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
}

/* ---------- Checklist "Aan de slag" ---------- */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-height: 56px;
}

.checklist-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.checklist-item + .checklist-item {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.checklist-item.done {
    opacity: 0.6;
}

/* ---------- Landingspagina (niet ingelogd) ---------- */
.landing {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 8px;
}

.landing-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.landing-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.landing-logo {
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
}

.landing-brand {
    color: var(--mud-palette-primary);
    font-weight: 600 !important;
    letter-spacing: 0.08em;
}

.landing-title {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    outline: none;
}

.landing-lead {
    font-size: 1.0625rem !important;
    color: var(--mud-palette-text-secondary);
    max-width: 34rem;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.landing-cta .mud-button {
    min-height: 48px;
    flex: 1 1 auto;
}

/* Demo-kaarten: alleen ter illustratie, geen interactie */
.landing-hero-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    user-select: none;
}

.landing-demo-card .card-title {
    margin-bottom: 12px;
}

.landing-demo-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.landing-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-section-title {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
}

.landing-section-lead {
    color: var(--mud-palette-text-secondary);
    margin-top: -4px;
}

.landing-views {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 4px;
}

.landing-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landing-view-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    margin-bottom: 4px;
}

.landing-features,
.landing-steps {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.landing-feature,
.landing-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.landing-feature .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
}

.landing-step-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.landing-trust {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
}

.landing-trust .mud-icon-root {
    flex-shrink: 0;
}

.landing-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 28px 16px 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Privacyverklaring en Cookies naast elkaar onder de slotoproep */
.landing-legal {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}

@media (min-width: 600px) {
    .landing-cta .mud-button {
        flex: 0 1 auto;
    }

    .landing-views,
    .landing-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .landing {
        gap: 56px;
    }

    .landing-hero {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 40px;
        align-items: center;
        padding: 16px 0 8px;
    }

    .landing-title {
        font-size: 2.75rem !important;
    }

    .landing-lead {
        font-size: 1.125rem !important;
    }

    .landing-section-title {
        font-size: 1.625rem !important;
    }

    .landing-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Landingspagina's per onderwerp (rekenhulpen en uitleg, openbaar) ---------- */
.landing-article-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.landing-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.landing-crumbs a {
    color: inherit;
    text-decoration: underline;
}

/* Lopende tekst: gewone h2/h3/p/ul, leesbare regelbreedte */
.landing-prose {
    max-width: 44rem;
}

.landing-prose h2 {
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 12px 0 0;
}

.landing-prose h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 16px 0 0;
}

.landing-prose p,
.landing-prose ul,
.landing-prose ol {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.landing-prose ul,
.landing-prose ol {
    padding-left: 22px;
}

.landing-prose li + li {
    margin-top: 6px;
}

.landing-prose a,
.landing-faq a,
.landing-inapp a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.landing-prose h2:first-child,
.landing-prose h3:first-child {
    margin-top: 0;
}

/* Rekentool: velden in een raster, resultaten als tegels */
.landing-calc {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-calc-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 16px;
}

.landing-calc-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.landing-calc-result h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.landing-calc-tiles {
    margin-bottom: 0;
}

/* Checklist vaste lasten */
.landing-check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
}

.landing-check h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.landing-check ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Vergelijkingstabel */
.landing-table-card {
    padding: 0;
    overflow-x: auto;
}

.landing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.landing-table th,
.landing-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.landing-table thead th {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.landing-table tbody th {
    font-weight: 600;
    min-width: 9rem;
}

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

/* Veelgestelde vragen */
.landing-faq {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.landing-faq-item dt h3 {
    font-size: 1rem;
}

.landing-faq-item dd {
    margin: 6px 0 0;
}

/* "Zo werkt dit in de app" */
.landing-inapp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.landing-inapp-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-inapp-logo {
    border-radius: 10px;
    flex-shrink: 0;
}

/* "Meer lezen": kaartlinks naar de andere pagina's */
.landing-more {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.landing-more-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: inherit;
    text-decoration: none;
}

.landing-more-link:hover,
.landing-more-link:focus-visible {
    border-color: var(--mud-palette-primary);
}

.landing-more-link .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
}

.landing-more-title {
    display: block;
    font-weight: 600;
}

.landing-more-teaser {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Rondleiding: schermafbeeldingen in een telefoonlijst, tekst ernaast */
.tour {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tour-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
}

.tour-figure {
    margin: 0;
    display: flex;
    justify-content: center;
}

.tour-phone {
    width: min(260px, 100%);
    padding: 10px;
    border-radius: 36px;
    background: #1c1b22;
    box-shadow: 0 18px 40px rgba(28, 27, 34, 0.25);
}

.tour-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 27px;
    background: var(--mud-palette-background);
}

.tour-text h2 {
    margin-top: 0;
}

.tour-kicker {
    display: block;
    color: var(--mud-palette-primary);
    font-weight: 700 !important;
    letter-spacing: 0.08em;
}

.tour-pair {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
}

.tour-pair .tour-phone {
    width: min(220px, 45%);
}

.tour-wide {
    margin: 16px 0 0;
}

.tour-wide img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(28, 27, 34, 0.15);
}

.tour-wide figcaption {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

@media (min-width: 720px) {
    .tour-item {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
    }

    .tour-item:nth-child(even) .tour-figure {
        order: 2;
    }

    .tour-phone {
        width: 260px;
    }
}

/* Blog: lijst met artikelen en de artikelpagina (Markdown gerenderd in .landing-prose) */
.blog-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-card-title {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
    text-decoration: underline;
}

.blog-card-summary {
    color: var(--mud-palette-text-secondary);
}

.blog-card-more {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.blog-card-more:hover,
.blog-card-more:focus-visible {
    text-decoration: underline;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.blog-feed-link {
    margin-left: 6px;
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.blog-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-tags li {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mud-default-borderradius);
}

.landing-prose blockquote {
    margin: 12px 0 0;
    padding: 8px 16px;
    border-left: 3px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-secondary);
}

.landing-prose blockquote p {
    margin: 0;
}

.landing-prose table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.landing-prose th,
.landing-prose td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.landing-prose th {
    font-weight: 600;
}

.landing-prose code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-size: 0.875em;
}

.landing-prose hr {
    margin: 20px 0 8px;
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 600px) {
    .landing-calc-fields,
    .landing-calc-results,
    .landing-check-grid,
    .landing-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .landing-calc-fields,
    .landing-check-grid,
    .landing-more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Keuzelijst "Wat wil je toevoegen?" ---------- */
.add-item-option {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.add-item-option:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- Uitlegpagina ---------- */
.help-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 960px) {
    .help-grid {
        display: block;
        columns: 2;
        column-gap: 16px;
    }

    .help-grid > .card {
        break-inside: avoid;
        margin-bottom: 16px;
    }
}

.card[id] {
    scroll-margin-top: 72px;
}

.help-list {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.help-list li + li {
    margin-top: 4px;
}


/* ---------- Native app / PWA: veilige zone bovenin (iPhone-notch, statusbalk) ---------- */
/* De app-bar loopt door tot de bovenrand; de inhoud schuift evenveel mee. Op het web is de inset 0. */
.mud-appbar.app-bar {
    padding-top: env(safe-area-inset-top, 0px);
}

.mud-appbar-dense ~ .mud-main-content.main-content {
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4 + env(safe-area-inset-top, 0px));
}

/* ---------- App-bar op brede schermen ---------- */
/* Lichte balk met rand in de breedte van de contentkolom: beeldmerk links, hoofdnavigatie als tabbladen rechts.
   Mobiel (onder 960 px) blijft de gekleurde balk met de paginatitel ongewijzigd. */
@media (min-width: 960px) {
    .mud-appbar.app-bar {
        height: auto;
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        border-bottom-color: var(--mud-palette-lines-default);
    }

    .mud-appbar.app-bar .mud-toolbar {
        min-height: 60px;
        padding-left: 0;
        padding-right: 0;
    }

    .mud-appbar-dense ~ .mud-main-content.main-content {
        padding-top: calc(61px + env(safe-area-inset-top, 0px));
    }

    .app-bar-inner {
        display: flex;
        align-items: stretch;
        width: 100%;
        max-width: 960px;
        min-height: 60px;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .app-bar-inner > .mud-button-root,
    .app-bar-inner > .app-title {
        align-self: center;
    }

    .app-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-right: 24px;
        padding: 6px 0;
        border-radius: 8px;
        color: inherit;
        text-decoration: none;
    }

    .app-brand-mark {
        flex-shrink: 0;
    }

    .app-brand-name {
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    .app-brand:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 4px;
    }

    /* Laatste tab eindigt op de rechterrand van de contentkolom (de tab heeft 14 px binnenruimte). */
    .top-nav {
        margin-right: -14px;
    }

    .mud-appbar .mud-button-root:focus-visible {
        outline-color: var(--mud-palette-primary);
    }

    /* Zonder hoofdnavigatie (inloggen, account, startwizard): paginatitel naast het beeldmerk. */
    .app-brand + .app-title {
        margin-left: 4px;
        padding-left: 20px;
        border-left: 1px solid var(--mud-palette-lines-default);
        font-weight: 500;
        line-height: 1.6;
    }

    /* Met hoofdnavigatie: titel en terugknop verhuizen van de balk naar de pagina (PageHeader). */
    .nav-shown .app-title,
    .nav-shown .app-back {
        display: none;
    }

    .nav-shown .page-header {
        margin-bottom: 20px;
    }

    .nav-shown .page-header-row {
        display: flex;
        align-items: center;
        margin-bottom: 0 !important;
    }

    .nav-shown .page-title {
        position: static !important;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .nav-shown .page-subtitle {
        margin-top: 2px;
    }

    .nav-shown .page-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        border-radius: 6px;
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .nav-shown .page-back:hover {
        color: var(--mud-palette-primary);
    }

    .nav-shown .page-back:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }
}

/* ==== Jaaroverzicht ==== */

/* Keuze van het jaar boven de kaarten; de knoppen gebruiken de opmaak van .segments. */
.year-pick {
    margin-bottom: 16px;
    max-width: 420px;
}

.year-highlights {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.year-highlights li::marker {
    color: var(--mud-palette-primary);
}

/* ==== Kwartaalcheck en maandgesprek ==== */
/* Kwartaalcheck: op een smal scherm gaan de knoppen Bijwerken/Klopt op een eigen regel onder de post. */
.check-row {
    flex-wrap: wrap;
}

.check-row .check-actions {
    justify-content: flex-end;
}

@media (max-width: 599.98px) {
    .check-row .check-actions {
        width: 100%;
    }
}

/* Maandgesprek: vinkje met de titel als label, de toelichting eronder uitgelijnd met de titel. */
.talk-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    min-height: 52px;
}

.talk-row + .talk-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.talk-row .talk-check {
    margin-left: -8px;
}

.talk-row .talk-check .mud-checkbox-label,
.talk-row .talk-check .mud-typography {
    white-space: normal;
}

.talk-row .talk-note {
    margin-left: 34px;
    margin-top: -4px;
}

.talk-row .item-row-amount {
    padding-top: 9px;
}

.item-row-muted .talk-check .mud-typography {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

/* ==== Jaarwissel ==== */
/* Wizard per 1 januari: lasten gestapeld (naam en huidig bedrag boven, invoer eronder), zodat 375 px zonder tabel past. */
.yearchange-tools {
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.yearchange-tool-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.yearchange-tool-buttons .mud-button {
    min-height: 44px;
}

.yearchange-switch {
    margin-top: 8px;
}

.yearchange-group {
    margin-top: 16px;
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
}

.yearchange-row {
    padding: 8px 0 4px;
}

.yearchange-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 8px;
}

.yearchange-fields > * {
    flex-basis: 150px;
}

.yearchange-result {
    margin: -4px 0 8px;
}

.yearchange-up {
    color: var(--mud-palette-error);
}

.yearchange-down {
    color: var(--mud-palette-success);
}

/* ==== Agenda en nieuws ==== */

/* Wat is nieuw: de punten per release als gewone lijst met wat lucht ertussen. */
.release-list {
    margin: 0;
    padding-left: 1.25rem;
}

.release-list li + li {
    margin-top: 6px;
}

/* Melding na een update op Ik: tekst en knop Bekijken naast elkaar, op een smal scherm onder elkaar. */
.release-alert .mud-alert-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* ==== Potjes en labels ==== */
/* Soortkeuze in de spaardoel-dialoog met vier segmenten (Gewoon, Vakantie, Buffer, Potje): minder zijruimte en iets
   kleinere letters, zodat de vier knoppen ook op een smal scherm naast elkaar passen zonder dat een tekst afbreekt. */
.segments.segments-four .mud-toggle-item {
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
}

.segments.segments-four .mud-toggle-item .mud-button-label {
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ==== Overmaakschema ==== */
.transfer-payday {
    max-width: 280px;
    margin-top: 16px;
}