/* ─────────────────────────────────────────────────────────────────────
   page-glass.css — Apple liquid-glass treatments shared across pages
   that use .pos-section cards or .pos-table tables (coins, coin,
   trader, watching). Pairs with header-glass.css (top nav) so all
   pages read as the same visual family.
   ───────────────────────────────────────────────────────────────────── */

/* ── Page title + header section ─────────────────────────────────── */
.page-title {
  letter-spacing: -0.02em;
  font-weight: 700;
}
.page-title .cmc-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  margin-left: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.04) !important;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em;
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-title .cmc-badge-purple {
  background: rgba(184,134,247,.12) !important;
  border-color: rgba(184,134,247,.32) !important;
  color: #c5a3f7 !important;
}

/* ── Glass card (.pos-section) — frosted panel matching leaderboard
   bento + table aesthetics. Used by trader page cards, coin holdings,
   coins page heatmap/flow cards, etc. ───────────────────────────── */
.pos-section {
  border-radius: 14px !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,.025) 0%,
    rgba(255,255,255,.008) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 30px -20px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  position: relative;
  overflow: hidden;
}
/* Top edge highlight gleam — same trick as bento cards */
.pos-section::before {
  content: '';
  position: absolute; left: 12px; right: 12px; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.12) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Toolbar inside cards — keep the glass family */
.pos-section .pos-toolbar {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  background: transparent !important;
}
.pos-section .pos-toolbar .tab-active {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-color-text-primary, #e2e8f0);
}

/* ── Table polish — same Apple liquid-glass treatment as leaderboard's
   cmc-table. Applies to .pos-table inside .pos-section. ──────────── */
.pos-section .pos-table {
  background: transparent;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--c-font-family-base, Inter, sans-serif);
}
.pos-section .pos-table thead th {
  background: linear-gradient(180deg,
    rgba(15,18,28,.4) 0%,
    rgba(15,18,28,.2) 100%) !important;
  color: var(--c-color-text-caption, #8b95a8) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .055em;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  text-align: left;
}
.pos-section .pos-table thead th.num,
.pos-section .pos-table thead th .num,
.pos-section .pos-table thead th.right {
  text-align: right;
}
.pos-section .pos-table tbody td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-color-text-primary, #e2e8f0) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
  line-height: 1.4;
}
.pos-section .pos-table tbody td.num {
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace);
  font-size: 12.5px !important;
  letter-spacing: -0.01em;
  text-align: right;
}
.pos-section .pos-table tbody tr:hover {
  background: linear-gradient(180deg,
    rgba(108,182,255,.045) 0%,
    rgba(108,182,255,.018) 100%) !important;
}
.pos-section .pos-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
/* PnL gain / loss colouring inside the closed / open positions tables.
   The class names used in trader.html's render are .pnl-pos / .pnl-neg
   (kept for legacy continuity), so we list them alongside the shorter
   .pos / .neg aliases that some pages still use. !important is required
   because the parent `.pos-section .pos-table tbody td { color: text-
   primary !important }` rule above would otherwise win, painting every
   cell white. */
.pos-section .pos-table .pos,
.pos-section .pos-table .pnl-pos,
.pos-section .pos-table td.pnl-pos {
  color: #34d399 !important;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(52,211,153,.18);
}
.pos-section .pos-table .neg,
.pos-section .pos-table .pnl-neg,
.pos-section .pos-table td.pnl-neg,
.pos-section .pos-table .cmc-t-pct-neg {
  color: #f87171 !important;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(248,113,113,.20);
}
.pos-section .pos-table .is-empty { color: rgba(139,149,168,.5) !important; }

/* Notional column — money exposure, green family but a step softer than
   PnL gains so the eye doesn't confuse "size" with "profit". Applies to
   both row cells (tbody) and the Total · all footer total. */
.pos-section .pos-table td.notional-cell,
.pos-section .pos-table tfoot td.notional-cell {
  color: #86efac !important;
  font-weight: 600;
}

/* Win-rate gradient — footer row of the Closed positions table uses the
   same 5-tier palette as the leaderboard and the Similar traders table. */
.pos-section .pos-table tfoot td.wr-elite { color: #34d399 !important; font-weight: 600; }
.pos-section .pos-table tfoot td.wr-good  { color: #86efac !important; font-weight: 600; }
.pos-section .pos-table tfoot td.wr-mid   { color: rgba(196,203,218,.92) !important; font-weight: 600; }
.pos-section .pos-table tfoot td.wr-low   { color: #fcb040 !important; font-weight: 600; }
.pos-section .pos-table tfoot td.wr-poor  { color: #f87171 !important; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────
   MOBILE (≤768px) — dense .pos-table tables (Phase 2)
   Strategy B (hide-columns + horizontal scroll, sticky first col).
   Used by my / watching / trader / coins where rows are dense numeric
   records and a card-flatten would lose comparability. Leaderboard keeps
   its own bespoke card-view (.cmc-table) — not touched here.

   These pages already wrap some tables in .pos-scroll{overflow-x:auto};
   this layer (a) guarantees scrollability even for unwrapped tables,
   (b) pins the first column as a label anchor while metrics scroll,
   (c) compacts cell padding + enables momentum scrolling on iOS.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Momentum + contain so the page doesn't rubber-band horizontally. */
  .pos-scroll, .act-scroll, .corr-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* Any .pos-table not already in a scroll wrapper still scrolls instead
     of forcing document overflow. display:block makes the table a scroll
     container; min-width keeps columns from collapsing illegibly. */
  .pos-section > .pos-table,
  .pos-table:not(.pos-scroll *):not(.act-scroll *) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Compact cells on phones — recover horizontal room. */
  .pos-table th, .pos-table td { padding: 9px 10px; font-size: 11.5px; }

  /* Sticky first column = the row's identity (Symbol/Trader/Date) stays
     visible while the user scrolls the metrics horizontally. */
  .pos-table thead th:first-child,
  .pos-table tbody td:first-child,
  .pos-table tfoot td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: rgba(15,18,28,.94);
    backdrop-filter: blur(8px);
  }
  .pos-table thead th:first-child { z-index: 2; }
}