/* PoV Factory - Main Stylesheet */

:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    --sidebar-width: 280px;
    /* ✅ NEW: bounds for resizable sidebar */
    --sidebar-min-width: 240px;
    --sidebar-max-width: 460px;
    --transition-speed: 0.2s;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    line-height: 1.6;
}

/* Layout */
.container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width); /* ✅ NEW: lock sidebar width in flex layout */
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;    
}

/* Sidebar resize handle (desktop) */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;
    background: transparent;
}

.sidebar-resize-handle:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.sidebar-resizing {
    user-select: none;
    cursor: col-resize;
}

/* Mobile: keep as-is */
@media (max-width: 860px) {
    .sidebar-resize-handle {
        display: none;
    }
}


.logo {
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.logo h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.nav-menu {
    flex: 1;
    padding: 1.5rem;
}

.nav-menu h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.nav-hint {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
}

.nav-link {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-speed);
    cursor: pointer;
}

.nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Main Content */
.main-content {
    flex: 1 1 auto;
    min-width: 0; /* ✅ NEW: prevents overflow when sidebar grows */
    overflow-y: auto;
}

.input-section, .results-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

h1 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Forms */
.analysis-form {
    background-color: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.ticker-input, .model-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.ticker-input {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.ticker-input:focus, .model-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.input-hint {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* Buttons */
.btn-primary, .btn-secondary {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    width: 100%;
    justify-content: center;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

/* Status Messages */
.status-container {
    margin-top: 2rem;
    padding: 2rem;
    background-color: var(--bg-primary);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.status-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.progress-bar {
    height: 0.5rem;
    background-color: var(--bg-tertiary);
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
    width: 0%;
}

/* Error Messages */
.error-container {
    margin-top: 2rem;
}

.error-message {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.error-icon {
    font-size: 1.5rem;
}

.error-content strong {
    display: block;
    color: var(--error-color);
    margin-bottom: 0.25rem;
}

/* Results */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.results-section h1 {
    color: var(--primary-color);
}

.section-card {
    background-color: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.section-card h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.section-card h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.metric-card {
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border-radius: 0.5rem;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
}

tr:hover {
    background-color: var(--bg-secondary);
}

ul, ol {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    
    .input-section, .results-section {
        padding: 2rem 1rem;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .metric-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Desktop/Laptop: one consistent centered content rail
   (NO changes to mobile)
   ========================================================= */
@media (min-width: 769px) {
  :root { --content-max: 1400px; } /* try 1200–1600 */

  /* Make the main sections wider but still centered */
  .input-section, .results-section {
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
  }

  /* Ensure ALL major blocks align to the same left/right edges */
  .analysis-form,
  .status-container,
  .error-container,
  .results-header,
  #resultsContent {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep form card centered (prevents the misalignment you saw) */
  .analysis-form {
    width: 100%;
  }
}
/* =========================================================
   Dark Mode (minimal, token-based, non-regressive)
   ========================================================= */
html[data-theme="dark"] {
  --bg-primary: #0f172a;      /* panels/cards */
  --bg-secondary: #0b1220;    /* page background */
  --bg-tertiary: #111c33;     /* subtle surfaces (tables/metrics) */

  --text-primary: #e5e7eb;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;

  --border-color: #1f2a44;

  --primary-color: #60a5fa;
  --primary-hover: #3b82f6;

  /* Optional: shadows feel too heavy in dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
  /* helper vars */
  --dm-text: #e5e7eb;
  --dm-border: rgba(255,255,255,0.12);
}

/* =========================================================
   Dark Mode: Fix remaining font contrast issues (mobile-safe)
   Append to END of style.css
   ========================================================= */

/* ---------- 0) Global safety: any inline 'color:#111827' etc won't follow tokens.
   We DO NOT blanket override everything. We only fix known problematic areas. ---------- */

/* ---------- 1) Interpretation Guide / How-to-read info boxes ---------- */
html[data-theme="dark"] .interpretation-guide,
html[data-theme="dark"] .how-to-read,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .guide-box,
html[data-theme="dark"] .interpretation-box {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* Ensure child text is readable (bullets, spans, small text) */
html[data-theme="dark"] .interpretation-guide *,
html[data-theme="dark"] .how-to-read *,
html[data-theme="dark"] .info-box *,
html[data-theme="dark"] .guide-box *,
html[data-theme="dark"] .interpretation-box * {
  color: var(--text-primary) !important;
}

/* If you intentionally have muted hints inside those boxes */
html[data-theme="dark"] .interpretation-guide .muted,
html[data-theme="dark"] .how-to-read .muted,
html[data-theme="dark"] .info-box .muted {
  color: var(--text-secondary) !important;
}

/* ---------- 2) Adjacent Market section: headings, bullets, accordion/details bodies ---------- */
/* Targets common wrappers used by your renderers: section-card + details/summary */
html[data-theme="dark"] .section-card {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Adjacent opportunities often use <details><summary> and nested divs */
html[data-theme="dark"] .section-card details,
html[data-theme="dark"] .section-card summary,
html[data-theme="dark"] .section-card p,
html[data-theme="dark"] .section-card li,
html[data-theme="dark"] .section-card small,
html[data-theme="dark"] .section-card span,
html[data-theme="dark"] .section-card strong,
html[data-theme="dark"] .section-card h2,
html[data-theme="dark"] .section-card h3,
html[data-theme="dark"] .section-card h4 {
  color: var(--text-primary);
}

/* Muted copy inside adjacent market blocks (e.g., "Adjacency type", "Leverage") */
html[data-theme="dark"] .section-card .subtitle,
html[data-theme="dark"] .section-card .description,
html[data-theme="dark"] .section-card .input-hint,
html[data-theme="dark"] .section-card .nav-hint {
  color: var(--text-secondary);
}

/* Key Trends bullets were appearing too faint in dark mode */
html[data-theme="dark"] .section-card ul li {
  color: var(--text-secondary);
}

/* Accordion panels in adjacent market section that use very light gray backgrounds */
html[data-theme="dark"] .section-card details > div,
html[data-theme="dark"] .section-card details[open] > div,
html[data-theme="dark"] .section-card .accordion,
html[data-theme="dark"] .section-card .accordion-body {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* ---------- 3) Comparison table: company row + general table readability ---------- */
/* Your base table styles come from global table/th/td rules; override only in dark mode */
html[data-theme="dark"] table {
  color: var(--text-primary);
}

html[data-theme="dark"] th {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] td {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* Row hover should not wash out text */
html[data-theme="dark"] tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* The "company row" is often specially shaded; ensure its text is not white-on-white or gray-on-gray.
   This catches common patterns where first row gets a light bg or inline color. */
html[data-theme="dark"] tr.company-row,
html[data-theme="dark"] tr.highlight,
html[data-theme="dark"] tr.is-company,
html[data-theme="dark"] tr[aria-current="true"] {
  background: rgba(96, 165, 250, 0.10) !important; /* subtle blue tint */
}

html[data-theme="dark"] tr.company-row td,
html[data-theme="dark"] tr.highlight td,
html[data-theme="dark"] tr.is-company td,
html[data-theme="dark"] tr[aria-current="true"] td {
  color: var(--text-primary) !important;
}

/* If your company row uses a special first-cell style / bold label */
html[data-theme="dark"] tr.company-row td:first-child,
html[data-theme="dark"] tr.highlight td:first-child,
html[data-theme="dark"] tr.is-company td:first-child {
  color: var(--text-primary) !important;
  font-weight: 700;
}

/* If some cells are explicitly "N/A" or muted */
html[data-theme="dark"] td.na,
html[data-theme="dark"] td.muted,
html[data-theme="dark"] .cell-muted {
  color: var(--text-secondary) !important;
}

/* ---------- 4) Last-resort targeted bridge for inline styles inside resultsContent ---------- */
/* Only apply in dark mode AND only inside results content to avoid messing with input form */
html[data-theme="dark"] #resultsContent [style*="color:#111827"],
html[data-theme="dark"] #resultsContent [style*="color: #111827"],
html[data-theme="dark"] #resultsContent [style*="color:#1f2937"],
html[data-theme="dark"] #resultsContent [style*="color: #1f2937"],
html[data-theme="dark"] #resultsContent [style*="color:#374151"],
html[data-theme="dark"] #resultsContent [style*="color: #374151"],
html[data-theme="dark"] #resultsContent [style*="color:#475569"],
html[data-theme="dark"] #resultsContent [style*="color: #475569"] {
  color: var(--text-primary) !important;
}
/* =========================================================
   Dark Mode: fix inline light panels inside resultsContent
   (minimal, scoped, non-regressive)
   ========================================================= */

/* Any element in resultsContent that is explicitly painted light by inline styles */
html[data-theme="dark"] #resultsContent [style*="background-color: #f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color: #ffffff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background: #ffffff"],
html[data-theme="dark"] #resultsContent [style*="background:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background: #f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background:#f8fafc"] {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* And make sure nested text is readable */
html[data-theme="dark"] #resultsContent [style*="background-color: #f8fafc"] *,
html[data-theme="dark"] #resultsContent [style*="background-color:#f8fafc"] *,
html[data-theme="dark"] #resultsContent [style*="background-color: #ffffff"] *,
html[data-theme="dark"] #resultsContent [style*="background-color:#ffffff"] *,
html[data-theme="dark"] #resultsContent [style*="background: #ffffff"] *,
html[data-theme="dark"] #resultsContent [style*="background:#ffffff"] *,
html[data-theme="dark"] #resultsContent [style*="background: #f8fafc"] *,
html[data-theme="dark"] #resultsContent [style*="background:#f8fafc"] * {
  color: var(--text-primary) !important;
}
/* =========================================================
   Dark Mode: Adjacent Markets inline-style override (exact)
   Scoped to resultsContent only
   ========================================================= */

/* Outer adjacent-market card */
html[data-theme="dark"] #resultsContent [style*="background-color: #fafafa"],
html[data-theme="dark"] #resultsContent [style*="background-color:#fafafa"] {
  background: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Details panels inside adjacent markets (these are #f8fafc / #ffffff inline) */
html[data-theme="dark"] #resultsContent details[style*="background: #f8fafc"],
html[data-theme="dark"] #resultsContent details[style*="background:#f8fafc"],
html[data-theme="dark"] #resultsContent details[style*="background: #ffffff"],
html[data-theme="dark"] #resultsContent details[style*="background:#ffffff"] {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Borders in those details blocks */
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] #resultsContent [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] #resultsContent [style*="border: 2px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border:2px solid #e5e7eb"] {
  border-color: var(--border-color) !important;
}

/* Inline text colors used throughout this block */
html[data-theme="dark"] #resultsContent [style*="color: #1f2937"],
html[data-theme="dark"] #resultsContent [style*="color:#1f2937"],
html[data-theme="dark"] #resultsContent [style*="color: #475569"],
html[data-theme="dark"] #resultsContent [style*="color:#475569"],
html[data-theme="dark"] #resultsContent [style*="color: #334155"],
html[data-theme="dark"] #resultsContent [style*="color:#334155"] {
  color: var(--text-primary) !important;
}

/* Blue header in BUILD vs BUY vs PARTNER (keep it blue but readable) */
html[data-theme="dark"] #resultsContent [style*="color: #1e40af"],
html[data-theme="dark"] #resultsContent [style*="color:#1e40af"] {
  color: var(--primary-color) !important;
}

/* Ensure headings inside the outer card are readable */
html[data-theme="dark"] #resultsContent h3[style*="color: #1f2937"],
html[data-theme="dark"] #resultsContent h3[style*="color:#1f2937"] {
  color: var(--text-primary) !important;
}

/* "Adjacent to / Adjacency type / Leverage" block */
html[data-theme="dark"] #resultsContent [style*="color:#475569"] strong,
html[data-theme="dark"] #resultsContent [style*="color: #475569"] strong {
  color: var(--text-primary) !important;
}
/* =========================================================
   Dark Mode: FORCE override inline hex styles inside results
   (Fixes white boxes / faint text / SVG white panels)
   Scoped to #resultsContent only (non-regressive)
   ========================================================= */

html[data-theme="dark"] #resultsContent {
  color: var(--text-primary);
}

/* ---------- A) Inline text colors used by renderer ---------- */
html[data-theme="dark"] #resultsContent [style*="color:#111827"],
html[data-theme="dark"] #resultsContent [style*="color: #111827"],
html[data-theme="dark"] #resultsContent [style*="color:#1f2937"],
html[data-theme="dark"] #resultsContent [style*="color: #1f2937"],
html[data-theme="dark"] #resultsContent [style*="color:#334155"],
html[data-theme="dark"] #resultsContent [style*="color: #334155"],
html[data-theme="dark"] #resultsContent [style*="color:#374151"],
html[data-theme="dark"] #resultsContent [style*="color: #374151"],
html[data-theme="dark"] #resultsContent [style*="color:#475569"],
html[data-theme="dark"] #resultsContent [style*="color: #475569"],
html[data-theme="dark"] #resultsContent [style*="color:#64748b"],
html[data-theme="dark"] #resultsContent [style*="color: #64748b"] {
  color: var(--text-primary) !important;
}

/* Keep “muted” inline hints readable but softer */
html[data-theme="dark"] #resultsContent [style*="color:#64748b"],
html[data-theme="dark"] #resultsContent [style*="color: #64748b"] {
  color: var(--text-secondary) !important;
}

/* ---------- B) Inline light backgrounds used by renderer ---------- */
html[data-theme="dark"] #resultsContent [style*="background:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background: #ffffff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background-color: #ffffff"] {
  background: var(--bg-primary) !important;
}

html[data-theme="dark"] #resultsContent [style*="background:#fafafa"],
html[data-theme="dark"] #resultsContent [style*="background: #fafafa"],
html[data-theme="dark"] #resultsContent [style*="background-color:#fafafa"],
html[data-theme="dark"] #resultsContent [style*="background-color: #fafafa"],
html[data-theme="dark"] #resultsContent [style*="background:#f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background: #f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color: #f8fafc"] {
  background: var(--bg-secondary) !important;
}

