/* Shared visual layer for the public authentication screens. */
:root {
    --auth-topbar: #202427;
    --auth-topbar-soft: #2b3034;
    --auth-primary: #176f62;
    --auth-primary-hover: #12584e;
    --auth-gold: #c9a85d;
    --auth-bg: #eef0ec;
    --auth-surface: #ffffff;
    --auth-muted: #707875;
    --auth-border: #d9dfda;
    --auth-danger: #b84455;
    --auth-success: #27805c;
}

.auth-page {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: #202427;
    background: var(--auth-bg);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}
.auth-page .auth-page__shell,
.auth-page .invlog2 { min-height: 100vh; height: auto; }
.auth-page .invlog2 > .row { min-height: 100vh; }
.auth-page .invlog3 {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 3rem;
    color: #fff;
    background: linear-gradient(135deg, #2b2f32 0%, #4a4d4f 58%, #b8954f 135%) !important;
}
.auth-page .invlog3::before,
.auth-page .invlog3::after {
    position: absolute;
    content: '';
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--auth-gold) 30%, transparent);
    border-radius: 50%;
}
.auth-page .invlog3::before { width: 390px; height: 390px; top: -170px; right: -150px; }
.auth-page .invlog3::after { width: 280px; height: 280px; bottom: -145px; left: -100px; }
.auth-page .invlog3 > * { position: relative; z-index: 1; }
.auth-page .invlog3 p { max-width: 340px; margin-bottom: 0; color: rgba(255,255,255,.72) !important; line-height: 2; }
.auth-page .invloglogo { width: min(220px, 58vw); height: auto; object-fit: contain; }
.auth-page .invlog4 {
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3.5rem);
    background: linear-gradient(135deg, #f5f6f2 0%, #edf1ed 52%, #e5e9e3 100%) !important;
}
.auth-page .login-card,
.auth-page .siform-container {
    width: min(100%, 520px);
    max-width: 520px;
    padding: clamp(1.25rem, 3vw, 2.35rem);
    color: #202427;
    background: var(--auth-surface) !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 45px rgba(32, 36, 39, .11) !important;
}
.auth-login .login-card { max-width: 510px; }
.auth-page .card-body { padding: 0; }
.auth-page .card-title,
.auth-page .siform-header h3 { color: #202427 !important; font-weight: 800; }
.auth-page .siform-header p,
.auth-page .text-muted { color: var(--auth-muted) !important; }
.auth-page .nav-tabs { gap: .35rem; border-bottom: 1px solid var(--auth-border); }
.auth-page .nav-tabs .nav-link {
    color: var(--auth-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    font-size: .82rem;
    font-weight: 700;
}
.auth-page .nav-tabs .nav-link:hover { color: var(--auth-primary); background: rgba(23,111,98,.07); }
.auth-page .nav-tabs .nav-link.active { color: var(--auth-primary); border-bottom-color: var(--auth-gold); background: transparent; }
.auth-page .form-label { color: #3c4541; font-size: .82rem; font-weight: 700; }
.auth-page .form-control,
.auth-page .input-group .form-control {
    min-height: 44px;
    padding: .65rem .8rem;
    color: #202427;
    background: #f8faf8;
    border: 1px solid var(--auth-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.auth-page .form-control::placeholder { color: #9aa39e; }
.auth-page .form-control:focus { background: #fff; border-color: var(--auth-primary) !important; box-shadow: 0 0 0 3px rgba(23,111,98,.14) !important; }
.auth-page .input-group .btn { min-height: 44px; border-radius: 6px !important; font-weight: 700; }
.auth-page .btn-primary { color: #fff !important; background: var(--auth-primary) !important; border-color: var(--auth-primary) !important; }
.auth-page .btn-primary:hover, .auth-page .btn-primary:focus-visible { background: var(--auth-primary-hover) !important; border-color: var(--auth-primary-hover) !important; }
.auth-page .btn-success { color: #fff !important; background: var(--auth-success) !important; border-color: var(--auth-success) !important; }
.auth-page .btn-light { color: #3c4541 !important; background: #f2f4f1 !important; border-color: var(--auth-border) !important; }
.auth-page .btn-outline-secondary { color: var(--auth-muted) !important; border-color: var(--auth-border) !important; }
.auth-page .btn-outline-secondary:hover { color: #202427 !important; background: #f2f4f1 !important; }
.auth-page .info-box,
.auth-page .summary-item { color: #4f5954; background: #f4f7f4; border-color: var(--auth-primary); }
.auth-page .info-box-success { background: #f1f8f3; border-color: var(--auth-success); }
.auth-page .step-circle { color: var(--auth-muted); background: #f2f4f1; border-color: var(--auth-border); }
.auth-page .step-circle.active { color: #fff; background: var(--auth-primary); border-color: var(--auth-primary); box-shadow: 0 0 0 4px rgba(23,111,98,.14); }
.auth-page .step-circle.completed { color: #fff; background: var(--auth-success); border-color: var(--auth-success); }
.auth-page .step-line { background: var(--auth-border); }
.auth-page .step-line.completed { background: var(--auth-success); }
.auth-page .username-display { color: var(--auth-primary); background: rgba(23,111,98,.09); }
.auth-page .error-feedback, .auth-page .text-danger { color: var(--auth-danger) !important; }
.auth-page .success-feedback { color: var(--auth-success) !important; }
.auth-page .alert { border-radius: 6px !important; }
.auth-page .btn-close:focus { box-shadow: 0 0 0 3px rgba(23,111,98,.14); }

@media (max-width: 991.98px) {
    .auth-page .invlog3 { min-height: 230px; padding: 2rem 1.25rem; }
    .auth-page .invlog4 { min-height: auto; padding: 1.25rem; }
    .auth-page .invlog3::before { width: 260px; height: 260px; top: -150px; right: -90px; }
    .auth-page .invlog3::after { width: 180px; height: 180px; bottom: -110px; left: -70px; }
    .auth-page .invloglogo { width: 150px; }
}
@media (max-width: 575.98px) {
    .auth-page .invlog3 { min-height: 190px; }
    .auth-page .invlog3 p { font-size: .82rem; }
    .auth-page .login-card,
    .auth-page .siform-container { padding: 1.15rem; border-radius: 8px !important; box-shadow: 0 12px 26px rgba(32,36,39,.08) !important; }
    .auth-page .nav-tabs { flex-wrap: nowrap; }
    .auth-page .nav-tabs .nav-link { flex: 1 1 0; padding-inline: .35rem; font-size: .72rem; }
}