/* ==========================================================================
   Unified Print Styles for All Print Pages
   ========================================================================== */

/* Ensure color printers keep intended color accents */
@media print and (color) {
  .print-container,
  .print-document-body,
  .print-receipt-area,
  .print-table,
  .marks-card-page-header,
  .print-receipt-table {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .print-watermark-logo { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ==========================================================================
   BASE PRINT RESET - Only applies when printing
   ========================================================================== */
@media print {
  /* Reset for all print pages */
  * {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    font-family: Arial, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.4 !important;
    color: #000 !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }

  html {
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure all ancestor wrappers (Yew app root etc.) don't clip print content */
  body > * {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
  }

  /* Hide non-printable elements */
  .no-print,
  .d-print-none,
  .print-no-print,
  .modal-header,
  .modal-footer:not(.print-footer),
  .btn,
  button:not(.print-btn),
  nav,
  .navbar,
  .sidebar,
  .site_header,
  #sidebarNav,
  header:not(.print-header),
  footer:not(.print-footer),
  .back-to-top,
  .backtotop,
  .back-to-top-btn,
  .modern-backtotop,
  .notification-bell,
  .user-profile-menu {
    display: none !important;
  }

  /* Show printable elements */
  .print-visible,
  .d-print-block,
  .print-only {
    display: block !important;
    visibility: visible !important;
  }

  /* ==========================================================================
     PRINT CONTAINER SYSTEM
     ========================================================================== */
  
  /* Main print container - normal flow (NOT position:absolute which
     gets clipped by overflow:hidden Yew app wrappers) */
  .print-document-body {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Generic print container */
  .print-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 15mm !important;
    box-shadow: none !important;
    border: none !important;
    background: white !important;
    page-break-inside: auto;
    overflow: visible !important;
    height: auto !important;
  }

  /* ID Card specific container */
  .print-id-card-container {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 10mm !important;
    page-break-inside: avoid;
  }

  /* Receipt specific container */
  .print-receipt-container {
    width: 210mm !important; /* A4 width */
    max-width: 210mm !important;
    margin: 0 auto !important;
    padding: 20mm !important;
    border: 1px solid #000 !important;
    page-break-after: always;
  }

  /* Report specific container */
  .print-report-container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10mm !important;
  }

  /* ==========================================================================
     PAGE BREAK CONTROL FOR MULTI-PAGE PRINTING
     ========================================================================== */
  
  /* Force page break before element */
  .page-break-before {
    page-break-before: always !important;
  }

  /* Force page break after element */
  .page-break-after {
    page-break-after: always !important;
  }

  /* Avoid page break inside element */
  .page-break-inside-avoid {
    page-break-inside: avoid !important;
  }

  /* Allow page break inside element */
  .page-break-inside-auto {
    page-break-inside: auto !important;
  }

  /* For multi-item printing (like ID cards) */
  .print-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* For single-page documents */
  .single-page {
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    height: 100vh !important;
  }

  /* For multi-page documents */
  .multi-page-section {
    page-break-after: always !important;
  }

  /* ==========================================================================
     TYPOGRAPHY FOR PRINT
     ========================================================================== */
  
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    margin: 2mm 0 !important;
    page-break-after: avoid;
  }

  h1 { font-size: 18pt !important; }
  h2 { font-size: 16pt !important; }
  h3 { font-size: 14pt !important; }
  h4 { font-size: 12pt !important; }
  h5 { font-size: 11pt !important; }
  h6 { font-size: 10pt !important; }

  p, span, div, td, th {
    color: #000 !important;
    font-size: 10pt !important;
  }

  /* ==========================================================================
     TABLES FOR PRINT
     ========================================================================== */
  
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
  }

  th, td {
    border: 1px solid #000 !important;
    padding: 3mm !important;
    text-align: left !important;
    vertical-align: top !important;
    page-break-inside: avoid;
  }

  th {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
  }

  /* Ensure table headers repeat on each page */
  thead {
    display: table-header-group !important;
  }

  tfoot {
    display: table-footer-group !important;
  }

  /* ==========================================================================
     IMAGES FOR PRINT
     ========================================================================== */
  
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  .print-watermark-logo {
    opacity: 0.5 !important;
    position: fixed !important;
    top: 20% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: -1 !important;
    max-width: 80% !important;
  }

  .print-watermark-logo-history {
    opacity: 0.5 !important;
    position: fixed !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: -1 !important;
    max-width: 80% !important;
  }

  /* ==========================================================================
     UTILITY CLASSES
     ========================================================================== */
  
  .text-center { text-align: center !important; }
  .text-right { text-align: right !important; }
  .text-left { text-align: left !important; }
  .bold { font-weight: bold !important; }
  .italic { font-style: italic !important; }
  .underline { text-decoration: underline !important; }

  /* Margins for print */
  .mt-print-1 { margin-top: 1mm !important; }
  .mt-print-2 { margin-top: 2mm !important; }
  .mt-print-5 { margin-top: 5mm !important; }
  .mt-print-10 { margin-top: 10mm !important; }
  
  .mb-print-1 { margin-bottom: 1mm !important; }
  .mb-print-2 { margin-bottom: 2mm !important; }
  .mb-print-5 { margin-bottom: 5mm !important; }
  .mb-print-10 { margin-bottom: 10mm !important; }

  /* Padding for print */
  .p-print-1 { padding: 1mm !important; }
  .p-print-2 { padding: 2mm !important; }
  .p-print-5 { padding: 5mm !important; }
  .p-print-10 { padding: 10mm !important; }
}

/* Ensure rules apply to the actual component class names used in templates */
@media print {
  .print-document-body .print-container .marks-card-container,
  .print-document-body .print-container .marks-card-header,
  .print-document-body .print-container .marks-card-title,
  .print-document-body .print-container .marks-card-text-muted,
  .print-document-body .print-container .marks-card-table,
  .print-document-body .print-container .marks-card-badge,
  .print-document-body .print-container .marks-card-badge-primary,
  .print-document-body .print-container .marks-card-badge-success,
  .print-document-body .print-container .marks-card-badge-danger,
  .print-document-body .print-container .marks-card-form-header,
  .print-document-body .print-container .marks-card-form-body,
  .print-document-body .print-container .marks-card-form-container,
  .print-document-body .print-container .marks-card-form-section,
  .print-document-body .print-container .marks-card-empty-state,
  .print-document-body .print-container #marksCardPreview,
  .print-document-body .print-container .marks-card-modal-overlay {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Fallback header accent for generate_marks_card markup */
  .print-document-body .print-container .marks-card-header {
    border-top: 12px solid #4c6ef5 !important;
    padding-top: 6px !important;
  }

  .print-document-body .print-container .marks-card-title { color: #0b2540 !important; }

  .print-document-body .print-container .marks-card-table thead th {
    background: #eef2ff !important;
    color: #0b2540 !important;
    border-color: #bbb !important;
  }

  .print-document-body .print-container .marks-card-badge-primary { background: #4c6ef5 !important; color: #fff !important; }
  .print-document-body .print-container .marks-card-badge-success { background: #28a745 !important; color: #fff !important; }
  .print-document-body .print-container .marks-card-badge-danger { background: #dc3545 !important; color: #fff !important; }

  /* Also ensure helper/updated sections stay hidden for small formats */
  @media print and (max-width: 148mm) {
    .print-document-body .print-container #updatedMarksCardsSection,
    .print-document-body .print-container #updatedMarksCardsSection *,
    .print-document-body .print-container .marks-card-filter-container,
    .print-document-body .print-container h6.marks-card-mb-3.text-primary,
    .print-document-body .print-container .marks-card-table-footer,
    .print-document-body .print-container .marks-card-table-container td.text-center.text-muted {
      display: none !important;
      visibility: hidden !important;
    }
  }
}
/* ==========================================================================
   PAGE SIZE ADJUSTMENTS
   ========================================================================== */

@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

  .print-container {
    width: 180mm !important;
    max-width: 180mm !important;
  }
}

/* A5 Size (148mm × 210mm)
   Printable area with 10mm margins = 128mm × 190mm
   Container must be <= 128mm so all four border edges are visible. */
@media print and (max-width: 148mm) {
  @page {
    size: A5;
    margin: 10mm;
  }

  /* Fit exactly inside the 128mm printable width */
  .print-container {
    width: 128mm !important;
    max-width: 128mm !important;
    padding: 6mm !important;
    box-sizing: border-box !important;
  }

  /* Tables must also stay inside the container */
  .print-table {
    width: 98% !important;
    max-width: 98% !important;
    table-layout: fixed !important;
  }

  .print-id-card-container {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 5mm !important;
  }

  h1 { font-size: 14pt !important; }
  h2 { font-size: 12pt !important; }
  h3 { font-size: 11pt !important; }
  h4 { font-size: 10pt !important; }
  h5 { font-size: 9pt !important; }
  h6 { font-size: 8pt !important; }

  p, span, div, td, th {
    font-size: 8pt !important;
  }
}

/* A6 Size (105mm × 148mm) */
@media print and (max-width: 105mm) {
  @page {
    size: A6;
    margin: 5mm;
  }

  .print-container {
    width: 105mm !important;
    max-width: 105mm !important;
    padding: 5mm !important;
  }

  .print-id-card-container {
    grid-template-columns: 1fr !important;
    gap: 2mm !important;
  }

  h1 { font-size: 12pt !important; }
  h2 { font-size: 10pt !important; }
  h3 { font-size: 9pt !important; }
  h4 { font-size: 8pt !important; }
  h5 { font-size: 7pt !important; }
  h6 { font-size: 6pt !important; }

  p, span, div, td, th {
    font-size: 6pt !important;
  }
}

/* ==========================================================================
   ORIENTATION ADJUSTMENTS
   ========================================================================== */

/* Portrait orientation */
@media print and (orientation: portrait) {
  .print-container {
    width: 210mm !important;
    height: 297mm !important;
  }

  .print-id-card-container {
    grid-template-columns: repeat(auto-fill, minmax(90mm, 1fr)) !important;
  }
}

/* Landscape orientation */
@media print and (orientation: landscape) {
  @page {
    size: landscape;
  }

  .print-container {
    width: 297mm !important;
    height: 210mm !important;
  }

  .print-id-card-container {
    grid-template-columns: repeat(auto-fill, minmax(140mm, 1fr)) !important;
  }

  .print-receipt-container {
    width: 297mm !important;
    max-width: 297mm !important;
  }
}

/* ==========================================================================
   SPECIFIC PRINT PAGE ADJUSTMENTS
   ========================================================================== */

/* Student ID Cards */
@media print {
  .IDCard {
    border: 2pt solid #d32f2f !important;   /* thick red — reliably prints */
    border-radius: 3mm !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .idphone {
    background-color: rgb(5, 135, 128) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .stuidcard {
    width: 55px !important;
    height: 70px !important;
    border: 2px solid #48b5fd !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .inst_img_id_card {
    height: 45px !important;
    width: auto !important;
  }
}

/* Fee Reports */
@media print {
  #report-print-section {
    page-break-inside: avoid;
  }

  .print-table {
    border: 1px solid #000 !important;
  }

  .print-total-row {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
  }
}

/* Student Details Print */
@media print {
  .print_stud {
    width: 210mm !important;
    max-width: 210mm !important;
  }

  .stu_img_det {
    width: 50mm !important;
    height: 60mm !important;
    border: 2px solid #000 !important;
  }
}

/* ==========================================================================
   PAYMENT RECEIPT PRINT STYLES  —  A4 portrait
   ========================================================================== */
@media print {

  @page {
    size: A4 portrait;
    margin: 0;
  }

  /* DOM-move technique: JS moves #print-receipt-area to direct <body> child, adds class "receipt-print" */
  html.receipt-print,
  body.receipt-print {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: white !important;
  }

  /* ── Full page outline border (fixed overlay, shows on every printed page) ── */
  body.receipt-print::after {
    content: "" !important;
    position: fixed !important;
    top: 6mm !important;
    left: 6mm !important;
    right: 6mm !important;
    bottom: 6mm !important;
    border: 1.5px solid #000 !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide everything on body EXCEPT the moved receipt */
  body.receipt-print > *:not(#print-receipt-area) {
    display: none !important;
  }

  /* ── Receipt fills A4 page in normal flow ── */
  body.receipt-print > #print-receipt-area {
    display: block !important;
    position: static !important;
    width: 210mm !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 18mm 22mm 18mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: white !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    box-sizing: border-box !important;
    font-family: Arial, Helvetica, sans-serif !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide screen-only teal accent stripe */
  body.receipt-print > #print-receipt-area::before {
    display: none !important;
    content: none !important;
  }

  /* All descendants visible, black ink */
  body.receipt-print > #print-receipt-area * {
    visibility: visible !important;
    color: #000 !important;
  }

  /* ── Company header ── */
  body.receipt-print > #print-receipt-area .print-receipt-company-header {
    text-align: center !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 2.5px solid #000 !important;
  }

  body.receipt-print > #print-receipt-area .print-receipt-company-title {
    font-size: 16pt !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    display: block !important;
    margin-bottom: 6px !important;
  }

  body.receipt-print > #print-receipt-area .print-receipt-company-address {
    font-size: 9.5pt !important;
    line-height: 1.7 !important;
    color: #000 !important;
    margin-top: 5px !important;
  }

  body.receipt-print > #print-receipt-area .print-receipt-company-gst {
    font-size: 9pt !important;
    font-weight: bold !important;
    margin-top: 7px !important;
    display: block !important;
    letter-spacing: 0.2px !important;
  }

  /* ── "PAYMENT RECEIPT" title — line below only; company header gives the line above ── */
  body.receipt-print > #print-receipt-area .print-receipt-title {
    display: block !important;
    text-align: center !important;
    font-size: 13pt !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-top: none !important;
    border-bottom: 1.5px solid #000 !important;
  }

  /* No extra gap between company header separator and title */
  body.receipt-print > #print-receipt-area .print-receipt-company-header + .print-receipt-title {
    margin-top: 0 !important;
  }

  /* ── Details table  — outline + solid inner grid ── */
  body.receipt-print > #print-receipt-area .print-receipt-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1.5px solid #000 !important;
    outline: 1.5px solid #000 !important;
    margin-top: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.receipt-print > #print-receipt-area .print-receipt-table-cell {
    padding: 9px 13px !important;
    border: 1.5px solid #000 !important;   /* all inner grid lines bold + visible */
    font-size: 10.5pt !important;
    vertical-align: middle !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Left label column — light gray */
  body.receipt-print > #print-receipt-area .print-receipt-label-cell {
    width: 35% !important;
    font-weight: normal !important;
    color: #222 !important;
    background: #efefef !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Right value column — white, bold */
  body.receipt-print > #print-receipt-area .print-receipt-value-cell {
    width: 65% !important;
    font-weight: bold !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── Separator (hr) ── */
  body.receipt-print > #print-receipt-area .print-receipt-separator {
    display: block !important;
    visibility: visible !important;
    border: none !important;
    border-top: 1px solid #000 !important;
    margin: 20px 0 !important;
  }

  /* ── Signature section ── */
  body.receipt-print > #print-receipt-area .print-receipt-signature-section {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    margin-top: 50px !important;
    padding: 0 20px !important;
  }

  body.receipt-print > #print-receipt-area .print-receipt-signature-item {
    text-align: center !important;
    width: 38% !important;
  }

  body.receipt-print > #print-receipt-area .print-receipt-signature-label {
    display: block !important;
    border-top: 1.5px solid #000 !important;
    padding-top: 8px !important;
    font-size: 10pt !important;
    font-weight: bold !important;
  }

  /* ── Thank-you footer ── */
  body.receipt-print > #print-receipt-area .print-receipt-footer {
    display: block !important;
    text-align: center !important;
    font-size: 9.5pt !important;
    font-style: italic !important;
    margin-top: 20px !important;
    padding-top: 10px !important;
    border-top: 1px solid #555 !important;
  }
}

