/* =============================================
   PRINT & RECEIPT SPECIFIC STYLES
   ============================================= */

/* Inter Font for Modern Look (Dashboard) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --receipt-black: #000000;
}

/* Base Print Setup */
@media screen {
    .print-preview-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
}

/* THE RECEIPT BOX (Classic Precision) */
.receipt {
    background: white;
    width: 100%;
    /* Default maximum for preview screen */
    max-width: 19.5cm;
    min-height: auto;
    padding: 0.6cm 1.2cm;
    padding-bottom: 0.6cm;
    /* Ensure space after signatures */
    border: 2px solid var(--receipt-black);
    position: relative;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: var(--receipt-black);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
}

/* BKU & Kode Rekening positioning */
.receipt-kode-rek {
    position: absolute;
    top: 0.4cm;
    left: 0.8cm;
    z-index: 10;
}

.receipt-no-bku {
    position: absolute;
    top: 0.4cm;
    right: 0.8cm;
    z-index: 10;
}

.receipt-title {
    margin-top: 1.5cm;
}

.bku-table {
    border-collapse: collapse;
}

.bku-table td {
    border: 1px solid var(--receipt-black);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.bku-lbl {
    background: #f8fafc;
    min-width: 80px;
}

/* Typography */
.receipt-title {
    font-family: 'Arial Black', sans-serif;
    text-decoration: underline;
}

/* Skew Elements for Amounts & Spelling */
.skew-box {
    border: 1.5px solid var(--receipt-black);
    min-width: 100px;
}

.jumlah-box {
    min-width: 250px;
}

/* Signature Blocks */
.sig-blank {
    height: 40px;
}

.sig-name {
    font-family: 'Arial', sans-serif;
    font-weight: 900;
    font-size: 12px;
}

/* =============================================
   PRINT MEDIA RULES
   ============================================= */
@media print {
    @page {
        /* Default fallback — overridden by JS updatePrintStyles() */
        size: A4 portrait;
        margin: 0.5cm;
    }

    html,
    body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Hide all body content - visibility approach to avoid blank pages */
        visibility: hidden;
    }

    /* Hide everything not related to print */
    aside,
    header,
    main,
    .no-print,
    button,
    #confirmModal,
    #settingsModal,
    #formModal,
    #main-content {
        display: none !important;
    }

    /* Reset Modal Containers for Print */
    #printModal {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        pointer-events: auto !important;
        backdrop-filter: none !important;
    }

    #printModal * {
        visibility: visible !important;
    }

    /* Suppress only no-print within modal */
    #printModal .no-print {
        display: none !important;
        visibility: hidden !important;
    }

    #printModal>div {
        transform: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .print-preview-body {
        padding: 0 !important;
        background: white !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* The actual receipt — fills the full printable area */
    .receipt {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border: 2px solid #000 !important;
        box-shadow: none !important;
        page-break-after: always;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        display: block !important;
        box-sizing: border-box !important;
    }

    .receipt:last-child {
        page-break-after: auto;
    }
}

/* Custom Scrollbar for Modern UI */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Scroll to Top Button */
#scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media print {
    #scroll-to-top {
        display: none !important;
    }
}