@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600&display=swap');

/* =====================================================================
   Private Deal Desk — Twenty auth theme (Midnight Sapphire + Champagne)
   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 :3010 and remove this file. Espo untouched.
   ===================================================================== */
:root{
  --pdd-navy:#0A1730; --pdd-navy2:#0C1C3B; --pdd-navy3:#050E1E;
  --pdd-ink:#EBEFF8; --pdd-inksoft:#9DAAC6;
  --pdd-gold:#E6CD8B; --pdd-gold2:#C5A458; --pdd-blue:#7793CE;
  --pdd-gline:rgba(230,205,139,.32);
  --pdd-field:rgba(122,147,206,.10);
}

/* ---------- FIELD: turn the modal scrim into a clean navy field (hides demo) ---------- */
body:has(.sdtdivd) [class*="_backdrop_"]{
  background:
    radial-gradient(1200px 820px at 50% -12%, #17306B 0%, rgba(10,23,48,0) 62%),
    linear-gradient(180deg, var(--pdd-navy2) 0%, var(--pdd-navy) 50%, var(--pdd-navy3) 100%) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* ---------- CARD ---------- */
body:has(.sdtdivd) [class*="_modal_"]{
  position:relative !important;
  background:linear-gradient(180deg, rgba(20,36,74,.72), rgba(12,22,52,.74)) !important;
  border:1px solid rgba(230,205,139,.16) !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(--pdd-ink) !important;
  overflow:visible !important;
}
/* signature gold top-edge rule (bright center, fades to corners) — Espo hallmark */
body:has(.sdtdivd) [class*="_modal_"]::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,205,139,.9) 50%, transparent);
  pointer-events:none;
}
body:has(.sdtdivd) [class*="_modal_"] :where(h1,h2,h3,h4,p,span,label,a,div,li){ color:var(--pdd-ink) !important; }

/* hide Twenty's logo block (the "20" mark + workspace "P" 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 house 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 house strokes */
body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
  content:""; display:block; width:106px; height:106px; margin:8px auto 32px;
  background:linear-gradient(125deg,#6E561F 0%,#C9A24E 15%,#F4E7BC 32%,#FFFDF2 43%,#E6CD8B 55%,#B98F3E 72%,#F2E4B8 86%,#8A6C2E 100%);
  background-size:220% 220%;
  -webkit-mask:url('/pdd-brand/mark.svg') center/contain no-repeat;
          mask:url('/pdd-brand/mark.svg') center/contain no-repeat;
  filter:drop-shadow(0 8px 26px rgba(230,205,139,.30));
  animation:pddFoil 6.5s ease-in-out infinite;
}
@keyframes pddFoil{ 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_"]::after{ display:none !important; }
  body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{ width:96px; height:96px; margin:6px auto 28px; }
}