/* “Company row” / highlight row background (#f0f9ff) */
html[data-theme="dark"] #resultsContent tr[style*="background:#f0f9ff"],
html[data-theme="dark"] #resultsContent tr[style*="background: #f0f9ff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f0f9ff"],
html[data-theme="dark"] #resultsContent [style*="background-color: #f0f9ff"] {
  background: rgba(96,165,250,0.10) !important;
}

/* ---------- C) Inline borders used by renderer ---------- */
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] #resultsContent [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border: 2px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border:2px solid #e5e7eb"] {
  border-color: var(--border-color) !important;
}

/* Border-top separators in “Products Today” table */
html[data-theme="dark"] #resultsContent [style*="border-top:1px solid #f3f4f6"],
html[data-theme="dark"] #resultsContent [style*="border-top: 1px solid #f3f4f6"] {
  border-top-color: var(--border-color) !important;
}

/* ---------- D) “Interpretation Guide” + “How to read” boxes (no classes, inline bg) ---------- */
html[data-theme="dark"] #resultsContent h4,
html[data-theme="dark"] #resultsContent p,
html[data-theme="dark"] #resultsContent li,
html[data-theme="dark"] #resultsContent strong {
  color: inherit;
}

/* ---------- E) Bubble chart SVG white background + axis labels ---------- */
/* SVG has inline background-color: rgb(255, 255, 255) */
html[data-theme="dark"] #resultsContent svg[style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] #resultsContent svg[style*="background-color:rgb(255, 255, 255)"] {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

