/* ============================================================
   brij-mobile.css - MOBILE-ONLY responsive layer (ASCII only).
   EVERY rule lives inside "@media screen and (max-width:
   767.98px)" (plus one 991.98px block for the collapsed navbar
   panel), so DESKTOP RENDERING IS 100% UNCHANGED and PRINT
   output is unchanged too (screen media type only).
   Loaded LAST from the master pages + the standalone screen
   pages. Page-level <style> blocks can appear later in the
   document (MainPh), so rules that must win carry !important.
   Companion: Scripts/brij-mobile.js wraps bare wide tables in
   .brij-mscroll at phone widths only.
   Built from a full 205-page audit (2026-08-21).
   Sections:
     1. global safety net      4. shared components
     2. app shell              5. page-specific fixes
     3. tables / scrollers        (class-prefixed per page)
   ============================================================ */

/* Collapsed-navbar panel: scroll internally when taller than the
   screen (the full menu list is longer than a phone viewport). */
@media screen and (max-width: 991.98px) {
    /* v2.36.358 - PHONE MENU = SLIDE-IN DRAWER. #mainNav is a Bootstrap offcanvas (Site.master):
       it slides in from the right over a dimmed page, full height, with a fixed header (title +
       Close) and a body that scrolls on its own. Before, the menu was a collapse panel whose
       items were all centred (site.css .navbar-nav { align-items:center } is meant for the
       desktop ROW; in the stacked column it centred every item) and pushed the page down.
       Drawer rules: full-width left-aligned rows with 44px tap height, caret on the right that
       flips when open, thin separators, sub-menus opening inline as full-width cards (mega
       menus collapse to ONE column), then the utility list (search / chat / bells on one icon
       row, FY / theme / Utility / user as their own rows). */
    #mainNav { --bs-offcanvas-width: min(86vw, 360px); background: var(--brij-primary); color: #fff; }
    #mainNav .offcanvas-header { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.18); }
    #mainNav .offcanvas-title { font-size: 15px; font-weight: 700; color: #fff; }
    #mainNav .offcanvas-body { padding: 6px 10px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    #mainNav .navbar-nav { align-items: stretch !important; }
    #mainNav .navbar-nav .nav-link {
        display: flex !important; align-items: center; gap: 10px; min-height: 44px;
        padding: .55rem .6rem !important; border-radius: 8px !important;
        font-size: .95rem !important; text-align: left; white-space: normal;
    }
    #mainNav .navbar-nav .nav-link.dropdown-toggle::after { margin-left: auto; transition: transform .15s; }
    #mainNav .navbar-nav .nav-link.dropdown-toggle.show::after { transform: rotate(180deg); }
    #mainNav .navbar-nav > .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,.08); }
    /* sub-menu opens inline (Bootstrap makes it static below the breakpoint): a full-width
       card, no floating shadow, wrapped labels; desktop mega-menu widths/columns do not apply. */
    #mainNav .navbar-nav .dropdown-menu {
        width: 100%; min-width: 0 !important; margin: 0 0 8px !important;
        box-shadow: none !important; border-radius: 8px;
        /* site.css caps FLOATING menus at calc(100vh - 80px) with their own scrollbar; inside
           the drawer that made a long sub-menu (Reports) a second nested scroll box. */
        max-height: none !important; overflow: visible !important;
    }
    #mainNav .navbar-nav .dropdown-menu .dropdown-item { white-space: normal; padding: .55rem .9rem; }
    #mainNav .mega-cols { grid-template-columns: 1fr !important; }
    /* utility list = the LAST .navbar-nav in the body: icon buttons on one row, then every
       text item (FY, theme, Utility, user) as its own full-width row. */
    #mainNav .offcanvas-body > .navbar-nav:last-child {
        flex-direction: row; flex-wrap: wrap; align-items: center !important;
        gap: 6px 8px; margin-top: 10px; padding: 10px 0 0;
        border-top: 1px solid rgba(255,255,255,.22);
    }
    #mainNav .offcanvas-body > .navbar-nav:last-child > .nav-item { border-top: 0; }
    #mainNav .offcanvas-body > .navbar-nav:last-child > .nav-item.d-flex { margin-right: 0 !important; }
    #mainNav .offcanvas-body > .navbar-nav:last-child > .nav-item:not(.d-flex) {
        flex: 0 0 100%; border-top: 1px solid rgba(255,255,255,.08);
    }
    /* The global-search panel is an absolute overlay anchored right:0 to its li (inline
       style, hence !important). In the drawer that li is the LEFT-most button of the icon
       row, so a right-anchored 300px panel would run off the drawer's left edge: anchor it
       left and size it to the drawer. */
    #gsPanel { left: 0 !important; right: auto !important; width: min(320px, calc(86vw - 40px)) !important; max-width: none !important; }
    /* While the drawer is open (html.brij-drawer-open - Site.master toggles it on Bootstrap's
       show.bs.offcanvas / hidden.bs.offcanvas): (1) the fixed navbar (z-index 1030) is the
       drawer's stacking context, so root-level floaters above 1030 - the Staff Chat dock (.cw,
       1080) and the Report-Issue button - would paint OVER the drawer and its backdrop, and the
       drawer's focus trap would fight their inputs; lifting the navbar for the open lifetime
       puts the backdrop over them (a tap there closes the drawer). (2) Bootstrap's scroll-lock
       is an inline body style that the 767.98px "html, body { overflow-y:auto !important }"
       rule below overrides; lock html + body here with higher specificity, and keep a scroll
       at the end of the drawer list from chaining into the page. */
    /* 100000: the Report-Issue chip is injected with z-index 99999 (Site.master); while the
       drawer is open the drawer must be the topmost layer, full stop. */
    html.brij-drawer-open .brij-navbar.fixed-top { z-index: 100000 !important; }
    html.brij-drawer-open, html.brij-drawer-open body { overflow: hidden !important; }
    #mainNav .offcanvas-body { overscroll-behavior: contain; }
}

