/* ─── Screener tab ──────────────────────────────────────────────────────────
   The screener has three stacked sections (rotation, screens, custom filter).
   Visual language matches the rest of the app: white card on neutral bg, 12px
   radius, subtle 1px border, monospaced numerics.

   Why a single CSS file instead of 3
   ----------------------------------
   The three sections share most styles (cards, chip strips, tables). Splitting
   would duplicate ~70% of the rules, so we keep them together with section
   prefixes (.s-rot-*, .s-scr-*, .s-flt-*) for predictable scoping.
*/

.screener-wrap{display:flex;flex-direction:column;gap:14px}
.screener-header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:2px}
.screener-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:.3px}
.screener-sub{font-size:12px;color:var(--text2)}

/* ─── Sub-tab nav ────────────────────────────────────────────────────────
   Pill-style segmented switcher. Three tabs: Rotation / Screens / Custom.
   Active tab gets a strong border + tinted background so it reads as
   selected even on small screens. We avoid an underline-only style here
   because the screener page is dense — users need a clear chunky anchor. */
.screener-subnav{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.s-subtab{flex:1;min-width:170px;padding:9px 14px;border:1px solid transparent;border-radius:9px;
  background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;transition:background .12s,border-color .12s,color .12s}
.s-subtab:hover{background:#f8fafc}
.s-subtab.is-active{background:#eef2ff;border-color:#c7d2fe;box-shadow:inset 0 0 0 1px #6366f1}
.s-subtab-label{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.2px}
.s-subtab.is-active .s-subtab-label{color:#3730a3}
.s-subtab-sub{font-size:10.5px;color:var(--text2);margin-top:2px;font-weight:500}
.s-subtab.is-active .s-subtab-sub{color:#4f46e5}

/* Sub-panels — only the active one is laid out, others are pulled out
   of the flow so we don't accidentally compute layout for hidden trees. */
.s-panel{display:none}
.s-panel.is-active{display:block}
.screener-card{padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.screener-card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.screener-card-title{font-size:13px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.4px}
.screener-card-sub{font-size:11px;color:var(--text2)}
.screener-empty{padding:24px 8px;font-size:12px;color:var(--text2);text-align:center;font-style:italic}

/* ─── Rotation panel ─────────────────────────────────────────────────────── */
/* A horizontally-scrollable matrix: rows = themes/sectors, columns = horizons.
   Cells are colored by perf magnitude (red→green); rank chip in each cell
   shows the bucket's standing on that horizon. */

.s-rot-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.s-rot-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff}
.s-rot-table thead th{background:#f8fafc;padding:10px 12px;text-align:right;font-weight:600;
  color:var(--text2);font-size:11px;text-transform:uppercase;letter-spacing:.3px;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.s-rot-table thead th:first-child{text-align:left}
.s-rot-table tbody tr{border-top:1px solid var(--border);transition:background .12s}
.s-rot-table tbody tr:hover{background:#f8fafc}
.s-rot-table td{padding:10px 12px;font-variant-numeric:tabular-nums}
.s-rot-bucket{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text);min-width:160px}
.s-rot-kind{font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 6px;border-radius:4px;
  text-transform:uppercase;color:var(--text2);background:var(--bg2);border:1px solid var(--border);flex-shrink:0}
.s-rot-kind.theme{color:#7c3aed;background:#f5f3ff;border-color:#ddd6fe}
.s-rot-kind.sector{color:#0369a1;background:#f0f9ff;border-color:#bae6fd}
.s-rot-name{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.s-rot-name:hover{text-decoration-color:var(--text2)}
.s-rot-cell{text-align:right;position:relative;min-width:90px}
.s-rot-pct{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;line-height:1.2}
.s-rot-pct.up{color:#15803d}
.s-rot-pct.down{color:#b91c1c}
.s-rot-pct.flat{color:var(--text2);font-weight:500}
.s-rot-rank{font-size:10px;color:var(--text2);font-weight:500;margin-top:2px;letter-spacing:.2px}
.s-rot-rank-arrow{display:inline-block;font-size:10px;font-weight:700;margin-left:4px;padding:1px 5px;border-radius:4px;line-height:1.4}
.s-rot-rank-arrow.up{color:#15803d;background:#f0fdf4}
.s-rot-rank-arrow.down{color:#b91c1c;background:#fef2f2}
.s-rot-rank-arrow.flat{color:var(--text2);background:var(--bg2)}

/* Cell background tint — green for up, red for down, intensity scales with %.
   We use opacity layers (.05-.18) so colour blends into the white card and
   the table doesn't look like a Christmas tree on a strong day. */
.s-rot-cell.up-1{background:rgba(34,197,94,0.05)}
.s-rot-cell.up-2{background:rgba(34,197,94,0.10)}
.s-rot-cell.up-3{background:rgba(34,197,94,0.16)}
.s-rot-cell.down-1{background:rgba(239,68,68,0.05)}
.s-rot-cell.down-2{background:rgba(239,68,68,0.10)}
.s-rot-cell.down-3{background:rgba(239,68,68,0.16)}

.s-rot-legend{margin-top:10px;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.s-rot-legend-arrow{display:inline-flex;align-items:center;gap:4px}

/* ─── Quick screens ──────────────────────────────────────────────────────── */
/* Horizontal grid of clickable screen tiles. Selecting one expands the
   stock list below the strip. */

.s-scr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.s-scr-tile{padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:10px;
  cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .08s;
  display:flex;flex-direction:column;gap:4px;font-family:inherit;color:inherit}
.s-scr-tile:hover{border-color:#94a3b8;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.s-scr-tile.is-active{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 1px #2563eb inset}
.s-scr-tile-label{font-size:13px;font-weight:600;color:var(--text)}
.s-scr-tile-blurb{font-size:11px;color:var(--text2);line-height:1.4}

.s-scr-results{margin-top:14px}
.s-scr-results-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:10px;flex-wrap:wrap}
.s-scr-results-title{font-size:13px;font-weight:700;color:var(--text)}
.s-scr-results-count{font-size:11px;color:var(--text2)}

/* ─── Stock results table (used by screens AND filter) ──────────────────── */

.s-stk-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:#fff}
.s-stk-table{width:100%;border-collapse:collapse;font-size:12px}
.s-stk-table thead th{background:#f8fafc;padding:8px 10px;text-align:right;font-weight:600;
  color:var(--text2);font-size:11px;text-transform:uppercase;letter-spacing:.3px;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.s-stk-table thead th:first-child,
.s-stk-table thead th.s-th-name{text-align:left}
.s-stk-table tbody tr{border-top:1px solid var(--border);transition:background .12s}
.s-stk-table tbody tr:hover{background:#f8fafc}
.s-stk-table td{padding:8px 10px;font-variant-numeric:tabular-nums}
.s-stk-table td.s-td-name{text-align:left;min-width:200px}
.s-stk-name{font-weight:600;color:var(--text);line-height:1.25}
.s-stk-meta{font-size:10px;color:var(--text2);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.s-stk-tkr{font-family:'SF Mono','Monaco',monospace;font-size:10px;color:var(--text2);font-weight:500;letter-spacing:.2px}
.s-stk-cap{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:1px 5px;border-radius:3px;color:var(--text2);background:var(--bg2);border:1px solid var(--border)}
.s-stk-cap.large{color:#7c3aed;background:#f5f3ff;border-color:#ddd6fe}
.s-stk-cap.mid{color:#0369a1;background:#f0f9ff;border-color:#bae6fd}
.s-stk-cap.small{color:#a16207;background:#fffbeb;border-color:#fde68a}
.s-stk-cap.micro{color:var(--text2)}
/* Live-price chip in the name cell — shows the current LTP so users can
   scan "what's the number" without us needing a dedicated column. */
.s-stk-last{font-family:'SF Mono','Monaco',monospace;font-size:10px;font-weight:600;color:var(--text);letter-spacing:.1px}
/* Pulsing green dot prefixed on any row whose price came from the live
   Upstox LTP overlay (vs yesterday's bhavcopy close). Same visual
   language as the header status pill so users connect the two. */
.s-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:5px;vertical-align:middle;animation:pulse-green 1.5s infinite}
tr.is-live td.s-td-name .s-stk-name{display:flex;align-items:center}
.s-stk-pct{font-weight:600;font-variant-numeric:tabular-nums}
.s-stk-pct.up{color:#15803d}
.s-stk-pct.down{color:#b91c1c}
.s-stk-pct.flat{color:var(--text2);font-weight:500}
.s-stk-pct.dim{color:var(--text2);font-weight:400}
.s-stk-vol{font-weight:600;color:var(--text)}
.s-stk-vol.hot{color:#ea580c}

/* Fundamentals columns — slightly more muted than perf cells, since they
   change quarterly not daily. Keeps the eye drawn to perf first, fundies
   as supporting context. */
.s-stk-fund{font-weight:600;color:#334155;font-variant-numeric:tabular-nums}
.s-stk-table.has-fund{font-size:11.5px}
.s-stk-table.has-fund thead th{padding:8px 9px}
.s-stk-table.has-fund td{padding:8px 9px}

/* Source badges on screen tiles — F = Fundamentals (purple, slower first
   call), T = Technicals (blue, computed locally so always fast),
   L = Long-horizon history (amber, requires 10Y of bhavcopy candles). */
.s-scr-fund-badge,.s-scr-tech-badge,.s-scr-long-badge{display:inline-flex;align-items:center;
  justify-content:center;width:14px;height:14px;font-size:9px;font-weight:800;border-radius:3px;
  color:#fff;letter-spacing:.3px;margin-left:4px;vertical-align:middle;line-height:1}
.s-scr-fund-badge{background:#7c3aed}
.s-scr-tech-badge{background:#0369a1}
.s-scr-long-badge{background:#d97706}
.s-scr-tile.has-fund{border-color:#ddd6fe}
.s-scr-tile.has-fund:hover{border-color:#a78bfa;background:#faf5ff}
.s-scr-tile.has-fund.is-active{background:#f5f3ff;border-color:#7c3aed}
.s-scr-tile.has-tech{border-color:#bae6fd}
.s-scr-tile.has-tech:hover{border-color:#7dd3fc;background:#f0f9ff}
.s-scr-tile.has-tech.is-active{background:#f0f9ff;border-color:#0369a1}
.s-scr-tile.has-long{border-color:#fde68a}
.s-scr-tile.has-long:hover{border-color:#fbbf24;background:#fffbeb}
.s-scr-tile.has-long.is-active{background:#fffbeb;border-color:#d97706}
/* Combinations get gradient backgrounds when active */
.s-scr-tile.has-fund.has-tech{border-color:#c4b5fd}
.s-scr-tile.has-fund.has-tech.is-active{
  background:linear-gradient(135deg,#f5f3ff 0%,#f0f9ff 100%);
  border-color:#7c3aed}
.s-scr-tile.has-fund.has-long.is-active{
  background:linear-gradient(135deg,#f5f3ff 0%,#fffbeb 100%);
  border-color:#7c3aed}
.s-scr-tile.has-tech.has-long.is-active{
  background:linear-gradient(135deg,#f0f9ff 0%,#fffbeb 100%);
  border-color:#0369a1}

/* Y/N badges for boolean technical flags. ✓ green, × red, dim grey. */
.s-stk-yn{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;font-size:11px;font-weight:700;border-radius:4px;line-height:1}
.s-stk-yn.yes{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}
.s-stk-yn.no {color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}

/* RSI cell color band — overbought green (≥70), oversold red (≤30), neutral grey */
.s-stk-rsi.up{color:#15803d;font-weight:700}
.s-stk-rsi.down{color:#b91c1c;font-weight:700}

/* Wide table when both fund + tech shown — slightly tighter padding and
   smaller font so 18 columns fit on a 1280px viewport without h-scroll. */
.s-stk-table.has-fund.has-tech{font-size:11px}
.s-stk-table.has-fund.has-tech thead th{padding:7px 7px}
.s-stk-table.has-fund.has-tech td{padding:7px 7px}

/* Long-horizon-only table → modest tightening; with fund or tech it gets
   tighter still since we're adding 4 more columns. */
.s-stk-table.has-long{font-size:11.5px}
.s-stk-table.has-long thead th{padding:8px 9px}
.s-stk-table.has-long td{padding:8px 9px}
.s-stk-table.has-long.has-fund,
.s-stk-table.has-long.has-tech,
.s-stk-table.has-long.has-fund.has-tech{font-size:10.5px}
.s-stk-table.has-long.has-fund thead th,
.s-stk-table.has-long.has-tech thead th,
.s-stk-table.has-long.has-fund.has-tech thead th{padding:6px 6px}
.s-stk-table.has-long.has-fund td,
.s-stk-table.has-long.has-tech td,
.s-stk-table.has-long.has-fund.has-tech td{padding:6px 6px}

/* ─── Custom filter ──────────────────────────────────────────────────────── */

.s-flt-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.s-flt-group{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.s-flt-group label{font-weight:600;color:var(--text2);font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.s-flt-select,.s-flt-input{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;
  font-size:12px;color:var(--text);font-family:inherit;font-variant-numeric:tabular-nums;min-width:60px}
.s-flt-select:focus,.s-flt-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.s-flt-input{width:90px}
.s-flt-actions{display:flex;align-items:center;gap:8px}
.s-flt-btn{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);background:#fff;color:var(--text);font-family:inherit;transition:all .12s}
.s-flt-btn:hover{border-color:#94a3b8}
.s-flt-btn-primary{background:#2563eb;color:#fff;border-color:#2563eb}
.s-flt-btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}

/* ─── Inline bucket drill-down ──────────────────────────────────────────
   Replaces the old popup modal — when a user clicks a rotation row, we
   render the constituent stock list right under the rotation table so
   they can keep comparing buckets without losing context.

   Visually distinct from the rotation card itself (tinted background,
   thicker top border) so it reads as a focused panel not just another
   stock table dropped into the page. */

.s-rot-drill{margin-top:14px;border:1px solid #c7d2fe;border-top-width:3px;border-top-color:#6366f1;
  border-radius:10px;background:#f8faff;padding:14px 16px;box-shadow:0 1px 2px rgba(99,102,241,.08)}
.s-rot-drill[hidden]{display:none}
.s-rot-drill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.s-rot-drill-title{font-size:14px;font-weight:700;color:#3730a3;line-height:1.3}
.s-rot-drill-sub{font-size:11.5px;color:#4f46e5;margin-top:3px;line-height:1.4}
.s-rot-drill-close{background:transparent;border:0;cursor:pointer;padding:4px 10px;font-size:20px;
  color:#6366f1;line-height:1;border-radius:6px;flex-shrink:0;font-weight:700}
.s-rot-drill-close:hover{background:#e0e7ff;color:#3730a3}
.s-rot-drill-body{margin-top:4px}

/* Highlight the active rotation row while its drill-down is open — gives
   the user a visual link between "what I clicked" and "what I'm seeing
   below" when they've scrolled. */
.s-rot-table tbody tr.is-drilling{background:#eef2ff}
.s-rot-table tbody tr.is-drilling:hover{background:#e0e7ff}
.s-rot-table tbody tr.is-drilling .s-rot-name{text-decoration-color:#6366f1}

/* Skeleton placeholder so the rotation table area doesn't jump on first paint */
.s-rot-skel{height:380px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:200% 100%;animation:skel-shimmer 1.2s infinite;border-radius:10px}

/* Header pill matching the .today nav-live-dot for the "live" indicator */
.s-status-pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;
  background:var(--bg2);color:var(--text2);border:1px solid var(--border);display:inline-flex;align-items:center;gap:6px}
.s-status-pill.live{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}
.s-status-pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse-green 1.5s infinite}