/*
 * صفحه‌ی ورود — فقط با _AuthLayout بارگذاری می‌شود.
 *
 * جدا از site.css نوشته شده تا تغییر ظاهر ورود به صفحه‌های داخلی برنامه
 * سرایت نکند؛ همه‌ی کلاس‌ها پیشوند login- دارند و با .auth-* قدیمی
 * site.css تداخل ندارند.
 *
 * چیدمان: پنل فرم سمت راست (شروع خواندن در RTL) با نام سازمان و برنامه
 * در بالایش، و پنل برند سرمه‌ای سمت چپ که متن‌هایش از «ظاهر صفحه‌ی ورود»
 * می‌آید. زیر ۹۰۰ پیکسل پنل برند پنهان می‌شود.
 */

:root {
    --login-navy: #14304D;
    --login-navy-deep: #0C2036;
    --login-teal: #2A8C82;
    --login-teal-soft: #57C2B5;
    --login-surface: #FFFFFF;
    --login-page: #F4F6F8;
    --login-text: #1F2A37;
    --login-muted: #6B7684;
    --login-border: #DCE2E8;
    --login-input: #F8FAFB;
    --login-danger: #C0392B;
    --login-danger-soft: #FCEDEB;
    --login-warn: #9A6B00;
    --login-warn-soft: #FFF6DD;
    --login-radius: 12px;
}

html[data-theme="dark"] {
    --login-surface: #141D29;
    --login-page: #0F1620;
    --login-text: #E4E8EE;
    --login-muted: #97A2B2;
    --login-border: #2B3646;
    --login-input: #1B2533;
    --login-danger: #E0736A;
    --login-danger-soft: #2E1A19;
    --login-warn: #E3B341;
    --login-warn-soft: #2B2412;
    --login-navy: #102840;
    --login-navy-deep: #081725;
    color-scheme: dark;
}

body.login-body {
    margin: 0;
    background-color: var(--login-page);
    color: var(--login-text);
}

/* ===================== چیدمان ===================== */

/*
 * کادر فرم به اندازه‌ی محتوایش است (نه تمام‌قد) و افقی و عمودی وسط صفحه
 * می‌نشیند؛ اگر صفحه از کادر کوتاه‌تر باشد، صفحه اسکرول می‌خورد.
 */
.login-shell {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center; /* پنل برند رفت؛ ستون فرم تنها مانده و وسط می‌ایستد */
}

.login-form-pane {
    /* عرض ثابت‌تر از درصد: روی مانیتور پهن، فرم تا لبه‌ها کشیده نمی‌شود */
    flex: 0 1 540px;
    max-width: 540px;
    min-width: 0; /* بدون این، متن‌های nowrap پنل را از عرض صفحه بیرون می‌زدند */
    display: flex;
    flex-direction: column;
    background-color: var(--login-surface);
    border: 1px solid var(--login-border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .35);
    padding: 12px clamp(20px, 4vw, 48px) 16px;
}

.login-brand-pane {
    flex: 1 1 48%;
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: var(--login-navy);
    background-image:
        radial-gradient(ellipse 60% 45% at 85% 12%, rgba(87, 194, 181, .28), transparent 70%),
        radial-gradient(ellipse 55% 50% at 10% 95%, rgba(42, 140, 130, .35), transparent 70%),
        linear-gradient(160deg, var(--login-navy) 0%, var(--login-navy-deep) 100%);
    display: flex;
    flex-direction: column;
    padding: 44px clamp(28px, 4.5vw, 64px);
}

    /* خطوط دفتر حساب، بسیار کم‌رنگ — نشانه‌ی حسابداری بدون تصویر شلوغ */
    .login-brand-pane::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
        background-size: 100% 36px, 120px 100%;
        mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
        pointer-events: none;
    }

    .login-brand-body,
    .login-brand-foot {
        position: relative;
        z-index: 1; /* بالای نمودار تزئینی */
    }

    /* flex و grid پایین، ویژگی hidden را بی‌اثر می‌کردند (بخش خالی = پنهان) */
    .login-brand-pane [hidden] {
        display: none !important;
    }

/* ===================== پنل برند ===================== */

.login-brand-body {
    margin-top: auto;
    margin-bottom: auto;
    padding-block: 40px;
    max-width: 440px;
}

.login-headline {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.55;
    margin: 0 0 14px;
}

.login-lead {
    font-size: 15px;
    line-height: 2;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 26px;
}

.login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

    .login-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, .88);
    }

    .login-features svg {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        color: var(--login-teal-soft);
    }

