/* eXtreme Hosting — ADFS Login Theme */

/* ── Critical fixes ── */
.hidden { display: none !important; }

/* ── Variables ── */
:root {
  --bg:        #04080f;
  --bg-card:   rgba(7, 16, 35, 0.92);
  --primary:   #00d4ff;
  --primary-d: rgba(0, 212, 255, 0.15);
  --primary-g: rgba(0, 212, 255, 0.35);
  --secondary: #8b5cf6;
  --text-1:    #f1f5f9;
  --text-2:    #94a3b8;
  --border:    rgba(0, 212, 255, 0.14);
  --radius:    12px;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg) !important;
  color: var(--text-1) !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

/* ── Background glow ── */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -200px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Full page layout — centered single column ── */
#fullPage {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  position: relative;
  z-index: 1;
}

/* ── Hide left branding/illustration panel ── */
#brandingWrapper {
  display: none !important;
}

/* ── Content wrapper — full width centered ── */
#contentWrapper {
  width: 100% !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 100vh !important;
  justify-content: center !important;
  padding: 40px 20px !important;
}

#content {
  width: 100% !important;
  max-width: 460px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 32px rgba(0,212,255,0.06) !important;
  backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
}

/* ── Logo ── */
#header {
  text-align: center !important;
  padding: 32px 36px 24px !important;
  background: transparent !important;
  border: none !important;
}

#companyLogo, .logoImage {
  max-width: 220px !important;
  max-height: 65px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.25)) !important;
}

/* ── Login card ── */
#workArea {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 36px 32px !important;
}

/* ── Status text ── */
#idp_SignInThisSiteStatusLabel span,
#idp_SignInThisSiteStatusLabel {
  color: var(--text-2) !important;
  font-size: 0.92rem !important;
  display: block !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

/* ── Section / field margins ── */
.sectionMargin {
  margin: 0 !important;
}

.fieldMargin {
  margin-bottom: 14px !important;
}

.submitMargin {
  margin-top: 8px !important;
}

/* ── Radio buttons & labels ── */
input[type="radio"] {
  accent-color: var(--primary) !important;
  margin-right: 8px !important;
}

label {
  color: var(--text-2) !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
}

/* ── Submit button ── */
.submit,
#idp_SignInButton,
#idp_GoButton,
#idp_SignOutButton,
input[type="submit"] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 24px !important;
  width: 100% !important;
  display: block !important;
  margin-top: 20px !important;
  transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 20px rgba(0,212,255,0.2) !important;
}

.submit:hover,
input[type="submit"]:hover {
  opacity: 0.88 !important;
  box-shadow: 0 6px 28px rgba(0,212,255,0.4) !important;
}

/* ── Select dropdown ── */
select.select {
  background: rgba(7, 16, 31, 0.9) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-1) !important;
  padding: 10px 14px !important;
  width: 100% !important;
  font-size: 0.9rem !important;
  margin-top: 8px !important;
}

/* ── Footer ── */
#footer, #footerLinks {
  color: var(--text-2) !important;
  font-size: 0.78rem !important;
  text-align: center !important;
  padding: 20px !important;
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
}

#footer a, #footerLinks a {
  color: var(--primary) !important;
  text-decoration: none !important;
}

/* ── Error messages ── */
.errorText, #errorText, .error {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  border-radius: 8px !important;
  color: #fca5a5 !important;
  padding: 10px 14px !important;
  font-size: 0.88rem !important;
  margin-bottom: 16px !important;
}

/* ── Inputs (for forms that follow) ── */
input[type="text"],
input[type="password"],
input[type="email"] {
  background: rgba(7, 16, 31, 0.9) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-1) !important;
  font-size: 0.95rem !important;
  padding: 12px 16px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-d) !important;
}

/* ── "Keep me signed in" ── */
#kmsiDiv {
  color: var(--text-2) !important;
  font-size: 0.88rem !important;
  margin: 16px 0 !important;
}

