/* ==========================================================================
   Flawless Premium Dark Theme - Apex Sites Client Portal
   ========================================================================== */

/* 1. Global Viewport Reset - Centered Flexbox */
html, body, #sanity {
  background-color: #0b0c10 !important;
  background: radial-gradient(circle at top left, #12131a 0%, #08080c 100%) !important;
  color: #ffffff !important;
  min-height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 2. The Login Card Container - High-specificity targeting with solid slate background */
#sanity div[class*="LoginScreen"] div[class*="Card"],
#sanity div[class*="Card"]:has(h1),
#sanity div[data-testid="login-card"],
#sanity form:has(button) {
  background-color: #15171e !important;
  background: #15171e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 3.5rem 2.5rem !important;
  width: 90% !important;
  max-width: 460px !important; /* Perfect standard centered width */
  margin: auto !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

/* 3. Style headings inside the Card */
#sanity h1,
#sanity h2,
#sanity [class*="Card"] h1 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  margin-top: 0 !important;
  margin-bottom: 2.2rem !important;
  text-align: center !important;
  width: 100% !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Style ONLY the Login Buttons inside the Card container (leaving footer alone) */
#sanity div[class*="Card"] a,
#sanity div[class*="Card"] button,
#sanity div[class*="Card"] [role="button"],
#sanity [class*="Button"] {
  background-color: #7c3aed !important; /* Premium Apex Violet */
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  padding: 0.95rem 1.5rem !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
  text-decoration: none !important;
  width: 100% !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  margin-bottom: 1.2rem !important;
}

#sanity div[class*="Card"] a:hover,
#sanity div[class*="Card"] button:hover,
#sanity div[class*="Card"] [role="button"]:hover,
#sanity [class*="Button"]:hover {
  background-color: #8b5cf6 !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45) !important;
  transform: translateY(-1.5px) !important;
}

/* Ensure button label text remains bright white */
#sanity div[class*="Card"] a *,
#sanity div[class*="Card"] button *,
#sanity div[class*="Card"] [role="button"] * {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 5. Style generic text and labels inside the card */
#sanity span,
#sanity p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500 !important;
  text-align: center !important;
  width: 100% !important;
}

/* 6. Hide default BrandLogo element but keep our dynamically injected brand img logo */
#sanity div[class*="BrandLogo"] svg {
  display: none !important;
}

/* 7. Completely hide bottom Sanity branding elements */
#sanity div[class*="LoginScreen"] > div:last-child,
#sanity div[class*="LoginScreen"] footer,
#sanity footer,
#sanity div[class*="Footer"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}