/* ==========================================================================
 * modal-unify.css — Visual unification layer for all of PolyCop.
 *
 * SECTION 1: CSS custom properties (design tokens)
 * SECTION 2: Modal / sheet / drawer unification
 * SECTION 3: Global colour & style normalisation (blue, green/red, radius, shadow)
 *
 * This file loads LAST. All fixes use !important so they beat inline styles.
 * Do NOT add new colour literals anywhere else — use var(--pc-*) tokens.
 * ========================================================================== */

/* ==========================================================================
 * SECTION 1 — Design tokens
 * ========================================================================== */
:root {
  /* Brand */
  --pc-blue:        #2E5EFF;
  --pc-blue-hover:  #1f4fe0;

  /* Backgrounds (single hierarchy) */
  --pc-bg-page:     #000000;   /* page root */
  --pc-bg-card:     #0a0a0a;   /* cards, modals, drawers */
  --pc-bg-input:    #111113;   /* inputs, secondary surfaces */
  --pc-bg-subtle:   #141414;   /* hover states */

  /* Borders */
  --pc-border:      #1a1a1a;
  --pc-border-em:   #262626;   /* emphasised border */

  /* P/L colours — keep semantic green/red, do NOT replace with brand blue */
  --pc-profit:      #34d399;
  --pc-loss:        #f43f5e;

  /* Text */
  --pc-text:        #f2f5f7;
  --pc-text-muted:  #71717a;
  --pc-text-dim:    #52525b;
}

/* ==========================================================================
 * SECTION 2 — Modal / sheet / drawer unification
 * (original content below, unchanged)
 * ========================================================================== */
/* ==========================================================================
 * modal-unify.css — ONE modal system to rule them all.
 *
 * History: PolyCop accreted 5 independent modal/sheet systems from different
 * AIs (ui-modal-*, auth-sheet-*, auth-drawer, tp-sheet-*, ct-sheet-*), each
 * with its own radius, padding, close button, backdrop opacity and z-index.
 * That caused: inconsistent look, bleed-through (weak backdrop), content
 * overlap on small screens, and oversized "button" close controls.
 *
 * This file loads LAST and normalises every prefix to a single Industrial
 * spec using !important so it also beats inline styles. New modals MUST reuse
 * one of these prefixes — do NOT invent a 6th system. See docs/ui-spec-industrial.md.
 *
 * Industrial spec: pure black surfaces, JetBrains Mono, flat (radius 0),
 * no shadow, brand blue #2E5EFF, content area always scrolls (never overflows),
 * close control is a bare icon (never a framed button).
 * ========================================================================== */

/* ---- z-index ladder (single source of truth) ----------------------------
 * 1000  page-level overlays / generic modals (ui-modal, tp-sheet)
 * 1000  auth sheets (deposit/withdraw/2FA/connect)
 * 1001  account drawer
 * 1100  copytrade
 * 9999  blocking alerts (customAlert) — always on top
 * Backdrops are opaque enough that nothing bleeds through.
 * ------------------------------------------------------------------------ */

/* ===== Backdrops: kill bleed-through (the #1 "broken modal" symptom) ===== */
.ui-modal-backdrop,
.auth-sheet-backdrop,
.tp-sheet-backdrop,
.ct-sheet-backdrop {
  background: rgba(0, 0, 0, 0.82) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
/* The account drawer is an anchored panel, not a full overlay; its backdrop
 * is the separate #account-backdrop element. Keep it solid too. */
#account-backdrop {
  background: rgba(0, 0, 0, 0.82) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* ===== Surfaces: flat black, no radius/shadow, monospace ================= */
.ui-modal-surface,
.auth-sheet,
.auth-drawer,
.tp-sheet,
.ct-sheet {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace !important;
}

/* ===== Headers: consistent padding + hairline divider =================== */
.ui-modal-header,
.auth-sheet-head,
.auth-acct-head,
.tp-sheet-head,
.ct-sheet-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: #0a0a0a !important;
  border-bottom: 1px solid #1a1a1a !important;
  flex-shrink: 0 !important;
}

