/* ═══════════════════════════════════════════════════════════════════════
   JOURNALI DASHBOARD DESIGN SYSTEM (v3.1)
   ───────────────────────────────────────────────────────────────────────
   Shared visual system applied across every authenticated page.
   Layered on top of each page's inline CSS — targets common class names
   (.sidebar, .topbar, .nav-item, etc.) and uses attribute selectors for
   the varying card names each page uses.

   Load this sheet AFTER the page's inline <style> so tokens + component
   upgrades cascade over the existing base styles.

   Pattern set: gradient green tokens, Lora italic accents, tri-color
   buttons with shimmer sweep, ambient halo + grid behind content, cards
   lifted off a darker sidebar "frame."
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKEN UNIFICATION ───────────────────────────────────────────────── */
[data-theme="dark"]{
  --accent:#00d584;
  --accent-bg:rgba(0,213,132,0.09);
  --accent2:#1aed9a;
  --green-bright:#1aed9a;
  --green-deep:#00a868;
  --green-glow:rgba(0,213,132,0.18);
  --green-glow-strong:rgba(0,213,132,0.45);
  --win:#00d584;
  --win-bg:rgba(0,213,132,0.11);
  --shadow-btn:0 4px 18px rgba(0,213,132,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
  --shadow-btn-hover:0 14px 36px rgba(0,213,132,0.5),0 0 60px rgba(0,213,132,0.2),inset 0 1px 0 rgba(255,255,255,0.28);
  --shadow-card-hover:0 8px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(0,213,132,0.08);
  --grad-green:linear-gradient(180deg,var(--green-bright) 0%,var(--accent) 55%,var(--green-deep) 100%);
  --grad-green-text:linear-gradient(135deg,var(--green-bright) 0%,var(--accent) 55%,var(--green-deep) 100%);
}
[data-theme="light"]{
  --green-bright:#2d9957;
  --green-deep:#0f4a2a;
  --green-glow:rgba(26,107,60,0.14);
  --green-glow-strong:rgba(26,107,60,0.3);
  --shadow-btn:0 4px 14px rgba(26,107,60,0.22),inset 0 1px 0 rgba(255,255,255,0.3);
  --shadow-btn-hover:0 10px 28px rgba(26,107,60,0.32),0 0 40px rgba(26,107,60,0.12),inset 0 1px 0 rgba(255,255,255,0.4);
  --shadow-card-hover:0 6px 20px rgba(0,0,0,0.08),0 0 0 1px rgba(26,107,60,0.06);
  --grad-green:linear-gradient(180deg,var(--green-bright) 0%,var(--accent) 55%,var(--green-deep) 100%);
  --grad-green-text:linear-gradient(135deg,var(--green-bright) 0%,var(--accent) 55%,var(--green-deep) 100%);
}

/* ── AMBIENT PAGE BACKGROUND ─────────────────────────────────────────── */
[data-theme="dark"] body{background:radial-gradient(ellipse at top,#0d1119 0%,#0a0d12 50%,#07090d 100%);}
[data-theme="dark"] body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,213,132,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,213,132,0.025) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:0.55;
  mask-image:radial-gradient(ellipse 85% 70% at center 35%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at center 35%,#000 30%,transparent 100%);
}
/* NOTE: do NOT add z-index:1 to .app. .app is the parent of the sidebar but
   a SIBLING of .sidebar-overlay (which sits outside it in DOM). Putting .app
   in a stacking context at z-index:1 traps the sidebar at level 1 in root —
   the sidebar-overlay (z-index 55) then sits above it and eats taps. The
   body::before grid below uses pointer-events:none so it can't intercept
   anything regardless of z-order, so .app doesn't need to outrank it. */
[data-theme="dark"] .main{position:relative;isolation:isolate;}
[data-theme="dark"] .main::before{
  content:'';position:fixed;top:-10%;left:50%;transform:translateX(-50%);
  width:min(1200px,120vw);height:720px;
  background:radial-gradient(ellipse 60% 50% at center,rgba(0,213,132,0.06) 0%,rgba(0,213,132,0.025) 35%,transparent 70%);
  pointer-events:none;z-index:-1;animation:jDashHaloPulse 9s ease-in-out infinite;
}
@keyframes jDashHaloPulse{0%,100%{opacity:0.7;}50%{opacity:1;}}

[data-theme="light"] body{background:radial-gradient(ellipse at top,#f6f4ef 0%,#f0ede8 60%,#ece8e0 100%);}
[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff 0%,#faf8f3 100%);border-right:1px solid #e4e0d8;}

/* ── SIDEBAR AS DARKER FRAME ─────────────────────────────────────────── */
[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#080b10 0%,#0a0e14 60%,#080b10 100%);
  border-right:1px solid #151b26;
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.015);
}
[data-theme="dark"] .topbar{
  background:linear-gradient(180deg,rgba(14,18,26,0.92) 0%,rgba(11,14,21,0.88) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #151b26;
}

/* ── NAV ITEM ACTIVE STATE WITH LEFT ACCENT BAR ──────────────────────── */
.nav-item{position:relative;overflow:hidden;}
.nav-item::after{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:0 2px 2px 0;background:transparent;transition:background 0.25s,box-shadow 0.25s;}
.nav-item:hover::after{background:rgba(0,213,132,0.4);}
.nav-item.active{
  background:linear-gradient(90deg,rgba(0,213,132,0.12) 0%,rgba(0,213,132,0.04) 80%,transparent 100%);
  color:var(--accent);font-weight:600;
}
.nav-item.active::after{background:var(--grad-green);box-shadow:0 0 8px var(--green-glow-strong);}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 6px var(--green-glow));}

.user-avatar{box-shadow:0 0 0 1px var(--border),0 0 12px rgba(0,213,132,0.08);transition:box-shadow 0.3s;}
.sidebar-user:hover .user-avatar{box-shadow:0 0 0 1px var(--accent),0 0 16px var(--green-glow);}
.logo-text{background:linear-gradient(135deg,var(--ink) 0%,var(--ink) 65%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

/* ── TYPOGRAPHY: Lora italic accent inside page + card titles ────────── */
.page-title em,.page-title .accent,
.tc-title em,.tc-title .accent,
[class$="-title"] em,[class$="-title"] .accent,
h1 em,h2 em,h3 em{
  font-style:italic;font-family:'Lora',serif;font-weight:500;letter-spacing:-0.4px;
  background:var(--grad-green-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px var(--green-glow));
}
.page-subtitle{color:var(--accent);text-transform:uppercase;}

/* ── CARDS: GRADIENT SURFACE + INSET HIGHLIGHT ───────────────────────── */
/* Only match CLASSES ENDING in "-card" (the outer container), never inner
   pieces like .trade-card-top, .trade-card-row1, .stat-card-label, etc.
   The two-part selector handles both single-class (<div class="trade-card">)
   and multi-class (<div class="trade-card active">) elements. */
[data-theme="dark"] [class$="-card"]:not(.lock-card),
[data-theme="dark"] [class*="-card "]:not(.lock-card){
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.022) 0%,
      rgba(20,26,38,0.4) 40%,
      rgba(0,0,0,0.1) 100%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    var(--shadow-card);
  border-color:#1a2233;
  position:relative;
}
[data-theme="dark"] [class$="-card"]:not(.lock-card):hover,
[data-theme="dark"] [class*="-card "]:not(.lock-card):hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 8px 28px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,213,132,0.10);
  border-color:#223047;
}
[data-theme="light"] [class$="-card"]:not(.lock-card),
[data-theme="light"] [class*="-card "]:not(.lock-card){
  background:linear-gradient(180deg,#ffffff 0%,#fdfbf7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 3px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.03);
}

/* Explicit support for common non-suffix card names per page */
[data-theme="dark"] .widget,
[data-theme="dark"] .pulse-card,
[data-theme="dark"] .debrief-card,
[data-theme="dark"] .ring-card,
[data-theme="dark"] .score-card,
[data-theme="dark"] .setups-card,
[data-theme="dark"] .prop-card,
[data-theme="dark"] .challenge-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .cp-card,
[data-theme="dark"] .how-card,
[data-theme="dark"] .calc-card,
[data-theme="dark"] .balance-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .plan-status-card,
[data-theme="dark"] .broker-card,
[data-theme="dark"] .fed-card,
[data-theme="dark"] .next-event-card,
[data-theme="dark"] .snapshot-card,
[data-theme="dark"] .ai-review-card,
[data-theme="dark"] .backtest-notes-card,
[data-theme="dark"] .rank-card,
[data-theme="dark"] .stat-card{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.022) 0%,
      rgba(20,26,38,0.4) 40%,
      rgba(0,0,0,0.1) 100%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    var(--shadow-card,0 1px 1px rgba(0,0,0,0.3),0 2px 6px rgba(0,0,0,0.25));
  border-color:#1a2233;
}

/* ── INPUTS: GRADIENT SURFACE + FOCUS GLOW ───────────────────────────── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background:linear-gradient(180deg,rgba(255,255,255,0.018) 0%,var(--surface2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  border-color:#1e2636;
}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(0,213,132,0.10),inset 0 1px 0 rgba(255,255,255,0.03);}

/* ── PRIMARY BUTTONS: TRI-COLOR GRADIENT + SHIMMER SWEEP ─────────────── */
.btn-primary,
.btn-upgrade,
.lock-cta-pro{
  background:var(--grad-green)!important;
  color:#041a10!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  font-weight:700!important;letter-spacing:-0.2px!important;
  box-shadow:var(--shadow-btn)!important;
  position:relative;overflow:hidden;isolation:isolate;
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-upgrade,
[data-theme="light"] .lock-cta-pro,
[data-theme="light"] .btn-share-pop{
  color:#fff!important;
}
.btn-primary::before,
.btn-upgrade::before,
.lock-cta-pro::before{
  content:'';position:absolute;top:0;left:-120%;width:75%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.38),transparent);
  transition:left 0.7s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1;
}
.btn-primary:hover,
.btn-upgrade:hover,
.lock-cta-pro:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-btn-hover)!important;
  opacity:1!important;
}
.btn-primary:hover::before,
.btn-upgrade:hover::before,
.lock-cta-pro:hover::before{left:130%;}
.btn-primary > *,
.btn-upgrade > *,
.lock-cta-pro > *{position:relative;z-index:2;}
.btn-primary:active,
.btn-upgrade:active{transform:translateY(0);}

