@media print {
    @page {
        size: auto;
        margin: 3mm;
    }

    html,
    body {
        background: #fff !important;
    }

    /* The invoice detail is rendered inside EditorDialog, which is a sibling of
       .invoice-page. Keep only the open receipt dialog in the print tree. */
    .sidebar,
    .workspace-heading,
    .mobile-header,
    .mobile-bottom-nav,
    .request-loading-indicator,
    .invoice-page,
    .editor-dialog[open] > .dialog-heading,
    .invoice-no-print {
        display: none !important;
    }

    .app-shell,
    .app-main,
    .page-content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .editor-dialog[open] {
        display: block !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        color: #111 !important;
        background: #fff !important;
    }

    .editor-dialog[open]::backdrop {
        display: none !important;
        background: transparent !important;
    }

    .editor-dialog[open] > .dialog-content,
    .editor-dialog[open] .dialog-fields {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .invoice-print-document,
    body.tsports-payment-receipt-print .payment-receipt-document {
        display: block !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        color: #111 !important;
        background: #fff !important;
        font-family: Arial, "Segoe UI", sans-serif !important;
        font-size: 10px !important;
    }

    .invoice-print-header,
    body.tsports-payment-receipt-print .payment-receipt-header {
        display: block !important;
        text-align: center !important;
        margin-bottom: 9px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #888 !important;
    }

    .invoice-print-header .print-brand,
    body.tsports-payment-receipt-print .payment-receipt-brand {
        display: block !important;
        margin-bottom: 2px !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        color: #111 !important;
    }

    .invoice-print-header .print-contact,
    body.tsports-payment-receipt-print .payment-receipt-contact {
        display: block !important;
        margin: 1px 0 !important;
        color: #222 !important;
        font-size: 9px !important;
        overflow-wrap: anywhere !important;
    }

    .invoice-print-header h1,
    body.tsports-payment-receipt-print .payment-receipt-header h2 {
        margin: 5px 0 2px !important;
        font-size: 14px !important;
        color: #111 !important;
    }

    .invoice-print-header small,
    body.tsports-payment-receipt-print .payment-receipt-header small {
        color: #333 !important;
        font-size: 9px !important;
    }

    /* The on-screen detail heading repeats receipt number/source already printed above. */
    .invoice-print-document .detail-heading {
        display: none !important;
    }

    .invoice-info-grid,
    .invoice-note,
    .invoice-lines,
    .invoice-totals,
    body.tsports-payment-receipt-print .payment-receipt-info,
    body.tsports-payment-receipt-print .payment-receipt-note,
    body.tsports-payment-receipt-print .payment-receipt-lines,
    body.tsports-payment-receipt-print .payment-receipt-totals {
        break-inside: avoid;
    }

    .invoice-info-grid,
    body.tsports-payment-receipt-print .payment-receipt-info {
        margin-top: 0 !important;
        gap: 3px !important;
    }

    .invoice-info-grid > div,
    body.tsports-payment-receipt-print .payment-receipt-info > div {
        padding: 5px !important;
        border: 1px solid #bbb !important;
        border-radius: 2px !important;
        background: #fff !important;
    }

    .invoice-info-grid span,
    body.tsports-payment-receipt-print .payment-receipt-info span,
    .invoice-note span,
    body.tsports-payment-receipt-print .payment-receipt-note span {
        color: #333 !important;
        font-size: 8px !important;
    }

    .invoice-info-grid strong,
    body.tsports-payment-receipt-print .payment-receipt-info strong {
        margin-top: 1px !important;
        color: #111 !important;
        font-size: 10px !important;
    }

    .invoice-note,
    body.tsports-payment-receipt-print .payment-receipt-note {
        margin-top: 5px !important;
        padding: 5px !important;
        border: 0 !important;
        border-bottom: 1px solid #bbb !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    .invoice-note p,
    body.tsports-payment-receipt-print .payment-receipt-note p {
        margin: 2px 0 0 !important;
        color: #111 !important;
        font-size: 9px !important;
    }

    .invoice-lines,
    body.tsports-payment-receipt-print .payment-receipt-lines {
        margin-top: 7px !important;
        border: 1px solid #999 !important;
        border-radius: 0 !important;
    }

    .line-header,
    body.tsports-payment-receipt-print .payment-receipt-line.heading {
        display: grid !important;
        background: #f2f2f2 !important;
        color: #111 !important;
        font-size: 8px !important;
        font-weight: 800 !important;
    }

    .line-row,
    body.tsports-payment-receipt-print .payment-receipt-line {
        padding: 4px !important;
        gap: 3px !important;
        border-color: #ddd !important;
        color: #111 !important;
        font-size: 9px !important;
    }

    .line-row strong,
    body.tsports-payment-receipt-print .payment-receipt-line strong,
    .invoice-totals strong,
    body.tsports-payment-receipt-print .payment-receipt-totals strong,
    .received,
    .positive-difference,
    .negative-difference {
        color: #111 !important;
    }

    .invoice-totals,
    body.tsports-payment-receipt-print .payment-receipt-totals {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        margin-top: 6px !important;
    }

    .invoice-totals > div,
    body.tsports-payment-receipt-print .payment-receipt-totals > div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 6px !important;
        padding: 3px 1px !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    .invoice-totals span,
    body.tsports-payment-receipt-print .payment-receipt-totals span {
        color: #111 !important;
        font-size: 9px !important;
    }

    .invoice-totals strong,
    body.tsports-payment-receipt-print .payment-receipt-totals strong {
        display: block !important;
        margin: 0 !important;
        text-align: right !important;
        font-size: 10px !important;
    }

    .invoice-print-footer,
    body.tsports-payment-receipt-print .payment-receipt-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        margin-top: 9px !important;
        padding-top: 8px !important;
        border-top: 1px dashed #888 !important;
        color: #111 !important;
        text-align: center !important;
    }

    .invoice-print-qr,
    body.tsports-payment-receipt-print .payment-receipt-qr {
        display: grid !important;
        place-items: center !important;
        width: 34mm !important;
        height: 34mm !important;
        margin: 1mm auto !important;
        overflow: hidden !important;
    }

    .invoice-print-qr-image,
    body.tsports-payment-receipt-print .payment-receipt-qr-image,
    .invoice-print-qr img,
    body.tsports-payment-receipt-print .payment-receipt-qr img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Checkout receipts can be opened from Social or Sân mở. When their print
       button is used, hide the operational page and print only the receipt dialog. */
    body.tsports-payment-receipt-print .page-content > :not(.editor-dialog) {
        display: none !important;
    }

    body.tsports-payment-receipt-print .editor-dialog[open] {
        display: block !important;
    }

    body.tsports-receipt-paper-80 .invoice-info-grid,
    body.tsports-receipt-paper-80 .payment-receipt-info {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.tsports-receipt-paper-80 .line-header,
    body.tsports-receipt-paper-80 .line-row,
    body.tsports-receipt-paper-80 .payment-receipt-line {
        grid-template-columns: minmax(0, 1fr) 12mm 21mm 23mm !important;
    }

    body.tsports-receipt-paper-58 .invoice-info-grid,
    body.tsports-receipt-paper-58 .payment-receipt-info {
        grid-template-columns: 1fr !important;
    }

    body.tsports-receipt-paper-58 .line-header,
    body.tsports-receipt-paper-58 .payment-receipt-line.heading {
        display: none !important;
    }

    body.tsports-receipt-paper-58 .line-row,
    body.tsports-receipt-paper-58 .payment-receipt-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 2px 5px !important;
        padding: 4px 3px !important;
    }

    body.tsports-receipt-paper-58 .line-description,
    body.tsports-receipt-paper-58 .payment-receipt-line .description {
        grid-column: 1 / -1 !important;
        font-weight: 800 !important;
    }

    body.tsports-receipt-paper-58 .line-row > span:nth-child(2)::before,
    body.tsports-receipt-paper-58 .payment-receipt-line > span:nth-child(2)::before {
        content: "SL: ";
        color: #444 !important;
    }

    body.tsports-receipt-paper-58 .line-row > span:nth-child(3),
    body.tsports-receipt-paper-58 .payment-receipt-line > span:nth-child(3) {
        display: none !important;
    }

    body.tsports-receipt-paper-58 .line-row > strong,
    body.tsports-receipt-paper-58 .payment-receipt-line > strong {
        grid-column: 2 !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    body.tsports-receipt-paper-58 .invoice-print-qr,
    body.tsports-receipt-paper-58 .payment-receipt-qr {
        width: 29mm !important;
        height: 29mm !important;
    }

    body.tsports-receipt-paper-58 .invoice-print-header .print-brand,
    body.tsports-receipt-paper-58 .payment-receipt-brand {
        font-size: 15px !important;
    }

    body.tsports-receipt-paper-58 .invoice-print-header h1,
    body.tsports-receipt-paper-58 .payment-receipt-header h2 {
        font-size: 12px !important;
    }
}