/* ── Links ── */
a { color: var(--primary) !important; text-decoration: none !important; }
a:hover { color: var(--secondary) !important; }

/* ── Remove copyright ── */
#copyright, #footer, #footerLinks { display: none !important; }

/* ── Hide "Sign in" label above email field ── */
#loginMessage { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Field rhythm — 2026-09-05
   AD FS renders the sign-in inputs inside #userNameArea and #passwordArea,
   neither of which carries .fieldMargin, so the boxes sat flush against each
   other. Space the areas themselves rather than the inputs.
   ══════════════════════════════════════════════════════════════════════════ */

#loginArea, #openIdConnectArea { width: 100% !important; }

#userNameArea,
#passwordArea,
#otpArea,
#authArea .xd-field {
  margin-bottom: 14px !important;
}

#passwordArea { margin-bottom: 4px !important; }

input[type="text"],
input[type="password"],
input[type="email"] {
  margin: 0 !important;
  line-height: 1.35 !important;
}

input::placeholder { color: rgba(148, 163, 184, 0.7) !important; }
input::-ms-input-placeholder { color: rgba(148, 163, 184, 0.7) !important; }

input[type="email"]:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-d) !important; }

#submissionArea, .submitMargin { margin-top: 22px !important; }

#error, #errorArea, .error, .errorText {
  margin-bottom: 18px !important;
  text-align: left !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   One-time code — enrollment and verification forms (XdTotp adapter)
   ══════════════════════════════════════════════════════════════════════════ */

.xd-title {
  color: var(--text-1) !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 0 10px !important;
}

.xd-step {
  color: var(--text-2) !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin: 0 0 18px !important;
  text-align: center !important;
}

.xd-step ol {
  margin: 10px 0 0 !important;
  padding-left: 20px !important;
  text-align: left !important;
}

.xd-step li { margin-bottom: 4px !important; }

.xd-qr {
  display: block !important;
  width: 212px !important;
  height: 212px !important;
  margin: 0 auto 16px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px var(--border), 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

.xd-secret {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  color: var(--text-2) !important;
  background: rgba(7, 16, 31, 0.9) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin: 0 0 18px !important;
  text-align: center !important;
  word-break: break-all !important;
}

.xd-otp-code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.45em !important;
  text-align: center !important;
  padding: 14px 16px 14px 22px !important;
}

.xd-hint {
  color: var(--text-2) !important;
  font-size: 0.82rem !important;
  text-align: center !important;
  margin: 14px 0 0 !important;
}

/* AD FS renders the sign-in button as <span id="submitButton" class="submit" role="button">, which
   inherits the left alignment of the form instead of centring like a real <input type="submit">. */
.submit,
span.submit,
#submitButton,
#idp_SignInButton,
input[type="submit"] {
  text-align: center !important;
  text-align-last: center !important;
}

/* ── Language switch and app suggestions on the one-time-code screens ── */
.xd-lang {
  text-align: right !important;
  margin: -6px 0 10px !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.04em !important;
}

.xd-lang-btn {
  color: var(--text-2) !important;
  text-decoration: none !important;
  padding: 2px 4px !important;
}

.xd-lang-btn:hover { color: var(--primary) !important; }

.xd-lang-active {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.xd-lang-sep { color: rgba(148, 163, 184, 0.45) !important; }

.xd-apps {
  margin: 0 0 18px !important;
  text-align: center !important;
}

.xd-app-link {
  display: block !important;
  padding: 11px 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: rgba(0, 212, 255, 0.06) !important;
  color: var(--primary) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.xd-app-link:hover {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.xd-apps-note {
  color: var(--text-2) !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

.xd-apps-links {
  margin-top: 10px !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}

.xd-app-mini {
  flex: 1 1 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-2) !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
}

.xd-app-mini:hover { color: var(--primary) !important; border-color: var(--primary) !important; }