/* Petrol Pump POS - Custom Utility & Print Stylesheet */

/* Mobile Touch & Ergonomics */
html, body {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

/* Custom minimal scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Safe area for mobile navigation */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* Touch active scale feedback */
button:active, a.cursor-pointer:active {
    transform: scale(0.97);
    transition: transform 0.05s ease;
}

/* Base Modal and Display Utility */
.hidden, [hidden] {
    display: none !important;
}

/* Backdrop Blurs and Animations */
.backdrop-blur-xs {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Prevent mobile browser zoom on inputs */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px;
    }
}

/* ----------------------------------------------------
   PROFESSIONAL A4 & THERMAL PRINT MEDIA STYLESHEET
   ---------------------------------------------------- */
@media print {
    /* 1. Global Reset & Page Container */
    @page {
        size: A4 portrait;
        margin: 10mm 10mm 10mm 10mm;
    }

    html, body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
        font-size: 10pt !important;
        line-height: 1.3 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        display: block !important;
        width: 100% !important;
    }

    /* 2. Neutralize all Tailwind Layout Constraints & Overflows */
    div,
    main,
    section,
    article {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        position: static !important;
        box-shadow: none !important;
    }

    /* Reset all shadows without hiding elements */
    .shadow-xs, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
        box-shadow: none !important;
    }

    /* 3. Hide all Web Navigation, UI Chrome, Action Buttons, and Search Controls */
    nav,
    header,
    aside,
    #sidebar,
    #sidebar-backdrop,
    #topbar,
    .no-print,
    .tab-btn,
    .report-nav-btn,
    button,
    input,
    select,
    textarea,
    #qa-toast {
        display: none !important;
        visibility: hidden !important;
    }

    /* 4. Hide screen-only modal dialogs by default (unless printing receipt) */
    .modal-backdrop,
    #qa-customer-modal,
    #qa-supplier-modal,
    #qa-product-modal,
    #qa-account-modal,
    #qa-expense-category-modal,
    #qa-staff-modal,
    #customer-modal,
    #supplier-modal,
    #expense-modal,
    #account-modal,
    #startShiftModal,
    #closeShiftModal,
    #tankDipModal,
    #tankModal,
    #nozzleModal,
    #fuel-rate-modal,
    #lube-product-modal {
        display: none !important;
        visibility: hidden !important;
    }

    /* 5. Printable Report & Statement Containers */
    #printable-report-area,
    #printable-statement-area,
    .printable-sheet,
    .printable-area {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    /* 6. Formal Accounting Tables */
    table,
    .report-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 8px !important;
        margin-bottom: 12px !important;
        page-break-inside: auto !important;
        font-size: 8.5pt !important;
        border: 1px solid #334155 !important;
        display: table !important;
        visibility: visible !important;
    }

    thead {
        display: table-header-group !important;
    }

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

    tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }

    th {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        font-size: 7.5pt !important;
        letter-spacing: 0.03em !important;
        border: 1px solid #334155 !important;
        padding: 4px 6px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    td {
        border: 1px solid #475569 !important;
        color: #000000 !important;
        padding: 4px 6px !important;
        vertical-align: middle !important;
    }

    /* High-contrast Zebra Striping */
    tbody tr:nth-child(even) td {
        background-color: #f8fafc !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Totals and Summary Rows */
    .table-total-row td,
    tr.total-row td,
    tfoot td {
        background: #e2e8f0 !important;
        font-weight: 900 !important;
        border-top: 2px solid #0f172a !important;
        border-bottom: 2px solid #0f172a !important;
        color: #0f172a !important;
        font-size: 9pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Numeric and Monospace Alignment */
    .font-mono,
    .num-col,
    td.text-right,
    th.text-right {
        font-family: 'JetBrains Mono', ui-monospace, monospace !important;
        font-weight: 700 !important;
    }

    /* 7. Formal Station Letterhead & Signatures */
    .print-only,
    .print-letterhead,
    .print-signatures {
        display: block !important;
        visibility: visible !important;
    }

    .print-letterhead {
        border-bottom: 2px solid #0f172a !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    .print-signatures {
        margin-top: 24px !important;
        page-break-inside: avoid !important;
    }

    /* 8. Dedicated Thermal Receipt Printing (80mm / 58mm) */
    body:has(#receipt-modal:not(.hidden)) #receipt-modal,
    #receipt-modal:not(.hidden) {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        width: 80mm !important;
        max-width: 80mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    body:has(#receipt-modal:not(.hidden)) #receipt-modal > div {
        max-width: 80mm !important;
        width: 80mm !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body:has(#receipt-modal:not(.hidden)) #receipt-print-content {
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
    }

    body:has(#receipt-modal:not(.hidden)) #printable-report-area,
    body:has(#receipt-modal:not(.hidden)) #printable-statement-area {
        display: none !important;
    }
}