.page-header -> .left_side_head p.heading_lead (title) .right_saerch_side (search + actions) #custom-search-input .btn_header #*_search_form.card.collapse -> form > .form-row > .col-md-* (filters) .table-responsive.table_height > table.cat-table (list) (footer) Styling those blocks once here covers ~250 list/report screens with no per-component edits and no duplicated logic. Bootstrap already stacks `col-md-*` below 768px, so the grid is deliberately NOT overridden — only the floats, fixed heights and touch targets that actually break. ========================================================================== */ /* ---- page title ---- */ /* style.css hides the page title outright below 992px (`p.heading_lead { display: none !important }`), which leaves mobile users with no idea what screen they are on. Bring it back as a proper title. */ p.heading_lead { display: block !important; margin: 0 0 2px !important; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--m-ink); white-space: normal; overflow-wrap: break-word; } p.heading_lead i { margin-right: 6px; color: var(--m-brand); } /* Some titles carry a run of context after the screen name (Item Ledger appends the item, its MRP, unit, description and godown). Inside a bold 1rem heading that reads as one long blob and pushes the data off the first screen. Dropped to its own normal-weight line instead. */ p.heading_lead .m-title-meta { display: inline; font-size: 0.72rem !important; font-weight: 400; color: var(--m-ink-soft); } p.heading_lead .m-title-meta:first-of-type { display: block; margin-top: 2px; } .page-header { margin: 0 0 10px; } .page-header .container-fluid, .page-header .row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .page-header .row > [class*="col-md-"] { flex: 1 1 100%; max-width: 100%; padding-left: 0; padding-right: 0; } /* ---- search + action bar ---- */ .right_saerch_side { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-start; width: 100%; margin-top: 8px; } .right_saerch_side > * { margin-right: 0 !important; } .right_saerch_side .mr-21 { flex: 1 1 100%; margin-right: 0 !important; } #custom-search-input { top: 0; width: 100%; margin-right: 0; border-bottom: 0; } #custom-search-input .input-group { width: 100%; max-width: 100%; flex-wrap: nowrap; } #custom-search-input .form-control { min-height: 42px; font-size: 16px; /* >=16px stops iOS Safari zoom-on-focus */ border: 1px solid var(--m-line); border-right: 0; border-radius: 10px 0 0 10px; } #custom-search-input .btn, #custom-search-input .input-group-btn11 { min-width: 46px; min-height: 42px; border-radius: 0 10px 10px 0 !important; } /* Some forms ship BOTH a `.btn_header.desktop_links` and a `.btn_header.mobile_links` variant, switched by styleMobile.css at 960px. `display: flex` below would outrank `.desktop_links { display: none }` (equal specificity, this file loads later) and resurrect the desktop set on top of the mobile one — so the switch is restated here, at this layer's own 991.98px breakpoint. That also closes the 961-991px gap where styleMobile had not yet switched over. */ .desktop_links { display: none !important; } .mobile_links { display: flex !important; } /* The action cluster floats up by -15px on desktop, which overlaps the title once the columns stack. Make it an ordinary wrapping flex row. */ .btn_header, .btn_header1 { position: static; top: 0; float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; } .btn_header > .btn, .btn_header > a.btn, .btn_header > button { flex: 0 1 auto; min-height: var(--m-tap); display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 14px; font-size: 0.8rem !important; border-radius: 10px !important; } /* Icon actions in the rail are written three different ways across the app: `` (print / pdf / excel on most screens), `` and `` (Item Master's export-for-import). They must all end up the same size and on the same row, or two neighbouring exports look like two unrelated controls. */ .btn_header > a:not(.btn) { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: var(--m-tap); min-height: var(--m-tap); margin: 0 !important; border-radius: 10px; } /* an icon-only action should not carry a text button's side padding */ .btn_header > button.btn-link, .btn_header > a.btn-link { min-width: var(--m-tap); padding: 0 !important; } .btn_header img { width: 26px; } /* ---- filter / search cards ---- */ .card.collapse.show, .card.collapsing, [id$="_search_form"] { border-radius: 12px; } [id$="_search_form"] .form-row, [id$="_search_form"] .form.row { margin-left: 0; margin-right: 0; } /* `.col` / `.col-sm-*` stay side-by-side at phone widths (only `col-md-*` stacks natively), which squeezes filter fields to a few characters. */ /* Bootstrap's plain `.col` is `flex: 1 0 0%` - it never stacks, at any width. So a filter row whose fields are `col-md-*` (which DO stack) and whose Search/Reset buttons sit in a bare `.col` ends up with the buttons squeezed into whatever sliver is left beside a full-width field. On All ITC that is exactly why Search was not visible. This was keyed on `[id$="_search_form"]`, and 13 filter panels do not use that id - `gstr_anx_one_form`, `daily_activity_search`, `userSearchForm`, `demo` and others. Keying on `.card` instead covers every filter panel, which is the shape they all share, without needing to know its id. */ [id$="_search_form"] .form-row > .col, [id$="_search_form"] .form.row > .col, .card > div > form .form-row > .col, .card > div > form .form.row > .col, .card > form .form-row > .col, .card > form .form.row > .col, .modal .form-row > .col, .modal .form.row > .col { flex: 1 1 100% !important; max-width: 100% !important; } /* the buttons in that column read as actions, not as a squeezed field */ .card > div > form .form-row > .col > .btn, .card > div > form .form.row > .col > .btn, .card > form .form-row > .col > .btn, .card > form .form.row > .col > .btn, [id$="_search_form"] .form-row > .col > .btn, [id$="_search_form"] .form.row > .col > .btn { min-height: var(--m-tap); padding: 0 18px; border-radius: 10px; } [id$="_search_form"] .form-row > [class*="col-"], [id$="_search_form"] .form.row > [class*="col-"] { padding-left: 0; padding-right: 0; } [id$="_search_form"] .form-group { margin-bottom: 10px; } /* Trailing button column of a filter form. */ [id$="_search_form"] .col.pt-3, [id$="_search_form"] .col-md-3.pt-3 { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px !important; } [id$="_search_form"] .btn { flex: 1 1 0; min-width: 96px; min-height: var(--m-tap); margin: 0 !important; border-radius: 10px !important; } /* ---- form controls (global touch + no-zoom baseline) ---- */ .form-control, .form-control-sm, select.form-control, textarea.form-control { min-height: 42px; font-size: 16px; } textarea.form-control { min-height: 76px; } /* Field labels only. Radio/checkbox labels are the control's visible text, so they keep full contrast and their own sizing. */ label:not(.custom-control-label):not(.form-check-label):not(.btn) { font-size: 0.78rem; font-weight: 600; margin-bottom: 3px; color: var(--m-ink-soft); } .custom-control-label, .form-check-label { min-height: 24px; display: inline-flex; align-items: center; font-size: 0.85rem; } .ng-select .ng-select-container, .ng-select.ng-select-single .ng-select-container { min-height: 42px !important; font-size: 16px; } /* ng-select renders its dropdown in place; keep it inside the screen. */ .ng-dropdown-panel { max-width: calc(100vw - 24px); } .ng-dropdown-panel .ng-option { min-height: var(--m-tap); display: flex; align-items: center; font-size: 0.88rem; } /* select2 renders TWO elements with class `.select2-container`: 1. the inline trigger, next to the original