/* ═══════════════════════════════════════════════════
   QTS Custom — LOGIN ONLY
   Toutes les règles scopées à body.qts-login
   pour ne jamais toucher le desktop QTS
═══════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* ══ FOND (uniquement sur la page login) ════════════════════════ */
html:has(body.qts-login) { background: #0d0f1a !important; }
body.qts-login            { background: #0d0f1a !important; overflow: hidden !important; }

body.qts-login::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 55% at 20% 30%, rgba(79, 70, 229, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 65% at 80% 70%, rgba(139, 92, 246, 0.18) 0%, transparent 65%),
    linear-gradient(155deg, #08091a 0%, #0d0f1a 50%, #070816 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ══ MASQUER ÉLÉMENTS INUTILES (login seulement) ════════════════ */
body.qts-login .backgroud-image,
body.qts-login .qnap-link,
body.qts-login .header,
body.qts-login .cums-ct { display: none !important; }

body.qts-login .version {
  position: fixed !important;
  bottom: 16px !important;
  left: 0 !important; right: 0 !important;
  text-align: center !important;
  z-index: 10 !important;
  font-size: 11px !important;
}
body.qts-login .fw-ver { color: rgba(255,255,255,0.22) !important; }
body.qts-login .version .logo { display: none !important; }

body.qts-login .buttom.qpkg-ct { bottom: 44px !important; z-index: 10 !important; }

/* ══ CARTE LOGIN ═════════════════════════════════════════════════ */
#loginForm {
  font-family: "Inter", -apple-system, sans-serif !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;

  width: 380px !important;
  padding: 40px 36px 36px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(48px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06) inset,
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 40px 80px rgba(0, 0, 0, 0.65),
    0 8px 32px rgba(79, 70, 229, 0.15) !important;
  overflow: visible !important;
  z-index: 1900 !important;
}

#loginForm::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important; right: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent) !important;
  pointer-events: none !important;
}

/* ══ FORM CONTAINER ══════════════════════════════════════════════ */
#loginForm .form-ct { width: 100% !important; margin: 0 !important; }

/* FIX : step height fixe 412px de l'original → tronque le contenu */
#loginForm .step { height: auto !important; min-height: 0 !important; position: relative !important; }

/* ══ NOM DU NAS ══════════════════════════════════════════════════ */
#loginForm .host-name,
#loginForm .lock-icon--label {
  font-family: "Inter", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.2px !important;
}

/* ══ CHAMPS INPUT ════════════════════════════════════════════════ */
#loginForm .input-field {
  height: 48px !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
#loginForm .input-field::before { display: none !important; }
#loginForm .input-field + .input-field { margin-bottom: 12px !important; }
#loginForm .input-field:focus-within {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* ══ INPUT TEXT ══════════════════════════════════════════════════ */
#loginForm input {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: "Inter", sans-serif !important;
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  caret-color: rgba(255,255,255,0.7) !important;
}
#loginForm ::-webkit-input-placeholder { color: rgba(255,255,255,0.22) !important; }
#loginForm ::-moz-placeholder          { color: rgba(255,255,255,0.22) !important; }
#loginForm :-ms-input-placeholder      { color: rgba(255,255,255,0.22) !important; }

/* ══ ICÔNES SPRITE ═══════════════════════════════════════════════ */
#loginForm .user-icon,
#loginForm .pwd-icon {
  flex-shrink: 0 !important;
  margin-right: 10px !important;
  margin-left: 0 !important;
  opacity: 0.5 !important;
  display: inline-block !important;
}
#loginForm .unmask-eye {
  flex-shrink: 0 !important;
  cursor: pointer !important;
  opacity: 0.4 !important;
  transition: opacity 0.2s !important;
}
#loginForm .unmask-eye:hover     { opacity: 0.85 !important; }
#loginForm .unmask-eye.show-text { opacity: 0.65 !important; }
#loginForm .reset-icon           { flex-shrink: 0 !important; opacity: 0.4 !important; }
#loginForm .reset-icon.show:hover { opacity: 0.8 !important; }

