/* ISS Command — Login Page Redesign (overlays the React page's inline styles) */

body.iss-login-page {
  background: #050a16 !important;
  overflow-x: hidden !important;
}

body.iss-login-page > div {
  min-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
            max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(0, 220, 255, 0.16), transparent 60%),
    radial-gradient(55% 45% at 85% 85%, rgba(212, 175, 55, 0.12), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(8, 60, 110, 0.35), transparent 70%),
    #050a16 !important;
}

/* hide the page's own decorative circles — we draw our own ambience above */
.iss-login-blob { display: none !important; }

@keyframes issLoginDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
body.iss-login-page > div::before {
  content: '';
  position: absolute !important;
  inset: -10% !important;
  background:
    radial-gradient(38% 30% at 22% 20%, rgba(0, 240, 255, 0.10), transparent 60%),
    radial-gradient(32% 26% at 80% 78%, rgba(212, 175, 55, 0.09), transparent 60%);
  animation: issLoginDrift 16s ease-in-out infinite;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* faint grid texture for a "security ops" feel */
body.iss-login-page > div::after {
  content: '';
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 34px 34px !important;
  mask-image: radial-gradient(70% 70% at 50% 35%, #000 40%, transparent 85%);
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.iss-login-card {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 410px !important;
  box-sizing: border-box !important;
  padding: 36px 30px 28px !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(14, 24, 44, 0.78), rgba(8, 14, 28, 0.86)) !important;
  border: 1px solid rgba(0, 240, 255, 0.16) !important;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  animation: issLoginRise 0.5s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes issLoginRise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
  .iss-login-card { padding: 30px 22px 22px !important; border-radius: 22px !important; }
}

/* ── Head: logo / title / subtitle ────────────────────────────────────── */
.iss-login-head { width: 100% !important; text-align: center !important; margin-bottom: 22px !important; }

/* شيل الفريم (الخلفية/الحدود/التوهج الصندوقي/الحلقة الخارجية) خالص —
   سيبي الشعار نفسه بس أكبر، بتوهج ناعم حواليه بدل الصندوق. */
.iss-login-logo-wrap { width: 100px !important; height: 100px !important; margin: 0 auto 18px !important; }
.iss-login-logo-box {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.iss-login-logo-innerglow { display: none !important; }
.iss-login-logo-ring { display: none !important; }
.iss-login-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 20px rgba(0, 220, 255, 0.45)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)) !important;
  animation: issLogoPulse 3.2s ease-in-out infinite !important;
}
@keyframes issLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(0,220,255,.45)) drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
  50%      { filter: drop-shadow(0 0 32px rgba(0,220,255,.7)) drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
}
.iss-login-head h1 {
  font-size: clamp(26px, 7vw, 32px) !important;
  letter-spacing: 3px !important;
  background: linear-gradient(135deg, #fff, #9fd8ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 2px 0 6px !important;
}
.iss-login-head p {
  color: #7a93b5 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.5px !important;
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.iss-login-form { gap: 18px !important; }
.iss-login-label { color: #6f88a8 !important; font-size: 11px !important; letter-spacing: 1.3px !important; margin-bottom: 7px !important; }

.iss-login-input-wrap { transition: transform .15s ease !important; }
.iss-login-input-wrap:focus-within { transform: translateY(-1px) !important; }

.iss-login-input {
  height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: rgba(3, 9, 20, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.iss-login-input::placeholder { color: #3f5168 !important; }
.iss-login-input:hover { border-color: rgba(0, 240, 255, 0.22) !important; }
.iss-login-input:focus {
  border-color: rgba(0, 220, 255, 0.55) !important;
  background: rgba(3, 9, 20, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(0, 220, 255, 0.10), 0 0 24px rgba(0, 220, 255, 0.12) !important;
}
.iss-login-input-wrap i.fa-envelope,
.iss-login-input-wrap i.fa-lock { color: #2f6690 !important; }
.iss-login-input-wrap:focus-within i.fa-envelope,
.iss-login-input-wrap:focus-within i.fa-lock { color: #00d4ff !important; }
.iss-login-eye { color: #3f5168 !important; transition: color .15s ease !important; }
.iss-login-eye:hover { color: #9fd8ff !important; }

.iss-login-submit {
  height: 54px !important;
  margin-top: 4px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #06b6d4, #0369a1) !important;
  box-shadow: 0 10px 30px -6px rgba(6, 182, 212, 0.45) !important;
  font-size: 15px !important;
  letter-spacing: 0.6px !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.iss-login-submit:hover { transform: translateY(-1px) !important; filter: brightness(1.08) !important; box-shadow: 0 14px 34px -6px rgba(6, 182, 212, 0.55) !important; }
.iss-login-submit:active { transform: translateY(0) !important; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.iss-login-footer { margin-top: 24px !important; opacity: 0.8 !important; }
.iss-login-footer > div:first-child {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent) !important;
  height: 1px !important;
  margin-bottom: 16px !important;
}
.iss-login-footer span { color: #5c7392 !important; font-size: 11px !important; letter-spacing: 0.4px !important; }
.iss-login-footer img { opacity: 0.85 !important; }