/* ===========================================================================
   UltimatePOS — phone layer
   ===========================================================================

   Loaded through the "additional CSS" business setting, so no application file
   is modified and an update cannot overwrite it.

   Layout changes sit inside a max-width media query: on desktop or tablet the
   POS looks and behaves exactly as it does today.

   The list problem: the POS renders a 13-column, ~1100px wide table into a
   ~320px phone viewport, so you scroll sideways to reach anything.

   The fix is a COMPACT row, not a tall card. With hundreds of products, height
   is what matters. Each row is about 66px:

       [img]  Product name                      price
              SKU AF-COR-002   STOCK 12          [⋮]

   That is roughly ten products per screen instead of three.
   =========================================================================== */

@media (max-width: 767px) {

    /* ---------------------------------------------------------------
       1. Unwrap the table's own scrollers
       --------------------------------------------------------------- */

    .table-responsive,
    .dataTables_wrapper {
        overflow-x: visible !important;
        width: 100% !important;
    }

    .dataTables_scrollBody,
    .dataTables_scroll,
    .dataTables_scrollHead {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }
    .dataTables_scrollHead { display: none !important; }

    /* ---------------------------------------------------------------
       2. One compact row per record
       --------------------------------------------------------------- */

    table.dataTable,
    table.dataTable tbody,
    table.dataTable tr,
    table.dataTable td {
        display: block !important;
        width: auto !important;
    }

    table.dataTable thead,
    table.dataTable tfoot { display: none !important; }

    table.dataTable tr {
        position: relative;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        /* Two gutters: thumbnail on the left, actions button on the right.
           Both are positioned out of the flex flow, so the text content can
           never push them onto a second line. */
        padding: 8px 56px 8px 60px;
        min-height: 64px;
        background: #fff;
        border: 0;
        border-bottom: 1px solid #e9edf2;
        margin: 0;
    }
    table.dataTable tr:active { background: #f4f7ff; }

    table.dataTable td {
        border: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        background: transparent !important;
    }

    /* -- thumbnail, pinned into the left gutter -- */
    table.dataTable td.mob-img {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
    }
    table.dataTable td.mob-img div { display: block !important; }
    table.dataTable td.mob-img img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #e9edf2;
        background: #f4f5f7;
    }

    /* -- line 1: name, price, actions trigger -- */
    /* The name takes the whole first line. Giving it flex-basis 100% is what
       forces the price and the detail chips onto a second line -- without it
       they crowd onto line 1 and squeeze the name down to a few characters. */
    table.dataTable td.mob-primary {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        color: #1a1f27;
        /* One line, then ellipsis, so a single long part name cannot make
           every row taller. Plain nowrap rather than a line clamp, so a short
           name still shows its status badge inline; a long one just clips. */
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        /* room for the price, which sits at the right of this same line */
        padding-right: 82px !important;
    }
    table.dataTable td.mob-primary .label,
    table.dataTable td.mob-primary .badge {
        font-size: 10px;
        padding: 1px 6px;
        vertical-align: middle;
    }

    /* On a verification-coloured row the badge is redundant -- the left stripe
       and the row tint already say it -- and at this width it collides with
       the price. Other labels ("Inactive", "Not for selling") still show,
       because nothing else on the row conveys those. */
    table.dataTable tr.stock-verified td.mob-primary .label,
    table.dataTable tr.stock-stale td.mob-primary .label,
    table.dataTable tr.stock-expired td.mob-primary .label {
        display: none !important;
    }

    /* The price rides at the right of line 1, out of the flex flow, so line 2
       is left entirely to the detail chips. Saves a whole row of height. */
    table.dataTable td.mob-price {
        position: absolute;
        right: 58px;
        top: 9px;
        max-width: 78px;
        text-align: right !important;
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #1a1f27;
    }

    /* -- line 2: remaining values as small labelled chips -- */
    table.dataTable td.mob-meta {
        order: 5;
        display: inline-flex !important;
        align-items: baseline;
        gap: 4px;
        margin: 3px 12px 0 0;
        font-size: 12.5px;
        color: #667085;
        white-space: nowrap !important;
    }
    table.dataTable td.mob-meta::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        opacity: .7;
    }
    table.dataTable td.mob-meta:empty { display: none !important; }

    table.dataTable td.mob-hide { display: none !important; }

    /* -- actions trigger, pinned into the right gutter -- */
    table.dataTable td.mob-actions {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
    }
    table.dataTable td.mob-actions .btn-group { width: 44px; }

    table.dataTable td.mob-actions .dropdown-toggle {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        border: 1px solid #d7dde5 !important;
        background: #fff !important;
        color: #2f6fed !important;
        font-size: 0 !important;      /* hides the button's own label + caret */
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    table.dataTable td.mob-actions .dropdown-toggle::after {
        content: "\22EE";             /* vertical ellipsis */
        font-size: 21px;
        line-height: 1;
        font-weight: 700;
    }
    table.dataTable td.mob-actions .dropdown-toggle .caret,
    table.dataTable td.mob-actions .dropdown-toggle .sr-only { display: none !important; }

    /* The original menu is never shown on a phone -- the sheet replaces it. It
       stays in the DOM because the sheet forwards taps to its links. */
    table.dataTable td.mob-actions .dropdown-menu { display: none !important; }

    /* -- row selection checkbox --
       Hidden on phones: it costs a line of height on every row, and the bulk
       operations it feeds (delete selected, add to location) are desk work.
       Delete this rule to bring it back. */
    table.dataTable td.mob-select { display: none !important; }

    /* ---------------------------------------------------------------
       3. Stock verification colours, as a left edge stripe
       --------------------------------------------------------------- */

    table.dataTable tr.stock-verified { background: #f2f9ef !important; box-shadow: inset 4px 0 0 0 #3c763d; }
    table.dataTable tr.stock-stale    { background: #fdfaef !important; box-shadow: inset 4px 0 0 0 #8a6d3b; }
    table.dataTable tr.stock-expired  { background: #f6f6f6 !important; box-shadow: inset 4px 0 0 0 #999; }

    /* ---------------------------------------------------------------
       4. Toolbar, filters and paging
       --------------------------------------------------------------- */

    .dt-buttons {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        float: none !important;
        width: 100%;
        margin-bottom: 10px;
    }
    .dt-buttons .dt-button {
        float: none !important;
        margin: 0 !important;
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
    }

    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 8px;
    }
    .dataTables_filter input { width: 100% !important; margin: 6px 0 0 !important; }

    .dataTables_paginate .paginate_button {
        min-width: 44px;
        min-height: 44px;
        line-height: 30px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ---------------------------------------------------------------
       5. Touch sizing for forms and buttons
       --------------------------------------------------------------- */

    .form-control,
    .select2-container .select2-selection--single,
    select.form-control {
        min-height: 46px !important;
        font-size: 16px !important;   /* under 16px, browsers zoom on focus */
    }

    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-xs, .btn-sm { min-height: 38px; font-size: 14px !important; }

    input[type="checkbox"], input[type="radio"] { width: 20px !important; height: 20px !important; }

    .modal-dialog { margin: 0 !important; width: 100% !important; max-width: 100% !important; }
    .modal-content { border-radius: 0 !important; min-height: 100vh; }
    .modal-footer .btn { width: 100%; margin: 6px 0 0 !important; }

    .content-header { padding: 8px 12px !important; }
    .content-header h1 { font-size: 19px !important; }
    .content { padding: 6px !important; }
    .box-body, .nav-tabs-custom > .tab-content { padding: 6px !important; }
    footer.main-footer { font-size: 11px; padding: 8px !important; }
}

@media (max-width: 380px) {
    table.dataTable tr { padding-left: 56px; }
    table.dataTable td.mob-primary { font-size: 14.5px; }
    table.dataTable td.mob-meta { font-size: 12px; margin-right: 9px; }
}

/* ===========================================================================
   Action sheet
   ===========================================================================
   Replaces the per-row Actions dropdown on phones. Created only by the script,
   which only creates it below 768px.

   The heading names the row you tapped -- that is what stops you acting on the
   wrong product.
   =========================================================================== */

.mob-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 16, 22, 0);
    z-index: 20000;
    display: flex;
    align-items: flex-end;
    transition: background .18s ease;
    overscroll-behavior: contain;
}
.mob-sheet-backdrop.open { background: rgba(12, 16, 22, .5); }

.mob-sheet {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
}
.mob-sheet-backdrop.open .mob-sheet { transform: translateY(0); }

.mob-sheet-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e9edf2;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
}
.mob-sheet-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1f27;
    line-height: 1.3;
    word-break: break-word;
}
.mob-sheet-sub { font-size: 13px; color: #667085; margin-top: 3px; }

.mob-sheet-list { padding: 6px 0; }

.mob-sheet-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 60px;
    padding: 14px 20px;
    border: 0;
    border-bottom: 1px solid #f2f4f7;
    background: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    color: #1a1f27;
    cursor: pointer;
}
.mob-sheet-item:last-child { border-bottom: 0; }
.mob-sheet-item:active { background: #eef3ff; }
.mob-sheet-item.danger { color: #c0392b; }

.mob-sheet-ico {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #667085;
}
.mob-sheet-item.danger .mob-sheet-ico { color: #c0392b; }
.mob-sheet-ico i, .mob-sheet-ico svg { font-size: 19px; width: auto; height: auto; }

.mob-sheet-txt { flex: 1 1 auto; }

.mob-sheet-cancel {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 16px;
    min-height: 56px;
    border: 0;
    border-radius: 14px;
    background: #eef1f5;
    color: #1a1f27;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.mob-sheet-cancel:active { background: #e2e6ec; }

@media (prefers-color-scheme: dark) {
    .mob-sheet, .mob-sheet-head, .mob-sheet-item { background: #1d2128; }
    .mob-sheet-title, .mob-sheet-item { color: #e9ecf1; }
    .mob-sheet-head { border-bottom-color: #2e343d; }
    .mob-sheet-item { border-bottom-color: #262b33; }
    .mob-sheet-cancel { background: #2a2f37; color: #e9ecf1; }
}