/* ============================================================
   IPAD-B1 — Global low-risk tablet/iPad responsive fixes
   Scope: mostly 600px–1099px and coarse-pointer (touch) devices.
   UI-only. Loaded after app.css from layouts/partials/css.blade.php.
   ============================================================ */

/* ── 1. Myanmar script support (all widths) ──────────────────
   No Myanmar font file is bundled, so rely on system fonts:
   iOS/macOS "Myanmar Sangam MN", Android/Linux "Noto Sans Myanmar",
   Windows "Myanmar Text", plus Padauk where installed.
   Latin-leading fonts match the existing Tailwind/AdminLTE stacks,
   so non-Myanmar text renders exactly as before. */
html[lang="my"] body,
html[lang="my"] .form-control,
html[lang="my"] .btn,
html[lang="my"] .dropdown-menu,
html[lang="my"] table {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Source Sans Pro", "Helvetica Neue", Arial,
        "Myanmar Sangam MN", "Noto Sans Myanmar", "Myanmar Text", "Padauk",
        sans-serif;
}
/* Myanmar stacked vowels/medials render taller than Latin glyphs;
   give locale=my slightly looser line-height in dense UI text so
   lower marks are not clipped by tight controls. */
html[lang="my"] .btn,
html[lang="my"] label,
html[lang="my"] th,
html[lang="my"] .box-title,
html[lang="my"] .nav-tabs > li > a {
    line-height: 1.6;
}

/* Select2 must never exceed its column (all widths — pure safety). */
.select2-container {
    max-width: 100%;
}
.select2-container .select2-dropdown {
    max-width: calc(100vw - 20px);
}

/* Touch scrolling momentum for existing responsive wrappers. */
.table-responsive,
.modal-body {
    -webkit-overflow-scrolling: touch;
}

/* ── 2. Tablet band: 600px–1099px ──────────────────────────── */
@media (min-width: 600px) and (max-width: 1099px) {

    /* Raw tables placed directly in a box/modal body (Warehouse,
       several reports) currently clip at page level. Direct-child
       selector deliberately skips tables already inside
       .table-responsive or a DataTables wrapper. */
    .box-body > table.table,
    .modal-body > table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables without scrollX: keep horizontal scroll inside the
       wrapper instead of stretching/clipping the whole page. */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* .form-inline (Warehouse ledger filter etc.): wrap instead of
       overflowing off-screen. */
    .form-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .form-inline .form-group {
        margin-bottom: 6px;
    }
    .form-inline .form-control {
        max-width: 100%;
    }

    /* Buttons: allow label wrapping (BS3 forces nowrap, which makes
       long Myanmar labels overflow their group/row). */
    .btn {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Long labels / Myanmar text must not force horizontal overflow. */
    th,
    label,
    .box-title,
    .nav-tabs > li > a,
    .dataTables_wrapper th {
        overflow-wrap: anywhere;
    }

    /* Modals: never wider than the viewport; wide content scrolls
       inside the modal body. */
    .modal-dialog {
        max-width: calc(100vw - 16px);
        margin-left: auto;
        margin-right: auto;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: auto;
        max-width: calc(100vw - 16px);
    }
    .modal-body {
        overflow-x: auto;
    }

    /* Date-range picker: keep the double calendar on-screen. */
    .daterangepicker {
        max-width: calc(100vw - 20px);
        overflow-x: auto;
    }

    /* DataTables toolbar (buttons + search + length) wraps cleanly. */
    .dataTables_wrapper .dataTables_filter input {
        max-width: 60vw;
    }
    .dataTables_wrapper .dt-buttons {
        white-space: normal;
    }
}

/* ── 3. Touch devices (tablet widths): usable touch targets ── */
@media (pointer: coarse) and (max-width: 1366px) {

    /* btn-xs action buttons are ~22px tall — too small for touch. */
    .btn-xs,
    .btn-group-xs > .btn {
        min-height: 34px;
        min-width: 34px;
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Pagination links. */
    .pagination > li > a,
    .pagination > li > span {
        min-width: 36px;
        min-height: 36px;
        padding: 8px 12px;
    }

    /* iOS Safari auto-zooms on focus when input font-size < 16px.
       Zoom is now re-enabled, so lift generic form controls to 16px
       on touch devices. Page-specific sizing with higher specificity
       (e.g. compact POS ID-scoped rules) intentionally still wins. */
    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
}

/* ============================================================
   IPAD-B2 — POS screen (body.lockscreen) tablet refinement
   ============================================================ */

/* Readable cart table text on tablets. Per-page POS CSS drops the
   header to 9–9.5px in its tablet bands; body.lockscreen prefix
   out-specifies those rules without editing every band. */
@media (min-width: 768px) and (max-width: 1366px) {
    body.lockscreen #pos_table thead th {
        font-size: 11px !important;
        letter-spacing: .03em !important;
    }
    body.lockscreen #pos_table tbody td {
        font-size: 13px !important;
    }
}

