/*
 * Shared variables, forms, controls, buttons, and notices.
 */

:root {
    --mls-primary: #2271b1;
    --mls-bg: #ffffff;
    --mls-text: #0f172a;
    --mls-muted: #64748b;
    --mls-border: #e2e8f0;
    --mls-card-bg: #f8fafc;
    --mls-radius: 12px;
    --mls-radius-lg: 16px;
    --mls-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Base form layout */

.mls-form-wrapper {
    max-width: 440px;
    margin: 40px auto;
    padding: 28px;
    background: var(--mls-bg);
    border: 1px solid var(--mls-border);
    border-radius: var(--mls-radius-lg);
    box-shadow: var(--mls-shadow);
}

.mls-form-wrapper h2 {
    margin: 0 0 20px;
    color: var(--mls-text);
    text-align: center;
}

.mls-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.mls-logo img {
    max-width: 100%;
    object-fit: contain;
}

.mls-form p,
.mls-unlock-form p,
.mls-forgot-form p {
    margin: 0 0 16px;
}

.mls-form label,
.mls-unlock-form label,
.mls-forgot-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--mls-text);
    font-weight: 600;
}

/* Shared inputs */

.mls-form input[type="text"],
.mls-form input[type="email"],
.mls-form input[type="password"],
.mls-form input[type="tel"],
.mls-form input[type="date"],
.mls-unlock-form input[type="text"],
.mls-forgot-form input[type="text"],
.mls-profile-edit-form input[type="text"],
.mls-profile-edit-form input[type="date"],
.mls-profile-edit-form input[type="file"],
.mls-form select {
    width: 100%;
    padding: 11px 12px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: var(--mls-text);
}

.mls-form input:focus,
.mls-form select:focus,
.mls-unlock-form input:focus,
.mls-forgot-form input:focus,
.mls-profile-edit-form input:focus {
    border-color: var(--mls-primary);
    outline: 2px solid rgba(34, 113, 177, 0.2);
    outline: 2px solid color-mix(
        in srgb,
        var(--mls-primary) 20%,
        transparent
    );
    outline-offset: 1px;
}

/* Shared buttons */

.mls-form button,
.mls-unlock-form button,
.mls-forgot-form button {
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--mls-primary);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.mls-form button:hover,
.mls-unlock-form button:hover,
.mls-forgot-form button:hover,
.mls-button:hover,
.mls-logout-link:hover {
    filter: brightness(0.92);
}

.mls-secondary-button,
.mls-unlock-form button {
    background: #475569 !important;
}

.mls-form button:disabled,
.mls-unlock-form button:disabled,
.mls-forgot-form button:disabled,
.mls-profile-edit-form button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Links and unlock form */

.mls-links {
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
}

.mls-links a {
    color: var(--mls-primary);
    font-weight: 600;
    text-decoration: none;
}

.mls-links a:hover {
    text-decoration: underline;
}

.mls-unlock-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--mls-border);
}

/* Notices and validation */

.mls-notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.mls-error {
    border: 1px solid #f5c6c0;
    background: #fdecea;
    color: #8a1f11;
}

.mls-success {
    border: 1px solid #b7e0c3;
    background: #e7f7ed;
    color: #14532d;
}

.mls-field-message {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
}

/* Preserve hidden status messages created by signup.js. */
.mls-field-message[hidden] {
    display: none !important;
}

.mls-field-message.success {
    color: #14532d;
}

.mls-field-message.error {
    color: #b91c1c;
}

.mls-field-help {
    margin: 6px 0 0;
    color: var(--mls-muted);
    font-size: 13px;
}

.mls-recaptcha-error {
    margin-top: 12px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
}

.mls-recaptcha-error:empty {
    display: none;
}