/* =========================================================
   Design tokens – 123parkeerplaatshuren.nl (docs/DESIGN.md)
   ========================================================= */

:root {
    /* Colors (light – design tokens) */
    --color-primary: #1E3A5F;
    --color-primary-dark: #152a45;
    --color-primary-light: #2a4a75;
    --color-secondary: #2ECC71;
    --color-secondary-dark: #27ae60;
    --color-accent: #FF6B35;
    --color-accent-dark: #e55a2b;
    --color-background: #F8F9FA;
    --color-text: #2D3436;
    --color-text-light: #636E72;
    --color-white: #ffffff;
    --color-surface: #ffffff;
    --color-border: #f0f0f0;
    --color-gray-200: #e5e7eb;
    --color-hero-from: #e8f4fd;
    --color-hero-mid: #f0fdf4;
    --color-hero-to: #F8F9FA;
    /* Typography */
    --font-sans: "Inter", system-ui, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    /* Layout */
    --max-content-width: 80rem; /* max-w-7xl */
    --page-padding-x: 1rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    /* Header */
    --navbar-height: 4rem;
    --navbar-height-md: 5rem;
}

@media (min-width: 640px) {
    :root {
        --page-padding-x: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --page-padding-x: 2rem;
    }
}

/* =========================================================
   Base
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:focus {
    outline: none;
}

a {
    /*color: inherit;*/
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   Layout primitives
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page__main {
    flex: 1 0 auto;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9375rem;
    line-height: 1.25;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn--primary {
    background-color: var(--color-primary);
    color: #ffffff !important;
    box-shadow: var(--shadow-soft);
}

    .btn--primary:hover {
        background-color: var(--color-primary-dark);
        color: #ffffff !important;
    }

a.btn--primary,
a.btn--secondary,
a.btn--accent {
    color: #ffffff !important;
}

a.btn--primary:visited,
a.btn--secondary:visited,
a.btn--accent:visited,
a.btn--primary:hover,
a.btn--secondary:hover,
a.btn--accent:hover {
    color: #ffffff !important;
}

.btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

    .btn--secondary:hover {
        background-color: var(--color-secondary-dark);
    }

.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

    .btn--accent:hover {
        background-color: var(--color-accent-dark);
    }

.btn--outline {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid rgba(30, 58, 95, 0.2);
}

    .btn--outline:hover {
        background-color: #f9fafb;
    }

/* =========================================================
   Navbar (design/index.html)
   ========================================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--navbar-height);
}

@media (min-width: 768px) {
    .navbar__inner {
        height: var(--navbar-height-md);
    }
}

.navbar__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.navbar__logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Same navy as logo-p-v1.png — avoids a halo when the P is inset. */
    background-color: #032459;
}

.navbar__logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    transform: scale(0.88);
}

.navbar__title {
    font-weight: var(--font-weight-bold);
    font-size: 1rem; /* mobile */
    line-height: 1.2;
    color: var(--color-primary);
    display: inline;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .navbar__title {
        font-size: 1.125rem; /* sm–md intermediate */
    }
}

@media (min-width: 1024px) {
    .navbar__title {
        font-size: 1.25rem; /* lg+ desktop */
    }
}

.navbar__title-tld {
    color: var(--color-secondary);
}

.navbar__menu {
    display: none;
    align-items: center;
    gap: 2rem;
}

/* Mobile / tablet drawer (hamburger) — until lg */
.navbar__menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    padding: 0.75rem 1rem 1rem;
    z-index: 50;
}

.navbar__menu.is-open .navbar__link {
    display: block;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-xl);
}

.navbar__menu.is-open .navbar__link:hover {
    background: rgba(30, 58, 95, 0.06);
}

