/* ============================================
   SignalIQ Pro — Main Stylesheet
   Dark theme with navy blue topbar
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Navy-blue palette — re-anchored 2026-05-11 to a clearly-blue tone
     (was nearly-black). Used on topbar, sidebar, table headers, page
     H1s, and any other "primary brand" surface. */
  --navy-900: #172554;     /* deepest — for darker accents */
  --navy-800: #1e3a8a;     /* primary brand blue — the workhorse */
  --navy-700: #1e40af;     /* slightly lighter, for hovers / borders */
  --navy-600: #2563eb;     /* highlight / focus rings */

  /* Light-theme page palette — body / cards / tables. */
  --bg-base: #ffffff;          /* page background — pure white */
  --bg-soft: #f8fafc;          /* subtle off-white for section bands */
  --bg-card: #ffffff;          /* card / panel background */
  --bg-card-hover: #f1f5f9;    /* card hover */
  --border: #e2e8f0;           /* default border */
  --border-hover: #cbd5e1;
  --text-primary: #0f172a;     /* near-black for primary copy */
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #f1f5f9;     /* light text on the dark topbar */

  /* Gold accent — replaces the prior teal-green throughout the topbar
     + menu icons + logo glyph + active-state underline. Two shades:
     classic gold for primary use, slightly brighter for hover. */
  --gold: #d4af37;
  --gold-bright: #e8c560;
  --gold-soft: rgba(212, 175, 55, 0.18);

  /* Accent stays teal for body / page-side UI (badges, links) but no
     longer appears in the topbar — see the explicit overrides below. */
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --warning: #b45309;
  --danger: #b91c1c;
  --success: #047857;
  --text: var(--text-primary);
  --text-secondary-fallback: var(--text-secondary);
}

html, body {
  /* min-height (not height) so body can grow taller than viewport when
     a child (e.g. the sidebar nav with many items) exceeds the viewport.
     Fixed `height: 100%` was clamping body and clipping the sidebar. */
  min-height: 100%;
}

body {
  /* Inter loaded via Google Fonts (see base.html). */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #ffffff !important;
  color: var(--text-primary);
  font-size: 14px;
  /* Tiled layout — CSS Grid with two explicit rows:
        row 1 = topbar     (auto / 60px)
        row 2 = main area  (minmax — at least viewport-minus-topbar
                            so the navy sidebar fills the bottom on
                            short pages, but grows past viewport if
                            the sidebar's own content is taller). */
  display: grid !important;
  grid-template-rows: auto minmax(calc(100vh - 60px), auto);
  grid-template-columns: 1fr;
  font-feature-settings: 'cv02', 'cv11';  /* Inter's straight-l + alt-1 */
  font-variant-numeric: tabular-nums;     /* aligned digits in tables */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Typographic hierarchy — headings use Inter at heavier weights with
   tightened letter-spacing for a fintech feel. */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.5em 0;
}
h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
h5 { font-size: 12px; }
h6 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* Section labels — small caps style for finance UI patterns */
.label, .section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ============================================
   Top Navigation Bar
   ============================================ */
.topbar {
  /* Navy chrome with subtle depth — landing-page-grade polish. Gradient
     gives it dimensionality vs flat color; bottom shadow separates it
     from content for that "elevated" feel marketing pages use. Sticky
     at top so it stays visible during scroll. Lives in row 1 of the
     body grid. */
  background: linear-gradient(180deg, #1e3a8a 0%, #1a3582 100%) !important;
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--text-inverse);
  height: 48px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 6px 18px rgba(15, 23, 42, 0.12);
}

.topbar-inner {
  /* Two-column grid: brand on the left (column auto-sized to its
     content), nav cluster on the right (takes the remaining space and
     centers its items within that wide column). The brand stays
     anchored left; the rest of the menu reads as a centered group in
     its own column. */
  width: 100%;
  padding: 0 20px;
  height: 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}

/* Brand / Logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  /* White logo tile with navy "S" — standard Stripe / Linear / GitHub
     pattern for a brand glyph on a dark-navy topbar. Reads cleanly
     and professionally against the brand blue. */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.08);
}

.logo-mark {
  /* "S" glyph in the brand navy — matches the topbar background's
     primary color so the logo reads as part of the brand system. */
  color: var(--navy-800);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.3px;
}

.brand-tag {
  /* Gold pill badge — matches the landing-page brand chip. Same gold
     accent the marketing site uses for the "PRO" badge; ties the app
     chrome to the landing visually. */
  display: inline-flex;
  align-items: center;
  background: var(--gold-bright);
  color: var(--navy-900);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
  width: fit-content;
}

/* Topbar Dashboard pill — sits in .topbar-right next to the tickers /
   market-status / user-menu. Matches their pill shape + subtle white
   border so all right-cluster items align visually as one row. */
.topbar-pill.topbar-dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.topbar-pill.topbar-dashboard-link i {
  font-size: 11px;
  opacity: 0.85;
}
.topbar-pill.topbar-dashboard-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.topbar-pill.topbar-dashboard-link.active {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--navy-900);
  font-weight: 600;
}
.topbar-pill.topbar-dashboard-link.active:hover {
  background: #ffd966;
  border-color: #ffd966;
  color: var(--navy-900);
}

/* Main Menu */
.nav-menu {
  display: flex;
  gap: 4px;
  flex: 1;
  margin-left: 24px;
}

.nav-link {
  /* inline-flex + nowrap keeps the Font Awesome icon and label on the
     same baseline. inline-block (the old value) let the parent <a>
     wrap when the topbar got tight, stacking the icon above the text. */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  color: rgba(241, 245, 249, 0.85);   /* light text on dark navy topbar */
  font-size: 12px;            /* was 13px — further tightened to fit all
                                  items + market status + user name. */
  font-weight: 500;
  transition: all 0.15s ease;
  position: relative;
  line-height: 1.2;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--navy-600);
  border-radius: 2px;
}

/* Nav dropdown (Admin menu, etc.) */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.nav-dropdown.open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  /* Top at 100% with the 6px visual gap implemented as padding-top
     inside the wrapper. The previous `top: calc(100% + 6px)` left a
     transparent 6px gap that broke :hover continuity as the mouse
     moved from trigger to sub-item. Padding bridges it. */
  top: 100%;
  left: 0;
  min-width: 220px;
  /* Light-theme drop-down panel — white card with crisp border + soft
     shadow, dropping out of the dark topbar. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 0 6px 0;
  margin-top: -6px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  list-style: none;
  display: none;
  z-index: 100;
}

.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

/* Font Awesome icons in nav menu + sub-items.
   Industry-standard pattern for dark sidebars (Stripe, Linear, GitHub,
   AWS Console, Azure Portal): WHITE icons at slightly reduced opacity
   for inactive, full opacity on hover/active. Reads cleanly on the
   dark blue without the "odd" decorative-gold feeling. */
.nav-icon {
  display: inline-block;
  width: 16px;
  font-size: 13px;
  margin-right: 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.12s ease;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
  color: #ffffff;
}
/* Inside the white drop-down panel — use the brand blue so icons
   contrast against the white surface. */