/* POS-REGRESSION-1: keep the option/totals strip inside the
   visible cart panel above the fixed action footer. The cart rows
   are the only flexible/scrollable region. This applies to every
   non-phone POS layout because the fixed-footer clipping also
   occurs on wide desktop screens. */
@media (min-width: 768px) {
    body.lockscreen #pos-panel-cart > .tw-bg-white {
        min-height: 0;
        overflow: hidden !important;
    }
    body.lockscreen #add_pos_sell_form #pos-panel-cart .box-body.pb-0,
    body.lockscreen #edit_pos_sell_form #pos-panel-cart .box-body.pb-0 {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden !important;
    }
    body.lockscreen #add_pos_sell_form #pos-panel-cart .box-body.pb-0 > .row:has(.pos_product_div),
    body.lockscreen #edit_pos_sell_form #pos-panel-cart .box-body.pb-0 > .row:has(.pos_product_div) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 96px;
        overflow: hidden;
    }
    body.lockscreen #add_pos_sell_form #pos-panel-cart .pos_product_div,
    body.lockscreen #edit_pos_sell_form #pos-panel-cart .pos_product_div {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 96px;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.lockscreen #pos-panel-cart .pos_form_totals {
        display: flex;
        flex: 0 0 auto;
        position: relative;
        z-index: 7;
        margin: 0 !important;
        overflow: visible;
    }
}

/* Touch devices: 16px inputs stop iOS auto-zoom-on-focus inside POS,
   with heights raised so 16px text still fits. Fine-pointer desktop
   windows at these widths keep the compact sizing. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
    body.lockscreen #pos_table .form-control,
    body.lockscreen #pos_table .input-number {
        font-size: 16px !important;
        height: 38px !important;
        min-height: 38px !important;
    }
    body.lockscreen #add_pos_sell_form .box-body.pb-0 > .row .form-control,
    body.lockscreen #edit_pos_sell_form .box-body.pb-0 > .row .form-control {
        font-size: 16px;
        height: 38px;
    }
    body.lockscreen #pos_sidebar_wrap input[type="text"],
    body.lockscreen #pos_sidebar_wrap input[type="search"] {
        font-size: 16px;
    }
    /* Footer/action buttons: comfortable touch height. */
    body.lockscreen .pos-form-actions .btn,
    body.lockscreen .pos-form-actions button,
    body.lockscreen .pos-footer-secondary button {
        min-height: 40px;
    }
}

/* Horizontal-scroll affordance for the cart table. Classes are
   toggled by sale_pos/partials/pos_layout_script.blade.php on the
   cart container's parent; without JS these rules are inert. */
body.lockscreen .pos-hscroll-host {
    position: relative;
}
body.lockscreen .pos-hscroll-host::before,
body.lockscreen .pos-hscroll-host::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 6;
}
body.lockscreen .pos-hscroll-host::before {
    left: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, .16), transparent);
}
body.lockscreen .pos-hscroll-host::after {
    right: 0;
    background: linear-gradient(270deg, rgba(15, 23, 42, .16), transparent);
}
body.lockscreen .pos-hscroll-host.pos-scroll-left::before {
    opacity: 1;
}
body.lockscreen .pos-hscroll-host.pos-scroll-right::after {
    opacity: 1;
}

/* Close the 768–1023 POS band gap left in app.css globals (layout
   lock starts at 1024, mobile rules end at 767): stray horizontal
   page scroll must never appear on POS pages in this band. */
@media (min-width: 768px) and (max-width: 1023px) {
    body.lockscreen #scrollable-container {
        overflow-x: hidden;
    }
}

/* ============================================================
   IPAD-B3 — Product / Purchase / Sell / Contacts forms & tables
   ============================================================ */

/* iPad portrait (768–991): the big entry forms lay fields 3–4-up
   via bare col-sm-3/col-sm-4, leaving ~170px per Select2. Two-up is
   comfortable. Scoped by form id so nothing else changes; desktop
   (≥992) keeps its original grid. */
@media (min-width: 768px) and (max-width: 991px) {
    #add_purchase_form .col-sm-3,
    #add_purchase_form .col-sm-4,
    #product_add_form .col-sm-3,
    #product_add_form .col-sm-4,
    #add_sell_form .col-sm-3,
    #add_sell_form .col-sm-4,
    #edit_sell_form .col-sm-3,
    #edit_sell_form .col-sm-4,
    #sell_return_form .col-sm-4 {
        width: 50%;
    }

    /* Purchase totals block: full-width stack instead of a
       shrink-wrapped right float that wraps awkwardly. */
    #add_purchase_form .pull-right.col-md-5 {
        float: none !important;
        width: 100%;
    }
}