.navbar__menu-auth {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.navbar__menu-cta {
    text-align: center;
    justify-content: center;
}

/* Horizontal nav from lg — avoids logo/link collision in md range */
@media (min-width: 1024px) {
    .navbar__menu {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .navbar__menu.is-open {
        display: flex;
        flex-direction: row;
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .navbar__menu-auth {
        display: none;
    }
}

.navbar__link {
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s ease;
}

    .navbar__link:hover {
        color: var(--color-primary);
    }

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Alleen als Inloggen/Registreren verborgen zijn: toggle dichter bij hamburger */
@media (max-width: 639px) {
    .navbar__actions {
        gap: 0.25rem;
    }
}

.navbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
}

.navbar__toggle:hover {
    background: rgba(30, 58, 95, 0.06);
}

@media (min-width: 1024px) {
    .navbar__toggle {
        display: none;
    }
}

.navbar__login {
    display: none;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s ease;
}

    .navbar__login:hover {
        color: var(--color-primary-dark);
    }

@media (min-width: 640px) {
    .navbar__login {
        display: inline-flex;
    }
}

@media (max-width: 639px) {
    .navbar__actions .btn--accent {
        display: none;
    }
}

/* Smaller than 375px only; at 375 (device toolbar) theme-toggle remains visible */
@media (max-width: 374px) {
    .navbar__actions .theme-toggle {
        display: none;
    }
}

/* =========================================================
   Footer (design/index.html)
   ========================================================= */

.footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.footer__brand {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .footer__brand {
        grid-column: span 1;
    }
}

.footer__brand-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer__logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-xl);
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer__brand-name {
    font-weight: var(--font-weight-bold);
    font-size: 1.125rem;
}

.footer__tagline {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer__heading {
    margin: 0 0 1rem;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
}

.footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

    .footer__link:hover {
        color: var(--color-white);
    }

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 768px) {
    .footer__bottom {
        flex-direction: row;
    }
}

.footer__copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* =========================================================
   Home – hero
   ========================================================= */

.hero {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0fdf4 50%, var(--color-background) 100%);
    padding: 3rem 0 5rem;
}

@media (min-width: 768px) {
    .hero {
        padding: 5rem 0 7rem;
    }
}

