/* TradEdge — print stylesheet for eod.html
 *
 * Loaded via <link rel="stylesheet" href="print.css" media="print"> so
 * the rules only apply when the browser enters print mode (triggered
 * by the 📄 Export PDF button calling window.print()).
 *
 * The user picks "Save as PDF" in the browser's print dialog
 * destination dropdown to export — no third-party JS, no html2canvas,
 * no extension interference.
 */

/* ── A4 landscape with tight margins ── */
@page {
  size: A4 landscape !important;
  margin: 5mm;
}

/* ── Allow the print pipeline to flow naturally without
 * artificial viewport-height clipping. Some browsers retain the
 * screen height: 100vh assumptions in print otherwise. */
html,
body {
  height: auto !important;
  overflow: visible !important;
}

/* ── Force the dark theme to actually print ──
 * Browsers strip background colors by default in print mode unless
 * print-color-adjust is set to "exact" — without this the page would
 * print white-on-white. */
*,
*::before,
*::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

body {
  background: #0a0f1a !important;
  color: #e2e8f0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Hide UI chrome and excluded sections ──
 * Both ID-based selectors AND a defensive class match for
 * .open-positions in case any future markup adds it. The row 3
 * grid-2 wrapper itself is hidden via :has() so the empty parent
 * doesn't reserve a grid track in the new .main layout below. */
.nav,
.header-actions,
.status-bar,
#statusBar,
#positionsCard,
#breadthCard,
.open-positions,
#btnRefresh,
#btnGenerate,
#btnExportPDF {
  display: none !important;
}

/* Collapse the entire ROW 3 wrapper (Open Positions + Market Breadth)
 * by matching the grid-2 that contains #positionsCard as a direct
 * child. :has() avoids needing an HTML id on the wrapper. */
.grid-2:has(> #positionsCard) {
  display: none !important;
}

/* ── Drop the screen-mode 1200px constraint, use the full A3 page ── */
.header,
.main {
  max-width: none !important;
  margin: 0 !important;
}

.header {
  padding: 0 0 4mm !important;
}

/* ── .main as a 3-column grid ──
 * The wide rows (indexCards, vixRow, mpsRow, aiNoteCard) span all
 * 3 columns to use the full A3 width. The 3-column base is the
 * structural anchor for any future side-by-side card layouts. */
.main {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 6px !important;
  padding: 6px !important;
}

#indexCards,
#vixRow,
#mpsRow,
#aiNoteCard {
  grid-column: 1 / -1 !important;
}

/* Cap the MPS row's vertical height — its inner cards (MPS pillars,
 * sector lists, breakout list) can grow tall and push the AI note
 * onto a second page. Clip with overflow:hidden rather than letting
 * them spill. */
#mpsRow {
  page-break-inside: avoid;
  break-inside: avoid;
}

#mpsRow .card {
  max-height: 280px !important;
  overflow: hidden !important;
}

/* ── Card behaviour ──
 * Avoid splitting cards across pages, strip max-height clipping,
 * shrink the base font size so more content fits per page. */
.card,
.ai-note {
  break-inside: avoid;
  page-break-inside: avoid;
  max-height: none !important;
  font-size: 9px !important;
}

/* Tighter card-internal padding for print */
.card {
  font-size: 9px !important;
  padding: 6px !important;
}

.card-title {
  font-size: 8px !important;
  margin-bottom: 4px !important;
}

/* ── Tighten internal grids ── */
.grid-2,
.grid-3,
.grid-4 {
  gap: 6px !important;
}

/* ── Pin VIX chart canvas height so the layout fits one page ── */
#vixChartCard canvas {
  height: 100px !important;
  max-height: 100px !important;
}

/* ── TODAY'S SETUPS ──
 * Always hidden in print. The :has(.empty) approach was unreliable
 * across browsers / loadShapers timing, and the empty state adds no
 * value to the PDF recipient anyway. When real Ultimate Setup
 * triggers exist they're already shown in the BREAKOUT CANDIDATES
 * card (#ultimateList) on the same row. Reinstate this rule with a
 * conditional later if you want it back. */
#todaysSetups {
  display: none !important;
}

/* Same compact treatment for the parallel ULTIMATE SETUPS card so
 * the two scroll lists don't push the AI note off the page */
#ultimateList {
  max-height: 60px !important;
  overflow: hidden !important;
}

/* ── AI note compact empty state ── */
.ai-note .empty {
  padding: 8px !important;
  font-size: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * PAGE 2 — AI Research Note
 * Page 1 carries the dashboard (indices, VIX, MPS row). Page 2 is
 * dedicated to the full AI Research Note so a long Groq response
 * isn't clipped or squeezed onto page 1.
 * ═══════════════════════════════════════════════════════════════ */

/* Force page break BEFORE the AI note so it always starts at the
 * top of page 2. Also break-before for the modern spec name. */
#aiNoteCard {
  page-break-before: always !important;
  break-before: page !important;
  display: block !important;
  /* Reset the grid-column span from the page-1 .main rule — on
   * page 2 we're not inside the .main grid context anymore as far
   * as visual layout is concerned. */
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 8mm 6mm !important;
  background: #0a0f1a !important;
  border: none !important;
  /* No max-height — let the AI note breathe across the page */
  max-height: none !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* Clean header on page 2 — keep the AI badge and model line, drop
 * the timestamp since it duplicates the page-1 header date */
#aiNoteCard .ai-note-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

#aiNoteCard .ai-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
}

#aiNoteCard .ai-model {
  font-size: 9px !important;
  opacity: 0.6 !important;
}

#aiNoteCard #aiNoteTime {
  display: none !important;
}

#aiNoteCard .ai-content {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* Page-2 footer: disclaimer + page indicator. Injected as a
 * ::after pseudo so no HTML change is needed. */
#aiNoteCard::after {
  content: "TradEdge · Not investment advice · Page 2 of 2";
  display: block;
  margin-top: 14mm;
  padding-top: 4mm;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 8px;
  font-family: monospace;
  letter-spacing: 0.5px;
  color: #6b7280;
}