/* Touch tablets at 992–1199 (iPad landscape / iPad Pro portrait with
   the 256px sidebar leaving ~768px of content): 3–4-up col-md rows
   get the same two-up treatment. Fine-pointer desktop windows at
   these widths are unaffected. */
@media (pointer: coarse) and (min-width: 992px) and (max-width: 1199px) {
    #add_purchase_form .col-md-3,
    #add_purchase_form .col-md-4,
    #product_add_form .col-md-3,
    #product_add_form .col-md-4,
    #add_sell_form .col-md-3,
    #add_sell_form .col-md-4,
    #edit_sell_form .col-md-3,
    #edit_sell_form .col-md-4 {
        width: 50%;
    }
    #add_purchase_form .pull-right.col-md-5 {
        float: none !important;
        width: 100%;
    }
}

/* ============================================================
   IPAD-B4 — Reports / table polish
   ============================================================ */

/* Report/list filter panels (components.filters renders the slot
   inside .pf-inner): bare col-md-3/4 filters stack 1-up below 992
   (wastefully long) and col-sm-3/4 cramp 4-up at 768. Two-up reads
   best on iPads. Desktop unchanged. */
@media (min-width: 768px) and (max-width: 991px),
       (pointer: coarse) and (min-width: 992px) and (max-width: 1199px) {
    .pf-inner .col-md-3,
    .pf-inner .col-md-4,
    .pf-inner .col-sm-3,
    .pf-inner .col-sm-4 {
        float: left;
        width: 50%;
    }
}

/* ============================================================
   IPAD-B5 — Warehouse / Superadmin final polish + carry-forwards
   ============================================================ */

/* Warehouse navigation remains fully reachable and wraps by logical
   groups. Long Myanmar labels may wrap inside a touch-sized button. */
@media (min-width: 600px) and (max-width: 1099px),
       (pointer: coarse) and (min-width: 1100px) and (max-width: 1366px) {
    .wh-nav {
        width: 100%;
        align-items: stretch !important;
    }
    /* W3C-3B: descendant selector — buttons now sit inside a labelled
       .wh-nav-group wrapper, so the old `>` child selectors missed them. */
    .wh-nav .btn-group {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
    }
    .wh-nav .btn-group > .btn {
        float: none;
        min-height: 40px;
    }
    .wh-nav .wh-nav-group {
        max-width: 100%;
    }

    .warehouse-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 8px;
    }
    .warehouse-table-wrap > table.table {
        min-width: 680px;
        margin-bottom: 0;
    }
    .warehouse-table-wrap th,
    .warehouse-table-wrap td {
        vertical-align: middle !important;
    }

    /* Warehouse history/ledger/reconciliation controls wrap into
       comfortable rows instead of producing a clipped single line. */
    form[action*="/warehouse/history"].form-inline,
    form[action*="/warehouse/reconciliation"].form-inline,
    form[action*="/warehouse/onboard"].form-inline {
        align-items: flex-end;
    }
    form[action*="/warehouse/history"].form-inline .form-group,
    form[action*="/warehouse/reconciliation"].form-inline .form-group,
    form[action*="/warehouse/onboard"].form-inline .form-group {
        flex: 1 1 210px;
        min-width: 0;
    }
    form[action*="/warehouse/history"].form-inline .form-control,
    form[action*="/warehouse/reconciliation"].form-inline .form-control,
    form[action*="/warehouse/onboard"].form-inline .form-control {
        width: 100%;
    }

    /* Superadmin top navigation is a touch-scrollable row at the
       Bootstrap 768px desktop-nav breakpoint. */
    section.no-print > nav.navbar .navbar-collapse {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    section.no-print > nav.navbar .navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        float: none;
        width: max-content;
        min-width: 100%;
    }
    section.no-print > nav.navbar .navbar-nav > li {
        float: none;
        flex: 0 0 auto;
    }

    /* Nested Superadmin detail/modal tables that predate responsive
       wrappers scroll inside their content panel. */
    .content .box-body .col-xs-12 > table.table,
    .modal-body [class*="col-"] > table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #superadmin_business_table .btn,
    #superadmin_subscription_table .btn,
    .subscription-details .btn {
        min-height: 36px;
    }
}

/* Package feature fields are four-up at Bootstrap sm widths and
   become too narrow for long feature labels on iPad portrait. */
@media (min-width: 768px) and (max-width: 991px),
       (pointer: coarse) and (min-width: 992px) and (max-width: 1199px) {
    #add_package_form .box-body > .row > .col-sm-3,
    #edit_package_form .box-body > .row > .col-sm-3 {
        width: 50%;
        min-height: 58px;
    }
    #add_package_form .checkbox label,
    #edit_package_form .checkbox label {
        overflow-wrap: anywhere;
    }
}

