/**
 * responsive-mobile-patch.css
 * OptimusCloud Mobile & Tablet Responsive Layout Stylesheet
 * 
 * CRITICAL ARCHITECTURAL CONSTRAINTS:
 * 1. 100% of rules in this stylesheet are wrapped in @media (max-width: 991px) or @media (max-width: 767px).
 * 2. ZERO rules apply to desktop/laptop viewports (>= 992px), ensuring 100% pixel-perfect preservation of Windows desktop view.
 * 3. Preserves all input IDs, table structures, and Razor bindings so no JS events, POS hotkeys, or calculation scripts break.
 */

/* ==============================================================================
   TABLET & MOBILE VIEWPORTS (max-width: 991px)
   ============================================================================== */
@media (max-width: 991px) {
    /* Prevent unwanted horizontal document blowout */
    html, body {
        overflow-x: hidden !important;
        position: relative !important;
        width: 100% !important;
        -webkit-text-size-adjust: 100%;
    }

    /* Layout wrapper full width adjustments */
    .wrapper,
    .content-wrapper,
    .main-footer,
    .main-header {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Container fluid padding optimization */
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Hamburger Pushmenu Button: Accessible touch target */
    [data-widget="pushmenu"] {
        padding: 0.5rem 0.75rem !important;
        font-size: 1.25rem !important;
        min-height: 42px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Sidebar Navigation & Overlay */
    .main-sidebar {
        z-index: 1050 !important;
        transition: transform 0.3s ease-in-out, margin-left 0.3s ease-in-out !important;
    }

    #sidebar-overlay {
        background-color: rgba(0, 0, 0, 0.55) !important;
        z-index: 1040 !important;
        cursor: pointer !important;
    }

    /* Universal Modal Responsiveness: Invoices, Shifts, Day Closing, Filters */
    .modal-dialog,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-md,
    .modal-dialog.modal-sm,
    .modal-dialog[style*="float"],
    .modal-dialog[style*="width"] {
        max-width: 95vw !important;
        width: 95vw !important;
        min-width: 0 !important;
        margin: 10px auto !important;
        float: none !important;
        height: auto !important;
    }

    .modal-content,
    .modal-content[style*="height"] {
        max-height: 90vh !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }

    .modal-header .close {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.6rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 12px !important;
        margin: -1rem -1rem -1rem auto !important;
    }

    /* Modal Form Controls: Comfortable touch heights */
    .modal-body .form-control,
    .modal-body .input-group > .form-control {
        min-height: 40px !important;
    }

    /* Chosen Dropdown Mobile Adaptability */
    .chosen-container,
    .chosen-container.chosen-container-single,
    .chosen-container.chosen-container-multi {
        width: 100% !important;
        max-width: 100% !important;
    }

    .chosen-container-single .chosen-single {
        min-height: 40px !important;
        line-height: 38px !important;
        border-radius: 4px !important;
    }

    .chosen-container-single .chosen-single div {
        top: 6px !important;
    }

    .chosen-container .chosen-drop {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Modal Footer Buttons */
    .modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0.75rem !important;
    }

    .modal-footer .btn {
        min-height: 42px !important;
        min-width: 120px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Touch-friendly table scrolling inside cards and modals */
    .table-responsive,
    .lineentrytable,
    [class*="table-responsive"] {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 0.5rem !important;
    }

    /* Tabs scrolling on mobile */
    .nav-tabs,
    .card-tabs .nav-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 1px solid #dee2e6 !important;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 0.6rem 0.9rem !important;
    }
}

/* ==============================================================================
   SMARTPHONE & COMPACT MOBILE VIEWPORTS (max-width: 767px)
   ============================================================================== */
@media (max-width: 767px) {
    /* --------------------------------------------------------------------------
       1. DASHBOARD (/Home/H01)
       -------------------------------------------------------------------------- */
    /* 30-Day Sales Bar Chart Container */
    #chart-container {
        width: 100% !important;
        height: 240px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #sales-chart {
        min-width: 100% !important;
        max-height: 240px !important;
    }

    /* Summary cards: Clean 2x2 grid */
    .col-lg-3.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 4px !important;
    }

    .small-box {
        margin-bottom: 8px !important;
        border-radius: 6px !important;
    }

    .small-box .inner {
        padding: 8px 10px !important;
    }

    .small-box .inner h5 {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .small-box .icon {
        display: none !important;
    }

    .small-box .small-box-footer {
        font-size: 0.72rem !important;
        padding: 3px 6px !important;
    }

    /* Dashboard Data Tables: Readable typography and horizontal scroll */
    #tblPayableReport,
    #tblReceivableReport,
    #tblBankReport,
    #tblCashItemReport,
    #tblExpenseReport {
        min-width: 280px !important;
        margin-bottom: 0 !important;
    }

    #tblPayableReport td,
    #tblReceivableReport td,
    #tblBankReport td,
    #tblCashItemReport td,
    #tblExpenseReport td {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
    }

    /* --------------------------------------------------------------------------
       2. REPORT MANAGER & SALES INVOICES (/ReportManager/RPS01 & Reports)
       -------------------------------------------------------------------------- */
    /* Filter & Action Buttons Bar */
    .callout .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .callout .row .btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
    }

    /* Full width on main filter trigger button */
    .callout .row .btn:first-child {
        flex: 1 1 100% !important;
    }

    /* Report Data Containers: Mobile viewport height */
    #dvDetailed,
    #dvMain,
    #dvSOA,
    #dvReport {
        min-height: 320px !important;
        max-height: 65vh !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #tblDetailed,
    #tblReport,
    #tblSOA {
        min-width: 680px !important;
    }

    #tblDetailed th, #tblDetailed td,
    #tblReport th, #tblReport td,
    #tblSOA th, #tblSOA td {
        padding: 5px 8px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    /* Report Filter Modal (#modal-reportfilter) */
    #modal-reportfilter .modal-dialog {
        float: none !important;
        margin: 10px auto !important;
        width: 95vw !important;
        max-width: 95vw !important;
        height: auto !important;
    }

    #modal-reportfilter .modal-content {
        height: auto !important;
        max-height: 88vh !important;
    }

    #modal-reportfilter .nav-pills > li,
    #modal-reportfilter .nav-pills > .nav-item {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    #modal-reportfilter .nav-pills .nav-link {
        padding: 4px 6px !important;
        font-size: 0.88rem !important;
        color: inherit !important;
        background: transparent !important;
    }

    #modal-reportfilter select,
    #modal-reportfilter input[type="text"],
    #modal-reportfilter .form-control {
        width: 100% !important;
        min-height: 40px !important;
        border-radius: 4px !important;
    }

    #modal-reportfilter .modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #modal-reportfilter .modal-footer .btn {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------------------------
       3. TRANSACTION BUTTON CONTROLS (_ButtonControl.cshtml & Line Items)
       -------------------------------------------------------------------------- */
    #btnPanel {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    #btnPanel .btn {
        flex: 1 1 calc(50% - 6px) !important;
        width: auto !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }

    #btnPanel #cmdAttach {
        width: auto !important;
    }

    /* Line item action header buttons in transaction forms */
    .card-header .input-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .card-header .input-group .btn {
        flex: 1 1 auto !important;
        min-height: 40px !important;
        margin: 0 !important;
    }

    .lineentrytable {
        min-width: 680px !important;
    }

    /* --------------------------------------------------------------------------
       4. POINT OF SALE & RESTAURANT POS (PosRetail & RST03)
       -------------------------------------------------------------------------- */
    /* Search Bar in POS Invoices List */
    #modal-InvoicesList .input-group,
    #modal-InvoiceList .input-group {
        flex-direction: column !important;
    }

    #modal-InvoicesList .input-group .form-control,
    #modal-InvoiceList .input-group .form-control {
        width: 100% !important;
        margin-bottom: 6px !important;
        border-radius: 4px !important;
    }

    #modal-InvoicesList .btn,
    #modal-InvoiceList .btn {
        min-height: 42px !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Invoices in Shift Modal (#modal-invoices) */
    #modal-invoices .input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    #modal-invoices .input-group input.form-control {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 4px !important;
    }

    #modal-invoices .input-group .input-group-append {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
        margin-left: 0 !important;
    }

    #modal-invoices .input-group .input-group-append button,
    #modal-invoices .input-group .input-group-append .btn-sm {
        flex: 1 1 50% !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
    }

    #modal-invoices .col-12[style*="padding: 10px"],
    #modal-invoices .col-12[style*="padding:10px"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 0 !important;
    }

    #modal-invoices button[onclick*="GetInvoicesFiltered"] {
        flex: 1 1 calc(50% - 6px) !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
    }

    #modal-invoices .table-responsive {
        max-height: 55vh !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #tblShiftInvoices {
        min-width: 580px !important;
    }

    /* POS Action Buttons bar */
    #ActionBarPayment {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    #ActionBarPayment .btn {
        width: 100% !important;
        min-height: 42px !important;
    }

    /* Day Closing Modal (#modal-session-closing) */
    #modal-session-closing .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 8px !important;
    }

    #modal-session-closing .input-group {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    #modal-session-closing .btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 0.95rem !important;
    }

    /* Master Edit Screens: Product & Account Tabs */
    #custom-tabs-one-tabContent .row > [class*="col-"] {
        margin-bottom: 8px !important;
    }

    .form-group label {
        font-size: 0.88rem !important;
        margin-bottom: 4px !important;
    }

    .form-control {
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }
}