/* 80mm Thermal Receipt Printer CSS Stylesheet */
@media print {
    /* Hide all non-printable elements */
    .no-print, 
    nav, 
    .navbar, 
    footer, 
    .main-footer,
    .btn, 
    .payment-panel,
    .modal-backdrop,
    .dashboard-header,
    .no-print * {
        display: none !important;
    }

    /* Reset page and body margins */
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Target the printable receipt container specifically */
    .print-receipt-container {
        width: 80mm !important;
        padding: 2mm !important;
        box-sizing: border-box !important;
    }

    /* Header styling */
    .receipt-header {
        text-align: center !important;
        margin-bottom: 4mm !important;
    }

    .receipt-title {
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        margin-bottom: 1mm !important;
    }

    .receipt-meta {
        font-size: 11px !important;
        margin-bottom: 2mm !important;
    }

    /* Separators */
    .receipt-separator {
        border-top: 1px dashed #000000 !important;
        margin: 2mm 0 !important;
        height: 0 !important;
    }
    
    .receipt-double-separator {
        border-top: 2px double #000000 !important;
        margin: 2mm 0 !important;
        height: 0 !important;
    }

    /* Tables */
    .receipt-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 3mm !important;
    }

    .receipt-table th {
        font-weight: bold !important;
        text-align: left !important;
        border-bottom: 1px dashed #000000 !important;
        padding: 1mm 0 !important;
        font-size: 11px !important;
    }

    .receipt-table td {
        padding: 1mm 0 !important;
        font-size: 11px !important;
        vertical-align: top !important;
    }

    .receipt-table .text-right {
        text-align: right !important;
    }

    .receipt-table .text-center {
        text-align: center !important;
    }

    /* Alignment and Totals */
    .receipt-totals {
        width: 100% !important;
        margin-top: 2mm !important;
    }

    .receipt-total-row {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 12px !important;
        padding: 0.5mm 0 !important;
    }

    .receipt-total-row.grand-total {
        font-size: 15px !important;
        font-weight: bold !important;
    }

    /* Footer text */
    .receipt-footer {
        text-align: center !important;
        margin-top: 5mm !important;
        font-size: 10px !important;
    }

    /* Page breaks */
    .page-break {
        page-break-after: always !important;
    }
}

/* Screen Preview Styling (Useful for cashier review before print) */
.print-receipt-container {
    background: #ffffff;
    color: #000000;
    font-family: 'Courier New', Courier, monospace;
    width: 80mm;
    margin: 20px auto;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    border-radius: 4px;
}

.receipt-header {
    text-align: center;
    margin-bottom: 15px;
}

.receipt-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.receipt-meta {
    font-size: 12px;
}

.receipt-separator {
    border-top: 1px dashed #000000;
    margin: 10px 0;
}

.receipt-double-separator {
    border-top: 3px double #000000;
    margin: 10px 0;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
}

.receipt-table th {
    border-bottom: 1px dashed #000000;
    padding: 5px 0;
    font-size: 12px;
}

.receipt-table td {
    padding: 5px 0;
    font-size: 12px;
}

.receipt-table .text-right {
    text-align: right;
}

.receipt-totals {
    margin-top: 10px;
}

.receipt-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
}

.receipt-total-row.grand-total {
    font-size: 16px;
    font-weight: bold;
}

.receipt-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 11px;
}