/* Axis label fills are inline (#475569); force readable */
html[data-theme="dark"] #resultsContent svg text[fill="#475569"],
html[data-theme="dark"] #resultsContent svg text[fill="#64748b"] {
  fill: var(--text-secondary) !important;
}

/* Axis/grid strokes are inline; soften for dark */
html[data-theme="dark"] #resultsContent svg line[stroke="#cbd5e1"] {
  stroke: rgba(203,213,225,0.25) !important;
}
html[data-theme="dark"] #resultsContent svg line[stroke="#64748b"] {
  stroke: rgba(203,213,225,0.45) !important;
}

/* ---------- F) Heatmap “How to read” list explicitly sets color:#334155 ---------- */
html[data-theme="dark"] #resultsContent ul[style*="color:#334155"],
html[data-theme="dark"] #resultsContent ul[style*="color: #334155"] {
  color: var(--text-secondary) !important;
}
/* ============================================================
   POV Factory — Dark Mode hard override for inline renderer DOM
   Scope: #resultsContent only (zero regression)
   ============================================================ */

html[data-theme="dark"] #resultsContent {
  color: var(--text-primary);
}

/* ---------- TEXT COLORS (inline hex) ---------- */

html[data-theme="dark"] #resultsContent [style*="color:#111827"],
html[data-theme="dark"] #resultsContent [style*="color:#1f2937"],
html[data-theme="dark"] #resultsContent [style*="color:#334155"],
html[data-theme="dark"] #resultsContent [style*="color:#374151"],
html[data-theme="dark"] #resultsContent [style*="color:#475569"] {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] #resultsContent [style*="color:#64748b"] {
  color: var(--text-secondary) !important;
}