.hero__inner {
    text-align: center;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.hero__title {
    margin: 0 0 1.5rem;
    font-size: 2.25rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
    line-height: 1.15;
}

@media (min-width: 640px) {
    .hero__title {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {
    .hero__title {
        font-size: 3.75rem;
    }
}

.hero__title-accent {
    color: var(--color-secondary);
}

.hero__subtitle {
    margin: 0 auto 2rem;
    max-width: 36rem;
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .hero__subtitle {
        font-size: 1.25rem;
    }
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .hero__actions {
        flex-direction: row;
        align-items: center;
    }

        .hero__actions .btn {
            padding: 1rem 2rem;
        }
}

/* =========================================================
   Auth forms (login / register / forgot password)
   ========================================================= */

.auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem var(--page-padding-x);
    background: linear-gradient(135deg, #e8f4fd 0%, #f0fdf4 50%, var(--color-background) 100%);
}

.auth__wrap {
    width: 100%;
    max-width: 28rem;
}

.auth__wrap--wide {
    max-width: 32rem;
}

.auth-card {
    background: var(--color-white);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-card);
    padding: 2rem;
}

@media (min-width: 768px) {
    .auth-card {
        padding: 2.5rem;
    }
}

.auth-card--center {
    text-align: center;
}

.auth-card__header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-card__logo {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: var(--radius-2xl);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: var(--radius-2xl);
    background: rgba(30, 58, 95, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-card__icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }

.auth-card__success-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-full);
    background: rgba(46, 204, 113, 0.15);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-card__success-icon svg {
        width: 2rem;
        height: 2rem;
    }

.auth-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .auth-card__title {
        font-size: 1.875rem;
    }
}

.auth-card__subtitle {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.5;
}

.auth-card__subtitle--small {
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.auth-sent-email {
    margin: 0.5rem 0 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-label {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.auth-label-hint {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-light);
}

.auth-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .auth-input::placeholder {
        color: #9ca3af;
    }

    .auth-input:focus {
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
    }

.auth-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.auth-check--start {
    align-items: flex-start;
}

    .auth-check--start label {
        line-height: 1.4;
    }

.auth-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-secondary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.auth-submit {
    width: 100%;
    padding: 1rem 1.25rem;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
}

    .auth-submit:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.auth-link {
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s ease;
}

    .auth-link:hover {
        color: var(--color-secondary-dark);
    }

.auth-link--strong {
    font-weight: var(--font-weight-semibold);
}

.auth-footer-text {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* Divider “of” + Google social button (design/inloggen + registreren) */
.auth-divider {
    position: relative;
    margin: 2rem 0;
    text-align: center;
}

    .auth-divider::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        border-top: 1px solid var(--color-gray-200, #e5e7eb);
    }

.auth-divider__text {
    position: relative;
    display: inline-block;
    padding: 0 1rem;
    background: var(--color-white, #fff);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.auth-social-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Google-knop: fallback als component-CSS isolation faalt; icoon blijft 20×20 */
.auth-social-wrap .auth-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

    .auth-social-wrap .auth-social:hover {
        background: #f9fafb;
        color: var(--color-text);
        text-decoration: none;
    }

.auth-social-wrap .auth-social svg,
.auth-social-wrap .auth-social__icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    max-width: 1.25rem !important;
    min-height: 1.25rem !important;
    max-height: 1.25rem !important;
    flex-shrink: 0;
}

.auth-legal {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

    .auth-legal a {
        text-decoration: underline;
    }

        .auth-legal a:hover {
            color: var(--color-primary);
        }

.auth-validation {
    font-size: 0.8125rem;
    color: #e50000;
}

.auth-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    line-height: 1.4;
}

.auth-alert--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.auth-alert--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    margin-bottom: 1.25rem;
}

.auth-success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-tip {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-2xl);
    text-align: center;
}

    .auth-tip p {
        margin: 0;
        font-size: 0.75rem;
        color: var(--color-text-light);
    }

    .auth-tip strong {
        color: var(--color-primary);
    }

/* =========================================================
   Blazor chrome
   ========================================================= */

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

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

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Er is een fout opgetreden.";
    }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-secondary);
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.step-active {
    background-color: #2ECC71;
    color: white;
}

.step-done {
    background-color: #1E3A5F;
    color: white;
}

.step-inactive {
    background-color: #e5e7eb;
    color: #636E72;
}

.file-upload-area {
    border: 2px dashed #d1d5db;
    transition: all 0.2s ease;
}

    .file-upload-area:hover,
    .file-upload-area.dragover {
        border-color: #2ECC71;
        background-color: #f0fdf4;
    }

.btn-primary {
    transition: all 0.2s ease;
}

    .btn-primary:hover {
        transform: translateY(-1px);
    }
/* ===== Content pages (faq, hoe-het-werkt, over-ons, legal) ===== */
.hero-gradient {
    background: linear-gradient(135deg, var(--color-hero-from) 0%, var(--color-hero-mid) 50%, var(--color-hero-to) 100%);
}

/* Dark: hero = middenlaag (lichter dan navbar, anders dan page-bg) */
html.dark .hero-gradient {
    background:
        linear-gradient(180deg, transparent 55%, var(--color-background) 100%),
        linear-gradient(160deg, var(--color-hero-from) 0%, var(--color-hero-mid) 45%, var(--color-hero-to) 100%);
}

/* Dark navbar: eigen zone, subtiele ondergrens t.o.v. hero */
html.dark .navbar {
    background-color: color-mix(in srgb, var(--color-navbar) 94%, transparent);
    border-bottom-color: color-mix(in srgb, #ffffff 7%, transparent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.18);
}

html.dark .navbar__menu.is-open {
    background: var(--color-navbar);
    border-bottom-color: color-mix(in srgb, #ffffff 7%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.shadow-soft {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.btn-primary {
    transition: all 0.2s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
}
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary svg {
    transform: rotate(180deg);
}
/* CTA contrast: never dark text on filled primary/secondary/accent buttons */
a.bg-primary, a.bg-secondary, a.bg-accent,
button.bg-primary, button.bg-secondary, button.bg-accent,
.account-cta-primary, .account-cta-secondary {
    color: #ffffff !important;
    text-decoration: none !important;
}
a.bg-primary:hover, a.bg-secondary:hover, a.bg-accent:hover,
a.bg-primary:visited, a.bg-secondary:visited, a.bg-accent:visited,
a.bg-primary:focus, a.bg-secondary:focus, a.bg-accent:focus,
button.bg-primary:hover, button.bg-secondary:hover, button.bg-accent:hover,
.account-cta-primary:hover, .account-cta-secondary:hover {
    color: #ffffff !important;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   Admin layout – mobile nav (CSS checkbox, Static SSR)
   ========================================================= */
.admin-nav-toggle:checked ~ .admin-nav-drawer {
    transform: translateX(0);
}

/* =========================================================
   Date field (hero “Beschikbaar vanaf” + search) – custom chevron
   Hides native Android/Samsung arrows; whole field opens picker
   ========================================================= */
.date-field {
    position: relative;
}

.date-field__input,
.hero-vanaf-date {
    position: relative;
    cursor: pointer;
    color-scheme: light;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html.dark .date-field__input,
html.dark .hero-vanaf-date {
    color-scheme: dark;
}

/* Full-field hit target; hide native calendar glyph / system chevron */
.date-field__input::-webkit-calendar-picker-indicator,
.hero-vanaf-date::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.date-field__input::-webkit-inner-spin-button,
.date-field__input::-webkit-clear-button,
.hero-vanaf-date::-webkit-inner-spin-button,
.hero-vanaf-date::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* Custom chevron (right); pointer-events none so picker still opens */
.date-field__chevron {
    position: absolute;
    inset-block: 0;
    right: 0.75rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
    color: #9ca3af; /* gray-400 */
}

html.dark .date-field__chevron {
    color: var(--color-gray-400);
}

.date-field__chevron svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Empty hero field: hide browser “dd-mm-jjjj”; show mockup placeholder */
.hero-vanaf:not(.has-value) .hero-vanaf-date,
.hero-vanaf:not(.has-value) .hero-vanaf-date::-webkit-datetime-edit {
    color: transparent;
}

.hero-vanaf.has-value .hero-vanaf-ph {
    display: none;
}

.hero-vanaf.has-value .hero-vanaf-date {
    color: var(--color-text);
}


/* =========================================================
   Dark mode (html.dark) – soft brand palette (niet neon / niet bijna-zwart)
   Tokens + overrides for site.css and Tailwind theme vars
   ========================================================= */

html.dark {
    color-scheme: dark;

    /* Brand fills (buttons, logo tile, admin sidebar) – light mode navy/green/orange */
    --color-primary: #1E3A5F;
    --color-primary-dark: #152a45;
    --color-primary-light: #2a4a75;
    --color-secondary: #3d9b6a; /* demped groen – geen neon */
    --color-secondary-dark: #348557;
    --color-accent: #e67a45; /* oranje iets rustiger, nog herkenbaar */
    --color-accent-dark: #cf6634;

    /*
     * Drie layout-zones (zichtbaar gescheiden, soft):
     *  1) navbar  – donkerst
     *  2) hero    – lichter vlak
     *  3) page-bg – tussenin / content
     */
    --color-navbar: #12171f;
    --color-background: #161b26; /* page + content */
    --color-surface: #1e2636; /* cards / stats-balk */
    --color-text: #dce1e8;
    --color-text-light: #9aa3b2;
    --color-border: #2c3444;
    --color-gray-200: #3a4356;

    /* Hero: lichter dan navbar én page-bg */
    --color-hero-from: #222b3c;
    --color-hero-mid: #1e2738;
    --color-hero-to: #1a2130;

    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.28);
    --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.32);
    --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.38);

    /* Tailwind gray / soft status (zelfde namen als app.css theme) */
    --color-gray-50: #1a2030;
    --color-gray-100: #222a3a;
    --color-gray-300: #4a5568;
    --color-gray-400: #8b95a8;
    --color-gray-500: #9aa3b2;
    --color-gray-600: #c5cbd6;
    --color-red-50: #3a1f24;
    --color-red-100: #4a282e;
    --color-blue-50: #1a2436;
    --color-blue-100: #222e42;
    --color-green-50: #1a2822;
    --color-green-100: #22322a;
    --color-amber-50: #2a2418;
    --color-amber-100: #342c1c;

    /* Heading / wordmark (niet vaal blauw) */
    --color-heading: #f0f2f5;
    --color-logo-wordmark: #f0f2f5;
    --color-logo-tld: #6aaf88;
}

/* Surfaces that used hard-coded white / light gray utilities */
html.dark .bg-white {
    background-color: var(--color-surface) !important;
}

html.dark .bg-white\/90 {
    background-color: color-mix(in srgb, var(--color-surface) 90%, transparent) !important;
}

html.dark .bg-white\/95 {
    background-color: color-mix(in srgb, var(--color-surface) 95%, transparent) !important;
}

/* Keep translucent white on primary (admin sidebar) readable */
html.dark .bg-primary .bg-white\/15,
html.dark .bg-primary .hover\:bg-white\/10:hover {
    /* leave as white mix on primary brand blocks */
}

html.dark .text-white {
    color: #ffffff !important;
}

html.dark .placeholder-gray-400::placeholder {
    color: var(--color-gray-400);
}

/* Soft status / alert panels on dark */
html.dark .bg-red-50 {
    background-color: var(--color-red-50) !important;
}

html.dark .border-red-100 {
    border-color: #7f1d1d !important;
}

html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-500 {
    color: #e8a0a0 !important;
}

html.dark .text-accent {
    color: var(--color-accent) !important;
}

/* Tables / modals / badges */
html.dark table,
html.dark .table {
    color: var(--color-text);
}

html.dark tr,
html.dark th,
html.dark td {
    border-color: var(--color-border);
}

html.dark .bg-amber-50 {
    background-color: var(--color-amber-50) !important;
}

html.dark .bg-amber-100 {
    background-color: var(--color-amber-100) !important;
}

html.dark .bg-blue-50 {
    background-color: var(--color-blue-50) !important;
}

html.dark .bg-green-50 {
    background-color: var(--color-green-50) !important;
}

html.dark .ring-gray-200,
html.dark .ring-gray-100 {
    --tw-ring-color: var(--color-border);
}

html.dark .bg-secondary\/10 {
    background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent) !important;
}

html.dark .border-secondary\/20 {
    border-color: color-mix(in srgb, var(--color-secondary) 25%, transparent) !important;
}

html.dark .bg-primary\/5,
html.dark .bg-primary\/10,
html.dark .bg-primary\/15 {
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

/* Listing-card kenmerk-chips: leesbaar op surface, soft (geen neon) */
html.dark .listing-chip {
    background-color: color-mix(in srgb, #8aa4c4 18%, var(--color-surface)) !important;
    color: #c9d5e6 !important;
    border: 1px solid color-mix(in srgb, #8aa4c4 24%, transparent);
}

html.dark .border-primary\/10,
html.dark .border-primary\/20 {
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

/* Auth screens (login / register / forgot) – soft dark, same tokens as rest of site */
html.dark .auth {
    background: linear-gradient(
        135deg,
        var(--color-hero-from) 0%,
        var(--color-hero-mid) 50%,
        var(--color-background) 100%
    );
}

html.dark .auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

html.dark .auth-card__title,
html.dark .auth-sent-email {
    color: var(--color-heading);
}

html.dark .auth-card__icon {
    background: color-mix(in srgb, #8aa4c4 18%, var(--color-surface));
    color: var(--color-heading);
}

html.dark .auth-input {
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text);
}

html.dark .auth-input::placeholder {
    color: var(--color-gray-400);
}

html.dark .auth-input:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 22%, transparent);
}

html.dark .auth-divider::before {
    border-top-color: var(--color-border);
}

html.dark .auth-divider__text {
    background: var(--color-surface);
    color: var(--color-text-light);
}

html.dark .auth-social-wrap .auth-social {
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text);
}

html.dark .auth-social-wrap .auth-social:hover {
    background: var(--color-gray-100);
    color: var(--color-text);
}

html.dark .auth-alert--error {
    background: var(--color-red-50);
    color: #e8a0a0;
    border-color: #7f1d1d;
}

html.dark .auth-alert--success {
    background: var(--color-green-50);
    color: #8fcf9e;
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

html.dark .auth-tip {
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

html.dark .auth-tip p {
    color: var(--color-text-light);
}

/* “Tip:” gebruikt primary (navy) – in dark onleesbaar → heading */
html.dark .auth-tip strong {
    color: var(--color-heading);
}

html.dark .auth-legal a:hover {
    color: var(--color-heading);
}

html.dark .btn--outline {
    background-color: var(--color-background);
    color: var(--color-heading);
    border-color: var(--color-border);
}

html.dark .btn--outline:hover {
    background-color: var(--color-gray-100);
}

html.dark .step-inactive {
    background-color: var(--color-gray-100);
    color: var(--color-text-light);
}

html.dark .file-upload-area {
    border-color: var(--color-gray-300);
}

html.dark .file-upload-area:hover,
html.dark .file-upload-area.dragover {
    border-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

/* Theme toggle (navbar) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
}

.theme-toggle__icon {
    width: 1.25rem;
    height: 1.25rem;
}

html.dark .theme-toggle {
    color: var(--color-text-light);
}

html.dark .theme-toggle:hover {
    background: color-mix(in srgb, var(--color-heading) 8%, transparent);
    color: var(--color-heading);
}

/* Footer: diep blauw-grijs, geen harde zwart */
html.dark .footer {
    background-color: #121722;
    border-top: 1px solid var(--color-border);
}

/* Inputs with hard white */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-gray-200);
}

html.dark input:disabled,
html.dark textarea:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-text-light);
}

/* Koppen: warm off-white (niet vaal blauw, geen neon) */
html.dark .text-primary {
    color: var(--color-heading) !important;
}

html.dark .hover\:text-primary:hover {
    color: #ffffff !important;
}

html.dark .hover\:text-primary-dark:hover {
    color: #ffffff !important;
}

/* Secondary-groen dempen – links/accents, geen glow */
html.dark .text-secondary {
    color: var(--color-logo-tld) !important;
}

html.dark .hover\:text-secondary:hover,
html.dark .hover\:text-secondary-dark:hover {
    color: #7fbf9a !important;
}

/* Hero “parkeerplaats”: secondary-groen (geen oranje override) */
html.dark .hero__title-accent,
html.dark h1 .text-secondary,
html.dark h2 .text-secondary {
    color: var(--color-secondary) !important;
    text-shadow: none;
}

/* ---------- Logo / wordmark (navbar) ---------- */
html.dark .navbar__title {
    color: var(--color-logo-wordmark);
}

html.dark .navbar__title-tld {
    color: var(--color-logo-tld);
}

html.dark .navbar__link {
    color: var(--color-text);
}

html.dark .navbar__login {
    color: var(--color-text);
}

html.dark .navbar__toggle {
    color: var(--color-text);
}

html.dark .border-gray-100 {
    border-color: var(--color-border) !important;
}

html.dark .border-gray-200 {
    border-color: var(--color-gray-200) !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-border);
}