/* Accent strip removed from the shared system — repeated across grids of
   many cards (trade-card, stat-card, setup-card, etc.) it read as horizontal
   stripe noise. Hero cards that still want a strip (the TradeCheck main
   card, session-stats cards in checklist.html) define their own inline.
   The inset top-edge highlight + gradient surface above already give
   enough "lift" without the extra green line. */

/* ── MOBILE PAGE-LOCK FIX ────────────────────────────────────────────
   On mobile, the page-lock-overlay had two compounding problems:
   1. backdrop-filter:blur(14px) bled through to the open sidebar (iOS
      Safari quirk — backdrop-filter renders against the full viewport
      regardless of z-index).
   2. Even after killing the blur, the overlay still occupied the same
      coordinates as the open sidebar and intercepted taps before they
      could reach the nav. Affected: calendar, goals, checklist, import,
      community, chart, propfirm — anywhere with the unified lock pattern.
   Fix:
     - Drop the redundant backdrop-filter (.page-lock-blur on the
       underlying content already provides the soft-focus effect)
     - Bump sidebar z-index so it's clearly above the overlay
     - When the sidebar is mobile-open, shift the overlay's left edge
       past the sidebar so the lock visually + functionally yields the
       sidebar column. Uses :has() — supported in Safari 15.4+, Chrome
       105+, Firefox 121+ (covers ~98% of mobile users). */
