/* Polymarket browsing leg — layered on top of app.css (loaded first).
   Reuses the Kalshi design system wholesale: same CSS variables (--bg/--sf/
   --bd/--tx/--mt/--ac/--gn/--rd/--yl) and the .outcome/.slider-prop/.ob-*/
   .side-tabs/.pos-item/.ord-item component classes. This file only adds the
   genuinely Polymarket-specific pieces: browse-list tweaks, the event-view
   inline book slot, portfolio/activity tables, and the settings/fees
   modals. */

/* ── Browse list ─────────────────────────────────────────────────────────── */
/* The old navigation chip bar (.league-bar/.league-chip) was retired when
   the home view became the Kalshi-style grouped games list. The home page
   reuses app.css wholesale: .gl-toolbar/.gl-title/.gl-date (title row),
   .live-minvol (volume filter), .gl-league/.gl-league-header (sticky
   collapsible sections) and .gl-game rows. */
/* Event rows reuse .gl-game / .gl-teams / .gl-state / .gl-vol from app.css.
   Small additions only. */
/* Kalshi parity: #gamesListContainer carries padding:0 0 40px so the list
   never ends flush against the panel bottom. Same treatment here. */
#browseView{padding:0 0 40px}
.poly-loading{padding:40px;text-align:center;color:var(--mt);font-size:13px}
.poly-error{padding:24px 16px;text-align:center;color:var(--rd);font-size:13px}
.poly-empty{padding:32px 16px;text-align:center;color:var(--mt);font-size:13px}

/* ── Event detail ────────────────────────────────────────────────────────── */
.ev-back{
  display:inline-flex;align-items:center;gap:6px;margin:10px 16px 0;
  padding:4px 10px;background:var(--bg);border:1px solid var(--bd);
  border-radius:8px;color:var(--ac);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .12s;line-height:1.2;
}
.ev-back:hover{border-color:var(--ac);background:rgba(59,130,246,.08)}

/* Inline orderbook slot pinned under the selected market row. All the
   ladder internals (.ob-row/.ob-half/.ob-spread/.my-badge) come straight
   from app.css; only the slot frame and the wider tick-aware price cells
   ("55.5¢" needs more room than Kalshi's integer cents) live here. */
.inline-ob .ob-row .p{width:52px}
.inline-ob .ob-spread-padL{width:149px} /* .p (52) + .odds (42) + .q (55) */
.inline-ob{position:relative}

/* ── Header bits ─────────────────────────────────────────────────────────── */
/* Search box (magnifier icon + input) comes straight from app.css. */
/* Clickable like Kalshi's #connStatus pill (opens settings). */
#polyStatus{cursor:pointer}
.hdr-cash .neg{color:var(--rd)}

/* Search dropdown rows reuse .sdrop/.si from app.css. */
.sdrop .si .badge{margin-left:8px}

/* ── Portfolio position tables (portfolio view only; the event view now
   uses app.css .pos-item rows) ──────────────────────────────────────────── */
.pp-cols,.pp-row{display:grid;grid-template-columns:1fr 48px 64px 64px 76px 76px 84px;gap:8px;align-items:center;padding:6px 12px}
.pp-cols{font-size:9px;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd)}
.pp-row{border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;cursor:pointer}
.pp-row:hover{background:rgba(255,255,255,.03)}
.pp-row:last-child{border-bottom:0}
.pp-mkt{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-side{font-weight:700}
.pp-side.yes{color:var(--gn)}
.pp-side.no{color:var(--rd)}
.pp-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--tx)}
.pp-num.pos{color:var(--gn)}
.pp-num.neg{color:var(--rd)}
@media(max-width:760px){
  .pp-cols,.pp-row{grid-template-columns:1fr 44px 56px 64px 76px}
  .pp-cols span:nth-child(5),.pp-row span:nth-child(5),
  .pp-cols span:nth-child(6),.pp-row span:nth-child(6){display:none}
}