.dropdown-item .nav-icon {
  color: var(--navy-700);
}
.dropdown-item:hover .nav-icon,
.dropdown-item.active .nav-icon {
  color: var(--navy-800);
}

.dropdown-item {
  /* inline-flex aligns the Font Awesome icon with the label cleanly */
  display: flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.dropdown-item:hover {
  background: rgba(13, 148, 136, 0.08);
  color: var(--accent-strong);
}

.dropdown-item.active {
  background: rgba(13, 148, 136, 0.12);
  color: var(--accent-strong);
  font-weight: 600;
}

/* Coming-soon placeholder pages (futures, equities) */
.coming-soon-page {
  padding: 32px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.coming-soon-card {
  background: #1e2a3a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 32px 36px;
  margin-top: 16px;
}

.coming-soon-card h2 {
  color: #fff;
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 600;
}

.coming-soon-card p {
  margin: 12px 0;
  line-height: 1.6;
  font-size: 14px;
}

.coming-soon-badge {
  display: inline-block;
  background: rgba(0, 212, 170, 0.12);
  color: var(--accent);
  border: 1px solid rgba(0, 212, 170, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.coming-soon-badge.phase-2 {
  background: rgba(105, 170, 255, 0.10);
  color: #69aaff;
  border-color: rgba(105, 170, 255, 0.3);
}

/* Primary vs secondary action display on signal panel.
   Primary is the action relevant to the page's display_mode
   (option-sell on /nifty-options, futures on /futures). */
.panel-action.panel-action-primary {
  background: rgba(0, 212, 170, 0.05);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.panel-action.panel-action-secondary {
  opacity: 0.75;
  font-size: 0.9em;
}
.panel-action.panel-action-secondary label {
  color: #8a96a8;
}

/* Futures execution card */
.futures-execution-card {
  border-left: 3px solid var(--accent);
}

/* Right side
   ------------------------------------------------------------------
   Single-row enforcement (2026-05-21): flex-wrap was previously
   `wrap`, which let the user-menu fall to a second row when the
   trial-pill was present (Subscribe CTA + 2 tickers + Market Closed
   + user menu were too wide). Now `nowrap` keeps everything in one
   row; gaps are tightened and shrink-allowed on the children that
   can absorb the squeeze (ticker-group). The grid column is `1fr`,
   so flex distributes the available space across items. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}
/* Children: don't shrink by default — preserve readable padding on
   pills. The ticker-group is the one item we *do* let shrink, since
   its content is numeric and tolerates a tighter rhythm. */
.topbar-right > * { flex-shrink: 0; min-width: 0; }
.topbar-right .ticker-group { flex-shrink: 1; }

.market-status {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* Open: gold pill with pulsing gold dot. Closed: muted slate pill,
   dim dot, no pulse. Drives off the data-open attribute set by JS. */
.market-status[data-open="1"] {
  background: var(--gold-soft);
  border-color: rgba(212, 175, 55, 0.35);
}
.market-status[data-open="0"] {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.40);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.status-dot.live {
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(232, 197, 96, 0.65);
  animation: pulse 2s ease-in-out infinite;
}
.status-dot.closed {
  background: rgba(148, 163, 184, 0.85);
  box-shadow: none;
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.market-status[data-open="1"] .status-text {
  color: var(--gold-bright);
}
.market-status[data-open="0"] .status-text {
  color: rgba(148, 163, 184, 1);
}
.status-text {
  font-size: 11px;
  font-weight: 600;
}

/* User-profile dropdown — replaces the old read-only .user-info pill.
   Trigger pill on the dark topbar; menu opens DOWN-LEFT so it stays
   inside the viewport (the user element sits on the right edge of the
   topbar; a left-aligned dropdown would clip off-screen). */
.user-menu {
  position: relative;
  flex-shrink: 0;
}
.user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  cursor: pointer;
  color: #ffffff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.user-trigger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(212, 175, 55, 0.45);
}
.user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--navy-900);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-name {
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.user-menu .nav-caret {
  color: rgba(255, 255, 255, 0.7);
  margin-left: 2px;
}

/* Open the user menu's dropdown to the RIGHT edge of the trigger so it
   doesn't clip the viewport. (`.nav-dropdown-menu` defaults to `left: 0`
   which would open it under the LEFT side of a wide pill.) */
.user-menu-list {
  left: auto !important;
  right: 0;
  min-width: 200px;
}
/* Dropdown items inside the user menu get a subtle row separator on the
   destructive "Log Out" item so it reads as a different action class. */
.dropdown-item-danger {
  color: var(--danger) !important;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px !important;
}
.dropdown-item-danger:hover {
  background: rgba(185, 28, 28, 0.06) !important;
  color: #7f1d1d !important;
}
.dropdown-item-danger .nav-icon {
  color: var(--danger) !important;
}

/* Legacy body-level "Live ticker disconnected / Retry" banner styles
   removed 2026-05-14 with the banner element. Kite connection status
   now lives in the topbar's admin-only #kite-status-btn. */

/* ============================================
   Page Wrapper (main content area)
   ============================================ */
.page-wrapper {
  /* Legacy class — now applied to <main class="app-main page-wrapper">.
     The .app-main rule defines the new flex-column layout (content +
     footer). We keep the padding here so per-page content keeps its
     left/right gutter. flex: 1 was needed back when this was a direct
     child of body; it's now handled by .app-main. */
  width: 100%;
}
.app-content {
  /* Centered content column. Width narrowed from 1600 → 1280 (matches
     landing-page container width) so the page reads comfortably without
     horizontal scroll on standard laptop screens. Tables that would
     overflow this width wrap to multi-line / scroll within their
     container instead of forcing whole-page horizontal scroll. */
  padding: 32px 28px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================
   Container (content card)
   ============================================ */
.container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* Header variant where title + subtitle sit on the left and an inline
   controls cluster (e.g. Refresh + "Last updated") sits on the right
   of the same row. Used on Trade Recommendations. */
.page-header-row {
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header-row .page-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-header-row .trades-controls {
  margin-left: auto;
}

h1 {
  /* Page H1 — dark navy (was teal/green). User-facing headings live on
     the white body, so we use the same dark navy as the topbar for a
     unified primary-brand color. */
  color: var(--navy-800);
  font-size: 20px;
  font-weight: 600;
}

.version {
  color: var(--text-muted);
  font-size: 13px;
  font-family: 'Consolas', 'Courier New', monospace;
}

.lead {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 14px;
}

/* ============================================
   Status Cards Grid
   ============================================ */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.status-card {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.status-card:hover {
  border-color: var(--border-hover);
}

.label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.value {
  font-size: 14px;
  font-weight: 600;
}

.value.online { color: var(--success); }
.value.pending { color: var(--warning); }
.value.offline { color: var(--danger); }

/* ============================================
   Footer
   ============================================ */
.footer {
  /* Row 3 of the body grid — always at the bottom of the body, full
     width spans below BOTH the sidebar column and the main column. */
  background: var(--navy-900);
  border-top: none;
  padding: 16px 24px;
  width: 100%;
}

.footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Footer sits on the dark navy band so text reads light, not the
     dark-on-white token. */
  color: rgba(241, 245, 249, 0.7);
  font-size: 12px;
}
.footer-inner span { letter-spacing: 0.02em; }
.footer-inner strong { color: rgba(241, 245, 249, 0.95); font-weight: 600; }


/* ============================================
   LIGHT THEME GLOBAL OVERRIDES (added 2026-05-11)
   ===========================================================
   Many page templates were authored against the prior dark theme and
   hardcoded background `#1e2a3a` / text `#c4cdd9` / borders
   `rgba(255,255,255,0.06)`. Rather than re-edit every per-page
   `<style>` block, this section provides backstop selectors that
   target those exact patterns at the document level. New code should
   prefer the CSS variables (--bg-card / --text-primary / --border).
   =========================================================== */

/* Generic card / panel containers on inner pages */
.eb-page, .ra-page, .ed-page, .qr-page, .eq-page,
.coming-soon-page, .container { color: var(--text-primary); }

/* Replace the dark card background `#1e2a3a` site-wide unless a page
   has explicitly opted out. We target descendant elements with that
   inline background via attribute selectors so we don't have to walk
   every per-page <style> block. */
[style*="#1e2a3a"], [style*="background:#1e2a3a"] {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}

/* Page-section panels created by per-page CSS classes — give them
   a clean card look (white + soft shadow). Names follow the
   per-page conventions: ra-section / ed-section / eb-* / qr-* etc. */
.ra-section, .ra-tile, .ra-perf .ra-tile, .ra-tech-row .ra-tile,
.ed-stat, .ed-table-wrap, .ed-chart-wrap,
.eb-stat, .eb-table-wrap, .eb-chart-wrap, .eb-controls, .eb-strategy-bar,
.qr-stat, .qr-table-wrap, .qr-toolbar,
.eq-summary-card, .eq-table-wrap, .eq-regime-bar {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* All h1/h2/h3 inside these pages adopt dark text */
.ra-page h1, .ra-page h2, .ra-page h3,
.ed-page h1, .ed-page h2, .ed-page h3,
.eb-page h1, .eb-page h2, .eb-page h3,
.qr-page h1, .qr-page h2, .qr-page h3,
.eq-page h1, .eq-page h2, .eq-page h3 {
  color: var(--text-primary) !important;
}

/* Page wrappers default to the body background (white) so they don't
   carry the old dark page-fill from per-page CSS. */
.ra-page, .ed-page, .eb-page, .qr-page, .eq-page {
  background: var(--bg-base);
}

/* ============================================
   Left Sidebar Navigation (2026-05-11)
   ============================================
   Primary nav moved from topbar to a dark-navy left sidebar so the
   topbar has plenty of room for brand + tickers + market-status + user
   menu without items spilling off-screen. Sidebar items mirror the
   gold-accent design from the topbar (icons in gold, active state in
   gold tint). Sub-items render indented under their section header. */
.app-shell {
  /* Middle tile of the grid. Inside, sidebar + main are flex siblings
     that stretch to fill the entire row height — but also grow with
     the taller child (no min-height: 0 clamp), so the sidebar can be
     taller than the main pane when the nav has many items.
     align-items: stretch makes both siblings the SAME height, and
     that height is determined by the taller child's intrinsic size. */
  display: flex;
  width: 100%;
  align-items: stretch;
}
.sidebar {
  /* Sidebar column. Width fixed; height = .app-shell height (which
     in turn = the taller of sidebar-nav vs main content). The navy
     bg fills the whole column regardless of how the content compares
     in height. */
  width: 184px;
  flex-shrink: 0;
  background: var(--navy-800);
  color: rgba(241, 245, 249, 0.92);
  padding: 0;
  z-index: 90;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 20px 8px;
  /* No height constraint / no internal scroll — sidebar grows to
     accommodate all items and the column stretches with it. If the
     content exceeds the viewport, page scroll handles it (single
     scroll, not nested). This matches the user's preference: the
     menu should accommodate all items, no scrollbar. */
}

/* Top-level link — landing-page-grade hover with subtle lift + gold
   accent on active. Inter weights 400/500 with proper letter-spacing. */
.side-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: all 0.15s ease;
  position: relative;
}
.side-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(2px);
}
.side-link.active {
  /* Active state — gold accent bar + brighter text, matches the
     gold pill brand-tag in the topbar for visual consistency with
     the landing page palette. */
  background: rgba(232, 197, 96, 0.10);
  color: #ffffff;
  font-weight: 600;
}
.side-link.active::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(232, 197, 96, 0.45);
}
.side-icon {
  width: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.side-link:hover .side-icon { color: #ffffff; }
.side-link.active .side-icon { color: var(--gold-bright); }

/* Section header — eyebrow style matching the landing page's section
   labels (uppercase, letter-spaced, muted, gold-tinted icon). */
.side-section {
  margin: 14px 0 4px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.side-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 10px;
}
.side-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 3px;
}
.side-icon-section {
  font-size: 10px;
  color: rgba(232, 197, 96, 0.65);
}
.side-link-sub {
  padding-left: 22px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.side-link-sub:hover { color: #ffffff; }

/* Main content area — fills remaining width to the right of the
   sidebar. Footer is back at body level now, so this column just
   holds the page content with normal block flow. */
.app-main {
  flex: 1;
  min-width: 0;                       /* allows children to shrink */
  background: var(--bg-base);
  padding: 0;
}

/* On narrow screens, sidebar collapses to icon-only column. Labels
   reappear on hover (CSS-only — no JS). */
@media (max-width: 1024px) {
  .sidebar {
    width: 64px;
    transition: width 0.18s ease;
  }
  .sidebar:hover { width: 232px; }
  .sidebar .side-link span,
  .sidebar .side-section-header span { display: none; }
  .sidebar:hover .side-link span,
  .sidebar:hover .side-section-header span { display: inline; }
  .sidebar .side-link-sub { padding-left: 12px; }
  .sidebar:hover .side-link-sub { padding-left: 28px; }
}

@media (max-width: 700px) {
  .sidebar { display: none; }
}


/* ===========================================================
   TABLE HEADERS — dark navy band, WHITE label text. Applied
   universally to every <thead th> so the look is consistent
   across all tables (Dashboard tier tables, /equities list,
   per-stock analysis breakdown, admin browser/rankings/backtest,
   chain/detector tables, etc.). Forced with !important to
   override per-page <style> blocks that hardcoded a different
   header background.
   =========================================================== */
table thead th,
.trades-table thead th,
.eq-table th, .eb-table th, .qr-table th, .ed-table th,
.ra-page table th, .ed-page table th, .eb-page table th,
.qr-page table th, .eq-page table th,
.chain-table th, .score-table th, .detectors-table th {
  background: var(--navy-800) !important;
  color: #ffffff !important;
  border-bottom: 1px solid var(--navy-700) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Body-cell colors for those same tables — readable dark text on
   white background. */
.eb-table td, .qr-table td, .ed-table td, .eq-table td {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ===========================================================
   PAGE-LEVEL HEADINGS that hardcoded `color: #fff` — those are
   relics of the dark theme that read as invisible on the new
   white body. Pull every common header class onto the dark-navy
   primary heading color.
   =========================================================== */
.eq-header h1, .ra-title-block h1,
.eb-header h1, .qr-header h1, .pp-header h1,
.bt-header h1, .pt-header h1, .ed-title-block h1 {
  color: var(--navy-800) !important;
}
/* Big numeric values inside tiles (entry/LTP/P&L counters etc.) — were
   `color: #fff` on a dark card. Now on a white card → dark navy. */
.eq-summary-card .value, .ra-tile .value, .ed-stat-value,
.ra-factor-pts, .ra-score-summary .composite,
.eb-stat-value, .qr-stat-value, .pp-stat-value, .pt-stat-value {
  color: var(--navy-900) !important;
}
/* Pos / neg classes inside those tiles get their explicit green/red
   back — must come AFTER the navy default. */
.eq-summary-card .value.pnl-pos, .ra-tile .value.pos { color: var(--success) !important; }
.eq-summary-card .value.pnl-neg, .ra-tile .value.neg { color: var(--danger)  !important; }

/* Generic small-text/muted labels that pages style with #8a96a8 */
[style*="color:#8a96a8"], [style*="color: #8a96a8"] {
  color: var(--text-muted) !important;
}
[style*="color:#c4cdd9"], [style*="color: #c4cdd9"] {
  color: var(--text-primary) !important;
}

/* Back links — old `.ra-back`, `.ed-back`, `.eb-back` used a muted
   color that washes out on white. Pull them onto the accent. */
.ra-back, .ed-back, .eb-back, .qr-back {
  color: var(--text-muted) !important;
}
.ra-back:hover, .ed-back:hover, .eb-back:hover, .qr-back:hover {
  color: var(--accent) !important;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .topbar-inner {
    padding: 0 16px;
    gap: 16px;
  }
  
  .nav-menu {
    gap: 2px;
    margin-left: 12px;
  }
  
  .nav-link {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  .market-status,
  .user-info {
    display: none;
  }
}

@media (max-width: 700px) {
  .nav-menu {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .brand-text {
    display: none;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .container {
    padding: 20px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================
   Top-Bar Futures Ticker
   ============================================ */
.ticker-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 0;
  min-width: 0;
}

.ticker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.1;
  padding: 2px 7px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  min-width: 0;
}

.ticker-symbol {
  color: var(--navy-700);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ticker-price {
  color: var(--navy-900);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ticker-change {
  font-size: 0.62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.ticker.up .ticker-change { color: var(--success); }
.ticker.down .ticker-change { color: var(--danger); }
.ticker.flat .ticker-change { color: var(--text-secondary); }

/* Legacy — old inline "Login to Kite" button (#ticker-login). Removed
   from the DOM 2026-05-14; replaced by .kite-status-btn (admin only).
   Class kept here in case any cached template still references it. */
.ticker-login-btn { display: none !important; }

/* Admin-only Kite status button — sits in the topbar's right cluster.
   Two states driven by data-connected:
     "no"      → red, links to /kite/login, label "Login to Kite"
     "yes"     → green, no href (informational), label "Kite Connected"
     "unknown" → muted gold (initial render before first poll) */
.kite-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.kite-status-btn i { font-size: 10px; }
.kite-status-btn[data-connected="unknown"] {
  background: rgba(232, 197, 96, 0.16);
  color: var(--gold-bright);
  border-color: rgba(232, 197, 96, 0.40);
}
.kite-status-btn[data-connected="no"] {
  background: rgba(220, 38, 38, 0.16);
  color: #ffd5d5;
  border-color: rgba(220, 38, 38, 0.40);
  cursor: pointer;
}
.kite-status-btn[data-connected="no"]:hover {
  background: rgba(220, 38, 38, 0.28);
  color: #ffffff;
}
.kite-status-btn[data-connected="yes"] {
  background: rgba(0, 168, 134, 0.18);
  color: #c6f5e6;
  border-color: rgba(0, 168, 134, 0.45);
  cursor: default;
}

@media (max-width: 900px) {
  .ticker-group { gap: 6px; margin-right: 4px; }
  .ticker { padding: 2px 6px; gap: 4px; }
  .ticker-symbol { font-size: 0.58rem; }
  .ticker-price { font-size: 0.72rem; }
  .ticker-change { font-size: 0.6rem; }
}

/* ============================================
   Per-page Quote Panel (Nifty / BankNifty)
   ============================================ */
.quote-panel {
  margin-top: 8px;
}

.quote-empty {
  background: var(--bg-card-hover);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
}

.quote-empty p { margin: 0; font-size: 14px; }
.quote-empty-hint { margin-top: 8px !important; font-size: 12px; }
.quote-empty-hint a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.quote-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quote-panel.up .quote-card {
  border-color: rgba(0, 168, 134, 0.35);
  box-shadow: 0 1px 3px rgba(0, 168, 134, 0.12);
}
.quote-panel.down .quote-card {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
}

.quote-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.quote-row-primary {
  margin-bottom: 4px;
}

.quote-symbol {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.quote-price {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.1;
}

.quote-change {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.quote-panel.up  .quote-change,
.quote-panel.up  .quote-price { color: var(--success); }
.quote-panel.down .quote-change,
.quote-panel.down .quote-price { color: var(--danger); }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.quote-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quote-cell .value {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

@media (max-width: 700px) {
  .quote-price { font-size: 28px; }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Indicators Dashboard (Nifty / BankNifty pages)
   ============================================ */
.indicators-page { padding: 16px 24px; }

.indicators-header {
  align-items: center;
}
.header-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.meta-symbol {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}
.meta-ts { font-size: 12px; }

.indicators-empty {
  background: var(--bg-card-hover);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}
.indicators-empty p { margin: 0 0 8px 0; font-size: 14px; }
.indicators-empty-hint a { color: var(--accent); font-weight: 600; }

.indicators-body {
  display: grid;
  gap: 16px;
  margin-top: 4px;
  grid-template-columns: 1fr;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.card:hover {
  border-color: rgba(30, 58, 138, 0.18);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.card-header h2 {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy-700);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 0;
}
.muted { color: var(--text-muted); font-size: 12px; }
.small { font-size: 11px; margin-top: 8px; }

/* ---- Indicator value grid ---- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 18px;
}
.ind-grid > div,
.ohlc-grid > div,
.verdict-levels > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ind-grid label,
.ohlc-grid label,
.verdict-levels label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ind-grid span,
.ohlc-grid span,
.verdict-levels span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- Market Conditions Detectors table ---- */
.detectors-table-wrap { overflow-x: auto; }
.detectors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.detectors-table thead th {
  text-align: left;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.detectors-table th.num,
.detectors-table td.num { text-align: right; }
.detectors-table th.bull-col,
.detectors-table td.bull-col { color: var(--success); }
.detectors-table th.bear-col,
.detectors-table td.bear-col { color: var(--danger); }

.detectors-table tbody td {
  padding: 3px 7px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.25;
}
.detectors-table tbody .row-inactive td { color: var(--text-muted); }
.detectors-table tbody .row-active td { color: var(--text-primary); }
.detectors-table tbody .det-label { font-weight: 600; }
.detectors-table tbody .det-cat { font-size: 11px; }
.detectors-table tbody .det-desc { font-family: 'Consolas', 'Courier New', monospace; font-size: 11px; }

.detectors-table tbody .row-active.side-bull .det-label { color: var(--success); }
.detectors-table tbody .row-active.side-bear .det-label { color: var(--danger); }

.detectors-table tbody .cat-header-row td {
  background: var(--bg-card-hover);
  padding: 3px 7px;
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.detectors-table tbody .cat-header-row .cat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-right: 8px;
}

.detectors-table .pts-bull { color: var(--success); font-weight: 700; }
.detectors-table .pts-bear { color: var(--danger); font-weight: 700; }
.detectors-table .zero-pts { color: var(--text-muted); }
.detectors-table .info-cell {
  color: var(--warning);
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* status & side pills */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.status-pill.status-active   { background: rgba(0, 168, 134, 0.12); color: var(--success); }
.status-pill.status-inactive { background: rgba(113, 128, 150, 0.10); color: var(--text-muted); }
.status-pill.status-info     { background: rgba(217, 119, 6, 0.10); color: var(--warning); }

.side-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.side-badge.side-bull    { background: rgba(0, 168, 134, 0.12); color: var(--success); }
.side-badge.side-bear    { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
.side-badge.side-neutral { background: rgba(113, 128, 150, 0.10); color: var(--text-muted); }

/* ---- Score breakdown table ---- */
.score-table-wrap { overflow-x: auto; }
.score-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.score-table thead th {
  text-align: left;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.score-table th.num,
.score-table td.num { text-align: right; }
.score-table th.bull-col,
.score-table tfoot td.bull-col { color: var(--success); }
.score-table th.bear-col,
.score-table tfoot td.bear-col { color: var(--danger); }

.score-table tbody td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  line-height: 1.25;
}
.score-table tbody .state-cell {
  color: var(--text-secondary);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}
.score-table tbody .row-bull td:first-child { border-left: 3px solid var(--success); padding-left: 9px; }
.score-table tbody .row-bear td:first-child { border-left: 3px solid var(--danger); padding-left: 9px; }
.score-table tbody .row-neutral td:first-child { border-left: 3px solid transparent; padding-left: 9px; color: var(--text-muted); }

.score-table .pts-bull { color: var(--success); font-weight: 600; }
.score-table .pts-bear { color: var(--danger); font-weight: 600; }
.score-table .zero-pts { color: var(--text-muted); }

.score-table tfoot td {
  padding: 4px 8px;
  border-top: 1px solid var(--border);
}
.score-table tfoot .totals-row td { background: var(--bg-card-hover); }
.score-table tfoot .modifier-row td {
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
}
.score-table tfoot .totals-row.final td {
  border-top: 2px solid var(--border);
  font-size: 12px;
}
.score-table tfoot .net-row td {
  background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
  font-size: 13px;
  border-top: 2px solid var(--border);
}
.score-table tfoot .net-row .net-cell { color: var(--text-primary); font-weight: 700; }

/* ---- Price card ---- */
.price-card.up    { border-color: rgba(0, 168, 134, 0.40); }
.price-card.down  { border-color: rgba(220, 38, 38, 0.40); }
.price-card.flat  { border-color: var(--border); }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
}
.big-price {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.big-change {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.price-card.up   .big-price,
.price-card.up   .big-change { color: var(--success); }
.price-card.down .big-price,
.price-card.down .big-change { color: var(--danger); }

.ohlc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px 18px;
}

/* ---- Patterns ---- */
.patterns-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pattern-chip {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.pattern-bullish {
  background: rgba(0, 168, 134, 0.10);
  color: var(--success);
  border-color: rgba(0, 168, 134, 0.30);
}
.pattern-bearish {
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.30);
}

@media (max-width: 700px) {
  .indicators-page { padding: 18px 14px; }
  .verdict-levels { grid-template-columns: repeat(3, 1fr); }
  .big-price { font-size: 24px; }
}

/* ============================================
   SignalIQ Options v1 Panel
   ============================================ */
.options-panel-card,
.breakout-panel-card {
  border-left: 4px solid var(--border);
  padding-left: 22px;
}
.options-panel-card[data-status="enter_long"],
.breakout-panel-card[data-status="enter_long"]  { border-left-color: var(--success); }
.options-panel-card[data-status="enter_short"],
.breakout-panel-card[data-status="enter_short"] { border-left-color: var(--danger); }
.options-panel-card[data-status="no_trade"],
.breakout-panel-card[data-status="no_trade"]    { border-left-color: var(--text-muted); }

/* Breakout snapshot color shorthand */
.breakout-panel-card[data-snapshot="breakout_bull"] .panel-snapshot { color: var(--success); }
.breakout-panel-card[data-snapshot="breakout_bear"] .panel-snapshot { color: var(--danger); }
.breakout-panel-card[data-snapshot="no_setup"]      .panel-snapshot { color: var(--text-muted); }

/* Dual-conviction badge — gold pill that appears on both strategy
   panels when they agree on direction. Pure UX indicator, not a gate. */
.dual-conviction-badge {
  margin-top: 10px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(232, 197, 96, 0.18) 0%, rgba(232, 197, 96, 0.08) 100%);
  border: 1px solid rgba(232, 197, 96, 0.45);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold-bright, #c8930b);
  letter-spacing: 0.02em;
}
.dual-conviction-badge .dc-icon {
  font-size: 13px;
  color: var(--gold-bright, #c8930b);
}
.dual-conviction-badge .dc-text b { color: var(--text-primary); margin: 0 2px; }

.panel-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 18px;
  margin-bottom: 12px;
}
.panel-regime-row {
  grid-template-columns: 1.2fr 1.2fr 2fr;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.panel-cell.wide span { font-size: 14px; }
.panel-gap-pct { font-weight: 500 !important; font-size: 11px !important; margin-top: -2px; }

.panel-combined {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px !important;
  letter-spacing: 0.3px;
}
.options-panel-card[data-gap-class*="up"]   .panel-gap { color: var(--success); }
.options-panel-card[data-gap-class*="down"] .panel-gap { color: var(--danger); }
.options-panel-card[data-gap-class="flat_open"] .panel-gap { color: var(--text-muted); }
.panel-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.panel-cell label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.panel-cell span {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Snapshot pill colors */
.panel-snapshot { color: var(--text-secondary); }
.options-panel-card[data-snapshot="bullish"] .panel-snapshot,
.options-panel-card[data-snapshot="reversal_bullish"] .panel-snapshot { color: var(--success); }
.options-panel-card[data-snapshot="bearish"] .panel-snapshot,
.options-panel-card[data-snapshot="reversal_bearish"] .panel-snapshot { color: var(--danger); }
.options-panel-card[data-snapshot="lean_bullish"] .panel-snapshot { color: var(--success); opacity: 0.85; }
.options-panel-card[data-snapshot="lean_bearish"] .panel-snapshot { color: var(--danger); opacity: 0.85; }
.options-panel-card[data-snapshot="chop"] .panel-snapshot { color: var(--text-muted); }

/* Status pill colors */
.options-panel-card[data-status="enter_long"]  .panel-status { color: var(--success); }
.options-panel-card[data-status="enter_short"] .panel-status { color: var(--danger); }
.options-panel-card[data-status="no_trade"]    .panel-status { color: var(--text-muted); }

/* Grade pill colors */
.options-panel-card[data-grade="a_plus"] .panel-grade,
.options-panel-card[data-grade="a"]      .panel-grade { color: var(--success); }
.options-panel-card[data-grade="b_plus"] .panel-grade,
.options-panel-card[data-grade="b"]      .panel-grade { color: var(--warning); }
.options-panel-card[data-grade="c"]      .panel-grade { color: var(--text-muted); }

/* "Blocked by" row — visible only when status = NO_TRADE and a reason
   exists. Single full-width cell, muted-amber styling so it stands out
   without competing with the primary status row above. */
.panel-blocked-row {
  grid-template-columns: 1fr;
  background: rgba(255, 175, 64, 0.08);
  border-left: 3px solid var(--warning, #f0a020);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.panel-cell-wide { grid-column: 1 / -1; }
.panel-blocked-reason {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--warning, #f0a020);
  font-family: 'Consolas', 'Courier New', monospace;
}

.panel-action {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.panel-action label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.panel-action span {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
  color: var(--text-primary);
}
.options-panel-card[data-status="enter_long"]  .panel-action span { color: var(--success); }
.options-panel-card[data-status="enter_short"] .panel-action span { color: var(--danger); }

.panel-levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 14px;
  margin-bottom: 10px;
}
.panel-levels > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.panel-levels label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.panel-levels span {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.panel-meta {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.panel-reason { margin: 4px 0 0 0; font-family: 'Consolas', 'Courier New', monospace; word-break: break-word; }

@media (max-width: 700px) {
  .panel-row    { grid-template-columns: repeat(2, 1fr); }
  .panel-levels { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   Option Chain Card
   ============================================ */
.option-chain-card { padding-bottom: 18px; }

.chain-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 18px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.chain-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chain-summary label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chain-summary span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.chain-table-wrap {
  overflow-x: auto;
}

.chain-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.chain-table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--bg-card-hover);
  padding: 4px 7px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.chain-table thead .chain-side-call { color: var(--success); }
.chain-table thead .chain-side-put  { color: var(--danger); }

.chain-table tbody td {
  padding: 3px 7px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  color: var(--text-primary);
  line-height: 1.25;
}
.chain-table .strike-cell {
  text-align: center;
  font-weight: 700;
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}
.chain-table .atm-row .strike-cell {
  background: rgba(0, 168, 134, 0.10);
  color: var(--success);
}
.chain-table .wall-cell {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warning);
  font-weight: 700;
}
.chain-table tbody tr:hover {
  background: var(--bg-card-hover);
}

@media (max-width: 700px) {
  .chain-table { font-size: 11px; }
  .chain-table thead th,
  .chain-table tbody td { padding: 4px 6px; }
}

/* Chain extended cells (IV/Greeks, OI diff) */
.chain-table .iv-cell { font-weight: 600; }
.chain-table .delta-cell { font-size: 10px; margin-left: 3px; }
.chain-table .oi-diff {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
}
.chain-table .oi-diff.oi-up   { color: var(--success); }
.chain-table .oi-diff.oi-down { color: var(--danger); }

/* Global Cues card */
.global-cues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.cue-tile {
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--bg-card-hover);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cue-tile.up   { border-left-color: var(--success); }
.cue-tile.down { border-left-color: var(--danger); }
.cue-tile.flat { border-left-color: var(--text-muted); }

.cue-tile label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cue-tile .cue-last {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cue-tile .cue-change {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.cue-tile.up   .cue-change { color: var(--success); }

/* ============================================
   Trade Log (dashboard "/")
   ============================================ */
.trades-page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}
.trades-section {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.trades-section:first-of-type { border-top: none; padding-top: 0; }
.trades-section-header {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px;
}
.trades-section-header h2 {
  margin: 0; font-size: 13px; color: var(--text); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.trades-section-tag {
  font-size: 10.5px; color: var(--text-muted);
}

.trades-subhead {
  font-size: 12px; color: var(--text-muted); margin: 18px 0 8px 0;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}

/* Regime banner — Stage A v4 multifactor */
.regime-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(0,212,170,0.06); border: 1px solid rgba(0,212,170,0.20);
  border-radius: 6px; padding: 10px 16px; margin: 8px 0 16px 0;
  font-size: 12px;
}
.regime-banner.bear { background: rgba(255,94,122,0.08); border-color: rgba(255,94,122,0.25); }
.regime-banner.bull_choppy { background: rgba(255,200,80,0.08); border-color: rgba(255,200,80,0.25); }
.regime-label { color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; font-weight: 600; }
.regime-name { color: var(--text); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.regime-name.bull_strong { color: #00d4aa; }
.regime-name.bear { color: #ff5e7a; }
.regime-name.bull_choppy { color: #ffc850; }
.regime-detail { color: var(--text-muted); font-size: 11px; }
.regime-weights { margin-left: auto; color: var(--text-muted); font-size: 10px; font-family: monospace; }
.trades-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}
@media (max-width: 900px) {
  .trades-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.summary-card .label {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}
.summary-card .value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.2;
}
.summary-card .value.pnl-pos { color: var(--success); }
.summary-card .value.pnl-neg { color: var(--danger); }

.trades-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trades-refresh {
  background: var(--navy-700);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.trades-refresh:hover { background: var(--navy-600); }
.trades-updated { font-size: 12px; color: var(--text-muted); }

.trades-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* overflow-x: auto only when the table genuinely can't fit — column
     wrap (white-space: normal on cells) handles most cases first. The
     wrap container can still scroll if a row is exceptionally wide,
     but it won't push the WHOLE page into horizontal scroll. */
  overflow-x: auto;
  overflow-y: visible;
}
.trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  /* auto layout so columns size to their content — numeric cells stay
     on a single line instead of wrapping due to a fixed-width column
     squeeze. The .trades-table-wrap container handles horizontal
     scroll if the total table content exceeds the page width. */
  table-layout: auto;
}
.trades-table thead th {
  position: sticky;
  top: 0;
  /* Light-theme header — soft off-white band with muted label color. */
  background: var(--bg-soft);
  color: var(--text-muted);
  text-align: left;
  padding: 4px 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  /* Header labels can wrap at spaces (e.g. "Strike + Type") but no
     mid-word breaking so single tokens stay intact. */
  white-space: normal;
  line-height: 1.15;
  vertical-align: bottom;
  overflow-wrap: normal;
}
.trades-table th.num,
.trades-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trades-table tbody td {
  padding: 3px 7px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  /* Single line by default — keeps rows short. Long single-token
     values (kite tradingsymbols, exit reasons) don't break mid-word.
     Multi-line content is opted in via column-specific selectors
     below if needed. */
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
}
.trades-table tbody tr:hover { background: var(--bg-card-hover); }
.trades-table tbody tr[data-status="OPEN"] {
  background: rgba(0, 168, 134, 0.04);
}
.trades-empty td {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
}

/* Equity Tier D table — long Company / Sector names wrap to multi-line
   (everything else stays single-line for tight row height). */
#eq-active-tbody td:nth-child(4),
#eq-exited-tbody  td:nth-child(5),
#eq-active-tbody td:nth-child(5),
#eq-exited-tbody  td:nth-child(4) {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
  max-width: 200px;
}
/* Score column gets a subtle highlight so it pops out of the dense
   row — it's the strategy's headline number per pick. */
#eq-active-tbody td:nth-child(6),
#eq-exited-tbody  td:nth-child(6) {
  font-weight: 600;
  color: var(--text-primary);
}

.idx-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--navy-700);
  color: #fff;
  letter-spacing: 0.04em;
}
.idx-pill.idx-banknifty { background: #5b2d8a; }
.idx-pill.idx-nifty { background: #1f4f8a; }

.trade-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}
.trade-type.tt-call { background: rgba(0, 168, 134, 0.12); color: var(--success); }
.trade-type.tt-put  { background: rgba(220, 38, 38, 0.12);  color: var(--danger);  }

.trade-type + .strike {
  display: inline-block;
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* P/L color classes. Selectors carry an extra `td` qualifier (or
   `.value`) so they beat `.trades-table tbody td { color: ... }`
   on specificity — without this, the trades tables override the
   color to --text-primary and everything reads as plain text. */
.pnl-pos, td.pnl-pos, .value.pnl-pos { color: var(--success) !important; font-weight: 600; }
.pnl-neg, td.pnl-neg, .value.pnl-neg { color: var(--danger)  !important; font-weight: 600; }
/* Neutral P/L (exactly 0 or no signal) renders in the table's normal
   text color — user reads it as "no movement", not as "missing data". */
.pnl-zero, td.pnl-zero, .value.pnl-zero { color: var(--text-primary) !important; }

/* Totals row — last <tr> in each trades table. Top border separates
   the data block from the aggregate; bold label cell reads as a
   footer. The P/L cells reuse .pnl-pos / .pnl-neg / .pnl-zero so the
   total picks up the same green/red/neutral color as the data rows. */
.trades-totals {
  background: rgba(127, 127, 127, 0.06);
  border-top: 2px solid var(--border);
}
.trades-totals td {
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
}
.trades-totals .totals-label {
  text-align: right;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
}

.comment {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(74, 85, 104, 0.08);
  color: var(--text-secondary);
}
.comment.status-open {
  background: rgba(0, 168, 134, 0.12);
  color: var(--success);
}

/* Position Status pill */
.pos-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pos-status.ps-hold   { background: rgba(0, 168, 134, 0.14);  color: var(--success); }
.pos-status.ps-profit { background: rgba(0, 168, 134, 0.20);  color: #007a62;        }
.pos-status.ps-sl     { background: rgba(220, 38, 38, 0.14);  color: var(--danger);  }
.pos-status.ps-exit   { background: rgba(217, 119, 6, 0.14);  color: var(--warning); }

/* ============================================
   Site-wide UI compaction (2026-05-14)
   ============================================
   Trims padding / font-sizes on admin tiles, summary cards, and
   tabular surfaces across the site so every page has the same dense,
   utility-first layout as the redesigned Trade Recommendations page.
   Inline `<style>` blocks in admin templates set their own padding;
   we override with `!important` rather than editing every template. */

/* Tiles / summary cards used across admin and equity pages. */
.ra-tile,
.eq-summary-card,
.ed-stat,
.eb-stat,
.qr-stat,
.pp-stat,
.pt-stat {
  padding: 6px 10px !important;
  border-radius: 6px !important;
}
.ra-tile .label,
.eq-summary-card .label,
.ed-stat .label,
.eb-stat .label,
.qr-stat .label,
.pp-stat .label,
.pt-stat .label {
  font-size: 9.5px !important;
  letter-spacing: 0.04em !important;
}
.ra-tile .value,
.eq-summary-card .value,
.ed-stat-value,
.eb-stat-value,
.qr-stat-value,
.pp-stat-value,
.pt-stat-value {
  font-size: 14px !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}
.ra-tile .sub,
.eq-summary-card .sub {
  font-size: 10px !important;
}

/* Section panels — generous padding shrunk to a tight, compact look. */
.ra-section,
.ed-section,
.eb-section,
.qr-section,
.pp-section,
.pt-section {
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
  border-radius: 8px !important;
}

/* Toolbars / control bars across admin pages. */
.eb-controls,
.eb-strategy-bar,
.qr-toolbar,
.eq-regime-bar {
  padding: 8px 12px !important;
}

/* Admin / equity table cells — same density as .trades-table. */
.ra-table thead th,
.ed-table thead th,
.eb-table thead th,
.qr-table thead th,
.pp-table thead th,
.pt-table thead th,
.eq-table thead th {
  padding: 4px 7px !important;
  font-size: 9px !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
}
.ra-table tbody td,
.ed-table tbody td,
.eb-table tbody td,
.qr-table tbody td,
.pp-table tbody td,
.pt-table tbody td,
.eq-table tbody td {
  padding: 3px 7px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Headers within admin pages — shrunk to match the new global h1/h2. */
.ra-header h1,
.ed-title-block h1,
.eb-header h1,
.qr-header h1,
.pp-header h1,
.pt-header h1,
.bt-header h1 {
  font-size: 18px !important;
}
.ra-section h2,
.ed-section h2,
.eb-section h2,
.qr-section h2,
.pp-section h2,
.pt-section h2 {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

/* Cue tiles on the indicators dashboard. */
.cue-tile {
  padding: 6px 10px !important;
}
.cue-tile label {
  font-size: 9.5px !important;
}
.cue-tile .cue-last {
  font-size: 13px !important;
}
.cue-tile .cue-change {
  font-size: 10.5px !important;
}

/* Quote panel — per-page header on /nifty-options, /banknifty-options. */
.quote-panel { margin-top: 4px; }
.quote-card { padding: 10px 14px !important; }
.cue-tile.down .cue-change { color: var(--danger); }

/* ============================================
   Reports — filter bar + coming-soon (2026-05-14)
   ============================================ */
.rpt-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.rpt-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.rpt-filter-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rpt-checks {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 2px;
}
.rpt-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.rpt-check input[type="checkbox"] {
  accent-color: var(--navy-700);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.rpt-date,
.rpt-select {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  min-width: 120px;
}
.rpt-date:focus,
.rpt-select:focus {
  outline: none;
  border-color: var(--navy-700);
}

/* Disclaimer banner on the Backtest Analysis report explaining the
   2026-05-10 cutover default. Amber/gold info pill — informational,
   not an error. */
.rpt-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(232, 197, 96, 0.10);
  border: 1px solid rgba(232, 197, 96, 0.40);
  border-left: 3px solid var(--gold-bright, #c8930b);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.rpt-disclaimer i {
  color: var(--gold-bright, #c8930b);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.rpt-disclaimer strong { color: var(--navy-800); }
.rpt-disclaimer a {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: underline;
}

/* Top+bottom summary band inside each report section. Slightly tighter
   than the dashboard's .trades-summary so the duplicated band doesn't
   bloat the page when rendered both above and below the table. */
.rpt-summary {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 6px 0 10px 0 !important;
}
.rpt-summary .summary-card {
  padding: 4px 8px !important;
}
.rpt-summary .summary-card .value {
  font-size: 13px !important;
}

/* Sandbox Backtest — run config card. Shows the selected sandbox run's
   ablation settings (regime gate, MFE giveback, etc.) plus its headline
   metrics in a compact horizontal strip. */
.rpt-config-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.rpt-config-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.rpt-config-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rpt-config-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpt-config-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.rpt-config-value.rpt-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--navy-700);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

/* Exit-label chips for the sandbox trades table. Green = winning exit,
   red = losing exit, amber = context/giveback exit. */
.label-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}
.label-chip.label-good {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}
.label-chip.label-bad {
  background: rgba(239, 68, 68, 0.13);
  color: #b91c1c;
}
.label-chip.label-neutral {
  background: rgba(245, 158, 11, 0.13);
  color: #92400e;
}

.rpt-coming-soon {
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  text-align: center;
  color: var(--text-muted);
}
.rpt-coming-soon i {
  font-size: 28px;
  color: var(--gold-bright, #c8930b);
  margin-bottom: 12px;
}
.rpt-coming-soon h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}
.rpt-coming-soon p {
  font-size: 13px;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto;
}

/* ============================================
   Dashboard (2026-05-14) — YTD overview page
   ============================================ */
.dash-year {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 8px;
  text-transform: none;
}

/* Overall KPI band — full width, 5 tiles */
.dash-overall-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.dash-overall-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-overall-card .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-overall-card .val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-900);
  line-height: 1.2;
}

/* Three-up category cards */
.dash-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) {
  .dash-categories { grid-template-columns: 1fr; }
  .dash-overall-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dash-cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dash-cat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.dash-cat-header h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-800);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.dash-cat-tag {
  font-size: 10.5px;
  color: var(--text-muted);
}
.dash-cat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.dash-tile {
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: center;
}
.dash-tile .lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-tile .val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.15;
}

.dash-chart-wrap {
  position: relative;
  height: 200px;
  padding: 4px 0;
}

/* Bottom comparative bar chart */
.dash-comparative {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.dash-comp-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.dash-comp-header h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-800);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.dash-comp-chart-wrap {
  position: relative;
  height: 280px;
}

/* ============================================
   Profile page (2026-05-14)
   ============================================ */
.profile-container {
  max-width: 720px;
  margin: 0 auto;
}
.profile-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}
.profile-banner-ok {
  background: rgba(0, 168, 134, 0.10);
  border: 1px solid rgba(0, 168, 134, 0.35);
  color: #047857;
}
.profile-banner-err {
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: var(--danger);
}
.profile-banner i { font-size: 14px; }

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profile-field input {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-field input:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.10);
}
.profile-field input:disabled {
  background: var(--bg-soft);
  color: var(--text-muted);
  cursor: not-allowed;
}
.profile-field input:invalid:not(:placeholder-shown) {
  border-color: rgba(220, 38, 38, 0.50);
}
.profile-hint {
  margin-top: 2px;
  font-style: italic;
}

.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.profile-btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.profile-btn-primary {
  background: var(--navy-700);
  color: #ffffff;
  border-color: var(--navy-700);
}
.profile-btn-primary:hover { background: var(--navy-800); }
.profile-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.profile-btn-secondary:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

/* Account-status metadata card below the form */
.profile-meta {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
}
.profile-meta h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-800);
  margin: 0 0 10px 0;
}
.profile-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.profile-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.profile-meta-row:last-child { border-bottom: none; }
.profile-meta-row .meta-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-meta-row .meta-val {
  font-size: 12.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Pill badges */
.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-pill i { font-size: 10px; }
.profile-pill.pill-ok {
  background: rgba(0, 168, 134, 0.12);
  color: #047857;
}
.profile-pill.pill-warn {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}
.profile-pill.pill-muted {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-secondary);
}
.profile-pill.pill-active {
  background: rgba(0, 168, 134, 0.12);
  color: #047857;
}
.profile-pill.pill-pending_email,
.profile-pill.pill-pending_phone {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}
.profile-pill.pill-suspended,
.profile-pill.pill-deleted {
  background: rgba(220, 38, 38, 0.14);
  color: var(--danger);
}
.profile-pill.pill-admin {
  background: linear-gradient(90deg, rgba(232, 197, 96, 0.18), rgba(232, 197, 96, 0.08));
  border: 1px solid rgba(232, 197, 96, 0.40);
  color: var(--gold-bright, #c8930b);
}

/* "Sample sizing" disclosure — sits above equity tables and explains
   the ₹1L-per-pick notional convention so subscribers know how the
   Quantity / ₹ P&L numbers were derived. */
.eq-basis-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(30, 58, 138, 0.06);
  border: 1px solid rgba(30, 58, 138, 0.18);
  border-left: 3px solid var(--navy-700);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 10px 0 14px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.eq-basis-note i {
  color: var(--navy-700);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.eq-basis-note strong { color: var(--navy-800); font-weight: 600; }

/* Subscription status banner — top of profile page */
.sub-banner {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.sub-banner-active {
  background: linear-gradient(90deg, rgba(0, 168, 134, 0.10), rgba(0, 168, 134, 0.03));
  border-color: rgba(0, 168, 134, 0.30);
}
.sub-banner-inactive {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.02));
  border-color: rgba(220, 38, 38, 0.25);
}
.sub-banner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: flex-start;
}
.sub-banner-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sub-banner-cell.sub-banner-note {
  margin-left: auto;
  text-align: right;
}
.sub-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sub-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sub-pill i { font-size: 11px; }
.sub-pill-active {
  background: rgba(0, 168, 134, 0.14);
  color: #047857;
}
.sub-pill-inactive {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger);
}

/* Change-password page — inline field errors + tips card */
.cp-has-error input {
  border-color: rgba(220, 38, 38, 0.50) !important;
}
.cp-field-error {
  display: block;
  margin-top: 4px;
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 500;
}
.cp-tips {
  margin-top: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-bright, #c8930b);
  border-radius: 8px;
  padding: 12px 16px;
}
.cp-tips h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-800);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-tips h2 i { color: var(--gold-bright, #c8930b); font-size: 12px; }
.cp-tips ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.7;
}