/* ============================================================
   print.css — @media print styles
   Hides all UI chrome. Prints only the active child panel.
   BUG 8 FIX: canvas { display: none } prevents confetti printing.
   ============================================================ */

@media print {

  /* ---- Hide all non-content elements ---- */

  canvas,
  .app-header,
  .tabs-bar,
  #toast-container,
  .welcome-screen,
  .modal-overlay,
  .summary-actions,
  [id^="print-btn-"],
  [id^="csv-btn-"] {
    display: none !important;
  }

  /* ---- Hide inactive panels ---- */

  .child-panel:not(.active) {
    display: none !important;
  }

  /* ---- Page setup ---- */

  @page {
    size: A4 portrait;
    margin: 15mm 10mm;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    direction: rtl;
    font-family: 'Tajawal', Arial, sans-serif;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #app-main {
    padding: 0 !important;
    max-width: none !important;
  }

  /* ---- Child name header (from data attribute) ---- */

  .child-panel.active {
    display: block !important;
  }

  .child-panel.active::before {
    content: attr(data-child-name);
    display: block;
    font-size: 18pt;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8mm;
    color: #30ab59;
    border-bottom: 2pt solid #30ab59;
    padding-bottom: 4mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* ---- Summary card ---- */

  .summary-card {
    border: 1pt solid #e5e7eb;
    box-shadow: none;
    border-radius: 0;
    padding: 5mm;
    margin-bottom: 5mm;
    page-break-inside: avoid;
    display: block !important;
    grid-template-columns: none !important;
  }

  .summary-main {
    display: block;
  }

  .summary-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4pt;
    margin-top: 3pt;
  }

  .breakdown-row {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
    font-size: 8pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .total-amount {
    font-size: 14pt;
    color: #9a7b1c !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .total-label {
    font-size: 8pt;
    color: #6b7280;
  }

  .summary-progress {
    margin-top: 4mm;
  }

  .progress-text {
    font-size: 9pt;
    color: #4b5563;
  }

  .progress-bar-wrap {
    background: #f3f4f6 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .progress-bar {
    background: #30ab59 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* ---- Table ---- */

  .table-wrapper {
    box-shadow: none;
    border: 1pt solid #e5e7eb;
    border-radius: 0;
    overflow: visible;
  }

  .surah-table {
    width: 100%;
    font-size: 8.5pt;
    border-collapse: collapse;
  }

  .surah-table thead th {
    background: #4162a9 !important;
    color: #ffffff !important;
    padding: 4pt 5pt;
    font-size: 7.5pt;
    position: static;
    border: 1pt solid #e5e7eb;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .surah-table tbody td {
    padding: 3pt 5pt;
    border: 1pt solid #e5e7eb;
    font-size: 8pt;
  }

  .juz-header-row td {
    background: #30ab59 !important;
    color: #ffffff !important;
    font-size: 8pt;
    padding: 3pt 5pt !important;
    border: 1pt solid #16a34a !important;
    page-break-after: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Memorized row */
  .surah-row.memorized td {
    background: #f0fdf4 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Paid row */
  .surah-row.memorized.paid td {
    background: #fef9e7 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .col-earn {
    color: #9a7b1c !important;
    font-weight: 700;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Surah link — plain text */
  .surah-link {
    color: #000000 !important;
    text-decoration: none !important;
  }

  /* Checkboxes */
  .surah-table input[type="checkbox"] {
    width: 10pt;
    height: 10pt;
  }

  /* Inputs/selects inline */
  .grade-select,
  .date-input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 8pt;
    width: auto;
    min-width: 0;
  }

  /* ---- Page breaks ---- */

  .surah-table tbody tr {
    page-break-inside: avoid;
  }

}