/* ═══════════════════════════════════════════════════════════════
   PVOCX — Master Theme Configuration
   Edit this file to update colors and fonts across all pages.
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────────── */
:root {

  /* PAGE BACKGROUND — studio radial gradient (light silver centre → metal grey edges) */
  --bg-gradient:
    radial-gradient(ellipse 120% 110% at 50% 32%,
      #ffffff 0%,
      #fafbfb 25%,
      #f2f3f4 45%,
      #e2e4e6 65%,
      #cdd0d2 82%,
      #b8bcbf 100%
    );

  /* BOX / TILE BACKGROUND — light metal grey with studio lighting */
  --tile-gradient:
    radial-gradient(ellipse 120% 110% at 50% 40%,
      #eceef0 0%,
      #e4e6e8 40%,
      #d4d7d9 65%,
      #c4c7ca 85%,
      #b8bbbe 100%
    );

  /* BOX / TILE HOVER — slightly brighter */
  --tile-gradient-hover:
    radial-gradient(ellipse 120% 110% at 50% 40%,
      #f2f4f5 0%,
      #eaecee 40%,
      #dcdfe1 65%,
      #cecfd2 85%,
      #c2c5c8 100%
    );

  /* NAV BACKGROUND — frosted glass over gradient */
  --nav-bg: rgba(235, 237, 238, 0.94);

  /* TEXT — all dark for readability on light metal background */
  --t1: #0f0f12;      /* headlines, primary text */
  --t2: #2e2e33;      /* body text, secondary */
  --t3: #4a4a50;      /* labels, muted text */

  /* Aliases for files using longer names */
  --text-primary:   var(--t1);
  --text-secondary: var(--t2);
  --text-muted:     var(--t3);
  --text-1: var(--t1);
  --text-2: var(--t2);
  --text-3: var(--t3);

  /* ACCENT — dark charcoal to match body text */
  --ac:       #1a1a1f;
  --ac-dim:   #0f0f12;
  --ac-glow:  rgba(15, 15, 18, 0.10);
  --accent:     var(--ac);
  --accent-dim: var(--ac-dim);
  --accent-glow: var(--ac-glow);

  /* LOGO — red P */
  --logo-p: #c0392b;

  /* STATUS COLOURS — darkened for light bg */
  --grn:    #1a7a38;
  --red:    #b02020;
  --blu:    #1a5a9a;
  --green:  var(--grn);

  /* STATUS BG / BORDER tints */
  --grn-bg: rgba(26, 122, 56, 0.07);
  --grn-bd: rgba(26, 122, 56, 0.25);
  --red-bg: rgba(176, 32, 32, 0.06);
  --red-bd: rgba(176, 32, 32, 0.20);
  --blu-bg: rgba(26, 90, 154, 0.07);
  --blu-bd: rgba(26, 90, 154, 0.22);

  /* BORDERS */
  --border:       rgba(0, 0, 0, 0.12);
  --border-light: rgba(0, 0, 0, 0.09);
  --bg-el:  var(--tile-gradient);   /* all panels/cards — metallic studio-light */
  --bg:     transparent;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */

  /* Font families */
  --font-mono:  'DM Mono', monospace;
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --font-display: 'Cormorant Garamond', serif;

  /* Font sizes */
  --fs-xs:   0.55rem;   /* tiny labels */
  --fs-sm:   0.72rem;   /* small labels, badges */
  --fs-base: 0.88rem;   /* body text */
  --fs-md:   1rem;      /* sub-headings */
  --fs-lg:   1.5rem;    /* card titles */
  --fs-xl:   2rem;      /* section titles */
  --fs-hero: clamp(2.8rem, 5vw, 5rem);  /* hero headline */

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-normal:  0.04em;
  --ls-wide:    0.18em;
  --ls-wider:   0.28em;
  --ls-widest:  0.38em;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-normal: 1.6;
  --lh-loose:  1.85;

  /* ── DARK POPUP / TOOLTIP ─────────────────────────────────────── */
  --popup-bg:            #1a1a1f;
  --popup-border:        rgba(255,255,255,.09);
  --popup-text:          rgba(255,255,255,.82);
  --popup-text-mid:      rgba(255,255,255,.55);
  --popup-text-dim:      rgba(255,255,255,.38);
  --popup-text-muted:    rgba(255,255,255,.25);
  --popup-text-faint:    rgba(255,255,255,.30);
  --popup-divider:       rgba(255,255,255,.04);
  --popup-divider-light: rgba(255,255,255,.08);
  --popup-hover:         rgba(255,255,255,.07);

  /* ── OVERLAYS ─────────────────────────────────────────────────── */
  --overlay-bg:      rgba(15,15,20,.55);
  --overlay-bg-md:   rgba(15,15,20,.60);
  --overlay-bg-dark: rgba(0,0,0,.50);
  --overlay-bg-soft: rgba(0,0,0,.45);

  /* ── CHART SPECIFIC ───────────────────────────────────────────── */
  --chart-spy:          #9a9aa5;           /* SPY benchmark line */
  --chart-zero:         rgba(26,26,31,.06); /* zero baseline */
  --chart-loss-fill:    rgba(208,58,51,.07);/* loss band background */
  --chart-loss-label:   rgba(208,58,51,.55);/* loss band labels */
  --chart-label:        rgba(15,15,20,.55); /* period value labels */
  --chart-date:         rgba(15,15,20,.50); /* date axis labels */
  --chart-period-sel:   rgba(168,137,62,.12);/* selected period highlight — kept amber */
  --chart-tl:           rgba(168,137,62,.35);/* timeline gold line — kept amber */

  /* ── HEDGE / TEAL ──────────────────────────────────────────────── */
  --hedge-color:    #77dddd;
  --hedge-border:   rgba(119,221,221,.35);
  --hedge-bg:       rgba(119,221,221,.08);

  /* ── SENTIMENT BADGES ─────────────────────────────────────────── */
  --sent-pos-bg:  rgba(210,213,215,.18);
  --sent-pos-bd:  rgba(0,0,0,.15);
  --sent-pos-clr: var(--t2);
  --sent-neu-bg:  rgba(138,138,149,.06);
  --sent-neu-bd:  rgba(138,138,149,.20);
  --sent-neu-clr: var(--t3);

  /* ── MISC UI ───────────────────────────────────────────────────── */
  --nav-hover-bg:     rgba(168,137,62,.07);   /* nav dropdown item hover */
  --danger-bg:        rgba(192,57,43,.06);
  --warning-color:    #8a4a00;
  --warning-bg:       rgba(200,100,0,.08);
  --warning-border:   rgba(200,100,0,.25);
  --save-badge-color: #2a9d4e;
  --save-badge-bg:    rgba(42,157,78,.08);
  --save-badge-bd:    rgba(42,157,78,.25);
  --pdf-border:       #d4ddd6;
  --pdf-text:         #52525f;
  --pdf-track:        #d4ddd6;
  --err-pre-bg:       #e8e6e0;
  --err-pre-bd:       #ccc;
  --err-text:         #555;
  --screenshot-bg:    #f5f5f5;
}

