/* =====================================================================
   Greymont — Twenty auth theme (Grafito + Platino digital, kit M1-P)
   Scoped to the auth/login view via body:has(.sdtdivd) so the logged-in
   app interior is left untouched. Substring class matchers [class*="_x_"]
   survive Twenty's hashed-classname changes across updates.
   Revert: point Caddy back to :3020 and remove this file. Espo untouched.
   Regla de metales del kit: PLATINO #C9D2DC = metal digital primario.
   ===================================================================== */
:root{
  --gm-ink0:#0A0D11; --gm-ink:#0E1116; --gm-surface:#161B22;
  --gm-text:#E9EDF2; --gm-muted:#97A1AD;
  --gm-metal:#C9D2DC; --gm-metal-hi:#F1F5F9; --gm-metal-deep:#6E7888;
  --gm-mline:rgba(201,210,220,.32);
  --gm-field:rgba(201,210,220,.08);
}
/* Graphite field on the whole auth viewport (robust: paints even if Twenty renames
   the inner backdrop div). Matches the Greymont ink-900 graphite. */
body:has(.sdtdivd){
  background:
    radial-gradient(1200px 820px at 50% -12%, #2C3A49 0%, rgba(14,17,22,0) 62%),
    linear-gradient(180deg, var(--gm-surface) 0%, var(--gm-ink) 50%, var(--gm-ink0) 100%) !important;
}

/* ---------- FIELD: turn the modal scrim into a clean graphite field ---------- */
body:has(.sdtdivd) [class*="_backdrop_"]{
  background:
    radial-gradient(1200px 820px at 50% -12%, #2C3A49 0%, rgba(14,17,22,0) 62%),
    linear-gradient(180deg, var(--gm-surface) 0%, var(--gm-ink) 50%, var(--gm-ink0) 100%) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* ---------- CARD ---------- */
body:has(.sdtdivd) [class*="_modal_"]{
  position:relative !important;
  width:min(500px,92vw) !important; max-width:500px !important;
  padding:52px 48px !important;
  background:linear-gradient(180deg, rgba(26,32,41,.82), rgba(12,15,20,.88)) !important;
  border:1px solid rgba(201,210,220,.20) !important;
  border-radius:3px !important;
  box-shadow:0 26px 74px -26px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  color:var(--gm-text) !important;
  overflow:visible !important;
}
/* signature platinum top-edge rule (bright center, fades to corners) */
body:has(.sdtdivd) [class*="_modal_"]::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,210,220,.9) 50%, transparent);
  pointer-events:none;
}
body:has(.sdtdivd) [class*="_modal_"] :where(h1,h2,h3,h4,p,span,label,a,div,li){ color:var(--gm-text) !important; }

/* hide Twenty's logo block (the "20" mark + workspace avatar). The container is
   the div whose DIRECT child is the sole logo link; matching that div hides both and
   survives hash churn (no atomic classnames in the selector). Platinum seal shown instead. */
body:has(.sdtdivd) [class*="_content_"] div:has(> a[class*="_undecoratedLink_"]){ display:none !important; }

/* brand mark above the form — ONLY on the content block that holds the Welcome
   heading (some steps render a second nested _content_ that must not get a mark). */
body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd){ position:relative !important; }
/* the mark, masked so a live metallic-foil gradient fills the seal strokes (platino) */
body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
  content:""; display:block; width:120px; height:120px; margin:6px auto 34px;
  background:linear-gradient(125deg,#5A6472 0%,#8D99A8 15%,#DDE5ED 30%,#FFFFFF 43%,#C9D2DC 55%,#77828F 72%,#DDE5ED 86%,#5A6472 100%);
  background-size:220% 220%;
  -webkit-mask:url('/gm-brand/mark.svg') center/contain no-repeat;
          mask:url('/gm-brand/mark.svg') center/contain no-repeat;
  filter:drop-shadow(0 8px 26px rgba(201,210,220,.30));
  animation:gmFoil 6.5s ease-in-out infinite;
}
@keyframes gmFoil{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* full-bleed on phones -> keep the top-edge platinum rule off the raw viewport edge */
@media (max-width:600px){
  body:has(.sdtdivd) [class*="_modal_"]{ padding:36px 24px !important; }
  body:has(.sdtdivd) [class*="_modal_"]::after{ display:none !important; }
  body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{ width:96px; height:96px; margin:6px auto 28px; }
}

/* ---------- INTERACTIVE 3D MARK (login) ----------
   Rendered by /gm-brand/gm-login.js as a position:fixed layer on <body>
   (outside Twenty's React root), synced to the login card each frame. The CSS
   foil mark above stays as the fallback until the model reports 'load'
   (html.gm-3d-ready), so a WebGL/network failure degrades gracefully. */
#gm-3d-layer{
  position:fixed; z-index:2147483000; display:none;
  pointer-events:none; contain:layout style size;
}
#gm-3d-layer #gm-3d{
  width:100%; height:100%;
  background-color:transparent; --poster-color:transparent;
  pointer-events:none; cursor:grab;
  filter:drop-shadow(0 10px 30px rgba(201,210,220,.30)) drop-shadow(0 2px 7px rgba(201,210,220,.20));
}
html.gm-3d-ready #gm-3d-layer #gm-3d{ pointer-events:auto; }
#gm-3d-layer #gm-3d:active{ cursor:grabbing; }
#gm-3d-layer #gm-3d::part(default-progress-bar){ display:none !important; }
/* platinum halo behind the mark */
#gm-3d-layer .gm-3d-glow{
  position:absolute; inset:-32% -32% -38%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(201,210,220,.24), rgba(201,210,220,.05) 56%, transparent 74%),
    radial-gradient(closest-side, rgba(110,120,136,.10), transparent 70%);
  filter:blur(4px);
}
/* once the interactive model is live: hide the foil mark, keep (and grow) its
   reserved box so the orbiting mark never collides with the form below */
