/* ===== Fleet Login: "Quiet Split" ===== */

:root{
  --lg-ink:#0f172a; --lg-text:#334155; --lg-muted:#64748b; --lg-hint:#94a3b8;
  --lg-line:#e2e8f0; --lg-line-2:#cbd5e1; --lg-soft:#f1f5f9;
  --lg-blue:#2563eb; --lg-blue-d:#1d4ed8; --lg-blue-bg:#eff6ff;
  --lg-ease:cubic-bezier(.4,0,.2,1);
}
html, body{
  margin:0; min-height:100%;
  background:#fff !important; color:var(--lg-ink);
  font-family:'Vazirmatn',Tahoma,sans-serif !important;
}
body{ overflow-x:hidden; }

/* ---------- چیدمان: فرم راست، پنل برند چپ ---------- */
body .login-container{
  direction:rtl;
  display:grid !important;
/* 🌟 ستون اول (فرم) ۱۰٪ پهن‌تر از ستون دوم (ویدیو) می‌شود */
grid-template-columns: minmax(450px, 35%) 1fr; 
align-items:stretch; justify-content:stretch;
  height:auto !important; min-height:100vh;
  padding:0 !important; gap:0; background:#fff;
}
body .login-container > .auth-box{
  width:auto; max-width:none; margin:0;
  padding:clamp(28px,5vw,72px);
  display:flex; flex-direction:column; justify-content:center;
  background:#fff; border:0; border-radius:0; box-shadow:none;
}
.login-container > .auth-box > *{ width:100%; max-width:420px; margin-inline:auto; }
/* ---------- لوگو و عنوان ---------- */
.auth-box > .text-center.mb-3{ margin-bottom:32px !important; }
.auth-box > .text-center.mb-3 img{ width:112px !important; height:auto; display:block; }
.fleet-login-eyebrow{ display:none; }
.fleet-login-heading{ margin:0 0 24px; text-align:right; }
.fleet-login-heading h1{
  margin:0 0 6px; font-size:26px; font-weight:800; line-height:1.5;
  color:var(--lg-ink); letter-spacing:-.01em;
}
.fleet-login-heading > p:last-child{ margin:0; font-size:13px; line-height:1.9; color:var(--lg-muted); }

/* ---------- تب‌ها (Segmented) ---------- */
.auth-box .auth-tabs{
  display:flex; gap:4px; margin-bottom:24px; padding:4px;
  border:0; border-radius:12px; background:var(--lg-soft);
}
.auth-box .auth-tab{
  flex:1; padding:9px 4px; border:0; border-radius:9px;
  font-size:13px; font-weight:600; text-align:center;
  color:var(--lg-muted); background:transparent; cursor:pointer;
  transition:color .2s var(--lg-ease), background .2s var(--lg-ease), box-shadow .2s var(--lg-ease);
}
.auth-box .auth-tab:hover{ color:var(--lg-ink); }
.auth-box .auth-tab.active{
  color:var(--lg-ink); background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.05);
}
.auth-box .auth-tab:focus-visible{ outline:2px solid var(--lg-blue); outline-offset:2px; }

/* ---------- فیلدها ---------- */
.auth-box .form-label{ font-size:13px; font-weight:600; color:var(--lg-text); margin-bottom:6px; }
.auth-box .form-control{
  min-height:46px; padding:10px 14px;
  font-family:inherit; font-size:14px; color:var(--lg-ink);
  background-color:#fff; border:1px solid var(--lg-line-2);
  border-radius:10px; box-shadow:none;
  transition:border-color .2s var(--lg-ease), box-shadow .2s var(--lg-ease);
}
.auth-box .form-control::placeholder{ color:var(--lg-hint); opacity:1; }
.auth-box .form-control:hover{ border-color:var(--lg-hint); }
.auth-box .form-control:focus{
  border-color:var(--lg-blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); outline:0;
}
.auth-box .input-group > .form-control{ min-width:0; border-radius:0 10px 10px 0 !important; }
.auth-box .input-group > .btn-outline-secondary{
  width:46px; color:var(--lg-muted); background:#fff;
  border:1px solid var(--lg-line-2); border-right:0 !important;
  border-radius:10px 0 0 10px !important;
}
.auth-box .input-group > .btn-outline-secondary:hover{ color:var(--lg-ink); background:var(--lg-soft); }