@media (max-width: 768px) {
  /* Page-lock overlay: kill the backdrop-filter (iOS Safari renders it
     through fixed elements regardless of z-index), bump opacity to
     compensate. */
  .page-lock-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 9, 12, 0.94) !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  [data-theme="light"] .page-lock-overlay {
    background: rgba(245, 243, 240, 0.96) !important;
  }

  /* Topbar backdrop-filter is the SECOND iOS quirk source. The topbar's
     translucent dark gradient was rendering OVER the open sidebar
     ("slightly darker than normal" tint). Kill the backdrop-filter on
     mobile and use a fully opaque background instead. */
  [data-theme="dark"] .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
  }
  [data-theme="light"] .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
  }

  /* Sidebar above EVERYTHING. isolation:isolate creates a clean
     stacking context. NO transform — that promotes the sidebar to its
     own GPU compositing layer, which on iOS Safari causes subpixel
     anti-aliasing changes that blur text. */
  .sidebar,
  .sidebar.mobile-open {
    z-index: 9999 !important;
    isolation: isolate !important;
    pointer-events: auto !important;
  }
  /* Explicit on every interactive child as a defensive measure */
  .sidebar a,
  .sidebar button,
  .sidebar .nav-item {
    pointer-events: auto !important;
  }

  /* Sidebar dim-layer also drops its blur */
  .sidebar-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* When sidebar is mobile-open, completely hide the page-lock-overlay
     so it can't possibly intercept clicks. (display:none, not just
     left-shift, because iOS Safari has been swallowing taps even on
     correctly-positioned overlays.) */
  body:has(.sidebar.mobile-open) .page-lock-overlay,
  .app:has(.sidebar.mobile-open) .page-lock-overlay {
    display: none !important;
  }
  /* Belt-and-suspenders for browsers without :has() */
  .sidebar.mobile-open ~ * .page-lock-overlay,
  .sidebar.mobile-open ~ .page-lock-overlay {
    display: none !important;
  }

  /* The sidebar-overlay (dim layer) defaults to inset:0 — overlapping the
     sidebar column. Push the dim past the sidebar so the nav column is
     overlay-free.
     IMPORTANT: do NOT include `inset: auto` here. The shorthand expands
     and resets every longhand AFTER our explicit overrides, undoing the
     fix. ID selector + explicit longhands without the shorthand. */
  #sidebar-overlay,
  #sidebar-overlay.open,
  .sidebar-overlay,
  .sidebar-overlay.open {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 260px !important;
    width: auto !important;
    height: auto !important;
  }

  /* ── NUCLEAR: when sidebar is mobile-open, every other overlay/topbar
     yields the sidebar column. No exceptions, no stacking-context games. */
  body:has(.sidebar.mobile-open) .page-lock-overlay,
  body:has(.sidebar.mobile-open) .paywall-overlay,
  body:has(.sidebar.mobile-open) .modal-overlay,
  body:has(.sidebar.mobile-open) .drawer-overlay,
  body:has(.sidebar.mobile-open) .oauth-modal-overlay,
  body:has(.sidebar.mobile-open) .goals-modal-overlay,
  body:has(.sidebar.mobile-open) .asnap-overlay,
  body:has(.sidebar.mobile-open) .screenshot-lightbox,
  body:has(.sidebar.mobile-open) .edit-overlay,
  body:has(.sidebar.mobile-open) .log-modal-overlay,
  body:has(.sidebar.mobile-open) .toast,
  body:has(.sidebar.mobile-open) .save-bar {
    display: none !important;
  }
  /* Topbar's translucent background was painting over the open sidebar
     on iOS. Push it past the sidebar entirely so it can't paint into
     the nav column. */
  body:has(.sidebar.mobile-open) .topbar {
    left: 260px !important;
    right: 0 !important;
  }
  /* Force sidebar to highest stacking context AND every child interactive */
  .sidebar {
    z-index: 999999 !important;
    pointer-events: auto !important;
  }
  .sidebar *,
  .sidebar a,
  .sidebar button,
  .sidebar .nav-item {
    pointer-events: auto !important;
  }
}