/* ============================================================
   Stijl-laag voor de Identity-schermen (Components/Account/*).
   Microsoft's sjabloon gebruikt overal Bootstrap-classes, maar deze app
   laadt geen Bootstrap - dus zonder dit bestand renderen die schermen kaal.
   Dit vertaalt de meestgebruikte Bootstrap-classes naar het donkere thema,
   zodat ALLE Identity-schermen (ook de zelden bezochte, zoals 2FA-instellingen
   en wachtwoord-reset) er verzorgd uitzien zonder dat elk scherm apart
   herschreven hoeft te worden. Geen scoping-klasse nodig: de rest van de app
   gebruikt overal eigen (Nederlandse) classnamen, dus deze generieke
   Bootstrap-namen botsen nergens mee. Login.razor en Register.razor hebben
   daarnaast hun eigen, volledig op maat gemaakte opmaak.
   ============================================================ */

hr {
    border: none;
    border-top: 1px solid var(--dash-card-border);
    margin: 12px 0 20px;
}

/* FocusOnNavigate (in Routes.razor) focust bij elke paginawissel de h1 voor
   toegankelijkheid - dat blijft voor schermlezers werken, maar de standaard
   blauw/witte browser-omlijning die daarbij zichtbaar verschijnt is voor
   ziende gebruikers alleen maar verwarrend ("waarom is de titel geselecteerd?"). */
h1:focus {
    outline: none;
}

section {
    max-width: 480px;
}

.form-floating,
.mb-3 {
    margin-bottom: 14px;
}

label,
.form-label {
    display: block;
    font-size: 12.5px;
    color: var(--dash-text-secondary);
    margin-bottom: 4px;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    width: 100%;
    background: var(--dash-hover-bg);
    border: 1px solid var(--dash-card-border);
    color: var(--dash-text-primary);
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--dash-amber);
}

.form-control[disabled] {
    color: var(--dash-text-secondary);
    opacity: 0.7;
}

.checkbox label,
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dash-text-secondary);
}

.btn {
    display: inline-block;
    background: transparent;
    border: 1px solid transparent;
    color: var(--dash-amber);
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.btn:hover {
    background: rgba(217, 164, 65, 0.12);
}

.btn.btn-danger {
    color: var(--dash-red);
}

.btn.btn-danger:hover {
    background: rgba(181, 82, 74, 0.12);
}

.btn.btn-link {
    background: none;
    border: none;
    color: var(--dash-amber);
    padding: 0;
    font-weight: 500;
    text-decoration: underline;
}

.w-100 {
    width: 100%;
    box-sizing: border-box;
}

.text-danger {
    color: var(--dash-red);
    font-size: 12.5px;
    display: block;
    margin-top: 3px;
}

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.alert-danger {
    background: rgba(181, 82, 74, 0.12);
    border: 1px solid var(--dash-red);
    color: var(--dash-red);
}

.alert-success {
    background: rgba(90, 168, 120, 0.12);
    border: 1px solid var(--dash-green);
    color: var(--dash-green);
}

.alert-warning {
    background: rgba(217, 164, 65, 0.12);
    border: 1px solid var(--dash-amber);
    color: var(--dash-amber);
}

.recovery-code {
    display: inline-block;
    background: var(--dash-hover-bg);
    border: 1px solid var(--dash-card-border);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    margin: 3px 0;
}

kbd {
    background: var(--dash-hover-bg);
    border: 1px solid var(--dash-card-border);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* ---- Beheer-tabellen (bv. externe logins) ---- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

table td {
    padding: 8px;
    border-bottom: 1px solid var(--dash-card-border);
}

@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .identity-kaart {
        padding: 28px 22px;
    }
}

/* ---- Accountbeheer: overzicht en dergelijke gebruiken de gedeelde .row-class ---- */
.row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

/* ---- Login/Register: eigen, volledig op maat gemaakte schil (los van de
   generieke Bootstrap-vertaling hierboven, die vooral de overige, minder
   bezochte Identity-schermen dekt) ---- */
/* De omhulling uit IdentityLayout: vult het scherm en schildert de lichte
   achtergrond, want de body zelf staat nog op de donkere variabelen. */
.identity-thema {
    min-height: 100vh;
    background: var(--dash-bg);
    color: var(--dash-text-primary);
}

.identity-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.identity-kaart {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 14px;
    padding: 36px 40px;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}

.identity-titel {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 4px;
}

.identity-invoer {
    width: 100%;
    box-sizing: border-box;
}

/* De hoofdknop op deze schermen krijgt wél een vlak. De doorzichtige .toevoeg-knop uit
   de rest van de app werkt daar, tussen andere knoppen op een volle pagina, maar op een
   verder leeg inlogscherm las hij als nog een link tussen de links eronder. Hier moet
   precies één ding eruitzien als de knop waar je op drukt.
   Donkere tekst en geen witte: op amber leest die aantoonbaar beter. */
.identity-knop-groot {
    width: 100%;
    box-sizing: border-box;
    margin-top: 22px;
    background: var(--dash-amber);
    color: var(--dash-text-primary);
    border-color: transparent;
}

/* Donkerder maken in plaats van er een tweede kleur bij te verzinnen: zo blijft dit
   kloppen als --dash-amber ooit verandert. */
.identity-knop-groot:hover {
    background: var(--dash-amber);
    filter: brightness(0.93);
}

.identity-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dash-text-secondary);
    margin-top: 14px;
    cursor: pointer;
}

.identity-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dash-card-border);
    font-size: 13px;
}

/* Het beeldmerk boven de titel op de inlog- en registratieschermen. */
.identity-merk {
    display: flex;
    margin-bottom: 14px;
}