Massive AI Overhaul

SVS-MSP-Calculator-print.css

@@ -0,0 +1,155 @@
+/* SVS MSP Calculator - Print */
+/* Extracted during Phase 5 to keep the HTML shell stable while splitting the monolithic stylesheet. */
+  /* ═══════════════════════════════════════════════════════
+     PRINT / PDF EXPORT (Export A)
+     window.print() triggers this via Print / Save PDF button.
+     Goals:
+       - Clean, branded quote document
+       - Hide all interactive controls
+       - Force all sections expanded (body shown)
+       - No background colours that waste ink (except header)
+       - Page-break control so summary never splits
+  ═══════════════════════════════════════════════════════ */
+  @media print {
+    /* ── Force light background on body ── */
+    body { background: var(--print-paper) !important; color: var(--print-ink) !important; font-size: 13px; }
+
+    /* ── Hide interactive & mobile-only elements ── */
+    .mobile-quote-pill,
+    .mobile-quote-panel,
+    .step-btn,
+    .collapsible-header,
+    .sec-chevron,
+    .section-toggle,
+    .tier-seg-wrap,
+    .pill-toggle,
+    .addon-row input[type=checkbox],
+    .savings-input-row,
+    .export-wrap,
+    .nudge-banner,
+    .pitch-wrap,
+    .quote-settings-bar,
+    .section-header.section-toggle { pointer-events: none; }
+
+    .mobile-quote-pill   { display: none !important; }
+    .mobile-quote-panel  { display: none !important; }
+    .export-wrap         { display: none !important; }
+    .nudge-banner        { display: none !important; }
+    .theme-toggle-btn    { display: none !important; }
+    .pitch-wrap          { display: none !important; }
+    .step-btn            { display: none !important; }
+    .collapsible-header  { display: none !important; }
+    .sec-chevron         { display: none !important; }
+    .sec-summary-badge      { display: none !important; }
+    .sec-controls-row       { display: none !important; }
+    .quote-settings-bar  { display: none !important; }
+    .section-badge       { display: none !important; }
+    #savingsPrompt       { display: none !important; }
+    .quote-notes-wrap    { display: none !important; }
+    .client-rep-row      { display: none !important; }
+    .sidebar-focus-toggle { display: none !important; }
+    .sidebar-focus-print-btn { display: none !important; }
+    .sidebar-utility     { display: none !important; }
+    .qs-switch           { display: none !important; }
+    .confirm-modal       { display: none !important; }
+
+    /* ── Show ALL section bodies (force expand) ── */
+    .section-body        { display: block !important; }
+    .collapsible-body    { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
+
+    /* ── Reset layout to single column ── */
+    .outer {
+      display: block !important;
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+    .main-col, .side-col { width: 100% !important; position: static !important; }
+
+    /* ── Top bar: keep accent, reduce height ── */
+    .top-bar {
+      position: static !important;
+      padding: 10px 20px !important;
+      border-bottom: 2px solid var(--print-accent) !important;
+      background: var(--print-paper) !important;
+    }
+    .top-bar-inner { padding: 0 !important; }
+    .top-bar-right { color: var(--print-muted) !important; }
+
+    /* ── Section cards: clean borders, no dark bg ── */
+    .section {
+      background: var(--print-paper) !important;
+      border: 1px solid var(--print-border) !important;
+      box-shadow: none !important;
+      margin-left: 0 !important;
+      page-break-inside: avoid;
+      break-inside: avoid;
+      padding: 16px 20px !important;
+      margin-bottom: 12px !important;
+    }
+    .section-num { color: var(--print-section-num) !important; }
+    .section-title { font-size: 16px !important; }
+
+    /* ── Sidebar: show inline after sections, styled for print ── */
+    .sidebar {
+      background: var(--print-paper) !important;
+      border: 2px solid var(--print-accent) !important;
+      border-radius: 6px !important;
+      margin: 16px 0 !important;
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+    .sidebar-header { background: var(--print-accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .sidebar-mrr { font-size: 36px !important; color: var(--print-ink) !important; }
+    .sidebar-line { color: var(--print-sidebar-line) !important; border-bottom-color: var(--print-border-strong) !important; }
+    .sidebar-line .val { color: var(--print-ink) !important; }
+
+    /* ── VS comparison: clean for print ── */
+    .vs-save-green td { background: var(--print-save-green) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .vs-save-amber td { background: var(--print-save-amber) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .vs-save-amber { background: var(--print-save-amber-panel) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+    /* ── Feature cards: minimal ── */
+    .feature-card { background: var(--print-feature) !important; border-color: var(--print-border-strong) !important; }
+    .feature-card-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
+
+    /* ── Addon rows ── */
+    .addon-row { border-color: var(--print-border-strong) !important; }
+    .addon-row.selected { background: var(--print-addon-selected) !important; border-color: var(--print-accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+    /* ── Callout boxes ── */
+    .callout-green { background: var(--print-callout-green) !important; border-color: var(--print-callout-green-border) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .callout-red   { background: var(--print-callout-red) !important; border-color: var(--print-callout-red-border) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+    /* ── Progress bar ── */
+    .progress-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+    /* ── Print footer ── */
+    .pitch-footer { display: none !important; }
+
+    /* ── Page break: force summary sidebar to start fresh ── */
+    .side-col { page-break-before: always; break-before: always; }
+
+    /* ── Input fields: show values as static text ── */
+    .num-input, .qs-fee-input {
+      border: none !important;
+      background: transparent !important;
+      font-weight: 700 !important;
+    }
+    .client-input {
+      border: none !important;
+      background: transparent !important;
+    }
+
+    /* ── Print footer note ── */
+    body::after {
+      content: 'Prepared by Silicon Valley Services (SVS) MSP · Ottawa, Ontario · This quote is valid for 30 days from date of issue. Questions? Contact your SVS account representative.';
+      display: block;
+      font-size: 11px;
+      color: var(--print-footer-note);
+      border-top: 1px solid var(--print-border-strong);
+      padding-top: 10px;
+      margin-top: 20px;
+      font-family: 'DM Mono', monospace;
+    }
+  }
+