/* ===== Titles =========================================================== */
.ui-modal-title,
.auth-sheet-title,
.tp-sheet-title,
.ct-sheet-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

/* ===== Close control: ALWAYS a bare icon, never a framed button ========= *
 * Per SOUL.md rule (icons are icons, NOT buttons): no border, no bg, no
 * button padding/box. Click target stays via the element box, visual is a
 * clean 16px icon. This kills the "close button too wide/big" complaint. */
.ui-modal-close,
.auth-sheet-close,
.tp-sheet-close,
.ct-sheet-close {
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #71717a !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.ui-modal-close:hover,
.auth-sheet-close:hover,
.tp-sheet-close:hover,
.ct-sheet-close:hover {
  background: transparent !important;
  color: #fff !important;
}
.ui-modal-close svg,
.auth-sheet-close svg,
.tp-sheet-close svg,
.ct-sheet-close svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* ===== Body: ALWAYS scrolls, never overflows (the "text overlap" fix) === */
.ui-modal-body,
.auth-sheet-body,
.tp-sheet-body,
.ct-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #0a0a0a !important;
}

/* ===== Footers ========================================================== */
.ui-modal-footer {
  background: #0a0a0a !important;
  border-top: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
}

/* ===== Primary action buttons inside modals (unify brand fill) ========== */
.ct-btn-new, .ct-btn-sm, .auth-wd-submit, .auth-google-btn:hover {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
 * SECTION 3 — Global colour & style normalisation
 *
 * Multi-AI history left 4 blue literals, 8 bg blacks, scattered radius/shadow
 * and tailwind blue classes. This section forces one look. All !important so
 * it also beats inline style= attributes (the only no-HTML-edit way).
 * ========================================================================== */

/* ---- Flatten ANY inline radius / shadow the global * rule can't reach ---- */
[style*="border-radius"] { border-radius: 0 !important; }
[style*="box-shadow"]    { box-shadow: none !important; }
[style*="text-shadow"]   { text-shadow: none !important; }

/* ---- Kill the lone focus-glow violation (SOUL.md: no outer glow) -------- */
input:focus, select:focus, textarea:focus { box-shadow: none !important; }

/* ---- Normalise OFF-BRAND blues -> brand #2E5EFF ------------------------- *
 * Off-brand: #60a5fa #3b82f6 #1d9bf0 #2563eb and tailwind blue-300/400/500/600.
 * Done via attribute selectors (inline) + tailwind class overrides.
 * P/L green/red are intentionally left untouched. */
[style*="#3b82f6"], [style*="#60a5fa"], [style*="#1d9bf0"], [style*="#2563eb"],
[style*="#3B82F6"], [style*="#60A5FA"] { /* handled per-property below */ }

.text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600 {
  color: var(--pc-blue) !important;
}
.bg-blue-400, .bg-blue-500, .bg-blue-600 {
  background-color: var(--pc-blue) !important;
}
.border-blue-400, .border-blue-500, .border-blue-600 {
  border-color: var(--pc-blue) !important;
}
.hover\:bg-blue-600:hover, .hover\:bg-blue-500:hover {
  background-color: var(--pc-blue-hover) !important;
}

/* ---- Inline off-brand blue text/bg/border normalisation ---------------- *
 * Can't retarget a single CSS property from a substring match, so we cover
 * the common cases: elements whose inline style sets an off-brand blue as
 * color or background get the brand blue. Scoped to avoid nuking gradients. */
span[style*="color:#3b82f6"], span[style*="color: #3b82f6"],
span[style*="color:#60a5fa"], span[style*="color: #60a5fa"],
span[style*="color:#1d9bf0"], span[style*="color: #1d9bf0"],
a[style*="color:#3b82f6"], a[style*="color: #3b82f6"],
div[style*="color:#3b82f6"], div[style*="color: #3b82f6"] {
  color: var(--pc-blue) !important;
}

/* ---- accent-blue CSS var (legacy) -> brand ----------------------------- */
:root { --accent-blue: #2E5EFF !important; }