html.gm-3d-ready body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
  opacity:0 !important; animation:none !important;
  width:190px !important; height:190px !important; margin:2px auto 22px !important;
}
@media (max-width:600px){
  html.gm-3d-ready body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
    width:150px !important; height:150px !important; margin:2px auto 16px !important;
  }
}

/* login shows the mark ONLY — hide the welcome text. Kept in the DOM (display:none,
   not removed) so the body:has(.sdtdivd) scope keeps firing. */
body:has(.sdtdivd) .sdtdivd{ display:none !important; }

/* ---------- INPUTS ---------- */
body:has(.sdtdivd) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  background:var(--gm-field) !important;
  border:1px solid rgba(201,210,220,.24) !important;
  border-radius:3px !important; color:var(--gm-text) !important;
  caret-color:var(--gm-metal) !important;
}
body:has(.sdtdivd) input::placeholder{ color:var(--gm-muted) !important; opacity:.85; }
body:has(.sdtdivd) input:focus{
  border-color:var(--gm-metal) !important;
  box-shadow:0 0 0 3px rgba(201,210,220,.16) !important; outline:none !important;
}

/* ---------- PRIMARY BUTTON (Continue) — platinum foil ---------- */
body:has(.sdtdivd) button[data-variant="primary"],
body:has(.sdtdivd) [class*="_button_y8rpu"]{
  background:linear-gradient(100deg,#4A535E 0%,#6E7888 9%,#A7B2C0 19%,#E4EAF1 29%,#FFFFFF 37%,#C9D2DC 45%,#94A0AE 57%,#DDE5ED 69%,#818D9B 84%,#4A535E 100%) !important;
  background-size:230% 100% !important;
  border:1px solid rgba(74,83,94,.55) !important;
  color:#0E1116 !important; border-radius:3px !important; font-weight:700 !important;
  box-shadow:0 12px 28px -12px rgba(201,210,220,.45), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(74,83,94,.5) !important;
  animation:gmFoilBtn 7s ease-in-out infinite;
}
@keyframes gmFoilBtn{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce){
  body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before,
  body:has(.sdtdivd) button[data-variant="primary"],
  body:has(.sdtdivd) [class*="_button_y8rpu"]{ animation:none !important; }
}
body:has(.sdtdivd) button[data-variant="primary"] *,
body:has(.sdtdivd) [class*="_button_y8rpu"] *{ color:#0E1116 !important; }
body:has(.sdtdivd) button[data-variant="primary"]:hover,
body:has(.sdtdivd) [class*="_button_y8rpu"]:hover{ filter:brightness(1.05); }

/* ---------- SSO BUTTONS (secondary) ---------- */
body:has(.sdtdivd) [class*="_button_15sm2"]{
  background:rgba(201,210,220,.08) !important;
  border:1px solid rgba(201,210,220,.20) !important;
  color:var(--gm-text) !important; border-radius:3px !important;
}
body:has(.sdtdivd) [class*="_button_15sm2"]:hover{ background:rgba(201,210,220,.14) !important; }

/* links + selection */
body:has(.sdtdivd) a{ color:var(--gm-metal) !important; text-decoration:none !important; }
body:has(.sdtdivd) ::selection{ background:rgba(201,210,220,.30); color:#0E1116; }

/* =====================================================================
   INTERIOR — Twenty logged-in app is left on Twenty's NATIVE dark theme.
   The single intentional brand touch kept here is the workspace mark;
   no background/accent token overrides (interior stays stock dark).
   ===================================================================== */

/* workspace avatar (nav, top-left) -> Greymont seal. Scoped to
   data-testid="workspace-dropdown" (a stable Twenty hook) so record/person
   avatars elsewhere are left untouched. */
body:not(:has(.sdtdivd)) [data-testid="workspace-dropdown"] [data-type="squared"]{
  background-image:url('/gm-brand/mark.png') !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:#0E1116 !important;
}
body:not(:has(.sdtdivd)) [data-testid="workspace-dropdown"] [data-type="squared"] [class*="_placeholderChar"]{
  display:none !important;
}