/* print.css — Print overrides for /stats-report-basic
   Report output is already white, so print overrides are minimal.
   Target: A4, readable in colour and greyscale. */

@media print {

  /* ---- Hide interactive controls ---- */
  .control-panel,
  #validation-messages,
  .btn,
  #print-btn {
    display: none !important;
  }

  /* ---- Page shell ---- */
  body {
    background: #ffffff !important;
    font-size: 11pt;
  }

  .page-shell {
    padding: 0;
    max-width: 100%;
  }

  .page-brand {
    color: #111111 !important;
    font-size: 13pt;
    margin-bottom: 12pt;
  }

  .page-title {
    color: #555555 !important;
    font-size: 8pt;
  }

  /* ---- Page margins ---- */
  @page {
    margin: 15mm 12mm;
    size: A4 portrait;
  }

  /* ---- Report output ---- */
  #report-output {
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  /* ---- Report header ---- */
  .report-header {
    border-bottom: 1.5pt solid #333333 !important;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
  }

  .report-title {
    font-size: 18pt;
    color: #111111 !important;
  }

  .report-subtitle {
    font-size: 9pt;
    color: #555555 !important;
  }

  /* ---- Section breaks ---- */
  .report-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 16pt;
  }

  .heatmap-section {
    page-break-before: always;
    break-before: always;
  }

  .section-heading {
    font-size: 13pt;
    color: #111111 !important;
    border-bottom: 1pt solid #cccccc !important;
    margin-bottom: 10pt;
  }

  /* ---- Summary section ---- */
  .summary-score-display {
    background: #f8f8f8 !important;
    border: 1pt solid #dddddd !important;
    padding: 10pt;
    margin-bottom: 14pt;
  }

  .score-value {
    font-size: 22pt;
    color: #111111 !important;
  }

  .score-label {
    color: #444444 !important;
  }

  .summary-charts-row {
    display: flex;
    gap: 10pt;
    flex-wrap: nowrap;
    margin-bottom: 14pt;
    page-break-inside: avoid;
  }

  .pie-chart-wrap {
    flex: 1;
    border: 1pt solid #dddddd !important;
    background: #f8f8f8 !important;
    padding: 8pt;
  }

  .pie-svg {
    width: 80pt;
    height: 80pt;
  }

  .pie-svg path {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ---- Summary tables ---- */
  .summary-table-wrap {
    background: #f8f8f8 !important;
    border: 1pt solid #dddddd !important;
    padding: 8pt;
    margin-bottom: 10pt;
    page-break-inside: avoid;
  }

  .summary-table {
    font-size: 10pt;
  }

  .summary-table th {
    background: #f0f0f0 !important;
    color: #444444 !important;
    font-size: 9pt;
  }

  .summary-table td {
    color: #111111 !important;
    border-bottom: 0.5pt solid #dddddd !important;
  }

  .summary-table .conversion-row td {
    color: #1a7a1a !important;
    font-weight: bold;
  }

  /* ---- Heatmap sections ---- */
  .three-panel-heatmap {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 10pt;
  }

  .heatmap-panels {
    display: flex;
    gap: 8pt;
    flex-wrap: nowrap;
  }

  .heatmap-panel-title {
    font-size: 8pt;
    color: #555555 !important;
  }

  .heatmap-ylabel {
    font-size: 8pt;
    color: #444444 !important;
    min-width: 52pt;
  }

  /* Force heatmap cell background colours to print */
  .heatmap-cell {
    width: 22pt;
    height: 18pt;
    font-size: 9pt;
    border: 0.5pt solid #bbbbbb !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

}