/* =========================
   CTCT Observability (OSS-safe branding)
   LOGIN ONLY — scoped via: html.ctct-login
   Works with Grafana 12 SPA hydration
========================= */

html.ctct-login {
  --ctct-orange: #F98000;
  --ctct-bg: #070B16;
  --ctct-indigo: #2C2E8F;
  --ctct-card: rgba(12, 16, 28, 0.78);
  --ctct-text: rgba(255, 255, 255, 0.92);
  --ctct-muted: rgba(255, 255, 255, 0.70);

  /* Tuning knobs */
  --ctct-card-maxw: 640px;
  /* 👈 make container wider/narrower here */
  --ctct-logo-w: 420px;
  /* 👈 logo size */
  --ctct-logo-h: 120px;
  /* 👈 logo size */
  --ctct-logo-top: 38px;
  /* 👈 logo vertical position */
}

/* Full-height base */
html.ctct-login,
html.ctct-login body {
  height: 100% !important;
}

/* Background gradient (login only) */
html.ctct-login body,
html.ctct-login .grafana-app,
html.ctct-login .login-page,
html.ctct-login main {
  background:
    radial-gradient(1100px circle at 18% 10%, rgba(249, 128, 0, 0.18) 0%, transparent 55%),
    radial-gradient(1000px circle at 78% 22%, rgba(44, 46, 143, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, var(--ctct-bg) 0%, #050712 100%) !important;
  color: var(--ctct-text) !important;
}

/* Do NOT flex-center <main> (prevents layout jumps) */
html.ctct-login main {
  position: relative !important;
}

/* Center the login wrapper (safe targets) */
html.ctct-login .login-page,
html.ctct-login .login-container {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card styling
   IMPORTANT: apply to the outer card only to avoid "double padding" when nested */
html.ctct-login .login-container>div,
html.ctct-login .login-box {
  background: var(--ctct-card) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px);
  padding: 28px 36px 26px 36px !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
  position: relative !important;
  z-index: 20 !important;

  width: min(var(--ctct-card-maxw), calc(100vw - 56px)) !important;
  max-width: var(--ctct-card-maxw) !important;
}

/* If Grafana uses an inner wrapper, don't let it add extra padding */
html.ctct-login .login-box>div {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide Grafana footer + built-in logo on login */
html.ctct-login footer,
html.ctct-login .gf-footer,
html.ctct-login .login-footer,
html.ctct-login .login-logo,
html.ctct-login svg[aria-label="Grafana"],
html.ctct-login img[alt*="Grafana"] {
  display: none !important;
}

/* ---- Stable CTCT logo: fixed overlay (survives SPA hydration) ---- */
html.ctct-login body::after {
  content: "";
  position: fixed;
  top: var(--ctct-logo-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--ctct-logo-w);
  height: var(--ctct-logo-h);
  background: url("/branding/ctct-logo.svg") no-repeat center / contain;
  opacity: 0.95;
  pointer-events: none;
  z-index: 40;
}

/* Injected title block (created by ctct-login.js)
   Support both "classed" and "plain divs" content */
html.ctct-login .ctct-login-title {
  text-align: center !important;
  margin: 0 0 18px 0 !important;
  display: block !important;
}

/* If your JS adds these classes, use them */
html.ctct-login .ctct-login-title .ctct-title {
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  color: var(--ctct-text) !important;
  margin: 0 0 10px 0 !important;
}

html.ctct-login .ctct-login-title .ctct-subtitle {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--ctct-muted) !important;
  margin: 0 !important;
}

/* If JS injects plain divs without classes, still style them nicely */
html.ctct-login .ctct-login-title>div:first-child {
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  color: var(--ctct-text) !important;
  margin: 0 0 10px 0 !important;
}

html.ctct-login .ctct-login-title>div:nth-child(2) {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--ctct-muted) !important;
  margin: 0 !important;
}

/* Button polish */
html.ctct-login button,
html.ctct-login .gf-form-button,
html.ctct-login button[type="submit"],
html.ctct-login button[type="button"] {
  border-radius: 12px !important;
}

/* ---- Okta login action container (blue background) ---- */
html.ctct-login .login-container button[type="button"],
html.ctct-login .login-container button[type="submit"] {
  background: linear-gradient(180deg,
      #1f3a8a 0%,
      #1e40af 100%) !important;
  border: none !important;
}

/* Optional: make text a bit brighter */
html.ctct-login .login-container button span,
html.ctct-login .login-container button {
  color: #ffffff !important;
}

/* Blue background for the Okta "column"/row area */
html.ctct-login .ctct-okta-wrap {
  background: rgba(44, 46, 143, 0.20) !important;
  /* indigo tint */
  border: 1px solid rgba(44, 46, 143, 0.35) !important;
  border-radius: 12px !important;
  padding: 10px !important;
}

/* Make the Okta button itself blue */
html.ctct-login .ctct-okta-btn {
  background: #2C2E8F !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  width: 100% !important;
  border-radius: 12px !important;
}

html.ctct-login .ctct-okta-btn:hover {
  filter: brightness(1.06) !important;
}

html.ctct-login button:hover {
  filter: brightness(1.05) !important;
}