/* نمودار خطی پایین پنل — فقط تزئین */
.login-chart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 34%;
    pointer-events: none;
    opacity: .9;
}

.login-brand-foot {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .62);
}

/* ===================== پنل فرم ===================== */

/* نوار بالای پنل فرم: فقط انتخاب تم، در گوشه‌ی چپ */
.login-form-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ===== نام سازمان و نام برنامه، وسط‌چین بالای فرم ===== */

/*
 * ارتفاع این بلوک عمداً ثابت است. وقتی دیتابیس پاسخ نمی‌داد، نام موسسه
 * خالی می‌شد، بلوک جمع می‌شد و کادرهای نام کاربری و رمز بالا می‌پریدند —
 * هر بار که کاربر گزینه‌ی دراپ‌داون را عوض می‌کرد فرم تکان می‌خورد.
 * حالا هر سطر جای خودش را نگه می‌دارد، چه پر باشد چه خالی.
 */
.login-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 3px;
    min-height: 132px;
    margin-bottom: 14px;
}

.login-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    margin-bottom: 2px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--login-teal-soft), var(--login-teal));
    box-shadow: 0 8px 20px -10px rgba(42, 140, 130, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.login-org {
    font-size: 19px;
    font-weight: 700;
    color: var(--login-text);
    line-height: 1.5;
    min-height: 29px;   /* یک خط، حتی وقتی نام موسسه خالی است */
}

.login-app {
    font-size: 13px;
    color: var(--login-muted);
    line-height: 20px;
    min-height: 20px;
}

.login-db {
    font-size: 11.5px;
    color: var(--login-muted);
    border: 1px solid var(--login-border);
    border-radius: 999px;
    padding: 0 8px;
    line-height: 1.7;
}

/* ===== تاریخ امروز، وسط‌چین زیر دکمه‌ی ورود ===== */

.login-date-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.login-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--login-muted);
    background-color: var(--login-input);
    border: 1px solid var(--login-border);
    border-radius: 999px;
    padding: 4px 12px 4px 14px;
}

    .login-date svg {
        width: 15px;
        height: 15px;
        color: var(--login-teal);
    }

/* ===== لینک ریز راهنما، گوشه‌ی پایین ===== */

.login-form-foot {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.login-help {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--login-muted);
    text-decoration: none;
    opacity: .85;
}

    .login-help:hover {
        color: var(--login-teal);
        opacity: 1;
    }

    .login-help svg {
        width: 14px;
        height: 14px;
    }

/* ===== پیش‌نمایش پنل در صفحه‌ی «ظاهر صفحه‌ی ورود» ===== */

.login-brand-preview {
    min-height: 440px;
    border-radius: 14px;
    padding: 36px 40px;
}

    .login-brand-preview .login-headline {
        font-size: 28px;
    }

.login-form-wrap {
    width: 100%;
    max-width: 400px;
    /* بالا می‌ایستد، نه وسط صفحه: فاصله‌ی انتخاب تم تا کادر کم می‌ماند
       و فرم روی صفحه‌های کوتاه هم جا می‌شود */
    margin: 4px auto 0;
    padding-block: 0 14px;
}

/* عنوان و توضیح فرم هم وسط‌چین، هم‌راستا با نام سازمان بالایشان */
.login-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--login-text);
    text-align: center;
}

.login-subtitle {
    font-size: 13.5px;
    color: var(--login-muted);
    margin: 0 0 14px;
    text-align: center;
}

/*
 * برچسب کنار کادر (سمت راست در RTL)، نه بالای آن — ارتفاع فرم کمتر
 * می‌شود. عرض ستون برچسب ثابت است تا کادرها زیر هم هم‌تراز بمانند؛
 * پیام خطا و هشدار Caps Lock در ستون کادر، زیر همان کادر می‌نشینند.
 */
.login-field {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

    .login-field > * {
        grid-column: 2;
    }

    .login-field > .login-label {
        grid-column: 1;
        grid-row: 1;
    }

.login-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--login-text);
    margin: 0;
    line-height: 1.4;
}

.login-input-wrap {
    position: relative;
}

