/* ---- Koppel Bootstrap-kleuren aan jouw thema ---- */
:root{
    /* laat Bootstrap primary exact jouw --color-primary gebruiken */
    --bs-primary: var(--color-primary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: #00b6a1; /* zoals je anchors */
}

/* Compacte hero bovenaan de pagina */
.hero--compact { padding: 32px 0; }

/* Actieve pill-tab in jouw primair */
.nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: #fff;
}

/* Outline-variant die past bij je thema (we gebruiken btn-outline-primary in HTML) */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Sliders & switches in jouw primair */
input[type="range"] { accent-color: var(--color-primary); }
.form-check-input { accent-color: var(--color-primary); }

/* Uitvoerbox */
.pg-generated{
    min-height: 56px;
    display: flex;
    align-items: center;
    word-break: break-all;
}

.pg-card {
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

/* (Optioneel) kleine kaartschaduw net als je site */
.card.shadow-sm { box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; }

/* ===== Forceer Bootstrap primary naar jouw thema-groen (#008374) ===== */
:root{
    /* basis */
    --bs-primary: var(--color-primary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: #00b6a1;

    /* nav-pills */
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-pills-link-active-color: #fff;
}

/* Buttons (BS 5.3 gebruikt CSS-variabelen per variant) */
.btn-primary{
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: #009d8b;        /* iets lichter, consistent met je thema */
    --bs-btn-hover-border-color: #009d8b;
    --bs-btn-active-bg: #007466;       /* donkerder voor active */
    --bs-btn-active-border-color: #007466;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

/* Outline variant in jouw groen */
.btn-outline-primary{
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

/* Sliders & switches in jouw groen */
input[type="range"]{ accent-color: var(--color-primary); }
.form-check-input{ accent-color: var(--color-primary); }

/* Actieve tab (fallback als variabelen niet pakken door overrides) */
.nav-pills .nav-link.active{ background-color: var(--color-primary); color:#fff; }

/* Monospace output */
.pg-generated{
    min-height: 56px;
    display:flex; align-items:center;
    word-break: break-all;
}

/* Forceer Bootstrap switches naar jouw thema-groen */
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .25rem rgba(0,131,116,.25); /* transparant groen */
}

/* === Range slider in jouw thema === */
input[type="range"] {
    height: 1.25rem;
    width: 100%;
    background: transparent;
}

/* Webkit (Chrome, Edge, Safari) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
    margin-top: -0.25rem; /* centreren */
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 0.5rem;
    border-radius: 0.25rem;
    background: #ddd;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: rgba(0,131,116,0.5);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
}
input[type="range"]::-moz-range-track {
    height: 0.5rem;
    border-radius: 0.25rem;
    background: #ddd;
}
input[type="range"]::-moz-range-progress {
    background: var(--color-primary);
    height: 0.5rem;
    border-radius: 0.25rem;
}

/* IE / Edge (oude engines) */
input[type="range"]::-ms-thumb {
    background: var(--color-primary);
}

/* Pills container lichtgrijs maken */
.nav-pills {
    background-color: #f8f9fa; /* zelfde tint als je voorbeeld */
    padding: .5rem;
    border-radius: .5rem;
}

/* Actieve knop met zachte shadow */
.nav-pills .nav-link.active {
    background-color: #fff;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    border-radius: .5rem;
}

/* Niet-actieve links subtiel houden */
.nav-pills .nav-link {
    color: #444;
    border-radius: .5rem;
    transition: all .2s;
}
.nav-pills .nav-link:hover {
    background-color: rgba(0,0,0,0.03);
}

/* Beperk de breedte van de generator */
.password-generator-wrapper {
    max-width: 600px;   /* of 480px als je compacter wilt */
    margin: 0 auto;     /* centreren */
}

.password-generator-wrapper .card {
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 1.5rem;
}