﻿/* =====================================================================
   ورود — Split Card (الگوی PardisSanat.Web/css/auth/login.css) با برند آبی اینپارس.
   پس از login.css بارگذاری می‌شود؛ مکانیزم Label شناور و Captcha همان login.css است.
   ===================================================================== */
:root {
    --auth-primary: #0f4c81; --auth-primary-600: #1565a0; --auth-primary-900: #072a48;
    --auth-grad: linear-gradient(135deg, #1565a0 0%, #0f4c81 45%, #072a48 100%);
    --auth-text: #1e293b; --auth-text-2: #64748b; --auth-muted: #94a3b8;
    --auth-border: #e2e8f0; --auth-surface: #fff;
}
body.auth-body {
    min-height: 100vh; margin: 0; font-family: 'Vazirmatn', Tahoma, sans-serif; color: var(--auth-text);
    background: radial-gradient(1200px 600px at 85% -10%, rgba(21, 101, 160, .10), transparent 60%),
                radial-gradient(900px 500px at 0% 110%, rgba(16, 185, 129, .07), transparent 60%), #f4f6fb;
    display: block; overflow-x: hidden;
}
.auth-bg span { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.auth-bg span:nth-child(1) { width: 380px; height: 380px; top: -120px; left: -100px; background: rgba(15, 76, 129, .06); }
.auth-bg span:nth-child(2) { width: 260px; height: 260px; bottom: -80px; right: 8%; background: rgba(37, 99, 235, .05); }
.auth-bg span:nth-child(3) { width: 160px; height: 160px; top: 40%; left: 12%; background: rgba(16, 185, 129, .05); }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; position: relative; z-index: 1; }
.auth-card {
    width: 100%; max-width: 980px; min-height: 560px; display: flex; overflow: hidden;
    background: var(--auth-surface); border-radius: 24px; border: 1px solid #eef2f7;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .12); animation: auth-in .45s cubic-bezier(.4, 0, .2, 1) backwards;
}
@keyframes auth-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* پنل برند */
.auth-brand {
    flex: 0 0 46%; position: relative; color: #fff; background: var(--auth-grad);
    padding: 36px 36px 32px; display: flex; flex-direction: column; overflow: hidden;
}
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.auth-brand::before { width: 320px; height: 320px; left: -110px; top: -90px; }
.auth-brand::after  { width: 220px; height: 220px; right: -70px; bottom: -60px; }
.auth-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.auth-logo { background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: inline-flex; }
.auth-logo img { height: 40px; width: auto; display: block; }
.auth-clock { flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 600; }
.auth-clock > span { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.auth-brand-text { margin-top: 64px; position: relative; z-index: 1; }
.auth-brand-text h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 8px; line-height: 1.45; color: #fff; }
.auth-brand-text p { margin: 0; opacity: .85; font-size: .92rem; letter-spacing: .5px; }

/* فهرست قابلیت‌ها — آیکون گرادیانی رنگی + ورود پلکانی + هاور */
.auth-features {
    list-style: none; padding: 0; margin: 26px 0 0;
    display: grid; gap: 11px; position: relative; z-index: 1;
}
.auth-features li {
    display: flex; align-items: center; gap: 13px;
    font-size: .86rem; font-weight: 500; line-height: 1.6;
    opacity: 0; animation: authFeatureIn .5s cubic-bezier(.4, 0, .2, 1) forwards;
}
.auth-features li:nth-child(1) { animation-delay: .10s; }
.auth-features li:nth-child(2) { animation-delay: .18s; }
.auth-features li:nth-child(3) { animation-delay: .26s; }
.auth-features li:nth-child(4) { animation-delay: .34s; }
.auth-features li:nth-child(5) { animation-delay: .42s; }
@keyframes authFeatureIn {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
}
.auth-features li > span {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem; color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    transition: transform var(--auth-t-bounce, .35s), box-shadow .35s;
}
.auth-features li:hover > span {
    transform: translateY(-3px) rotate(-6deg) scale(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
}
.auth-features li:hover { color: #fff; }
/* تُن رنگی هر قابلیت */
.auth-features li > span.f-1 { background: linear-gradient(135deg, #34d399, #059669); }  /* انبار/سبز */
.auth-features li > span.f-2 { background: linear-gradient(135deg, #22d3ee, #0891b2); }  /* QR/فیروزه‌ای */
.auth-features li > span.f-3 { background: linear-gradient(135deg, #60a5fa, #2563eb); }  /* حواله/آبی */
.auth-features li > span.f-4 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }  /* انتقال/بنفش */
.auth-features li > span.f-5 { background: linear-gradient(135deg, #fbbf24, #d97706); }  /* گزارش/کهربایی */

/* پنل فرم */
.auth-form { flex: 1 1 auto; padding: 48px 48px 32px; display: flex; flex-direction: column; justify-content: center; }
.auth-welcome {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
    color: var(--auth-primary); background: rgba(15, 76, 129, .08); border: 1px solid rgba(15, 76, 129, .14);
    border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.auth-title { font-size: 1.6rem; font-weight: 800; color: var(--auth-text); margin: 0 0 6px; }
.auth-sub { color: var(--auth-text-2); font-size: .9rem; margin: 0 0 28px; }

/* ورودی‌ها — همان Label شناور login.css با ظاهر پردیس */
.auth-form .input-group { margin-bottom: 20px; }
.auth-form .input-group input { border: 1.5px solid var(--auth-border); border-radius: 14px; background: #fff; padding: 15px 16px 15px 46px; font-size: .95rem; }
.auth-form .input-group input:hover { border-color: #cbd5e1; }
.auth-form .input-group input:focus { border-color: var(--auth-primary-600); box-shadow: 0 0 0 4px rgba(21, 101, 160, .12); }
.auth-form .input-group label { color: var(--auth-muted); }
.auth-form .captcha-box { border: 1.5px solid var(--auth-border); border-radius: 14px; padding: 6px; margin-bottom: 8px; }
.auth-form .captcha-img { border-radius: 10px; }
.auth-form .btn-login { height: 52px; border-radius: 14px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.auth-form .alert-custom { border-radius: 12px; border-right: 4px solid #e11d48; gap: 8px; }
.auth-form .login-footer { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--auth-border); text-align: center; color: var(--auth-muted); }

/* فوتر برند — گروه نرم‌افزاری SNE + ورژن */
.footer-brand-row { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.footer-brand-name {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: .88rem; font-weight: 500; letter-spacing: .2px;
    color: var(--auth-text-2);
    display: inline-flex; align-items: baseline; gap: 4px;
}
.footer-brand-latin {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 800; font-size: 1.05rem; letter-spacing: .16em;
    color: var(--auth-primary-600);
    transform: translateY(0);
}
.footer-version-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: .72rem; font-weight: 600; letter-spacing: .3px;
    color: var(--auth-primary-600);
    background: rgba(15, 76, 129, .07);
    border: 1px solid rgba(15, 76, 129, .16);
    border-radius: 999px; padding: 4px 13px;
}
.footer-version-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

/* موبایل/تبلت: پنل برند فشرده در بالا */
@media (max-width: 860px) {
    .auth-card { flex-direction: column; max-width: 480px; min-height: 0; border-radius: 20px; }
    .auth-brand { flex: 0 0 auto; padding: 22px 22px 20px; }
    .auth-brand-text { margin-top: 16px; }
    .auth-brand-text h1 { font-size: 1.25rem; margin-bottom: 4px; }
    .auth-brand-text p { font-size: .82rem; }
    .auth-features { display: none; }
    .auth-form { padding: 26px 22px 22px; }
    .auth-title { font-size: 1.3rem; }
    .auth-sub { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

/* ریشهٔ ناپدید شدن آیکون هنگام Focus: Bootstrap به .input-group .form-control:focus مقدار z-index:5 می‌دهد
   و آیکون (z-index:2 در login.css) زیر ورودی می‌رفت. آیکون و Label بالاتر از ورودی فوکوس‌شده: */
.auth-form .input-group > i { z-index: 6; }
.auth-form .input-group > label { z-index: 7; }
.auth-form .input-group input:focus + i { color: var(--auth-primary-600); }

/* ── «کاری از NexaDev» — نشان سازنده روی همهٔ صفحه‌های ورود ── */
.nx-made-by{
  display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  margin:0 0 10px;padding:8px 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(10,37,64,.04),rgba(10,37,64,.015));
  border:1px dashed rgba(10,37,64,.16);
  font-size:.74rem;color:#5b7089;
}
.nx-made-by .nx-mb-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#d92d20,#f04438);
  box-shadow:0 0 0 3px rgba(217,45,32,.14);
}
.nx-made-by .nx-mb-brand{
  color:#0a2540;font-weight:800;letter-spacing:.04em;font-size:.8rem;
}
.nx-made-by .nx-mb-sep{color:rgba(10,37,64,.25)}
.nx-made-by .nx-mb-sub{color:#8496ab}
@media(max-width:420px){
  .nx-made-by .nx-mb-sep,.nx-made-by .nx-mb-sub{display:none}
}