/* Phone POS carry-forward: iOS zooms focused controls below 16px.
   Scope tightly to POS/lockscreen and increase control height only;
   cart/payment calculations and layout widths remain untouched. */
@media (pointer: coarse) and (max-width: 767px) {
    body.lockscreen input.form-control,
    body.lockscreen select.form-control,
    body.lockscreen textarea.form-control,
    body.lockscreen .select2-selection,
    body.lockscreen .select2-search__field,
    body.lockscreen .input-number {
        font-size: 16px !important;
    }
    body.lockscreen input.form-control,
    body.lockscreen select.form-control,
    body.lockscreen .select2-selection,
    body.lockscreen .input-number {
        min-height: 38px !important;
    }
    body.lockscreen .select2-selection__rendered {
        line-height: 36px !important;
    }
    body.lockscreen .select2-selection__arrow {
        min-height: 36px;
    }
}

/* DataTables toolbar: export-button strip wraps neatly instead of
   colliding with the search box; search stays usable. */
@media (min-width: 600px) and (max-width: 1099px),
       (pointer: coarse) and (min-width: 1100px) and (max-width: 1366px) {
    .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        float: none;
        margin-bottom: 6px;
    }
    .dataTables_wrapper .dataTables_filter {
        float: right;
    }
    .dataTables_wrapper .dataTables_filter input {
        max-width: 50vw;
    }
}

/* iPad Pro portrait / large tablets (1100–1366, coarse pointer):
   the 256px sidebar leaves ~850–1100px of content, so wide report
   tables still need in-wrapper scrolling. Extends the 600–1099 B1
   rules to this band on touch devices only. */
@media (pointer: coarse) and (min-width: 1100px) and (max-width: 1366px) {
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .box-body > table.table,
    .modal-body > table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Date-range picker on iPad portrait: the ranges menu (Today /
   Yesterday / …) floats beside two calendars, pushing total width
   past the viewport. Turn the ranges into a wrapping chip row above
   the calendars; the picker then fits ~480px. Display-only. */
@media (min-width: 600px) and (max-width: 991px) {
    .daterangepicker.show-calendar .ranges {
        float: none;
        width: 100%;
    }
    .daterangepicker.show-calendar .ranges ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 2px;
    }
    .daterangepicker.show-calendar .ranges li {
        flex: 0 0 auto;
    }
}

/* Charts (Chart.js canvas / c3 svg): never force page overflow;
   scale within their column. Data/config untouched. */
@media (min-width: 600px) and (max-width: 1366px) {
    .content canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    .content .c3 svg {
        max-width: 100%;
    }
}

/* Justified tab strips (contact show, similar detail pages) shrink
   to unreadable slivers on tablets: convert to a horizontally
   scrollable tab row. Phones (<768) keep the stacked BS3 default. */
@media (min-width: 768px) and (max-width: 991px),
       (pointer: coarse) and (min-width: 992px) and (max-width: 1199px) {
    .nav-tabs.nav-justified {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs.nav-justified > li {
        display: block;
        flex: 0 0 auto;
        width: auto;
        min-width: 110px;
    }
    .nav-tabs.nav-justified > li > a {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

/* ============================================================
   IPAD-REGRESSION-R1 — POS order options / totals strip
   ============================================================
   The discount / order-tax / shipping edit icons in the POS totals
   strip render at 9px with ~2px padding (≈12px tap target) and the
   label wrapper clips overflow, so on iPads the controls are nearly
   impossible to hit. Scoped to POS (body.lockscreen) touch devices
   only: fine-pointer desktops (including 1200px+ windows) keep the
   compact desktop layout because `pointer: coarse` never matches.
   !important is required to out-rank the same-specificity inline
   <style> block that pos_form_totals.blade.php emits later in the
   document. UI-only: no fields, buttons or calculations change. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
    /* Edit pencils: 38px visible touch pill (spec asks 34–40px) */
    body.lockscreen .pos_form_totals .pos_totals_edit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        margin-left: 3px !important;
        font-size: 15px !important;
        color: #2563eb !important;
        background: rgba(37, 99, 235, .10);
        border: 1px solid rgba(37, 99, 235, .25);
        border-radius: 9px;
        opacity: 1 !important;
        touch-action: manipulation;
    }
    /* Labels must not clip the enlarged icon: allow wrapping */
    body.lockscreen .pos_form_totals .pos_totals_label {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px 4px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 10px !important;
    }
    /* Roomier cells and readable amounts */
    body.lockscreen .pos_form_totals .pos_totals_cell {
        min-height: 48px !important;
        padding: 5px 6px !important;
    }
    body.lockscreen .pos_form_totals .pos_totals_value {
        font-size: 15px !important;
    }
    /* Total-payable hero: keep it comfortably visible above the
       fixed action bar */
    body.lockscreen .pos_form_totals .pos_totals_right {
        min-height: 64px !important;
        padding: 8px 12px !important;
    }
}