/* ── Global Resets ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  background: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
}

/* ── Logo P — always red, wins over any .logo span rule ──────── */
.logo-p,
.logo .logo-p,
.logo span.logo-p { color: var(--logo-p) !important; }

/* ── Utility: tile background ─────────────────────────────────── */
.tile-bg  { background: var(--tile-gradient); }
.tile-bg:hover { background: var(--tile-gradient-hover); }

/* ── Kill browser autofill yellow on all inputs ───────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.55) inset !important;
  -webkit-text-fill-color: var(--t1) !important;
  caret-color: var(--t1);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Eliminate ALL gold/amber hardcoded colours everywhere ───── */
/* Button hovers — overrides hardcoded #9a7d38 in page CSS */
.btn:hover        { background: #2e2e33 !important; }
.btn-resend       { border-color: var(--t2) !important; color: var(--t2) !important; }
.btn-resend:hover { background: #2e2e33 !important; color: #fff !important; border-color: #2e2e33 !important; }

/* Input focus border */
.field input:focus { border-color: var(--t2) !important; }

/* Link hovers */
.switch a:hover,
.bottom-strip .bs-links a:hover { color: var(--t1) !important; }

/* Contact modal close hover */
.contact-modal-close:hover { border-color: var(--t2) !important; color: var(--t1) !important; }


/* ════════════════════════════════════════════════════════════════
   PVOCX — Global Component Library
   All shared UI lives here. Pages only keep page-specific rules.
   To change fonts, sizes, colors across all pages → edit here.
   ════════════════════════════════════════════════════════════════ */

/* ── Font size scale — change once, updates every page ───────── */
:root {
  --fs-micro:   0.67rem;   /* tiny ALL-CAPS labels, footer copy  */
  --fs-label:   0.75rem;   /* buttons, badges, bottom-strip links */
  --fs-field:   0.86rem;   /* form labels, card h2, secondary     */
  --fs-body:    0.97rem;   /* switch text, card p, msg boxes      */
  --fs-input:   1.06rem;   /* inputs, primary body                */
  --fs-tagline: 1.15rem;   /* italic serif tagline                */
  --fs-logo:    1.8rem;    /* PVOCX wordmark                      */

  /* Letter spacing shortcuts */
  --ls-btn:    0.18em;
  --ls-label:  0.08em;
  --ls-mono:   0.25em;
  --ls-wide:   0.35em;
}

/* ── Auth page body layout ────────────────────────────────────── */
/* Applied automatically to all auth pages (login/register etc.) */
body.auth-page {
  background: var(--bg-gradient);
  background-attachment: fixed;
  font-family: var(--font-sans);
  color: var(--t1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  -webkit-font-smoothing: antialiased;
}

/* Subtle grid texture */
body.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}

/* Centre radial glow */
body.auth-page::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(168,137,62,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Auth wrap (centred content column) ───────────────────────── */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 2rem;
  animation: pvup .6s ease;
}
@keyframes pvup {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Logo & tagline ───────────────────────────────────────────── */
.logo {
  font-family: var(--font-mono);
  font-size: var(--fs-logo);
  font-weight: 500;
  letter-spacing: .3em;
  text-align: center;
  margin-bottom: .5rem;
  text-decoration: none;
  color: inherit;
  display: block;
}
.logo span { color: var(--ac); }

.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--t3);
  text-align: center;
  font-size: var(--fs-tagline);
  margin-bottom: 3rem;
}

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  background: var(--tile-gradient);
  border: 1px solid var(--border);
  padding: 2.5rem;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 2px 16px rgba(0,0,0,.10);
}
.card h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-field);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ac-dim);
  margin-bottom: 2rem;
}
.card p {
  font-size: var(--fs-body);
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ── Form fields ──────────────────────────────────────────────── */
.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-size: var(--fs-field);
  letter-spacing: var(--ls-label);
  color: var(--t2);
  margin-bottom: .5rem;
}
.field input {
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  color: var(--t1);
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  outline: none;
  transition: border .3s, background .3s;
}
.field input:focus       { border-color: var(--t2); }
.field input::placeholder { color: var(--t3); }

