/* ─── Clinicom Auth CSS ───────────────────────────────────────────────────── */

.auth-brand-panel {
    background: linear-gradient(160deg, #1a1d21 0%, #202124 60%, #1c2620 100%);
    position: relative;
    overflow: hidden;
}
.auth-brand-panel::before {
    content: '';
    position: absolute;
    top: -20%; right: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(184,155,94,.12) 0%, transparent 70%);
    pointer-events: none;
}

.auth-logo {
    display: flex; align-items: center; gap: 12px;
}
.auth-logo-icon {
    width: 44px; height: 44px;
    background: var(--gold, #B89B5E);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    flex-shrink: 0;
}

.auth-brand-content { padding: 40px 0; }
.auth-brand-headline {
    font-size: 34px; font-weight: 700;
    line-height: 1.15; letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 20px;
}
.auth-brand-subtext {
    font-size: 15px; color: rgba(255,255,255,.55);
    line-height: 1.7; max-width: 380px;
}

.auth-brand-stats {
    display: flex; gap: 32px; margin-top: 40px;
}
.auth-stat { display: flex; flex-direction: column; gap: 4px; }
.auth-stat-value { font-size: 20px; font-weight: 700; color: var(--gold, #B89B5E); }
.auth-stat-label { font-size: 12px; color: rgba(255,255,255,.4); }

.auth-brand-footer { font-size: 12px; color: rgba(255,255,255,.2); }

/* ─── Form Panel ───────────────────────────────────────────────────────────── */
.auth-form-container { width: 100%; max-width: 400px; }
.auth-form-header { margin-bottom: 32px; }
.auth-logo-mobile { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.auth-logo-icon-sm {
    width: 32px; height: 32px;
    background: #202124;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #B89B5E;
}
.auth-form-title    { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: #171717; }
.auth-form-subtitle { font-size: 14px; color: #6B6B6B; margin-top: 4px; }

/* ─── Alert ─────────────────────────────────────────────────────────────────── */
.auth-alert {
    border-radius: 8px; padding: 12px 14px;
    font-size: 13.5px; margin-bottom: 20px;
}
.auth-alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.auth-alert-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }

/* ─── Auth Form ─────────────────────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.form-group   { display: flex; flex-direction: column; }
.form-label   { font-size: 13px; font-weight: 500; color: #171717; margin-bottom: 6px; }
.form-input {
    font-family: 'Inter', sans-serif;
    font-size: 14px; color: #171717;
    background: #fff;
    border: 1px solid #E6E1D8;
    border-radius: 8px; padding: 11px 14px;
    outline: none; width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: #B89B5E; box-shadow: 0 0 0 3px rgba(184,155,94,.12); }
.form-input.is-invalid { border-color: #B94A48; }
.field-error { font-size: 12px; color: #B94A48; margin-top: 4px; }

.input-password-wrapper { position: relative; }
.input-password-wrapper .form-input { padding-right: 42px; }
.input-password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #6B6B6B; padding: 2px;
}
.input-password-toggle:hover { color: #171717; }

/* ─── Submit Button ─────────────────────────────────────────────────────────── */
.btn-auth-submit {
    width: 100%; padding: 12px;
    background: #202124; color: #fff;
    border: none; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600;
    cursor: pointer; margin-top: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.btn-auth-submit:hover { background: #2d3035; }
.btn-submit-loader { display: flex; align-items: center; gap: 8px; }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.auth-form-footer { margin-top: 24px; text-align: center; }
.auth-link { color: #B89B5E; text-decoration: none; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }