/* ============================================================
 * login.css  ——  صفحه‌ی ورود ERP
 * جای فایل روی سرور: public_html/Login_and_Auth/login.css
 *
 * خودبسنده است و عمداً Style.css سراسری ERP را لود نمی‌کند: صفحه‌ی ورود
 * تنها صفحه‌ای است که کاربرِ لاگین‌نکرده می‌بیند، و هرچه کمتر از آن
 * بیرون بیاید بهتر — هم از نظر سرعت، هم از نظر چیزی که لو می‌رود.
 *
 * زبان طراحی One UI (تصمیم مالک ۱۴۰۵/۰۵/۲۶): سطحِ نرم، گوشه‌ی سخاوتمند،
 * عمقِ ملایمِ چندلایه، و رنگ فقط جایی که معنی دارد.
 *
 * چهار دسته‌ی دستگاه (همان تقسیم‌بندی دیزاین‌سیستم):
 *   پایه   ۰      موبایل
 *   md    ۷۶۸    تبلت
 *   xl   ۱۲۸۰    لپ‌تاپ ۱۳–۱۴ اینچ
 *   2xl  ۱۶۰۰    نمایشگر بزرگ
 * ========================================================== */

/* ---------- فونت برند ----------
 * ⚠ این صفحه عمداً Style.css را لود نمی‌کند، پس هیچ‌کس دیگری فیس‌ها را
 *   اعلام نمی‌کند. بدون این بلوک، `font-family: Kalameh` روی صفحه می‌نشیند
 *   ولی هیچ فایلی بار نمی‌شود و متن با Tahoma رندر می‌شود — اندازه‌گیری
 *   ۳۰ مرداد ۱۴۰۵ نشان داد document.fonts فقط فونت‌آوسام داشت.
 * ⚠ همه هم‌مبدأ از /CDN/. هیچ منبع بیرونی مجاز نیست.
 * ⚠ وزن ۸۰۰ جدا اعلام می‌شود؛ بدون آن مرورگر ۷۰۰ را مصنوعی چاق می‌کند.
 */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/vazirmatn/fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

/* نامِ خانواده در کدِ موجود Kalameh است و عمداً همان می‌ماند؛ اینجا فقط
   به همان فایل‌ها گره می‌خورد تا هر دو نام کار کنند. */
@font-face {
    font-family: 'Kalameh';
    src: url('/CDN/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Kalameh';
    src: url('/CDN/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Kalameh';
    src: url('/CDN/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Kalameh';
    src: url('/CDN/vazirmatn/fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

:root {
    --brand:        #2563eb;
    --brand-dark:   #1d4ed8;
    --brand-deep:   #1e40af;
    --brand-soft:   rgba(37, 99, 235, .10);
    --brand-tint:   rgba(37, 99, 235, .06);
    --accent:       #facc15;                 /* زرد فقط سطح است، هرگز متن */
    --accent-text:  #a16207;                 /* نسخه‌ی خوانا برای متن */

    --ink:          #0f172a;
    --ink-soft:     #475569;
    --muted:        #64748b;
    --line:         #e6e9ef;
    --line-soft:    #eef1f6;
    --field:        #f1f4f8;
    --surface:      #ffffff;
    --canvas:       #e9edf4;

    --ok:           #16a34a;
    --danger:       #dc2626;
    --danger-soft:  rgba(220, 38, 38, .09);
    --info-soft:    rgba(37, 99, 235, .09);

    --radius-card:  26px;
    --radius-field: 15px;

    /* عمق دولایه: یک سایه‌ی محیطیِ پهن و یک سایه‌ی کلیدیِ نزدیک.
       تک‌سایه‌ی بزرگ، کارت را شناور نشان می‌دهد نه نشسته. */
    --shadow-card:
        0 1px 2px rgba(15, 23, 42, .04),
        0 8px 20px -8px rgba(15, 23, 42, .10),
        0 28px 60px -24px rgba(15, 23, 42, .18);

    --card-w:       100%;
    --card-p:       22px;
    --fs-base:      15px;
    --fs-title:     22px;
    --control-h:    50px;

    /* کفِ ۱۶px برای ورودی‌ها. زیر آن، iOS روی فوکوس زوم می‌کند و
       دیگر برنمی‌گردد — نقضِ صریحِ کفِ دیزاین‌سیستم. عمداً از --fs-base
       جداست چون --fs-base روی موبایل ۱۵px می‌ماند. */
    --fs-control:   16px;

    /* منحنیِ یکسان برای همه‌ی حرکت‌ها. خروجِ نمایی: سریع شروع می‌شود و
       نرم می‌ایستد، مثل چیزی که وزن دارد. */
    --ease:         cubic-bezier(.16, 1, .3, 1);

    color-scheme: light;
    accent-color: var(--brand);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* ریست فرم در سطح المان، بدون پیشوند کلاس.
   با پیشوند، specificity از کامپوننت‌های تک‌کلاسه بالاتر می‌رود و
   رنگ و اندازه‌ی دکمه‌ها را خنثی می‌کند. */
input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- سطح‌هایی که مرورگر می‌کشد، نه ما ----------
   انتخابِ متن، مکان‌نما و اسکرول‌بار پیش‌فرضِ مرورگرند و به هیچ
   دیزاین‌سیستمی تعلق ندارند. رهاکردنشان همان چیزی است که یک صفحه را
   «سرهم‌شده» نشان می‌دهد نه «ساخته‌شده». */
::selection      { background: rgba(37, 99, 235, .18); color: var(--ink); }
input, textarea  { caret-color: var(--brand); }

.auth-body {
    font-family: 'Kalameh', 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--ink);
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(37, 99, 235, .13), transparent 62%),
        radial-gradient(760px 420px at 6% 108%, rgba(250, 204, 21, .18), transparent 62%),
        var(--canvas);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;          /* نوار آدرس موبایل، ۱۰۰vh را دروغ می‌کند */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

.auth-wrap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 16px 28px;
}

/* یک لحظه‌ی حرکت، نه چند تا: کارت از پایین می‌آید و می‌نشیند.
   بقیه‌ی صفحه ساکن است تا همین یکی دیده شود. */
.auth-card {
    position: relative;
    width: var(--card-w);
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--card-p);
    animation: card-in .55s var(--ease) both;
}

/* خطِ موییِ بالای کارت: لبه‌ی نور. بدون آن، کارتِ سفید روی زمینه‌ی روشن
   لبه‌اش گم می‌شود و عمق دیده نمی‌شود. */
.auth-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding-top: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ---------- برچسب محیط ----------
 * فقط روی نصبی که زنده نیست دیده می‌شود. کارش یک چیز است: نگذارد کسی
 * پیش‌انتشار را با نصب زنده اشتباه بگیرد.
 *
 * ⚠ زرد در این سیستم فقط **سطح** است، هرگز رنگِ متن — روی سفید ۱٫۵۳:۱
 *   دارد. متن با --accent-text نوشته می‌شود که ۴٫۹۷:۱ است.
 */
.env-badge {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 0 16px;
    padding: 9px 13px;
    border-radius: 12px;
    background: rgba(250, 204, 21, .20);
    color: var(--accent-text);
    font-size: 12px; font-weight: 700; line-height: 1.6;
    text-align: center;
}
.env-badge i { font-size: 12px; flex: 0 0 auto; }

/* نوار باریکِ بالای صفحه: از هر گوشه‌ی صفحه دیده می‌شود، حتی وقتی
   کارت اسکرول شده. */
.auth-body.is-nonprod::before {
    content: '';
    position: fixed; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), #f59e0b);
    z-index: 10;
}

/* ---------- سربرگ ---------- */

.auth-head { text-align: center; margin-bottom: 20px; }

.auth-logo {
    width: 58px; height: 58px;
    margin: 0 auto 13px;
    border-radius: 19px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 24px;
    /* گرادیانِ کم‌دامنه‌ی هم‌رنگ، نه دورنگِ تزئینی: فقط به مربع حجم می‌دهد. */
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow:
        0 1px 2px rgba(30, 64, 175, .28),
        0 10px 22px -8px rgba(30, 64, 175, .55);
}

.auth-title {
    margin: 0;
    font-size: var(--fs-title);
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.35;
}
.auth-subtitle { margin: 5px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- نوار مرحله ---------- */

.auth-steps {
    display: flex; align-items: center; gap: 6px;
    list-style: none; margin: 0 0 20px; padding: 0;
}
.auth-steps li {
    flex: 1;
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; color: var(--muted);
    padding: 7px 8px;
    border-radius: 999px;
    background: var(--field);
    white-space: nowrap;
    overflow: hidden;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.auth-steps li span {
    width: 19px; height: 19px; flex: 0 0 auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #dde2ea; color: var(--muted);
    font-size: 10px;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.auth-steps li.now      { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.auth-steps li.now span { background: var(--brand); color: #fff; }
.auth-steps li.done      { color: var(--ok); }
.auth-steps li.done span { background: var(--ok); color: #fff; }

/* ---------- پیام‌ها ---------- */

.auth-alert {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: var(--radius-field);
    padding: 11px 13px;
    font-size: 12.5px; line-height: 1.7;
    margin-bottom: 14px;
    animation: alert-in .35s var(--ease) both;
}
.auth-alert.is-error { background: var(--danger-soft); color: var(--danger); }
.auth-alert.is-info  { background: var(--info-soft);   color: var(--brand-dark); }
.auth-alert i        { margin-top: 3px; flex: 0 0 auto; }

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- فیلدها ---------- */

.auth-form  { display: block; }
.field      { margin-bottom: 15px; }
.field-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin-bottom: 7px; }

.input-group { position: relative; display: block; }

.input-group input {
    width: 100%;
    height: var(--control-h);
    font-size: var(--fs-control);      /* کفِ ۱۶px — جلوی زومِ iOS */
    border: 1px solid transparent;
    background: var(--field);
    border-radius: var(--radius-field);
    /* Room for the leading icon comes from the shared token in Style.css, so
       it can never disagree with where .ig-icon is actually painted. */
    padding: 0 var(--gd-field-icon-room, 42px) 0 var(--gd-field-pad, 14px);
    outline: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input-group input.has-action { padding-left: var(--gd-field-action-room, 46px); }
.input-group input:hover:not(:focus) { background: #e9edf4; }
.input-group input:focus {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
/* ⚠ کنتراست placeholder اندازه‌گیری شد: #9aa3af روی #f1f4f8 فقط ۲٫۳۱:۱ بود،
   زیر کفِ ۴٫۵. متنِ راهنما هم متن است. */
.input-group input::placeholder { color: #5d6b7f; }

/* آیکنِ فیلد وقتی خودِ فیلد فوکوس دارد، هم‌رنگِ کنش می‌شود.
   جزئیاتِ کوچکی که نشان می‌دهد صفحه زنده است. */
.input-group:focus-within .ig-icon { color: var(--brand); }

/* PHYSICAL right/left here, NOT inset-inline-*.
 *
 * The bug this fixes: the padding above is a shorthand, and a shorthand is
 * always physical — `padding: 0 44px 0 14px` reserves 44px on the RIGHT. But
 * these two rules used logical insets, and on an RTL page `inline-end` is the
 * LEFT edge. So the icon was painted on the left while the gap was held open on
 * the right, and the username ran straight underneath the icon:
 *
 *     [👤isisalinazari                              ]   ← what it looked like
 *
 * The eye toggle had the mirror of the same problem: `inset-inline-start` put it
 * on the right, while `.has-action { padding-left: 46px }` reserved the left.
 *
 * Rule of thumb for this codebase: if the space for something is reserved with
 * a PHYSICAL padding, pin that something with a PHYSICAL inset. Mixing the two
 * families is what breaks, and it breaks silently — it looks correct in LTR.
 */
.ig-icon {
    position: absolute; right: var(--gd-field-icon-inset, 14px); top: 50%;
    transform: translateY(-50%);
    color: var(--muted); font-size: 14px; pointer-events: none;
    transition: color .2s var(--ease);
}
.ig-action {
    position: absolute; left: var(--gd-field-action-inset, 8px); top: 50%;
    transform: translateY(-50%);
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted); padding: 8px; border-radius: 10px; line-height: 1;
    /* ⚠ هدف لمسی ۴۴×۴۴ فقط روی دکمه‌ی آیکونی. روی دکمه‌ی متنی ردیف را می‌شکند. */
    min-width: 34px; min-height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.ig-action::after {           /* بزرگ‌کردنِ ناحیه‌ی لمس بدون بزرگ‌کردنِ ظاهر */
    content: ''; position: absolute; inset: -5px;
}
.ig-action:hover { color: var(--brand); background: var(--brand-soft); }

/* ---------- ورودی کد ---------- */

.otp-target { margin: 0 0 15px; font-size: 13px; color: var(--ink-soft); line-height: 1.9; text-align: center; }
.otp-target b { direction: ltr; unicode-bidi: isolate; font-weight: 700; color: var(--ink); }

.otp-input {
    width: 100%;
    height: 62px;
    border: 1px solid transparent;
    background: var(--field);
    border-radius: var(--radius-field);
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 12px;
    text-indent: 12px;           /* letter-spacing فاصله را بعد از آخرین رقم هم می‌گذارد */
    /* رقم‌های هم‌عرض: بدون آن، هر رقمی که تایپ می‌شود بقیه را جابه‌جا می‌کند. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    outline: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.otp-input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.otp-input::placeholder { letter-spacing: 8px; font-size: 20px; color: #8a94a6; }

.check-row {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12.5px; color: var(--ink-soft);
    margin: 4px 0 16px;
    padding: 10px 12px;
    border-radius: var(--radius-field);
    background: var(--brand-tint);
    cursor: pointer;
    transition: background .2s var(--ease);
}
.check-row:hover { background: var(--brand-soft); }
.check-row input { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; margin-top: 3px; }
/* توضیح زیر تیک: چرا این تیک برای کاربر ارزش دارد */
.check-row small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }

.otp-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }

.btn-link {
    border: 0; background: transparent; padding: 8px 4px;
    color: var(--brand); font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none;
    border-radius: 8px;
    transition: color .2s var(--ease);
}
.btn-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.btn-link:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* ---------- شرط‌های رمز ---------- */

.pw-rules { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.pw-rules li {
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center; gap: 8px;
    transition: color .25s var(--ease);
}
.pw-rules li::before {
    content: '○';
    width: 15px; text-align: center; flex: 0 0 auto;
}
.pw-rules li.ok         { color: var(--ok); }
.pw-rules li.ok::before { content: '✓'; }

/* ---------- دکمه ---------- */

.btn {
    border: 0; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: var(--control-h);
    padding: 0 22px;
    font-size: var(--fs-control);
    transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .08s var(--ease);
}
.btn:active   { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block    { width: 100%; }
.btn-primary  {
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; font-weight: 700;
    box-shadow:
        0 1px 2px rgba(30, 64, 175, .24),
        0 10px 20px -10px rgba(30, 64, 175, .70);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand-deep) 100%);
    box-shadow:
        0 1px 2px rgba(30, 64, 175, .28),
        0 14px 26px -10px rgba(30, 64, 175, .80);
}

.auth-foot {
    margin: 18px 0 0; padding-top: 15px;
    border-top: 1px solid var(--line-soft);
    font-size: 11.5px; color: var(--muted); line-height: 1.9;
    display: flex; align-items: flex-start; gap: 7px;
}
/* دانلود اپ — زیر کارت، بالای امضا.
   هدفش دیده شدن است نه رقابت با دکمه‌ی ورود، پس قاب دارد ولی پُر نیست. */
.auth-app { margin: 0 0 10px; }
.auth-app a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .72);
    font-size: 12px; color: var(--ink-soft);
    text-decoration: none;
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.auth-app a:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
/* ⚠ آیکن باید LTR بماند وگرنه در صفحه‌ی راست‌به‌چپ سمت اشتباه می‌افتد؛
   با flex و gap ترتیب از خودِ سند می‌آید، پس float یا margin دستی نزن. */

.auth-copy { margin: 0; font-size: 11px; color: var(--muted); }


/* ============================================================
 *  md — تبلت
 * ========================================================== */
@media (min-width: 768px) {
    :root {
        --card-w:   420px;
        --card-p:   30px;
        --fs-title: 23px;
    }
    .auth-steps li { font-size: 11.5px; padding: 8px 10px; }
}

/* ============================================================
 *  xl — لپ‌تاپ ۱۳ تا ۱۴ اینچ
 *
 *  کارت عمداً پهن‌تر نمی‌شود؛ فقط فضای نفس‌کشیدن و اندازه‌ی کنترل‌ها
 *  بالا می‌رود. یک فرم دو فیلدی که ۶۰۰ پیکسل پهن باشد، بدتر خوانده
 *  می‌شود، نه بهتر.
 * ========================================================== */
@media (min-width: 1280px) {
    :root {
        --card-w:     440px;
        --card-p:     34px;
        --fs-base:    15.5px;
        --fs-control: 16px;
        --fs-title:   25px;
        --control-h:  52px;
    }
    .auth-logo { width: 62px; height: 62px; font-size: 26px; }
    .otp-input { height: 66px; font-size: 30px; }
}

/* ============================================================
 *  2xl — نمایشگر بزرگ
 * ========================================================== */
@media (min-width: 1600px) {
    :root {
        --card-w:     480px;
        --card-p:     40px;
        --fs-base:    16px;
        --fs-control: 16.5px;
        --fs-title:   27px;
        --control-h:  56px;
    }
    .auth-logo   { width: 68px; height: 68px; font-size: 29px; }
    .auth-wrap   { gap: 18px; }
    .otp-input   { height: 72px; font-size: 33px; }
    .field-label { font-size: 13px; }
}

/* ============================================================
 *  موبایل کوتاه — گوشی در حالت افقی یا صفحه‌کلید باز
 * ========================================================== */
@media (max-height: 620px) {
    .auth-wrap { justify-content: flex-start; padding-top: 14px; }
    .auth-logo { width: 46px; height: 46px; font-size: 20px; margin-bottom: 8px; }
    .auth-head { margin-bottom: 12px; }
    .auth-card { animation: none; }
}

/* ---------- دسترس‌پذیری ---------- */

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media (prefers-contrast: more) {
    .input-group input { border-color: var(--line); }
    .auth-steps li     { border: 1px solid var(--line); }
    .check-row         { border: 1px solid var(--line); }
}