/* ── Portfolio view ──────────────────────────────────────────────────────── */
.pf-stats{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px 4px}
.pf-stat{
  flex:1;min-width:130px;padding:10px 14px;border:1px solid var(--bd);
  border-radius:10px;background:var(--sf);
}
.pf-stat .v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}
.pf-stat .l{font-size:10px;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.pf-tabs{display:flex;gap:6px;padding:12px 16px 0;border-bottom:1px solid var(--bd)}
.pf-tab{
  padding:7px 16px;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--mt);font-size:12px;font-weight:700;cursor:pointer;
}
.pf-tab.active{color:var(--ac);border-bottom-color:var(--ac)}
.pf-tab:hover:not(.active){color:var(--tx)}
.pf-ev-head{
  padding:10px 16px 5px;font-size:12px;font-weight:700;color:var(--ac);
  cursor:pointer;border-bottom:1px solid var(--bd);background:var(--sf);
}
.pf-ev-head:hover{text-decoration:underline}
.pf-cols,.pf-pos-row.pp-row{grid-template-columns:1fr 48px 64px 64px 76px 76px 84px 76px;margin:0 4px}
.pf-expired{font-size:9px;color:var(--yl);font-weight:700;margin-left:6px;text-transform:uppercase}
.pf-totals{
  display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 16px;margin-top:4px;
  border-top:1px solid var(--bd);font-size:12px;color:var(--mt);background:var(--sf);
}
.pf-totals b{color:var(--tx);font-variant-numeric:tabular-nums}
.pf-totals b.pos{color:var(--gn)}
.pf-totals b.neg{color:var(--rd)}
@media(max-width:760px){
  .pf-cols,.pf-pos-row.pp-row{grid-template-columns:1fr 44px 56px 64px 76px}
  .pf-cols span:nth-child(5),.pf-pos-row span:nth-child(5),
  .pf-cols span:nth-child(6),.pf-pos-row span:nth-child(6),
  .pf-cols span:nth-child(8),.pf-pos-row span:nth-child(8){display:none}
}

/* Activity feed */
.act-cols,.act-row{display:grid;grid-template-columns:120px 1fr 92px 92px;gap:10px;align-items:center;padding:7px 16px}
.act-cols{font-size:9px;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd)}
.act-row{border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.act-row:last-child{border-bottom:0}
.act-type{font-weight:700;font-size:11px}
.act-type.trade{color:var(--ac)}
.act-type.resolution{color:var(--yl)}
.act-type.cash{color:var(--gn)}
.act-type.other{color:var(--mt)}
.act-desc{color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-desc .act-slug{color:var(--mt);font-size:11px}
.act-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--tx)}
.act-amt.pos{color:var(--gn)}
.act-amt.neg{color:var(--rd)}
.act-time{text-align:right;font-size:11px;color:var(--mt)}
.act-more{padding:12px 16px;text-align:center}
@media(max-width:760px){
  .act-cols,.act-row{grid-template-columns:92px 1fr 80px}
  .act-cols span:nth-child(4),.act-row .act-time{display:none}
}

/* ── Fill notifications now reuse app.css's .fill-notif treatment (the
   Kalshi floating fill stream) — no poly-specific toast styles needed. ── */

/* ── Settings + Fees modals (header menu) ────────────────────────────────── */
.poly-modal-overlay{
  position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.poly-modal{
  background:var(--bg);border:1px solid var(--bd);border-radius:12px;
  width:100%;max-width:480px;max-height:82vh;display:flex;flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.poly-modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--bd);
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
}
.poly-modal-x{
  border:none;background:transparent;color:var(--mt);font-size:20px;
  cursor:pointer;line-height:1;padding:0 2px;
}
.poly-modal-x:hover{color:var(--tx)}
.poly-modal-body{padding:14px 16px;overflow-y:auto;font-size:12px;line-height:1.5}
.poly-cfg-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--bd);
}
.poly-cfg-row:last-child{border-bottom:none}
.poly-cfg-lbl{font-size:12px;font-weight:600}
.poly-cfg-sub{font-size:10px;color:var(--mt);font-weight:400;margin-top:1px}
.poly-cfg-creds{
  border:1px solid var(--bd);border-radius:8px;padding:12px;margin-bottom:12px;
}
.poly-cfg-creds h3{margin:0 0 6px;font-size:13px}
.poly-cfg-creds .f{margin:8px 0}
.poly-cfg-creds label{display:block;font-size:11px;color:var(--mt);margin-bottom:3px}
.poly-cfg-creds input{
  width:100%;padding:6px 8px;background:var(--bg);border:1px solid var(--bd);
  border-radius:4px;color:var(--tx);font-size:12px;font-family:inherit;
}
.poly-cfg-creds-actions{display:flex;gap:8px;margin-top:10px}
.poly-fee-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:11px}
.poly-fee-table th,.poly-fee-table td{
  text-align:right;padding:3px 8px;border-bottom:1px solid var(--bd);
}
.poly-fee-table th{color:var(--mt);font-weight:600;text-transform:uppercase;font-size:9px;letter-spacing:.4px}
.poly-fee-table td:first-child,.poly-fee-table th:first-child{text-align:left}

/* Price nudge chips in the order ticket */
.pt-nudge{
  border:1px solid var(--bd);background:transparent;color:var(--mt);
  border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700;cursor:pointer;
}
.pt-nudge:hover{border-color:var(--ac);color:var(--tx)}