/* ---------- WHITE / LIGHT BACKGROUNDS ---------- */

html[data-theme="dark"] #resultsContent [style*="background:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background: #ffffff"],
html[data-theme="dark"] #resultsContent [style*="background:#fafafa"],
html[data-theme="dark"] #resultsContent [style*="background:#f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#fafafa"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f8fafc"] {
  background: var(--bg-secondary) !important;
}

/* Pale blue highlight rows / cards */
html[data-theme="dark"] #resultsContent [style*="background:#f0f9ff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f0f9ff"] {
  background: rgba(96,165,250,0.12) !important;
}

/* ---------- BORDERS ---------- */

html[data-theme="dark"] #resultsContent [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] #resultsContent [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border:2px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border: 2px solid #e5e7eb"] {
  border-color: var(--border-color) !important;
}

/* Table separators */
html[data-theme="dark"] #resultsContent [style*="border-top:1px solid #f3f4f6"],
html[data-theme="dark"] #resultsContent [style*="border-top: 1px solid #f3f4f6"] {
  border-top-color: var(--border-color) !important;
}

/* ---------- SVG BUBBLE CHART WHITE PANEL ---------- */

html[data-theme="dark"] #resultsContent svg[style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] #resultsContent svg[style*="background-color:rgb(255, 255, 255)"] {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

