/* ZLAB login page — full brand image, no top bar covering logo
 * Image 1792×1008 (~16:9). Uniform scale only (cover). No fixed-attachment
 * (fixed+cover often looks "stretched" when browser chrome changes viewport).
 */

html:has([data-test="login-form"]),
html.zlab-login-page,
body:has([data-test="login-form"]),
body.zlab-login-page {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  background-color: #0c0a08 !important;
  background-image: url("/custom-superset/assets/login-bg.jpg?v=202609171256") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  /* uniform scale to fill; may crop tiny edges if window ≠ 16:9 — never skews */
  background-size: cover !important;
  background-attachment: scroll !important;
}

/* Hide Superset top chrome on login */
body:has([data-test="login-form"]) .ant-layout-header,
body.zlab-login-page .ant-layout-header,
body:has([data-test="login-form"]) header,
body.zlab-login-page header,
body:has([data-test="login-form"]) nav.top,
body.zlab-login-page nav.top,
body:has([data-test="login-form"]) .navbar,
body.zlab-login-page .navbar,
body:has([data-test="login-form"]) [class*="header"][class*="navbar"],
body.zlab-login-page [data-test="menu-main"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Transparent SPA shells */
body:has([data-test="login-form"]) #app,
body.zlab-login-page #app,
body:has([data-test="login-form"]) #app > div,
body.zlab-login-page #app > div,
body:has([data-test="login-form"]) .ant-layout,
body.zlab-login-page .ant-layout,
body:has([data-test="login-form"]) .ant-layout-content,
body.zlab-login-page .ant-layout-content,
body:has([data-test="login-form"]) .ant-layout-footer,
body.zlab-login-page .ant-layout-footer,
body:has([data-test="login-form"]) main,
body.zlab-login-page main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body:has([data-test="login-form"])::before,
body.zlab-login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 50% at 50% 48%,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.10) 45%,
    rgba(0, 0, 0, 0.04) 70%,
    transparent 100%
  );
}

body:has([data-test="login-form"]) #app,
body.zlab-login-page #app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has([data-test="login-form"]) [data-test="login-form"] {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  padding: 24px 16px !important;
}

body:has([data-test="login-form"]) [data-test="login-form"] > div,
body:has([data-test="login-form"]) .ant-card,
body.zlab-login-page .ant-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}