/* ── Primary button ───────────────────────────────────────────── */
.btn {
  width: 100%;
  padding: .85rem;
  background: var(--ac);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
  margin-top: .5rem;
}
.btn:hover:not(:disabled) { background: var(--t2) !important; }
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── Resend button ────────────────────────────────────────────── */
.btn-resend {
  display: none;
  width: 100%;
  padding: .7rem;
  background: transparent;
  border: 1px solid var(--t2);
  color: var(--t2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  margin-top: .75rem;
}
.btn-resend:hover {
  background: var(--t2);
  color: #fff;
}

/* ── Alert / message boxes ────────────────────────────────────── */
.err, .msg-err {
  background: var(--red-bg);
  border: 1px solid var(--red-bd);
  color: var(--red);
  padding: .6rem 1rem;
  font-size: var(--fs-body);
  margin-bottom: 1.25rem;
  display: none;
  line-height: 1.6;
}
.ok, .msg-ok {
  background: var(--grn-bg);
  border: 1px solid var(--grn-bd);
  color: var(--grn);
  padding: .6rem 1rem;
  font-size: var(--fs-body);
  margin-bottom: 1.25rem;
  display: none;
  line-height: 1.6;
}
.msg { padding: .6rem 1rem; font-size: var(--fs-body); margin-bottom: 1.25rem; display: none; line-height: 1.6; }

/* ── Switch / helper links ────────────────────────────────────── */
.switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: var(--fs-body);
  color: var(--t3);
}
.switch a {
  color: var(--ac);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.switch a:hover { color: var(--t1) !important; }

/* ── Agree row (register checkbox) ───────────────────────────── */
.agree-row { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.25rem; }
.agree-row input[type=checkbox] {
  margin-top: .25rem;
  accent-color: var(--ac);
  width: 16px; height: 16px;
  cursor: pointer; flex-shrink: 0;
}
.agree-row label { font-size: var(--fs-body); color: var(--t2); line-height: 1.6; cursor: pointer; }

/* ── Note text ────────────────────────────────────────────────── */
.note { margin-top: 1rem; font-size: var(--fs-label); color: var(--t3); line-height: 1.7; }

/* ── Verify icon ──────────────────────────────────────────────── */
.icon { font-size: 3rem; margin-bottom: 1.25rem; }
.loading { color: var(--t3); font-size: var(--fs-body); }
.msg-ok.inline { color: var(--grn); }
.msg-err.inline { color: var(--red); }

/* ── Contact modal ────────────────────────────────────────────── */
.contact-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--overlay-bg-soft);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.contact-overlay.active { display: flex; opacity: 1; }