/* SVG axis labels */
html[data-theme="dark"] #resultsContent svg text[fill="#475569"],
html[data-theme="dark"] #resultsContent svg text[fill="#64748b"] {
  fill: var(--text-secondary) !important;
}

/* SVG grid */
html[data-theme="dark"] #resultsContent svg line[stroke="#cbd5e1"] {
  stroke: rgba(203,213,225,0.25) !important;
}

html[data-theme="dark"] #resultsContent svg line[stroke="#64748b"] {
  stroke: rgba(203,213,225,0.45) !important;
}

/* ---------- TABLE HEADERS ---------- */

html[data-theme="dark"] #resultsContent th {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* ---------- DETAILS / DRAWERS ---------- */

html[data-theme="dark"] #resultsContent details {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] #resultsContent summary {
  color: var(--text-primary) !important;
}
/* =========================
   Dark mode hard override
   Scope: resultsContent only
   Fixes: heatmap + roadmap drawers/cards
   ========================= */

/* Use whichever you already have (keep all 3 if unsure) */
html[data-theme="dark"] #resultsContent,
body.dark-mode #resultsContent,
.dark #resultsContent {
  --dm-bg: #0b1220;
  --dm-card: #0f172a;
  --dm-card-2: #111c33;
  --dm-border: #22314a;
  --dm-text: #e5e7eb;
  --dm-muted: #a6b0c3;

  --dm-heat-yellow: #2a2d18; /* replaces #fef9c3 */
  --dm-heat-green:  #103022; /* replaces #dcfce7 */
  --dm-heat-red:    #351618; /* if you ever use red cells */
}

