/**
 * css/auth.css
 * Login pagina — .auth-page body klasse, .auth-box component
 */

.auth-page {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       100vh;
    padding:          var(--space-6);
    background-color: var(--clr-bg);
}

/* ─── Auth box ───────────────────────────────────────────────────────────── */

.auth-box {
    width:            100%;
    max-width:        400px;
    background-color: var(--clr-surface);
    border:           1px solid var(--clr-border);
    border-radius:    var(--radius-lg);
    padding:          var(--space-8) var(--space-8);
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-6);
}

/* ─── Logo ───────────────────────────────────────────────────────────────── */

.auth-logo {
    font-family:    var(--font-mono);
    font-size:      var(--text-xl);
    font-weight:    var(--weight-bold);
    color:          var(--clr-text);
    text-decoration: none;
    letter-spacing: -0.03em;
    align-self:     flex-start;
}

.auth-logo__prefix {
    color:       var(--clr-green);
    font-weight: var(--weight-normal);
    opacity:     0.7;
    margin-right: 2px;
}

/* ─── Titel ──────────────────────────────────────────────────────────────── */

.auth-title {
    font-family:    var(--font-mono);
    font-size:      var(--text-xl);
    font-weight:    var(--weight-bold);
    color:          var(--clr-text);
    letter-spacing: -0.02em;
    margin:         0;
}

/* ─── Foutmelding ────────────────────────────────────────────────────────── */

.auth-error {
    padding:          var(--space-3) var(--space-4);
    background-color: rgba(255, 61, 87, 0.1);
    border:           1px solid rgba(255, 61, 87, 0.3);
    border-radius:    var(--radius);
    font-family:      var(--font-mono);
    font-size:        var(--text-sm);
    color:            var(--clr-red);
}

/* ─── Formulier ──────────────────────────────────────────────────────────── */

.auth-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.auth-field {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.auth-field__label {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    color:          var(--clr-text-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth-field__input {
    appearance:       none;
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    background-color: var(--clr-bg-3);
    border:           1px solid var(--clr-border);
    border-radius:    var(--radius);
    color:            var(--clr-text);
    font-family:      var(--font-mono);
    font-size:        var(--text-base);
    outline:          none;
    transition:       border-color var(--duration-fast) var(--ease-out),
                      box-shadow   var(--duration-fast) var(--ease-out);
    box-sizing:       border-box;
}

.auth-field__input:focus {
    border-color: rgba(0, 230, 118, 0.5);
    box-shadow:   0 0 0 3px var(--clr-green-glow);
}

.auth-field__input::placeholder {
    color: var(--clr-text-3);
}

/* ─── Submit knop ────────────────────────────────────────────────────────── */

.auth-submit {
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    background-color: var(--clr-green);
    border:           none;
    border-radius:    var(--radius);
    color:            #000;
    font-family:      var(--font-mono);
    font-size:        var(--text-base);
    font-weight:      var(--weight-bold);
    letter-spacing:   0.02em;
    cursor:           pointer;
    margin-top:       var(--space-2);
    transition:       opacity     var(--duration-fast) var(--ease-out),
                      transform   var(--duration-fast) var(--ease-out);
}

.auth-submit:hover {
    opacity: 0.9;
}

.auth-submit:active {
    transform: scale(0.98);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .auth-box {
        padding: var(--space-6);
        border:  none;
        background: transparent;
    }
}