/**
 * SPV-huisstijl over Backpack (theme-tabler).
 *
 * Overschrijft Tabler's --tblr-*-variabelen met de echte SPV-merktokens.
 * Bron: spv.nl/resources/css/site.css (@theme-blok) + spv.nl/DESIGN.md.
 * Wordt als laatste in config/backpack/theme-tabler.php 'styles' geladen,
 * dus wint van vendor colors.css / color-adjustments.css.
 *
 * De admin draait alleen in lichte modus (showColorModeSwitcher = false),
 * dus alleen het lichte blok wordt gestyled.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root,
[data-bs-theme='light'],
[data-menu-theme='light'] {
    /* ── Typografie ── */
    --tblr-font-sans-serif: 'Poppins', ui-sans-serif, system-ui, -apple-system,
        'Segoe UI', Roboto, sans-serif;

    /* ── Primair: SPV lime ── */
    --tblr-primary: #a0c51e;
    --tblr-primary-rgb: 160, 197, 30;
    --tblr-tabler: #a0c51e;
    --tblr-tabler-rgb: 160, 197, 30;
    --tblr-primary-text-emphasis: #3d5f06;
    --tblr-primary-bg-subtle: #f7fded;
    --tblr-primary-border-subtle: #d6f3a7;

    /* Interactieve tekst: donkerdere lime (#A0C51E haalt geen AA op wit) */
    --tblr-link-color: #5f9605;
    --tblr-link-color-rgb: 95, 150, 5;
    --tblr-link-hover-color: #004526;
    --tblr-link-hover-color-rgb: 0, 69, 38;

    --tblr-focus-ring-color: rgba(160, 197, 30, 0.3);

    /* ── Tekst / achtergrond / randen: nachtblauw-schaal ── */
    --tblr-body-color: #1a2842;
    --tblr-body-color-rgb: 26, 40, 66;
    --tblr-body-bg: #f5f6f7;
    --tblr-body-bg-rgb: 245, 246, 247;
    --tblr-emphasis-color: #161f31;
    --tblr-emphasis-color-rgb: 22, 31, 49;
    --tblr-secondary: #5b6477;
    --tblr-secondary-rgb: 91, 100, 119;
    --tblr-secondary-color: rgba(26, 40, 66, 0.72);
    --tblr-secondary-color-rgb: 26, 40, 66;
    --tblr-muted: #858c99;
    --tblr-muted-rgb: 133, 140, 153;
    --tblr-tertiary-color: rgba(26, 40, 66, 0.5);
    --tblr-border-color: #e3e4e5;
    --tblr-border-color-translucent: rgba(26, 40, 66, 0.14);
    --tblr-dark: #161f31;
    --tblr-dark-rgb: 22, 31, 49;

    /* ── Feedback (SPV 600-niveaus) ── */
    --tblr-success: #5f9605;
    --tblr-success-rgb: 95, 150, 5;
    --tblr-success-text-emphasis: #3d5f06;
    --tblr-success-bg-subtle: #f7fded;
    --tblr-success-border-subtle: #d6f3a7;
    --tblr-form-valid-color: #5f9605;
    --tblr-form-valid-border-color: #5f9605;

    --tblr-info: #0284c7;
    --tblr-info-rgb: 2, 132, 199;
    --tblr-info-text-emphasis: #075985;
    --tblr-info-bg-subtle: #f0f9ff;
    --tblr-info-border-subtle: #bae6fd;

    --tblr-warning: #ea580c;
    --tblr-warning-rgb: 234, 88, 12;
    --tblr-warning-text-emphasis: #9a3412;
    --tblr-warning-bg-subtle: #fff4e5;
    --tblr-warning-border-subtle: #fed7aa;

    --tblr-danger: #e91a47;
    --tblr-danger-rgb: 233, 26, 71;
    --tblr-danger-text-emphasis: #9f1239;
    --tblr-danger-bg-subtle: #fff0f1;
    --tblr-danger-border-subtle: #fecdd3;
    --tblr-form-invalid-color: #e91a47;
    --tblr-form-invalid-border-color: #e91a47;
}

/* Primaire knop: donkere tekst op lime (Tabler zet standaard wit → onleesbaar). */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    --tblr-btn-color: #161f31;
    --tblr-btn-bg: #a0c51e;
    --tblr-btn-border-color: #a0c51e;
    --tblr-btn-hover-color: #161f31;
    --tblr-btn-hover-bg: #8fb01b;
    --tblr-btn-hover-border-color: #8fb01b;
    --tblr-btn-active-color: #161f31;
    --tblr-btn-active-bg: #729300;
    --tblr-btn-active-border-color: #729300;
    --tblr-btn-disabled-color: #161f31;
    --tblr-btn-disabled-bg: #a0c51e;
    --tblr-btn-disabled-border-color: #a0c51e;
}

.btn-outline-primary {
    --tblr-btn-color: #5f9605;
    --tblr-btn-border-color: #a0c51e;
    --tblr-btn-hover-color: #161f31;
    --tblr-btn-hover-bg: #a0c51e;
    --tblr-btn-hover-border-color: #a0c51e;
    --tblr-btn-active-color: #161f31;
    --tblr-btn-active-bg: #a0c51e;
    --tblr-btn-active-border-color: #a0c51e;
}

/* Koppen: gewichten conform DESIGN.md. */
h1, .h1, h2, .h2 { font-weight: 700; }
h3, .h3, h4, .h4 { font-weight: 600; }
h5, .h5, h6, .h6 { font-weight: 500; }

/* Merknaam/paginatitels in de nachtblauwe kleur i.p.v. zwart. */
.page-header .page-title,
.card-title {
    color: #161f31;
}

/* Gekleurde kaart-/modalkoppen in de Ontzorgplanning-schermen: nachtblauw
 * i.p.v. lime (witte tekst op lime is onleesbaar). Vervangt ook de plekken
 * die voorheen de eigen paarse accent #806cec hardcodeerden. */
.card-header.bg-primary,
.modal-header.bg-primary {
    background-color: #1a2842 !important;
    color: #fff !important;
}

/* Neutrale filterknop (was .btn-purple met #806cec) -> gedempt nachtblauw. */
.btn-purple {
    background-color: #303c54;
    border-color: #303c54;
    color: #fff;
}
.btn-purple:hover,
.btn-purple:focus {
    background-color: #1a2842;
    border-color: #1a2842;
    color: #fff;
}