/* ===== 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;
}

/* ===== Subtiele kleuren voor de iconen in het hoofdmenu en de footer-knoppen =====
   Deze regels staan globaal (i.p.v. in NavMenu.razor.css) zodat ze niet
   afhankelijk zijn van scoped-CSS bundling en gegarandeerd winnen van de
   generieke `.nav .bi { color: inherit }` regel hierboven. */
.nav-scrollable .nav-icon.bi,
.nav-scrollable .nav-link .bi {
    /* Zorg dat onze per-icoon kleuren niet door `inherit` worden overschreven. */
    color: var(--ks-nav-icon-color, inherit);
}

.nav-scrollable .bi-house-door-fill          { --ks-nav-icon-color: #A8F0EA; } /* home */
.nav-scrollable .bi-sun-fill                 { --ks-nav-icon-color: #FFE08A; } /* mijn dag / light mode */
.nav-scrollable .bi-kanban-fill              { --ks-nav-icon-color: #B8D4FF; } /* planborden */
.nav-scrollable .bi-arrow-repeat             { --ks-nav-icon-color: #C2E6CC; } /* routines */
.nav-scrollable .bi-trophy-fill              { --ks-nav-icon-color: #F2D78A; } /* beloningen */
.nav-scrollable .bi-compass-fill             { --ks-nav-icon-color: #C9DCE6; } /* rustroute */
.nav-scrollable .bi-signpost-split-fill      { --ks-nav-icon-color: #D6C8FF; } /* straksverhaal */
.nav-scrollable .bi-share-fill               { --ks-nav-icon-color: #B5DDD3; } /* gedeeld */
.nav-scrollable .bi-shop                     { --ks-nav-icon-color: #E8C8B0; } /* marketplace */
.nav-scrollable .bi-people-fill              { --ks-nav-icon-color: #F4C4D2; } /* kinderen / oudermodus family */
.nav-scrollable .bi-image-fill               { --ks-nav-icon-color: #BEDDC9; } /* afbeeldingen */
.nav-scrollable .bi-shield-lock-fill         { --ks-nav-icon-color: #C8D2DC; } /* pincode */
.nav-scrollable .bi-gear-fill                { --ks-nav-icon-color: #D8DEE6; } /* tenant beheer */
.nav-scrollable .bi-envelope-paper-fill      { --ks-nav-icon-color: #D2D9E2; } /* uitnodigingen */
.nav-scrollable .bi-credit-card-2-front-fill { --ks-nav-icon-color: #A8E0D6; } /* abonnement */
.nav-scrollable .bi-shield-shaded            { --ks-nav-icon-color: #C9BEE6; } /* admin */
.nav-scrollable .bi-clipboard-check-fill     { --ks-nav-icon-color: #C9BEE6; } /* template moderatie */
.nav-scrollable .bi-flag-fill                { --ks-nav-icon-color: #F0BFB0; } /* meldingen */

/* Footer / mode-toggle knoppen onderaan */
.nav-scrollable .bi-emoji-smile-fill         { --ks-nav-icon-color: #FFE08A; } /* actief kind / kindmodus */
.nav-scrollable .bi-arrow-left-right         { --ks-nav-icon-color: #C2E6CC; } /* ander kind */
.nav-scrollable .bi-moon-stars-fill          { --ks-nav-icon-color: #D6C8FF; } /* dark mode */
.nav-scrollable .bi-box-arrow-right          { --ks-nav-icon-color: #F0BFB0; } /* uitloggen */
.nav-scrollable .bi-box-arrow-in-right       { --ks-nav-icon-color: #A8F0EA; } /* inloggen */
.nav-scrollable .bi-stars                    { --ks-nav-icon-color: #F2D78A; } /* registreren */
.nav-scrollable .bi-unlock-fill              { --ks-nav-icon-color: #F4C4D2; } /* oudermodus single */
.nav-scrollable .bi-hourglass-split          { --ks-nav-icon-color: #D8DEE6; } /* logging out */
.nav-scrollable .bi-person-circle            { --ks-nav-icon-color: #FFFFFF; } /* avatar */

/* Wanneer een nav-link actief is, laat het icoon meekleuren met de witte tekst. */
.nav-scrollable .nav-link.active .bi {
    --ks-nav-icon-color: #ffffff;
}

/* 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 */

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;
}

/* ===== Home / Hero ===== */

.home-logo {
    width: 140px;
    height: auto;
    border-radius: 1.5rem;
    box-shadow: var(--ks-shadow-hover);
}

/* ===== 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 .sidebar {
    background: linear-gradient(170deg, #2a8f89 0%, #1f7a74 40%, #6d5aad 100%);
}

.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);
}