/* history.css — page-specific styles for the Pick History page.
   Loaded AFTER style.css + index.css (cascade preserved from the former inline block). */

/* page-title/page-subtitle now provided by the shared .hero.hero-slim band (index.css) */

.summary-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.summary-row .stat-pill { flex: 1; min-width: 110px; justify-content: center; }  /* vertically center so taller siblings don't leave empty bottom space */

/* Analytics two-col */
.analytics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .analytics-row { grid-template-columns: 1fr; } }

.card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.card-sub   { font-size: 10px; color: var(--text-4); margin-bottom: 14px; }

/* Backtest */
.roi-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.roi-year { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-2); width: 56px; flex-shrink: 0; }
.roi-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 100px; overflow: hidden; }
.roi-fill { height: 100%; border-radius: 100px; }
.roi-fill.pos { background: linear-gradient(90deg,#22c55e,#4ade80); }
.roi-fill.neg { background: linear-gradient(90deg,#ef4444,#f87171); }
.roi-pct { font-family: var(--font-display); font-size: 13px; font-weight: 700; width: 50px; text-align: right; flex-shrink: 0; }
.roi-pct.pos { color: var(--green); }
.roi-pct.neg { color: var(--red); }
.roi-meta { font-size: 10px; color: var(--text-4); }

/* Filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filter-btn { padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-3); cursor: pointer; transition: all 0.15s; }
.filter-btn:hover { color: var(--text-2); background: rgba(255,255,255,0.04); }
.filter-btn.active { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.35); color: var(--indigo-lt); }
.filter-sep { width: 1px; height: 20px; background: var(--border); }

/* Desktop: clip the table to the card's rounded corners (was an inline style; moved
   here so the mobile media query can override it to overflow:visible). */
#table-wrap { overflow: hidden; }

/* Sort headers */
.picks-table th { cursor: pointer; user-select: none; }
.picks-table th:hover { color: var(--text-3); }
.sort-asc::after  { content: ' ↑'; }
.sort-desc::after { content: ' ↓'; }

/* Responsive hide */
@media (max-width: 700px) { .hide-sm { display: none; } }

/* Month filter select */
.month-select {
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-3);
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23475569'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.month-select:focus { outline: none; border-color: rgba(99,102,241,0.4); color: var(--text-2); }

/* Edge tier row tinting */
tr.row-strong td { background: rgba(99,102,241,0.04); }
tr.row-value  td { background: rgba(20,184,166,0.03); }

.pnl-pos { color: var(--green); font-weight: 600; }
.pnl-neg { color: var(--red);   font-weight: 600; }

.no-history { text-align: center; padding: 56px 24px; color: var(--text-4); }
.no-history .nh-icon  { font-size: 40px; margin-bottom: 14px; }
.no-history .nh-title { font-family: var(--font-display); font-size: 20px; color: var(--text-3); margin-bottom: 8px; }
.no-history .nh-sub   { font-size: 12px; line-height: 1.7; }

.backtest-note { font-size: 10px; color: var(--text-4); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; }

/* Collapsible section header */
.collapsible-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; padding: 2px 0 10px;
}
.collapsible-header:hover .sec-lbl { color: var(--text-2); }
.collapsible-arrow { font-size: 11px; color: var(--text-4); transition: transform 0.2s; margin-left: 6px; flex-shrink: 0; }
.collapsible-header.open .collapsible-arrow { transform: rotate(180deg); }
.collapsible-body { display: none; }
.collapsible-body.open { display: block; }

/* Search input */
.search-input {
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-2); font-size: 11px; font-family: 'Inter', sans-serif;
  width: 160px; outline: none; flex-shrink: 0;
}
.search-input:focus { border-color: rgba(99,102,241,0.4); }
.search-input::placeholder { color: var(--text-4); }

/* Streak + breakdown pills */
.breakdown-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.streak-pill { padding: 10px 16px; border-radius: 10px; font-family:var(--font-display); font-size:22px; font-weight:700; display:flex; align-items:center; gap:8px; }
.streak-pill.W { background:rgba(34,197,94,0.1); color:var(--green); }
.streak-pill.L { background:rgba(239,68,68,0.1); color:var(--red); }
.streak-pill .sp-label { font-family:inherit; font-size:10px; font-weight:400; color:var(--text-4); margin-top:2px; }

.split-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:600px) { .split-grid { grid-template-columns:repeat(2,1fr); } }

/* Streak result chips */
.streak-chips { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.sc-chip { width: 18px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; flex-shrink: 0; }
.sc-chip.W { background: rgba(34,197,94,0.25); color: var(--green); }
.sc-chip.L { background: rgba(239,68,68,0.2); color: var(--red); }

/* ── Threshold input in filter bar ── */
.threshold-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; color: var(--text-3);
}
.threshold-wrap:focus-within { border-color: rgba(99,102,241,0.4); }
.threshold-lbl { font-weight: 600; font-size: 10px; color: var(--text-4); white-space: nowrap; }
.threshold-input {
  width: 38px; background: none; border: none; outline: none;
  color: var(--text-2); font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; text-align: right; padding: 0;
}
.threshold-pct { font-size: 10px; color: var(--text-4); }

/* ── Threshold active summary bar ── */
.threshold-summary-bar {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 12px;
  background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-3);
}
.tsb-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
             text-transform: uppercase; color: var(--indigo-lt); flex-shrink: 0; }
