/* ===== Kidstep — Kind- & Familievriendelijk Thema ===== */

:root {
    --ks-primary: #4ECDC4;
    --ks-primary-dark: #3BB5AD;
    --ks-secondary: #FF6B6B;
    --ks-secondary-dark: #E85D5D;
    --ks-accent: #FFE66D;
    --ks-purple: #A78BFA;
    --ks-bg: #FBF6EE;
    --ks-bg-card: #FFFFFF;
    --ks-text: #2C3E50;
    --ks-text-muted: #7C8A97;
    --ks-border: #E8E3DD;
    --ks-radius: 1rem;
    --ks-radius-sm: 0.625rem;
    --ks-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --ks-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1);
    --ks-font: 'Nunito', 'Segoe UI', sans-serif;
    /* Subtle default tint for Bootstrap Icons (overridable via currentColor in shell components). */
    --ks-icon: #5A6B7B;
    --ks-icon-strong: var(--ks-primary-dark);
}

/* Default subtle color for all Bootstrap Icons. Components that want the icon
   to follow their own text color (e.g. buttons, navbars, top bar) explicitly
   reset this with `color: currentColor;` (or `color: inherit;`). */
.bi {
    color: var(--ks-icon);
    vertical-align: -0.125em;
}

/* In contexts where icon should follow surrounding color (buttons, alerts,
   colored backgrounds, badges, links inside text), respect the parent. */
.btn .bi,
.alert .bi,
.badge .bi,
.nav .bi,
.navbar .bi,
.dropdown-menu .bi,
.list-group-item .bi,
a .bi,
button .bi,
label .bi {
    color: inherit;
}

/* Page headers / hero icons can be a touch stronger to anchor the section. */
h1 .bi, h2 .bi, h3 .bi, .display-1 .bi, .display-2 .bi, .display-3 .bi, .display-4 .bi, .display-5 .bi, .display-6 .bi {
    color: var(--ks-icon-strong);
}

/* ===== Subtle, page-specific tints for menu page icons =====
   Used in the <h1> of each page that appears in the main navigation.
   Colors are intentionally muted so they remain calm and family-friendly. */
.page-icon {
    font-size: 0.95em;
    vertical-align: -0.1em;
    opacity: 0.9;
}

