/* =====================================================================================
   login.css - alleen wat op de pagina login.php anders is dan basis.css
   (basis.css wordt eerst geladen; regels hier gaan daarvoor)
   ===================================================================================== */
:root { --ok: #6fbf73; }
.knop { min-width: 160px; }
/* Paneel in het midden van het scherm: tussen de kop (150px) en de footer (40px), horizontaal en verticaal gecentreerd.
   Breedte 624px = 40 + 182 (labels) + 360 (veld) + 40, zodat links en rechts in het kader evenveel ruimte is. */
.werkvlak.midden {
    max-width: 624px;
    margin: 0 auto;
    min-height: calc(100vh - 6px - 150px - 40px);
    display: flex;
    align-items: center;
}
.werkvlak.midden > .paneel { width: 100%; }
.tab { color: var(--accent); }
.rij { grid-template-columns: 182px minmax(0, 1fr); }
input[type="text"], input[type="password"], select {
    background: var(--veld);
    color: var(--veld-tekst);
    border: 1px solid #9aa0a8;
    font: inherit;
    padding: 2px 5px;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}
input.breed, select.breed {
    width: 360px;
    max-width: 100%;
}
.hint-ok { color: #a9e5ac; }
.hint-fout { color: #ffb3a8; }
.uitleg {
    margin: 0 0 10px;
    line-height: 1.5;
    color: #eef0f2;
    max-width: 640px;
}
.uitleg a { color: var(--accent); }
.uitleg b { font-weight: 600; }
.eisen {
    flex-basis: 100%;
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
    font-size: 12px;
    color: #e3e5e8;
}
.eisen li {
    padding: 1px 0 1px 20px;
    position: relative;
}
.eisen li::before {
    content: "\25CB";
    position: absolute;
    left: 2px;
    color: #9aa0a8;
}
.eisen li.ok { color: #a9e5ac; }
.eisen li.ok::before {
    content: "\2713";
    color: var(--ok);
    font-weight: 700;
}
.legenda { margin: 18px 0 0; }
@media (max-width: 900px) {
    .knoppen { width: 100%; }
    .knop {
        min-width: 0;
        flex: 1 1 100px;
    }
    .rij { grid-template-columns: 1fr; }
    input.breed, select.breed { width: 100%; }
}