/* رفع زرد شدن Autofill */
.auth-box .form-control:-webkit-autofill,
.auth-box .form-control:-webkit-autofill:hover,
.auth-box .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lg-ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  transition:background-color 9999s ease-in-out 0s;
}
.auth-box .form-control:autofill{ background-color:#fff !important; box-shadow:0 0 0 1000px #fff inset !important; }

/* ---------- دکمه‌ها ---------- */
.auth-box .btn{ font-family:inherit; font-weight:700; }
.auth-box .btn-primary,
.auth-box .btn-success{
  min-height:46px; font-size:14px; color:#fff;
  background-color:var(--lg-blue); border:0; border-radius:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.12), 0 6px 16px rgba(37,99,235,.22);
  transition:background-color .2s var(--lg-ease), transform .2s var(--lg-ease), box-shadow .2s var(--lg-ease);
}
.auth-box .btn-primary:hover,
.auth-box .btn-success:hover{
  background-color:var(--lg-blue-d); transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(15,23,42,.12), 0 10px 22px rgba(37,99,235,.28);
}
.auth-box .btn-primary:active,
.auth-box .btn-success:active{ transform:none; }
.auth-box .btn-primary:disabled,
.auth-box .btn-success:disabled{ opacity:.7; transform:none; box-shadow:none; }
.auth-box .btn-primary:focus-visible,
.auth-box .btn-success:focus-visible{ outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }

/* انتخاب نوع حساب */
.auth-box .btn-outline-primary{ color:var(--lg-text); background:#fff; border-color:var(--lg-line-2); }
.auth-box .btn-check:checked + .btn-outline-primary,
.auth-box .btn-outline-primary:hover{
  color:var(--lg-blue-d); background:var(--lg-blue-bg); border-color:var(--lg-blue);
}

/* ---------- لینک‌ها و پیام‌ها ---------- */
.auth-box a{ color:var(--lg-blue); text-decoration:none; }
.auth-box a:hover{ color:var(--lg-blue-d); text-decoration:underline; }
.auth-box a.text-muted{ color:var(--lg-text) !important; }
.auth-box .text-muted, .auth-box .small.text-muted{ color:var(--lg-muted) !important; }
.auth-box .btn-link{ color:var(--lg-blue); }
.auth-box .error{ color:#dc2626; font-size:13px; }
.auth-box .success{ color:#16a34a; font-size:13px; }
#regPwRules, #pwRules{ padding:0; color:var(--lg-muted); line-height:1.9; font-size:12.5px; }
#regPwRules li.text-success, #pwRules li.text-success{ color:#16a34a !important; }
#appVersion{ margin-top:28px; color:var(--lg-hint) !important; font-size:11px; letter-spacing:.04em; }

/* ---------- پنل برند (چپ) ---------- */
.login-visual{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:100vh; padding:clamp(32px,5vw,72px);
  direction:rtl; color:#fff; border:0; border-radius:0;
  background:
    radial-gradient(60% 50% at 15% 12%, rgba(59,130,246,.38), transparent 70%),
    radial-gradient(50% 45% at 90% 85%, rgba(99,102,241,.22), transparent 70%),
    linear-gradient(155deg,#0f1f4a 0%,#0b1533 55%,#070d22 100%);
}

/* شبکه نقطه‌ای محو */
.login-visual::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 25%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 30% 25%, #000, transparent 75%);
}

/* خط مسیر با گره‌ها */
.login-visual::after{
  content:""; position:absolute; z-index:0; inset:7% 7% 40% 7%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='rgb(96,165,250)' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='rgb(147,197,253)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 310C120 310 140 205 235 195S365 225 425 145S525 55 590 40' stroke='url(%23g)' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 340C150 340 200 280 300 270S470 240 590 120' stroke='rgb(96,165,250)' stroke-opacity='.18' stroke-width='1.5' stroke-dasharray='4 8'/%3E%3Cg fill='rgb(15,31,74)' stroke='rgb(147,197,253)' stroke-width='2'%3E%3Ccircle cx='235' cy='195' r='7'/%3E%3Ccircle cx='425' cy='145' r='7'/%3E%3C/g%3E%3Ccircle cx='590' cy='40' r='18' fill='rgb(96,165,250)' fill-opacity='.18'/%3E%3Ccircle cx='590' cy='40' r='7' fill='rgb(191,219,254)'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* فقط یک تیتر و یک جمله - (fleet-visual-pills از اینجا حذف شد تا مخفی نماند) */
.login-visual .fleet-visual-top,
.login-visual .fleet-visual-kicker { display:none; }

.login-visual .fleet-visual-caption{
  position:relative; z-index:2; order: 2; /* قرارگیری در پایین */
  max-width:480px; margin:0; padding:0;
  border:0; background:none; box-shadow:none; backdrop-filter:none;
}
.login-visual .fleet-visual-caption h2{
  margin:0 0 12px; font-size:clamp(26px,2.8vw,40px);
  font-weight:800; line-height:1.45; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5);
}
.login-visual .fleet-visual-caption p{
  margin:0; max-width:420px; font-size:14px; line-height:2; color:#e2e8f0; text-shadow:0 1px 5px rgba(0,0,0,0.5);
}

/* ---------- مودال‌ها: ظاهر روشن و ساده ---------- */
.modal-content{ border:0; border-radius:16px; }
.modal-header, .modal-footer{ border-color:var(--lg-line); }

/* ---------- ورود آرام ---------- */
@keyframes lg-rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.login-container > .auth-box > *{ animation:lg-rise .45s var(--lg-ease) both; }
.login-container > .auth-box > :nth-child(2){ animation-delay:.05s; }
.login-container > .auth-box > :nth-child(3){ animation-delay:.10s; }
.login-container > .auth-box > :nth-child(4){ animation-delay:.15s; }

/* ---------- ریسپانسیو ---------- */
@media (max-width:900px){
  body .login-container{ grid-template-columns:1fr; }
  .login-visual{ display:none; }
  body .login-container > .auth-box{ min-height:100vh; padding:28px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .auth-box *{ animation:none !important; transition:none !important; }
}

/* ===== 🎬 ویدیوی پنل برند ===== */
.login-visual .login-bg-video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter: brightness(1.25) contrast(1.1); 
}

/* وقتی ویدیو لود شد: خطوط و شبکه‌ها مخفی می‌شوند و گرادیانت ملایم جایگزین می‌شود */
.login-visual.has-video::after{ display:none; }

.login-visual.has-video::before{
  -webkit-mask-image:none; mask-image:none;
  /* سایه فقط در پایین صفحه است تا متن‌ها خوانا باشند */
  background-image:
    linear-gradient(to top, rgba(7,13,34,.95) 0%, rgba(7,13,34,.4) 35%, transparent 100%);
  background-size:auto;
}

/* ======================================================
   🆕 استایل سه کارت شیشه‌ای (Glassmorphism)
====================================================== */

.login-visual .fleet-visual-pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
  order: 1; /* قرارگیری بالای متن اصلی */
  margin-bottom: 32px;
  
  /* حالت اولیه: مخفی و کمی پایین‌تر */
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none; /* جلوگیری از کلیک وقتی مخفی است */
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* حالت بعد از پایان ویدیو: ظاهر شو و بیا بالا */
.login-visual.video-ended .fleet-visual-pills {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* استایل هر کارت */
.fleet-pill-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 380px;
}

/* استایل آیکون‌ها */
.fleet-pill-card i {
  font-size: 28px;
  color: #60a5fa;
  width: 32px;
  text-align: center;
}

/* استایل متن‌ها */
.fleet-pill-card div {
  display: flex;
  flex-direction: column;
}

.fleet-pill-card strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.fleet-pill-card span {
  font-size: 12px;
  color: #cbd5e1;
}
#cm-tbody .btn,
#mission-container #missionsTableBody .btn{
  font-weight: 500;
  color: var(--fl-text-2, #334155) !important;
}
#cm-tbody .badge,
#missionsTableBody .badge{ font-weight: 500 !important; }
.fl-table td{ color: #334155; }
.login-visual .fleet-visual-pills {
  position: absolute;
  top: 8%;
  right: clamp(32px, 5vw, 72px);
  margin-bottom: 0;
}
/* ===== اسکرول داخلی فرم (فقط دسکتاپ) ===== */
@media (min-width: 901px){
  html, body{ height:100%; overflow:hidden; }

  body .login-container{
    height:100vh !important;
    min-height:0;
    grid-template-rows:minmax(0,1fr);
  }

  body .login-container > .auth-box{
    height:100vh;
    overflow-y:auto;
    justify-content:safe center;   /* وقتی فرم بلند شد از بالا بریده نشه */
    direction:ltr;                 /* اسکرول‌بار بره لبه‌ی راست صفحه، نه وسط */
  }
  .login-container > .auth-box > *{ direction:rtl; }

  .login-visual{ height:100vh; min-height:0; }
}

/* اسکرول‌بار نازک و کمرنگ */
.login-container > .auth-box{
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.25) transparent;
}
.login-container > .auth-box::-webkit-scrollbar{ width:6px; }
.login-container > .auth-box::-webkit-scrollbar-track{ background:transparent; }
.login-container > .auth-box::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.25);
  border-radius:999px;
}
.login-container > .auth-box::-webkit-scrollbar-thumb:hover{
  background:rgba(100,116,139,.45);
}