/* ============================================================
   Custom Twenty CRM Theme — Login Page De-branding
   Injected by Nginx sub_filter (nginx/nginx.conf).
   The Twenty Docker image is never modified.

   SELECTOR STRATEGY (all selectors survive CSS class renames)
   -----------------------------------------------------------
   1. Logo image:  [style*="android-launchericon"]
      Twenty sets the logo as an INLINE style.  Stable.

   2. Logo link:   a[href$="/welcome"]
      The logo wraps in <a href="/welcome">.  Stable href.

   3. Footer note: a[href*="twenty.com/legal"]
      Privacy + Terms links always point to twenty.com.  Stable.

   4. Title text:  #scroll-wrapper-scroll-wrapper-modal-content > div > div > div:not(:has(form))
      The "Welcome to your workspace" / "Welcome, Name." heading is 3 div
      levels deep and has no interactive descendants (unlike the form).

   5. Overlay bg:  div:has(> div > #scroll-wrapper-scroll-wrapper-modal-content)
      The login modal's scroll container has a stable ID.
      Two levels up is the full-viewport dark overlay.  We make
      it opaque so the CRM content behind it disappears.

   HOW TO FIX AFTER A TWENTY UPDATE
   ----------------------------------
   Open DevTools on the login page, inspect the element that
   broke, and update the matching block below.
   ============================================================ */


/* ── 1. TWENTY LOGO ─────────────────────────────────────────────────────── */

/* The logo div has the image as an INLINE style (not a class), so this
   selector is very stable across version updates. */
div[style*="android-launchericon"],
img[src*="android-launchericon"] {
  display: none !important;
}

/* The <a href="/welcome"> wrapper that surrounds the logo. */
a[href$="/welcome"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Collapse the AnimatedEaseIn wrapper that wraps the logo link,
   so no dead whitespace remains above the login title. */
div:has(> a[href$="/welcome"]) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* ── 2. FOOTER NOTE ("Privacy Policy • Terms of Service") ───────────────── */

/* Individual footer links – always point to twenty.com/legal/* */
a[href*="twenty.com/legal/privacy"],
a[href*="twenty.com/legal/terms"] {
  display: none !important;
}

/* Container of the footer note (any ancestor that ONLY contains legal links) */
div:has(> a[href*="twenty.com/legal"]),
p:has(> a[href*="twenty.com/legal"]) {
  display: none !important;
  height: 0 !important;
}

/* Broader catch-all using CSS :has() with descendant selector */
div:has(a[href*="twenty.com/legal/privacy"]):not(:has(form)):not(:has(input)) {
  display: none !important;
}


/* ── 3. WELCOME TITLE ("Welcome to your workspace" / "Welcome, Name.") ──── */

/* The title sits exactly 3 direct-div levels inside the stable scroll-wrapper:
     scroll-wrapper > div > div > [TITLE DIV]
   We hide only non-interactive divs at that depth (the title has no
   form / input / button children, unlike the form wrapper next to it). */
#scroll-wrapper-scroll-wrapper-modal-content > div > div > div:not(:has(form)):not(:has(input)):not(:has(button)) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* ── 4. CLEAN BACKGROUND ────────────────────────────────────────────────── */

/* Page background */
body {
  background-color: #f0f0f0 !important;
}

/* The full-viewport overlay (dark semi-transparent div) sits two levels
   above the login modal's stable ID.  Making it an opaque light background
   hides all CRM content behind it without touching visibility or display. */
div:has(> div > #scroll-wrapper-scroll-wrapper-modal-content) {
  background-color: #f0f0f0 !important;
}

/* The white login card (direct parent of scroll-wrapper) */
div:has(> #scroll-wrapper-scroll-wrapper-modal-content) {
  background-color: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10) !important;
  border-radius: 8px !important;
  /* Shrink the card to fit only the remaining form content */
  height: auto !important;
  min-height: auto !important;
}

/* Scroll wrapper: remove its padding entirely (it sits inside the card) */
#scroll-wrapper-scroll-wrapper-modal-content {
  height: auto !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* sx0pp6r – the single flex child of scroll-wrapper */
#scroll-wrapper-scroll-wrapper-modal-content > div {
  height: auto !important;
  min-height: auto !important;
}

/* scpim0n – the content wrapper with 40px padding from Linaria.
   Reduce to something compact now that logo + title are gone. */
#scroll-wrapper-scroll-wrapper-modal-content > div > div {
  height: auto !important;
  min-height: auto !important;
  padding: 32px 48px !important;
}