.page-icon-home.bi,              h1 .page-icon-home              { color: #4ECDC4; } /* teal */
.page-icon-mijndag.bi,           h1 .page-icon-mijndag           { color: #E0A800; } /* warm muted gold */
.page-icon-planboards.bi,        h1 .page-icon-planboards        { color: #5B8DEF; } /* soft blue */
.page-icon-routines.bi,          h1 .page-icon-routines          { color: #6FB07F; } /* sage green */
.page-icon-beloningen.bi,        h1 .page-icon-beloningen        { color: #C8A24B; } /* muted gold */
.page-icon-rustroute.bi,         h1 .page-icon-rustroute         { color: #8FB7C9; } /* dusty blue */
.page-icon-straksverhaal.bi,     h1 .page-icon-straksverhaal     { color: #A78BFA; } /* soft purple */
.page-icon-gedeeld.bi,           h1 .page-icon-gedeeld           { color: #67A99B; } /* muted teal */
.page-icon-marketplace.bi,       h1 .page-icon-marketplace       { color: #B8896B; } /* warm taupe */
.page-icon-kinderen.bi,          h1 .page-icon-kinderen          { color: #E89BAE; } /* soft rose */
.page-icon-images.bi,            h1 .page-icon-images            { color: #7AAE8C; } /* muted green */
.page-icon-pincode.bi,           h1 .page-icon-pincode           { color: #6C7A89; } /* slate */
.page-icon-uitnodigingen.bi,     h1 .page-icon-uitnodigingen     { color: #9BA8B8; } /* cool gray */
.page-icon-subscription.bi,      h1 .page-icon-subscription      { color: #5BA199; } /* deep mint */
.page-icon-admin-templates.bi,   h1 .page-icon-admin-templates   { color: #8A7BB8; } /* muted lavender */
.page-icon-admin-reports.bi,     h1 .page-icon-admin-reports     { color: #D08A78; } /* muted coral */
.page-icon-menu.bi,              h1 .page-icon-menu              { color: #3BB5AD; } /* menu — deep teal */
.page-icon-kindpaspoort.bi,      h1 .page-icon-kindpaspoort      { color: #B07AA1; } /* muted plum */

html, body {
    font-family: var(--ks-font);
    background-color: var(--ks-bg);
    color: var(--ks-text);
    line-height: 1.6;
}

/* Heel subtiele, vrolijke achtergrond-gloed: twee pastelvlekken die rustig
   versmelten met de basiskleur. Vast (fixed) zodat hij niet meescrolt en
   visueel niet "schreeuwt". */
body {
    background-image:
        radial-gradient(circle at 12% -8%, rgba(78, 205, 196, 0.10), transparent 45%),
        radial-gradient(circle at 92% 8%, rgba(255, 195, 200, 0.10), transparent 50%),
        radial-gradient(circle at 50% 110%, rgba(167, 139, 250, 0.07), transparent 55%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.dark-mode body {
    background-image:
        radial-gradient(circle at 12% -8%, rgba(78, 205, 196, 0.07), transparent 45%),
        radial-gradient(circle at 92% 8%, rgba(255, 107, 107, 0.05), transparent 50%),
        radial-gradient(circle at 50% 110%, rgba(167, 139, 250, 0.06), transparent 55%);
}

/* ===== Typography ===== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--ks-text);
}

h1 {
    font-size: 1.75rem;
}

/* ===== Links ===== */

a, .btn-link {
    color: var(--ks-primary-dark);
}

a:hover, .btn-link:hover {
    color: var(--ks-primary);
}

/* ===== Buttons ===== */

.btn {
    font-family: var(--ks-font);
    font-weight: 700;
    border-radius: var(--ks-radius-sm);
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}

.btn-primary {
    color: #fff;
    background-color: var(--ks-primary);
    border-color: var(--ks-primary);
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--ks-primary-dark);
    border-color: var(--ks-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.35);
}

.btn-danger {
    background-color: var(--ks-secondary);
    border-color: var(--ks-secondary);
}

.btn-danger:hover, .btn-danger:active {
    background-color: var(--ks-secondary-dark);
    border-color: var(--ks-secondary-dark);
}

.btn-outline-primary {
    color: var(--ks-primary-dark);
    border-color: var(--ks-primary);
}

.btn-outline-primary:hover {
    background-color: var(--ks-primary);
    border-color: var(--ks-primary);
    color: #fff;
}

.btn-outline-danger {
    color: var(--ks-secondary);
    border-color: var(--ks-secondary);
}

.btn-outline-danger:hover {
    background-color: var(--ks-secondary);
    border-color: var(--ks-secondary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(78, 205, 196, 0.4);
}

/* ===== Cards ===== */

.card {
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow);
    background: var(--ks-bg-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

/* Heel subtiel, vrolijk pastel-accent bovenaan elke kaart. Een dunne
   gradient-streep die de afgeronde hoeken volgt en visueel rustig blijft. */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--ks-primary) 0%,
        var(--ks-accent) 50%,
        var(--ks-purple) 100%);
    opacity: 0.5;
    border-top-left-radius: var(--ks-radius);
    border-top-right-radius: var(--ks-radius);
    pointer-events: none;
}

.card:hover {
    box-shadow: var(--ks-shadow-hover);
    transform: translateY(-1px);
}

.card-title {
    font-weight: 700;
    color: var(--ks-text);
}

/* ===== Forms ===== */

.form-control {
    border-radius: var(--ks-radius-sm);
    border-color: var(--ks-border);
    font-family: var(--ks-font);
    padding: 0.6rem 1rem;
}

.form-control:focus {
    border-color: var(--ks-primary);
    box-shadow: 0 0 0 0.15rem rgba(78, 205, 196, 0.25);
}

.input-group .btn {
    border-radius: 0 var(--ks-radius-sm) var(--ks-radius-sm) 0;
}

.input-group .form-control {
    border-radius: var(--ks-radius-sm) 0 0 var(--ks-radius-sm);
}

/* ===== Tables ===== */

.table {
    border-radius: var(--ks-radius);
    overflow: hidden;
    box-shadow: var(--ks-shadow);
    background: var(--ks-bg-card);
}

.table thead th {
    background-color: var(--ks-primary);
    color: #fff;
    font-weight: 700;
    border: none;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table tbody td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
    border-color: var(--ks-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(78, 205, 196, 0.04);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(78, 205, 196, 0.1);
}

.table-active > * {
    background-color: rgba(78, 205, 196, 0.15) !important;
}

/* ===== Alerts ===== */

.alert-danger {
    background-color: #FFF0F0;
    border-color: var(--ks-secondary);
    color: var(--ks-secondary-dark);
    border-radius: var(--ks-radius-sm);
}

/* ===== Modal ===== */

.modal-content {
    border-radius: var(--ks-radius);
    border: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom-color: var(--ks-border);
    padding: 1.25rem 1.5rem;
}

.modal-footer {
    border-top-color: var(--ks-border);
    padding: 1rem 1.5rem;
}

.modal-title {
    font-weight: 800;
}

/* ===== Content ===== */

.content {
    padding-top: 1.5rem;
}

h1:focus {
    outline: none;
}

/* ===== Validation ===== */

.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--ks-primary);
    outline-offset: 1px;
}

.invalid {
    outline: 2px solid var(--ks-secondary);
    outline-offset: 1px;
}

.validation-message {
    color: var(--ks-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ===== Blazor Error UI ===== */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--ks-accent);
    color: var(--ks-text);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-weight: 600;
    border-radius: var(--ks-radius) var(--ks-radius) 0 0;
}

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

.blazor-error-boundary {
    background: var(--ks-secondary);
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
    border-radius: var(--ks-radius-sm);
    font-weight: 600;
}

    .blazor-error-boundary::after {
        content: "Er is iets misgegaan 😢"
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Mobile safe area ===== */

.status-bar-safe-area {
    display: none;
}

/* ===== Logo =====
   Kidstep-wordmark.png: volledig logo (figuren + naam), bijgesneden, ~1,16:1.
   Kidstep-icon.png: hetzelfde transparante logo in een vierkant canvas, voor kleine plekken.
   Altijd één maat vastzetten en de andere 'auto' laten, zodat het logo nooit
   wordt uitgerekt of afgesneden. */

.ks-wordmark {
    display: inline-block;
    height: 8rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.ks-wordmark-sm {
    height: 6rem;
}

.ks-logo-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===== Auth Pages ===== */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

.auth-card .card-body {
    padding: 2rem;
}

.auth-card .form-label {
    font-size: 0.9rem;
    color: var(--ks-text);
}

/* ===== User Menu (top-row) ===== */

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-greeting {
    font-weight: 600;
    color: var(--ks-text);
    font-size: 0.9rem;
}

.btn-logout {
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--ks-radius-sm);
    font-weight: 700;
    color: var(--ks-secondary);
    border: 1.5px solid var(--ks-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background-color: var(--ks-secondary);
    color: #fff;
}

/* ===== Dark Mode ===== */

.dark-mode {
    --ks-bg: #1a1d23;
    --ks-bg-card: #23272e;
    --ks-text: #e2e4e9;
    --ks-text-muted: #9ca3af;
    --ks-border: #353a44;
    --ks-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    --ks-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.35);
    --ks-icon: #A8B4C0;
    --ks-icon-strong: var(--ks-primary);
}

.dark-mode .table thead th {
    background-color: var(--ks-primary-dark);
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(78, 205, 196, 0.06);
}

.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(78, 205, 196, 0.12);
}

.dark-mode .alert-danger {
    background-color: #3a1f1f;
    color: #ff9b9b;
}

.dark-mode .form-control {
    background-color: #2a2e36;
    color: var(--ks-text);
    border-color: var(--ks-border);
}

.dark-mode .form-control:focus {
    background-color: #2e323b;
}

.dark-mode .modal-content {
    background-color: var(--ks-bg-card);
}

.dark-mode .btn-outline-primary {
    color: var(--ks-primary);
}

.dark-mode .btn-outline-danger {
    color: var(--ks-secondary);
}

.dark-mode #blazor-error-ui {
    background: #3d3520;
    color: var(--ks-text);
}

.dark-mode .top-row {
    background-color: #23272e;
}

.dark-mode .btn-logout {
    color: var(--ks-secondary);
    border-color: var(--ks-secondary);
}

.dark-mode .user-greeting {
    color: var(--ks-text);
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: var(--ks-bg);
        width: 100%;
        z-index: 1;
    }

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}

/* ===== TV remote (D-pad) navigation ===== */
/* Visible focus ring for any interactive control while the remote is active,
   so the user can always see where the focus is on a television. Pages that
   define their own :focus styling keep it; this is the fallback. */
.tv-nav-active a:focus,
.tv-nav-active button:focus,
.tv-nav-active input:focus,
.tv-nav-active select:focus,
.tv-nav-active textarea:focus,
.tv-nav-active [tabindex]:focus {
    outline: 3px solid var(--ks-primary);
    outline-offset: 3px;
    border-radius: var(--ks-radius-sm);
}

/* ===== Printen ===== */
/* Pagina's die bedoeld zijn om op papier mee te geven (zoals het Kindpaspoort)
   laten alleen hun inhoud zien: navigatie, knoppen en achtergrond gaan eruit.
   Markeer knoppenbalken op zo'n pagina met .no-print. */
@media print {
    .top-row,
    .bottom-nav,
    .no-print {
        display: none !important;
    }

    body {
        background-image: none;
        background-color: #fff;
    }

    .content {
        padding: 0 !important;
    }

    a[href]::after {
        content: none !important;
    }
}


/* =====================================================================
   Design refresh — rustige, zachte modules in de stijl van "Mijn dag":
   zachte kaarten, getinte icoontegels, pill-labels en duidelijke staten.
   ===================================================================== */

:root {
    --ks-radius-lg: 1.5rem;
    --ks-shadow-soft: 0 1px 2px rgba(44, 62, 80, 0.04), 0 10px 30px -14px rgba(44, 62, 80, 0.16);
    --ks-shadow-lift: 0 2px 4px rgba(44, 62, 80, 0.05), 0 18px 40px -18px rgba(44, 62, 80, 0.26);
    --ks-surface-2: #F6F1E9;
    --bs-primary: #4ECDC4;
    --bs-primary-rgb: 78, 205, 196;
    --bs-link-color: #3BB5AD;
    --bs-link-color-rgb: 59, 181, 173;
    --bs-link-hover-color: #2E9C95;
    --bs-link-hover-color-rgb: 46, 156, 149;
    --bs-border-color: #E8E3DD;
    --bs-secondary-color: #7C8A97;
    --bs-heading-color: var(--ks-text);
}

.dark-mode {
    --ks-surface-2: #1f2329;
    --ks-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px -14px rgba(0, 0, 0, 0.55);
    --ks-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.25), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    --bs-border-color: #353a44;
    --bs-secondary-color: #9ca3af;
    --bs-heading-color: var(--ks-text);
    color: var(--ks-text);
}

.text-muted, .text-body-secondary { color: var(--ks-text-muted) !important; }
.text-primary { color: var(--ks-primary-dark) !important; }

/* ----- Paginakop: getinte icoontegel + stevige titel ----- */
h1:has(> .page-icon) {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

h1 > .page-icon.bi {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 !important;
    border-radius: 0.95rem;
    font-size: 1.25rem;
    vertical-align: 0;
    opacity: 1;
    background: color-mix(in srgb, currentColor 14%, var(--ks-bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}

h1 > .page-icon.bi::before { line-height: 1; }

h1:has(> .page-icon) + p,
h1:has(> .page-icon) + .text-muted {
    color: var(--ks-text-muted);
    font-size: 0.98rem;
}

/* Kleine hoofdletter-labels boven een titel ("GOEDEMORGEN"). */
.ks-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-text-muted);
}

/* ----- Kaarten: rustiger, zachter, groter afgerond ----- */
.card {
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-lg);
    box-shadow: var(--ks-shadow-soft);
    --bs-card-inner-border-radius: calc(var(--ks-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--ks-border);
}

.card::before { content: none; }

.card:hover { transform: none; box-shadow: var(--ks-shadow-soft); }

a.card:hover, .card.ks-clickable:hover, .card[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-lift);
}

.card-header, .card-footer {
    background: transparent;
    border-color: var(--ks-border);
}

.card-title { font-weight: 800; }

/* ----- Knoppen ----- */
.btn {
    border-radius: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.005em;
}

.btn-sm { border-radius: 0.7rem; padding: 0.35rem 0.8rem; }
.btn-lg { border-radius: 1rem; }

.btn-primary:hover, .btn-primary:active {
    box-shadow: 0 8px 18px -8px rgba(59, 181, 173, 0.7);
}

.btn-outline-secondary, .btn-light {
    --bs-btn-color: var(--ks-text);
    --bs-btn-bg: var(--ks-bg-card);
    --bs-btn-border-color: var(--ks-border);
    --bs-btn-hover-color: var(--ks-text);
    --bs-btn-hover-bg: var(--ks-surface-2);
    --bs-btn-hover-border-color: #D9D2C8;
    --bs-btn-active-color: var(--ks-text);
    --bs-btn-active-bg: var(--ks-surface-2);
    --bs-btn-active-border-color: #D9D2C8;
}

.btn-outline-primary {
    --bs-btn-bg: color-mix(in srgb, var(--ks-primary) 7%, var(--ks-bg-card));
    background-color: var(--bs-btn-bg);
    border-color: color-mix(in srgb, var(--ks-primary) 45%, var(--ks-bg-card));
}

.btn-outline-danger {
    border-color: color-mix(in srgb, var(--ks-secondary) 45%, var(--ks-bg-card));
    background-color: var(--ks-bg-card);
}

.btn-outline-danger:hover { color: #fff; }

/* Ronde, rustige icoonknop (bewerken/verwijderen in lijsten). */
.ks-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 0.8rem;
    border: 1px solid var(--ks-border);
    background: var(--ks-bg-card);
    color: var(--ks-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ks-icon-btn:hover { background: var(--ks-surface-2); color: var(--ks-text); }
.ks-icon-btn.is-danger:hover { background: #FFF0F0; color: var(--ks-secondary-dark); border-color: #F7C9C9; }
.ks-icon-btn:disabled { opacity: 0.5; }

/* ----- Formulieren ----- */
.form-label {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ks-text);
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    border-radius: 0.85rem;
    border: 1.5px solid var(--ks-border);
    background-color: var(--ks-bg-card);
    min-height: 2.75rem;
}

.form-select { padding: 0.55rem 2.25rem 0.55rem 1rem; }

.form-control:focus, .form-select:focus {
    border-color: var(--ks-primary);
    box-shadow: 0 0 0 0.25rem rgba(78, 205, 196, 0.18);
}

.form-control:disabled, .form-control[readonly] { background-color: var(--ks-surface-2); }

.form-text { color: var(--ks-text-muted); }

.form-check-input:checked { background-color: var(--ks-primary); border-color: var(--ks-primary); }
.form-check-input:focus { border-color: var(--ks-primary); box-shadow: 0 0 0 0.25rem rgba(78, 205, 196, 0.18); }
.form-range::-webkit-slider-thumb { background: var(--ks-primary); }

.input-group-text {
    border: 1.5px solid var(--ks-border);
    background: var(--ks-surface-2);
    border-radius: 0.85rem;
}

/* ----- Meldingen: zacht getint, zonder harde rand ----- */
.alert {
    border: 0;
    border-radius: 1.1rem;
    padding: 0.9rem 1.1rem;
    box-shadow: inset 0 0 0 1px var(--bs-alert-border-color);
}

.alert-info      { --bs-alert-bg: #EAF7F6; --bs-alert-color: #22625E; --bs-alert-border-color: #CDEDEA; --bs-alert-link-color: #22625E; }
.alert-success   { --bs-alert-bg: #EAF7EE; --bs-alert-color: #276A3E; --bs-alert-border-color: #CFEBD8; --bs-alert-link-color: #276A3E; }
.alert-warning   { --bs-alert-bg: #FFF8DC; --bs-alert-color: #7A5A00; --bs-alert-border-color: #F6E7A8; --bs-alert-link-color: #7A5A00; }
.alert-danger    { --bs-alert-bg: #FFF0F0; --bs-alert-color: #B43E3E; --bs-alert-border-color: #F8D2D2; --bs-alert-link-color: #B43E3E; background-color: var(--bs-alert-bg); color: var(--bs-alert-color); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--ks-surface-2); --bs-alert-color: var(--ks-text); --bs-alert-border-color: var(--ks-border); }
.alert-primary   { --bs-alert-bg: #EAF7F6; --bs-alert-color: #22625E; --bs-alert-border-color: #CDEDEA; }

/* ----- Labels / badges als zachte pills ----- */
.badge {
    border-radius: 999px;
    font-weight: 800;
    padding: 0.38em 0.75em;
    letter-spacing: 0.01em;
}

.badge.bg-primary, .badge.text-bg-primary, .badge.bg-info, .badge.text-bg-info { background-color: #DDF4F2 !important; color: #22625E !important; }
.badge.bg-success, .badge.text-bg-success { background-color: #E0F3E6 !important; color: #276A3E !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: #FFF1B8 !important; color: #6B4F00 !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: #FFE1E1 !important; color: #B43E3E !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background-color: var(--ks-surface-2) !important; color: var(--ks-text) !important; border: 1px solid var(--ks-border); }
.badge.bg-dark, .badge.text-bg-dark { background-color: var(--ks-text) !important; color: #fff !important; }

/* Gele "Nu"-pill, zoals in Mijn dag. */
.ks-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--ks-surface-2);
    color: var(--ks-text);
    border: 1px solid var(--ks-border);
    white-space: nowrap;
}

.ks-pill-now { background: var(--ks-accent); border-color: transparent; color: #5A4500; }
.ks-pill-soft { background: color-mix(in srgb, var(--ks-primary) 14%, var(--ks-bg-card)); border-color: transparent; color: #22625E; }

/* ----- Voortgang ----- */
.progress {
    --bs-progress-height: 0.6rem;
    --bs-progress-bg: var(--ks-surface-2);
    --bs-progress-bar-bg: var(--ks-primary);
    border-radius: 999px;
}

.progress-bar { border-radius: 999px; }

/* ----- Lijsten ----- */
.list-group {
    --bs-list-group-border-color: var(--ks-border);
    --bs-list-group-bg: var(--ks-bg-card);
    --bs-list-group-color: var(--ks-text);
    --bs-list-group-border-radius: 1.1rem;
    --bs-list-group-active-bg: var(--ks-primary);
    --bs-list-group-active-border-color: var(--ks-primary);
    --bs-list-group-action-hover-bg: var(--ks-surface-2);
    box-shadow: var(--ks-shadow-soft);
}

.list-group-flush { box-shadow: none; }

/* ----- Paginering ----- */
.pagination {
    --bs-pagination-color: var(--ks-text);
    --bs-pagination-bg: var(--ks-bg-card);
    --bs-pagination-border-color: var(--ks-border);
    --bs-pagination-hover-bg: var(--ks-surface-2);
    --bs-pagination-hover-color: var(--ks-text);
    --bs-pagination-active-bg: var(--ks-primary);
    --bs-pagination-active-border-color: var(--ks-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(78, 205, 196, 0.18);
    --bs-pagination-border-radius: 0.8rem;
    gap: 0.3rem;
}

.pagination .page-link { border-radius: 0.8rem !important; min-width: 2.25rem; text-align: center; font-weight: 800; }

/* ----- Tabellen ----- */
.table { box-shadow: var(--ks-shadow-soft); border-radius: 1.1rem; }

.table thead th {
    background-color: var(--ks-surface-2);
    color: var(--ks-text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.dark-mode .table thead th { background-color: var(--ks-surface-2); }

/* ----- Modals ----- */
.modal-content {
    border-radius: var(--ks-radius-lg);
    box-shadow: 0 30px 80px -24px rgba(44, 62, 80, 0.45);
}

.modal-header { border-bottom: 0; padding: 1.35rem 1.5rem 0.5rem; }
.modal-footer { border-top: 0; padding: 0.5rem 1.5rem 1.35rem; gap: 0.5rem; }
.modal-title { font-weight: 900; }

/* ----- Nieuwe bouwstenen ----- */

/* Getinte icoontegel. Stel de kleur in via `--tile` (standaard teal). */
.ks-tile {
    --tile: var(--ks-primary);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--tile) 15%, var(--ks-bg-card));
    color: color-mix(in srgb, var(--tile) 80%, #1d2b38);
    font-size: 1.15rem;
}

.ks-tile .bi { color: inherit; }
.ks-tile-lg { width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; font-size: 1.5rem; }
.ks-tile-purple { --tile: var(--ks-purple); }
.ks-tile-coral  { --tile: var(--ks-secondary); }
.ks-tile-yellow { --tile: #E0A800; }
.ks-tile-blue   { --tile: #5B8DEF; }
.ks-tile-rose   { --tile: #E89BAE; }
.ks-tile-green  { --tile: #6FB07F; }

/* Witte pictogramtegel voor afbeeldingen (zoals bij de stappen in Mijn dag). */
.ks-picto {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid var(--ks-border);
    overflow: hidden;
}

.ks-picto img { width: 82%; height: 82%; object-fit: contain; }
.ks-picto-lg { width: 4.5rem; height: 4.5rem; border-radius: 1.2rem; }
.ks-picto-xl { width: 6rem; height: 6rem; border-radius: 1.4rem; }

/* Rij in stap-stijl: tegel links, tekst in het midden, acties rechts. */
.ks-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 1.1rem;
    border: 1px solid var(--ks-border);
    background: var(--ks-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ks-row + .ks-row { margin-top: 0.55rem; }
.ks-row-soft { background: var(--ks-bg); }
.ks-row-body { flex: 1 1 auto; min-width: 0; }
.ks-row-meta { display: block; font-size: 0.75rem; font-weight: 700; color: var(--ks-text-muted); line-height: 1.3; }
.ks-row-title { display: block; font-weight: 800; color: var(--ks-text); line-height: 1.3; overflow-wrap: anywhere; }
.ks-row-actions { flex: none; display: flex; align-items: center; gap: 0.4rem; }
a.ks-row, .ks-row.ks-clickable { color: inherit; text-decoration: none; cursor: pointer; }
a.ks-row:hover, .ks-row.ks-clickable:hover { border-color: color-mix(in srgb, var(--ks-primary) 45%, var(--ks-border)); box-shadow: var(--ks-shadow-soft); }

.ks-row.is-now {
    border-color: var(--ks-primary);
    background: var(--ks-bg-card);
    box-shadow: 0 10px 24px -14px rgba(59, 181, 173, 0.75);
}

.ks-row.is-done .ks-row-title { text-decoration: line-through; text-decoration-color: rgba(44, 62, 80, 0.35); }
.ks-row.is-done { opacity: 0.65; }

/* Nummer-/vinkcirkel. */
.ks-check {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 2px dashed #D5CEC4;
    color: var(--ks-text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    background: transparent;
}

.ks-check.is-done { border: 0; background: var(--ks-primary); color: #fff; }
.ks-check.is-solid { border-style: solid; border-color: var(--ks-border); background: var(--ks-bg-card); }

/* Tegelkaart voor overzichten (routines, kinderen, beloningen, ...). */
.ks-tile-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem;
    border-radius: var(--ks-radius-lg);
    border: 1px solid var(--ks-border);
    background: var(--ks-bg-card);
    box-shadow: var(--ks-shadow-soft);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ks-tile-card:hover { box-shadow: var(--ks-shadow-lift); border-color: color-mix(in srgb, var(--ks-primary) 30%, var(--ks-border)); }
.ks-tile-card-head { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.min-w-0 { min-width: 0; }
.ks-tile-card-title { margin: 0; font-size: 1.05rem; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.ks-tile-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.ks-tile-card-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.ks-tile-card-foot .btn-primary, .ks-tile-card-foot .ks-grow { flex: 1 1 auto; }

/* Lege staat. */
.ks-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: var(--ks-radius-lg);
    border: 1.5px dashed #DDD5CA;
    background: color-mix(in srgb, var(--ks-bg-card) 70%, transparent);
}

.ks-empty .ks-tile { margin: 0 auto 0.9rem; }
.ks-empty h2, .ks-empty h3, .ks-empty h4, .ks-empty h5 { font-weight: 900; font-size: 1.15rem; margin-bottom: 0.35rem; }
.ks-empty p { color: var(--ks-text-muted); max-width: 32rem; margin: 0 auto 1rem; }

/* Sectietitel binnen een pagina. */
.ks-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 900;
    margin: 0 0 0.75rem;
}

/* ----- Donkere modus voor de nieuwe bouwstenen ----- */
.dark-mode .ks-picto { background: #f4f1ec; border-color: transparent; }
.dark-mode .ks-check { border-color: #4a505c; }
.dark-mode .ks-empty { border-color: var(--ks-border); }
.dark-mode .ks-tile { color: color-mix(in srgb, var(--tile) 75%, #fff); background: color-mix(in srgb, var(--tile) 18%, var(--ks-bg-card)); }
.dark-mode .ks-pill-soft { color: #9EE6E0; }
.dark-mode .ks-icon-btn.is-danger:hover { background: #3a1f1f; color: #ff9b9b; border-color: #5a2d2d; }
.dark-mode .btn-outline-secondary, .dark-mode .btn-light { --bs-btn-hover-border-color: var(--ks-border); --bs-btn-active-border-color: var(--ks-border); }
.dark-mode .alert-info, .dark-mode .alert-primary { --bs-alert-bg: #1d3432; --bs-alert-color: #9EE6E0; --bs-alert-border-color: #28504c; }
.dark-mode .alert-success { --bs-alert-bg: #1d3325; --bs-alert-color: #9AD9AE; --bs-alert-border-color: #2a4d36; }
.dark-mode .alert-warning { --bs-alert-bg: #3a331c; --bs-alert-color: #F2D774; --bs-alert-border-color: #574b22; }
.dark-mode .alert-danger { --bs-alert-bg: #3a1f1f; --bs-alert-color: #ff9b9b; --bs-alert-border-color: #5a2d2d; }
.dark-mode .badge.bg-primary, .dark-mode .badge.bg-info, .dark-mode .badge.text-bg-primary, .dark-mode .badge.text-bg-info { background-color: #1d3432 !important; color: #9EE6E0 !important; }
.dark-mode .badge.bg-success, .dark-mode .badge.text-bg-success { background-color: #1d3325 !important; color: #9AD9AE !important; }
.dark-mode .badge.bg-warning, .dark-mode .badge.text-bg-warning { background-color: #3a331c !important; color: #F2D774 !important; }
.dark-mode .badge.bg-danger, .dark-mode .badge.text-bg-danger { background-color: #3a1f1f !important; color: #ff9b9b !important; }
.dark-mode .form-select { background-color: #2a2e36; color: var(--ks-text); border-color: var(--ks-border); }
.dark-mode .form-control:disabled, .dark-mode .form-control[readonly] { background-color: var(--ks-surface-2); }

/* Zoekbalk in pilvorm (zoekveld + optionele filter + knop). */
.ks-search {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 1.1rem;
    border: 1px solid var(--ks-border);
    background: var(--ks-bg-card);
    box-shadow: var(--ks-shadow-soft);
}
.ks-search-icon { position: absolute; left: 1.1rem; top: 1.15rem; pointer-events: none; color: var(--ks-text-muted); }
.ks-search > .form-control { flex: 1 1 14rem; min-width: 0; border: 0; box-shadow: none; padding-left: 2.4rem; background: transparent; }
.ks-search > .form-select { flex: 0 1 15rem; border: 0; border-radius: 0.8rem; background-color: var(--ks-surface-2); box-shadow: none; font-weight: 700; }

/* Koppen iets steviger, in lijn met de rest van de vormgeving. */
h1, .h1 { font-weight: 900; }
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 { font-weight: 800; }

/* Beeldvlak bovenin een kaart volgt de afgeronde hoeken van de kaart. */
.card > .card-img-top-wrapper {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    background-color: var(--ks-surface-2) !important;
}

/* Segmentknop (bijv. Maand / Jaar). */
.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: var(--ks-bg-card);
    --bs-nav-pills-link-active-color: var(--ks-text);
    --bs-nav-link-color: var(--ks-text-muted);
    --bs-nav-link-hover-color: var(--ks-text);
    --bs-nav-link-font-weight: 800;
}
.nav-pills.bg-light { background-color: var(--ks-surface-2) !important; border-radius: 999px !important; }
.nav-pills .nav-link.active { box-shadow: 0 1px 2px rgba(44, 62, 80, 0.08), 0 4px 12px -6px rgba(44, 62, 80, 0.3); }
.display-6 { font-weight: 900; letter-spacing: -0.02em; }