html.dark .bg-gray-50 {
    background-color: var(--color-gray-50) !important;
}

html.dark .bg-gray-50\/50 {
    background-color: color-mix(in srgb, var(--color-gray-50) 50%, transparent) !important;
}

html.dark .bg-gray-100 {
    background-color: var(--color-gray-100) !important;
}

html.dark .bg-gray-200 {
    background-color: var(--color-gray-200) !important;
}

html.dark .hover\:bg-gray-50:hover {
    background-color: var(--color-gray-100) !important;
}

html.dark .hover\:bg-gray-100:hover {
    background-color: var(--color-gray-200) !important;
}

html.dark .hover\:bg-white:hover {
    background-color: var(--color-surface) !important;
}

html.dark .from-blue-100 {
    --tw-gradient-from: var(--color-blue-100) !important;
}

html.dark .to-green-100 {
    --tw-gradient-to: var(--color-green-100) !important;
}

html.dark .shadow-soft {
    box-shadow: var(--shadow-soft) !important;
}

html.dark .shadow-card {
    box-shadow: var(--shadow-card) !important;
}

/* =========================================================
   Admin sidebar - dark mode (zelfde taal als site navbar)
   ========================================================= */

html.dark .admin-sidebar {
    background-color: var(--color-navbar) !important;
    color: var(--color-text) !important;
    border-right-color: var(--color-border) !important;
    box-shadow: none;
}