.contact-modal {
  background: var(--tile-gradient);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-width: 520px;
  width: 94vw;
  position: relative;
  padding: 2.5rem 2.8rem 2.2rem;
  transform: scale(.93);
  transition: transform .25s;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.contact-overlay.active .contact-modal { transform: scale(1); }

.contact-modal-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--t2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  cursor: pointer;
  transition: all .25s;
}
.contact-modal-close:hover { border-color: var(--t2) !important; color: var(--t1) !important; }

/* ── Bottom strip ─────────────────────────────────────────────── */
.bottom-strip {
  background: var(--tile-gradient);
  border-top: 1px solid var(--border);
  padding: .9rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  width: 100%;
}
.bottom-strip .bs-copy {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--t3);
}
.bottom-strip .bs-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.bottom-strip .bs-links a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--t2);
  text-decoration: none;
  transition: color .2s;
}
.bottom-strip .bs-links a:hover { color: var(--t1) !important; }
@media (max-width: 480px) {
  .bottom-strip { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .bottom-strip .bs-links { gap: .8rem; }
}

/* ── Tile background hover animation (JS-driven) ──────────────── */
/* grad() script targets these selectors — backgrounds applied via JS */


/* ── Coming-soon page body ─────────────────────────────────────
   Add class="cs-page" to <body> on index_comming_soon.html     */
body.cs-page {
  background: var(--bg-gradient);
  background-attachment: fixed;
  font-family: var(--font-mono);
  color: var(--t1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 2rem 4rem;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.cs-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
body.cs-page::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(168,137,62,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── App page body (account, admin) ───────────────────────────
   Add class="app-page" to <body> on account.html, admin.html   */
body.app-page {
  background: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
}

/* ── Shared keyframes ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── App modal (account page) ──────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-soft);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--tile-gradient);
  border: 1px solid var(--border);
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  animation: zoomIn .18s cubic-bezier(.34,1.56,.64,1);
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: .5rem;
}
.modal-body {
  font-size: var(--fs-body);
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; }

.modal-cancel-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t2);
  background: none;
  border: 1px solid var(--border);
  padding: .5rem .9rem;
  cursor: pointer;
  transition: border-color .2s;
}
.modal-cancel-btn:hover { border-color: var(--t2); }

.modal-confirm-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  border: none;
  padding: .5rem .9rem;
  cursor: pointer;
  transition: background .2s;
}
.modal-confirm-btn:hover    { background: #b02e28; }
.modal-confirm-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — shared rules for all PVOCX pages
   Applied to all pages that load pvocx-theme.css
   ════════════════════════════════════════════════════════════════ */

/* Auth pages: card + wrap fit small screens */
@media (max-width: 480px) {
  body.auth-page::before,
  body.auth-page::after { display: none; } /* drop grid overlay on tiny screens */

  .wrap {
    padding: 1.5rem 1rem;
    max-width: 100%;
  }

  .card {
    padding: 1.5rem 1.1rem;
  }

  .logo {
    font-size: 1rem;
    letter-spacing: .25em;
  }

  .tagline {
    font-size: .72rem;
  }

  .btn {
    font-size: .78rem;
    padding: .75rem 1rem;
  }

  .field input,
  .field select {
    font-size: .85rem;
  }

  /* Nav on app pages */
  nav {
    padding: 0 1rem !important;
    height: 52px !important;
  }

  /* Bottom footer */
  .bottom-section {
    padding: 2rem 1rem 1.5rem !important;
  }
  .bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .bottom-links {
    gap: .8rem;
    flex-wrap: wrap;
  }
  .bottom-links a {
    font-size: .62rem;
  }
}

@media (max-width: 360px) {
  .wrap { padding: 1rem .75rem; }
  .card { padding: 1.2rem .9rem; }
}