/* 1) Force “white cards” inside results to dark, even if inline */
html[data-theme="dark"] #resultsContent [style*="background: #ffffff"],
html[data-theme="dark"] #resultsContent [style*="background:#ffffff"],
html[data-theme="dark"] #resultsContent [style*="background-color: #ffffff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#ffffff"],
body.dark-mode #resultsContent [style*="background: #ffffff"],
body.dark-mode #resultsContent [style*="background:#ffffff"],
.dark #resultsContent [style*="background: #ffffff"],
.dark #resultsContent [style*="background:#ffffff"] {
  background: var(--dm-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* 2) Kill “light panel” blocks (#f8fafc / #f0f9ff) inside results */
html[data-theme="dark"] #resultsContent [style*="background: #f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background:#f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color: #f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f8fafc"],
html[data-theme="dark"] #resultsContent [style*="background: #f0f9ff"],
html[data-theme="dark"] #resultsContent [style*="background:#f0f9ff"],
html[data-theme="dark"] #resultsContent [style*="background-color: #f0f9ff"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f0f9ff"],
body.dark-mode #resultsContent [style*="background:#f8fafc"],
body.dark-mode #resultsContent [style*="background:#f0f9ff"],
.dark #resultsContent [style*="background:#f8fafc"],
.dark #resultsContent [style*="background:#f0f9ff"] {
  background: var(--dm-card-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* 3) Heatmap cell background overrides (inline bg-color wins unless !important) */
html[data-theme="dark"] #resultsContent td[style*="background-color:#fef9c3"],
html[data-theme="dark"] #resultsContent td[style*="background-color: #fef9c3"],
body.dark-mode #resultsContent td[style*="background-color:#fef9c3"],
.dark #resultsContent td[style*="background-color:#fef9c3"] {
  background-color: var(--dm-heat-yellow) !important;
}

html[data-theme="dark"] #resultsContent td[style*="background-color:#dcfce7"],
html[data-theme="dark"] #resultsContent td[style*="background-color: #dcfce7"],
body.dark-mode #resultsContent td[style*="background-color:#dcfce7"],
.dark #resultsContent td[style*="background-color:#dcfce7"] {
  background-color: var(--dm-heat-green) !important;
}

/* If you use red heat cells anywhere */
html[data-theme="dark"] #resultsContent td[style*="background-color:#fee2e2"],
body.dark-mode #resultsContent td[style*="background-color:#fee2e2"],
.dark #resultsContent td[style*="background-color:#fee2e2"] {
  background-color: var(--dm-heat-red) !important;
}

/* 4) Heatmap + roadmap text colors (inline #111827/#334155/#475569 must be overridden) */
html[data-theme="dark"] #resultsContent td,
html[data-theme="dark"] #resultsContent th,
html[data-theme="dark"] #resultsContent p,
html[data-theme="dark"] #resultsContent li,
html[data-theme="dark"] #resultsContent div,
body.dark-mode #resultsContent td,
body.dark-mode #resultsContent th,
body.dark-mode #resultsContent p,
body.dark-mode #resultsContent li,
body.dark-mode #resultsContent div,
.dark #resultsContent td,
.dark #resultsContent th,
.dark #resultsContent p,
.dark #resultsContent li,
.dark #resultsContent div {
  color: var(--dm-text);
}

html[data-theme="dark"] #resultsContent [style*="color:#111827"],
html[data-theme="dark"] #resultsContent [style*="color: #111827"],
html[data-theme="dark"] #resultsContent [style*="color:#334155"],
html[data-theme="dark"] #resultsContent [style*="color: #334155"],
html[data-theme="dark"] #resultsContent [style*="color:#475569"],
html[data-theme="dark"] #resultsContent [style*="color: #475569"],
html[data-theme="dark"] #resultsContent [style*="color:#64748b"],
html[data-theme="dark"] #resultsContent [style*="color: #64748b"],
body.dark-mode #resultsContent [style*="color:#111827"],
body.dark-mode #resultsContent [style*="color:#334155"],
body.dark-mode #resultsContent [style*="color:#475569"],
body.dark-mode #resultsContent [style*="color:#64748b"],
.dark #resultsContent [style*="color:#111827"],
.dark #resultsContent [style*="color:#334155"],
.dark #resultsContent [style*="color:#475569"],
.dark #resultsContent [style*="color:#64748b"] {
  color: var(--dm-text) !important;
}