/* ==========================================================================
   FIX FOR COMMON PRINT ISSUES
   ========================================================================== */

/* Fix for white text on dark backgrounds */
@media print {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Ensure links are visible */
  a, a:visited {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Show URL after links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    font-style: italic;
  }

  /* Don't show URL for internal links or javascript */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* Ensure form elements print properly */
  input, textarea, select {
    border: 1px solid #000 !important;
    background: white !important;
  }
}

/* ==========================================================================
   MARKS CARD PRINT COLOURS
   Must be at end of file so they win the cascade.
   ========================================================================== */
@media print {
  /* --- hide decorative/parallax banner items that bleed into print --- */
  .deco_item,
  .deco_img_1,
  .deco_img_2,
  .deco_img_3,
  .deco_img_4,
  .deco_img_5,
  .deco_img_6,
  .decoration_wrap .deco_item,
  .page_banner .deco_img_1,
  .page_banner .deco_img_2 {
    display: none !important;
    visibility: hidden !important;
  }

  /* --- page header gradient --- */
  .marks-card-page-header {
    background: linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
    background-image: linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
    background-color: #4c6ef5 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }
  .marks-card-page-header h3,
  .marks-card-page-header p,
  .marks-card-page-header span {
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* --- table header row --- */
  .marks-card-table-container .table thead th,
  .marks-card-table thead th,
  .table-primary th,
  .table-primary td {
    background: linear-gradient(90deg, #4c6ef5 0%, #6b63d2 100%) !important;
    background-color: #4c6ef5 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border-color: #666 !important;
  }

  /* --- total row (light lavender) --- */
  tr.fw-bold td,
  .marks-card-table tbody tr.table-active td,
  .marks-card-table tbody tr:last-child td {
    background: #eef2ff !important;
    background-color: #eef2ff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* --- table body --- */
  .marks-card-table-container .table tbody tr td,
  .marks-card-table tbody td {
    color: #000 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  /* --- print container: complete outline border box ---(receipt body border */
  .print-container {
    padding: 5mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* --- generate_marks_card.rs header (.marks-card-header) --- */
  .marks-card-header {
    border: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .marks-card-title {
    color: #0b2540 !important;
  }

  /* --- badges --- */
  .marks-card-badge-primary {
    background: #4c6ef5 !important;
    background-color: #4c6ef5 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .marks-card-badge-success {
    background: #28a745 !important;
    background-color: #28a745 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .marks-card-badge-danger {
    background: #dc3545 !important;
    background-color: #dc3545 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* --- enable print-color-adjust on all marks-card elements --- */
  .marks-card-container,
  .marks-card-page-header,
  .marks-card-header,
  .marks-card-table,
  .marks-card-badge,
  #marksCardPreview {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* --- hide helper / updated-list sections below the card --- */
  #updatedMarksCardsSection,
  .marks-card-filter-container,
  .marks-card-empty-state,
  .marks-card-table-footer,
  .marks-card-table-container td.text-center.text-muted,
  .marks-card-table-container td.text-center.text-muted * {
    display: none !important;
    visibility: hidden !important;
  }
}

/* A5 Size adjustments - Keep signatures in row */
@media print and (max-width: 148mm) {
    .print-signatures {
      flex-direction: row; /* Force row even on A5 */
      gap: 5mm;
    }
    .print-signature-block {
      min-width: 30mm; /* Further reduced for A5 */
      margin-bottom: 0; /* Remove bottom margin */
    }
}

/* single consolidated definition is above; this block intentionally removed */

@media print {
  .print-watermark-logo{
    position: absolute;
    opacity: 0.40;
    width: clamp(280px, 40vw, 390px);
    height: auto;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    pointer-events: none !important;
  }
}

/* A6 Size (105mm × 148mm) */
@media print and (max-width: 105mm) {
  .print-container {
    padding: 5mm;
  }

  .print-school-name {
    font-size: 15px !important;
  }

  .print-title {
    position: absolute;
    font-size: 14px !important;
    top:-48px !important;
  }

  .print-info,
  .print-table {
    font-size: 6px !important;
  }

  .print-table th,
  .print-table td {
    padding: 2px;
    font-size: 2px;
    border: 1.3px solid gray !important;
  }
  .print-date-top-left{
    position: absolute;
    top: -12mm !important;
    left: -2mm !important;
    font-size: clamp(8px, 2.5vw, 8px)!important;
    color: rgb(0, 0, 0);
    border-radius: 4px;
    margin-top: 30px;
    padding: 5px 12px;
    border-radius: 4px;
    margin-top: 30px;
  }
  .print-document-number{
    position: absolute;
    top: -12mm !important;
    right: -2mm !important;
    font-size: clamp(8px, 2.5vw, 8px)!important;
    color: rgb(0, 0, 0);
    border-radius: 4px;
    margin-top: 30px;
  }
  .print-watermark {
    font-size: 60px;
  }

  .print-watermark-logo {
    width: 180px !important;
    opacity: 0.25 !important;
    margin-top: 0 !important;
  }

  .print-watermark-logo-history {
    width: 300px !important;
    opacity: 0.15 !important;
    margin-top: 0 !important;
  }

  /* Simplify layout for very small paper */
  .print-info {
    flex-direction: column;
    gap: 3px;
  }

  .print-info-label {
    min-width: 30px;
  }

  .print-student-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
    gap: 6px;
    font-size: clamp(2px, 3vw, 4px);
    font-weight: 400;
    margin-bottom: 2px;
    margin-top: 35px;
    margin-left: 10px;
  }

  .print-student-detail-label {
    font-weight: 500;
    color: #2c3e50;
    min-width: 40px;
    font-size: clamp(11px, 3vw, 13px);
  }

  .print-student-detail-value {
    font-weight: 400;
    color: #495057;
    flex: 1;
    font-size: clamp(11px, 3vw, 13px);
  }

  .print-student-detail-item {
    display: flex;
    align-items: center;
    gap: -4px;
    padding: 5px 0;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 400;
  }
}

/* Portrait/Landscape adjustments */
@media print and (orientation: portrait) {
  .print-container {
    padding: 8mm;
  }
}

@media print and (orientation: landscape) {
  .print-container {
    padding: 5mm 10mm;
  }
}
@media print {
  .print-watermark-logo {
    position: fixed !important;     /* fixed = relative to PAGE, not container — works on any paper size */
    opacity: 0.25 !important;
    width: 260px !important;
    height: 260px !important;
    top: 20% !important;             /* near top of page */
    left: 50% !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-watermark-logo-history {
    position: fixed !important;
    opacity: 0.25 !important;
    width: 300px !important;
    height: 300px !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Body and containers: normal flow in print */
  body {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Ensure no scaling is applied during printing */
  @page {
    size: auto;
    margin: 5mm;
  }

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

  /* Fix: ID cards starting on page 2 in Chrome.
     Remove Bootstrap pt-5/ps-5 padding that creates blank vertical space,
     and reset print-id-card-container so no leading gap is introduced. */
  .print-id-card-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* When the JS DOM-move trick is used (body.id-card-print),
     .print-document-body is a direct child of <body> — ensure it is
     fully visible, starts at the very top, and has no leftover height
     from the Yew wrapper it was detached from. */
  body.id-card-print > .print-document-body {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: white !important;
  }

  body.id-card-print > .print-document-body,
  body.id-card-print > .print-document-body * {
    visibility: visible !important;
  }

  .id_container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* A5 watermark override — MUST come after the general @media print block above to win cascade */
@media print and (max-width: 148mm) {
  .print-watermark-logo {
    top: 20% !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;   /* anchor top edge at 5%, not centred */
    width: 160px !important;
    height: 160px !important;
    opacity: 0.15 !important;
  }

  .print-watermark-logo-history {
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;   /* keep centred */
    width: 300px !important;
    height: 300px !important;
    opacity: 0.15 !important;
  }
}

/* ID Card Print Styles */
@media print {
    .print-id-card-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* 2 cards per row → 6 per A4 page */
    .id_container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 90mm !important;    /* equal height rows: 3 rows × 90mm + 2 gaps × 4mm = 278mm < 287mm usable */
        gap: 4mm !important;
        padding: 4mm !important;   /* override Bootstrap pt-5 ps-5 modal-body */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* Reset Bootstrap .row negative gutters */
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-items: stretch !important;
    }

    /* Each card wrapper — qualify selector to beat Bootstrap's .p-5 !important */
    .id_container .detail_content,
    .detail_content {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        width: 100% !important;
        height: 90% !important;    /* stretch to fill grid row */
        min-height: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ---- The IDCard itself ---- */
    .IDCard {
        width: 100% !important;
        height:90% !important;       /* fill the full grid-row height → equal on all cards */
        border: 2pt solid #d32f2f !important;   /* thick red — visible at any zoom and in print */
        border-radius: 3mm !important;
        margin: 0 !important;
        padding: 2px !important;
        background: white !important;
        box-shadow: none !important;
        position: relative !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ---- Reset Bootstrap row/col gutters inside the card ---- */
    .IDCard .row {
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .IDCard [class*="col-"],
    .IDCard .col {
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    /* Top header row: logo col + school name col */
    .IDCard .row:first-child .col-md-2,
    .IDCard .row:first-child .col-md-1 {
        flex: 0 0 18% !important;
        max-width: 18% !important;
    }

    .IDCard .row:first-child .col-md-8 {
        flex: 0 0 82% !important;
        max-width: 82% !important;
    }

    /* Content row: photo + labels + values */
    .IDCard .row:nth-child(3) .col-md-3 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    .IDCard .row:nth-child(3) .col-md-2 {
        flex: 0 0 32% !important;
        max-width: 32% !important;
    }

    .IDCard .row:nth-child(3) .col-md-6 {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    /* ---- Teal phone bar ---- */
    .idphone {
        background-color: rgb(5, 135, 128) !important;
        background: rgb(5, 135, 128) !important;
        border-radius: 2px !important;
        color: white !important;
        padding: 1px 6px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Force single-line flex layout, override inline margin-left on spans */
    .idphone h6 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        font-size: 8px !important;
        color: white !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .idphone h6 span {
        margin-left: 0 !important;   /* kill the inline margin-left: 111px / 88px */
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .idphone h6 i,
    .idphone h6 * {
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Institution logo */
    .inst_img_id_card {
        height: 45px !important;
        width: auto !important;
        border-radius: 5px !important;
        margin: 2px !important;
    }

    /* Student photo box */
    .stuidcard {
        width: 55px !important;
        height: 80px !important;
        border: 2px solid #48b5fd !important;
        border-radius: 3px !important;
        overflow: hidden !important;
        margin: 3px 0 3px 3px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .stuidcard img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Teal label text */
    .parent_info_id,
    .id_contact,
    .address_id,
    .bld_grp_id {
        color: rgb(6, 92, 92) !important;
        font-size: 9px !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.4 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Red value text */
    .text-danger {
        color: #dc3545 !important;
        font-size: 9px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* All h5/h6 inside card */
    .IDCard h6 {
        font-size: 9px !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .IDCard h5 {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* PRINCIPAL label */
    .fixed-principal {
        position: absolute !important;
        bottom: 4px !important;
        right: 8px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .fixed-principal h6 {
        color: #dc3545 !important;
        font-size: 9px !important;
        margin: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* List resets */
    .IDCard .icon_list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .IDCard .icon_list li {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1.4 !important;
    }

    /* Bootstrap spacing overrides */
    .IDCard .ms-4 { margin-left: 4px !important; }
    .IDCard .ms-3 { margin-left: 4px !important; }
    .IDCard .ms-1 { margin-left: 2px !important; }
    .IDCard .ms-2 { margin-left: 2px !important; }
    .IDCard .mt-2 { margin-top: 2px !important; }
    .IDCard .pb-0 { padding-bottom: 0 !important; }
    .IDCard .pt-5 { padding-top: 3px !important; }
    .IDCard .ps-5 { padding-left: 3px !important; }
    .IDCard .p-5  { padding: 3px !important; }
}

/* Report Print Styles - Scoped version */
/* NOTE: These print media queries are now scoped to only apply when body has .print-active class */
/* For unified print styling, use print.css instead */
@media print {
  body.print-active #report-print-section table {
    border-top: 0 !important;
  }

  body.print-active #report-print-section thead th {
    border-top: 0 !important;
  }

  body.print-active #report-print-section {
    border-top: 0 !important;
  }
}

@media print {
  body.print-active #report-print-section {
    position: absolute;
    top: 0;
  }
}

@media print {
   @page {
    margin: 0;   /* removes top white border/line */
  }

  body.print-active,
  body.print-active html {
    background: #fff !important;
  }

  body.print-active #report-print-section {
    background: #fff !important;
    box-shadow: none !important;
  }
}
/* for the report print section  */
@media print {
    #report-print-section {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
        margin: 0 !important;
        padding: 8px !important;
    }

    #report-print-section .print-header {
        margin-bottom: 4px !important;
    }

    #report-print-section .nums {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    #report-print-section .fw-bold {
        margin-top: 2px !important;
    }

    /* Ensure print-no-print is completely collapsed in print */
    #report-print-section .print-no-print {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Force table to fit within the printed page — no column overflow */
    #report-print-section table,
    #report-print-section .print-table {
        width: 98% !important;
        max-width: 98% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        box-sizing: border-box !important;
        font-size: 9px !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Cells wrap and clip instead of pushing columns off-page */
    #report-print-section table th,
    #report-print-section table td,
    #report-print-section .print-table th,
    #report-print-section .print-table td {
        font-size: 9px !important;
        padding: 3px 4px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }

    #report-print-section .print-table tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

/* Print-specific Styles */
@media print {
    body * {
        visibility: visible !important;
    }
    /* Hide page chrome via display:none */
    .site_header,
    #sidebarNav,
    .sidebar,
    nav, .navbar,
    header:not(.print-header),
    footer:not(.print-footer),
    .back-to-top,
    .backtotop,
    .back-to-top-btn,
    .modern-backtotop,
    .notification-bell,
    .user-profile-menu,
    .print-no-print,
    .d-print-none,
    .no-print,
    .modal-header,
    .modal-footer:not(.print-footer),
    button.btn:not(.print-btn),
    .btn:not(.print-btn),
    #loading {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reset ALL ancestor wrapper elements that Yew/BrowserRouter inject.
       Chrome retains screen min-height on these invisible wrappers, pushing
       content to page 2. Force them to have zero intrinsic size in print. */
    html, body,
    body > *,
    body > * > *,
    body > * > * > *,
    body > * > * > * > * {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Print body flows naturally — no position:absolute */
    .print-document-body {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    /* Also reset the print-id-card-container wrapper */
    .print-id-card-container {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .print-container {
        box-shadow: none;
        border-radius: 4px;
        margin: 4mm auto;
        padding: 6mm 10mm 10mm 10mm;
        width: 96% !important;
        max-width: 96% !important;
        height: auto;
        min-height: auto;
        max-height: none;
        overflow: visible;
        page-break-inside: auto;
        right: 0;
        position: relative !important;
        isolation: isolate !important;
        background: white !important;
        -webkit-print-color-adjust: exact !important;  /* force border to print */
        print-color-adjust: exact !important;
    }

    /* All direct content above the watermark — z-index not needed when watermark is -1 */

    /* Header row: Date | FEE RECEIPT | Receipt No — keep in-flow (not absolute) */
    .print-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 4px !important;
        font-size: 12px !important;
        margin-bottom: 2mm !important;
    }

    .print-date-top-left {
        position: static !important;
        font-size: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .print-title {
        position: static !important;
        transform: none !important;
        font-size: 15px !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-document-number {
        position: static !important;
        text-align: right !important;
        font-size: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .print-student-detail-label {
      font-weight: 500;
      font-weight: bold;
      min-width: 40px;
      font-size: 12px;
      margin-bottom: -20px;
    }

    .print-student-detail-value {
      font-weight: 500;
      min-width: 40px;
      font-size: 12px;
      margin-bottom: -20px;

    }

    .print-no-print {
      display: none !important;
    }

    .print-watermark {
      opacity: 0.1;
    }

    .print-watermark-logo {
      opacity: 0.15 !important;
      margin-top: 0 !important;   /* do NOT shift absolutely-positioned element with margin */
    }

    .print-watermark-logo-history {
      opacity: 0.15 !important;
      margin-top: 0 !important;
    }
    /* Ensure text scales properly for any page size */
    .print-school-motto,
    .print-info,
    .print-table,
    .print-document-number {
      font-size: 15px !important;
    }
    .print-title{
      font-size: 18px !important;
      top: auto;     /* no longer absolute — top has no effect on position:static */
    }
    .print-school-name{
      font-size: clamp(18px, 6vw, 18px)!important;
      margin-top: 20px;
    }
    .print-school-address{
      font-size: clamp(13px, 3vw, 13px)!important;
      margin-bottom: 15px!important;
    }
    /* Force page breaks for large documents */
    .print-section {
      page-break-inside: none;
    }
    /* Optimize table printing */
    .print-table {
      page-break-inside: none;
      margin-top: 15px!important;
      border: 2.5px solid #333 !important;
      border-collapse: collapse !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    .print-table tr {
      page-break-inside: none;
      page-break-after: none;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    .print-table th,
    .print-table td {
      padding: 4px;
      font-size: 16px !important;
      border: 5.5px solid #333 !important;
      background: transparent !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    .print-table th {
      padding: 10px;
      page-break-after: none;
      border: 5.5px solid #333 !important;
      background: transparent !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
}
/* A5 Size (148mm × 210mm) */
@media print and (max-width: 148mm) {
  @page {
    size: A5;
    margin: 0;
    border: 1.5px solid #000!important;
  }
    .print-container {
      padding: 2mm;
      right:12px;
    }
    .print-school-name {
      font-size: clamp(22px, 6vw, 22px)!important;
      margin-top: 20px;
    }
    .print-title {
      font-size: 16px;
    }
    .print-info-label,
    .print-info-value {
      font-size: 14px;
    }
    .print-info,
    .print-table {
      font-size: 15px;
    }
    .print-table {
      border-collapse: collapse !important;
    }
    .print-table th,
    .print-table td {
      padding: 4px;
      font-size: 15px !important;
      border: 1.3px solid rgb(8, 8, 8) !important;
    }

    .print-watermark {
      font-size: 100px;
    }

    .print-watermark-logo {
      top: 20% !important;    /* A5: logo in upper portion behind content */
      width: 180px !important;
      height: 180px !important;
      opacity: 0.15 !important;
      margin-top: 0 !important;
    }

    .print-watermark-logo-history {
      top: 40% !important;    /* A5 history: logo centered behind content */
      width: 300px !important;
      height: 300px !important;
      opacity: 0.15 !important;
      margin-top: 0 !important;
    }
    .print-date-top-left{
      font-size: 10px ;
    }

    .print-student-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
      gap: 0px !important; 
      font-size: clamp(2px, 3vw, 4px);
      font-weight: 400;
      margin-top: 35px;
      margin-left: 10px;
    }
    
}

/* Print Report Styles */
@media print {
  /* Zero out every ancestor wrapper Yew/BrowserRouter injects between
     <body> and the print content. Chrome retains their screen min-height
     (100vh) in print layout, which creates a blank first page.
     This block loads last so these rules win the cascade. */
  html, body {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body > *, body > * > *, body > * > * > *,
  body > * > * > * > *, body > * > * > * > * > *,
  body > * > * > * > * > * > *, body > * > * > * > * > * > * > * {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body * { visibility: hidden; }
  #report-print-section, #report-print-section * { visibility: visible; }
  /* position:static keeps #report-print-section in normal flow so Chrome
     does not insert a blank first page */
  #report-print-section {
    position: static;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .print-document-body, .print-document-body * { visibility: visible; }
  /* Use static positioning so Chrome does not treat the ancestor wrappers
     (Yew/BrowserRouter divs with min-height:100vh) as a blank first page.
     position:absolute on a child of those wrappers was the root cause. */
  .print-document-body {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .print-only, .print-only * { visibility: visible !important; }
  .print-only { position: static; width: 100%; min-height: 0; }
  .print-no-print { display: none !important; }
  .table-responsive { max-height: none !important; overflow-y: visible !important; }
  .d-print-none { display: none !important; }
  
  /* Also show other print containers */
  .print-id-card-container,
  .print-id-card-container *,
  .print-container,
  .print-container *,
  .print-receipt-area,
  .print-receipt-area *,
  .print_stud,
  .print_stud *,
  .IDCard,
  .IDCard *,
  .detail_content,
  .detail_content *,
  .id_container,
  .id_container * {
      visibility: visible !important;
  }
}

@media print {
  .student-print-page * {
    visibility: visible !important;
  }
  .student-print-page .no-print {
    display: none !important;
    visibility: hidden !important;
  }
  .student-print-page .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    display: block !important;
    visibility: visible !important;
  }
  .student-print-page .print-header {
    display: block !important;
    visibility: visible !important;
  }
  .student-print-page table {
    display: table !important;
    visibility: visible !important;
    page-break-after: auto;
    page-break-inside: auto;
    width: 100% !important;
    background: white !important;
    color: black !important;
    border-collapse: collapse !important;
  }
  .student-print-page thead {
    display: table-header-group !important;
    visibility: visible !important;
  }
  .student-print-page tbody {
    display: table-row-group !important;
    visibility: visible !important;
  }
  .student-print-page tr {
    display: table-row !important;
    visibility: visible !important;
    page-break-inside: avoid;
  }
  .student-print-page th, .student-print-page td {
    display: table-cell !important;
    visibility: visible !important;
    color: black !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px !important;
  }
  .student-print-page th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
  }
}

/* Print styles */
@media print {
  .modern-backtotop,
  .modern-header,
  .cta-button,
  .contact-section {
    display: none !important;
  }
  
  .modern-edutech-wrapper {
    background: white !important;
  }
  
  .section-title,
  .hero-title {
    color: black !important;
  }
  
  .gradient-text {
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
  }
}

/* Print Styles
========================================================================== */
@media print {
  .bus-fee-management .toggle-switch-container,
  .bus-fee-management .btn {
    display: none !important;
  }
  
  .bus-fee-management .table-bordered {
    border: 1px solid #000 !important;
  }
  
  .bus-fee-management .table-bordered th,
  .bus-fee-management .table-bordered td {
    border: 1px solid #000 !important;
    color: #000 !important;
  }
}

/* ==========================================================================
   BUS FEE MANAGEMENT PRINT STYLES - SCOPED VERSION
   ========================================================================== */
@media print {
  /* Only apply these styles within bus-fee-management context */
  .bus-fee-management {
    /* Reset everything within bus-fee-management */
    * {
      box-sizing: border-box;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    
    body {
      margin: 0 !important;
      padding: 0 !important;
      background: white !important;
    }

    /* Hide everything that shouldn't print - ONLY within bus-fee-management */
    .no-print,
    .modal-header,
    .modal-footer:not(.print-footer),
    .btn,
    button:not(.print-btn),
    nav,
    .navbar,
    .sidebar,
    .site_header,
    #sidebarNav,
    header:not(.print-header),
    footer:not(.print-footer) {
      display: none !important;
    }
  } /* Close .bus-fee-management selector */
  
  /* Show and reset modal structure for print - keep outside .bus-fee-management for specificity */
  .bus-fee-management .modal {
    position: static !important;
    display: block !important;
    background: white !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .bus-fee-management .modal-dialog {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .bus-fee-management .modal-content {
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .bus-fee-management .modal-body,
  .bus-fee-management .printable-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }
  
  /* Ensure receipt content is visible and styled */
  #printable-receipt,
  .bus-fee-management .receipt-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border: 2px solid #333 !important;
    page-break-after: avoid;
    background: white !important;
  }
  
  .bus-fee-management .receipt-container * {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Receipt specific elements */
  .header,
  .receipt-details,
  .detail-row,
  .total-section,
  .signature,
  .footer {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Force table to display properly */
  .bus-fee-management table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    visibility: visible !important;
  }
  
  thead {
    display: table-header-group !important;
  }
  
  tbody {
    display: table-row-group !important;
  }
  
  tr {
    display: table-row !important;
  }
  
  /* Scoped to bus-fee-management only — prevents interference with .print-table and other receipts */
  .bus-fee-management th,
  .bus-fee-management td {
    display: table-cell !important;
    border: 1px solid #333 !important;
    padding: 8px !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  
  /* Ensure text is visible */
  h1, h2, h3, h4, h5, h6, p, span, td, th, div {
    color: #000 !important;
    visibility: visible !important;
  }
}

/* Print overrides for Marks Card (placed at end to take precedence) */
@media print {
  /* Force header gradient and text color to print */
  .marks-card-page-header {
    background: linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  .marks-card-page-header h3,
  .marks-card-page-header p {
    color: #ffffff !important;
  }

  /* Table header gradient and white text */
  .marks-card-table-container .table thead th {
    background: linear-gradient(90deg, #4c6ef5 0%, #6b63d2 100%) !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border-color: #666 !important;
  }

  /* Table body readable text */
  .marks-card-table-container .table tbody tr td,
  .marks-card-table-container .table tbody tr th {
    color: #000 !important;
    background: #ffffff !important;
  }

  /* Fallback underline if browser strips backgrounds */
  .marks-card-page-header::after {
    content: '' !important;
    display: block !important;
    height: 6px !important;
    background: #4c6ef5 !important;
    margin-top: 8px !important;
  }

  /* Hide helper/extra sections in printed output */
  #updatedMarksCardsSection,
  #updatedMarksCardsSection *,
  .marks-card-filter-container,
  h6.marks-card-mb-3.text-primary,
  .marks-card-table-footer,
  .marks-card-table-container td.text-center.text-muted,
  .marks-card-table-container td.text-center.text-muted .d-flex {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Marks card header gradient for print — must print backgrounds */
@media print {
  .marks-card-page-header {
    background: linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
    background-image: linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
    background-color: #4c6ef5 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  .marks-card-page-header h3,
  .marks-card-page-header p {
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* A5-specific adjustments: ensure the helper area doesn't show on small paper */
@media print and (max-width: 148mm) {
  #updatedMarksCardsSection,
  #updatedMarksCardsSection *,
  .marks-card-filter-container,
  h6.marks-card-mb-3.text-primary,
  .marks-card-table-footer,
  .marks-card-table-container td.text-center.text-muted {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Additional selectors matching component class names used in Rust templates
   (marks-card-container, marks-card-header, marks-card-title, etc.) */
@media print {
  .marks-card-container,
  .marks-card-header,
  .marks-card-title,
  .marks-card-text-muted,
  .marks-card-table,
  .marks-card-badge,
  .marks-card-badge-primary,
  .marks-card-badge-success,
  .marks-card-badge-danger,
  .marks-card-form-header,
  .marks-card-form-body,
  .marks-card-form-container,
  .marks-card-form-section,
  .marks-card-empty-state,
  #marksCardPreview,
  .marks-card-modal-overlay {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* print container: scoped to marks-card only — does not affect fee receipt containers */
  .marks-card-container .print-container,
  #marksCardPreview .print-container {
    border: 1px solid #000 !important;
    padding: 10mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* marks-card-header: no extra border */
  .marks-card-header {
    border: none !important;
  }

  .marks-card-title {
    color: #0b2540 !important;
  }

  /* Table header fallback */
  .marks-card-table thead th {
    background: #eef2ff !important;
    color: #0b2540 !important;
    border-color: #bbb !important;
  }

  /* Badges */
  .marks-card-badge-primary { background: #4c6ef5 !important; color: #fff !important; }
  .marks-card-badge-success { background: #28a745 !important; color: #fff !important; }
  .marks-card-badge-danger { background: #dc3545 !important; color: #fff !important; }

  /* Hide helper/updated sections that appear below main card */
  #updatedMarksCardsSection,
  #updatedMarksCardsSection *,
  .marks-card-filter-container,
  .marks-card-empty-state,
  .marks-card-table-footer,
  .marks-card-table-container td.text-center.text-muted,
  .marks-card-table-container td.text-center.text-muted .d-flex {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Print */
@media print {
    .marks-card-container {
        border: 2px solid #000;
        box-shadow: none;
    }
}

/* ================= FINAL A4 FULL PAGE PRINT ================= */

@media print {

  /* Exact A4 */
  @page {
    size: auto;
    margin: 10mm;;
  }
  /* Remove browser print offset */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Remove ALL background layers */
  body,
  html {
    background: white !important;
  }

  /* Hide bootstrap backdrop */
  .modal-backdrop,
  .modal-backdrop.show {
    display: none !important;
    visibility: hidden !important;
  }

  /* Remove modal shadow/border/background */
  .modal,
  .modal-dialog,
  .modal-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Remove any outer container background */
  .marks-card-modal-overlay {
    background: white !important;
  }

  /* Remove unwanted borders */
  * {
    box-shadow: none !important;
  }
  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: white !important;
  }

  /* Show modal wrapper (no centering) */
  .marks-card-modal-overlay {
    visibility: visible !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
    background: white !important;
    display: block !important;
  }

  /* Show marks card */
  #marksCardPreview,
  #marksCardPreview * {
    visibility: visible !important;
  }

  #marksCardPreview {
    position: relative;
    width: 194mm;          /* FULL printable width (A4 − margins) */
    max-width: 194mm;
    margin: 0 auto;
    padding: 6mm 3mm;      /* very small side padding */
    box-sizing: border-box;
  }

  /* Remove modal restrictions */
  .modal,
  .modal-dialog,
  .modal-content,
  .modal-body,
  .marks-card-modal-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Hide header/footer/buttons */
  .modal-header,
  .modal-footer,
  button,
  .btn {
    display: none !important;
  }

  /* Avoid table split */
  table {
    page-break-inside: avoid;
  }

  /* Force single page */
  #marksCardPreview {
    page-break-before: avoid;
    page-break-after: avoid;
  }
  .modal-dialog {
    max-width: none !important;
    width: 100% !important;
  }

  /* Keep colors */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Allow full content but force single A4 page */
  #marksCardPreview {
    min-height: 241mm;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;

    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Prevent inner break */
  #marksCardPreview * {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }


  .marks-card-header h1,
  .marks-card-header h4,
  .student-info,
  .result-section,
  .remarks-section,
  .signature-section {
    margin-top: 2mm !important;
    margin-bottom: 2mm !important;
  }

  /* Reduce table padding slightly (keeps design same) */
  .marks-table th,
  .marks-table td {
    padding: 3px 5px !important;
  }

}