/* ══ CHECKBOXES ══════════════════════════════════════════════════ */
#loginForm .checkbox-field {
  width: 100% !important;
  margin: 5px 0 !important;
  display: flex !important;
  align-items: center !important;
}
/* override display:none de l'original QNAP */
#loginForm .checkbox-field input[type="checkbox"] {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  accent-color: #6366f1 !important;
  cursor: pointer !important;
  margin: 0 !important;
}
#loginForm .checkbox-field label {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  cursor: pointer !important;
  margin-left: 8px !important;
  line-height: 1 !important;
}
#loginForm .checkbox-field label::before { display: none !important; }

/* ══ MESSAGE ERREUR ══════════════════════════════════════════════ */
#loginForm .msg {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  min-height: 16px !important;
  text-align: center !important;
  margin: 6px 0 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  overflow: visible !important;
}
#loginForm .msg .warning                      { color: #fca5a5 !important; }
#loginForm.warning .step_1 .msg               { color: #f87171 !important; }
#loginForm.logining .step_2 .msg,
#loginForm.logining .step_3 .result-msg       { color: #818cf8 !important; }

/* ══ BOUTON LOGIN ════════════════════════════════════════════════ */
#loginForm .center { text-align: center !important; }

#loginForm .login-btn {
  width: 100% !important;
  height: 46px !important;
  margin-top: 14px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: "Inter", sans-serif !important;
  cursor: pointer !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 6px 20px rgba(79, 70, 229, 0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s !important;
}
#loginForm .login-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 10px 30px rgba(79, 70, 229, 0.6) !important;
}
#loginForm .login-btn:active { transform: translateY(0) !important; opacity: 0.9 !important; }

/* ══ ÉTAPES 2FA ══════════════════════════════════════════════════ */
#loginForm .step_2 .title,
#loginForm .step_3 .title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 22px !important;
}
#loginForm .step_2 .msg,
#loginForm .step_3 .msg {
  color: rgba(255,255,255,0.7) !important;
  width: 100% !important;
  height: auto !important;
}
#loginForm .step_2 .msgCt,
#loginForm .step_3 .msgCt { color: rgba(255,255,255,0.6) !important; height: auto !important; }
#loginForm .step_2 .result-msg,
#loginForm .step_3 .result-msg {
  color: #f87171 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 12px !important;
}
#loginForm .lock-icon { opacity: 0.9 !important; }
#loginForm .step_2 .pwd-icon,
#loginForm .step_3 .pwd-icon { opacity: 0.5 !important; flex-shrink: 0 !important; margin-right: 10px !important; }
#loginForm .question_label { color: rgba(255,255,255,0.75) !important; width: 100% !important; font-size: 13px !important; margin: 0 0 12px 0 !important; }
#qestion_msg { color: #f87171 !important; font-size: 12px !important; height: auto !important; min-height: 0 !important; width: 100% !important; padding: 6px 0 !important; }

/* ══ LIENS 2FA ═══════════════════════════════════════════════════ */
#lostPhone, #back_2sv, .cancel_login {
  color: rgba(255,255,255,0.38) !important;
  font-size: 13px !important;
  font-family: "Inter", sans-serif !important;
  width: 100% !important;
  margin: 8px auto !important;
  display: block !important;
  cursor: pointer !important;
}
#lostPhone:hover, #back_2sv:hover, .cancel_login:hover { color: rgba(255,255,255,0.65) !important; }

/* ══ MODAL — scopée à body.qts-login UNIQUEMENT ═════════════════
   (évite de casser les modales du desktop QTS)               */
body.qts-login .msg-box-mask {
  background-color: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
body.qts-login .msg-box {
  background: #12141f !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.7) !important;
  color: rgba(255,255,255,0.85) !important;
}
body.qts-login .msg-text-ct { color: rgba(255,255,255,0.75) !important; }
body.qts-login .btn-ct {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.8) !important;
}
body.qts-login .btn-ct:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* ══ TOOLTIP — login only ════════════════════════════════════════ */
body.qts-login .qts-tooltip {
  background: #1e2030 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 6px !important;
}