/* =================================================================
   mobile.css  —  Mobile & tablet responsiveness
   Loaded after all other stylesheets (including dark-mode.css) so
   media-query rules here override any earlier hardcoded values.
   ================================================================= */

/* ---- Prevent page-level horizontal scroll on all small screens ---- */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden;
    }

    /* Sidebar overlay must not push main content on mobile */
    .main.is-sidebar-collapsed {
        padding-left: 0 !important;
    }
}

/* =================================================================
   MOBILE  (< 768px)
   ================================================================= */
@media (max-width: 767px) {

    /* ---- Main content: fill viewport and balance padding ----
       Desktop .main has padding-left:240px (clears the sidebar).
       On mobile the sidebar is an overlay, so we reset to equal 8px each
       side and force full viewport width. box-sizing:border-box means the
       8+8 px padding is INSIDE the declared width, so no overflow.
    ---- */
    .main {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Panels and their inner containers must also stretch to 100%
       so content fills the viewport edge-to-edge (minus 8px each side). */
    .main .panel,
    .main .panel-default,
    .main .panel-bordered,
    .main .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---- Modal dialogs with hardcoded inline width (e.g. SalesOrder/Details,
       SalesInvoice/Details use style="width:560px" directly on .modal-dialog).
       Attribute selector overrides inline style via !important.
    ---- */
    .modal-dialog[style*="width"] {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: 0 !important;
        margin: 10px auto !important;
    }

    /* ---- Form layout tables
       The app uses <table> for form layout with <td style="width:Npx">
       as panel containers. We reflow these into vertical stacks on mobile.

       IMPORTANT: break rules use NO !important on display so that restore
       rules (which DO use !important) always win — !important beats
       non-!important regardless of specificity.
    ---- */

    /* Step 1: outer layout tables → block containers */
    .main table:not(.table):not([data-toggle="table"]) {
        display: block;
        width: 100%;
    }
    .main table:not(.table):not([data-toggle="table"]) > tbody,
    .main table:not(.table):not([data-toggle="table"]) > thead {
        display: block;
        width: 100%;
    }

    /* Step 2: each layout row → block so panel columns stack vertically.
       height:auto !important overrides inline style="height:50px" (used in
       the SalesOrder product filter row) so the row grows to fit all stacked
       TDs instead of clipping them and letting the next row overlap. */
    .main table:not(.table):not([data-toggle="table"]) tr {
        display: block;
        width: 100%;
        border: none;
        height: auto !important;
    }

    /* Step 3: each layout cell → full-width block */
    .main table:not(.table):not([data-toggle="table"]) td,
    .main table:not(.table):not([data-toggle="table"]) th {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Step 4: release hardcoded inline pixel widths on layout cells.
       Needs !important to override inline style="width:645px". */
    .main table:not(.table):not([data-toggle="table"]) td[style*="width:"],
    .main table:not(.table):not([data-toggle="table"]) th[style*="width:"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- RESTORE: Bootstrap .table data tables
       Uses !important — beats the non-!important break rules above.
       (CSS rule: !important always wins over non-!important, regardless
       of which selector has higher specificity.)
    ---- */
    .main table.table {
        display: table !important;
        width: 100% !important;
    }
    .main table.table > tbody,
    .main table.table > thead,
    .main table.table > tfoot {
        display: table-row-group !important;
    }
    .main table.table tr {
        display: table-row !important;
        width: auto !important;
        border: initial !important;
    }
    .main table.table td,
    .main table.table th {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: content-box;
    }

    /* ---- RESTORE: bootstrap-table plugin data grids ---- */
    .main .bootstrap-table table,
    .main .fixed-table-container table {
        display: table !important;
        width: 100% !important;
    }
    .main .bootstrap-table table > tbody,
    .main .bootstrap-table table > thead,
    .main .fixed-table-container table > tbody,
    .main .fixed-table-container table > thead {
        display: table-row-group !important;
    }
    .main .bootstrap-table table tr,
    .main .fixed-table-container table tr {
        display: table-row !important;
        width: auto !important;
    }
    .main .bootstrap-table table td,
    .main .bootstrap-table table th,
    .main .fixed-table-container table td,
    .main .fixed-table-container table th {
        display: table-cell !important;
        width: auto !important;
    }

    /* Data tables scroll horizontally inside their panel */
    .main .panel-body,
    .main .panel-default {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Floated divs with inline width (e.g. totals panel <div style="width:45%;float:left">)
       Stack them full-width on mobile instead. */
    .main div[style*="float: left"],
    .main div[style*="float:left"],
    .main div[style*="float: right"],
    .main div[style*="float:right"] {
        float: none !important;
        width: 100% !important;
    }

    /* Restore: jQuery UI datepicker */
    .ui-datepicker table { display: table !important; }
    .ui-datepicker tr    { display: table-row !important; }
    .ui-datepicker td    { display: table-cell !important; }

    /* ---- Inputs / selects with hardcoded inline widths
       (both in .aspx markup and JS-generated rows in PaymentCollection)
       Exclude type="button/submit/reset" — those are action buttons with
       intentional fixed sizes (e.g. [+] btnAdd at width:50px in SalesOrder).
    ---- */
    .main input:not([type="button"]):not([type="submit"]):not([type="reset"])[style*="width"],
    .main textarea[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Selects with inline width — also release min-width (e.g. product dropdown
       has style="min-width:300px" which overflows on mobile) */
    .main select[style*="width"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All unclassed form controls: cap at viewport */
    .main input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="file"]),
    .main select:not([size]):not([multiple]),
    .main textarea {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* ---- Wide inline-min-width tables (CommercialOffer min-width:1100px,
       KitBom min-width:700px, etc.) scroll horizontally.
    ---- */
    .main table[style*="min-width"] {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Buttons: allow wrapping text on tiny screens ---- */
    .main .btn {
        white-space: normal;
        word-wrap: break-word;
    }

    /* ---- Panels ---- */
    .panel-body   { padding: 10px !important; }
    .panel-heading { padding: 8px 10px !important; }

    /* ---- Tab navigation: scroll horizontally ---- */
    .nav-tabs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs > li {
        display: inline-block;
        float: none;
    }

    /* ---- SynsToolbar: allow long button text to wrap on mobile ----
       .syns-toolbar__segment has overflow:hidden which clips text like
       "Sync Order From Shopee" → "Sync Order From".
       .syns-tool has height:30px / line-height:30px (single-line only).
       On mobile we let segments show overflow and allow buttons to grow
       to a second line so the full label is always readable.
    ---- */
    .syns-toolbar-content,
    .syns-toolbar {
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
    }

    .syns-toolbar-content .syns-toolbar__wrapper,
    .syns-toolbar .syns-toolbar__wrapper {
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
    }

    .syns-toolbar-content .syns-toolbar__wrapper .syns-toolbar__segment,
    .syns-toolbar .syns-toolbar__wrapper .syns-toolbar__segment {
        overflow: visible !important;
    }

    .syns-toolbar-content .syns-toolbar__wrapper .syns-toolbar__segment .syns-tool,
    .syns-toolbar .syns-toolbar__wrapper .syns-toolbar__segment .syns-tool {
        height: auto !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        text-align: center;
    }

    /* ---- Bootstrap grid: no negative margin bleed ---- */
    .main .row {
        margin-left: 0;
        margin-right: 0;
    }

    .main [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ---- Select2 dropdowns: don't overflow ---- */
    .select2-container {
        max-width: 100% !important;
    }

    /* ---- Sidebar: prevent content being pushed on mobile ---- */
    .main.dim {
        -webkit-transform: none !important;
                transform: none !important;
    }

    /* ---- Sidebar: fix logo cutoff
       stardust.css applies margin-top:-40px on mobile so the sidebar sits
       below the top bar, but this pushes the logo above the viewport.
       Reset to top:0 so the full sidebar (logo included) is visible.
    ---- */
    .sidebar {
        margin-top: 0 !important;
        top: 0 !important;
    }

    /* ---- Hamburger button: fix to top-left of viewport
       stardust.css sets position:absolute inside the sidebar, so when the
       sidebar slides off-screen (left:-230px) the button disappears.
       Override to position:fixed so it always sits in the mobile top bar.
    ---- */
    #sidebar_menu_collapse_btn {
        position: fixed !important;
        top: 8px !important;
        left: 10px !important;
        bottom: auto !important;
        z-index: 100 !important;
        background: transparent !important;
    }

    /* When sidebar is open, slide the button to the sidebar's right edge */
    .sidebar.open #sidebar_menu_collapse_btn {
        left: 195px !important;
    }
}

/* =================================================================
   TABLET  (768px – 991px)
   ================================================================= */
@media (min-width: 768px) and (max-width: 991px) {

    /* Modal dialogs: cap width so they fit inside the content area */
    .modal-dialog {
        max-width: calc(100vw - 260px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Listing / audit modals are offset by sidebar width */
    #listing-modal,
    #audit-modal {
        margin-left: 230px;
    }
}

/* =================================================================
   WAREHOUSE LAYOUT — wide tables that have min-width in CSS file
   ================================================================= */
@media (max-width: 1200px) {
    table.wl-tbl,
    table.wl-tbl-loc {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =================================================================
   DARK MODE compatibility on mobile
   ================================================================= */
@media (max-width: 767px) {
    .dark-mode .main {
        background-color: #1A1A1A !important;
    }
}

/* =================================================================
   CUSTOMER + SKU MOQ — Item Customer Edit and Details
   The grid has a min-width so its nine columns stay readable; it
   scrolls inside .moq-table-scroll rather than widening the page.
   ================================================================= */
@media (max-width: 767px) {
    .moq-modal-dialog {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stack the paired modal fields instead of two-up. */
    #moqModal .moq-field {
        margin-bottom: 14px;
    }

    /* Full-width, thumb-sized actions. */
    #btnAddMOQ,
    #moqModal .moq-btn {
        width: 100%;
        margin-bottom: 8px;
    }

    .moq-qty {
        width: 100%;
        min-width: 70px;
    }

    .moq-empty {
        font-size: 12px;
    }

    /* The connection tip opens on tap (focus), so give the icon a finger-sized target. */
    #moqModal .moq-scope-tip {
        min-width: 36px;
        min-height: 36px;
        line-height: 36px;
        text-align: center;
    }
}

/* =================================================================
   NOTIFICATION dropdown  (base styles in notification.css)

   The bell now lives in .notif-appbar, fixed to the top-right of the
   content column. That is a real improvement on a phone: it used to be
   in the sidebar bar, which is off-canvas below 768px (left: -230px), so
   the bell was only reachable with the sidebar open. It is now always on
   screen.

   The top band is shorter here: stardust.css puts a fixed 40px strip at
   the top (.main::before, z-index 98) and moves the toolbar to top:40px,
   so the 64px app bar is cut to 40px and the bell to a 36px square that
   still clears the touch floor.

   The panel is 320px by default, which overflows a 375px viewport once
   the 16px gutters are counted. Cap it to the viewport; it is already
   right-aligned to the bell, so it cannot push the body sideways.
   ================================================================= */
@media (max-width: 767px) {
    .notif-appbar {
        height: 40px;
        /* Same mascot clearance as on desktop, recomputed for this
           breakpoint: Customs2.css:234 pulls #ADAMS_AI to right:12px
           !important here, and its stardust top:5px still wins over the
           bottom it sets, so the mascot occupies right 12->52px. 64px
           clears it by the same 12px gap used on desktop.

           height stays 40px against a 36px bell so the bell's centre line
           (25px) still matches the mascot's, which keeps its 40px size at
           this breakpoint. */
        right: 64px;
    }

    .notif-bell {
        width: 36px;
        height: 36px;
    }

    /* Give the toolbar its 56px back.
       notification.css reserves that much on the right so toolbar controls
       cannot run under the bell. Here they cannot collide in the first
       place: the app bar stays in the 0-40px strip while stardust.css moves
       the toolbar to top:40px. The reserve is not merely unnecessary, it is
       harmful -- this file sets flex-wrap:wrap !important on both the
       toolbar and its wrapper a few blocks down, so 56px of lost width can
       push a button onto a second row, and .main only allows for the
       original toolbar height. */
    .notif-appbar ~ .syns-toolbar-content,
    .notif-appbar ~ .syns-toolbar {
        padding-right: 0 !important;
    }

    .notif-panel {
        /* Anchored right:0 to an app bar that now starts 60px in, so the
           usable width is 64px less than before: at 375px this resolves to
           299px and the panel still clears the left edge. */
        width: calc(100vw - 76px) !important;
        max-width: 320px !important;
        /* Shorter viewport: leave room for the bar itself and the
           browser chrome rather than running off the top. */
        max-height: 60vh !important;
    }

    /* Tap targets: rows carry two lines of text on a narrow screen, so
       they clear 36px on their own, but the header buttons do not. */
    .notif-panel__x {
        width: 36px !important;
        height: 36px !important;
    }

    /* Mark all as read is a text action, so it needs vertical padding to
       reach a 36px target rather than a width. 12px floor on the label. */
    .notif-panel__mark-all {
        padding: 10px 2px !important;
        font-size: 12px !important;
    }

    .notif-panel__ft {
        padding: 12px 14px !important;
    }

    /* Same 12px floor the mark-all label and the list screen's status
       badges already get. These two are the only text in the dropdown
       that still sat under it: the relative timestamp / document line at
       11.5px and the event-type tag at 10.5px. Desktop keeps the smaller
       sizes -- the floor is a small-screen legibility rule, not a design
       change. */
    .notif-row__meta,
    .notif-row__type {
        font-size: 12px !important;
    }
}

/* =================================================================
   NOTIFICATION list screen  (WEB-3)

   The table has six columns and two of them hold sentences, so it is
   always wider than a phone. It scrolls inside its own
   .notif-table-scroll container (overflow-x:auto on the view) so the
   page body never scrolls sideways.
   ================================================================= */
@media (max-width: 767px) {
    .notif-table-scroll {
        -webkit-overflow-scrolling: touch;
        /* The container must not itself be squeezed narrower than the
           viewport, or the inner table has nowhere to scroll. */
        max-width: 100% !important;
    }

    /* Give the table room to be wider than the screen inside that
       container rather than compressing columns to unreadable widths. */
    .notif-table-scroll table#tbllist {
        min-width: 640px !important;
    }

    /* 12px floor on body text. */
    .notif-badge-read,
    .notif-badge-unread {
        font-size: 12px !important;
    }
}

/* =================================================================
   SALES QUOTATION — List / Create / Edit / Details
   The Quotation Product line table and both price-history tables
   already scroll horizontally inside their own overflow-x:auto
   wrapper in markup; only the modal width and the Add Item row
   need mobile-specific overrides here.
   ================================================================= */
@media (max-width: 767px) {
    #sqInfoModal .modal-dialog {
        width: 90%;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Add Item mini-form: stack the fields and give the button full width
       instead of the cramped inline row used at desktop width. */
    .sq-additem-row .form-group {
        margin-bottom: 10px;
    }

    .sq-additem-btn {
        padding-top: 0;
    }

    #btnAddQuotationItem {
        width: 100%;
    }

    /* Pricing summary: keep label/value pairs from being squeezed together. */
    .sq-pricing-summary .sq-summary-line {
        flex-wrap: wrap;
    }

    .sq-pricing-summary .sq-summary-line input.form-control {
        width: 100%;
    }
}