/* =====================================================================
   Lockwood Private Capital — Twenty auth theme (Emerald + Metallic Gold)
   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 :3030 and remove this file. Espo untouched.
   Paleta del kit: emerald #0E3B2E/#08261E · oro #C9A227 · brillo #F0D77A ·
   ivory #F2F1E8. Foil = gradiente 4 stops del kit, oro escaso = precioso.
   ===================================================================== */
:root{
  --lw-em:#0E3B2E; --lw-em-deep:#08261E; --lw-em-950:#051A14;
  --lw-ink:#F2F1E8; --lw-inksoft:#BBB7A0;
  --lw-gold:#C9A227; --lw-gold-shine:#F0D77A; --lw-gold-300:#E0BF5C;
  --lw-gline:rgba(240,215,122,.32);
  --lw-field:rgba(201,162,39,.08);
}
/* Emerald field on the whole auth viewport (robust: paints even if Twenty renames
   the inner backdrop div). Matches the Lockwood emerald-deep field. */
body:has(.sdtdivd){
  background:
    radial-gradient(1200px 820px at 50% -12%, #14543F 0%, rgba(8,38,30,0) 62%),
    linear-gradient(180deg, var(--lw-em) 0%, var(--lw-em-deep) 50%, var(--lw-em-950) 100%) !important;
}

/* ---------- FIELD: turn the modal scrim into a clean emerald field ---------- */
body:has(.sdtdivd) [class*="_backdrop_"]{
  background:
    radial-gradient(1200px 820px at 50% -12%, #14543F 0%, rgba(8,38,30,0) 62%),
    linear-gradient(180deg, var(--lw-em) 0%, var(--lw-em-deep) 50%, var(--lw-em-950) 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(16,66,52,.82), rgba(6,30,24,.88)) !important;
  border:1px solid rgba(201,162,39,.22) !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(--lw-ink) !important;
  overflow:visible !important;
}
/* signature gold top-edge rule (bright center, fades to corners) — sello de escritura */
body:has(.sdtdivd) [class*="_modal_"]::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,215,122,.9) 50%, transparent);
  pointer-events:none;
}
body:has(.sdtdivd) [class*="_modal_"] :where(h1,h2,h3,h4,p,span,label,a,div,li){ color:var(--lw-ink) !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). Gold keystone 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 keystone, masked so a live gold-foil gradient fills the strokes (foil del kit) */
body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
  content:""; display:block; width:120px; height:120px; margin:6px auto 34px;
  background:linear-gradient(125deg,#614B16 0%,#856719 15%,#C9A227 30%,#F0D77A 43%,#ECD489 55%,#A9851E 72%,#F0D77A 86%,#614B16 100%);
  background-size:220% 220%;
  -webkit-mask:url('/lw-brand/mark.svg') center/contain no-repeat;
          mask:url('/lw-brand/mark.svg') center/contain no-repeat;
  filter:drop-shadow(0 8px 26px rgba(240,215,122,.30));
  animation:lwFoil 6.5s ease-in-out infinite;
}
@keyframes lwFoil{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* full-bleed on phones -> keep the top-edge gold 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 /lw-brand/lw-login.js as a position:fixed layer on <body>
   (outside Twenty's React root), synced to the login card each frame. The CSS
   foil keystone above stays as the fallback until the model reports 'load'
   (html.lw-3d-ready), so a WebGL/network failure degrades gracefully. */
#lw-3d-layer{
  position:fixed; z-index:2147483000; display:none;
  pointer-events:none; contain:layout style size;
}
#lw-3d-layer #lw-3d{
  width:100%; height:100%;
  background-color:transparent; --poster-color:transparent;
  pointer-events:none; cursor:grab;
  filter:drop-shadow(0 10px 30px rgba(240,215,122,.30)) drop-shadow(0 2px 7px rgba(201,162,39,.20));
}
html.lw-3d-ready #lw-3d-layer #lw-3d{ pointer-events:auto; }
#lw-3d-layer #lw-3d:active{ cursor:grabbing; }
#lw-3d-layer #lw-3d::part(default-progress-bar){ display:none !important; }
/* gold halo behind the keystone */
#lw-3d-layer .lw-3d-glow{
  position:absolute; inset:-32% -32% -38%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(240,215,122,.24), rgba(240,215,122,.05) 56%, transparent 74%),
    radial-gradient(closest-side, rgba(31,119,87,.12), transparent 70%);
  filter:blur(4px);
}
/* once the interactive model is live: hide the foil keystone, keep (and grow) its
   reserved box so the orbiting mark never collides with the form below */
html.lw-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.lw-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(--lw-field) !important;
  border:1px solid rgba(201,162,39,.24) !important;
  border-radius:3px !important; color:var(--lw-ink) !important;
  caret-color:var(--lw-gold) !important;
}
body:has(.sdtdivd) input::placeholder{ color:var(--lw-inksoft) !important; opacity:.85; }
body:has(.sdtdivd) input:focus{
  border-color:var(--lw-gold) !important;
  box-shadow:0 0 0 3px rgba(240,215,122,.16) !important; outline:none !important;
}

/* ---------- PRIMARY BUTTON (Continue) — gold foil del kit ---------- */
body:has(.sdtdivd) button[data-variant="primary"],
body:has(.sdtdivd) [class*="_button_y8rpu"]{
  background:linear-gradient(100deg,#614B16 0%,#856719 9%,#C9A227 19%,#ECD489 29%,#F0D77A 37%,#D0AB3C 45%,#A9851E 57%,#ECD489 69%,#856719 84%,#614B16 100%) !important;
  background-size:230% 100% !important;
  border:1px solid rgba(97,75,22,.55) !important;
  color:#08261E !important; border-radius:3px !important; font-weight:700 !important;
  box-shadow:0 12px 28px -12px rgba(201,162,39,.55), inset 0 1px 0 rgba(251,246,228,.65), inset 0 -1px 0 rgba(67,51,15,.5) !important;
  animation:lwFoilBtn 7s ease-in-out infinite;
}
@keyframes lwFoilBtn{ 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:#08261E !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(31,119,87,.12) !important;
  border:1px solid rgba(201,162,39,.20) !important;
  color:var(--lw-ink) !important; border-radius:3px !important;
}
body:has(.sdtdivd) [class*="_button_15sm2"]:hover{ background:rgba(31,119,87,.18) !important; }

/* links + selection — gold-300 (APCA Lc -67, acento medio legible) */
body:has(.sdtdivd) a{ color:var(--lw-gold-300) !important; text-decoration:none !important; }
body:has(.sdtdivd) ::selection{ background:rgba(240,215,122,.30); color:#08261E; }

/* =====================================================================
   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) -> Lockwood keystone. 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('/lw-brand/mark.png') !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:#08261E !important;
}
body:not(:has(.sdtdivd)) [data-testid="workspace-dropdown"] [data-type="squared"] [class*="_placeholderChar"]{
  display:none !important;
}