.tsb-stat { display: inline-flex; flex-direction: column; align-items: center; }
.tsb-val  { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1; }
.tsb-sub  { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--text-4); margin-top: 2px; }
.tsb-divider { width: 1px; height: 24px; background: rgba(99,102,241,0.2); flex-shrink: 0; }
.tsb-reset { margin-left: auto; font-size: 9px; color: var(--text-4); cursor: pointer;
             text-decoration: underline; white-space: nowrap; }
.tsb-reset:hover { color: var(--text-2); }

/* Auto-refresh live indicator */
.auto-refresh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; color: var(--green); font-family: var(--font-mono);
  padding: 3px 9px; background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2); border-radius: 6px; margin-left: 6px;
}
.arp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.arp-dot.pulse { animation: arp-pulse 2s infinite; }
@keyframes arp-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

@media (max-width: 700px) {
  /* keep the record (e.g. 250W–218L) on one line in the narrower mobile boxes */
  .summary-row .stat-val { font-size: 17px; white-space: nowrap; }

  /* settled-picks table → stacked per-pick cards (no horizontal scroll) */
  #table-wrap { background: transparent; border: none; overflow: visible; }   /* the per-pick cards are the boxes; never clip them */
  .picks-table, .picks-table tbody { display: block; }
  .picks-table thead, .picks-table tfoot { display: none; }   /* mobile: hide the table totals row — the live-totals bar above already covers it (a table-footer-group here forces a width overflow that clips the cards) */
  .tsb-divider { display: none; }   /* vertical dividers look broken once the bar wraps on mobile */
  .picks-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 9px 12px; margin-bottom: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
  .picks-table tr:last-child { margin-bottom: 0; }
  .picks-table tr.row-strong { border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.03); }
  .picks-table tr.row-value  { border-color: rgba(34,197,94,.22); background: rgba(34,197,94,.03); }
  .picks-table tr.row-strong td, .picks-table tr.row-value td { background: transparent; }
  .picks-table td { display: flex; align-items: baseline; gap: 6px; min-width: 0; border: none !important; padding: 0 !important; font-size: 12px; }
  .picks-table td.hide-sm { display: none; }   /* keep Game/Tier/Model% hidden in card mode (compact) */
  .picks-table td::before { content: attr(data-label); color: var(--text-4); font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; }
  .picks-table td[data-label="Pick"] { order: -1; grid-column: 1 / -1; border-bottom: 1px solid var(--border) !important; padding-bottom: 6px !important; margin-bottom: 1px; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
  .picks-table td[data-label="Pick"]::before { display: none; }
}

/* P2/P3: recent-form rolling strip + table totals row */
.rolling-strip { margin: 0 0 24px; }
.rolling-lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); margin: 0 0 8px; }
.rolling-note { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-4); opacity: .75; margin-left: 6px; }
.rolling-strip .summary-row { margin-bottom: 0; }
.picks-table tfoot .totals-row td { font-weight: 700; border-top: 2px solid var(--border); background: rgba(255,255,255,.025); color: var(--text-2); }