.login-input {
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--login-border);
    border-radius: 10px;
    background-color: var(--login-input);
    color: var(--login-text);
    font-family: inherit;
    font-size: 15px;
    /* جهت‌های فیزیکی عمداً: صفحه همیشه RTL است و آیکن همیشه سمت راست */
    padding-right: 44px;
    padding-left: 14px;
    text-align: right;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .login-input::placeholder {
        color: var(--login-muted);
        opacity: .7;
    }

    .login-input:hover {
        border-color: color-mix(in srgb, var(--login-border) 60%, var(--login-teal));
    }

    .login-input:focus {
        outline: none;
        border-color: var(--login-teal);
        background-color: var(--login-surface);
        box-shadow: 0 0 0 4px rgba(42, 140, 130, .16);
    }

    .login-input.input-validation-error {
        border-color: var(--login-danger);
    }

        .login-input.input-validation-error:focus {
            box-shadow: 0 0 0 4px rgba(192, 57, 43, .14);
        }

.login-input-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--login-muted);
    pointer-events: none;
    transition: color .15s ease;
}

.login-input-wrap:focus-within .login-input-icon {
    color: var(--login-teal);
}

/* فیلد رمز: دکمه‌ی نمایش در سمت چپ */
.login-input.has-toggle {
    padding-left: 48px;
}

.login-eye {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--login-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .login-eye:hover {
        color: var(--login-teal);
        background-color: rgba(42, 140, 130, .08);
    }

    .login-eye:focus-visible {
        outline: 2px solid var(--login-teal);
        outline-offset: 1px;
    }

    .login-eye svg {
        width: 20px;
        height: 20px;
    }

    .login-eye .eye-off {
        display: none;
    }

    .login-eye[aria-pressed="true"] .eye-on {
        display: none;
    }

    .login-eye[aria-pressed="true"] .eye-off {
        display: block;
    }

.login-field-error {
    display: block;
    font-size: 12.5px;
    color: var(--login-danger);
    margin-top: 6px;
}

    .login-field-error:empty {
        display: none;
    }

.login-caps {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--login-warn);
    background-color: var(--login-warn-soft);
    border-radius: 8px;
    padding: 5px 10px;
    margin-top: 8px;
}

    .login-caps.is-on {
        display: flex;
    }

/* خطای کلی (رمز اشتباه، حساب قفل‌شده) — زیر دکمه‌ی ورود می‌نشیند */
.login-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--login-danger);
    background-color: var(--login-danger-soft);
    border: 1px solid color-mix(in srgb, var(--login-danger) 25%, transparent);
}

    /* نشان «!» — خلاصه‌ی خطای ASP.NET فقط <ul> می‌سازد و جای SVG ندارد */
    .login-alert::before {
        content: "!";
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--login-danger);
        color: var(--login-surface);
        font-weight: 700;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
        margin-top: 1px;
    }

    .login-alert ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .login-alert.validation-summary-valid {
        display: none;
    }

.login-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 2px 0 14px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--login-text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    /* چک‌باکس بوت‌استرپ ۵.۱ در RTL شناور می‌شود؛ اینجا شناور نیست */
    .login-remember .form-check-input {
        float: none;
        margin: 0;
        width: 1.1em;
        height: 1.1em;
        cursor: pointer;
    }

        .login-remember .form-check-input:checked {
            background-color: var(--login-teal);
            border-color: var(--login-teal);
        }

        .login-remember .form-check-input:focus {
            border-color: var(--login-teal-soft);
            box-shadow: 0 0 0 .2rem rgba(42, 140, 130, .2);
        }

.login-hint {
    font-size: 12.5px;
    color: var(--login-muted);
}

.login-submit {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #33A195 0%, var(--login-teal) 55%, #237A71 100%);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(42, 140, 130, .9);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

    .login-submit:hover {
        filter: brightness(1.05);
        box-shadow: 0 14px 28px -12px rgba(42, 140, 130, .95);
    }

    .login-submit:active {
        transform: translateY(1px);
    }

    .login-submit:focus-visible {
        outline: 3px solid rgba(42, 140, 130, .35);
        outline-offset: 2px;
    }

    .login-submit svg {
        width: 18px;
        height: 18px;
    }

    .login-submit .spin {
        display: none;
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255, 255, 255, .45);
        border-top-color: #fff;
        border-radius: 50%;
        animation: login-spin .7s linear infinite;
    }

    .login-submit.is-busy {
        pointer-events: none;
        filter: saturate(.8);
    }

        .login-submit.is-busy .spin {
            display: inline-block;
        }

        .login-submit.is-busy .arrow {
            display: none;
        }

@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
 * انتخاب تم با آیکن (خورشید / ماه / مانیتور).
 * گزینه‌ی فعال رنگ تأکیدی تمام‌پر نمی‌گیرد؛ یک «قرص» روشن با سایه‌ی نرم
 * است و آیکنش پررنگ می‌شود — آرام‌تر از دکمه‌ی سبزآبی و هم‌وزن با فرم.
 */