html.dark .admin-sidebar .border-white\/10,
html.dark .admin-sidebar .border-t,
html.dark .admin-sidebar .border-b {
    border-color: var(--color-border) !important;
}

/* Wordmark */
html.dark .admin-sidebar .font-bold.text-sm {
    color: var(--color-logo-wordmark) !important;
}

html.dark .admin-sidebar .text-white\/60 {
    color: var(--color-text-light) !important;
}

/* P-logo tile (navy + witte P, zoals site-navbar) */
html.dark .admin-sidebar .w-9.rounded-lg {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html.dark .admin-sidebar .w-9.rounded-lg span {
    color: #ffffff !important;
}

/* Nav links – inactief */
html.dark .admin-sidebar nav a {
    color: var(--color-text-light) !important;
    background-color: transparent;
}

html.dark .admin-sidebar nav a:hover {
    background-color: color-mix(in srgb, var(--color-surface) 85%, transparent) !important;
    color: var(--color-heading) !important;
}

/* Actief: soft surface + lichte rand */
html.dark .admin-sidebar nav a.bg-white\/15 {
    background-color: var(--color-surface) !important;
    color: var(--color-heading) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 90%, transparent);
}

/* Footer link “Terug naar site” (sticky via flex-shrink-0) */
html.dark .admin-sidebar > .flex-shrink-0 a,
html.dark .admin-sidebar .text-white\/70 {
    color: var(--color-text-light) !important;
}

html.dark .admin-sidebar > .flex-shrink-0 a:hover,
html.dark .admin-sidebar .text-white\/70:hover {
    background-color: color-mix(in srgb, var(--color-surface) 85%, transparent) !important;
    color: var(--color-heading) !important;
}

/* Close button in mobile drawer */
html.dark .admin-sidebar label.hover\:bg-white\/10:hover {
    background-color: color-mix(in srgb, var(--color-surface) 85%, transparent) !important;
    color: var(--color-heading) !important;
}

html.dark .admin-nav-drawer {
    background-color: var(--color-navbar) !important;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.4);
}

html.dark .admin-nav-backdrop {
    background-color: rgba(0, 0, 0, 0.55) !important;
}