/* ============================================================
   Apex POS — Site-wide Mobile Responsive CSS v2
   Goals: usable sales list, add invoice, purchases, contacts,
   reports filters, modals, sidebar navigation on phones.
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent accidental horizontal scroll (desktop safe) */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

/* Mobile menu toggle: hidden on large screens */
.mobile-menu-toggle {
    display: none !important;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1040;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active { display: block; }

/* ============================================================
   TABLET ≤ 1024px
   ============================================================ */
@media screen and (max-width: 1024px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border: 1px solid rgba(255,255,255,.25) !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,.12) !important;
        color: #fff !important;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mobile-menu-toggle i {
        font-size: 18px;
        color: #fff !important;
    }

    /* Off-canvas sidebar */
    .side-bar,
    .main-sidebar,
    aside.side-bar,
    .sidebar-mini .side-bar {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1050 !important;
        transition: left 0.25s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.2) !important;
    }
    .side-bar.mobile-open,
    .main-sidebar.mobile-open,
    aside.side-bar.mobile-open,
    .sidebar-mini .side-bar.mobile-open {
        left: 0 !important;
    }

    main,
    .content-wrapper,
    .main-content,
    .wrapper,
    .thetop {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #scrollable-container {
        overflow-x: hidden !important;
    }

    .content {
        padding: 10px 10px 24px !important;
    }

    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
}

/* ============================================================
   PHONE ≤ 768px
   ============================================================ */