/* welcome heading -> Bodoni display */
/* 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(--pdd-field) !important;
  border:1px solid rgba(230,205,139,.24) !important;
  border-radius:3px !important; color:var(--pdd-ink) !important;
  caret-color:var(--pdd-gold) !important;
}
body:has(.sdtdivd) input::placeholder{ color:var(--pdd-inksoft) !important; opacity:.85; }
body:has(.sdtdivd) input:focus{
  border-color:var(--pdd-gold) !important;
  box-shadow:0 0 0 3px rgba(230,205,139,.16) !important; outline:none !important;
}

/* ---------- PRIMARY BUTTON (Continue) ---------- */
body:has(.sdtdivd) button[data-variant="primary"],
body:has(.sdtdivd) [class*="_button_y8rpu"]{
  background:linear-gradient(100deg,#B8923F 0%,#E6CD8B 15%,#FFF7DD 30%,#D9B968 46%,#F4E9C4 62%,#C9A24E 80%,#A9843C 100%) !important;
  background-size:220% 100% !important;
  border:1px solid rgba(255,255,255,.20) !important;
  color:#0A1730 !important; border-radius:3px !important; font-weight:600 !important;
  box-shadow:0 10px 26px -12px rgba(230,205,139,.6), inset 0 1px 0 rgba(255,255,255,.4) !important;
  animation:pddFoilBtn 7s ease-in-out infinite;
}
@keyframes pddFoilBtn{ 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:#0A1730 !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(122,147,206,.10) !important;
  border:1px solid rgba(230,205,139,.20) !important;
  color:var(--pdd-ink) !important; border-radius:3px !important;
}
body:has(.sdtdivd) [class*="_button_15sm2"]:hover{ background:rgba(122,147,206,.16) !important; }

/* links + selection */
body:has(.sdtdivd) a{ color:var(--pdd-gold) !important; text-decoration:none !important; }
body:has(.sdtdivd) ::selection{ background:rgba(230,205,139,.30); color:#fff; }

/* =====================================================================
   INTERIOR — Twenty logged-in app (Midnight Sapphire + Champagne).
   Overrides Twenty's dark-mode design tokens (--t-*) at the root so
   EVERY component re-themes natively — Twenty reads var(--t-*) across
   the whole app, so no fragile per-component class targeting is needed.
   Scoped to :root:not(:has(.sdtdivd)) so the login view (which carries
   the .sdtdivd auth heading) stays 100% untouched. Requires Twenty to
   be in DARK appearance (Settings > Experience). Revert: delete block.
   ===================================================================== */
:root:not(:has(.sdtdivd)){
  /* surfaces -> navy elevation ramp (primary = deepest canvas) */
  --t-background-primary:#0A1730 !important;
  --t-background-secondary:#0C1C3B !important;
  --t-background-tertiary:#0E2247 !important;
  --t-background-quaternary:#14294F !important;

  /* accent scale: Twenty's blue1..12 / accent1..12 (dark->light).
     Low steps stay navy (tints, tag/selected backgrounds); high steps
     turn champagne (icons, links, primary). blue9/accent9 = the fill. */
  --t-color-blue1:#0C1830 !important;  --t-accent-accent1:#0C1830 !important;
  --t-color-blue2:#0E1C3A !important;  --t-accent-accent2:#0E1C3A !important;
  --t-color-blue3:#12244A !important;  --t-accent-accent3:#12244A !important;
  --t-color-blue4:#17305C !important;  --t-accent-accent4:#17305C !important;
  --t-color-blue5:#1F3E70 !important;  --t-accent-accent5:#1F3E70 !important;
  --t-color-blue6:#2A4E88 !important;  --t-accent-accent6:#2A4E88 !important;
  --t-color-blue7:#B98F3E !important;  --t-accent-accent7:#B98F3E !important;
  --t-color-blue8:#D0AC55 !important;  --t-accent-accent8:#D0AC55 !important;
  --t-color-blue9:#E6CD8B !important;  --t-accent-accent9:#E6CD8B !important;
  --t-color-blue10:#ECD79C !important; --t-accent-accent10:#ECD79C !important;
  --t-color-blue11:#F2E4B8 !important; --t-accent-accent11:#F2E4B8 !important;
  --t-color-blue12:#FBF5DE !important; --t-accent-accent12:#FBF5DE !important;
  --t-color-blue:#E6CD8B !important;
  --t--illustration-icon-color-blue:#E6CD8B !important;
  --t-tag-background-blue:#12244A !important;

  /* semantic accent (selected/hover backgrounds -> subtle navy raises) */
  --t-accent-primary:#1B335F !important;
  --t-accent-secondary:#16294F !important;
  --t-accent-tertiary:#101F40 !important;

  /* translucent accent (row hover, selection, focus rings) -> champagne */
  --t-color-transparent-blue1:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue2:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue3:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue4:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue5:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue6:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue7:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue8:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue9:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue10:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue11:rgba(230,205,139,.20) !important;
  --t-color-transparent-blue12:rgba(230,205,139,.20) !important;
  --t-background-transparent-blue:rgba(230,205,139,.14) !important;

  /* hairlines -> navy */
  --t-border-color-light:#16264A !important;
  --t-border-color-medium:rgba(32,56,98,.30) !important;
  --t-border-color-strong:#2E4E86 !important;

  /* text -> cool off-white ramp (AA+ on navy) */
  --t-font-color-primary:#EEF1F8 !important;
  --t-font-color-secondary:#9DAAC6 !important;
  --t-font-color-tertiary:#6E7DA0 !important;
}

/* brand primary button (data-accent="blue") -> navy text on champagne
   fill (Twenty hardcodes white on it -> fails contrast). Scoped to the
   blue accent so red "danger" buttons keep their white label. */
body:not(:has(.sdtdivd)) button[data-variant="primary"][data-accent="blue"],
body:not(:has(.sdtdivd)) button[data-variant="primary"][data-accent="blue"] *{
  color:#0A1730 !important; fill:#0A1730 !important;
}

/* workspace avatar (nav, top-left) -> PDD house mark. Twenty renders a
   placeholder initial ("P") because it resolves workspace.logo through its
   own file store, so an external logo URL yields nothing. We paint the mark
   via CSS instead. 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('/pdd-brand/mark.png') !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:#0A1730 !important;
}
body:not(:has(.sdtdivd)) [data-testid="workspace-dropdown"] [data-type="squared"] [class*="_placeholderChar"]{
  display:none !important;
}