/* Auth Card */
.auth-card {
    width: min(420px, 92vw);
}

/* Forms & Inputs */
input[type="text"], input[type="password"], input[type="email"], .form-control {
    background: var(--color-input-bg);
    color: var(--color-accent);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
}

input::placeholder {
    color: var(--color-placeholder);
}

.dropdown-item.input {
    color: var(--color-primary-600);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Form Layout */
.auth-form {
    display: grid;
    gap: var(--gap-md);
}

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--gap-md) var(--gap-lg);
}

.form-grid .field {
    width: 100%;
    max-width: 420px;
}

.form-grid label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.form-grid .input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.form-grid .form-row-span {
    grid-column: 1 / -1;
}

/* Form Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-primary);
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: var(--color-error);
}

/* Responsive */
@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .auth-actions { 
        grid-template-columns: 1fr; 
    }
}