/* ============================================================
   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 een rand en geen vulling. De volledig
   doorzichtige .toevoeg-knop uit de rest van de app werkte hier niet: op een verder
   leeg inlogscherm las die als nog een link tussen de links eronder. Een dun randje is
   genoeg om er een knop van te maken, zonder dat het scherm een gekleurd vlak krijgt. */
.identity-knop-groot {
    width: 100%;
    box-sizing: border-box;
    margin-top: 22px;
    background: transparent;
    color: var(--dash-amber);
    border-color: var(--dash-amber);
}

/* Bij hover loopt hij pas vol - dezelfde amber, dus geen tweede kleur om bij te houden
   als --dash-amber ooit verandert. */
.identity-knop-groot:hover {
    background: color-mix(in srgb, var(--dash-amber) 12%, transparent);
}

.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;
}