/* Muted helper text */
html[data-theme="dark"] #resultsContent .metric-label,
body.dark-mode #resultsContent .metric-label,
.dark #resultsContent .metric-label {
  color: var(--dm-muted) !important;
}

/* 5) Tables in dark mode */
html[data-theme="dark"] #resultsContent table,
body.dark-mode #resultsContent table,
.dark #resultsContent table {
  background: transparent !important;
}

html[data-theme="dark"] #resultsContent thead th,
body.dark-mode #resultsContent thead th,
.dark #resultsContent thead th {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--dm-border) !important;
}

html[data-theme="dark"] #resultsContent td,
body.dark-mode #resultsContent td,
.dark #resultsContent td {
  border-color: var(--dm-border) !important;
}

/* 6) Details drawers */
html[data-theme="dark"] #resultsContent details,
body.dark-mode #resultsContent details,
.dark #resultsContent details {
  background: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
}

html[data-theme="dark"] #resultsContent summary,
body.dark-mode #resultsContent summary,
.dark #resultsContent summary {
  color: var(--dm-text) !important;
}

/* 7) Bubble chart SVG container background */
html[data-theme="dark"] #resultsContent svg[style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] #resultsContent svg[style*="background-color:rgb(255, 255, 255)"],
body.dark-mode #resultsContent svg[style*="background-color: rgb(255, 255, 255)"],
.dark #resultsContent svg[style*="background-color: rgb(255, 255, 255)"] {
  background-color: transparent !important;
  border-color: var(--dm-border) !important;
}
/* =========================
   Dark mode fix: Roadmap drawer inner table (products today)
   (targets inline #f9fafb/#f3f4f6/#374151/#1f2937 etc)
   ========================= */

html[data-theme="dark"] #resultsContent [style*="background:#f9fafb"],
html[data-theme="dark"] #resultsContent [style*="background: #f9fafb"],
html[data-theme="dark"] #resultsContent [style*="background-color:#f9fafb"],
html[data-theme="dark"] #resultsContent [style*="background-color: #f9fafb"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--dm-text) !important;
}

/* Body text colors used inside roadmap drawer table */
html[data-theme="dark"] #resultsContent [style*="color:#374151"],
html[data-theme="dark"] #resultsContent [style*="color: #374151"],
html[data-theme="dark"] #resultsContent [style*="color:#1f2937"],
html[data-theme="dark"] #resultsContent [style*="color: #1f2937"] {
  color: var(--dm-text) !important;
}

/* Border colors used by the drawer table rows/wrappers */
html[data-theme="dark"] #resultsContent [style*="border-top:1px solid #f3f4f6"],
html[data-theme="dark"] #resultsContent [style*="border-top: 1px solid #f3f4f6"],
html[data-theme="dark"] #resultsContent [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent [style*="border:1px solid #f3f4f6"],
html[data-theme="dark"] #resultsContent [style*="border: 1px solid #f3f4f6"] {
  border-color: var(--dm-border) !important;
}
/* =========================================================
   Dark mode: Product & R&D Roadmap drawer (inline styles)
   Fixes: details bg, table wrapper bg, header bg, text colors
   ========================================================= */

html[data-theme="dark"] #resultsContent details[style*="background:#ffffff"],
html[data-theme="dark"] #resultsContent details[style*="background: #ffffff"],
html[data-theme="dark"] #resultsContent details[style*="background:#fff"],
html[data-theme="dark"] #resultsContent details[style*="background: #fff"] {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* The inner "Products Today" wrapper that is background:#fff */
html[data-theme="dark"] #resultsContent details div[style*="background:#fff"],
html[data-theme="dark"] #resultsContent details div[style*="background: #fff"],
html[data-theme="dark"] #resultsContent details div[style*="background:#ffffff"],
html[data-theme="dark"] #resultsContent details div[style*="background: #ffffff"] {
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* Table/header should not force light mode colors */
html[data-theme="dark"] #resultsContent details thead tr[style*="background:#f9fafb"],
html[data-theme="dark"] #resultsContent details thead tr[style*="background: #f9fafb"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--dm-text) !important;
}