.login-theme {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background-color: var(--login-input);
    border: 1px solid var(--login-border);
}

    .login-theme button {
        width: 34px;
        height: 30px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--login-muted);
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

        .login-theme button svg {
            width: 17px;
            height: 17px;
        }

        .login-theme button:hover {
            color: var(--login-text);
        }

        .login-theme button:focus-visible {
            outline: 2px solid var(--login-teal);
            outline-offset: 1px;
        }

        .login-theme button.active {
            background-color: var(--login-surface);
            color: var(--login-text);
            box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 1px 6px -2px rgba(15, 23, 42, .12);
        }

html[data-theme="dark"] .login-theme button.active {
    background-color: #283446;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ===================== ورود با انیمیشن ملایم ===================== */

@media (prefers-reduced-motion: no-preference) {
    .login-form-wrap {
        animation: login-rise .45s ease-out both;
    }

    .login-brand-body {
        animation: login-rise .6s .05s ease-out both;
    }
}

@keyframes login-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ===================== موبایل و تبلت ===================== */

@media (max-width: 900px) {
    /* نام سازمان حالا بالای فرم است؛ پنل برند در صفحه‌ی باریک جا نمی‌گیرد */
    .login-shell > .login-brand-pane {
        display: none;
    }

    .login-shell {
        padding: 10px;
    }

    .login-form-pane {
        flex: 1 1 100%;
        padding: 10px 14px 14px;
    }

    .login-form-wrap {
        margin: 4px auto 16px;
        padding-block: 0 8px;
    }

    .login-hint {
        flex-basis: 100%;
    }
}

/* صفحه‌ی خیلی باریک: برچسب دوباره بالای کادر می‌رود */
@media (max-width: 360px) {
    .login-field {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 5px;
    }

        .login-field > *,
        .login-field > .login-label {
            grid-column: 1;
            grid-row: auto;
        }
}

/* ===== انتخاب دیتابیس در صفحه‌ی ورود ===== */

/*
 * دراپ‌داون عمداً فلش سفارشی ندارد: فلش بومی مرورگر با color-scheme
 * خودش تم تاریک را می‌فهمد، در حالی که یک تصویر ثابت در تم تاریک محو
 * می‌شد. بقیه‌ی ظاهر همان .login-input است تا با نام کاربری و رمز یکی باشد.
 */
select.login-select {
    cursor: pointer;
    padding-left: 14px;
    line-height: 1.6;
}

/*
 * وضعیت دیتابیس. ارتفاعش همیشه رزرو است تا با آمدن و رفتن پیام،
 * فرم بالا و پایین نپرد.
 */
.login-db-state {
    min-height: 19px;
    font-size: 12.5px;
    line-height: 19px;
    color: var(--login-muted);
    text-align: center;
}

    .login-db-state.is-bad {
        color: var(--login-danger);
        font-weight: 700;
    }


/* ===================== صفحه‌های عمومی (معرفی برنامه، درباره) ===================== */

/*
 * قالب سبکِ بدون منو برای کاربری که هنوز وارد نشده. کاربرِ واردشده همین
 * صفحه‌ها را داخل قالب اصلی می‌بیند، پس این کلاس‌ها آن‌جا اثری ندارند.
 */
body.public-body {
    margin: 0;
    min-height: 100vh;
    font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
    background-color: var(--login-page);
    color: var(--login-text);
}

.public-shell {
    min-height: 100vh;
    max-width: 1040px;
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 40px) 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.public-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.public-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--login-muted);
    text-decoration: none;
}

    .public-back:hover {
        color: var(--login-teal);
    }

    /* در RTL، فلشِ «بازگشت» باید به سمت راست اشاره کند */
    .public-back svg {
        width: 16px;
        height: 16px;
        transform: scaleX(-1);
    }

.public-main {
    flex: 1 1 auto;
    display: flex;
}

.public-foot {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
}

/* ===== صفحه‌ی معرفی برنامه ===== */

/*
 * همان پنل سرمه‌ای صفحه‌ی ورود، این بار تمام‌عرض و گوشه‌گرد. برخلاف
 * نسخه‌ی داخل .login-shell، در موبایل پنهان نمی‌شود — اینجا خودِ صفحه است.
 */
.intro-pane {
    flex: 1 1 auto;
    border-radius: 16px;
    min-height: 62vh;
}