@media screen and (max-width: 767.98px) {

    /* ============ 1. GLOBAL SAFETY NET ============ */
    img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; }
    input, select, textarea, .form-control, .form-select { max-width: 100% !important; }
    pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap !important; word-break: break-word; }
    code { word-break: break-word; }

    /* Bootstrap fixed-ratio cols inside modals (settle / pay modals use
       col-3 / col-4 / bare col 3-4 up): go two-up on a phone. */
    .modal .row > .col-3, .modal .row > .col-4 { width: 50% !important; }
    .modal .row > .col { flex: 1 1 45% !important; }

    /* Horizontal control rows built with Bootstrap d-flex utilities:
       let them wrap instead of pushing the page wide. */
    main .d-flex.gap-2, main .d-flex.gap-3 { flex-wrap: wrap; }

    /* ============ 2. APP SHELL ============ */
    /* Un-lock the desktop "app viewport" pattern (html,body height:100vh +
       overflow:hidden with an inner scroll pane - report-a4.css, Reports,
       Parties, VaultBatches...). On a phone the DOCUMENT must scroll. */
    html, body { height: auto !important; max-height: none !important; overflow-y: auto !important; }
    main.container-fluid { height: auto !important; max-height: none !important; overflow: visible !important; }
    main.container-fluid { padding: 8px 8px 20px !important; }
    .navbar .container-fluid { padding-left: 10px; padding-right: 10px; }
    .navbar-brand {
        font-size: 15px;
        max-width: 72vw;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* ============ 3. TABLES / SCROLLERS ============ */
    /* JS-injected horizontal scroller for bare wide tables */
    .brij-mscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .brij-mscroll > table { margin-bottom: 0; }
    .table-responsive, .tbl-scroll { -webkit-overflow-scrolling: touch; }

    /* Grid containers that scroll Y on desktop but forgot overflow-x
       (their wide tables were CLIPPED on a phone, columns unreachable),
       plus letterbox max-heights that strangle phone viewports. */
    .im-grid-wrap, .um-grid-wrap, .tb-grid-wrap, .ag-grid-wrap,
    .vb-tbl-wrap, .vbd-tbl-wrap, .rep-table-wrap, .bw-grid-scroll {
        overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    }
    .im-grid-wrap, .um-grid-wrap { max-height: none !important; }

    /* ============ 4. SHARED COMPONENTS ============ */
    /* Sticky save bar: buttons fill the row two-up and wrap */
    .brij-savebar { padding: 8px 10px !important; gap: 6px !important; }
    .brij-savebar .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }

    /* v2.36.358 - keyboard-shortcut hints (incl. .brij-kbd) are hidden on phones: see G5 in
       section 6 below, which covers the hand-written hints too. */

    .brij-card-body { padding: 10px 12px; }
    .brij-card-foot { flex-wrap: wrap; }
    .brij-card-head { flex-wrap: wrap; row-gap: 2px; }

    .bl-filter2 { padding: 8px 10px; }
    .bl-filter2 .f-btns { flex: 1 1 100%; }
    .bl-filter2 .f-btns .btn { flex: 1 1 auto; }

    /* Card / filter / grid HEADERS app-wide: 3+ flex children with no
       wrap (icon + title + count/quick-links). Let them wrap. */
    .bl-filter-head, .bl-grid-head, .pl-filter-head, .pl-grid-head,
    .dl-filter-head, .dl-grid-head, .cl-filter-head, .cl-grid-head,
    .vl-filter-head, .vl-grid-head, .sm-filter-head, .sm-grid-head,
    .sm-card-head, .im-card-head, .dm-card-head, .um-card-head,
    .pm-card-head, .po-card-head, .fy-head, .db-filter-head, .db-info-head,
    .lg-filter-head, .gst-filter-head, .gst-card-head, .ge-card-head,
    .ge-banner, .ag-card-head, .ia-head, .bw-card-head, .br-card-head,
    .dr-head, .asr-card-head, .at-card-head, .td-card-head, .bm-card-head,
    .bm-step-banner, .rec-card-head, .pm-head, .tb-card-head, .pl-card-head,
    .rp-group-head, .val-card-head, .ss-card-head, .ss-summary-head,
    .ss-section-head, .sv-actbar, .dd-head, .dt-card .head, .dt-man-row,
    .dh-chead, .dt-tool .dt-head, .dct-head, .dh-card .hd .left,
    .dbp-card-head, .dbp-card-head .actions, .lmw-head, .lmw-cta-row,
    .mig-head, .ffg-feature, .ffg-cat-head, .help-search, .el-pager,
    .pv-card-head, .au-card-head, .xu-hero, .wl-item-head, .br-actions,
    .cc-filt-row, .peb-hd, .pd-group-head, .pd-prow, .ue-hd, .ue-ft,
    .se-foot, .se-toggle-card, .ie-header, .ie-savebar, .die-header,
    .die-savebar, .pp-step-head, .pp-search, .cat-head, .chat-main-head,
    .wn-entry-head, .lc-foot {
        flex-wrap: wrap !important; row-gap: 4px;
    }

    /* TAB STRIPS that overflow a phone: wrap onto extra lines. */
    .pp-tabs, .im-tabs, .gm-tabs, .sm-tabs, .wa-tabs {
        flex-wrap: wrap !important;
    }

    /* Floating bottom "N selected" action bars (fixed, centered,
       wider than the screen): pin edge-to-edge and wrap. */
    .atx-selbar, .vbd-selbar {
        left: 8px !important; right: 8px !important;
        transform: none !important;
        flex-wrap: wrap !important; justify-content: center;
        max-width: none !important;
    }

    /* ============ 5. PAGE-SPECIFIC FIXES ============ */

    /* ---- Dashboard (Default.aspx) ---- */
    #dashCards { grid-template-columns: 1fr !important; }
    .dc-heatmap { grid-template-columns: repeat(6, 1fr) !important; }
    .recent-item .ri-detail { white-space: normal !important; }
    .au-row, .au-sub-row { display: flex !important; flex-wrap: wrap; gap: 4px 8px; }
    .au-row .au-when, .au-sub-row .au-sub-when, .au-row .au-browser { min-width: 0 !important; }
    .myrates-col { flex: 1 1 100% !important; max-width: 100%; }
    .myrates-items {
        grid-auto-flow: row !important;
        grid-template-rows: none !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .live-card .live-head, .cl-actions, .dash-card-toolbar { flex-wrap: wrap !important; }
    .dash-card-toolbar { max-width: 94vw; }
    .rate-row, .rate-header-row { grid-template-columns: 1fr 84px 84px !important; }

    /* ---- Entry pages: Sales / Purchase / Diamond / Other ----
       The bill line-grids are spreadsheet tables (fixed column widths +
       inputs). At 375px "width:100%" CRUSHES the columns and the UI
       scatters. Give each line table its real working width so it
       side-scrolls cleanly inside the .brij-mscroll wrapper instead. */
    #itemsTable, #oldItemsTable { min-width: 760px !important; }   /* Sales / Purchase / Stock entry */
    .db-grid { min-width: 760px !important; }                      /* DiamondBillEntry lines */
    .os-grid, .op-grid { min-width: 680px !important; }            /* Other Sale / Other Purchase lines */

    .scan-bar { flex-wrap: wrap !important; }
    .scan-bar .scan-msg { min-width: 0 !important; }

    .totals-table { width: 100% !important; }            /* SalesEntry + PurchaseEntry summary */
    .db-totals { grid-template-columns: 1fr !important; }  /* DiamondBillEntry totals block */
    .db-totals > .db-totals-table { grid-column: auto !important; }
    .db-row-bar { min-width: 56px !important; }            /* DayBook mini bars */
    #paymentStep2Modal .ps2-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- StockIssueToTag: 3-up entry grid is too tight on a phone ---- */
    .sit-entry, .sit-entry.hide-lab { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- VoucherEntry: 3-col header rows -> 2-col ---- */
    .ve-row { grid-template-columns: 1fr 1fr !important; }

    /* (GoldRateUpdate's grid rule moved to section 6 - the 60/78px tracks were too narrow
       for the % input and a 5-digit rate, so the rows read as overlapping text) */

    /* ---- JobWork slip images: 4-up thumbs -> 2-up ---- */
    .jw-slip-images { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- Stock note / TSS-SST list filter rows: 6-7 fixed tracks -> 2-col ---- */
    .sl-filter-row { grid-template-columns: 1fr 1fr !important; }

    /* ---- AllTransactions: 8-track filter grid designed for >=1100px ---- */
    .at-filter-row { grid-template-columns: 1fr 1fr !important; }

    /* ---- Report framework (report-a4.css pages) ----
       rep-table-wrap overflow-x is set in section 3; the 100vh lock is
       undone in section 2. Nothing else needed here. */

    /* ---- PartyLedgerWeight: table-layout:fixed + 13 percent columns
            made 19px cells; let columns size to content and scroll ---- */
    .plw-tbl { table-layout: auto !important; min-width: 760px; }
    /* v2.36.358 - the rest of the page on a phone (filter card, dues summary, ledger head):
       - filter: quick-range links on their own line; From / To side by side; the three
         buttons as a tidy grid (Show full width, All Parties + Print two-up) instead of a
         ragged wrap with Print orphaned on its own line;
       - card heads: subtitle under the title, count badge on the right, party chips on
         their own line;
       - dues chips row: chips share the line evenly, live totals on their own line;
       - dues grid: Total Dr / Total Cr columns hidden (Closing Balance carries the net),
         fixed 160px column widths released, tighter cells - the table then fits 375px. */
    .pl-filter-head { padding: 8px 12px !important; }
    .pl-filter-head .qr-seg { flex: 1 1 100%; }
    .pl-filter-body { padding: 10px 12px !important; }
    .pl-filter-body .row > .col-md-2 { width: 50% !important; }
    .pl-filter-body .row > .col-md-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .pl-filter-body .row > .col-md-auto .btn { margin: 0 !important; width: 100%; padding: 8px 6px !important; white-space: nowrap; }
    .pl-filter-body .row > .col-md-auto .btn:first-child { grid-column: 1 / -1; }
    .plw-head { flex-wrap: wrap !important; padding: 8px 12px !important; gap: 4px 8px; }
    .plw-head h6 { font-size: 13.5px !important; }
    .plw-head h6 small { display: block; margin-top: 2px; font-size: 11px; }
    .plw-head .plw-count { margin-left: auto; }
    .plw-party { margin-left: 0 !important; flex: 1 1 100%; }
    .pl-due-chip { flex: 1 1 auto; font-size: 11.5px !important; padding: 5px 6px !important; }
    #plDueTotals { margin-left: 0 !important; flex: 1 1 100%; font-size: 11.5px !important; }
    .pl-grid th:nth-child(4), .pl-grid td:nth-child(4),
    .pl-grid th:nth-child(5), .pl-grid td:nth-child(5) { display: none; }
    .pl-grid th, .pl-grid td { width: auto !important; padding: 5px 6px !important; }
    .pl-grid td:nth-child(2) { white-space: normal; min-width: 120px; }

    /* ---- PartyEdit: gold/silver opening table keeps usable inputs ---- */
    .peb-gs { min-width: 480px !important; }

    /* ---- GstrExport: 180px label rail -> stacked ---- */
    .ge-form-row { grid-template-columns: 1fr !important; }

    /* ---- Items.aspx: stones hover-popup wider than the screen ---- */
    .dia-stones-pop { min-width: 0 !important; max-width: calc(100vw - 24px) !important; }

    /* ---- DiamondItemEdit: a later 130px-rail rule defeats the page's own
            720px stack (source-order bug); force the stacked layout ---- */
    .die-section { grid-template-columns: 1fr !important; }
    .ie-section  { grid-template-columns: 1fr !important; }   /* ItemEdit twin */

    /* ---- ItemHistory: 4-track timeline rows -> wrapping flex ---- */
    .ih-event-row { display: flex !important; flex-wrap: wrap; gap: 4px 10px; }
    .ih-timeline { padding-left: 12px !important; }
    .ih-event .ev-detail { padding-left: 0 !important; }

    /* ---- Chat.aspx: 150px chrome allowance is wrong on phones ---- */
    .chat-wrap { height: calc(100vh - 128px) !important; min-height: 320px !important; }
    .chat-wrap { height: calc(100dvh - 128px) !important; }

    /* ---- Permissions: 300px sticky menu column ate the matrix ---- */
    .pp-mat th.menu, .pp-mat td.menu { min-width: 170px !important; }

    /* ---- MenuOrder: fixed-width no-wrap tool rows + deep indents ---- */
    .mm-gh, .mm-sh, .mm-it { flex-wrap: wrap !important; }
    .mm-gname, .mm-sname { width: auto !important; flex: 1 1 120px; }
    .mm-body { padding-left: 10px !important; }
    .mm-items { padding-left: 10px !important; }

    /* ---- DisplayTray: multi-select panel wider than the screen ---- */
    .dt-ms .ms-panel { min-width: 0 !important; max-width: calc(100vw - 24px) !important; }

    /* ---- Setup.aspx diagnostics: 30px+240px+1fr+100px grid >=416px ---- */
    .diag-row { display: flex !important; flex-wrap: wrap; gap: 4px 10px; }

    /* ---- Admin form grids with a 180-200px label rail -> stacked ---- */
    /* (the label-rail list moved to G6 in section 6 - it also covers .bcvm-row) */
    .cr-conn-body { grid-template-columns: 1fr !important; }

    /* ---- InvoicePrintSettings: col-6 pair (all breakpoints) -> stacked ---- */
    .ips-wrap .col-6 { width: 100% !important; flex: 0 0 100% !important; }

    /* ---- Help.aspx: 64px side padding left ~310px of text ---- */
    .help-md { padding: 14px 12px !important; }

    /* ---- PageVisitStats: 50px detail indent ---- */
    .pv-detail-wrap { padding-left: 12px !important; }

    /* ---- DbCompatTest: long SQL identifiers ---- */
    .dct-translate { word-break: break-word; }

    /* ---- DailyReport: 700px locked iframe ---- */
    .dr-iframe { min-height: 60vh !important; }

    /* ---- Customer portal Wishlist: Bootstrap .row collision on
            search-result rows (negative margins + flex) ---- */
    .wl-search-results .row {
        display: block !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }

    /* ================================================================================
       6b. PHONE DECLUTTER + KYC (v2.36.358, owner request)
       "Phone par jo gyan wali baatein / hints hain, jinke bina kaam ho sakta hai, hide karo."
       Explanatory prose costs a phone user a scroll on every page while telling an operator
       who uses the screen daily nothing new. Hidden below: the house hint family, Bootstrap
       helper text, keyboard/scanner tips and the "this is only a reference" style notes.
       KEPT (never hidden): validation errors, empty-state messages, lock / approval banners,
       and any KYC pill that says something is MANDATORY - those change what the user must do.
       ================================================================================ */
    .hint, [class*="-hint"], .form-text { display: none !important; }
    /* named instructional lines, verified against the real markup:
         .qp-scan-msg   QuotePad  "Scan / type item code, OR tap Camera for phone scanning."
         .qp-disclaimer QuotePad  "This quote is NOT a bill. Auto-deletes 24 hours ..."
         .qs-hero-sub   QuickSale "Scan barcoded tags with your phone camera ..."
         .bl-foot-note  Bill List "Showing the 60 most recent. Narrow it with the search box ..."
       (.qp-cust-note / .bl-foot-note are hooks added to those elements in the same version) */
    .qp-scan-msg, .qp-disclaimer, .qp-cust-note, .qs-hero-sub, .bl-foot-note,
    .sit-savebar > .text-muted.small, .peb-tip, .ie-tip, .die-tip,
    /* entry pages: keyboard-shortcut strips and the "what this section does" prose */
    .se-kbd-hint, .pe-kbd-hint, .so-kbd-hint, .se-sec-note { display: none !important; }
    /* NOT hidden: #scanMsg / .bk-scan-msg - the same element also reports what a scan DID
       ("added", "not found", "already sold"), so it stays; it only wraps instead of pushing
       the barcode row wide. */
    .scan-msg, .bk-scan-msg { flex: 1 1 100%; white-space: normal; font-size: 11.5px; }
    /* KYC guidance pill: the chatty "KYC optional / threshold" version goes, the MANDATORY
       variants (.required / .required-both) stay - they gate the save. */
    #kycRow .kyc-rule-pill:not(.required):not(.required-both),
    #dbKycRow .dk-rule:not(.required):not(.required-both),
    #osKycRow .kyc-rule-pill:not(.required):not(.required-both) { display: none !important; }

    /* ---- Sale bill + Diamond bill KYC strip: proper phone alignment ----
       The strip is a flex row built for a desktop line (label + 2 fields + a wide pill).
       At 375px the fields kept their desktop widths (160px / 110px inputs) and the camera,
       thumbnail and clear buttons spilled onto ragged extra lines. Now: the KYC label on its
       own line, then ONE full-width field per line with the input taking the free space and
       the icon buttons at a comfortable 34px tap size on the right. */
    #kycRow.kyc-strip, #dbKycRow.db-kyc-strip, #osKycRow.kyc-strip { gap: 6px !important; padding: 8px 10px !important; }
    #kycRow .kyc-strip-label, #dbKycRow .dk-label, #osKycRow .kyc-strip-label { flex: 1 1 100%; }
    #kycRow .kyc-field, #dbKycRow .dk-field, #osKycRow .kyc-field { flex: 1 1 100%; gap: 2px; padding: 2px 4px; }
    #kycRow .kyc-input, #dbKycRow .dk-input, #osKycRow .kyc-input { flex: 1 1 auto; width: auto !important; min-width: 0; font-size: 13px; }
    #kycRow .kyc-cam-btn, #kycRow .kyc-clr-btn,
    #dbKycRow .dk-cam, #dbKycRow .dk-clr,
    #osKycRow .kyc-cam-btn, #osKycRow .kyc-clr-btn {
        min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
    }
    #kycRow .kyc-thumb-link img, #dbKycRow .dk-thumb img, #osKycRow .kyc-thumb-link img { height: 26px; max-width: 40px; }
    /* v2.36.372 - Aadhaar FRONT / BACK image slots on a phone: the number on the first line, the
       two sides (camera + thumbnail + clear) side by side on the second line, half the width each,
       so both photos can be taken without the row overflowing. The Sale bill's fixed 30px desktop
       row height is released here because the 34px tap targets need the room. */
    #kycRow .kyc-field { height: auto !important; min-height: 30px; }
    #kycRow .kyc-field-aadhar, #dbKycRow .dk-field-aadhar, #osKycRow .kyc-field-aadhar { flex-wrap: wrap; }
    #kycRow .kyc-sides, #dbKycRow .dk-sides, #osKycRow .kyc-sides {
        flex: 1 1 100%; display: flex !important; gap: 6px !important; padding: 3px 0 1px !important; border-left: 0 !important; border-top: 1px dashed #e1e5eb;
    }
    #kycRow .kyc-side, #dbKycRow .dk-side, #osKycRow .kyc-side { flex: 1 1 0; min-width: 0; gap: 4px !important; }
    #kycRow .kyc-side-btn, #dbKycRow .dk-side-btn, #osKycRow .kyc-side-btn { padding: 0 8px !important; border: 1px solid #d1d8e0 !important; border-radius: 5px !important; }
    #kycRow .kyc-side-lbl, #dbKycRow .dk-side-lbl, #osKycRow .kyc-side-lbl { font-size: 12px !important; }

    /* ---- Bill List pop-up (brij-billlist.js): the .bl-scroll box only scrolled VERTICALLY,
            so on a phone the Status column and the row buttons were cut off with no way to
            reach them. Let it scroll sideways too and tighten the cells. ---- */
    #brijBillList .bl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #brijBillList .bl-scroll table { min-width: 560px; }
    #brijBillList .bl-scroll tbody td, #brijBillList .bl-scroll thead th { padding: .3rem .4rem !important; }
    #brijBillList .modal-dialog { margin: .4rem; }
    #brijBillList .bl-scroll .btn { min-height: 30px; padding: .2rem .45rem !important; }

    /* ---- QuotePad (qp) - v2.36.358 phone fix ----
       The totals rows carry an on-screen-only formula hint ("(Metal x Labour% / 100)")
       inside the label cell. On a 375px phone the label column is ~190px, so the hint
       wrapped to a second line and the row read as a broken two-line box (the Labour
       row worst of all). The figures are what matter on a phone: drop the hints, keep
       the labels on one line and let the amount column keep its own width. */
    .qp-totals .lbl small { display: none; }
    .qp-totals .lbl { white-space: nowrap; text-align: left; }
    .qp-totals .val { min-width: 0; }
    .qp-totals td { padding: 5px 6px !important; }

    /* ---- WhatsNew (standalone): unbreakable file-path chips ---- */
    .wn-entry-body .file-chips code { word-break: break-all; }

    /* ================================================================================
       6. PHONE AUDIT FIXES (v2.36.358)
       A 178-page phone/desktop audit (12 reviewers + adversarial verification) found
       314 layout defects on 137 pages. The rules below are the fixes: first the SHARED
       patterns that repeat across many pages (G1-G8), then one commented block per
       page, keyed by that page's own class prefix. Everything here is inside the
       767.98px media block, so DESKTOP AND PRINT ARE UNTOUCHED.
       Where a rule supersedes an earlier one in this file, the earlier one was removed
       and a pointer left in its place.
       ================================================================================ */


    /* ==========================================================================
       mobile-fix-generic.css - SHARED phone rules (ASCII only).

       Every rule below is meant to be pasted INSIDE the existing
       "@media screen and (max-width: 767.98px)" block of
       Content/brij-mobile.css. Nothing here is page-specific: each group is a
       pattern the 178-page phone audit found repeated across many pages, and
       each header names the pages the evidence came from.

       Suggested homes inside brij-mobile.css:
         G1 -> section 4 (shared components)
         G2 -> section 5 "Report framework (report-a4.css pages)" (replaces the
               current "Nothing else needed here" comment)
         G3 -> section 4 (next to the existing .brij-savebar rules)
         G4 -> section 1 (global safety net)
         G5 -> REPLACES the existing single-selector ".brij-kbd" rule (line 143)
         G6 -> REPLACES the existing ".bs-form-row, .cr-form-row, ..." rule (320)
         G7 -> section 2 (app shell)
         G8 -> section 3 (tables / scrollers)

       Load order note: brij-mobile.css is linked AFTER the HeadPh placeholder
       (Site.master:12 vs :17), so a page <style> that lives in HeadPh loses on
       source order and needs no !important. !important below is used only where
       an INLINE style, a Bootstrap utility (which is itself !important), or a
       MainPh-level <style> would otherwise win.
       ========================================================================== */


    /* ---- G1. INLINE <small> SUBTITLE INSIDE A PAGE TITLE ---------------------
       From: CatalogSessions, StaffAttendance, TssSstList, OldGoldReconcile,
             DiamondMaster, ErrorLog, StaffExpense, OtherPurchase, Groups,
             PartyDuplicates (and every page copying the idiom).
       The <small> flows inline and wraps mid-sentence beside the title at 375px.
       font-size carries !important because these subtitles are written as
       style="font-size:13px|14px" straight on the element.
       BhawCut's non-.page-title flex h1 is handled in its own page block.       */
    h1.page-title small,
    h2.page-title small {
        display: block;
        font-size: 12px !important;
        font-weight: 400;
        line-height: 1.3;
        margin-top: 2px;
    }


    /* ---- G2. REPORT FRAMEWORK (Content/report-a4.css, 22+ .rep-page pages) ---
       From: BankBook, BankPosition, BankAllocationReport, CashFlow, CashPosition,
             CashBankBalances, CustomerOutstanding, DeadStock, DisplayReport,
             ItemStockReport, ItemTagList, KarigarPerformance, MainGroupBalance,
             ModeWiseCollection, OldGoldLedger, PurchaseRegister,
             ReceiptPaymentRegister, SaleRegister, StockistSaleReport,
             TopCustomers ... - i.e. every page that links report-a4.css.
       Four framework defects, one block:
         a) .rep-head .rep-actions has no flex-wrap -> 2-3 buttons overflow 375px;
         b) .rep-filter is repeat(auto-fit, minmax(170px,1fr)) and cannot fit two
            tracks in the 331px phone inner width, so every field takes a line and
            the Show button is orphaned at its natural width;
         c) .rep-kpi .lbl is 8px and .rep-filter .field label is 9.5px;
         d) .rep-card-head's inline <small> period wraps next to the count pill.
       report-a4.css is linked in HeadPh, so only the grid + font floors (which a
       report page may re-declare in its own <style>) carry !important.          */
    .rep-head .rep-actions { flex-wrap: wrap; }
    .rep-head .rep-actions .btn { flex: 1 1 auto; }

    .rep-filter {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 8px 10px;
    }
    .rep-filter .field label { font-size: 10.5px !important; }
    .rep-filter .actions { grid-column: 1 / -1; }
    .rep-filter .actions .btn { flex: 1 1 auto; min-width: 0; height: 36px; }

    .rep-card-head { flex-wrap: wrap !important; row-gap: 2px; }
    .rep-card-head .title small { display: block; font-size: 11px; margin-top: 1px; }
    .rep-card-head .count { white-space: nowrap; margin-left: auto; }

    .rep-kpi .lbl { font-size: 10px !important; }
    .rep-kpi .val { font-size: 1.05rem !important; }

    .rep-tbl tbody td { padding: 6px 8px; }
    .rep-tbl td.num, .rep-tbl td.vno { white-space: nowrap; }
    .rep-tbl td.pty { min-width: 150px; }

    /* :has() kept in its own rules - a browser without :has() support drops the
       whole rule it appears in, so it must never share a selector list with the
       plain rules above. Free-text / select fields take the full row; a report
       table with 6+ columns gets a floor so it side-scrolls in .rep-table-wrap
       (whose overflow-x is already set in brij-mobile.css section 3). */
    .rep-filter .field:has(> select) { grid-column: 1 / -1; }
    .rep-filter .field:has(> input:not([type=date])) { grid-column: 1 / -1; }
    .rep-tbl:has(thead th:nth-child(6)) { min-width: 640px; }


    /* ---- G3. HOUSE-WIDE BARS: SAVE BAR / LOCK BANNER / BARCODE SCAN BAR ------
       From: SalesEntry, PurchaseEntry, DiamondBillEntry, OtherSale, StockInOut,
             VoucherEntry, StockIssueToTag, ItemVerification (site.css:138/147/826).
         a) .brij-savebar already goes two-up (line 138) but a ".btn.ms-2" /
            ".ms-auto" margin utility breaks the 50% basis so that button drops to
            its own line - Bootstrap utilities are !important, so we must be too;
         b) the "<span class='text-muted small'>" hint in the sticky bar costs a
            whole row of a 667px screen;
         c) .brij-lock-banner is d-flex with NO wrap: icon + long text + 1-2
            buttons squeezes the message to ~80px and 8-10 lines tall;
         d) .bk-scan-bar is a no-wrap flex whose input caps at 360px and whose
            .bk-scan-msg has min-width:200px -> a ~460px row overflows the card.
            brij-mobile.css only patched the legacy ".scan-bar" (SalesEntry's).  */
    .brij-savebar > .text-muted.small,
    .brij-savebar > span.small { display: none !important; }
    .brij-savebar .btn.ms-2,
    .brij-savebar .btn.ms-auto,
    .brij-savebar .ms-auto { margin-left: 0 !important; }

    .brij-lock-banner { flex-wrap: wrap !important; row-gap: 6px; }
    .brij-lock-banner > .flex-grow-1 { flex: 1 1 100% !important; }

    .bk-scan-bar { flex-wrap: wrap; gap: 6px 8px; }
    .bk-scan-bar input { flex: 1 1 160px; min-width: 0; max-width: none !important; }
    .bk-scan-bar .bk-scan-msg { flex: 1 1 100%; min-width: 0 !important; }


    /* ---- G4. TAP-TARGET FLOOR ------------------------------------------------
       From: nearly every list / tool page. site.css:1216 ".btn-sm { min-height:
       28px }" and site.css:1066 ".app-page-btn" (~27px) are the two house sizes
       behind most of it: AllTransactions, Users, PartyOpening, StaffExpense,
       DiamondMaster, Ledger, Aging, PaymentCollect, BankAllocation, SchemaCleanup,
       Parties, WhatsAppSettings, Groups, PartyDuplicates, StockGroupWise, Wishlist,
       Vendors, FinancialYears, DiamondStockInList, Permissions, StockVerify,
       VaultBatches, OtherPurchaseList, CatalogSessions, CashBankAccounts...
       Desktop density is deliberate, so the floor lives ONLY in the phone block.
       .brij-actions boxes are 30x30 SQUARES (site.css:101): a bare min-height
       would make them 30x36, so they are resized as squares instead.
       Page-local button classes that are not .btn-sm (e.g. .sl-tbl .btn-print)
       still need their own page-prefixed rule.                                   */
    main .btn-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
    main .form-control-sm, main .form-select-sm { min-height: 36px; }
    main table .btn, main table button.btn, main table a.btn { min-height: 36px; }
    main table input[type=checkbox] { width: 20px; height: 20px; }
    main .app-pager-buttons .app-page-btn { min-height: 36px; padding: 8px 14px; }
    .brij-actions a, .brij-actions .btn { width: 36px; height: 36px; min-height: 36px; }


    /* ---- G5. KEYBOARD HINTS (extends the existing .brij-kbd rule) ------------
       From: Default (.qa-kbd "Alt+S/Alt+P/Alt+V"), DiamondItemEdit (.die-tip),
             ItemEdit (.ie-tip), PartyEdit (.peb-tip), StaffAttendance
             (.sa-legend .kbd-hint "P A H L O W Del=clear Esc=close").
       brij-buttons.js badges are already hidden, but these hand-written hints
       escape that selector. A phone has no Alt / Ctrl key and each one costs a
       full line of a save bar or legend. REPLACE brij-mobile.css line 143.       */
    .brij-kbd,
    .qa-kbd,
    .die-tip,
    .ie-tip,
    .peb-tip,
    .sa-legend .kbd-hint { display: none !important; }


    /* ---- G6. LABEL-RAIL FORM GRIDS (extends the existing rule) ---------------
       From: BhawCut + BhawCutList voucher modal (.bcvm-row, a 120px label rail)
       - the same shape brij-mobile.css already stacks for .bs-form-row /
       .cr-form-row / .mig-form-row / .wa-form-row. Inside .bc-vmodal
       (width:min(560px,96vw)) the field column is only ~194px on a 375px phone,
       so the Mode pill toggle wraps 2-3 lines and placeholders truncate.
       REPLACE brij-mobile.css lines 320-321.                                     */
    .bs-form-row, .cr-form-row, .mig-form-row, .wa-form-row,
    .sm-wrap .sm-row, .bcvm-row { grid-template-columns: 1fr !important; }
    .bcvm-row { gap: 3px; }
    .bcvm-label { text-align: left; padding-right: 0; }


    /* ---- G7. NESTED .container-fluid INSIDE main.container-fluid -------------
       From: AdminBillControl, BillMaster, CashBankSummary, EmailLog, StockSummary,
             StockistPartySummary, Vendors, DisplayTrayVerify, PartyGroupBalance.
       Bootstrap adds its own 12px gutter on top of main's 8px phone padding -
       ~40px of a 375px screen lost. Bootstrap's own padding utilities (.py-3,
       .px-3) are !important, hence !important here.                             */
    main.container-fluid > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ---- G8. INLINE th/td width OVERRIDES INSIDE PHONE SCROLLERS -------------
       From: DormantRevival (<th style="width:110px"> x6), JobWork (GridView
             ItemStyle-Width -> inline td style), DiamondItemEdit (#diaStonesTbl),
             DbPatch (.dbp-grid), PageVisitStats (.pv-tbl), SalesList line items.
       600-900px of fixed tracks push the row-action column far off-screen and an
       inline width cannot be beaten without !important. Releasing them lets the
       text columns wrap and pulls the actions back toward the first screen; the
       wrapper (.brij-mscroll from brij-mobile.js, or .table-responsive) still
       side-scrolls whatever is left.
       EXCEPTION - the spreadsheet line-grids are table-layout:fixed and get their
       designed track widths from exactly these inline th widths; they are already
       pinned by min-width in section 5, so releasing their widths would flatten
       every column to an equal share. They are excluded by name. (.db-grid also
       matches DayBook's GridView - harmless, DayBook has no inline th widths.)   */
    main .brij-mscroll > table:not(#itemsTable):not(#oldItemsTable):not(.db-grid):not(.os-grid):not(.op-grid):not(.dtg-grid) th[style*="width"],
    main .brij-mscroll > table:not(#itemsTable):not(#oldItemsTable):not(.db-grid):not(.os-grid):not(.op-grid):not(.dtg-grid) td[style*="width"],
    main .table-responsive th[style*="width"],
    main .table-responsive td[style*="width"],
    main .tbl-scroll th[style*="width"],
    main .tbl-scroll td[style*="width"] { width: auto !important; }


    /* ==========================================================================
       mobile-fix-1.css - PAGE-PREFIXED phone rules, slice 1 (ASCII only).

       Paste INSIDE the existing "@media screen and (max-width: 767.98px)" block
       of Content/brij-mobile.css, section 5 (page-specific fixes). Desktop is
       untouched - nothing here lives outside the phone block.

       brij-mobile.css is linked AFTER the HeadPh placeholder (Site.master:12 vs
       :17), and every page in this slice keeps its <style> in HeadPh, so equal
       specificity already wins on source order. !important appears ONLY against
       an inline style attribute, a Bootstrap utility (itself !important), or the
       brij-mobile.css safety net at line 93.

       Shared rules these pages also depend on live in mobile-fix-generic.css:
         G1 h1.page-title <small>   -> CatalogSessions, StaffAttendance, TssSstList
         G3 .brij-savebar hint text -> StockIssueToTag
         G4 tap-target floor        -> CatalogSessions, JobWork, TssSstList
         G5 keyboard hints          -> DiamondItemEdit (.die-tip),
                                       StaffAttendance (.sa-legend .kbd-hint)
         G6 .bcvm-row label rail    -> BhawCut voucher modal
         G7 nested .container-fluid -> AdminBillControl
         G8 inline th/td widths     -> DormantRevival, JobWork, DiamondItemEdit
       ========================================================================== */


    /* ---- AdminBillControl.aspx (abc) ---- */

    /* Update Bill / (Request Discount Approval) / 230px reason box / Lock /
       Unlock / Print all sit in ONE flex row (.abc-actions, :94-95). The detail
       pane is ~331px wide at 375px, so it wrapped into a ragged 3-4 line bar with
       the reason box splitting the button pairs. Reason on its own line, buttons
       two-up. */
    .abc-actions .reason { flex: 1 1 100%; min-width: 0; }
    .abc-actions .btn { flex: 1 1 calc(50% - 4px); text-align: center; justify-content: center; }

    /* 9px uppercase labels over the money inputs (:115) and 9.5px type / warning
       chips (:44, :120) are under the 11px readable floor on a phone. */
    .abc-pay-compact .abc-fld label { font-size: 10.5px; }
    .abc-lchip, .abc-dwarn { font-size: 10.5px; }

    /* .abc-locked-tbl (:98) sets white-space:nowrap on EVERY cell, so a long
       free-text reason stretches the 7-column locked-bill table past 1000px.
       Columns 2 (Party) and 6 (Reason) are text - let them wrap. */
    .abc-locked-tbl td:nth-child(2),
    .abc-locked-tbl td:nth-child(6) { white-space: normal; min-width: 140px; }


    /* ---- BhawCut.aspx (bc) ---- */

    /* .bc-head-row h1 is display:flex (:12), so the nested <small class="sub">
       becomes a flex ITEM and its display:block (:14) never applies - the 70-char
       subtitle sits on the title's own row. (This h1 has no .page-title class, so
       generic rule G1 does not reach it.) */
    .bc-head-row h1 { flex-wrap: wrap; }
    .bc-head-row h1 .sub { flex: 1 1 100%; font-size: 12px; margin-top: 2px; }

    /* 12-column .bc-grid12 (:66-76): the page's own @media(max-width:900px) only
       demotes col-2/3/4 to span 6, so at 375px the primary party search box
       (#partyPicker, .bc-col-4) and Main Group share a row at ~158px each. */
    .bc-grid12 .bc-col-3, .bc-grid12 .bc-col-4 { grid-column: span 12; }

    /* 32px inputs (:56-58) are under the 36px tap floor; the absolute "auto"
       badge (:119) is 9px. Voucher-modal label rail -> generic G6. */
    .bc-form .form-control, .bc-form .form-select { height: 36px; }
    .bc-amt-wrapper .bc-amt-auto { font-size: 10px; }


    /* ---- CatalogSessions.aspx (cs) ---- */

    /* .cs-tbl fixed tracks (:20-25) total 860px before the auto Notes column, so
       the only actions on the page (Details / End now) sat ~650px off-screen
       inside the .brij-mscroll wrapper. Release the widths, floor the ones that
       must stay legible, and stack the two row buttons. Dates keep nowrap. */
    .cs-tbl .col-code, .cs-tbl .col-when, .cs-tbl .col-exp,
    .cs-tbl .col-by, .cs-tbl .col-picks, .cs-tbl .col-act { width: auto; }
    .cs-tbl .col-code { min-width: 96px; }
    .cs-tbl .col-when, .cs-tbl .col-exp { min-width: 86px; }
    .cs-tbl .col-act { min-width: 92px; white-space: normal; }
    .cs-tbl .col-act .btn { display: block; width: 100%; margin: 0 0 4px; }

    /* .cs-toolbar (:44-45): 4 quick-range links + a flex:1 spacer + two danger
       buttons. The spacer collapses and "Purge older than 30 days" is orphaned. */
    .cs-toolbar .spacer { display: none; }
    .cs-toolbar .cs-quick { flex: 1 1 100%; }
    .cs-toolbar .btn { flex: 1 1 calc(50% - 4px); text-align: center; justify-content: center; }


    /* ---- DiamondItemEdit.aspx (die) ---- */

    /* 10-column stones grid with 640px of fixed <th> tracks on a width:100%
       table: the un-sized Stone Name column got ~60px at 375px and the datalist
       input became unusable. Generic G8 releases the inline th widths; this floor
       gives the grid its designed width so it side-scrolls in .table-responsive
       instead of crushing. */
    #diaStonesTbl { min-width: 900px; }

    /* Compact-mode override (:81) wins over :66 by source order and drops the
       section descriptions to 9px in the stacked phone rail. */
    .die-section-label .die-desc { font-size: 11px; }
    /* .die-savebar .die-tip "Press Ctrl + S to save" -> generic G5. */


    /* ---- DormantRevival.aspx (dr) ---- */

    /* .dr-toolbar (:22-24) is a flat flex list of <label>, control, <label>, ...
       with max-width:180px controls. At 375px "MIN LIFETIME SPEND:" plus its
       input no longer fit one line, so labels and inputs land on alternating
       ragged lines with Apply orphaned. Label above its own control, full width.
       max-width needs !important because brij-mobile.css:93 already forces
       max-width:100% on every control; .ms-auto is a Bootstrap utility. */
    .dr-toolbar { gap: 4px 8px; }
    .dr-toolbar label { flex: 1 1 100%; margin-top: 6px; }
    .dr-toolbar .form-control, .dr-toolbar .form-select { flex: 1 1 100%; max-width: none !important; }
    .dr-toolbar .btn { flex: 1 1 100%; margin-top: 8px; }
    .dr-toolbar .ms-auto { flex: 1 1 100%; margin-left: 0 !important; }

    /* 700px of inline <th style="width:.."> (:84-90) put the WhatsApp button +
       Logged check - the whole point of the page - ~750px right of the customer
       name. Generic G8 releases those widths; here we drop the one derivable
       column (Days Ago; Last Visit and the Bucket pill already carry it) and keep
       the action cell on one line. The Mobile column is deliberately KEPT: on a
       phone it is the page's actionable data. */
    .dr-grid th:nth-child(4), .dr-grid td:nth-child(4) { display: none; }
    .dr-grid td:nth-child(7) { white-space: nowrap; }

    /* .dr-kpi-row (:8) is repeat(auto-fit, minmax(180px,1fr)) - two tiles plus a
       12px gap do not fit 359px, so 4 tiles stacked 1-up and pushed the list
       ~330px down the screen. */
    .dr-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dr-kpi { padding: 10px 12px; }


    /* ---- JobWork.aspx (jw) ---- */

    /* .jw-toolbar (:26): search box in an inline-styled
       div style="flex:1;min-width:220px;max-width:380px", then 5 status pills and
       Search / Clear. At 375px the pills wrapped so Clear was orphaned and the
       search box shared a line with the first pills. Inline style -> !important. */
    .jw-toolbar > div:first-child { flex: 1 1 100% !important; max-width: none !important; }
    .jw-toolbar .jw-pill { flex: 1 1 auto; text-align: center; }
    .jw-toolbar .btn { flex: 1 1 calc(50% - 5px); text-align: center; justify-content: center; }

    /* GridView ItemStyle-Width renders inline td widths (~1100px table); generic
       G8 releases them. The action cell then only needs to stop forcing one line,
       and its four icon buttons (:57, padding 3px 8px = ~24px) need a thumb-sized
       target. */
    .jw-grid .jw-actions { white-space: normal; min-width: 84px; }
    .jw-grid .jw-actions .btn { padding: 7px 10px; font-size: 13px; min-height: 36px; margin: 0 2px 3px 0; }


    /* ---- StaffAttendance.aspx (sa) ---- */

    /* .sa-grid (:15-20) renders 28-31 clickable day cells per row at ~20x24px -
       far below a 36px finger target - and the 160px staff column scrolls away
       with the days inside the .table-responsive box, so the operator loses track
       of whose row is being marked. Bigger cells + a sticky staff column. */
    .sa-grid { font-size: 12px; }
    .sa-grid thead th { font-size: 11px; min-width: 34px; padding: 6px 2px; }
    .sa-grid tbody td { min-width: 34px; height: 36px; padding: 4px 2px; }
    .sa-grid thead th.staff-col, .sa-grid tbody td.staff-col {
        position: -webkit-sticky;
        position: sticky;
        left: 0; z-index: 2;
        width: 120px; min-width: 120px;
        box-shadow: 2px 0 0 #e1e5eb;
    }
    .sa-grid tbody td.staff-col { background: #fff; }
    .sa-grid thead th.staff-col { background: #f5f6f8; z-index: 3; }

    /* .sa-toolbar (:10): Year / Month / Load / "Mark all Present today" /
       "Mark Sundays as WeekOff" / hint, each in its own div with a &nbsp; spacer
       label. At 375px the two long outline buttons each took a line and the row
       wrapped into 5 ragged lines. */
    .sa-toolbar { gap: 6px 8px; padding: 8px 12px; }
    .sa-toolbar > div { flex: 1 1 calc(50% - 4px); }
    .sa-toolbar > div .form-select, .sa-toolbar > div .btn { width: 100%; }
    .sa-toolbar > div.ms-auto { flex: 1 1 100%; margin-left: 0 !important; }
    /* .sa-legend .kbd-hint (P A H L O W Del Esc) -> generic G5.
       h1.page-title inline <small> -> generic G1. */


    /* ---- StockIssueToTag.aspx (sit) ---- */

    /* .sit-savebar is also .brij-savebar, so brij-mobile.css:138 gives each
       button flex:1 1 calc(50% - 6px) (~165px) while site.css:847 forces
       height:38px - the 26-char "Save Voucher & Create Tags" label wrapped to two
       lines and overflowed the button. Give the primary action the full row.
       !important because the .brij-savebar rule has equal specificity and may be
       assembled after this block. The me-auto info sentence is hidden by G3. */
    .sit-savebar .btn-save-tags { flex: 1 1 100% !important; }
    .sit-savebar .total-pill { flex: 1 1 100%; text-align: center; }

    /* brij-mobile.css:228 already makes the entry grid 2-up, but the required
       Parent Item typeahead (the one text field that must be usable) was a
       half-width ~163px cell next to Sub Group, and 30px inputs (:34-38) are
       under the 36px tap floor. */
    .sit-entry > div:nth-child(3) { grid-column: 1 / -1; }
    .sit-entry .form-control, .sit-entry .form-select { height: 36px; font-size: 13px; }


    /* ---- TssSstList.aspx (sl, scoped by the page-unique .sl-tss) ----
       StockInOutList.aspx uses the SAME .sl-wrap / .sl-filter-row / .sl-tbl
       prefix with different column meanings (its 3/4/5 are Party / Rcv / Iss
       counts, not Direction / From / To), so a class "sl-tss" was added to this
       page's wrapper div and every rule below is scoped to it. The shared
       ".sl-filter-row { 1fr 1fr }" already in brij-mobile.css:241 is correct for
       both pages and stays unscoped. */

    /* 7 filter children paired 1fr 1fr become From|To, Search|Direction,
       Lock|Apply, Reset - the full-text search box squeezed to half a column and
       the Apply/Reset pair split across two lines. Search takes the full row, so
       the pairs become From|To, Search, Direction|Lock, Apply|Reset. 30px
       controls (:21-22) are also under the tap floor. */
    .sl-tss .sl-filter-row > div:nth-child(3) { grid-column: 1 / -1; }
    .sl-tss .sl-filter-row .form-control, .sl-tss .sl-filter-row .form-select { height: 36px; }
    .sl-tss .sl-filter-row .btn { width: 100%; height: 36px; justify-content: center; }

    /* .sl-tbl tbody td (:37) is white-space:nowrap on EVERY cell of the
       11-column list, so stockist / tag-center names cannot wrap and the table
       runs past 1000px with Print / Delete at the far right. */
    .sl-tss .sl-tbl tbody td:nth-child(3),
    .sl-tss .sl-tbl tbody td:nth-child(4),
    .sl-tss .sl-tbl tbody td:nth-child(5) { white-space: normal; min-width: 110px; }

    /* Row actions (:53-57) are ~22px tap targets - they are not .btn/.btn-sm, so
       the shared G4 floor does not reach them. */
    .sl-tss .sl-tbl .btn-print,
    .sl-tss .sl-tbl .btn-del,
    .sl-tss .sl-tbl .btn-req { padding: 8px 10px; font-size: 12px; min-height: 36px; }

    /* 9-10px status / direction badges (:45-48, :31) in a 12.5px table. */
    .sl-tss .sl-tbl .badge-lock, .sl-tss .sl-tbl .badge-open,
    .sl-tss .sl-tbl .dir-tss, .sl-tss .sl-tbl .dir-sst,
    .sl-tss .sl-card-head .pill { font-size: 10.5px; }
    /* h1.page-title inline <small> subtitle -> generic G1. */


    /* ============================================================
       mobile-fix-2.css - FRAGMENT for Content/brij-mobile.css
       section 5 (page-specific fixes). Paste INSIDE the existing
       "@media screen and (max-width: 767.98px)" block. ASCII only.
       Source: 178-page phone audit, slice 2 (15 pages).
       Nothing here is global - every selector is page-prefixed.
       ============================================================ */

    /* ---- BhawCutList.aspx (bc) ----
       Filter row was four ragged lines at 375px: the search div carries
       inline "flex:1;min-width:200px;max-width:340px" and the two selects
       inline max-widths, so nothing shared a line and Export CSV was
       orphaned right by .ms-auto. Now: search full width on top, the two
       selects two-up, Refresh + Export two-up. Table cells and pager
       buttons also slimmed (th inline widths are released by the shared
       rule, so the grid sizes to content instead of ~1100px). */
    .bc-filter-row { padding: 8px 10px; gap: 6px; }
    .bc-filter-row .filter-lbl { display: none; }
    .bc-filter-row > div { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; order: -1; }
    .bc-filter-row .form-select { flex: 1 1 calc(50% - 6px); max-width: none !important; }
    .bc-filter-row .btn { flex: 1 1 calc(50% - 6px); min-height: 36px; }
    .bc-filter-row .btn.ms-auto { margin-left: 0 !important; }
    .bc-grid thead th, .bc-grid tbody td { padding: 7px 8px; }
    .bc-grid tfoot td { padding: 8px 8px; }
    .bc-pager { padding: 10px 12px; }
    .bc-pager-buttons .bc-page-btn { padding: 8px 12px; font-size: 12.5px; }

    /* ---- EditRequests.aspx (er) ----
       HIGH: the Requests card head is icon + title + four tab chips
       (~376px of min-content) inside .er-card { overflow:hidden }, so the
       "All" chip was clipped to a stub at 375px and gone at 360px - the
       admin could not reach the All / Rejected views. Tabs now drop to
       their own full-width line and share it evenly.
       Also: the Action cell was white-space:nowrap (two btn-sm on one
       ~210px line) which pushed the only controls on the page two screens
       right; and the Direct Action button row orphaned its third button.
       Bootstrap .d-none (display:none !important) still hides the buttons
       on non-pending rows. Page <style> is in HeadPh, so no !important. */
    .er-card-head { flex-wrap: wrap; row-gap: 6px; }
    .er-card-head .er-tabs { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
    .er-card-head .er-tab { flex: 1 1 auto; text-align: center; padding: 7px 8px; }
    .er-grid .er-actions { white-space: normal; }
    .er-grid .er-actions .btn { display: block; width: 100%; margin: 0 0 4px; min-height: 36px; }
    .er-card .col-md-9.d-flex > .btn { flex: 1 1 auto; min-height: 36px; }

    /* ---- OtherBillPrint.aspx (inv) ----
       The navy header band is a no-wrap flex with two ~230px blocks in a
       319px strip, so the company name broke into 3 lines beside a 2-line
       right-aligned doc title. Stack the two blocks and cut the 26px page
       padding (the negative margins of the band and the gold accent bar
       are re-matched to it). !important only on text-align, which has to
       beat the inline style="text-align:right". */
    .inv { padding: 14px 12px; }
    .inv .bill-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin: -14px -12px 0; }
    .inv .bill-header > div { flex: 1 1 100%; text-align: left !important; }
    .inv .acc-bar { margin: 0 -12px 12px; }

    /* ---- StaffBiometric.aspx (bio) ----
       loadStatus() emits the Remove button with an inline
       style="padding:3px 8px;font-size:11px", which beats the page's own
       phone rule (.bio-btn { padding:13px 16px }) - a ~22px tap target for
       the only destructive control in the Enrolled-staff table.
       !important is required to beat the inline attribute. */
    .bio-tbl .bio-btn { padding: 7px 12px !important; font-size: 12.5px !important; }

    /* ---- StockNotePrint.aspx (sp) ----
       .sp-balance is repeat(3, 1fr) holding three 1.4rem numbers: 1fr
       tracks cannot shrink below min-content, so the block overflowed its
       gold border by ~70px and gave the whole page a horizontal scroll.
       Same for the 1fr/150px/150px net-position rows. .sp-meta's third
       cell (party + mobile) gets the full width, and 56px of the 359px
       page column was side padding. Screen only - @page print is
       untouched. Page <style> is in HeadPh, so no !important. */
    .sp-page { padding: 14px 12px; margin: 8px auto; }
    .sp-balance { grid-template-columns: 1fr; gap: 6px; padding: 8px 12px; }
    .sp-balance .cell { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; }
    .sp-balance .cell .num { font-size: 1.1rem; margin-top: 0; }
    .sp-meta { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sp-meta .cell:last-child { grid-column: 1 / -1; }
    .sp-netpos .np-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 8px; }
    .sp-netpos .np-row .k { min-width: 0; word-break: break-word; }

    /* ---- UserEdit.aspx (ue) ----
       "Press Ctrl+S to save" is hand-written <kbd> markup, not a
       brij-buttons.js .brij-kbd badge, so the app-wide hide misses it: on
       a phone it took the whole first footer line and pushed Delete /
       Cancel / Save User onto a second one. Field controls were 32px tall
       with 10.5px hints. This page's <style> block lives in MainPh, i.e.
       AFTER brij-mobile.css, so every rule here needs !important. */
    .ue-ft .ue-ftmeta { display: none !important; }
    .ue-ft .btn { flex: 1 1 auto; min-height: 38px; }
    .ue-grid .form-control, .ue-grid .form-select { height: 38px !important; font-size: 14px !important; }
    .ue-pw .form-control { padding-right: 38px !important; }
    .ue-eye { height: 38px !important; width: 34px !important; }
    .ue-hint, .ue-tg-d, .ue-segnote { font-size: 11.5px !important; }


    /* ============================================================
       mobile-fix-3.css - fragment for Content/brij-mobile.css
       PASTE THE WHOLE FILE INSIDE the existing
       "@media screen and (max-width: 767.98px) { ... }" block
       (section 5, page-specific fixes). ASCII only.
       Slice 3 pages: AgentSalesReport, BillAmountReconcile,
       DiamondList, ItemAging, OtherItemMaster, PartyOpening,
       StaffEdit, Users.
       !important is used ONLY where an inline style attribute, a
       Bootstrap !important utility, or an earlier !important rule
       in this same file would otherwise win. All eight pages put
       their <style> in HeadPh, which Site.master renders BEFORE
       brij-mobile.css, so equal-specificity rules here already win.
       ============================================================ */

        /* ---- AgentSalesReport.aspx (asr) ---- */
        /* .asr-filter is a flat flex-wrap list of loose <label> + control
           siblings, so at 375px the wrap point falls BETWEEN a label and its
           control (From / To / Agent / Bill Type all split across lines).
           76px label rail + calc(100% - 90px) control = one pair per line.
           max-width !important beats the inline Style="max-width:160/240/200px"
           AND section 1's ".form-control { max-width:100% !important }". */
        .asr-filter { padding: 8px 12px; gap: 6px 10px; }
        .asr-filter label { flex: 0 0 76px; }
        .asr-filter .form-control, .asr-filter .form-select {
            flex: 1 1 calc(100% - 90px); max-width: none !important;
            height: 36px; min-width: 0;
        }
        .asr-filter .btn { flex: 1 1 100%; padding: 8px 12px; font-size: 13px; }
        /* quick-range span carries Bootstrap .ms-auto (margin-left:auto !important) */
        .asr-filter .ms-auto { flex: 1 1 100%; margin-left: 0 !important; text-align: center; }
        .asr-filter .ms-auto a { display: inline-block; padding: 6px 8px; }
        /* KPI strip: repeat(auto-fit, minmax(180px,1fr)) yields ONE column at
           359px, so 4 tiles push the filter + table ~300px below the fold. */
        .asr-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
        .asr-kpi { padding: 10px 12px; }
        .asr-kpi .num { font-size: 1.15rem; }

        /* ---- BillAmountReconcile.aspx (rec) ---- */
        /* 9-column admin table inside the JS .brij-mscroll wrapper: the only
           control (Fix) sits in column 9, ~600px off-screen. Hide the three
           formula INPUT columns (Gross / -Disc / -Old Gold); Correct NET,
           Stored BillAmt, Drift and Fix - the decision columns - stay. */
        .rec-tbl th:nth-child(n+3):nth-child(-n+5),
        .rec-tbl td:nth-child(n+3):nth-child(-n+5) { display: none; }
        /* the Party TEXT cell inherited white-space:nowrap from the numeric rule */
        .rec-tbl td.lft:nth-child(2) { white-space: normal; min-width: 130px; }
        .rec-tbl thead th, .rec-tbl tbody td { padding: 6px 8px; }
        /* Fix button was 3px/10.5px = ~22px tall */
        .rec-tbl .btn-fix { padding: 8px 14px; font-size: 12px; }

        /* ---- DiamondList.aspx (dl) ---- */
        /* MUST stay nested at 700px: the page's own mobile-card block is
           "@media (max-width: 700px)", and between 701 and 767px the
           18-column desktop table is the intended rendering. */
        @media screen and (max-width: 700px) {
            /* The GridView has UseAccessibleHeader but NO TableSection, so it
               emits bare <th>/<td> rows with no <thead>/<tfoot> - the page's
               ".dl-grid thead, .dl-grid tfoot { display:none }" matches nothing.
               (a) the header <tr> became a card holding 17 nowrap <th> cells, a
               ~1200px strip that put a horizontal scrollbar on the whole list.
               !important because the page's live-filter JS writes tr.style.display. */
            .dl-grid tr:has(> th) { display: none !important; }
            /* (b) ShowFooter="true" row: every <td> is hidden, leaving an empty
               bordered card after the last bill. Item rows carry td.dl-mhead and
               the EmptyDataTemplate row has a single <td>, so both are excluded. */
            .dl-grid tr:has(> td):not(:has(> td.dl-mhead)):not(:has(> td:only-child)) {
                display: none !important;
            }
            /* (c) the EmptyDataTemplate cell was hidden by ".dl-grid td
               { display:none !important }" - a phone showed an empty card and NO
               "No diamond bills found" message. */
            .dl-grid td:only-child { display: block !important; padding: 0 !important; }
            .dl-grid td:only-child .alert { margin: 0 !important; }
            /* EST / CASH SALE / Due / Advance / Paid + related-voucher badges were
               sized by the desktop compact rule (9.5px), below the 11px floor. */
            .dl-grid .badge { font-size: 11px; padding: 3px 7px; }
        }

        /* ---- ItemAging.aspx (ia) ---- */
        /* same loose label/control toolbar shape as .asr-filter: at 327px the
           "Group:" label was orphaned at the end of line 1 with its select on
           line 2. 56px rail + calc(100% - 70px) control = one pair per line. */
        .ia-toolbar { padding: 8px 12px; gap: 6px 10px; }
        .ia-toolbar label { flex: 0 0 56px; }
        .ia-toolbar .form-control, .ia-toolbar .form-select {
            flex: 1 1 calc(100% - 70px); max-width: none !important;
            height: 36px; min-width: 0;
        }
        .ia-toolbar .ms-auto { flex: 1 1 100%; margin-left: 0 !important; }
        /* minmax(180px,1fr) -> one column at 359px; Fresh/Aging/Dead/Value stack */
        .ia-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
        .ia-kpi { padding: 10px 12px; }
        .ia-kpi .num { font-size: 1.15rem; }

        /* ---- OtherItemMaster.aspx (om) ---- */
        /* Hand-rolled #edModal overlay (inline style, opened with display:flex):
           no overflow-y on the overlay and overflow:hidden on the box, so nothing
           scrolls. With the Android keyboard open the layout viewport drops to
           ~350px, the vertically centred ~560px box is cut top and bottom and
           Save / Cancel are unreachable. Inline styles, hence !important. */
        #edModal {
            overflow-y: auto; -webkit-overflow-scrolling: touch;
            align-items: flex-start !important; padding: 12px 0 24px;
        }
        #edModal > div {
            max-width: none !important; width: calc(100% - 16px) !important; margin: 0 auto;
        }
        /* 11-column .om-tbl: Stock and the Edit / Barcode / Delete buttons were
           ~700px off-screen. Hide Unit, HSN, GST %, Markup % and Rate-wise Stock;
           Code, Name, Purchase, Sale, Stock and the row actions stay. */
        .om-tbl th:nth-child(3), .om-tbl td:nth-child(3),
        .om-tbl th:nth-child(4), .om-tbl td:nth-child(4),
        .om-tbl th:nth-child(5), .om-tbl td:nth-child(5),
        .om-tbl th:nth-child(7), .om-tbl td:nth-child(7),
        .om-tbl th:nth-child(9), .om-tbl td:nth-child(9) { display: none; }
        .om-tbl th, .om-tbl td { padding: 6px 7px; }
        .om-sub { font-size: 10px; }

        /* ---- PartyOpening.aspx (po) ---- */
        /* .po-toolbar = search (min 200 / max 380) + four filter pills + Search +
           Clear + a ms-auto "Save All Changes". At 327px only the "All" pill
           shared line 1 with the search box and the three buttons squeezed onto
           one ~320px line. Search full width, pills 2x2, Search+Clear two-up,
           Save All on its own row. Pills were 26px tall tap targets. */
        .po-toolbar { padding: 8px 12px; gap: 6px 8px; }
        .po-toolbar .po-search { flex: 1 1 100%; max-width: none; min-width: 0; }
        .po-toolbar .po-pill { flex: 1 1 calc(50% - 4px); text-align: center; padding: 8px 10px; }
        .po-toolbar .btn { flex: 1 1 calc(50% - 4px); padding: 8px 12px; }
        /* Bootstrap .ms-auto is margin-left:auto !important */
        .po-toolbar .btn.ms-auto { flex: 1 1 100%; margin-left: 0 !important; }
        /* minmax(190px,1fr) -> one column at 359px before the editable grid */
        .po-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
        .po-kpi { padding: 10px 12px; }
        .po-kpi .num { font-size: 1.15rem; }

        /* ---- StaffEdit.aspx (se) ---- */
        /* The page's compact density (30px controls, 12.5px text, 10px labels)
           applies at every width; its own 768px block only re-spans the grid
           columns. On a phone every field was a 30px tap target. */
        .se-body .form-control, .se-body .form-select, .se-body .input-group-text {
            height: 36px; font-size: 14px;
        }
        .se-body textarea.form-control { height: auto; }
        .se-body label.fl { font-size: 11px; }
        .se-comm-toggle { height: 36px; }
        .se-foot .btn { height: 38px; font-size: 13px; }

        /* ---- Users.aspx (um) ---- */
        /* .um-toolbar: the "Status:" label was orphaned at the end of line 2 with
           its select on line 3. Search full width, then a 60px label rail with
           its select on the same line, then Apply / Clear two-up.
           !important on the first two rules: the search wrapper carries
           style="flex:1;min-width:200px;max-width:340px" and each DropDownList
           carries Style="max-width:160/130px;height:32px". */
        .um-toolbar > div:first-child {
            flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important;
        }
        .um-toolbar > label { flex: 0 0 60px; }
        .um-toolbar select.form-control {
            flex: 1 1 calc(100% - 76px); max-width: none !important;
            height: 36px !important; min-width: 0;
        }
        .um-toolbar input.form-control, .um-toolbar .input-group-text { height: 36px; }
        .um-toolbar .btn { flex: 1 1 40%; padding: 8px 12px; }
        /* Edit / Reset Password were ~25px tall in a side-scrolling grid. */
        .um-actions { gap: 6px; }
        .um-actions .btn { padding: 8px 11px; font-size: 14px; }
        /* This GridView has no TableSection either, so it emits no <tbody> and the
           page's ".um-grid tbody td" padding rule never matched - target td. */
        .um-grid td { padding: 8px 10px; }


    /* ============================================================
       mobile-fix-4.css - FRAGMENT for Content/brij-mobile.css
       section 5 (PAGE-SPECIFIC FIXES). Slice 4 of the phone audit.
       Every rule below belongs INSIDE the existing
           @media screen and (max-width: 767.98px) { ... }
       block. Pure ASCII. Desktop untouched.

       Cascade facts used here (verified against Site.master):
         - Site.master line 12 = HeadPh, line 17 = brij-mobile.css,
           so this file BEATS a page's own <style> on equal
           specificity. !important is still used where the page
           declares the SAME property (same convention as the
           existing .plw-tbl rule at line 252) and is REQUIRED
           against inline style="" attributes.
         - Site.master carries a body-level <style> (approx line
           1467) with [class$="-kpi"] { padding:4px 9px !important;
           border-left-width:3px !important } and
           [class$="kpi-row"] { gap:6px !important }. That block is
           LATER in the document, so KPI padding/gap cannot be
           changed from here without extra specificity - and its
           values are already phone-friendly, so no rule below
           fights it.
       ============================================================ */


    /* ---- Aging.aspx (ag) ---- */
    /* toolbar: search box was flex:1;min-width:200px;max-width:320px inline, so
       "Bucket:" was orphaned at the end of line 1 and its 140px select dropped to
       line 2 next to Export CSV. Search takes its own line; label + select + button
       then form one tidy row. Inline styles -> !important. */
    .ag-toolbar > div:first-child { flex: 1 1 100% !important; max-width: none !important; }
    .ag-toolbar select { flex: 1 1 120px; max-width: none !important; }
    /* 28px controls (page) + inline height:28px on the bucket select -> 36px floor. */
    .ag-toolbar input.form-control,
    .ag-toolbar select,
    .ag-toolbar .btn { height: 36px !important; min-height: 36px !important; }

    /* tab strip: two ~240px tabs in a 359px row shrank to min-content and wrapped
       mid-sentence ("Receivable (parties owe" / "us)"). Stack them full width and
       drop the -2px border-overlap trick, which no longer lines up once wrapped. */
    .ag-tabs { flex-wrap: wrap !important; gap: 6px !important; border-bottom: 0 !important; padding-bottom: 0 !important; }
    .ag-tabs .ag-tab { flex: 1 1 100%; text-align: left; border-radius: 6px !important; margin-bottom: 0 !important; padding: 8px 12px !important; }

    /* grid pane: brij-mobile.css:129-132 already gives .ag-grid-wrap overflow-x but
       the page's max-height:calc(100vh - 360px) left a ~300px two-axis scroll box
       inside a scrolling page. Release it (section 3 does the same for im/um). */
    .ag-grid-wrap { max-height: none !important; min-height: 0 !important; }

    /* Party column has no width while every number column is fixed 85-130px, so
       inside the side-scroller it collapsed to its longest word. */
    .ag-grid td:nth-child(2) { min-width: 170px; }

    /* 9.5px KPI captions -> 11px floor; the .num is already 1.05rem but a
       "Rs 12,34,567.00 Dr" run still touches the tile edge at 375px. */
    .ag-kpi .lbl, .ag-kpi .sub { font-size: 11px !important; }
    .ag-kpi-row .ag-kpi .num { font-size: 15px !important; overflow-wrap: anywhere; }
    .ag-kpi-row .ag-kpi .num .amt-suffix { font-size: 10px; }


    /* ---- BillMaster.aspx (bm) ---- */
    /* filter row: three bare divs with no basis -> two dates at their intrinsic
       ~140px and Show orphaned on a third line. Dates two-up, Show full width. */
    .bm-filters > div { flex: 1 1 calc(50% - 10px); }
    .bm-filters > div:last-child { flex: 1 1 100%; }
    .bm-filters .form-control, .bm-filters .btn { width: 100%; }

    /* masthead title line: .dt is white-space:nowrap and never wraps, squeezing the
       13px bold title into ~175px beside it. */
    .bm-print-head .ti { flex-wrap: wrap; gap: 2px 10px; }
    .bm-print-head .dt { white-space: normal !important; flex: 1 1 100%; }

    /* the page nests its own .container-fluid inside main.container-fluid, adding a
       second 12px gutter (335px of usable width instead of 359px). :has() keeps
       this scoped to BillMaster; browsers without :has() simply keep today's look. */
    main.container-fluid > .container-fluid:has(> .bm-head) { padding-left: 0 !important; padding-right: 0 !important; }


    /* ---- DayBook.aspx (db) ---- */
    /* KPI strip (audit HIGH, downgraded to MEDIUM by both skeptic passes).
       Real geometry: Site.master's global KPI block already forces padding 4px 9px
       + gap 6px, so a tile is ~176px wide with a ~164px clip edge - everyday totals
       are NOT cut off, but a >= Rs 10 lakh day flushes/nicks the last digits and the
       Dr/Cr chip drops to its own line. At a 360px viewport auto-fit minmax(170px)
       also collapses to ONE column, so pin two columns explicitly.
       overflow:hidden is deliberately KEPT (and re-asserted at higher specificity):
       .db-kpi is position:relative, so overflow:visible would only let one tile
       paint under the next, and it would turn the grid item's min-width:auto into
       min-content and side-scroll the page. min-width:0 + overflow-wrap do the job. */
    .db-kpi-row { grid-template-columns: 1fr 1fr !important; }
    .db-kpi-row .db-kpi { min-width: 0; overflow: hidden !important; }
    .db-kpi .db-num { font-size: 1.1rem !important; overflow-wrap: anywhere; }
    .db-kpi .db-lbl { font-size: 10px; }
    .db-kpi .db-icon { display: none; }
    .db-kpi.bills { grid-column: 1 / -1; }   /* Net Business full width - no orphan tile */

    /* receipt / GST rows: 28px 1fr auto 100px on a 323px row put "Rs 12,34,567.00"
       (~105px) into a 100px track while the label shrank to ~110px. Bar gets the
       fixed track (brij-mobile.css:224 already floors it at 56px), value gets auto. */
    .db-row { grid-template-columns: 28px 1fr 56px auto !important; gap: 8px !important; padding: 8px 12px !important; }
    .db-row .db-row-val { white-space: nowrap; }

    /* voucher grid: every column carries an ItemStyle-Width except Party, so inside
       the 760px min-width (brij-mobile.css:215 - a .db-grid prefix collision with
       DiamondBillEntry) party names wrapped word-by-word. Targeting .db-party keeps
       this off DiamondBillEntry's line grid, which has no .db-party. */
    .db-grid .db-party { min-width: 170px; }


    /* ---- DiamondMaster.aspx (dm) ---- */
    /* row actions are bare 12px LinkButtons ~17px tall - the only per-row controls
       on the page. Give them a real tap box and buy the width back from the cell. */
    .dm-tbl .lb { display: inline-block; padding: 9px 8px; margin-left: 4px !important; font-size: 13px !important; }
    .dm-tbl td { padding: 4px 6px !important; }
    /* "Import from existing items" (~190px) was orphaned on line 2 at its natural
       width under the input + Add pair. */
    .dm-add .btn { flex: 1 1 auto; min-height: 36px; }


    /* ---- ErrorLog.aspx (el) ---- */
    /* .el-tbl is a bare table (brij-mobile.js wraps it in .brij-mscroll). Its pixel
       widths are only preferred widths in auto layout, and .col-url is
       word-break:break-all, so its min-content is ONE character - URLs rendered as a
       one-letter-per-line sliver. Give the table its real working width. */
    .el-tbl { min-width: 900px; }
    .el-tbl .col-url { min-width: 160px; }

    /* filter strip: 7 children, the Search field is inline flex:2 and the Apply
       field inline flex:0 0 auto with a &nbsp; spacer label that only exists for
       desktop alignment - Apply landed alone on a 4th line at ~60px wide. */
    .el-filt .fld:nth-last-child(2) { flex: 1 1 100% !important; }
    .el-filt .fld:last-child { flex: 1 1 100% !important; }
    .el-filt .fld:last-child label { display: none; }
    .el-filt .fld:last-child .btn { width: 100%; min-height: 36px; }


    /* ---- ItemEdit.aspx (ie) ---- */
    /* save bar: .ie-savebar already wraps (brij-mobile.css:171) but the
       "Press Ctrl + S to save" hint holds line 1 with margin-right:auto and one
       orphaned button beside it, so Save Item lands wherever. Buttons two-up. */
    .ie-savebar .ie-tip { display: none !important; }
    .ie-savebar .btn { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; padding: 9px 10px !important; }
    .ie-savebar .badge { flex: 1 1 100%; text-align: center; }

    /* density: the Rates and Tax sections are all 4-6 character numerics
       (Sale/Purchase Rate, Labour, Purity, 3 weights, HSN, Tax/CGST/SGST/IGST/Cess)
       yet each gets a full 330px row. Two-up halves the scroll. The Identity
       section is deliberately left one-per-line - it holds Main Group / Sub Group /
       Stockist dropdowns whose values do not fit 165px. */
    .ie-section.rates .row > .col-md-3,
    .ie-section.rates .row > .col-md-4,
    .ie-section.tax   .row > .col-md-3 { width: 50%; }


    /* ---- Ledger.aspx (lg) ---- */
    /* filter: col-md-2 From + col-md-2 To each took a full line and the two buttons
       sat at natural width under a third - the exact failure PartyLedgerWeight
       already fixes at brij-mobile.css:262-268. Same treatment. */
    .lg-filter-body { padding: 10px 12px !important; }
    .lg-filter-body .row > .col-md-2 { width: 50%; }
    .lg-filter-body .row > .col-md-auto { width: 100%; display: flex; gap: 6px; }
    .lg-filter-body .row > .col-md-auto .btn { flex: 1 1 auto; margin: 0 !important; }

    /* row actions: the page overrides btn-sm down to 24x24px icon buttons.
       NOTE .bl-* is BillList's prefix, re-declared inside Ledger.aspx's own
       <style>; both pages want the same 34px floor. */
    .bl-grid .bl-actions a { width: 34px !important; height: 34px !important; font-size: 14px !important; }
    /* Disc / Old subscript is emitted from Ledger.aspx.cs with inline
       font-size:9.5px on the div, hence the attribute selector + !important. */
    .bl-grid td.bl-bill > div[style] { font-size: 10.5px !important; }


    /* ---- OtherPurchase.aspx (op) ---- */
    /* line grid is table-layout:fixed with 11 percent tracks. brij-mobile.css:216
       gives .os-grid/.op-grid 680px, at which Markup % / GST % / HSN resolve to
       ~34-41px cells - about 24px of typing room. 960px makes them usable. The
       .op-card prefix raises specificity so this beats line 216 whatever order the
       fragments are assembled in. Input font-size is left at the page's 11px on
       purpose: enlarging it would eat back the width this rule just bought. */
    .op-card .op-grid { min-width: 960px !important; }
    .op-card .op-grid input { height: 34px; }

    /* totals table is a fixed 340px inside a ~311px body, so brij-mobile.js put it
       in a side-scroller and the Grand Total / Discount column sat off-screen. */
    .op-payrow .op-totals { width: 100%; margin-left: 0; }
    .op-payrow .op-totals td.val { min-width: 0; }
    .op-payrow .op-totals input.op-disc { width: 100%; max-width: 130px; }

    /* sticky savebar: the 200-character "Supplier Payment is recorded here..." note
       keeps flex:0 1 auto, is squeezed to min-content beside Item Master and wraps
       to 6-7 lines, growing the pinned bar to ~150px of a 667px viewport. */
    .op-card ~ .brij-savebar > span.text-muted { display: none !important; }


    /* ---- PaymentCollect.aspx (pc) ---- */
    /* This page is used at the counter ON a phone (scan-to-pay), yet every action is
       btn-sm (site.css min-height 28px) and the UTR box is form-control-sm with an
       inline max-width:220px. */
    .pc-actions .btn, .pc-tap { min-height: 40px !important; padding: 8px 14px !important; font-size: 13px !important; }
    .pc-actions .form-control-sm { max-width: 100% !important; min-height: 40px; }


    /* ---- RequestEdit.aspx (re) ---- */
    /* .re-actions has no flex-wrap; "Submit Payment Reset Request" (~225px) beside
       "Cancel", or "Open Bill Requests to approve" (~230px) beside "Back", shrink to
       min-content in the 315px footer and the captions break inside the buttons. */
    .re-actions { flex-wrap: wrap; }
    .re-actions .btn { flex: 1 1 auto; text-align: center; }


    /* ---- StaffExpense.aspx (se) ---- */
    /* Approve (Salary) / Approve (Voucher) / Reject are bare 11px text links ~16px
       tall, 6px apart, with no nowrap - inside the side-scrolling table they also
       break per word. Approve (Voucher) pays real cash, so it gets a real target. */
    .se-grid .actions { white-space: nowrap; }
    .se-grid .actions a { display: inline-block; padding: 8px 8px; margin: 2px 2px 2px 0 !important; font-size: 12.5px !important; border: 1px solid currentColor; border-radius: 6px; }

    /* claim form: Date / Category / Amount / Bill image each took a full-width row,
       and the col-md-1 Submit kept its desktop &nbsp; spacer label as a blank line. */
    .se-body .row > .col-md-2 { width: 50%; }
    .se-body .row > .col-md-1 label { display: none; }


    /* ---- StockValuation.aspx (val) ---- */
    /* minmax(200px,1fr) gives ONE column at 375px, so four stat tiles ate ~340px of
       screen before the breakdown table. */
    .val-kpi-row { grid-template-columns: 1fr 1fr !important; }
    .val-kpi .vk-num { font-size: 1.1rem !important; }

    /* filter: four col-md-3 blocks stacked into four rows. First three two-up; the
       last one holds the Rate-basis radios plus Apply/Reset, so it keeps the full
       line and its buttons share it. */
    .val-filter-body .row > .col-md-3 { width: 50%; }
    .val-filter-body .row > .col-md-3:last-child { width: 100%; }
    .val-filter-body .row > .col-md-3:last-child .d-flex .btn { flex: 1 1 auto; }
    .val-filter-body .btn { min-height: 36px; }


    /* ---- VaultBatchDetail.aspx (vbd) ---- */
    /* 8 columns with no nowrap on body cells: .vbd-tbl-wrap side-scrolls
       (brij-mobile.css:129-132) but the table laid out at column min-content, so
       "02-Sep-2026" broke at both hyphens and the Release button split. */
    .vbd-tbl { min-width: 720px; }
    .vbd-tbl tbody td { white-space: nowrap; padding: 7px 8px !important; }
    .vbd-tbl td.pty { white-space: normal; min-width: 170px; }

    /* .vbd-card-head is NOT in the section-4 wrap list (only .vbd-selbar is), so the
       count pill broke into two lines while the 70-char subtitle wrapped around it. */
    .vbd-card-head { flex-wrap: wrap !important; row-gap: 2px; }
    .vbd-card-head .count { white-space: nowrap; margin-left: auto; }
    .vbd-card-head .title small { display: block; font-size: 11px; }

    /* the release flow is driven by native 13px checkboxes in a 34px inline-width
       column - the smallest target on a money page. */
    .vbd-tbl input[type=checkbox] { width: 20px; height: 20px; }
    .vbd-tbl th.ctr:first-child { width: 44px !important; }
    .vbd-kpi .lbl { font-size: 11px !important; }


    /* ============================================================
       mobile-fix-5.css - FRAGMENT for Content/brij-mobile.css
       Slice 5 (slices[4]) page-specific rules. Paste the whole
       block INSIDE the existing "@media screen and (max-width:
       767.98px)" section 5 (page-specific fixes). ASCII only.

       NOTE on !important: every page in this slice puts its own
       <style> in HeadPh, i.e. BEFORE brij-mobile.css in the
       document, so equal-specificity rules here already win.
       !important is used ONLY where an inline style attribute or a
       Bootstrap utility (.ms-2) would otherwise win - each of those
       is commented.
       ============================================================ */

    /* ---- AllTransactions.aspx (at) ---- */
    /* 9 nowrap columns x 10px padding = ~900px table; Amount / Status / Actions
       sat 2-3 screens right of the voucher. Party (col 5) and User (col 7) are
       the width drivers and are the two columns that can wrap. */
    .at-tbl thead th, .at-tbl tbody td { padding: 5px 6px; }
    .at-tbl tbody td:nth-child(5) { white-space: normal; min-width: 130px; }
    .at-tbl tbody td:nth-child(7) { white-space: normal; }
    /* Row controls were ~22px tall; batch-select checkbox 16px. */
    .at-tbl .btn-vault, .at-tbl .btn-release, .at-tbl .btn-print { padding: 8px 10px; font-size: 12px; }
    .at-tbl .atx-rowsel, #atxSelAll { width: 20px; height: 20px; }
    /* Filter grid is already 2-col (see .at-filter-row above); make the 30px
       controls tappable and let Apply / Reset fill their cells. */
    .at-filter-row .form-control, .at-filter-row .form-select, .at-filter-row .btn { height: 36px; }
    .at-filter-row .btn { width: 100%; justify-content: center; }
    .qf-btn { padding: 8px 12px; }

    /* ---- BillMerge.aspx (bm) ---- */
    /* auto-fit minmax(180px) needs 370px, so the three live tiles went 1-up
       and pushed the bills table ~230px down. Two-up, total spans the row. */
    .bm-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
    .bm-summary .bm-tile.total { grid-column: 1 / -1; }
    .bm-tile { padding: 10px 12px; }

    /* ---- DbCompatTest.aspx (dct) ---- */
    /* 150px of fixed # / Result columns + 28px cell padding left the Test
       column ~180px, so every SQL block became 4-6 words per line.
       !important: the widths are inline <th style="width:60px|90px">. */
    .dct-table th, .dct-table td { padding: 6px 8px; }
    .dct-table th:first-child { width: 32px !important; }
    .dct-table th:last-child { width: 64px !important; }

    /* ---- DiamondStockIn.aspx (dsi) ---- */
    /* HIGH: the Diamonds / Colour Stones line grids are table-layout:fixed +
       width:100% + a percent colgroup, so inside a stacked .col-md-6 (359px)
       Pcs is a 17px input and Wt a 24px one - and because the table never
       exceeds its box the .brij-mscroll wrapper has nothing to scroll. Same
       treatment as .db-grid / #itemsTable above. Scoped to the .col-md-6 cards
       so the Issued grid keeps its own inline min-width:1000px. */
    .row > .col-md-6 .dsi-grid { min-width: 640px; }
    /* Card heads pack title + a long hint / Markup% control + Add with no wrap,
       squeezing the hint to one word per line. Wrap, keep Add on the title line,
       drop the hint to a full-width second line.
       !important: both the span (margin-left:auto) and the button
       (margin-left:8px) carry inline margins. */
    .dsi-head { flex-wrap: wrap; row-gap: 6px; }
    .dsi-head > .btn { order: 2; margin-left: auto !important; }
    .dsi-head > span { order: 3; flex: 1 1 100%; margin-left: 0 !important; }
    /* 28px fields + 9px labels; an input font under 16px also triggers the iOS
       focus auto-zoom. (The [type=date] rule outranks .dsi-card .dsi-in.) */
    .dsi-card .dsi-in { height: 34px; font-size: 13px; }
    .dsi-card input.dsi-in[type=date] { height: 34px; }
    .dsi-card .dsi-lbl { font-size: 10px; }
    .dsi-grid input { height: 32px; font-size: 13px; }
    .dsi-grid select.ty { height: 32px; }
    /* Net Position: 84px + 114px + 14px gap reserved 212px of a 331px card, so
       "Receiving (this lot)" / "Opening Balance" wrapped on every row. */
    .so-netsum .nl .v { gap: 8px; }
    .so-netsum .nl .v .wt { min-width: 70px; }
    .so-netsum .nl .v .cash { min-width: 92px; }

    /* ---- ExcelUpload.aspx (xu) ---- */
    /* RadioButtonList RepeatLayout=Flow emits input/label/<br>; the 55-65 char
       mode labels wrapped back under their radio and line-height 2.2 spread one
       option over ~85px. Two columns: radio | label, no <br>. */
    .xu-modelist { display: grid; grid-template-columns: auto 1fr; gap: 10px 8px; align-items: start; line-height: 1.4; width: 100%; }
    .xu-modelist br { display: none; }
    .xu-modelist label { margin: 0; }
    .xu-modelist input[type=radio] { margin-top: 2px; width: 18px; height: 18px; }

    /* ---- ItemHistory.aspx (ih) ---- */
    /* The timeline dot is positioned for the desktop 32px rail; the phone rail
       is 12px (see .ih-timeline above), which threw every dot 20px left of the
       line. Move the line into the 12px rail and re-centre a slimmer dot on it. */
    .ih-timeline::before { left: 3px; }
    .ih-event::before { left: -13px; top: 15px; width: 10px; height: 10px; border-width: 2px; }
    /* 22px card padding left 315px - one pixel over the 314px two 150px tracks
       need - so the six stat tiles collapsed to a 6-tall column on 360px phones. */
    .ih-card { padding: 14px 16px; }
    .ih-card .ih-stats { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ---- LiveMigrationWizard.aspx (lmw) ---- */
    /* 8px wrap padding + 20px card padding + 16px CTA padding + a 2px border
       left 267px for the PROCEED button. .lmw-cta-row already wraps (section 4). */
    .lmw-wrap { padding: 0; }
    .lmw-card { padding: 12px 14px; }
    .lmw-cta-row { padding: 12px; }
    .lmw-cta-row .btn-mega { flex: 1 1 100%; }

    /* ---- OtherPurchaseList.aspx (bl) ---- */
    /* 4-6 icon-only 30px row actions 2px apart (shared with OtherSaleList). */
    .bl-actions a { width: 36px; height: 36px; margin-left: 4px; }

    /* ---- StockVerify.aspx (sv) ---- */
    /* A second .container-fluid nested inside main.container-fluid adds 12px of
       side padding on top of the shell's 8px. :has() is already used in site.css. */
    main.container-fluid > .container-fluid:has(> .sv-head) { padding-left: 0; padding-right: 0; }
    #svpList .form-check-input { width: 20px; height: 20px; }
    #svpList td { padding: 8px 6px; }
    .sv-head .btn, .sv-actbar .btn { min-height: 36px; }

    /* ---- VaultBatches.aspx (vb) ---- */
    /* ~26px Bills / Release Batch controls at the right of a ~900px table. */
    .vb-actions .btn { padding: 8px 10px; font-size: 12px; }
    .vb-actions { white-space: nowrap; }


    /* ============================================================
       mobile-fix-6.css - fragment for Content/brij-mobile.css,
       SECTION 5 (page-specific). Every rule below belongs INSIDE
       "@media screen and (max-width: 767.98px)". ASCII only.
       Slice 6 of the 178-page phone audit.

       Load order note (Site.master): bootstrap -> site.css ->
       themes.css -> HeadPh page <style> -> brij-mobile.css.
       All these pages keep their CSS in HeadPh, so brij-mobile.css
       already wins on equal specificity; !important is used ONLY
       where an inline style attribute or a Bootstrap .row > *
       width would otherwise win.

       Deliberately NOT written here (owned by the generic set):
       - .rep-filter / .rep-kpi report-a4 framework rules, which
         are the whole phone story for CashFlow.aspx,
         SaleRegister.aspx and MainGroupBalance.aspx filters/KPIs
         (genericPatterns chunk 2, item 1).
       - .btn-sm tap-target floors (genericPatterns chunk 1 item 4
         and chunk 2 item 5) - DiamondStockInList row buttons.
       ============================================================ */

    /* ---- AuditLog.aspx (au) ---- */
    /* Filter card body: 4 x col-md-2 (From/To/User/Action) each went
       full width below md, so the card became six stacked rows.
       Two-up the small columns, keep Search full width, and let the
       Search / Clear pair fill the last line. */
    .au-card-body .row > .col-md-2 { width: 50% !important; }
    .au-card-body .row > .col-md-auto { display: flex; gap: 6px; }
    .au-card-body .row > .col-md-auto .btn { flex: 1 1 0; }

    /* ---- BillRange.aspx (br) ---- */
    /* Same filter shape: From / To side by side, Show Ranges full width. */
    .br-card-body .row > .col-md-2 { width: 50% !important; }
    .br-card-body .row > .col-md-auto .btn { width: 100%; }

    /* ---- DiamondStockInList.aspx (dsl) ---- */
    /* .dsl-bar input keeps a 260px min-width, so the search box held a
       ragged first line and pushed Search / New Bulk Lot onto a second
       line as two small left-hugging chips. Search field on its own
       full-width line, the two buttons sharing the next one. */
    .dsl-bar > div:first-child { flex: 1 1 100%; }
    .dsl-bar input[type=text] { min-width: 0; width: 100%; }
    .dsl-bar .btn { flex: 1 1 0; }

    /* ---- OtherSale.aspx (os) ---- */
    /* Sticky savebar carried 5 buttons + a 2-3 line helper sentence, so
       about 180px of chrome sat pinned over a 660px viewport, above a
       line grid that already side-scrolls. Drop the helper text (it only
       repeats where Tax Invoice / Counter Sale live) and the Item Master
       link (master data, reachable from the menu) - Preview / Save / New
       / Cancel then fit two rows via the shared .brij-savebar rule. */
    .os-card + .brij-savebar .text-muted.small { display: none; }
    .os-card + .brij-savebar a[href="OtherItemMaster.aspx"] { display: none; }
    /* KYC strip: inline width:170px / 140px on the Aadhaar and PAN boxes
       broke the row into three ragged lines with the note right-floated
       alone. Share the line, note on its own full line. */
    .os-kyc .kf { flex: 1 1 45%; }
    .os-kyc .kf input { width: 100% !important; }
    .os-kyc .note { flex: 1 1 100%; margin-left: 0; }

    /* ---- Permissions.aspx (pp) ---- */
    /* Step 5 save bar has no flex-wrap: the ~185px Save button squeezed
       the explanation into a ~90px six-line column. Stack them. */
    .pp-save-final { flex-wrap: wrap; padding: 12px 14px; }
    .pp-save-final .save-msg { flex: 1 1 100%; }
    .pp-save-final .btn { flex: 1 1 100%; }
    /* Step 2 quick-setup row: the two button wrappers (the only children
       with no inline style) carry an empty &nbsp; label as a desktop
       baseline spacer and land alone per line; the OR pill floats loose. */
    .pp-step-row > div { flex: 1 1 100%; min-width: 0; }
    .pp-step-row > div:not([style]) > .form-label { display: none; }
    .pp-step-row > div > .btn { width: 100%; }
    .pp-step-row > .pp-step-or { flex: 0 0 100%; text-align: center; margin: 0; }
    /* Step 4 section heads: the four bulk chips wrapped as a loose
       right-hugging cluster at 10.5px. Own line, even 4-up grid. */
    .pp-sm-card-head .pp-sm-bulk { flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .pp-sm-card-head .pp-sm-bulk .btn { font-size: 11.5px; padding: 4px 6px; }

    /* ---- SaleRegister.aspx (rep / sr) ---- */
    /* 9-column register: Net (the one figure a phone user wants) sat
       ~500px right of the party name. Hide the three detail columns the
       KPI strip already totals - Old Gold / Disc / GST - keeping
       #, Date, Voucher, Party, Gross, Net. The tfoot first cell is
       colspan=4, so its detail cells are td 3-5.
       Needs the markup hook added in this pass:
       <table class="rep-tbl sr-tbl">. */
    .sr-tbl thead th:nth-child(n+6):nth-child(-n+8),
    .sr-tbl tbody td:nth-child(n+6):nth-child(-n+8),
    .sr-tbl tfoot td:nth-child(n+3):nth-child(-n+5) { display: none; }

    /* ---- StockistPartySummary.aspx (sps) ---- */
    /* The page nests its own .container-fluid inside Site.master's, so a
       phone lost 24px to a doubled Bootstrap gutter and the 3-column
       Party Ledger table tipped into the JS side-scroller, which also
       killed the sticky header. Markup hook added: .sps-wrap. */
    .sps-wrap { padding-left: 0; padding-right: 0; }
    .sps-table th, .sps-table td { padding: 4px 8px; }

    /* ---- Vendors.aspx (vn) ---- */
    /* Same doubled container-fluid gutter; the bare 9-column vendor table
       is wrapped by brij-mobile.js and needs every pixel.
       Markup hook added: .vn-wrap. */
    .vn-wrap { padding-left: 0; padding-right: 0; }


    /* ============================================================
       mobile-fix-7.css - fragment for Content/brij-mobile.css
       SLICE 7 (slices[6]) - PAGE-SPECIFIC rules only.
       ALL of the following belongs INSIDE the existing
       "@media screen and (max-width: 767.98px)" block, section 5
       (page-specific fixes). Pure ASCII. Desktop untouched.

       !important policy used here: brij-mobile.css is linked AFTER
       HeadPh (Site.master:17), so a page <style> that lives in
       HeadPh loses on source order and needs NO !important. It is
       used only where (a) the page <style> sits in MainPh (body,
       i.e. after the link) - DbHealthInspect; (b) an inline style
       or a GridView ItemStyle-Width would win - Backup, SalesEntry
       #mobHint; (c) an existing !important rule must be beaten -
       brij-mobile.css:214 #itemsTable, Bootstrap .ms-auto.
       ============================================================ */


    /* ---- Backup.aspx (bk) ---- */
    /* GridView = 400px of ItemStyle-Width columns + an unbreakable .mdb file name
       (~630px) on a 359px phone, so Download / Delete sat ~270px off-screen right.
       Drop the least useful column (Size), release the inline widths, let the file
       name break: file + When + two 32px actions then fit without side-scroll. */
    .bk-grid th:nth-child(3), .bk-grid td:nth-child(3) { display: none; }
    .bk-grid td { width: auto !important; }          /* ItemStyle-Width -> inline style="width:NNNpx" */
    .bk-grid thead th, .bk-grid tbody td { padding: 8px 8px; }
    .bk-grid .bk-fname { word-break: break-all; }
    .bk-grid .bk-actions { white-space: nowrap; }
    /* 5 hero stat tiles at minmax(160px,1fr) needed 330px inside a 315px header, so
       every tile took its own line. Two-up. */
    .bk-header { padding: 14px 14px; }
    .bk-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .bk-stat { padding: 7px 9px; }


    /* ---- BillRegister.aspx (br) ---- */
    /* .br-filters is a bare flex-wrap list: From + To fitted line 1 and the Show
       button was orphaned alone on line 2 at its natural 60px. Pair the dates
       two-up and give Show its own full-width line. */
    .br-filters { padding: 8px 10px; gap: 8px; }
    .br-filters > div { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .br-filters > div:last-child { flex: 1 1 100%; }
    .br-filters > div:last-child .btn { width: 100%; }
    /* Print masthead title bar: the nowrap "Printed dd-MMM-yyyy HH:mm" kept its
       width and squeezed the title into 2-3 broken lines beside it. */
    .br-print-head .ti { flex-wrap: wrap; row-gap: 2px; }
    .br-print-head .dt { white-space: normal; flex: 1 1 100%; text-align: right; }


    /* ---- CashList.aspx (cl) ---- */
    /* col-md-2 / col-md-2 / col-md-3 / col-md-auto: below 768px every cell is a
       full-width line (From and To on separate lines) and the two buttons sit at
       natural width. Same shape as the PartyLedger rescue at line 265. */
    .cl-filter-body { padding: 10px 12px; }
    .cl-filter-body .row > .col-md-2 { width: 50%; }
    .cl-filter-body .row > .col-md-auto { display: flex; gap: 6px; }
    .cl-filter-body .row > .col-md-auto .btn { flex: 1 1 auto; }
    /* The voucher link is the ONLY in-view row action on a phone (the .brij-actions
       column is off-screen right); it rendered ~24px tall. Not a .btn, so the shared
       in-table tap-target rule does not reach it. */
    .cl-grid .cl-vno { display: inline-block; padding: 7px 10px; min-height: 34px; line-height: 18px; }


    /* ---- DbHealthInspect.aspx (dh) ---- */
    /* Page <style> lives in MainPh (line 6), i.e. AFTER brij-mobile.css -> !important.
       .dh-head .ctl has no flex-wrap: "Run all audits" + the .dh-conn DB chip (carries
       the server/database name) + "Ran at ..." = ~430px on a 335px card, overflowing
       the card and widening the page. */
    .dh-head { padding: 14px 14px !important; }
    .dh-head .ctl { flex-wrap: wrap !important; row-gap: 6px !important; }
    .dh-conn { max-width: 100% !important; white-space: normal !important; }
    .dh-conn small { word-break: break-all !important; }


    /* ---- DiamondTagging.aspx (dtg) ---- HIGH */
    /* .dtg-grid is width:100% + table-layout:fixed with ten percentage <col>s, so at
       375px the two stone grids are pinned at ~329px: Rate/Wt inputs get ~24px, Pcs
       ~20px and the mandatory Colour / Clarity / Cut selects 26-40px - the native
       arrow alone eats that, and these are the ONLY per-item controls on the page,
       so a lot cannot be carved on a phone. A width:100% table never overflows the
       JS .brij-mscroll wrapper, so nothing scrolled either. Give both grids their
       real working width (760px matches #itemsTable / .db-grid) and let them
       side-scroll inside the wrapper, which brij-mobile.js inserts as the table's
       direct parent INSIDE .dts-sec - so its overflow:hidden clips nothing and no
       markup change is needed. Same rule also frees the Tagged Items table. */
    .dtg-grid { min-width: 760px; }
    .dts-grid th { white-space: normal; }   /* 10px headers ("Bal (pcs/ct)") wrap instead of overflowing */


    /* ---- ItemPhotos.aspx (ip) ---- */
    /* The per-photo Delete button is 26px and sits on top of the tap-to-zoom image,
       on a page whose banner tells staff to use it from the phone: a miss opens the
       lightbox instead of deleting. */
    .ip-tile .x-btn { width: 36px; height: 36px; font-size: 18px; top: 4px; right: 4px; }


    /* ---- MenuOrder.aspx (mm) ---- */
    /* HTML5 drag-and-drop never fires on touch, so on a phone these 28x24px buttons
       and the ~22px "Move to..." select are the ONLY way to reorder a menu. */
    .mm-gbtns button, .mm-sbtns button { width: 36px; height: 34px; font-size: 14px; }
    .mm-gbtns, .mm-sbtns { gap: 6px; }
    .mm-mv { flex: 1 1 100%; margin-left: 0; padding: 7px 8px; font-size: 12.5px; }


    /* ---- OtherSaleList.aspx (bl) ---- */
    /* #payModal is a hand-rolled overlay with NO .modal class, so the shared
       ".modal .row > .col-4 { width:50% }" rescue never reaches it. Its KYC row keeps
       three .col-4 cells 3-up at every width: ~100px each, so a 12-digit Aadhaar and
       a 15-char GSTIN scroll inside the box while an estimate is being converted. */
    #payModal #payKyc > .col-4 { width: 50%; }
    #payModal #payKyc > .col-4:last-child { width: 100%; }
    #payModal .form-control-sm { min-height: 34px; }


    /* ---- PmlaAlert.aspx (pm) ---- */
    /* .pm-toolbar is a flat flex list of <label>, control, <label>, control ...
       siblings, so every wrap point falls between a label and its own field. Pin
       each label to a 30% rail and its control to the rest: one pair per line. */
    .pm-toolbar { padding: 8px 10px; gap: 6px 8px; }
    .pm-toolbar > label { flex: 0 0 30%; margin: 0; }
    .pm-toolbar > .form-control, .pm-toolbar > .form-select { flex: 1 1 60%; min-height: 36px; }
    .pm-toolbar > .btn { flex: 1 1 100%; min-height: 36px; }
    .pm-toolbar > .ms-auto { margin-left: 0 !important; flex: 1 1 100%; }   /* Bootstrap .ms-auto is !important */
    /* 4 KPI tiles at minmax(180px,1fr) needed 372px on a 359px content width. */
    .pm-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pm-kpi { padding: 9px 10px; }
    .pm-kpi .num { font-size: 1.15rem; }


    /* ---- SalesEntry.aspx (se) ---- */
    /* The line grids declare their own working widths - #itemsTable 2x28 + 200 +
       10x62 + 2x82 = 1040px, #oldItemsTable 951px - but line 214 restores only
       760px, so table-layout:fixed still scales every .col-narrow input to ~45px
       and a rate like 13073.97 is cut off while typing. Raise to the designed
       widths (beats the !important on line 214; PurchaseEntry's #itemsTable has the
       identical 1040px column set and StockEntry's is 992px, so both stay correct). */
    #itemsTable { min-width: 1040px !important; }
    #oldItemsTable { min-width: 950px !important; }
    /* Mobile-number hint popover: inline style="left:0;min-width:255px;max-width:340px"
       on a cell that the 2-column phone header puts in the RIGHT column, so the panel
       ran 75-160px past the right edge. Anchor it to the right instead. */
    #mobHint { left: auto !important; right: 0 !important; min-width: 0 !important; max-width: calc(100vw - 32px) !important; }
    /* Estimate preview: 16mm of paper margin left ~240px of content and min-height
       260mm added ~700px of blank paper above the footer buttons. */
    .est-paper { padding: 12px 10px; min-height: 0; }
    .est-header { grid-template-columns: auto 1fr; gap: 10px; }
    .est-header .est-stamp { grid-column: 1 / -1; justify-self: start; }
    .est-meta { grid-template-columns: 1fr 1fr; gap: 8px; }
    .est-totals, .est-sign { grid-template-columns: 1fr; gap: 10px; }
    .est-watermark { font-size: 56px; letter-spacing: 6px; }
    /* Close (~85) + Save as PDF (~125) + Print Estimate (~135) = ~360px on a ~343px
       footer, so the last button wrapped alone. */
    .est-modal .modal-footer { gap: 6px; }
    .est-modal .modal-footer .btn { flex: 1 1 45%; margin: 0; }
    /* Needs the DEFERRED markup change (add class="se-kbd-hint" to the <small> at
       SalesEntry.aspx:572). Static <kbd> elements are not .brij-kbd badges, so the
       app-wide badge hide at line 143 does not reach them and the shortcut hint
       wraps to three lines beside Add Item on a device with no keyboard. */
    .se-kbd-hint { display: none !important; }


    /* ---- StaffSalary.aspx (ss) ---- */
    /* 14 columns / ~1300px: the NET figure and the Pay + Save draft controls sit
       ~900px right of the staff name, so the operator edits Bonus/Deduct and presses
       Pay for a row whose name is no longer on screen. Freeze the name column
       instead of restructuring the table. thead th is already sticky (top:0,
       z-index:2), so the corner cell needs the higher z-index. */
    .ss-grid thead th:first-child { position: sticky; left: 0; z-index: 4; background: #f5f6f8; }
    .ss-grid tbody td:first-child { position: sticky; left: 0; z-index: 3; background: #fff; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
    .ss-grid tbody tr.paid td:first-child { background: #f8fcf9; }
    .ss-grid tbody tr.draft td:first-child { background: #fffdf5; }
    .ss-grid tfoot td:first-child { position: sticky; left: 0; z-index: 3; background: #f5f6f8; }
    .ss-staff-cell { min-width: 150px; }
    /* The per-row controls that MOVE MONEY were 24-26px tall with 10-11px text. */
    .ss-act .pay-via { height: 36px; font-size: 12.5px; }
    .ss-act .skip-lbl { font-size: 12px; min-height: 36px; }
    .ss-act .skip-lbl input { width: 18px; height: 18px; }
    .ss-act .btn-pay, .ss-act .btn-draft { min-height: 36px; font-size: 12.5px; }
    .ss-grid input.amt { min-height: 36px; }
    /* 4 KPI tiles at minmax(190px,1fr) needed 390px on a 359px content width. */
    .ss-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ss-kpi { padding: 9px 10px; gap: 8px; min-height: 0; }
    .ss-kpi .kpi-ico { width: 30px; height: 30px; font-size: 14px; }
    .ss-kpi .kpi-value { font-size: 15px; }


    /* ---- VoucherEntry.aspx (ve) ---- HIGH */
    /* Supplements the existing ".ve-row { grid-template-columns: 1fr 1fr !important }"
       at line 231 - keep that rule, these append to it.
       1fr is minmax(auto,1fr), so a track can never go below its item's min-content:
       the nowrap .ve-toggle pill strips are ~212px (Receipt/Payment) and ~390px
       (Cash/Cheque/Card/NEFT-RTGS) and the width:100% inputs contribute ~170px. Inside
       the 311px card body that made the grid ~555px wide, pushing the mandatory Amount
       box entirely OFF a 375px screen (nothing sets overflow-x:hidden, so the whole
       document just became side-pannable). Kill the auto-minimum, stack the 2-col
       rows and let the pills wrap. */
    .ve-row > div, .ve-row-2 > div, .ve-mode-fields > div { min-width: 0; }
    .ve-row > div:first-child { grid-column: 1 / -1; }   /* Receipt/Payment full width; Voucher No + Date two-up */
    .ve-row { gap: 8px; }
    .ve-row-2 { grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
    .ve-mode-fields.show { grid-template-columns: 1fr; gap: 8px; }
    .ve-toggle { display: flex; flex-wrap: wrap; width: 100%; }
    .ve-toggle > span { flex: 1 1 auto; display: flex; min-width: 0; }
    .ve-toggle label { flex: 1 1 auto; justify-content: center; padding: 8px 10px; min-height: 36px; white-space: nowrap; }


    /* ============================================================
       mobile-fix-8.css - fragment for Content/brij-mobile.css
       SECTION 5 (page-specific fixes). ASCII only.
       EVERY rule below must be pasted INSIDE the existing
       "@media screen and (max-width: 767.98px)" block. Nothing
       here is global: every selector is page-prefixed.
       Source: slice 8 of the 178-page phone audit (2026-09-02).
       Notes on !important: brij-mobile.css loads AFTER HeadPh, so
       a page <style> in HeadPh never wins - !important appears
       only against inline style="" attributes, against Bootstrap
       utilities that are themselves !important (.ms-auto), and
       against brij-mobile's own section-1/section-4 !important
       safety net.
       ============================================================ */

    /* ---- BackupSchedule.aspx (bs) ---- */
    /* Save Configuration + Run Backup Now + Refresh: 3 btn-sm in a
       331px card body orphaned Refresh on its own line. Two-up. */
    .bs-card-body > .d-flex.gap-2 > .btn { flex: 1 1 calc(50% - 8px); }

    /* ---- BillUnlock.aspx (bu) ---- */
    /* Toolbar was ~9 lines: each date input took a whole row (the
       inline max-width:160px is cancelled by the section-1 safety
       net and .form-control is width:100%), label orphaned above
       it, then 8 type pills wrapping raggedly. */
    .bu-toolbar > div[style*="flex:1"] { flex: 1 1 100% !important; max-width: none !important; }
    .bu-toolbar > input[type=date] { width: auto; flex: 1 1 110px; min-width: 0; }
    .bu-toolbar > label { flex: 0 0 auto; }
    .bu-toolbar > .btn { flex: 1 1 calc(50% - 8px); }
    .bu-toolbar .pill { flex: 1 1 auto; text-align: center; }
    .bu-toolbar { padding: 8px 10px; gap: 6px 8px; }
    /* Action bar: 5 buttons, ms-auto shoved Refresh next to the
       destructive Delete on a ragged 2/3 split. Even two-up grid. */
    .bu-actions .btn { flex: 1 1 calc(50% - 8px); margin-left: 0 !important; }
    .bu-actions { padding: 10px 12px; gap: 8px; }

    /* ---- DbPatch.aspx (dbp) ---- */
    /* 605px of inline th widths squeezed the ONLY unsized column
       (Title & description) to min-content, so every row was 8-12
       lines tall. Give the table a real width and drop Last Run -
       the same value is already repeated in .dbp-meta under the
       title. The table sits in a div[overflow-x:auto], so it
       side-scrolls. */
    .dbp-grid th:nth-child(5), .dbp-grid td:nth-child(5) { display: none; }
    .dbp-grid { min-width: 640px; }
    /* Filter: label orphaned above a full-width select + a long
       ms-auto info sentence. */
    .dbp-toolbar > .ms-auto { flex: 1 1 100%; margin-left: 0 !important; }
    .dbp-toolbar > select { width: auto; flex: 1 1 140px; }
    .dbp-toolbar > label { flex: 0 0 auto; }

    /* ---- ItemStockReport.aspx (isr) ---- */
    /* Page-scoped ONLY (the shared .rep-filter two-column collapse
       is the generic report-strip rule, not this page's). With the
       filter at 1fr 1fr, the one free-text Search field - the only
       .field carrying a label .opt hint - spans the full row so
       the Group By select can pair with the Show button. */
    .rep-page:has(.isr-wrap) .rep-filter .field:has(.opt) { grid-column: 1 / -1; }

    /* ---- MergeDiamondItems.aspx (mdi) ---- */
    /* 6 columns crushed to 50-70px each; every stone line wrapped
       into 4-5 lines. Side-scroll instead (developer-only page). */
    .mdi-tbl { min-width: 640px; }

    /* ---- PageVisitStats.aspx (pv) ---- */
    /* Sparkline: a 1200-unit viewBox with preserveAspectRatio=none
       stretched to 331px squashed every label glyph to ~3px. Give
       the SVG a real width inside its own scroller (the .pv-card
       is overflow:hidden, so the scroller must be the card body).
       max-width beats the section-1 "svg { max-width:100%!important }". */
    .pv-card-body:has(> .pv-sparkline) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pv-sparkline { width: 960px; max-width: none !important; }
    /* Top-pages table only (5 columns; the Top-users table has 3):
       38%/30% widths against 359px starved the last three columns. */
    .pv-tbl:has(th:nth-child(5)) { min-width: 620px; }
    /* The only clickable element per row was an 18px zero-padding button. */
    .pv-tbl .pv-expand-link { min-height: 36px; }
    /* Toolbar: "Trim visits older than 180 days" is an <input type=submit>
       (its label cannot wrap), so the two buttons stack full width and
       the desktop-only flex:1 spacer is dropped. */
    .pv-toolbar > div[style*="flex:1"] { display: none !important; }
    .pv-toolbar > div > .btn { width: 100%; }
    .pv-toolbar > div { flex: 1 1 100%; }
    .pv-toolbar { padding: 10px 12px; gap: 8px; }

    /* ---- SalesList.aspx (bl) ---- */
    /* This GridView has UseAccessibleHeader but NO TableSection, so
       it emits plain <tr><th> / <tr><td> with no <thead>/<tfoot> -
       the page's own "thead, tfoot { display:none }" never matched.
       Result: the header row became a card holding a ~900px nowrap
       phantom strip, and the ShowFooter row became an empty pill
       (all its <td>s are hidden). Hide any row that is neither a
       group band, nor a bill card (td.bl-mhead), nor the empty-data
       message. Requires SalesList.aspx's own reflow media query to
       be 767.98px - changed in the page. */
    .bl-grid tr:not(.bl-grouprow):not(:has(> td.bl-mhead)):not(:has(.alert)) { display: none; }
    /* Modals: the section-1 "col-3 / col-4 -> 50%" safety net breaks
       two payment strips that were already phone-shaped. */
    #counterSaleModal .cs-pay > .col-3 { width: 25% !important; }
    #refundModal .row > .col-4 { width: 33.3333% !important; }
    /* Counter -> SV line items: 287px of inline th widths left ~50px
       for the stockist name inside a ~340px modal body. */
    #counterToSvModal table.table-sm th[style*="width"] { width: auto !important; }
    /* Metrics strip: 1.3rem nowrap crore totals and a nowrap sub-line
       overflowed a 129px content box inside .bl-metrics{overflow:hidden}. */
    .bl-metric .m-num { font-size: 1.1rem; }
    .bl-metric .m-sub { white-space: normal; }
    .bl-metric { padding: 8px 10px; }
    /* Quick-range: the 4-segment control + the Live chip are one
       inline-flex row (~320px) that pokes past the card edge on a
       360px screen; margin-left:auto also shoved it to the right. */
    .bl-filter2 .f-quick .q-row { flex-wrap: wrap; gap: 6px 8px; }
    .bl-filter2 .f-quick .f-live { margin-left: 0; }
    .bl-filter2 .f-quick { margin-left: 0; flex: 1 1 100%; }

    /* ---- Stock.aspx (sm) ---- */
    /* col-md-* all go 100% below 768px: From and To each took a
       331px line for a 10-character date, and the two buttons sat
       left-aligned as small chips. */
    .sm-filter-body .row > .col-md-2:nth-child(-n+2) { width: 50%; }
    .sm-filter-body .row > .col-md-auto .btn { flex: 1 1 auto; }
    .sm-filter-body .row > .col-md-auto { display: flex; gap: 6px; }

    /* ---- StockistStock.aspx (ss) ---- */
    /* Toolbar was 6 ragged lines: both selects lost their inline
       max-width to the section-1 safety net and went full width
       with their labels orphaned above them. */
    .ss-toolbar > div[style*="flex:1"] { flex: 1 1 100% !important; max-width: none !important; }
    .ss-toolbar > .form-select { width: auto; flex: 1 1 120px; }
    .ss-toolbar > .btn { flex: 1 1 auto; margin-left: 0 !important; }
    .ss-toolbar > label { flex: 0 0 auto; }
    .ss-toolbar { padding: 8px 10px; gap: 6px 8px; }
    /* minmax(180px) needs 372px for two tracks, so all four KPI
       tiles stacked one per row (sibling pages use 170px and land
       two-up). Pin it to two columns. */
    .ss-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* ---- VoucherList.aspx (vl) ---- */
    /* 8-column grid, ~860px wide, no phone arrangement: the Amount
       and the row buttons sat 500-600px off-screen. Drop the italic
       Narration column (it mostly repeats Party) and release the
       150px ItemStyle-Width on the actions cell. All selectors are
       child-scoped so the nested PAGER table is never touched. */
    .vl-grid > tbody > tr > td.brij-actions { width: auto !important; }
    .vl-grid > tbody > tr > th:nth-child(7),
    .vl-grid > tbody > tr > td:nth-child(7) { display: none; }
    .vl-grid > tbody > tr > th, .vl-grid > tbody > tr > td { padding: 6px 8px; }
    /* Default ASP.NET pager: bare 13px links with zero padding. */
    .vl-grid .vl-pager a, .vl-grid .vl-pager span {
        display: inline-block; min-width: 36px; padding: 8px 4px; text-align: center;
    }
    /* Filter: six col-md-* stacked full width, the lone checkbox on
       its own line and Apply / Reset as two small left-aligned chips. */
    .vl-filter-body .row > .col-md-2:nth-child(-n+2) { width: 50%; }
    .vl-filter-body .row > .col-md-2:last-child .btn { flex: 1 1 auto; }
    .vl-filter-body .row > .col-md-2:last-child { width: auto; flex: 1 1 auto; }
    .vl-filter-body .row > .col-md-1 { width: auto; }


    /* ============================================================
       mobile-fix-9.css - FRAGMENT for Content/brij-mobile.css
       Slice 9 (slices[8]) of the 178-page phone audit.
       PASTE ALL OF THIS INSIDE the existing
           @media screen and (max-width: 767.98px) { ... }
       block, in "5. PAGE-SPECIFIC FIXES" (after section 1, so the
       section-1 "max-width: 100% !important" safety net is beaten by
       specificity where a rule re-caps an input).
       Every page's own <style> lives in HeadPh, i.e. BEFORE
       brij-mobile.css, so equal-specificity rules already win by
       source order: !important is used ONLY where a stronger page
       selector, an inline style, or another !important rule in this
       same file would otherwise win (each one is commented).
       Pure ASCII. Desktop untouched.
       ============================================================ */


    /* ---- BillWeight.aspx (bw) ---- */
    /* Row 1 of the toolbar is a bare flex list of <label> + control pairs with
       inline Style="max-width:160/240/130px". Section 1 cancels those caps, so at
       375px every control became a full-width flex line and each label was orphaned
       above it (~9 ragged lines, Export CSV alone on the last). Re-lay it as a
       label-rail grid: label | control per line, buttons full width. */
    .bw-toolbar { padding: 8px 10px; }
    .bw-toolbar-row:not(.bw-pills) {
        display: grid; grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 8px; align-items: center;
    }
    /* !important: beats section 1 "input, .form-control { max-width:100% !important }"
       by specificity - the control must fill the 1fr track, not cap at the old inline value. */
    .bw-toolbar-row:not(.bw-pills) .form-control,
    .bw-toolbar-row:not(.bw-pills) .form-select { max-width: none !important; width: 100%; }
    /* Apply / Clear / Export CSV: full-width rows instead of a ragged wrap
       (margin kills the .ms-auto on Export CSV, which would shrink-wrap it). */
    .bw-toolbar-row:not(.bw-pills) .btn { grid-column: 1 / -1; margin: 0 !important; }
    /* 12 filter pills at 24px tall are sub-target; drop the hairline separators
       that scatter between them once they wrap over 3-4 lines. */
    .bw-pills .pill { padding: 6px 12px; }
    .bw-pills .pill-sep { display: none; }
    /* 4 KPI tiles: minmax(180px,1fr) collapses to ONE column at 359px (~300px of
       tiles above the fold) although each tile needs ~150px. Go two-up. */
    .bw-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    .bw-kpi { padding: 10px 12px; }
    .bw-kpi .num { font-size: 1.2rem; }
    /* "all metrics x all voucher types" subtitle wraps 2-3 lines inside the
       coloured no-wrap header bar between the title and the chevron. */
    .bw-bdtbl-head small { display: none; }


    /* ---- GoldRateUpdate.aspx (gru) ---- */
    /* SUPERSEDES the existing brij-mobile.css rule
           .gru-card-head, .gru-row { grid-template-columns: 1fr 60px 78px 68px !important; gap: 4px !important; }
       -> DELETE that older line when merging, keep this one.
       60px could not hold the 64px % input + "%" unit (it spilled left over the
       group name) and 78px could not hold a 5-digit new rate at 13px bold (it
       spilled right into the old/delta track): rows read as overlapping text.
       !important on the template/gap/padding: they must beat that older
       !important rule in this same file. */
    .gru-card-head, .gru-row {
        grid-template-columns: 1fr 64px 84px 64px !important;
        gap: 4px !important; padding: 4px 8px !important;
    }
    .gru-pct { width: 48px; padding: 2px 4px; }
    .gru-rate-new { font-size: 12px; }
    .gru-rate-old { font-size: 10px; }
    /* Group track: sub-group + main group share ONE nowrap line inside
       overflow:hidden, so a name like "GOLD 22KT HALLMARK" is hard-clipped
       mid-word and the main-group label ellipsises to nothing. */
    .gru-col-grp { flex-wrap: wrap; gap: 0 6px; }
    .gru-grp { white-space: normal; }
    /* Rate-change history: table-layout:fixed + nine inline th widths summing to
       815px squeezed the auto-width "By" column to ~0. Let columns size to their
       content and side-scroll inside .gru-log-wrap (it already has overflow-x:auto). */
    .gru-log { table-layout: auto; min-width: 880px; }
    /* !important: re-cap the 24kt / 999 hero input against the section-1
       max-width:100% safety net, otherwise it fills the hero card and pushes the
       "Live Rs ... use / last-saved" foot onto a third line. */
    .gru-hero input.form-control { max-width: 140px !important; }


    /* ---- ItemTagList.aspx (no prefix; page-owned ids/classes only) ---- */
    /* Print-selection checkboxes are the only way to pick tags on a phone:
       16px rows / 15px header box are well under a 36px tap target.
       (#selAllChk id added to the header checkbox in the markup.) */
    .selchk { width: 22px; height: 22px; }
    #selAllChk { width: 22px; height: 22px; }


    /* ---- MigrateToSqlServer.aspx (mig) ---- */
    /* The action buttons render as <input type="submit">, whose value text can
       never wrap; the long labels were shortened in the markup, this is the guard
       that keeps any future long label inside the card instead of giving the whole
       page a horizontal scroll. */
    .mig-action-row .btn { max-width: 100%; }


    /* ---- Parties.aspx (pm) ---- */
    /* HIGH - the page's own <=560px card grid (32px 1fr 92px) left the name track
       ~77px; the nowrap party name beside the fixed 8-digit code ellipsised to one
       letter (the whole list unreadable) and the phone chip was hidden outright.
       Two columns instead: avatar rail + stacked name / phone / status.
       !important is kept here because the page's HeadPh rules would otherwise tie
       or win - notably ".pm-grid tbody td { padding: 0 }" (0,1,2) over
       ".pm-cell-actions { padding }" (0,1,0). */
    .pm-row {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        column-gap: 8px !important; row-gap: 4px;
        padding: 8px 6px 8px 10px !important;
    }
    .pm-row > a:first-child { grid-row: 1 / span 3; align-self: center; }
    .pm-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; }
    .pm-who .pm-name-link { flex-wrap: wrap; gap: 2px 8px; }
    .pm-who strong { white-space: normal !important; word-break: break-word; }
    .pm-type-tags { flex-wrap: wrap; }
    .pm-c-ph { display: block !important; grid-column: 2; }
    .pm-side { grid-column: 2; }
    .pm-cell-actions { width: auto !important; padding: 6px 6px !important; }
    .pm-cell-actions a { width: 36px !important; height: 36px !important; margin-left: 4px !important; }


    /* ---- PurchaseEntry.aspx (pe- / se- on the header only) ---- */
    /* Line Items card header carried a keyboard-only hint ("Ctrl+Enter add row...")
       next to the Add Item button; on a phone it wrapped to 3 lines and tripled the
       header height on a device with no keyboard. (.pe-kbd-hint class added in the
       markup; the Alt badges are already hidden by the app-wide .brij-kbd rule.) */
    .pe-kbd-hint { display: none; }


    /* ---- StockistStockSummary.aspx (sss) ---- */
    /* 5 columns x 24px of cell padding + a first column that is EMPTY on every data
       row (the main group only appears in the colspan band rows) pushed Metal Weight
       and Un Approved - the whole point of the report - off the right edge.
       The dead column is collapsed with font-size/padding 0 rather than display:none
       on purpose: the band (colspan=5) and total (colspan=3) rows would otherwise
       shift one column and misalign the totals against their headers. */
    .sss-table { font-size: 12px; }
    .sss-table th, .sss-table td { padding: 4px 6px; }
    .sss-table thead th:first-child { font-size: 0; padding: 0; }
    .sss-table tbody tr:not(.sss-band):not(.sss-total):not(.sss-grand) > td:first-child { padding: 0; }
    /* Title + "Printed dd-MMM-yyyy HH:mm" sit on one no-wrap line ~335px wide, so
       the title wrapped word-by-word next to the date. */
    .sss-print-head .ti { flex-wrap: wrap; }


    /* ============================================================
       mobile-fix-10.css - FRAGMENT for Content/brij-mobile.css
       Slice 10 of the phone audit (<= 767.98px). Every rule below is
       meant to be pasted INSIDE the existing
           @media screen and (max-width: 767.98px) { ... }
       block, in section 5 (page-specific fixes), AFTER the rules that
       are already there - several of them deliberately override an
       earlier !important in that same block.
       ASCII only. Nothing here is written outside the phone block, so
       desktop and print rendering are unchanged.
       Shared/app-wide defects found on these pages (report-a4
       .rep-kpi / .rep-card-head, h1.page-title > small, the app-wide
       .btn-sm tap-target floor, main.container-fluid > .container-fluid)
       are deliberately NOT repeated here - they belong to the generic set.
       ============================================================ */


    /* ---- Catalog.aspx (cat) ---- */
    /* The send bar is position:sticky bottom:16px and every child keeps its own
       width, so on a 375px phone it becomes a ~4-row / 190px panel pinned over the
       bottom third of the screen while the operator scrolls the card grid. Unpin it
       and give the picker / note / Send button one full row each.
       (.ms-auto on the button is a Bootstrap !important utility.) */
    .cat-send-bar { position: static; bottom: auto; margin-top: 10px; padding: 10px 12px; gap: 8px; }
    .cat-send-bar .cat-party-pick,
    .cat-send-bar #catCustomNote { flex: 1 1 100%; min-width: 0; }
    .cat-send-bar .btn { flex: 1 1 100%; margin-left: 0 !important; min-height: 40px; }
    /* Weight captions and purity / wastage chips sat at 9.5-10.5px on the one page
       an operator reads WITH the customer looking over their shoulder. */
    .cat-specs .lab { font-size: 10.5px; }
    .cat-item-meta .pill,
    .cat-chips .chip,
    .cat-item .dia-flag { font-size: 11px; }


    /* ---- Default.aspx (dash / kpi / live / myrates / qa / recent) ---- */
    /* HIGH - My Rates grid was clipped. The Dashboard block above forces
       "grid-template-columns: 1fr 1fr !important" but leaves .live-row's
       min-width:158px and the 22px column gap, so the grid's minimum width is
       2*158+22 = 338px inside a 299px card and .dash-card{overflow:hidden} cut the
       last digits of every right-hand rate (9px at 375px, 24px at 360px).
       1fr = minmax(auto,1fr) cannot go below the item's minimum contribution, so
       the tracks must be minmax(0,1fr); the row's label then has to be allowed to
       wrap so the rate itself keeps its nowrap width. !important is required to
       beat the earlier !important in this same block. */
    .myrates-items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 10px !important;
    }
    .myrates-items .live-row { min-width: 0 !important; }
    .myrates-items .live-row .lbl { min-width: 0; overflow-wrap: anywhere; }
    .myrates-items .live-row .val { white-space: nowrap; }

    /* Quick Actions: the Alt+key badge is not a .brij-kbd, so the app-wide hide
       misses it - each 2-up tile spent a line on a hint a phone can never use.
       The .qa-btn styles live in a <style> inside MainPh, i.e. AFTER this file,
       so these two rules need !important. */
    .qa-btn .qa-kbd { display: none !important; }
    .qa-btn { min-height: 64px !important; padding: 10px 8px !important; }

    /* Twelve 118px full-width KPI tiles = ~1500px of scrolling before the next
       card. The 1.65rem hero number fits comfortably two-up at 375px. */
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .kpi-tile { min-height: 96px; padding: 8px 10px; }
    .kpi-tile .kpi-num { font-size: 1.25rem; }
    .kpi-tile .kpi-spark,
    .kpi-tile .kpi-spark svg { height: 18px; }

    /* Recent Activity rows are "90px 1fr auto auto"; at 375px the voucher/party
       column was left ~80px and party names wrapped 3-4 lines. Drop to three
       tracks and move the detail onto its own row. */
    .recent-item { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 10px; }
    .recent-item .ri-detail { grid-column: 2 / -1; grid-row: 2; }
    .recent-item .ri-when { grid-column: 3; grid-row: 1; }

    /* Metal Rate Trend head: title + "last 30 days . per gram" + the 2-dot legend
       is ~400px of content in a 335px card, with no flex-wrap. */
    .dash-card[data-card="metal-trend"] .card-header { flex-wrap: wrap; row-gap: 2px; }
    .dash-card[data-card="metal-trend"] .grt-legend { margin-left: 0 !important; flex: 1 1 100%; }

    /* 28px tap targets in the page-title row (auto-refresh segmented group is
       .btn-group-sm, NOT .btn-sm, so the app-wide floor misses it) and in the
       Customize bar. */
    .dash-ar,
    #dashEditToggle,
    #dashEditToggle + a.btn-sm,
    .dash-edit-bar .deb-btn { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }

    /* Staff self-attendance banner: icon + text + "Mark me Present" with no wrap,
       so the button was squeezed and its label broke over 3 lines.
       (markup: class "dash-att-banner" added to the alert in Default.aspx) */
    .dash-att-banner { flex-wrap: wrap; row-gap: 8px; }
    .dash-att-banner > .btn { white-space: nowrap; min-height: 36px; }


    /* ---- DisplayTray.aspx (dt) ---- */
    /* Create-tray row packs fixed-px controls (200 / 90 / 150 / 140 / 140 / 190px,
       two of them via inline style=, hence !important on width): at 375px nothing
       filled its row and Sub Group was orphaned. Two-up, label row full width,
       every control stretched to its cell, Create Tray on its own row. */
    .dt-flds .dt-fld { flex: 1 1 calc(50% - 7px); min-width: 0; }
    .dt-flds .dt-fld.lbl { flex: 1 1 100%; }
    .dt-flds .dt-fld input,
    .dt-flds .dt-fld select,
    .dt-flds .dt-fld .ms-btn { width: 100% !important; }
    .dt-flds > .btn { flex: 1 1 100%; min-height: 40px; }
    /* ~28-30px actions, a 20x20 delete "x" in the corner of a tappable tray card
       (a miss opens the tray), and 10-10.5px captions. */
    .dt-active-head .btn-close-tray,
    .dt-scan .modes button { min-height: 38px; padding: 8px 14px; }
    .dt-tray-del { padding: 6px 10px; font-size: 22px; opacity: .8; }
    .dt-fld label { font-size: 11px; }
    .dt-grid thead th,
    .dt-badge { font-size: 10.5px; }


    /* ---- Groups.aspx (gm) ---- */
    /* .gm-grid { min-width: 900px } is on all THREE GridViews although only the
       Sub Group grid needs it (its 320px HSN/GST cell). On the Main Groups and
       Stockists tabs that pushed Rename / Delete ~540px off-screen, so every row
       needed a horizontal scroll to act on. GridView ItemStyle-Width renders as an
       inline style="width:NNNpx" on the cell, hence !important. */
    #tab-main .gm-grid,
    #tab-stk .gm-grid { min-width: 0; }
    #tab-main .gm-grid th[style*="width"], #tab-main .gm-grid td[style*="width"],
    #tab-stk .gm-grid th[style*="width"], #tab-stk .gm-grid td[style*="width"] { width: auto !important; }
    #tab-main .gm-grid .form-control-sm { min-width: 104px; }
    /* 28px row actions / inputs, 44x28px numeric boxes and 8.5-10px captions.
       The Sub Group grid keeps min-width:900px and side-scrolls, so the wider
       boxes cost nothing there. */
    .gm-grid .btn-sm,
    .gm-grid .form-control-sm { height: auto; min-height: 34px; }
    .subgst-row .subgst-num { width: 58px; }
    .subgst-row .subgst-hsn { width: 74px; }
    .subgst-row .subgst-lbl { font-size: 10px; }
    .gm-grid thead th { font-size: 10.5px; }


    /* ---- ItemVerification.aspx (iv) ---- */
    /* Scan rows wrap raggedly: Issue mode is [label + input] / [camera alone],
       Verify mode is [label] / [input + camera] / [Mark Returned alone]. Put the
       caption on its own line and let the input shrink so the buttons ride with
       it. txtScan carries inline style="flex:1;min-width:200px", hence !important. */
    .iv-scan-row label { flex: 1 1 100%; }
    .iv-scan-row > .iv-ta,
    .iv-scan-row > .form-control { flex: 1 1 120px !important; min-width: 0 !important; }
    .iv-scan-row .btn { flex: 0 0 auto; white-space: nowrap; min-height: 36px; }
    /* .iv-card-head is not in the section-4 wrap list: the date / count pill broke
       over two lines while the h6 wrapped three lines beside it. */
    .iv-card-head { flex-wrap: wrap; row-gap: 4px; }
    .iv-card-head .iv-count { white-space: nowrap; margin-left: auto; }
    /* Three flex:1 tabs at ~120px each: only "Verify Return" (+ its count badge)
       wrapped, giving uneven tab heights. */
    .iv-tab { padding: 10px 6px; font-size: 12.5px; }
    .iv-tab i { margin-right: 3px; }
    .iv-tab .iv-tab-cnt { margin-left: 3px; }


    /* ---- MobileApprovals.aspx (ma) ---- */
    /* For an admin the action grid is 3 columns in a 331px card, so ~105px per
       button - "Approve & Delete" / "Approve & Unlock" wrapped to 2-3 lines inside
       a fixed 48px button and was clipped. Two-up, Delegate on its own row. */
    .ma-actions.with-deleg { grid-template-columns: 1fr 1fr; }
    .ma-actions.with-deleg .ma-btn.delegate { grid-column: 1 / -1; }


    /* ---- PartyDuplicates.aspx (pd) ---- */
    /* Merge / Backup + Collapse All / Backup + Re-tag are irreversible actions on
       28px tap targets, and the KEEP / merge tags are 10px. */
    .pd-wrap .btn-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
    .pd-prow .tag { font-size: 11px; }


    /* ---- PurchaseList.aspx (pl) ---- */
    /* PurchaseList's GridView reuses PartyLedgerWeight's .pl-grid class, so the
       dues-grid rules earlier in this block leak onto it. The page's own card mode
       now starts at 767.98px instead of 700px (markup change), so the hidden
       columns 4-5 no longer matter - the page's own display:block !important card
       rules win. What still leaks is "padding:5px 6px !important" landing on the
       card cells the page deliberately zero-pads; restore its intent. */
    .pl-grid-card .pl-grid td { padding: 0 !important; }
    .pl-grid-card .pl-grid td.pl-actions { padding-top: 8px !important; }


    /* ---- Setup.aspx (diag) ---- */
    /* Re-run Checks / Apply All Patches / Run Smoke Test: two fit line 1 and the
       third was orphaned. (markup: class "diag-btns" added to the button row) */
    .diag-btns .btn { flex: 1 1 calc(50% - 8px); }
    .diag-btns .btn:last-child { flex-basis: 100%; }


    /* ---- StockGroupWise.aspx (sgw) ---- */
    /* The 5-column legacy report needs ~370-400px (4 nowrap numeric columns at
       3px/10px padding) inside ~335px, so brij-mobile.js wrapped it in a
       .brij-mscroll - which also broke the sticky header (a scroll container is a
       new containing block). Tighten the cells so the table just fits instead. */
    .sgw-table { font-size: 12px; }
    .sgw-table th,
    .sgw-table td { padding: 3px 5px; }


    /* ---- Wishlist.aspx (wl) ---- */
    /* .wl-head has no flex-wrap and the filter select's inline max-width:160px is
       released by the section-1 safety net, so the Bootstrap width:100% select grew
       to ~240px and squeezed the "All Wishes" title. Re-cap it (needs !important to
       beat that safety net's own !important). */
    .wl-head { flex-wrap: wrap; row-gap: 4px; }
    .wl-head .form-select { max-width: 160px !important; margin-left: auto; }
    /* Add-a-wish: below 768px every col-md-* is a full 359px row, so five 1-4 digit
       numeric fields each took a whole line. Two-up:
       Group | Wt From, To | Budget Min, Budget Max | Add. */
    .wl-card .row > .col-md-1 { width: 50%; }
    /* WhatsApp + Fulfilled + Cancel (~272px, no wrap) overflow the item box on
       320-340px phones and scroll the page sideways. */
    .wl-item-actions { flex-wrap: wrap; }
    .wl-item-actions .btn { flex: 1 1 auto; min-height: 36px; }


    /* ============================================================================
       mobile-fix-11.css - phone fixes for audit slice 11 (fixer #11). ASCII only.

       ASSEMBLE: paste the blocks below INSIDE the existing
       "@media screen and (max-width: 767.98px)" block of Content/brij-mobile.css
       (section 5, page-specific). Nothing here is wrapped in its own media query,
       and nothing here is global - every selector is page-prefixed.

       !important policy used here: only where the competing declaration would
       otherwise win - i.e. the page's own <style> sits in MainPh (AFTER
       brij-mobile.css: StockInOut, TransactionDetail), the page selector is more
       specific, or a Bootstrap utility (.ms-auto / .d-flex) is already !important.
       Page <style> blocks in HeadPh render BEFORE brij-mobile.css, so equal-
       specificity rules there are beaten by source order alone; the two
       task-blocking fixes (PartyEdit chips, ItemVerifyBarcode scan bar) still
       carry !important on the one decisive declaration so a future re-order of
       the page's <style> cannot silently kill them.

       NOT written here (owned by the generic set, fixer #1): .rep-filter /
       .rep-kpi / .rep-card-head (report-a4.css, 22 pages), .bk-scan-bar,
       .brij-lock-banner, .peb-tip + .so-banner > div, and the section-4
       flex-wrap list additions.
       ============================================================================ */


    /* ---- CatalogCuratedNew.aspx (cc) ---- */
    /* Filter strip is "repeat(2,1fr) auto", and the page's own 700px query still
       keeps 2 columns: at 375px each track is ~150px but every track holds a
       From + dash + To + unit row, so the two number inputs end up ~50px wide and
       the Clear button drops alone into row 2. One column per filter group. */
    .cc-filters { grid-template-columns: 1fr; }
    .cc-filt-clear { width: 100%; }
    /* Result tiles are minmax(180px,1fr) -> ONE square (aspect-ratio 1/1) tile per
       row at ~327px, i.e. ~25 screens for a 60-item result. Go two-up. */
    .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* 9.5px filter / vendor-picker captions. */
    .cc-filt-group label, .cc-vp-head .lbl { font-size: 10.5px; }


    /* ---- DashboardFlags.aspx (ffg) ---- */
    /* Toolbar wraps already, but .spacer (flex:1) plus four natural-width buttons
       wrap 3 + 1 and orphan "Open Dashboard". Drop the spacer, buttons two-up. */
    .ffg-toolbar .spacer { display: none; }
    .ffg-toolbar .btn { flex: 1 1 calc(50% - 8px); text-align: center; }


    /* ---- DiamondBillEntry.aspx (db) ---- */
    /* Item picker dropdown: .db-ta-head / .db-ta-item.db-ta-grid are five fixed
       tracks (16 + 110 + 56 + 84 + 84 + 4x12 gap = 398px min) inside a results box
       that JS sizes to the input (~335px on a phone), so the Stockist column sits
       behind a horizontal scrollbar. Four tracks, Stockist on its own second row. */
    .db-ta-head, .db-ta-item.db-ta-grid { grid-template-columns: 12px minmax(0, 1fr) 48px 72px; gap: 6px; }
    .db-ta-head span:last-child { display: none; }
    .db-ta-item.db-ta-grid .db-ta-stk { grid-column: 2 / -1; font-size: 11px; white-space: normal; }
    /* Card heads: icon + h6 (flex:1, basis 0) + count pill + "Add Old Item" button
       on one 335px row makes the title break word-by-word. Title takes the whole
       first line; pill + button share the second, button flushed right. */
    .db-card-head { flex-wrap: wrap; row-gap: 4px; }
    .db-card-head h6 { flex: 1 1 100%; }
    .db-card-head .btn { margin-left: auto; }
    /* Estimate Preview modal: 14mm/12mm paper padding leaves 269px of content in a
       359px dialog while .dest-tot is a fixed 320px, and .modal-content clips it -
       the Sub Total / GST / Grand Total figures were cut off (and the html2canvas
       PDF renders from this same layout). Screen only; @media print is untouched. */
    .dest-paper { padding: 12px 10px; }
    .dest-tot { width: 100%; max-width: 320px; }
    /* The page's own 767.98px rule makes the header 1fr 1fr, which puts the party
       search box (the primary control on the form) in a ~160px half column. */
    .db-header-row > div:nth-child(3) { grid-column: 1 / -1; }


    /* ---- DisplayTrayPrint.aspx (dtp) ---- */
    /* The 8px / 9px squeeze is a SCREEN rule here (the print squeeze is separate,
       in the page's @media print), so the tray document reads at 8px on a phone.
       The table-header rule is scoped through .dtp-info so only this page moves -
       report-a4.css's .rep-tbl is shared by every report page. */
    .dtp-info .f { font-size: 10px; }
    .dtp-info .v { font-size: 12px; }
    .dtp-info ~ .rep-card .rep-tbl thead th { font-size: 10px; }


    /* ---- GstReport.aspx (gst) ---- */
    /* Filter row is col-md-3 x3 + col-md-auto: below md every column is width:100%,
       so From and To take a line each and the Apply button is orphaned at ~70px on
       a fourth line. Dates two-up, Type full width, Apply a full-width button. */
    .gst-filter-body .row > .col-md-3:nth-child(-n+2) { width: 50%; }
    .gst-filter-body .row > .col-md-auto .btn { width: 100%; }
    /* Card head wraps (section 4) but the <small> subtitle wraps mid-sentence
       beside the title; send it to its own line under the title. */
    .gst-card-head small { flex: 1 1 100%; order: 9; margin-left: 24px; font-size: 11px; }


    /* ---- ItemVerifyBarcode.aspx (iv) ---- */
    /* HIGH: .iv-scan is a no-wrap flex row - icon + "Scan / Type Code:" + input +
       Camera + Verify + a 200px .iv-msg = ~640px inside a 327px card, so Verify and
       the scan verdict (not found / wrong filter / already scanned) render off the
       right edge and the whole document pans sideways. Wrap it: label line, input
       line, the two buttons two-up, message on its own line. input[type=text] is
       used deliberately - a bare ".iv-scan input" would also hit the Verify submit
       button and stretch it to full width. */
    .iv-scan { flex-wrap: wrap !important; row-gap: 6px; }
    .iv-scan input[type="text"] { flex: 1 1 100%; min-width: 0; }
    .iv-scan .btn { flex: 1 1 auto; }
    .iv-scan .iv-msg { flex: 1 1 100%; min-width: 0; }
    /* Action bar: four unequal buttons right-aligned in a .ms-auto .d-flex.gap-2
       wrap 2 + 2 raggedly. Even two-up grid. .ms-auto and .d-flex are Bootstrap
       utilities declared !important, hence the !important here. */
    .iv-actions > .ms-auto {
        margin-left: 0 !important;
        flex: 1 1 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .iv-actions > .ms-auto .btn { width: 100%; }


    /* ---- PartyEdit.aspx (peb) ---- */
    /* HIGH: "Type of party" chips are pinned to one line (.oneline = flex-wrap
       nowrap, chips flex:0 0 auto) inside .peb-card { overflow:hidden } - ~450px of
       chips in a ~308px body, so "Karigar (artificer)" is clipped away entirely and
       cannot be tapped (which also hides the Karigar-only Group standards card).
       overflow:hidden is not touch-scrollable, so wrapping is the only fix. */
    .peb-chips.oneline { flex-wrap: wrap !important; }
    .peb-chips.oneline .peb-chip { flex: 1 1 auto !important; }
    /* Header: .peb-htxt is flex:1 with basis 0, so the pill + "Back to parties"
       (both nowrap) keep the line and the party name is squeezed into ~66px and
       wrapped to 3-4 lines. Put the back link on its own line. */
    .peb-hd .peb-bk { flex: 1 1 100%; order: 9; margin-top: 2px; }
    /* Every field on the party form is a 28px-tall / 12px-text tap target with a
       9px caption. Lift to 36px / 14px / 10.5px. */
    .peb-in, select.peb-in, .peb-money { height: 36px; font-size: 14px; }
    .peb-money .peb-in { height: 34px; }
    .peb-chip { min-height: 36px; }
    .peb .f label { font-size: 10.5px; }


    /* ---- StockInOut.aspx (so) ---- */
    /* The page <style> lives in MainPh (AFTER brij-mobile.css), so these carry
       !important. .so-titlebar is a no-wrap flex row: h1 (icon + title + voucher no
       + EDIT MODE badge) + a flex:1 spacer + a nowrap ~150px "View all stock notes"
       link, so in edit mode the title breaks into 3 lines with the badge dangling.
       Wrap, kill the spacer, and let the link right-align on its own line. */
    .so-titlebar { flex-wrap: wrap !important; row-gap: 6px; }
    .so-titlebar .sp { display: none !important; }
    .so-titlebar a.vlink { margin-left: auto !important; }


    /* ---- TransactionDetail.aspx (td) ---- */
    /* The page <style> lives in MainPh (AFTER brij-mobile.css), hence !important.
       .amt-block is min-width:220px + text-align:right inside a space-between flex
       head: once it wraps it is the only item on its line, so it is placed LEFT
       while its text stays right-aligned - Net Amount and the figure float in the
       middle of the card with dead space beside them. */
    .td-head .amt-block { flex: 1 1 100%; min-width: 0 !important; text-align: left !important; }


    /* ============================================================================
       mobile-fix-12.css  -  FRAGMENT for Content/brij-mobile.css section 5.
       Slice 12 of the 178-page phone audit (slices[11]).
       ASCII only. PASTE THE WHOLE FILE INSIDE the existing
           @media screen and (max-width: 767.98px) { ... }
       block - nothing here is meant to run on desktop.

       !important policy: every page below puts its <style> in HeadPh, which
       Site.master:17 loads BEFORE brij-mobile.css, so equal specificity already
       wins. !important appears ONLY where (a) the page style sits in MainPh and
       therefore comes AFTER this file, or (b) an inline
       style="" / ASP.NET Width= attribute would otherwise win. Each such use is
       marked with the reason.

       Pages already clean in this slice (no rules): DiamondBulkRate.aspx,
       StaffAdvance.aspx.
       ============================================================================ */


    /* ---- CatalogQrNew.aspx (qg) ------------------------------------------------
       After the QR is minted, Copy link (:17, ~24px) and the three btn-sm actions
       (:113-121, ~31px) are the only controls on the counter phone - all under the
       36px tap floor. The three buttons also share the row evenly instead of
       wrapping ragged. */
    .qg-out .copy-btn { padding: 9px 14px; font-size: 13px; min-height: 38px; }
    .qg-out .actions { width: 100%; }
    .qg-out .actions .btn { flex: 1 1 auto; min-height: 38px; padding: 9px 12px; font-size: 13px; }


    /* ---- DisplayTrayVerify.aspx (tv) -------------------------------------------
       1) .tv-savebar (:35-36) is a sticky flex with NO flex-wrap: pill + the
          "Stockist ... | Last verified ..." label + Save share 307px, so the label
          is squeezed into a ~37px sliver and wraps 6-10 lines, making the sticky
          bar 100px+ tall over the scan table. Wrap it, push the label to its own
          full-width line (order:9) under the pill + button row.
       2) .tv-table (8 cols, 3 nowrap weight cells + nowrap "Last verified") is
          crushed to min-content inside the :87 scroll box; give it a real width.
       3) .tv-pick selects render inline width:220px / width:360px (Width= on the
          DropDownLists) - stack them full width instead.
       4) Saved-Verifications delete button ~31px, .tv-chip captions 10.5px. */
    .tv-savebar { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
    /* !important: lblTrayInfo carries inline style="font-size:11.5px;flex:1 1 auto" */
    .tv-savebar .text-muted { flex: 1 1 100% !important; order: 9; font-size: 11px !important; }
    .tv-savebar .btn { flex: 1 1 auto; min-height: 40px; }
    .tv-pick > div { flex: 1 1 100%; }
    /* !important: ASP.NET Width="220px" / "360px" render as inline style */
    .tv-pick .form-select { width: 100% !important; min-height: 38px; font-size: 14px; }
    .tv-table { min-width: 640px; }
    .tv-table th, .tv-table td { padding: 4px 6px; }
    .tv-table td:nth-child(3) { min-width: 140px; }
    .tv-chip { font-size: 11px; padding: 8px 4px; }
    .tv-hist .btn-sm { padding: 7px 10px; min-height: 36px; }


    /* ---- GstrExport.aspx (ge) --------------------------------------------------
       .ge-form-row is already stacked earlier in section 5. Remaining:
       1) the Month / Year / Load Period strip (:76-92) is 130 + 100 + ~95 + gaps =
          341 > 331px, so the button drops alone under two short selects. Let the
          two selects share row 1 and give the button the full second row.
       2) .ge-3b (:31) has five nowrap rupee columns (:34), so the
          Nature-of-supplies cell collapses to one word per line inside the :232
          overflow-x box. Give the table a working width and the label cell a floor. */
    /* !important: ddlMonth / ddlYear carry inline Style="max-width:130px|100px" */
    .ge-form-row .d-flex > .form-control { flex: 1 1 40%; max-width: none !important; min-height: 36px; }
    .ge-form-row .d-flex > .btn { flex: 1 1 100%; min-height: 38px; }
    .ge-3b { min-width: 680px; }
    .ge-3b td.lbl, .ge-3b th.lbl-h { min-width: 220px; white-space: normal; }


    /* ---- Items.aspx (im) -------------------------------------------------------
       1) HIGH - the Regular grid is .im-grid im-grid-fixed (:307), i.e.
          table-layout:fixed (:97) with overflow:hidden + ellipsis on every cell
          (:98). Its HeaderStyle-Width columns total 90+90+50+95+95+80+135+80 =
          715px (:335-368) and the Item column (:314) is the only auto one. Under
          fixed layout the table width is max(100% = ~359px, 715px) = 715px and the
          auto column gets the REMAINDER = 0px, so on a phone the item name and code
          are clipped away entirely - the master list becomes unusable. Give the
          table a real working width (960 - 715 = 245px for Item) and let it
          side-scroll inside .im-grid-wrap (overflow-x is already released in
          section 3). No sticky first column: a 245px pinned cell inside a 359px
          scroller would leave nothing to scroll into. */
    .im-grid-fixed { min-width: 960px; }

    /* 2) .dia-stones-pop (:155-162) is position:absolute inside .im-grid-wrap
          (:200, a scroll container that clips it) and anchored left:0 / bottom:100%
          on a badge that sits ~400px into a side-scrolled table, so on a phone the
          popup opens off-screen. Float it out of the scroller as a fixed sheet.
          NOTE FOR THE OWNER: this REPLACES the existing
          ".dia-stones-pop { min-width:0 !important; max-width: calc(100vw - 24px) !important; }"
          line in section 5 (Items.aspx stones popup) - drop that one.
          !important on min-width / max-width only because that older rule used it. */
    .dia-stones-pop {
        position: fixed; left: 10px; right: 10px; top: 76px; bottom: auto;
        width: auto; min-width: 0 !important; max-width: none !important;
        max-height: calc(100vh - 96px); overflow: auto;
    }
    .dia-stones-pop::after { display: none; }

    /* 3) Toolbar + row controls on the busiest master page are 22-28px tall
          (:71-74 pills / buttons / inputs, :192 action icons, :196-197 inline
          labour editor). Lift them to the 32-36px tap band; the Labour column is
          135px and the actions column 80px, so both still fit their tracks. */
    .im-toolbar .im-pill { padding: 7px 12px; font-size: 12.5px; }
    .im-toolbar .btn { padding: 7px 14px; font-size: 13px; }
    .im-toolbar input.form-control, .im-toolbar .input-group-text { height: 34px; }
    .im-grid .im-actions a { width: 34px; height: 34px; font-size: 13px; }
    .im-grid .input-group-sm > .form-control, .im-grid .input-group-sm > .btn { height: 32px; }

    /* 4) .im-kpi-row auto-fit minmax(150px) puts 8 tiles two-up = 4 rows above the
          grid on every visit; 9.5px captions (:31, :44) are under the 11px floor. */
    .im-kpi-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .im-kpi { padding: 6px 8px; }
    .im-kpi .lbl, .im-kpi .sub { font-size: 10.5px; }

    /* 5) #oEdModal (:565-566) has no max-height, so with the keyboard up the
          Save / Cancel footer is unreachable.
          !important: the inner div carries inline overflow:hidden. */
    #oEdModal > div { max-height: calc(100vh - 24px); overflow-y: auto !important; -webkit-overflow-scrolling: touch; }


    /* ---- PartyGroupBalance.aspx (pgb) ------------------------------------------
       Markup already applied: data-no-mscroll on .pgb-card (:58) so brij-mobile.js
       leaves the 3-column report table alone and the v2.36.358 sticky header keeps
       sticking to the viewport on phones. That means the table MUST fit 375px
       (.pgb-card is overflow:clip - a wider table would be cut with no scrollbar),
       hence the tighter cells below. Cols are Party Name + 2 nowrap numerics, so
       ~78 + ~86 + 195px of name at 12.5px: it fits.
       Also: the .ti title row (:16-19) puts a ~210px title beside a nowrap
       ~150px "As on ..." date in 335px, breaking the title mid-phrase.
       The nested-.container-fluid padding is a GENERIC pattern - left to fixer #1. */
    .pgb-print-head .ti { flex-wrap: wrap; gap: 2px 10px; }
    .pgb-print-head .dt { flex: 1 1 100%; text-align: left; }
    .pgb-table { font-size: 12.5px; }
    .pgb-table th, .pgb-table td { padding: 4px 8px; }


    /* ---- QuickSale.aspx (qs) ---------------------------------------------------
       CSS only - the page file is owned by another builder this session and is not
       touched. Page <style> is in HeadPh, so plain rules win.
       1) .qs-line (:61) is "1fr auto": the .meta column cannot shrink below
          "Gr Wt: [70px input] g" (~124px) while .ltot takes ~180px on the right, so
          all seven chips stack one per line and every scanned line is ~200px tall.
          Stack the row instead: meta on its own full-width line, total under it.
       2) The weight inputs (:70), the remove button (:66), the GST toggle (:80) and
          the party Change button (:35) are all ~26px on a page whose stated goal
          (:8-9) is one-handed phone use.
       3) .qs-totals (:76) has no wrap, so the "Subtotal ... GST ..." line breaks
          between the two figures. */
    .qs-line { grid-template-columns: 1fr; }
    .qs-line .meta { gap: 6px 14px; }
    .qs-line .ltot { text-align: right; border-top: 1px dashed #e2e6ea; padding-top: 6px; }
    .qs-line input.wt-edit { width: 84px; padding: 8px 6px; font-size: 15px; }
    .qs-line .top .rm { padding: 6px 12px; }
    .qs-gst-toggle button { padding: 9px 12px; font-size: 13px; }
    .qs-party-picked .change { padding: 8px 12px; font-size: 13px; }
    .qs-totals { flex-wrap: wrap; gap: 8px; }
    .qs-totals > div:last-child { flex: 1 1 100%; }


    /* ---- StockInOutList.aspx (sl) ----------------------------------------------
       .sl-filter-row is already 2-col earlier in section 5. Remaining:
       1) 11 nowrap columns (:38, :41) make the table ~950px, so Net / Status and
          the Print / Edit / Delete actions sit two screens to the right. Drop the
          three lowest-value columns on phones - 4 "Rcv lines", 5 "Iss lines",
          9 "User" (the weight totals in 6/7 already carry the line story) - and let
          the Party cell wrap instead of stretching the table.
       2) The row actions (:56-62) are ~22px icon-only buttons and one of them
          (:218 askDelete) permanently deletes a voucher; the filter controls
          (:25-26) are 30px. Both under the 36px tap floor. */
    .sl-tbl th:nth-child(4), .sl-tbl td:nth-child(4),
    .sl-tbl th:nth-child(5), .sl-tbl td:nth-child(5),
    .sl-tbl th:nth-child(9), .sl-tbl td:nth-child(9) { display: none; }
    .sl-tbl tbody td:nth-child(3) { white-space: normal; min-width: 130px; max-width: 180px; }
    .sl-tbl thead th, .sl-tbl tbody td { padding: 6px 7px; }
    .sl-tbl .actions { gap: 6px; }
    .sl-tbl .actions a, .sl-tbl .actions button { padding: 8px 10px; font-size: 12.5px; min-height: 36px; }
    .sl-filter-row .form-control, .sl-filter-row .form-select, .sl-filter-row .btn { height: 36px; font-size: 13.5px; }


    /* ---- TrialBalance.aspx (tb) ------------------------------------------------
       .tb-grid-wrap already gets overflow-x in section 3, but the max-height
       release at the end of that rule covers only .im-grid-wrap / .um-grid-wrap, so
       hundreds of party rows still scroll inside a 307px box nested in the page
       scroll (220px in landscape) - a scroll-inside-scroll fight on every swipe.
       Unlock it; the :66 sticky thead is bound to this box either way.
       .tb-grid (:60) then needs a working width: 590px of fixed numeric tracks
       (:165-171, mirrored on the Weight tab :219-225) plus nowrap .num cells (:73)
       squeeze the Party cell to min-content, so names wrap one word per line.
       Captions (:22, :30) are 9.5px and the toolbar (:54-56, :153, :207) is 26-28px. */
    .tb-grid-wrap { max-height: none; min-height: 0; }
    .tb-grid { min-width: 720px; }
    .tb-grid td:nth-child(2) { min-width: 170px; }
    .tb-kpi .lbl, .tb-kpi .sub { font-size: 10.5px; }
    .tb-toolbar input.form-control, .tb-toolbar .input-group-text { height: 34px; }
    /* !important: both selects carry inline style="max-width:140px;height:28px" */
    .tb-toolbar select { height: 34px !important; }
    .tb-toolbar .btn { padding: 7px 12px; }


    /* ============================================================================
       v2.36.366 - MOBILE polish (phone widths only).
       (a) Stop mobile browsers auto-enlarging text - the login LIVE-TIME clock looked
           "zoomed" on some phones (Chrome text-inflation). App-wide, harmless on desktop.
       (b) Stop iOS auto-zoom when a focused standalone field is < 16px - only the fields
           that get focused most (login + the barcode box), so the dense side-scrolling
           entry grids stay compact.
       (c) Sale Bill "Items Sold" header: the scan bar + Add Item + the desktop keyboard-
           shortcut hint were crammed into one flex row that ran off the screen. Drop the
           kbd hint (no keyboard on a phone), give the scan bar its own full-width row (with
           room for the phone-camera button), and let the box fill the width.
       ============================================================================ */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    .lc-input, #txtScan, .scan-bar input, .scan-inline input { font-size: 16px !important; }

    .card-header .se-kbd-hint { display: none !important; }
    .card-header .scan-inline { order: 9; flex: 1 1 100% !important; width: 100% !important; margin: 6px 0 0 !important; }
    .card-header .scan-inline input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; }


    /* =========================================================================
       v2.36.369 - NATIVE BILL-ENTRY (phone only): Sale / Diamond / Other.
       The wide line-item spreadsheets (#itemsBody / #oldItemsBody / #dbBody /
       #dbOldBody / #osBody) are turned into app-style CARDS - one card per line,
       NO horizontal scroll, large tap targets, computed values shown as quiet
       chips. The <input>s stay inside their own <td>, so every recalc / save /
       validation handler is UNTOUCHED; only the visual layout changes. Desktop
       and print are unaffected (this is inside the phone media block). ASCII only.
       See brij-txn-monitor / sales pages. Companion vars reuse site.css colors.
       ========================================================================= */

    /* ---- shared section-card polish on the three bill pages (page-scoped via :has,
           so no markup change; browsers without :has simply keep the default card) --- */
    body:has(#itemsBody) main .card, body:has(#dbBody) main .card, body:has(#osBody) main .card,
    body:has(#osBody) .os-card {
        border: 0 !important; border-radius: 16px !important;
        box-shadow: 0 1px 4px rgba(16,32,64,.08) !important;
    }

    /* ---- 0. neutralise the old wide-table rules for the five grids -------- */
    #itemsTable, #oldItemsTable, .db-grid, .os-grid {
        display: block !important; width: 100% !important; min-width: 0 !important;
        table-layout: auto !important; border: 0 !important; background: transparent !important;
        overflow: visible !important;
    }
    #itemsTable > thead, #oldItemsTable > thead, .db-grid > thead, .os-grid > thead,
    .os-grid > colgroup { display: none !important; }
    #itemsTable > tbody, #oldItemsTable > tbody,
    .db-grid > tbody, .os-grid > tbody { display: block !important; width: 100% !important; }
    /* the card-body that used to scroll sideways */
    .bn-list-wrap { overflow: visible !important; padding: 10px !important; background: transparent !important; }

    /* ---- 1. the CARD (one per <tr>) -------------------------------------- */
    #itemsBody > tr, #oldItemsBody > tr, #dbBody > tr, #dbOldBody > tr, #osBody > tr {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 10px;
        position: relative; align-items: start;
        background: #fff; border: 1px solid #e7ecf2; border-radius: 14px;
        box-shadow: 0 1px 3px rgba(16,32,64,.06);
        padding: 14px 12px 12px; margin: 0 0 10px;
    }
    /* each visible cell = a labelled field (label from ::before, set per column) */
    #itemsBody > tr > td, #oldItemsBody > tr > td, #dbBody > tr > td,
    #dbOldBody > tr > td, #osBody > tr > td {
        display: flex !important; flex-direction: column; gap: 4px;
        padding: 0 !important; border: 0 !important; height: auto !important;
        min-width: 0; vertical-align: top; white-space: normal;
    }
    #itemsBody > tr > td::before, #oldItemsBody > tr > td::before, #dbBody > tr > td::before,
    #dbOldBody > tr > td::before, #osBody > tr > td::before {
        font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
        color: #94a0b0; line-height: 1;
    }
    /* editable inputs: native, tall, rounded */
    #itemsBody input, #oldItemsBody input, #dbBody input, #dbOldBody input, #osBody input {
        width: 100% !important; box-sizing: border-box !important; min-height: 44px;
        padding: 10px 12px !important; font-size: 16px !important; line-height: 1.2 !important;
        border: 1px solid #d7dde6 !important; border-radius: 11px !important;
        background: #fff !important; color: #16325c !important;
        font-variant-numeric: tabular-nums; font-weight: 500;
    }
    #itemsBody input:focus, #oldItemsBody input:focus, #dbBody input:focus,
    #dbOldBody input:focus, #osBody input:focus {
        border-color: #2c7be5 !important; box-shadow: 0 0 0 3px rgba(44,123,229,.15) !important; outline: none !important;
    }
    /* computed / readonly cells look like quiet CHIPS, not inputs */
    #itemsBody input[readonly], #oldItemsBody input[readonly], #dbBody input[readonly],
    #dbOldBody input[readonly], #osBody input[readonly] {
        background: #f3f6fb !important; border-color: #e6ecf4 !important;
        color: #42526b !important; font-weight: 700 !important; min-height: 38px;
        box-shadow: none !important;
    }
    /* typeahead container fills the item cell + anchors its dropdown */
    #itemsBody .typeahead, #oldItemsBody .typeahead,
    #osBody .typeahead, #dbOldBody .odta { position: relative; width: 100%; }
    #itemsBody .ta-results, #oldItemsBody .ta-results,
    #osBody .ta-results, #dbOldBody .odta-res {
        position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
        max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    #itemsBody .ta-caret, #oldItemsBody .ta-caret, #osBody .ta-caret {
        position: absolute; right: 12px; top: 14px; pointer-events: none; color: #9aa6b4;
    }

    /* ---- 2. delete button -> round icon, top-right of the card ----------- */
    #itemsBody > tr > td.col-action, #oldItemsBody > tr > td.col-action,
    #dbBody > tr > td.col-action, #dbOldBody > tr > td.col-action,
    #osBody > tr > td:last-child {
        position: absolute !important; top: 8px; right: 8px; width: auto !important;
        padding: 0 !important; margin: 0 !important;
    }
    #itemsBody > tr > td.col-action::before, #oldItemsBody > tr > td.col-action::before,
    #dbBody > tr > td.col-action::before, #dbOldBody > tr > td.col-action::before,
    #osBody > tr > td:last-child::before { content: "" !important; }
    #itemsBody td.col-action .btn, #oldItemsBody td.col-action .btn,
    #dbBody td.col-action a, #dbOldBody td.col-action a,
    #itemsBody td.col-action a, #oldItemsBody td.col-action a,
    #osBody .os-rm {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 34px !important; height: 34px !important; min-height: 34px !important;
        border-radius: 50% !important; background: #fdecec !important; color: #c0392b !important;
        border: 0 !important; font-size: 17px !important; padding: 0 !important; margin: 0 !important;
    }
    #itemsBody td.col-action .bi, #oldItemsBody td.col-action .bi,
    #dbBody td.col-action .bi, #dbOldBody td.col-action .bi { font-size: 17px; }
    /* hide the row-number cell on cards */
    #itemsBody > tr > td.col-num, #oldItemsBody > tr > td.col-num,
    #dbBody > tr > td.col-num, #dbOldBody > tr > td.col-num { display: none !important; }

    /* =====================================================================
       3. SalesEntry - ITEMS (#itemsBody): 15 cols
       1# 2Item 3Grp 4Stk 5GrWt 6StnWt 7NetWt 8Rate 9Lab% 10Amt 11HSN 12GST% 13GSTamt 14LineTot 15act
       Show: Item(full) | GrWt | StnWt | NetWt | Rate | LineTotal(full). Hide the rest.
       ===================================================================== */
    #itemsBody > tr > td:nth-child(3), #itemsBody > tr > td:nth-child(4),
    #itemsBody > tr > td:nth-child(9), #itemsBody > tr > td:nth-child(10),
    #itemsBody > tr > td:nth-child(11), #itemsBody > tr > td:nth-child(12),
    #itemsBody > tr > td:nth-child(13) { display: none !important; }
    #itemsBody > tr > td:nth-child(2) { grid-column: 1 / -1; }      /* Item */
    #itemsBody > tr > td:nth-child(2)::before { content: "Item"; }
    #itemsBody > tr > td:nth-child(5)::before { content: "Gross Wt"; }
    #itemsBody > tr > td:nth-child(6)::before { content: "Stone Wt"; }
    #itemsBody > tr > td:nth-child(7)::before { content: "Net Wt"; }
    #itemsBody > tr > td:nth-child(8)::before { content: "Rate"; }
    #itemsBody > tr > td:nth-child(14) { grid-column: 1 / -1; }     /* Line Total */
    #itemsBody > tr > td:nth-child(14)::before { content: "Line Total (incl. GST)"; }
    #itemsBody > tr > td:nth-child(14) input {
        background: #eef6ff !important; border-color: #cfe3fb !important;
        color: #16325c !important; font-size: 19px !important; font-weight: 800 !important; min-height: 46px;
    }

    /* =====================================================================
       4. SalesEntry - OLD ITEMS (#oldItemsBody): 12 cols
       1# 2Desc 3Grp 4Stk 5Gross 6Stone 7Net 8Purity 9Fine 10Rate 11Amt 12act
       Show: Desc(full) | Gross | Stone | Net | Purity% | Rate | Amount(full).
       ===================================================================== */
    #oldItemsBody > tr > td:nth-child(3), #oldItemsBody > tr > td:nth-child(4),
    #oldItemsBody > tr > td:nth-child(9) { display: none !important; }   /* hide Group, Stockist, Fine */
    #oldItemsBody > tr > td:nth-child(2) { grid-column: 1 / -1; }        /* Description */
    #oldItemsBody > tr > td:nth-child(2)::before { content: "Old Item"; }
    #oldItemsBody > tr > td:nth-child(5)::before { content: "Gross Wt"; }
    #oldItemsBody > tr > td:nth-child(6)::before { content: "Melting Wt."; }   /* 2026-10-15 - Old Items: Melting Wt. */
    #oldItemsBody > tr > td:nth-child(7)::before { content: "Net Wt"; }
    #oldItemsBody > tr > td:nth-child(8)::before { content: "Purity %"; }
    #oldItemsBody > tr > td:nth-child(10)::before { content: "Rate"; }
    #oldItemsBody > tr > td:nth-child(11) { grid-column: 1 / -1; }       /* Amount */
    #oldItemsBody > tr > td:nth-child(11)::before { content: "Amount"; }
    #oldItemsBody > tr > td:nth-child(11) input {
        background: #fff6e8 !important; border-color: #f3dcae !important;
        color: #7a4f00 !important; font-size: 18px !important; font-weight: 800 !important; min-height: 44px;
    }

    /* =====================================================================
       5. DiamondBillEntry - ITEMS (#dbBody): 14 cols, line is READ-ONLY
       1# 2Item(name+code) 3MetalWt 4GoldRate 5MetalVal 6StoneWt 7StoneVal
       8Lab% 9Labour 10Cert 11GST% 12GSTamt 13Amount 14act   (2026-10-15: Lab % column added)
       Show: Item(full) | Metal Wt | Stone ct | Gold Rate | Amount(full) (+ Lab % for a manual-labour user).
       ===================================================================== */
    #dbBody > tr > td:nth-child(5), #dbBody > tr > td:nth-child(7),
    #dbBody > tr > td:nth-child(8), #dbBody > tr > td:nth-child(9),
    #dbBody > tr > td:nth-child(10), #dbBody > tr > td:nth-child(11),
    #dbBody > tr > td:nth-child(12) { display: none !important; }
    #dbBody > tr > td:nth-child(2) { grid-column: 1 / -1; }
    #dbBody > tr > td:nth-child(2)::before { content: "Item"; }
    #dbBody > tr > td:nth-child(2) strong { font-size: 15px; }
    #dbBody > tr > td:nth-child(3)::before { content: "Metal Wt (g)"; }
    #dbBody > tr > td:nth-child(6)::before { content: "Stone (ct)"; }
    #dbBody > tr > td:nth-child(4)::before { content: "Gold Rate"; }
    #dbBody > tr > td:nth-child(13) { grid-column: 1 / -1; }
    #dbBody > tr > td:nth-child(13)::before { content: "Amount"; }
    #dbBody > tr > td:nth-child(13) input {
        background: #f4ecf7 !important; border-color: #ddc9e8 !important;
        color: #5b2c76 !important; font-size: 19px !important; font-weight: 800 !important; min-height: 46px;
    }

    /* 2026-10-15 - a user with "Allow Manual Labour Rate" types the Labour % on the phone too: that cell (marked
       td-lab-edit by the page) stays visible on the Sale / Purchase / Diamond cards. Same specificity as the hide
       rules above, placed after them, so it wins. */
    #itemsBody > tr > td.td-lab-edit, #dbBody > tr > td.td-lab-edit { display: flex !important; }
    #itemsBody > tr > td.td-lab-edit::before, #dbBody > tr > td.td-lab-edit::before { content: "Labour %"; }

    /* =====================================================================
       6. DiamondBillEntry - OLD ITEMS (#dbOldBody): 12 cols
       1# 2Desc 3Grp 4Stk 5Gross 6Stone 7Net 8Purity 9Fine 10Rate 11Amt 12act
       Show: Desc(full) | Gross | Stone | Net | Purity | Rate | Amount(full).
       ===================================================================== */
    #dbOldBody > tr > td:nth-child(3), #dbOldBody > tr > td:nth-child(4),
    #dbOldBody > tr > td:nth-child(9) { display: none !important; }
    #dbOldBody > tr > td:nth-child(2) { grid-column: 1 / -1; }
    #dbOldBody > tr > td:nth-child(2)::before { content: "Old Item"; }
    #dbOldBody > tr > td:nth-child(5)::before { content: "Gross Wt"; }
    #dbOldBody > tr > td:nth-child(6)::before { content: "Melting Wt."; }   /* 2026-10-15 - Old Items: Melting Wt. */
    #dbOldBody > tr > td:nth-child(7)::before { content: "Net Wt"; }
    #dbOldBody > tr > td:nth-child(8)::before { content: "Purity %"; }
    #dbOldBody > tr > td:nth-child(10)::before { content: "Rate"; }
    #dbOldBody > tr > td:nth-child(11) { grid-column: 1 / -1; }
    #dbOldBody > tr > td:nth-child(11)::before { content: "Amount"; }
    #dbOldBody > tr > td:nth-child(11) input {
        background: #fff6e8 !important; border-color: #f3dcae !important;
        color: #7a4f00 !important; font-size: 18px !important; font-weight: 800 !important; min-height: 44px;
    }

    /* =====================================================================
       7. OtherSale - ITEMS (#osBody): 8 cols
       1Item 2Avail 3Qty 4Rate 5HSN 6GST% 7Amount(text) 8act
       Show: Item(full) | Available | Qty | Rate | Amount(full).
       ===================================================================== */
    #osBody > tr > td:nth-child(5), #osBody > tr > td:nth-child(6) { display: none !important; }
    #osBody > tr > td:nth-child(1) { grid-column: 1 / -1; }
    #osBody > tr > td:nth-child(1)::before { content: "Item"; }
    #osBody > tr > td:nth-child(2)::before { content: "Available"; }
    #osBody > tr > td:nth-child(2) .os-av { font-size: 15px; font-weight: 700; color: #1e8449; padding-top: 4px; }
    #osBody > tr > td:nth-child(3)::before { content: "Qty"; }
    #osBody > tr > td:nth-child(4)::before { content: "Rate"; }
    #osBody > tr > td:nth-child(7) { grid-column: 1 / -1; }
    #osBody > tr > td:nth-child(7)::before { content: "Amount"; }
    #osBody > tr > td:nth-child(7).amt {
        background: #eafaf1 !important; border: 1px solid #c3ead4 !important; border-radius: 11px !important;
        padding: 10px 12px !important; font-size: 19px !important; font-weight: 800 !important; color: #15663f !important;
        min-height: 46px; justify-content: center;
    }
    #osBody > tr > td:nth-child(7).amt::before { color: #94a0b0; }

    /* ---- 8. page-scoped app background (no markup change; graceful if :has unsupported) --- */
    body:has(#itemsBody) main, body:has(#dbBody) main, body:has(#osBody) main { background: #eef1f6; }

    /* ---- 9. native segmented Sale / Diamond / Other switcher -------------- */
    .btn-group[aria-label="Bill type"] {
        display: flex !important; width: 100%; gap: 0; background: #e6ebf2;
        border-radius: 12px; padding: 4px;
    }
    .btn-group[aria-label="Bill type"] .btn {
        flex: 1 1 0; min-height: 40px; border: 0 !important; border-radius: 9px !important;
        font-size: 13.5px !important; font-weight: 700; box-shadow: none !important;
        background: transparent !important; color: #51607a !important;
    }
    .btn-group[aria-label="Bill type"] .btn.btn-primary,
    .btn-group[aria-label="Bill type"] .btn:disabled {
        background: #2c7be5 !important; color: #fff !important; opacity: 1 !important;
        box-shadow: 0 1px 3px rgba(44,123,229,.4) !important;
    }

    /* ---- 10. native bottom action bar on the three bill pages ------------- */
    body:has(#itemsBody) .brij-savebar, body:has(#dbBody) .brij-savebar,
    body:has(#osBody) .brij-savebar {
        border: 0 !important; border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 16px rgba(16,32,64,.12) !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px !important;
    }
    body:has(#itemsBody) .brij-savebar .btn, body:has(#dbBody) .brij-savebar .btn,
    body:has(#osBody) .brij-savebar .btn {
        flex: 1 1 0 !important; min-height: 48px !important; border-radius: 12px !important;
        font-size: 15px !important; font-weight: 700 !important;
    }

    /* ---- 11. taller, native-feeling header fields on the three bill pages -- */
    body:has(#itemsBody) .se-header-row .form-control,
    body:has(#itemsBody) .se-header-row .form-select,
    body:has(#itemsBody) #partyPicker,
    body:has(#dbBody) .db-header-row .form-control,
    body:has(#dbBody) .db-header-row .form-select {
        min-height: 46px !important; font-size: 15px !important; border-radius: 11px !important;
    }
    body:has(#itemsBody) .se-gst-toggle .se-gst-btn { min-height: 44px; border-radius: 10px; }

    /* =========================================================================
       v2.36.369 - PHASE 1 NATIVE: list cards + entry-header/totals polish +
       bottom tab bar + FAB. Phone only (inside the 767.98px block) - desktop and
       print are untouched. Covers Sale / Diamond / Other Sale entry + their list
       pages. Pure CSS; companion markup (tab bar + FAB) is injected by
       Scripts/brij-mobile.js. ASCII only.
       See brij-sale-entry-native-ui / brij-list-page-consistency.
       ========================================================================= */

    /* ---- 12. LIST PAGES: KPI strip -> native stat tiles -------------------- */
    .bl-metrics {
        display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
        background: transparent !important; border: 0 !important; box-shadow: none !important;
        overflow: visible !important; margin: 0 0 10px !important;
    }
    .bl-metric {
        flex: none !important; border: 1px solid #e7ecf2 !important; border-top: 3px solid #cfd8e3 !important;
        border-radius: 14px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 10px 13px !important;
    }
    .bl-metric.gold  { border-top-color: #d4a946 !important; }
    .bl-metric.dia   { border-top-color: #7d3ca8 !important; }
    .bl-metric.oth   { border-top-color: #1f6f4a !important; }
    .bl-metric.total { border-top-color: #1e8449 !important; grid-column: 1 / -1 !important;
        background: linear-gradient(180deg,#f4fbf6 0%,#fff 60%) !important; }
    .bl-metric .m-lbl { font-size: 10px !important; }
    .bl-metric .m-num { font-size: 1.3rem !important; }

    /* ---- 12b. filter bar -> clean native fields ---------------------------- */
    .bl-filter2 {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 10px !important;
        align-items: end !important; border-radius: 14px !important; padding: 12px !important;
        border: 1px solid #e7ecf2 !important; box-shadow: 0 1px 3px rgba(16,32,64,.06) !important;
        margin: 0 0 12px !important;
    }
    .bl-filter2 .f-fld { flex: none !important; }
    .bl-filter2 .f-grow { grid-column: 1 / -1 !important; max-width: none !important; }
    .bl-filter2 .f-btns { grid-column: 1 / -1 !important; display: flex !important; gap: 8px !important; }
    .bl-filter2 .f-btns .btn { flex: 1 1 0 !important; }
    .bl-filter2 .f-quick { grid-column: 1 / -1 !important; }
    .bl-filter2 .q-row { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
        overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .bl-filter2 .qr-seg { flex: 0 0 auto !important; white-space: nowrap; }
    .bl-filter2 .form-control, .bl-filter2 .form-select {
        height: 44px !important; font-size: 15px !important; border-radius: 10px !important; padding: 8px 11px !important;
    }
    .bl-filter2 .btn { height: 44px !important; border-radius: 10px !important; font-size: 14px !important; }
    .bl-filter2 label { font-size: 10px !important; margin-bottom: 3px !important; }

    /* ---- 12c. cross-nav -> native segmented control ------------------------ */
    .sale-tabs {
        display: flex !important; gap: 0 !important; background: #e6ebf2 !important;
        border-radius: 12px !important; padding: 4px !important; border: 0 !important;
    }
    .sale-tabs a {
        flex: 1 1 0 !important; text-align: center !important; border: 0 !important;
        border-radius: 9px !important; padding: 9px 4px !important; margin: 0 !important;
        font-size: 12.5px !important; font-weight: 700 !important; color: #51607a !important;
        display: flex !important; align-items: center; justify-content: center; gap: 5px;
    }
    .sale-tabs a.active {
        background: #2c7be5 !important; color: #fff !important;
        box-shadow: 0 1px 3px rgba(44,123,229,.4) !important;
    }
    .sale-tabs a .bi { font-size: 14px; }

    /* ---- 12d. page title row + hide the inline "New" (FAB replaces it) ------ */
    .page-title { font-size: 1.15rem !important; }
    main > .d-flex > a.btn-success[href*="Entry"], main > .d-flex > a.btn-success[href*="Sale.aspx"] { display: none !important; }

    /* ---- 12e. bill cards: card shell + action-icon row (all 3 lists) ------- */
    /* Diamond list only carded below 700px in-page; add the full reflow at
       767.98px so the 701-767 band is carded too, and unify the look. */
    .dl-grid, .dl-grid tbody, .dl-grid tr { display: block !important; width: 100% !important; }
    .dl-grid thead, .dl-grid tfoot { display: none !important; }
    .dl-grid > tbody > tr > td, .dl-grid > tr > td { display: none !important; }
    .dl-grid td.dl-mhead, .dl-grid td.dl-rel-cell, .dl-grid td.dl-actions { display: block !important; }

    .bl-grid:has(td.bl-mhead) tr, .dl-grid tr {
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important;
        background: #fff !important; box-shadow: 0 1px 3px rgba(16,32,64,.06) !important;
        padding: 13px 14px !important; margin: 0 0 10px !important;
    }
    .bl-grid:has(td.bl-mhead) tr.bl-grouprow, .dl-grid tr.dl-grouprow {
        border: 0 !important; background: transparent !important; box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
    }
    /* actions row -> round icon buttons, evenly spaced, wraps cleanly */
    .bl-grid .bl-actions, .dl-grid .dl-actions {
        display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
        margin-top: 11px !important; padding-top: 11px !important;
        border-top: 1px solid #eef1f5 !important; text-align: left !important; white-space: normal !important;
    }
    .bl-grid .bl-actions a, .bl-grid .bl-actions .btn,
    .dl-grid .dl-actions a, .dl-grid .dl-actions .btn {
        width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important;
        border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center;
        font-size: 16px !important; padding: 0 !important; line-height: 1 !important;
    }
    .bl-grid .bl-actions a:not(.btn):not([style*="background"]),
    .dl-grid .dl-actions a:not(.btn):not([style*="background"]) { background: #f3f6fb !important; }

    /* ---- 12f. Hand-built bill lists that reuse .bl-grid WITHOUT a .bl-mhead
           cell (OtherSaleList 11-col, OtherPurchaseList 9-col) -> native cards.
           Cells are matched by CLASS / :has (NOT fixed nth-child) so BOTH column
           orders map correctly; the :has(td.bl-actions) guard keeps this off any
           non-bill-list .bl-grid. ------------------------------------------------ */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions),
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody,
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tr { display: block !important; width: 100% !important; }
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) thead,
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tfoot { display: none !important; }
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody tr {
        position: relative; display: flex !important; flex-direction: column; gap: 5px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important;
    }
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td {
        display: none !important; padding: 0 !important; border: 0 !important; width: 100%;
        text-align: left !important; white-space: normal !important; font-size: 13px;
    }
    /* voucher (always first column) */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td:first-child { display: block !important; order: 1; }
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td:first-child .bl-voucher { font-size: 14px; font-weight: 800; }
    /* date */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td.bl-date { display: block !important; order: 2; color: #8a97a8; font-size: 11px; }
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td.bl-date small { margin-left: 4px; }
    /* party / supplier (always 3rd column on both) */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td:nth-child(3) { display: block !important; order: 3; margin-top: 2px; }
    /* grand total (matched by class, whatever its column index) */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td.bl-total {
        display: flex !important; order: 4; align-items: baseline; justify-content: space-between;
        font-size: 18px !important; font-weight: 800 !important; color: #16325c !important; margin-top: 4px;
    }
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td.bl-total::before {
        content: "Grand Total"; font-size: 10px; font-weight: 700; letter-spacing: .4px;
        text-transform: uppercase; color: #94a0b0;
    }
    /* balance badge (OtherSaleList has a .amt-cell td; OtherPurchaseList has none) */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td.amt-cell { display: flex !important; order: 5; gap: 6px; flex-wrap: wrap; }
    /* status badge -> pinned top-right (the td that holds a .bl-st) */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td:has(.bl-st) {
        display: block !important; position: absolute; top: 12px; right: 13px; order: 0; width: auto;
    }
    /* action icons row */
    .bl-grid:not(:has(td.bl-mhead)):has(td.bl-actions) tbody td.bl-actions { display: flex !important; order: 6; }
    /* empty-state ("No bills") row stays readable */
    .bl-grid:not(:has(td.bl-mhead)) tbody td[colspan] { display: block !important; order: 1; text-align: center !important; color: #8a97a8; }

    /* ---- 12g. list grid card chrome (header + scroll wrapper) -------------- */
    .bl-grid-card, .dl-grid-card {
        border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important;
    }
    .bl-grid-head, .dl-grid-head { border-radius: 12px 12px 0 0 !important; }
    .bl-grid-card .table-responsive, .dl-grid-card .table-responsive,
    .bl-grid-card > div[style*="overflow"] { overflow: visible !important; }

    /* ---- 13. ENTRY HEADER + TOTALS polish (Sale / Diamond / Other) --------- */
    /* header fields: a clean 2-col grid, party + GST + agent go full width */
    .se-header-row, .db-header-row {
        display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important;
    }
    .se-header-row > div:has(#partyPicker), .se-header-row > div:has(#txtParty),
    .db-header-row > div:has(#partyPicker),
    .se-header-row > div:has([id$="Mobile"]), .db-header-row > div:has([id$="Mobile"]),
    .se-header-row > div:has(.se-gst-toggle), .db-header-row > div:has(.db-gst-toggle),
    .se-header-row > div:has(#ddlAgent), .db-header-row > div:has(#ddlAgent),
    .se-header-row > div:has(select[id$="ddlAgent"]), .db-header-row > div:has(select[id$="ddlAgent"]) {
        grid-column: 1 / -1 !important;
    }
    .se-gst-toggle, .db-gst-toggle { display: flex !important; width: 100% !important; }
    .se-gst-toggle .se-gst-btn, .db-gst-toggle .db-gst-btn { flex: 1 1 0 !important; }

    /* KYC strip: stack the fields, full-width, roomy taps */
    .kyc-strip, .db-kyc-strip { flex-wrap: wrap !important; gap: 8px !important; }
    .kyc-field, .dk-field { flex: 1 1 100% !important; }
    .kyc-input, .dk-input { min-height: 44px !important; }

    /* totals -> a single full-width native summary card (no float / fixed px) */
    .totals-table, .db-totals, .db-totals-table, .os-tot {
        float: none !important; width: 100% !important; max-width: none !important;
        margin: 10px 0 0 !important; display: block !important;
    }
    .db-totals { grid-template-columns: 1fr !important; }
    .totals-table, .db-totals-table, .os-tot {
        background: #fff !important; border: 1px solid #e7ecf2 !important; border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 6px 14px !important;
        border-collapse: separate !important;
    }
    /* table -> block chain so each row fills the card width (otherwise the implicit
       tbody stays table-row-group = shrink-to-content and the values never reach the
       right edge). */
    .totals-table, .db-totals-table, .totals-table tbody, .db-totals-table tbody { display: block !important; width: 100% !important; }
    /* display:flex is NOT !important so a conditionally-hidden row (Diamond CGST/
       SGST/IGST/OldGold toggled by #id { display:none }) stays hidden. */
    .totals-table tr, .db-totals-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
    .totals-table td, .db-totals-table td { border: 0 !important; padding: 6px 0 !important; }
    .totals-table td.lbl, .db-totals-table td.lbl, .os-tot .r > span {
        color: #6a7686 !important; font-size: 13px !important; text-align: left !important;
    }
    .totals-table td.val, .db-totals-table td.val, .os-tot .r > b {
        text-align: right !important; font-weight: 700 !important; color: #223450 !important;
        font-variant-numeric: tabular-nums;
    }
    .os-tot .r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0 !important; }
    /* grand-total line: emphasised band */
    .totals-table tr:has(td.grand), .db-totals-table tr.grand, .os-tot .r.g {
        margin-top: 4px !important; padding: 10px 0 !important; border-top: 1px solid #eef1f5 !important;
    }
    .totals-table td.val.grand, .db-totals-table tr.grand td.val, .os-tot .r.g b {
        font-size: 18px !important; font-weight: 800 !important; color: #16325c !important;
        white-space: nowrap; flex: 0 0 auto;
    }
    .os-tot .r.g > span, .totals-table tr:has(td.grand) td.lbl { font-weight: 800 !important; color: #16325c !important; }
    /* settlement lines: quiet Paid, emphasised Balance (the number the shop cares about) */
    #totalPaid, #dispPaid { color: #5a6a7e !important; }
    #balance, #dispBalance { font-size: 15px !important; font-weight: 800 !important; color: #16325c !important; }

    /* ---- 14. BOTTOM TAB BAR + FAB (markup injected by brij-mobile.js) ------- */
    body:has(.brij-tabbar) { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
    .brij-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        display: flex; align-items: stretch; height: calc(58px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: #ffffff; border-top: 1px solid #e7ecf2;
        box-shadow: 0 -4px 18px rgba(16,32,64,.10);
    }
    .brij-tabbar .tb-item {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        border: 0; background: transparent; color: #8a97a8; text-decoration: none;
        font-size: 10.5px; font-weight: 600; letter-spacing: .2px; min-width: 0; padding: 6px 2px;
    }
    .brij-tabbar .tb-item .bi { font-size: 20px; line-height: 1; }
    .brij-tabbar .tb-item.active { color: #2c7be5; }
    .brij-tabbar .tb-item:active { background: #f1f5fb; }

    .brij-fab {
        position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 1036;
        width: 56px; height: 56px; border-radius: 50%; border: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: #2c7be5; color: #fff; text-decoration: none;
        box-shadow: 0 6px 18px rgba(44,123,229,.45);
    }
    .brij-fab .bi { font-size: 26px; line-height: 1; }
    .brij-fab:active { background: #1a63c4; }

    /* keep the floating Staff Chat dock + bug chip clear of the tab bar */
    body:has(.brij-tabbar) .cw { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
    body:has(.brij-tabbar) #errReportBtn, body:has(.brij-tabbar) .err-report-btn {
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    }

    /* =========================================================================
       v2.36.369 - PHASE 2 STOCK CLUSTER (phone only; desktop + print untouched).
       StockInOutList (.sl-*). Items master + StockInOut entry follow in their
       own sections. ASCII only.
       ========================================================================= */

    /* ---- 15. StockInOutList (.sl-tbl) -> native cards ---------------------- */
    .sl-wrap { max-width: none !important; }
    .sl-banner { display: none !important; }                 /* help prose = phone noise */
    .sl-toolstrip { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
    .sl-kpi-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 10px !important; }
    .sl-kpi { justify-content: flex-start !important; padding: 9px 12px !important; border-radius: 12px !important;
        background: #fff !important; border: 1px solid #e7ecf2 !important; border-left: 3px solid #ccc !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; font-size: 12px !important; }
    .sl-kpi.total { border-left-color: #1f3a5f !important; } .sl-kpi.rcv { border-left-color: #1e8449 !important; }
    .sl-kpi.iss { border-left-color: #c0392b !important; } .sl-kpi.net { border-left-color: #d4a946 !important; background: #fff8e6 !important; }
    .sl-filter-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 10px !important; align-items: end !important;
        background: #fff !important; border: 1px solid #e7ecf2 !important; border-radius: 14px !important; padding: 12px !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; margin-bottom: 10px !important; }
    .sl-filter-row > div:nth-child(3) { grid-column: 1 / -1 !important; }   /* Search box */
    .sl-filter-row > div:nth-child(4) { grid-column: 1 / -1 !important; }   /* Lock status -> Apply+Reset pair on the last row */
    .sl-filter-row .form-control, .sl-filter-row .form-select { height: 44px !important; font-size: 15px !important; border-radius: 10px !important; }
    .sl-filter-row .btn { height: 44px !important; width: 100% !important; border-radius: 10px !important; font-size: 14px !important; }

    .sl-card { border: 0 !important; background: transparent !important; box-shadow: none !important; }
    .sl-card-head { border-radius: 12px 12px 0 0 !important; }
    .sl-tbl, .sl-tbl tbody, .sl-tbl tr { display: block !important; width: 100% !important; }
    .sl-tbl thead { display: none !important; }
    .sl-tbl tbody tr { position: relative; display: flex !important; flex-direction: column; gap: 4px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important; white-space: normal !important; }
    .sl-tbl tbody tr.locked { background: #fffdf5 !important; border-color: #f0dca6 !important; }
    .sl-tbl tbody td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; white-space: normal !important; font-size: 13px; }
    .sl-tbl tbody td:nth-child(1) { display: block !important; order: 1; }
    .sl-tbl tbody td:nth-child(1) code { background: transparent !important; padding: 0 !important; font-size: 14px !important; font-weight: 800 !important; color: #1f6feb !important; }
    .sl-tbl tbody td:nth-child(2) { display: block !important; order: 2; color: #8a97a8; font-size: 11px; }
    .sl-tbl tbody td:nth-child(3) { display: block !important; order: 3; font-weight: 700; color: #16325c; }
    .sl-tbl tbody td:nth-child(8) { display: flex !important; order: 4; align-items: baseline; justify-content: space-between; margin-top: 4px; font-size: 17px; }
    .sl-tbl tbody td:nth-child(8)::before { content: "Net (g)"; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #94a0b0; }
    .sl-tbl tbody td:nth-child(6) { display: flex !important; order: 5; justify-content: space-between; color: #1e8449; font-size: 12.5px; }
    .sl-tbl tbody td:nth-child(6)::before { content: "Received (g)"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
    .sl-tbl tbody td:nth-child(7) { display: flex !important; order: 6; justify-content: space-between; color: #c0392b; font-size: 12.5px; }
    .sl-tbl tbody td:nth-child(7)::before { content: "Issued (g)"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
    .sl-tbl tbody td:nth-child(10) { display: block !important; position: absolute; top: 12px; right: 12px; order: 0; width: auto; }
    .sl-tbl tbody td:nth-child(11) { display: block !important; order: 7; margin-top: 8px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .sl-tbl .actions { display: flex !important; flex-wrap: wrap; gap: 8px; }
    .sl-tbl .actions .btn-print, .sl-tbl .actions .btn-edit, .sl-tbl .actions .btn-del, .sl-tbl .actions .btn-req {
        flex: 1 1 auto; min-height: 40px !important; border-radius: 10px !important; font-size: 14px !important; padding: 8px 14px !important; justify-content: center; }

    /* ---- 16. Items master (.im-*): tabs + toolbar + KPI + regular grid cards -- */
    .im-page { padding: 0 !important; }
    /* tab strip -> scrollable segmented */
    .im-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; gap: 6px !important; padding-bottom: 6px !important; }
    .im-tabs .im-tab { flex: 0 0 auto !important; min-height: 40px !important; border-radius: 10px !important; font-size: 13px !important; }
    /* KPI tiles -> rounded cards (3-up stays from the existing 2618 rule) */
    .im-kpi { border: 1px solid #e7ecf2 !important; border-left-width: 3px !important; border-radius: 12px !important; padding: 8px 11px !important; }
    .im-kpi .num { font-size: 1.1rem !important; }
    /* toolbar -> clean: search full-width, filter pills scroll in one row */
    .im-toolbar { padding: 10px !important; gap: 8px !important; background: #fff !important; border: 1px solid #e7ecf2 !important; border-radius: 0 0 14px 14px !important; }
    .im-toolbar .im-search { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; }
    .im-toolbar input.form-control, .im-toolbar select.form-select { height: 44px !important; font-size: 15px !important; border-radius: 10px !important; }
    .im-toolbar .btn { min-height: 44px !important; border-radius: 10px !important; }
    .im-toolbar .im-pill { padding: 8px 12px !important; font-size: 12.5px !important; border-radius: 20px !important; }
    .im-toolbar .im-sep { flex: 1 1 100%; margin: 2px 0 0 !important; }

    /* card shell + unlock the internal-scroll height so rows flow with the page */
    .im-card { border: 0 !important; background: transparent !important; box-shadow: none !important; }
    .im-grid-wrap { max-height: none !important; overflow: visible !important; }

    /* regular item grid (.im-grid-fixed, 9 col) -> native cards. The desktop grid
       is table-layout:fixed with a wide min-width (for header alignment); must be
       released to 0 or the card overflows and right-aligned values go off-screen. */
    .im-grid-fixed, .im-grid-fixed tbody, .im-grid-fixed tr { display: block !important; width: 100% !important; min-width: 0 !important; }
    .im-grid-fixed thead, .im-grid-fixed tfoot { display: none !important; }
    .im-grid-fixed tbody tr {
        position: relative; display: flex !important; flex-direction: column; gap: 6px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important; white-space: normal !important;
    }
    .im-grid-fixed tbody td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; white-space: normal !important; font-size: 13px; }
    /* Item (icon + name + code) = header */
    .im-grid-fixed tbody td:nth-child(1) { display: block !important; order: 1; }
    .im-grid-fixed tbody td:nth-child(1) .im-item { display: flex !important; align-items: center; gap: 10px; }
    /* group + sub chips */
    .im-grid-fixed tbody td:nth-child(2), .im-grid-fixed tbody td:nth-child(3) {
        display: inline-block !important; width: auto !important; order: 2; margin-right: 6px; }
    /* sale / purch / labour as labelled rows */
    .im-grid-fixed tbody td:nth-child(5) { display: flex !important; order: 3; justify-content: space-between; align-items: baseline; }
    .im-grid-fixed tbody td:nth-child(5)::before { content: "Sale Rate"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
    .im-grid-fixed tbody td:nth-child(6) { display: flex !important; order: 4; justify-content: space-between; align-items: baseline; }
    .im-grid-fixed tbody td:nth-child(6)::before { content: "Purchase Rate"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
    .im-grid-fixed tbody td:nth-child(8) { display: flex !important; order: 5; justify-content: space-between; align-items: center; gap: 8px; }
    .im-grid-fixed tbody td:nth-child(8)::before { content: "Labour %"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; flex: 0 0 auto; }
    .im-grid-fixed tbody td:nth-child(8) .input-group { width: auto !important; max-width: 160px; float: none !important; }
    /* actions row */
    .im-grid-fixed tbody td:nth-child(9) { display: flex !important; order: 6; gap: 8px; margin-top: 6px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .im-grid-fixed tbody td:nth-child(9) a { width: auto !important; min-height: 38px; padding: 6px 16px !important; border-radius: 10px !important; display: inline-flex; align-items: center; }
    /* empty-data row */
    .im-grid-fixed tbody td:has(.alert) { display: block !important; order: 1; }

    /* ---- 17. StockInOut entry (.so-*): header + two line grids -> cards ------ */
    /* stack the received/issued columns and the summary/settlement midrow */
    .so-rail-grid, .so-midrow { display: block !important; }
    .so-top2 { display: block !important; }
    .so-head .form-control, .so-head .form-select { min-height: 46px !important; font-size: 15px !important; border-radius: 11px !important; }
    .so-section { margin-bottom: 12px !important; }
    .so-section-body { padding: 10px !important; }
    .so-add-btn-row .btn { width: 100% !important; min-height: 44px !important; border-radius: 10px !important; }

    /* line grids -> one form-card per line (inputs stay in their td; recalc/save JS untouched) */
    .so-lines, .so-lines tbody, .so-lines tr { display: block !important; width: 100% !important; min-width: 0 !important; }
    .so-lines thead { display: none !important; }
    .so-lines tbody tr.line-row:not(.empty-row) {
        position: relative; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 10px;
        border: 1px solid #e7ecf2 !important; border-radius: 14px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 12px 12px !important; margin: 0 0 10px !important;
    }
    .so-lines tbody tr.line-row:not(.empty-row) > td {
        display: flex !important; flex-direction: column; gap: 3px; padding: 0 !important; border: 0 !important;
        height: auto !important; min-width: 0; white-space: normal !important; text-align: left !important;
    }
    .so-lines tbody tr.line-row:not(.empty-row) > td::before {
        font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a0b0; line-height: 1;
    }
    .so-lines tbody tr.line-row input.cell {
        width: 100% !important; box-sizing: border-box !important; min-height: 44px !important;
        padding: 9px 11px !important; font-size: 16px !important; border: 1px solid #d7dde6 !important; border-radius: 10px !important; text-align: left !important;
    }
    .so-lines tbody tr.line-row input.cell.num { text-align: right !important; }
    .so-lines tbody tr.line-row input.cell[readonly] { background: #f3f6fb !important; color: #42526b !important; font-weight: 700 !important; min-height: 40px !important; }
    /* column map (12 col: Item Group Stockist Pcs GrWt SWt MWt Purity Wastage NetWt Cash del) */
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(1) { grid-column: 1 / -1; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(1) strong { font-size: 15px; color: #16325c; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(2)::before { content: "Group"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(3)::before { content: "Stockist"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(4)::before { content: "Pcs"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(5)::before { content: "Gross Wt"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(6)::before { content: "Stone Wt"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(7)::before { content: "Metal Wt"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(8)::before { content: "Purity %"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(9)::before { content: "Wastage %"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(10) { grid-column: 1 / -1; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(10)::before { content: "Net Wt"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(10) input.cell { background: #eef6ff !important; border-color: #cfe3fb !important; color: #16325c !important; font-size: 17px !important; font-weight: 800 !important; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(11) { grid-column: 1 / -1; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(11)::before { content: "Cash (memo)"; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(2) .locked-stk,
    .so-lines tbody tr.line-row:not(.empty-row) > td:nth-child(3) .locked-stk { min-width: 0; display: inline-block; }
    /* delete -> round icon top-right */
    .so-lines tbody tr.line-row:not(.empty-row) > td:last-child { position: absolute !important; top: 8px; right: 8px; padding: 0 !important; }
    .so-lines tbody tr.line-row:not(.empty-row) > td:last-child::before { content: "" !important; }
    .so-lines tbody tr.line-row .btn-del-row { width: 34px !important; height: 34px !important; font-size: 18px !important; }

    /* the trailing "pick an item" empty row -> a dashed add-card */
    .so-lines tbody tr.empty-row { display: block !important; border: 1px dashed #cfd8e3 !important; border-radius: 14px !important; background: #fbfcfe !important; padding: 12px !important; margin: 0 0 10px !important; }
    .so-lines tbody tr.empty-row > td { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
    .so-lines tbody tr.empty-row input.row-pick { min-height: 46px !important; font-size: 16px !important; border-radius: 10px !important; }
    .so-lines tbody tr.empty-row td.empty-stub { font-size: 11px !important; color: #90a0b0 !important; margin-top: 8px; padding-left: 2px !important; }
    .so-lines tbody tr.empty-row td:last-child:not(.cell-pick):not(.empty-stub) { display: none !important; }

    /* navy net-position summary: full width, readable rows */
    .so-netsum { width: auto !important; margin-bottom: 12px !important; }
    .so-netsum .nl { display: flex !important; justify-content: space-between; gap: 10px; }
    /* settlement card: stack its two cells, segmented cash toggle, tall amount field */
    .so-settle { display: block !important; }
    .so-settle-cell { margin-bottom: 12px !important; }
    .so-cash-dir { display: flex !important; gap: 8px; }
    .so-cash-amt { min-height: 46px !important; font-size: 16px !important; border-radius: 10px !important; }

    /* native sticky save bar */
    .so-actions.brij-savebar { border-radius: 16px 16px 0 0 !important; box-shadow: 0 -4px 16px rgba(16,32,64,.12) !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px !important; }
    .so-actions.brij-savebar .btn { flex: 1 1 0 !important; min-height: 48px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important; }

    /* =========================================================================
       v2.36.369 - PHASE 2 MASTERS CLUSTER (phone only; desktop + print untouched).
       Parties (.pm-*), DiamondItems (.dm-*), OtherItemMaster (.om-*), and the
       Items.aspx Diamond tab (.dia-grid). ASCII only.
       ========================================================================= */

    /* ---- 18a. shared master KPI tiles + toolbars --------------------------- */
    .pm-kpi-row, .dm-kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .pm-kpi, .dm-kpi { border: 1px solid #e7ecf2 !important; border-left-width: 3px !important; border-radius: 12px !important; padding: 8px 11px !important; }
    .pm-toolbar, .dm-toolbar, .om-bar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px !important; }
    .pm-toolbar .form-control, .dm-toolbar .form-control, .om-bar .form-control,
    .pm-toolbar input[type=text], .dm-toolbar input[type=text], .om-bar input[type=text] { min-height: 44px !important; font-size: 15px !important; border-radius: 10px !important; flex: 1 1 100% !important; }
    .pm-toolbar .btn, .dm-toolbar .btn, .om-bar .btn { min-height: 44px !important; border-radius: 10px !important; }
    .pm-status-pill, .pm-type-pill, .dm-pill { padding: 8px 12px !important; font-size: 12.5px !important; border-radius: 20px !important; }

    /* ---- 18b. Parties (.pm-grid rows already card-like) -> vertical card ---- */
    .pm-grid, .pm-grid tbody, .pm-grid tr { display: block !important; width: 100% !important; }
    .pm-grid thead { display: none !important; }
    .pm-grid tbody tr { border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 12px 14px !important; margin: 0 0 10px !important; }
    .pm-grid td.pm-cell-main { display: block !important; padding: 0 !important; border: 0 !important; }
    .pm-grid .pm-row { display: flex !important; align-items: center; gap: 10px; grid-template-columns: none !important; padding: 0 !important; }
    .pm-grid .pm-who { flex: 1 1 auto; min-width: 0; }
    .pm-grid .pm-side { margin-left: auto; }
    .pm-grid .pm-c-city, .pm-grid .pm-c-pan, .pm-grid .pm-c-ph { display: none !important; }
    .pm-grid td.pm-cell-actions { display: flex !important; gap: 8px; border: 0 !important; padding: 10px 0 0 !important; margin-top: 10px; border-top: 1px solid #eef1f5 !important; }
    .pm-grid td.pm-cell-actions a { width: auto !important; min-height: 38px !important; flex: 1 1 auto; border: 1px solid #e3e8ef !important; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center; }

    /* ---- 18c. DiamondItems (.dm-grid, 9 col) -> cards ---------------------- */
    .dm-grid, .dm-grid tbody, .dm-grid tr { display: block !important; width: 100% !important; min-width: 0 !important; }
    .dm-grid thead { display: none !important; }
    .dm-grid tbody tr { position: relative; display: flex !important; flex-direction: column; gap: 5px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important; white-space: normal !important; }
    .dm-grid tbody td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; font-size: 13px; white-space: normal !important; }
    .dm-grid tbody td:nth-child(1) { display: block !important; order: 1; }
    .dm-grid tbody td:nth-child(1) .dm-item { display: flex !important; align-items: center; gap: 10px; }
    .dm-grid tbody td:nth-child(2), .dm-grid tbody td:nth-child(4) { display: inline-block !important; width: auto !important; order: 2; margin-right: 6px; }
    .dm-grid tbody td:nth-child(5) { display: flex !important; order: 3; justify-content: space-between; }
    .dm-grid tbody td:nth-child(5)::before { content: "Weight"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .dm-grid tbody td:nth-child(7) { display: flex !important; order: 4; justify-content: space-between; font-size: 15px; font-weight: 700; color: #16325c; }
    .dm-grid tbody td:nth-child(7)::before { content: "Rate / ct"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; align-self: center; }
    .dm-grid tbody td:nth-child(8) { display: block !important; position: absolute; top: 12px; right: 12px; order: 0; width: auto; }
    .dm-grid tbody td.dm-actions { display: flex !important; order: 5; gap: 8px; margin-top: 6px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .dm-grid tbody td.dm-actions a { width: auto !important; min-height: 38px; padding: 6px 16px !important; border-radius: 10px !important; display: inline-flex; align-items: center; }

    /* ---- 18d. Items.aspx Diamond tab (.im-grid.dia-grid, 10 col w/ caret) --- */
    .im-grid.dia-grid, .im-grid.dia-grid tbody, .im-grid.dia-grid tr { display: block !important; width: 100% !important; min-width: 0 !important; }
    .im-grid.dia-grid thead { display: none !important; }
    .im-grid.dia-grid tbody tr { position: relative; display: flex !important; flex-direction: column; gap: 5px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important; white-space: normal !important; }
    .im-grid.dia-grid tbody td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; font-size: 13px; white-space: normal !important; }
    .im-grid.dia-grid tbody td:nth-child(2) { display: block !important; order: 1; }
    .im-grid.dia-grid tbody td:nth-child(2) .im-item { display: flex !important; align-items: center; gap: 10px; }
    .im-grid.dia-grid tbody td:nth-child(3), .im-grid.dia-grid tbody td:nth-child(5) { display: block !important; width: auto !important; order: 2; }
    .im-grid.dia-grid tbody td:nth-child(6) { display: flex !important; order: 3; justify-content: space-between; }
    .im-grid.dia-grid tbody td:nth-child(6)::before { content: "Metal Wt"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .im-grid.dia-grid tbody td:nth-child(8) { display: flex !important; order: 4; justify-content: space-between; font-size: 15px; font-weight: 700; color: #16325c; }
    .im-grid.dia-grid tbody td:nth-child(8)::before { content: "Rate / ct"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; align-self: center; }
    .im-grid.dia-grid tbody td:nth-child(9) { display: block !important; position: absolute; top: 12px; right: 12px; order: 0; width: auto; }
    .im-grid.dia-grid tbody td.im-actions { display: flex !important; order: 5; gap: 8px; margin-top: 6px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .im-grid.dia-grid tbody td.im-actions a { width: auto !important; min-height: 38px; padding: 6px 16px !important; border-radius: 10px !important; display: inline-flex; align-items: center; }

    /* ---- 18e. OtherItemMaster (.om-tbl, 11 col) -> cards + full-screen edit - */
    .om-tbl, .om-tbl tbody, .om-tbl tr { display: block !important; width: 100% !important; min-width: 0 !important; }
    .om-tbl thead { display: none !important; }
    .om-tbl tbody tr { position: relative; display: flex !important; flex-direction: column; gap: 4px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important; white-space: normal !important; }
    .om-tbl tbody td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; font-size: 13px; white-space: normal !important; }
    .om-tbl tbody td:nth-child(2) { display: block !important; order: 1; font-size: 15px; font-weight: 800; color: #16325c; }
    .om-tbl tbody td.om-code, .om-tbl tbody td:nth-child(1) { display: block !important; order: 2; color: #8a97a8; font-size: 11px; }
    .om-tbl tbody td:nth-child(8) { display: flex !important; order: 3; justify-content: space-between; font-size: 16px; font-weight: 800; color: #16325c; margin-top: 2px; }
    .om-tbl tbody td:nth-child(8)::before { content: "Sale Rate"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; align-self: center; }
    .om-tbl tbody td:nth-child(6) { display: flex !important; order: 4; justify-content: space-between; color: #c0392b; }
    .om-tbl tbody td:nth-child(6)::before { content: "Purchase"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .om-tbl tbody td:nth-child(10) { display: flex !important; order: 5; justify-content: space-between; font-weight: 700; }
    .om-tbl tbody td:nth-child(10)::before { content: "Stock"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .om-tbl tbody td:nth-child(5) { display: flex !important; order: 6; justify-content: space-between; color: #6a7686; font-size: 12px; }
    .om-tbl tbody td:nth-child(5)::before { content: "GST %"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .om-tbl tbody td:last-child { display: flex !important; order: 7; gap: 8px; margin-top: 6px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .om-tbl tbody td:last-child .btn { flex: 1 1 auto; min-height: 38px !important; border-radius: 10px !important; }
    /* edit modal: already position:fixed inset:0 - make the inner card phone-sized */
    #edModal > div, #oEdModal > div { max-width: 94vw !important; width: 94vw !important; margin: 0 auto !important; }

    /* =========================================================================
       v2.36.369 - PHASE 2 PURCHASE FAMILY (phone only; desktop + print untouched).
       PurchaseEntry (items grid already cards via shared #itemsBody; its OLD grid
       is 11-col = shifted from SalesEntry's 12-col, re-mapped here) + the pe GST
       toggle; OtherPurchase .op-grid cards + summary. ASCII only.
       ========================================================================= */

    /* ---- 19a. PurchaseEntry GST toggle (.pe-gst-toggle) -------------------- */
    .se-header-row > div:has(.pe-gst-toggle) { grid-column: 1 / -1 !important; }
    .pe-gst-toggle { display: flex !important; width: 100% !important; }
    .pe-gst-toggle .pe-gst-btn { flex: 1 1 0 !important; min-height: 44px; border-radius: 10px; }

    /* ---- 19b. PurchaseEntry OLD grid (#oldItemsBody, 11 col, NO Stockist):
           re-map ONLY when the grid has no 12th cell (SalesEntry has 12 -> keeps
           its own map). 1# 2Desc 3Group 4GrWt 5StWt 6NetWt 7Purity 8Fine 9Rate 10Amt 11act */
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(4) { display: flex !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(4)::before { content: "Gross Wt" !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(5)::before { content: "Melting Wt." !important; }   /* 2026-10-15 */
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(6)::before { content: "Net Wt" !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(7)::before { content: "Purity %" !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(8) { display: none !important; }   /* Fine (derived) */
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(9) { display: flex !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(9)::before { content: "Rate" !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(10) { grid-column: 1 / -1 !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(10)::before { content: "Amount" !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(10) input {
        background: #fff6e8 !important; border-color: #f3dcae !important; color: #7a4f00 !important; font-size: 18px !important; font-weight: 800 !important; min-height: 44px; }
    /* col 11 is the delete action here (not Amount) -> pin top-right, undo the amber */
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(11) {
        position: absolute !important; top: 8px; right: 8px; grid-column: auto !important; width: auto !important; padding: 0 !important; }
    #oldItemsBody:not(:has(td:nth-child(12))) > tr > td:nth-child(11)::before { content: "" !important; }

    /* ---- 19c. OtherPurchase items grid (.op-grid / #opBody, 11 col) -> cards --
           (.op-card .op-grid beats the 960px side-scroll min-width at L1314 - same
           specificity, declared later.) */
    .op-card .op-grid, .op-grid { min-width: 0 !important; }
    .op-grid, .op-grid tbody, .op-grid tr { display: block !important; width: 100% !important; }
    .op-grid > thead, .op-grid > colgroup { display: none !important; }
    #opBody > tr {
        position: relative; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 10px;
        border: 1px solid #e7ecf2 !important; border-radius: 14px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 12px !important; margin: 0 0 10px !important;
    }
    #opBody > tr > td { display: flex !important; flex-direction: column; gap: 3px; padding: 0 !important; border: 0 !important; min-width: 0; white-space: normal !important; text-align: left !important; }
    #opBody > tr > td::before { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a0b0; }
    #opBody > tr > td input, #opBody > tr > td .ta-input { width: 100% !important; box-sizing: border-box; min-height: 44px !important; font-size: 16px !important; border: 1px solid #d7dde6 !important; border-radius: 10px !important; padding: 9px 11px !important; }
    #opBody > tr > td:nth-child(1) { grid-column: 1 / -1; }
    #opBody > tr > td:nth-child(1)::before { content: "Item"; }
    #opBody > tr > td:nth-child(2)::before { content: "Sub Group"; }
    #opBody > tr > td:nth-child(3)::before { content: "Stockist"; }
    #opBody > tr > td:nth-child(4)::before { content: "Qty"; }
    #opBody > tr > td:nth-child(5)::before { content: "Purch Rate"; }
    #opBody > tr > td:nth-child(6)::before { content: "Markup %"; }
    #opBody > tr > td:nth-child(7) { display: none !important; }   /* HSN */
    #opBody > tr > td:nth-child(8)::before { content: "GST %"; }
    #opBody > tr > td:nth-child(9)::before { content: "Sale Rate"; }
    #opBody > tr > td:nth-child(10) { grid-column: 1 / -1; }
    #opBody > tr > td:nth-child(10)::before { content: "Amount"; }
    #opBody > tr > td:nth-child(10) { font-size: 18px; font-weight: 800; color: #15663f; }
    #opBody > tr > td:last-child { position: absolute !important; top: 8px; right: 8px; padding: 0 !important; }
    #opBody > tr > td:last-child::before { content: "" !important; }
    #opBody .op-rm { display: inline-flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #fdecec !important; color: #c0392b !important; border: 0 !important; font-size: 18px !important; }
    /* op summary/payment cards + savebar */
    .op-card-sum, .op-card-pay { border-radius: 14px !important; }
    .op-totals { width: 100% !important; }
    .op-totals tr { display: flex !important; justify-content: space-between; }
    .op-totals td { border: 0 !important; padding: 6px 0 !important; }
    .op-totals tr.grand td { font-size: 18px !important; font-weight: 800 !important; color: #16325c !important; }
    .op-pay-row3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    body:has(#opBody) .brij-savebar { border-radius: 16px 16px 0 0 !important; box-shadow: 0 -4px 16px rgba(16,32,64,.12) !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; }
    body:has(#opBody) .brij-savebar .btn { flex: 1 1 0 !important; min-height: 48px !important; border-radius: 12px !important; font-weight: 700 !important; }

    /* =========================================================================
       v2.36.369 - PHASE 2 VOUCHERS CLUSTER (phone only).
       DayBook (.db-grid) + AllTransactions (.at-tbl) -> cards. VoucherEntry +
       CashBook already reflow (form / shared report framework). ASCII only.
       ========================================================================= */

    /* ---- 20a. DayBook (.db-grid GridView, 8 col, no row actions) -> cards --- */
    /* 2026-10-15 - scoped to the DayBook card (.db-grid-card): DiamondBillEntry's item tables are also class db-grid and */
    /* took these td order / position rules (the Lab % cell went last, the Item cell went absolute). */
    .db-grid-card .db-grid { min-width: 0 !important; }
    .db-grid-card .db-grid, .db-grid-card .db-grid tbody, .db-grid-card .db-grid tr { display: block !important; width: 100% !important; }
    .db-grid-card .db-grid tr:has(th) { display: none !important; }
    .db-grid-card .db-grid tr:has(td) {
        position: relative; display: flex !important; flex-direction: column; gap: 4px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 0 0 10px !important; white-space: normal !important; }
    .db-grid-card .db-grid td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; font-size: 13px; white-space: normal !important; }
    .db-grid-card .db-grid td:nth-child(3) { display: block !important; order: 1; }
    .db-grid-card .db-grid td:nth-child(3) .db-party { display: flex !important; align-items: center; gap: 10px; }
    .db-grid-card .db-grid td:nth-child(1) { display: block !important; order: 2; color: #6a7686; font-size: 12px; }
    .db-grid-card .db-grid td:nth-child(2) { display: block !important; position: absolute; top: 12px; right: 12px; order: 0; width: auto; }
    .db-grid-card .db-grid td:nth-child(7) { display: flex !important; order: 3; justify-content: space-between; align-items: baseline; font-size: 17px; font-weight: 800; color: #16325c; margin-top: 4px; }
    .db-grid-card .db-grid td:nth-child(7)::before { content: "Total"; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #94a0b0; align-self: center; }
    .db-grid-card .db-grid td:nth-child(5) { display: flex !important; order: 4; justify-content: space-between; color: #42526b; font-size: 12.5px; }
    .db-grid-card .db-grid td:nth-child(5)::before { content: "Amount"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .db-grid-card .db-grid td:nth-child(6) { display: flex !important; order: 5; justify-content: space-between; color: #7d3ca8; font-size: 12.5px; }
    .db-grid-card .db-grid td:nth-child(6)::before { content: "Tax"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .db-grid-card .db-grid td:nth-child(8) { display: flex !important; order: 6; gap: 6px; color: #8a97a8; font-size: 11.5px; margin-top: 4px; padding-top: 8px !important; border-top: 1px solid #eef1f5 !important; }

    /* ---- 20b. AllTransactions (.at-tbl, 9 col w/ leading checkbox) -> cards -- */
    .at-tbl, .at-tbl tbody, .at-tbl tr { display: block !important; width: 100% !important; }
    .at-tbl thead { display: none !important; }
    .at-tbl tbody tr {
        position: relative; display: flex !important; flex-direction: column; gap: 4px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px 13px 44px !important; margin: 0 0 10px !important; white-space: normal !important; }
    .at-tbl tbody td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; font-size: 13px; white-space: normal !important; }
    .at-tbl tbody td:nth-child(1) { display: block !important; position: absolute; top: 14px; left: 12px; order: 0; width: auto; }   /* checkbox */
    .at-tbl tbody td:nth-child(5) { display: block !important; order: 1; font-weight: 800; color: #16325c; font-size: 15px; }       /* Party */
    .at-tbl tbody td:nth-child(3) { display: inline-block !important; width: auto !important; order: 2; color: #6a7686; font-size: 12px; }  /* Voucher code */
    .at-tbl tbody td:nth-child(4) { display: inline-block !important; width: auto !important; order: 3; color: #8a97a8; font-size: 11.5px; margin-left: 8px; }  /* Date */
    .at-tbl tbody td:nth-child(8) { display: block !important; position: absolute; top: 12px; right: 12px; order: 0; width: auto; }  /* Status badge */
    .at-tbl tbody td:nth-child(2) { display: inline-block !important; width: auto !important; order: 1; margin-right: 8px; }          /* Type badge (inline before party? keep small) */
    .at-tbl tbody td:nth-child(6) { display: flex !important; order: 4; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 800; margin-top: 4px; }  /* Amount */
    .at-tbl tbody td:nth-child(6)::before { content: "Amount"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; align-self: center; }
    .at-tbl tbody td:nth-child(7) { display: block !important; order: 5; color: #8a97a8; font-size: 11.5px; }                         /* User */
    .at-tbl tbody td.ctr:last-child { display: flex !important; order: 6; gap: 8px; margin-top: 6px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .at-tbl tbody td.ctr:last-child .actions { display: flex !important; gap: 8px; width: 100%; }
    .at-tbl tbody td.ctr:last-child .actions a, .at-tbl tbody td.ctr:last-child .actions button {
        flex: 1 1 auto; min-height: 40px !important; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center; }

    /* =========================================================================
       v2.36.369 - PHASE 2 FOLLOW-UP: Items "Other" tab (.im-grid plain, lot-
       expanded repeater) -> native cards. The FIRST rate-lot row of an item
       carries the action buttons (OIsFirst) -> it becomes the item CARD; the
       extra rate-lot rows (empty item cells, no action btn) become compact
       attached lot-strips under it. `:has(.im-actions .btn)` is the reliable
       first-vs-extra distinguisher. 12 col: Item SubGrp Stockist Unit HSN GST%
       Purchase Sale Patt Qty Stock act. ASCII only.
       ========================================================================= */
    .im-grid:not(.im-grid-fixed):not(.dia-grid) { min-width: 0 !important; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid),
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tbody,
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr { display: block !important; width: 100% !important; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) thead { display: none !important; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) td { display: none !important; padding: 0 !important; border: 0 !important; width: 100%; text-align: left !important; font-size: 13px; white-space: normal !important; }

    /* FIRST-lot row -> item header card */
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) {
        position: relative; display: flex !important; flex-direction: column; gap: 4px;
        border: 1px solid #e7ecf2 !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 13px 14px !important; margin: 12px 0 0 !important; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(1) { display: block !important; order: 1; font-weight: 800; color: #16325c; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(1) .im-item { display: flex !important; align-items: center; gap: 10px; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(2),
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(3),
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(5) { display: inline-block !important; width: auto !important; order: 2; margin-right: 6px; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(8) { display: flex !important; order: 3; justify-content: space-between; font-size: 15px; font-weight: 700; color: #15663f; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(8)::before { content: "Sale Rate"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; align-self: center; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(7) { display: flex !important; order: 4; justify-content: space-between; color: #c0392b; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(7)::before { content: "Purchase"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(11) { display: flex !important; order: 5; justify-content: space-between; font-weight: 800; color: #16325c; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(11)::before { content: "Total Stock"; color: #94a0b0; font-weight: 700; font-size: 10px; text-transform: uppercase; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(9) { display: inline-block !important; width: auto !important; order: 6; color: #6a7686; font-size: 12px; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(9)::before { content: "Lot "; color: #94a0b0; font-weight: 700; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(10) { display: inline-block !important; width: auto !important; order: 6; color: #6a7686; font-size: 12px; margin-left: 10px; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td:nth-child(10)::before { content: "Qty "; color: #94a0b0; font-weight: 700; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td.im-actions { display: flex !important; order: 7; gap: 8px; margin-top: 6px; padding-top: 10px !important; border-top: 1px solid #eef1f5 !important; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:has(.im-actions .btn) > td.im-actions .btn { min-height: 38px; border-radius: 10px !important; padding: 6px 16px !important; display: inline-flex; align-items: center; }

    /* EXTRA rate-lot rows -> compact attached strip (indented under the card) */
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) {
        display: flex !important; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
        border: 1px solid #eef1f5 !important; border-left: 3px solid #d7e0ea !important; border-radius: 0 10px 10px 0 !important;
        background: #f8fafc !important; padding: 8px 12px !important; margin: 3px 0 0 16px !important; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(7),
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(8),
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(9),
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(10) { display: inline-block !important; width: auto !important; font-size: 12px; color: #42526b; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(9)::before { content: "Lot "; color: #94a0b0; font-weight: 700; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(10)::before { content: "Qty "; color: #94a0b0; font-weight: 700; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(8)::before { content: "@ Sale "; color: #94a0b0; font-weight: 700; }
    .im-grid:not(.im-grid-fixed):not(.dia-grid) tr:not(:has(.im-actions .btn)) > td:nth-child(7)::before { content: "@ Purch "; color: #94a0b0; font-weight: 700; }

    /* =========================================================================
       v2.36.369 - WAVE 3: GENERIC auto-card for the long tail of read-only LIST
       tables. brij-mobile.js tags each eligible table `.brij-autocard` and copies
       its <thead> labels onto every body cell's data-label; here each row becomes
       a label:value stacked card. One rule set covers dozens of pages (CashList,
       VoucherList, Aging, AgentSalesReport, JobWork, TrialBalance, EditRequests,
       StaffMaster, ...). Dedicated-card grids + .rep-* reports + editable grids are
       excluded by the JS. ASCII only.
       ========================================================================= */
    .brij-autocard { min-width: 0 !important; }
    .brij-autocard, .brij-autocard > tbody, .brij-autocard > tr, .brij-autocard > tbody > tr { display: block !important; width: 100% !important; }
    .brij-autocard > thead, .brij-autocard > tfoot { display: none !important; }
    .brij-autocard tr:has(th) { display: none !important; }                 /* GridView in-body header row */
    .brij-autocard > tbody > tr, .brij-autocard > tr {
        border: 1px solid #e7ecf2 !important; border-radius: 14px !important; background: #fff !important;
        box-shadow: 0 1px 3px rgba(16,32,64,.06) !important; padding: 8px 13px !important; margin: 0 0 10px !important;
    }
    .brij-autocard td {
        display: flex !important; justify-content: space-between; gap: 12px; align-items: baseline;
        padding: 6px 0 !important; border: 0 !important; border-bottom: 1px solid #f3f5f8 !important;
        text-align: right !important; white-space: normal !important; font-size: 13px; width: auto !important; height: auto !important;
    }
    .brij-autocard td:last-child { border-bottom: 0 !important; }
    .brij-autocard td::before {
        content: attr(data-label); flex: 0 0 42%; text-align: left;
        color: #8a97a8; font-weight: 700; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; white-space: normal;
    }
    /* first cell reads as the card title (no label) */
    .brij-autocard td:first-child { font-weight: 800; color: #16325c; font-size: 14px; padding-top: 2px; }
    .brij-autocard td:first-child::before { display: none !important; }
    /* cells whose header was blank (checkbox / action columns): no label, left-aligned */
    .brij-autocard td:not([data-label]) { justify-content: flex-start; text-align: left !important; flex-wrap: wrap; gap: 6px; }
    .brij-autocard td:not([data-label])::before { content: "" !important; display: none !important; }
    .brij-autocard td:empty { display: none !important; }
    .brij-autocard td .btn { min-height: 36px; }

    /* ---- 23. native BACK control in the top app-bar (injected by brij-mobile.js) - */
    .brij-navbar .brij-back {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 38px; height: 38px; flex: 0 0 auto; margin-right: 8px; padding: 0;
        border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff;
    }
    .brij-navbar .brij-back .bi { font-size: 20px; line-height: 1; }
    .brij-navbar .brij-back:active { background: rgba(255,255,255,.3); }
    /* with a back button sharing the row, keep the brand from overflowing */
    .brij-navbar:has(.brij-back) .navbar-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ---- 24. NO sideways drift + barcode scan bar on ONE line --------------- */
    /* clip any stray horizontal overflow so the page never shifts left-right.
       overflow-x:clip (modern) does NOT create a scroll container, so sticky
       headers/savebars keep working; `hidden` is the old-engine fallback. */
    html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

    /* barcode scan card: upc icon + item-code input + camera button, ONE row */
    .scan-bar, .scan-bar.scan-inline {
        display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; width: 100%;
    }
    .scan-bar input, .scan-bar.scan-inline input {
        flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important;
        height: 44px !important; font-size: 16px !important;   /* 16px = no iOS focus-zoom */
    }
    .scan-bar > .bi, .scan-bar.scan-inline > .bi { flex: 0 0 auto; }
    .bcam-inline-btn {
        flex: 0 0 auto !important; width: 44px !important; height: 44px !important; min-height: 44px !important;
        display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; padding: 0 !important;
    }

    /* belt-and-suspenders: focusable fields in the mobile layers never < 16px
       (iPhone auto-zooms a focused input whose font-size is below 16px) */
    .bl-filter2 .form-control, .bl-filter2 .form-select,
    .sl-filter-row .form-control, .sl-filter-row .form-select,
    .im-toolbar input.form-control, .im-toolbar select.form-select,
    .pm-toolbar input[type=text], .dm-toolbar input[type=text], .om-bar input[type=text] { font-size: 16px !important; }
}