/*
 * Site-level fixes for the pages built by the tool repos.
 *
 * Injected after each tool's own stylesheet (scripts/assemble.mjs, inject),
 * with <html data-rai-module="..."> set so every rule here is scoped to one
 * module. The tool repos themselves stay untouched: everything that makes
 * them fit the RitchAI shell — background, font, the light theme — lives here.
 */

/* ── Macro ───────────────────────────────────────────────────────────────── */

/* The macro build declares its colours on .viz-root only, so <body> fell back
   to a light page colour and showed as white bands beside the dark dashboard.
   The body now follows the same theme as the dashboard, edge to edge. */
html[data-rai-module="macro"],
html[data-rai-module="macro"] body { background: #0d0d0d; }

html[data-rai-module="macro"][data-theme="light"],
html[data-rai-module="macro"][data-theme="light"] body { background: #f9f9f7; }

html[data-rai-module="macro"] .viz-root {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 1320px;
  padding-left: 32px;
  padding-right: 32px;
}

html[data-rai-module="macro"] h1 { font-family: 'Space Grotesk', 'Inter', sans-serif; }

@media (max-width: 760px) {
  html[data-rai-module="macro"] .viz-root { padding-left: 16px; padding-right: 16px; }
  /* Its indicator cards ask for at least 390px each, wider than a phone once
     the page padding is taken off. */
  html[data-rai-module="macro"] .grid { grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); }
  html[data-rai-module="macro"] .card { min-width: 0; }
}

/* ── Inside Trader: light theme ──────────────────────────────────────────── */

/* Its stylesheet is dark-only, with the palette on :root. These selectors are
   more specific than :root, so they win without !important. */
html[data-rai-module="portfolio"][data-theme="light"] {
  color-scheme: light;
  --bg:         #F4F6F7;
  --bg-card:    #FFFFFF;
  --bg-input:   #EEF2F4;
  --border:     #DCE2E6;
  --text:       #0E1418;
  --text-muted: #56636E;
  --accent:     #4F46E5;
  --accent-dim: #6366F1;
  --buy:        #15803D;
  --sell:       #DC2626;
  --warn:       #B45309;
  --shadow:     0 2px 12px rgba(15, 30, 40, .1);
}

html[data-rai-module="portfolio"][data-theme="light"] .badge-politician        { background: #DBEAFE; color: #1D4ED8; }
html[data-rai-module="portfolio"][data-theme="light"] .badge-fund_manager      { background: #DCFCE7; color: #15803D; }
html[data-rai-module="portfolio"][data-theme="light"] .badge-corporate_insider { background: #FCE7F3; color: #BE185D; }
html[data-rai-module="portfolio"][data-theme="light"] .badge-estimate-small    { background: #FEF3C7; }
html[data-rai-module="portfolio"][data-theme="light"] .badge-exact-small       { background: #DCFCE7; }
html[data-rai-module="portfolio"][data-theme="light"] .estimate-banner         { background: #FFFBEB; color: #92400E; }

html[data-rai-module="portfolio"][data-theme="light"] .action-buy      { background: #DCFCE7; border-color: #86EFAC; }
html[data-rai-module="portfolio"][data-theme="light"] .action-sell     { background: #FEE2E2; border-color: #FCA5A5; }
html[data-rai-module="portfolio"][data-theme="light"] .action-exchange { background: #EDE9FE; color: #6D28D9; border-color: #C4B5FD; }
html[data-rai-module="portfolio"][data-theme="light"] .score-positive  { background: #DCFCE7; }
html[data-rai-module="portfolio"][data-theme="light"] .score-negative  { background: #FEE2E2; }

html[data-rai-module="portfolio"][data-theme="light"] .chip-pol,
html[data-rai-module="portfolio"][data-theme="light"] .cat-tag.cat-politician   { color: #1D4ED8; }
html[data-rai-module="portfolio"][data-theme="light"] .chip-fund,
html[data-rai-module="portfolio"][data-theme="light"] .cat-tag.cat-fund_manager { color: #15803D; }
html[data-rai-module="portfolio"][data-theme="light"] .chip-corp,
html[data-rai-module="portfolio"][data-theme="light"] .cat-tag.cat-corporate,
html[data-rai-module="portfolio"][data-theme="light"] .est-badge                { color: #B45309; }

html[data-rai-module="portfolio"][data-theme="light"] .detail-inner    { background: #F8FAFB; }
html[data-rai-module="portfolio"][data-theme="light"] .detail-table td { border-bottom-color: var(--border); }

/* The charts are drawn on <canvas> with colours fixed in charts.js, including
   light-grey labels that vanish on white. Their containers keep the dark card
   so the charts stay readable in the light theme. */
html[data-rai-module="portfolio"][data-theme="light"] .chart-wrap,
html[data-rai-module="portfolio"][data-theme="light"] .pie-wrap {
  background: #1A1D27;
  border-radius: 12px;
  padding: 12px;
}

/* ── Phones ──────────────────────────────────────────────────────────────── */

/*
 * Inside Trader was built for desktop. Its wide tables have an intrinsic
 * width (the trades table on a person page: ~760px), and because <body> is a
 * flex column, that width pushed the whole page out to ~790px on a 390px
 * phone, so the page had to be zoomed out or swiped sideways. Here the page
 * is held to the screen width and each table scrolls inside its own box.
 */
@media (max-width: 760px) {
  html[data-rai-module="portfolio"] body { overflow-x: hidden; }
  html[data-rai-module="portfolio"] .container { width: 100%; min-width: 0; padding: 1.25rem 1rem; }
  html[data-rai-module="portfolio"] .container * { min-width: 0; }

  html[data-rai-module="portfolio"] table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .82rem;
  }

  /* Its own section nav (People, Stocks, Overlap, ...): wrap instead of overflow. */
  html[data-rai-module="portfolio"] .navbar { position: static; flex-wrap: wrap; gap: .5rem; padding: .6rem 1rem; }
  html[data-rai-module="portfolio"] .nav-links { flex-wrap: wrap; gap: .3rem 1rem; }
  html[data-rai-module="portfolio"] .nav-links a { font-size: .85rem; }

  html[data-rai-module="portfolio"] .chart-header,
  html[data-rai-module="portfolio"] .pl-stats,
  html[data-rai-module="portfolio"] .person-header { flex-wrap: wrap; }
  html[data-rai-module="portfolio"] .pie-layout { grid-template-columns: 1fr; display: grid; }
  html[data-rai-module="portfolio"] .person-header [class*="badge"] { align-self: flex-start; width: fit-content; }
}