@media screen and (max-width: 768px) {
    .mobile-only { display: block !important; }
    .desktop-only,
    .hide-on-mobile,
    .hidden-mobile { display: none !important; }

    body {
        font-size: 14px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* ----- Header ----- */
    #app-header {
        height: 56px !important;
        padding: 0 10px !important;
        gap: 4px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
    }
    #app-header .hb,
    #app-header > a,
    #app-header > button {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    /* ----- Page banners / titles ----- */
    .pg-banner {
        margin: 0 0 12px !important;
        border-radius: 12px !important;
    }
    .pg-banner-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px !important;
    }
    .pg-banner-title h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .pg-banner-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .pg-banner-actions .pg-add-btn,
    .pg-banner-actions .btn,
    .pg-banner-actions a {
        flex: 1 1 auto !important;
        min-height: 42px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .content-header {
        padding: 8px 4px !important;
        margin: 0 0 8px !important;
    }
    .content-header h1 {
        font-size: 1.25rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* ----- Boxes / cards ----- */
    .box {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        overflow: hidden;
    }
    .box-header {
        padding: 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .box-header > .box-tools {
        float: none !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .box-body,
    .box-footer {
        padding: 12px !important;
    }

    /* ----- Forms: stack columns, big inputs (no iOS zoom) ----- */
    .form-group { margin-bottom: 14px !important; }
    .form-control,
    .input-sm.form-control,
    select.form-control,
    .select2-container--default .select2-selection--single {
        min-height: 44px !important;
        height: auto !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
    textarea.form-control {
        min-height: 96px !important;
        font-size: 16px !important;
    }
    .input-group .form-control {
        min-height: 44px !important;
    }
    .input-group-addon {
        min-height: 44px !important;
        line-height: 1.2 !important;
        padding: 10px 12px !important;
    }
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px !important;
        font-size: 16px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }

    /* Bootstrap grid → full width on phone */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-sm-"],
    .row > [class*="col-xs-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* Keep tight inline cols when explicitly marked */
    .row > .col-keep-inline {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    /* ----- Buttons: do NOT force all buttons full width ----- */
    .btn {
        min-height: 40px;
        padding: 8px 14px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    /* Primary form / footer actions full width */
    .box-footer .btn,
    form .box-footer .btn,
    .modal-footer .btn,
    .form-actions .btn,
    .pull-right.btn-primary,
    .tw-dw-btn-primary,
    button[type="submit"].btn-primary,
    .btn-success.btn-block,
    .btn-primary.btn-block {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    /* Icon / table action buttons stay compact */
    .btn-xs,
    .btn-group-xs > .btn,
    .btn-group-xs .btn,
    table .btn,
    .dataTables_wrapper .btn,
    .dropdown-toggle.btn-xs,
    .md-icon-btn,
    .btn-modal.btn-xs {
        min-height: 32px !important;
        min-width: 32px !important;
        width: auto !important;
        padding: 4px 8px !important;
        margin-bottom: 0 !important;
    }
    .btn-group {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .btn-group > .btn {
        width: auto !important;
        margin: 0 !important;
    }

    /* Sticky save bar on create/edit forms */
    form#add_sell_form .box-footer,
    form#edit_sell_form .box-footer,
    form#add_purchase_form .box-footer,
    form#edit_contact_form .box-footer,
    form .sticky-form-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        background: #fff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -6px 16px rgba(15,23,42,.08) !important;
        padding: 12px !important;
        margin: 0 -12px -12px !important;
    }

    /* ----- Filters component ----- */
    .filters-box,
    .box.filters,
    [class*="filter"] .box-body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ----- Tables / DataTables ----- */
    .table-responsive {
        margin: 0 -4px !important;
        border-radius: 10px;
    }
    table.dataTable,
    .table {
        font-size: 12px !important;
        width: 100% !important;
    }
    .table th,
    .table td,
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 8px 6px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 10px !important;
        min-height: 36px !important;
    }
    /* Hide low-value columns when marked */
    .table .hide-mobile,
    table.dataTable .hide-mobile {
        display: none !important;
    }

    /* ----- Modals: near full screen ----- */
    .modal-dialog {
        margin: 8px !important;
        width: auto !important;
        max-width: calc(100% - 16px) !important;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 16px) !important;
        width: auto !important;
    }
    .modal-content {
        border-radius: 14px !important;
        max-height: calc(100vh - 16px) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 70vh !important;
        padding: 14px !important;
    }
    .modal-header,
    .modal-footer {
        padding: 12px 14px !important;
        flex-shrink: 0 !important;
    }
    .modal-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .modal-footer .btn {
        flex: 1 1 40% !important;
        margin: 0 !important;
    }

    /* ----- Sell / Purchase product tables ----- */
    #pos_table,
    #purchase_entry_table,
    .product_row {
        font-size: 12px !important;
    }
    #pos_table input.form-control,
    #purchase_entry_table input.form-control,
    table.table input.input_number {
        min-height: 40px !important;
        font-size: 16px !important;
        min-width: 64px !important;
    }

    /* ----- Date range picker ----- */
    .daterangepicker {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
    .daterangepicker .drp-calendar {
        max-width: 100% !important;
        float: none !important;
    }

    /* ----- Toastr / alerts ----- */
    .toast-top-right {
        top: 60px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
    }

    /* ----- Dashboard info boxes ----- */
    .info-box {
        margin-bottom: 10px !important;
        min-height: 70px !important;
    }
    .info-box-icon {
        width: 56px !important;
        height: 70px !important;
        line-height: 70px !important;
        font-size: 22px !important;
    }
    .info-box-content {
        margin-left: 64px !important;
        padding: 8px !important;
    }

    /* ----- Utility ----- */
    .text-center-mobile { text-align: center !important; }
    .full-width-mobile { width: 100% !important; }
    .no-pad-mobile { padding-left: 0 !important; padding-right: 0 !important; }

    /* Dropdown menus full-ish width */
    .dropdown-menu {
        max-width: calc(100vw - 24px) !important;
    }

    /* Print hide */
    @media print {
        .mobile-menu-toggle,
        .sidebar-overlay,
        #pos-mobile-tabs,
        .pos-mobile-cart-footer { display: none !important; }
    }
}

/* ============================================================
   SMALL PHONE ≤ 480px
   ============================================================ */
@media screen and (max-width: 480px) {
    body { font-size: 13px !important; }
    .content-header h1,
    .pg-banner-title h1 { font-size: 16px !important; }
    .table th,
    .table td { font-size: 11px !important; padding: 6px 4px !important; }
    #app-header .hb-label { display: none !important; }
}

/* ============================================================
   POS layout: don't force site-wide button rules on POS chrome
   ============================================================ */
@media screen and (max-width: 768px) {
    body.pos-material .btn {
        width: auto !important;
    }
    body.pos-material #pos-mobile-tabs .pos-tab-btn {
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}