html[data-theme="dark"] #resultsContent details th,
html[data-theme="dark"] #resultsContent details td,
html[data-theme="dark"] #resultsContent details table {
  background: transparent !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* Inline light-mode text colors used inside the drawer */
html[data-theme="dark"] #resultsContent details [style*="color:#111827"],
html[data-theme="dark"] #resultsContent details [style*="color: #111827"],
html[data-theme="dark"] #resultsContent details [style*="color:#374151"],
html[data-theme="dark"] #resultsContent details [style*="color: #374151"],
html[data-theme="dark"] #resultsContent details [style*="color:#64748b"],
html[data-theme="dark"] #resultsContent details [style*="color: #64748b"] {
  color: var(--dm-text) !important;
}

/* Inline light borders inside the drawer */
html[data-theme="dark"] #resultsContent details [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent details [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] #resultsContent details [style*="border-top:1px solid #f3f4f6"],
html[data-theme="dark"] #resultsContent details [style*="border-top: 1px solid #f3f4f6"] {
  border-color: var(--dm-border) !important;
}
/* =========================================================
   Sidebar inner wrapper + responsive safety
   (safe to append at end of style.css)
   ========================================================= */

.sidebar {
  width: var(--sidebar-width);
  max-width: 86vw;
  flex: 0 0 var(--sidebar-width);
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  overflow-x: hidden;
}

.sidebar-inner {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  gap: 14px;
  position: relative; /* ✅ NEW: anchor for resize handle */
}

.sidebar-footer {
  margin-top: auto;
}

/* ===== Mobile stacking ===== */
@media (max-width: 860px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .sidebar-inner {
    height: auto;
  }
}
main, .main, .content, .right-panel, .results-section {
  min-width: 0;
}
/* =========================================================
   Dark mode fixes (scoped, non-regressive)
   1) Analysis Failed card readability
   2) Investment Thesis "THE PITCH" card readability
   ========================================================= */

html[data-theme="dark"] .error-message {
  /* replaces light-mode pink bg that looks washed / unreadable on dark */
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
}

html[data-theme="dark"] .error-message,
html[data-theme="dark"] .error-message * {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .error-content strong {
  /* keep the “Analysis Failed” heading visually distinct */
  color: #fca5a5 !important;
}

/* ---------- Investment Thesis: THE PITCH card ---------- */
/* Your renderer likely uses a light yellow/cream background inline; override it only in results */
html[data-theme="dark"] #resultsContent [style*="background-color:#fef3c7"],
html[data-theme="dark"] #resultsContent [style*="background-color: #fef3c7"],
html[data-theme="dark"] #resultsContent [style*="background:#fef3c7"],
html[data-theme="dark"] #resultsContent [style*="background: #fef3c7"],
html[data-theme="dark"] #resultsContent [style*="background-color:#fffbeb"],
html[data-theme="dark"] #resultsContent [style*="background-color: #fffbeb"],
html[data-theme="dark"] #resultsContent [style*="background:#fffbeb"],
html[data-theme="dark"] #resultsContent [style*="background: #fffbeb"] {
  background: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] #resultsContent [style*="background-color:#fef3c7"] *,
html[data-theme="dark"] #resultsContent [style*="background-color: #fef3c7"] *,
html[data-theme="dark"] #resultsContent [style*="background:#fef3c7"] *,
html[data-theme="dark"] #resultsContent [style*="background: #fef3c7"] *,
html[data-theme="dark"] #resultsContent [style*="background-color:#fffbeb"] *,
html[data-theme="dark"] #resultsContent [style*="background-color: #fffbeb"] *,
html[data-theme="dark"] #resultsContent [style*="background:#fffbeb"] *,
html[data-theme="dark"] #resultsContent [style*="background: #fffbeb"] * {
  color: var(--text-primary) !important;
}

/* If THE PITCH heading uses orange/brown inline color, keep it readable */
html[data-theme="dark"] #resultsContent [style*="color:#92400e"],
html[data-theme="dark"] #resultsContent [style*="color: #92400e"],
html[data-theme="dark"] #resultsContent [style*="color:#9a3412"],
html[data-theme="dark"] #resultsContent [style*="color: #9a3412"] {
  color: #fdba74 !important; /* warm accent, readable on dark */
}