/* ============================================================
   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 .pl-quick { 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; }

    /* ---- 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; }

    /* ---- ResetTransactions.aspx (rs) ---- */
    /* The RESET box is already full width (section 1 kills its max-width:240px);
       the two ms-2 buttons still landed as a ragged indented stack.
       !important: .ms-2 is a Bootstrap utility (margin-left:.5rem !important). */
    .rs-step { padding: 12px 14px; }
    .rs-confirm .btn { display: block; width: 100%; margin: 8px 0 0 !important; }

    /* ---- 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; }
}