/* ==========================================================================
   Interkozijn - Merkkleuren
   ==========================================================================
   Eén centrale plek voor de huisstijlkleuren (antraciet + blauw, zoals het
   Interkozijn-logo). Dit bestand wordt ná Bootstrap geladen en overschrijft
   Bootstrap's eigen kleurvariabelen, zodat bestaande .btn-primary,
   .text-primary, .bg-primary, links, etc. door de hele applicatie heen
   automatisch de merkkleur volgen - zonder dat elke losse pagina los moet
   worden aangepast.
   ========================================================================== */

:root {
    /* Basispalet */
    --ik-blue: #2f9fd6;
    --ik-blue-rgb: 47, 159, 214;
    --ik-blue-dark: #1f7fae;
    --ik-blue-dark-rgb: 31, 127, 174;
    --ik-blue-soft: #e8f4fb;
    --ik-blue-border: #bfe2f2;
    --ik-blue-emphasis: #163e52;
    --ik-charcoal: #22252b;
    --ik-charcoal-dark: #15171b;

    /* Bootstrap-kleurvariabelen overschrijven */
    --bs-primary: var(--ik-blue);
    --bs-primary-rgb: var(--ik-blue-rgb);
    --bs-primary-bg-subtle: var(--ik-blue-soft);
    --bs-primary-border-subtle: var(--ik-blue-border);
    --bs-primary-text-emphasis: var(--ik-blue-emphasis);
    --bs-link-color: var(--ik-blue);
    --bs-link-color-rgb: var(--ik-blue-rgb);
    --bs-link-hover-color: var(--ik-blue-dark);
    --bs-link-hover-color-rgb: var(--ik-blue-dark-rgb);
    --bs-list-group-active-bg: var(--ik-blue);
    --bs-list-group-active-border-color: var(--ik-blue);
    --bs-nav-pills-link-active-bg: var(--ik-blue);
    --bs-progress-bar-bg: var(--ik-blue);
    --bs-dropdown-link-active-bg: var(--ik-blue);

    /* Bestaande custom variabelenamen in style.css / admin-modern.css
       gesynchroniseerd, zodat sidebars, kaarten en badges overal dezelfde
       kleur gebruiken */
    --bp-primary: var(--ik-blue);
    --bp-primary-dark: var(--ik-blue-dark);
    --ik-primary: var(--ik-blue);
    --ik-primary-hover: var(--ik-blue-dark);
    --ik-primary-soft: var(--ik-blue-soft);
    --ik-sidebar-bg: var(--ik-charcoal-dark);
}

/* Bootstrap-knoppen zetten hun kleuren als losse component-variabelen met
   een vaste hexwaarde (dus niet via --bs-primary) - die overschrijven we
   hier expliciet, zodat elke .btn-primary/.btn-outline-primary in de hele
   applicatie meekleurt. */
.btn-primary {
    --bs-btn-bg: var(--ik-blue);
    --bs-btn-border-color: var(--ik-blue);
    --bs-btn-hover-bg: var(--ik-blue-dark);
    --bs-btn-hover-border-color: var(--ik-blue-dark);
    --bs-btn-active-bg: var(--ik-blue-dark);
    --bs-btn-active-border-color: var(--ik-blue-dark);
    --bs-btn-disabled-bg: var(--ik-blue);
    --bs-btn-disabled-border-color: var(--ik-blue);
    --bs-btn-focus-shadow-rgb: var(--ik-blue-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ik-blue);
    --bs-btn-border-color: var(--ik-blue);
    --bs-btn-hover-bg: var(--ik-blue);
    --bs-btn-hover-border-color: var(--ik-blue);
    --bs-btn-active-bg: var(--ik-blue);
    --bs-btn-active-border-color: var(--ik-blue);
    --bs-btn-disabled-color: var(--ik-blue);
    --bs-btn-disabled-border-color: var(--ik-blue);
    --bs-btn-focus-shadow-rgb: var(--ik-blue-rgb);
}

.form-check-input:checked {
    background-color: var(--ik-blue);
    border-color: var(--ik-blue);
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--ik-blue);
    box-shadow: 0 0 0 .25rem rgba(var(--ik-blue-rgb), .25);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--ik-blue) !important;
}