/* ============================================================== 📱 MASTER NATIVE APP OVERRIDES (ALL CITIZEN & REPORT FORMS) ============================================================== */ @media (max-width: 768px) { /* --- 1. STRICT WEBVIEW LOCKS --- */ * { box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; } html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; background-color: #F2F4F8 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } .container-fluid, .col-12, [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; width: 100% !important; max-width: 100% !important; } .card, .card .card { background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } .card-body, .card .card .card-body { padding: 0 !important; margin: 0 !important; } /* --- 2. ULTRA-COMPACT STACKED INPUTS --- */ .form-group { margin-top: 2px !important; margin-bottom: 8px !important; width: 100% !important; padding: 0 !important; } .form-group label, .form-group span[id*="lbl"]:not(.form-control) { display: block !important; position: static !important; background-color: transparent !important; padding: 0 !important; font-size: 0.75rem !important; color: #475569 !important; font-weight: 600 !important; margin-bottom: 2px !important; letter-spacing: 0.2px; white-space: normal !important; } .form-control { width: 100% !important; height: 42px !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; background-color: #FFFFFF !important; padding: 8px 12px !important; font-size: 0.95rem !important; color: #1E293B !important; box-shadow: none !important; } .form-control:focus { border: 2px solid #2B3990 !important; outline: none !important; } span.form-control, label.form-control { display: flex !important; align-items: center !important; min-height: 42px !important; height: auto !important; background-color: #F8FAFC !important; padding: 8px 12px !important; font-size: 0.95rem !important; font-weight: 700 !important; color: #2B3990 !important; word-break: break-word !important; border: 1px solid #E2E8F0 !important; } .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: 42px !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; background-color: #FFFFFF !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding-left: 12px !important; color: #1E293B !important; font-size: 0.95rem !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; right: 8px !important; } .modal-content { border-radius: 12px !important; } .alert { border-radius: 8px !important; padding: 10px !important; font-size: 0.85rem !important; margin-bottom: 10px !important; } /* --- 3. RADIO BUTTONS & MARRIAGE SLOT TIME FIX --- */ .radiobuttonlist, .RBL { border: none !important; background: transparent !important; height: auto !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; } .radiobuttonlist td, .RBL td { display: inline-flex; align-items: center; background: #fff; border: 1px solid #CBD5E1; border-radius: 6px; padding: 8px 12px; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; width: auto !important; } .radiobuttoncontainer .radiobuttonlist { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; } .radiobuttonlist span { display: inline-flex !important; align-items: center !important; background: #fff !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; padding: 10px 12px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .radiobuttonlist span input[type="radio"] { margin-right: 12px !important; width: 18px; height: 18px; } .radiobuttonlist span label { font-size: 0.95rem !important; font-weight: 600 !important; color: #1E293B !important; margin: 0 !important; } /* --- 4. PERFECT RIBBON BOX (SECTION HEADERS) --- */ .ribbon-box { display: flex !important; flex-direction: column !important; width: 100% !important; margin-top: 20px !important; margin-bottom: 15px !important; border-bottom: 2px solid #E2E8F0 !important; padding-bottom: 12px !important; clear: both !important; } .ribbon-box .ribbon { float: none !important; display: inline-block !important; background: #E0E7FF !important; color: #2B3990 !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 5px !important; width: fit-content !important; } .ribbon-box h5, .ribbon-box a.btn-glass-primary, .ribbon-box label, .ribbon-box span { float: none !important; display: block !important; font-size: 0.75rem !important; color: #64748B !important; margin: 5px 0 0 0 !important; line-height: 1.5 !important; font-weight: 600 !important; white-space: normal !important; } /* Do not globally hide .ribbon-content: it may contain active form fields. */ /* --- 5. COMPACT APP BUTTONS & TABS --- */ .page-title-box { text-align: center !important; margin: 5px 0 !important; } .page-title-right, .form-inline { display: block !important; width: 100% !important; float: none !important; } .btn-primary, .btn-warning, .btn-success { background-color: #2B3990 !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; padding: 12px !important; font-size: 1rem !important; font-weight: 600 !important; margin-bottom: 8px !important; width: 100%; display: block; text-align: center; } .btn-danger { background-color: #EF4444 !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; padding: 12px !important; font-size: 1rem !important; font-weight: 600 !important; margin-bottom: 8px !important; width: 100%; display: block; text-align: center; } .btn-dark, .btn-light { background-color: #E2E8F0 !important; color: #475569 !important; border: none !important; border-radius: 8px !important; padding: 12px !important; font-weight: 600 !important; margin-bottom: 8px !important; width: 100%; display: block; text-align: center; } .btn-info, .btn-outline-primary { background: #E0E7FF !important; color: #312E81 !important; border: none !important; padding: 10px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 0.9rem !important; margin-bottom: 8px !important; width: 100%; display: block; text-align: center; } .nav-pills { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; border-bottom: 1px solid #CBD5E1; margin-bottom: 15px !important; } .nav-pills .nav-item { flex: 0 0 auto; margin-right: 5px; } .nav-pills .nav-link { background: #F1F5F9; border-radius: 8px !important; padding: 10px 15px !important; font-size: 0.85rem; font-weight: 600; color: #475569; border: 1px solid #CBD5E1; } .nav-pills .nav-link.active { background: #2B3990 !important; color: #fff !important; border-color: #2B3990 !important; } /* --- 6. DATATABLES OVERRIDES --- */ .dataTables_wrapper, .dataTables_wrapper .row { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; } .dataTables_wrapper [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; display: block !important; } .dataTables_filter { margin-bottom: 12px !important; text-align: left !important; width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .dataTables_filter label { width: 100% !important; display: block !important; color: #475569 !important; font-weight: 600 !important; font-size: 0.8rem !important; margin-bottom: 4px !important; visibility: visible !important; } .dataTables_filter input { width: 100% !important; display: block !important; margin: 0 !important; padding: 8px 12px !important; border-radius: 8px !important; border: 1px solid #CBD5E1 !important; height: 42px !important; background: #fff !important; visibility: visible !important; } .dataTables_length, .dataTables_info, .dataTables_paginate { display: none !important; } /* Generic repeater/GridView layout is applied by mobile-table-layout.js. */ /* --- 8. VALID DYNAMIC LABELS FOR SPECIFIC GRIDS --- */ table[id$="gvHeadList"] td:nth-of-type(6) > span { color: #2B3990 !important; font-size: 1rem !important; font-weight: 800 !important; } div[id$="divMobileDetails"] table td:nth-of-type(1) { display: flex !important; } div[id$="divRegistration"] table td:nth-of-type(2) { display: flex !important; flex-direction: column; gap: 5px; } div[id$="divDataList"] table td:nth-of-type(2) { display: flex !important; flex-direction: column; gap: 5px; } div[id$="divDataList"] table td:nth-of-type(9) > span { color: #2B3990 !important; font-size: 1rem !important; font-weight: 800 !important; } div[id$="divDetails"] table:has(input[value*="Upload"]) td:nth-of-type(2) { display: flex !important; flex-direction: column; gap: 5px; } table:has(input[type="file"]) td:nth-of-type(1) { display: flex !important; } table:has(input[type="file"]) td input[type="file"] { width: 100% !important; text-align: right; } /* --- 9. 🔥 REPORTS, ANALYTICS & WORK ORDER GRIDS (Horizontal Scroll Style) 🔥 --- */ /* Explicitly formats the 3 new Work Order grids & all UCRPT reports to natively scroll side-by-side */ .table-responsive, [id*="scroll-horizontal"], [id*="scroll-vertical"], .bill-details-scroll, .deduction-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; display: block; } table.table th, .bill-details-grid th, .deduction-grid th, table[id*="column-search-datatable-four"] th { background: #2B3990 !important; color: #ffffff !important; padding: 10px !important; font-size: 0.85rem !important; text-align: center !important; white-space: nowrap !important; border: 1px solid #1E293B !important; } table.table td, .bill-details-grid td, .deduction-grid td, table[id*="column-search-datatable-four"] td { padding: 8px 10px !important; border: 1px solid #E2E8F0 !important; font-size: 0.85rem !important; white-space: nowrap !important; text-align: center !important; vertical-align: middle !important; } table.table td a, .bill-details-grid td a, .deduction-grid td a, table[id*="column-search-datatable-four"] td a { font-weight: 700 !important; color: #2B3990 !important; text-decoration: none !important; } /* --- 10. DATE COLOR LEGEND (CALENDAR STATUS) FIX --- */ div[id$="divDateColor"] table.table, div[id$="divDateColor"] table.table tbody, div[id$="divDateColor"] table.table tr, div[id$="divDateColor"] table.table td { display: block !important; width: 100% !important; border: none !important; white-space: normal !important; } div[id$="divDateColor"] table.table tr { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 10px 0 !important; } div[id$="divDateColor"] table.table td { border-radius: 8px !important; padding: 10px !important; font-size: 0.85rem !important; text-align: center !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; font-weight: 700 !important; } /* ============================================================== 11. CORRECTED HORIZONTAL REPORT / REPEATER TABLE SYSTEM -------------------------------------------------------------- These tables MUST remain real tables on mobile. Do not apply the card/label conversion to them. Covers: - UCWOBillStatus - UCAddWorkorder report/detail grids - UCWOBillStatusSub - bill-details-grid / deduction-grid - scroll-horizontal-datatable* - column-search-datatable-four ============================================================== */ /* A. Explicitly exclude report tables from the card conversion. */ table.bill-details-grid, table.deduction-grid, table[id*="scroll-horizontal-datatable-button"], table[id*="scroll-horizontal-datatable"], table[id*="column-search-datatable-four"] { display: table !important; width: max-content !important; min-width: max-content !important; max-width: none !important; table-layout: auto !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; box-sizing: border-box !important; } /* B. Keep report-table sections as the actual horizontal viewport. */ .table-responsive:has(> table.bill-details-grid), .table-responsive:has(table.bill-details-grid), .bill-details-scroll, .deduction-table-wrapper, .bill-details-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; display: block !important; position: relative !important; box-sizing: border-box !important; } /* Do not let an ancestor hide the horizontal overflow of the report. */ .bill-details-wrapper, .bill-details-wrapper > div, .bill-details-scroll, .deduction-table-wrapper { min-width: 0 !important; } /* C. Real table structure: never turn report rows/cells into blocks/flex. */ table.bill-details-grid thead, table.bill-details-grid tbody, table.bill-details-grid tfoot, table.deduction-grid thead, table.deduction-grid tbody, table.deduction-grid tfoot, table[id*="scroll-horizontal-datatable"] thead, table[id*="scroll-horizontal-datatable"] tbody, table[id*="scroll-horizontal-datatable"] tfoot, table[id*="column-search-datatable-four"] thead, table[id*="column-search-datatable-four"] tbody, table[id*="column-search-datatable-four"] tfoot { display: table-header-group !important; width: auto !important; } table.bill-details-grid tbody, table.bill-details-grid tfoot, table.deduction-grid tbody, table.deduction-grid tfoot, table[id*="scroll-horizontal-datatable"] tbody, table[id*="scroll-horizontal-datatable"] tfoot, table[id*="column-search-datatable-four"] tbody, table[id*="column-search-datatable-four"] tfoot { display: table-row-group !important; } table.bill-details-grid tr, table.deduction-grid tr, table[id*="scroll-horizontal-datatable"] tr, table[id*="column-search-datatable-four"] tr { display: table-row !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } table.bill-details-grid th, table.bill-details-grid td, table.deduction-grid th, table.deduction-grid td, table[id*="scroll-horizontal-datatable"] th, table[id*="scroll-horizontal-datatable"] td, table[id*="column-search-datatable-four"] th, table[id*="column-search-datatable-four"] td { display: table-cell !important; width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; vertical-align: middle !important; box-sizing: border-box !important; } /* Cancel the mobile card labels for report/repeater tables. */ table.bill-details-grid td::before, table.bill-details-grid th::before, table.deduction-grid td::before, table.deduction-grid th::before, table[id*="scroll-horizontal-datatable"] td::before, table[id*="scroll-horizontal-datatable"] th::before, table[id*="column-search-datatable-four"] td::before, table[id*="column-search-datatable-four"] th::before { content: none !important; display: none !important; } /* Preserve server-side inline widths instead of forcing mobile 90px controls. */ table.bill-details-grid td input[type="text"], table.bill-details-grid td select, table.bill-details-grid td .select2-container, table.deduction-grid td input[type="text"], table.deduction-grid td select, table.deduction-grid td .select2-container { width: auto !important; max-width: none !important; margin-left: 0 !important; } /* D. DataTables with scrollX create separate head/body containers. Keep one horizontal viewport and prevent an independently-scrollable header. */ .dataTables_scroll { width: 100% !important; max-width: 100% !important; overflow: hidden !important; position: relative !important; } .dataTables_scrollHead { width: 100% !important; max-width: 100% !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-sizing: border-box !important; } .dataTables_scrollHeadInner { width: max-content !important; min-width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .dataTables_scrollHeadInner table { width: max-content !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; } .dataTables_scrollBody { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } .dataTables_scrollBody > table { width: max-content !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; } /* Header clone must remain a normal table, never card-converted. */ .dataTables_scrollHead table thead, .dataTables_scrollHead table tbody, .dataTables_scrollHead table tr, .dataTables_scrollHead table th, .dataTables_scrollHead table td { display: table-header-group !important; } .dataTables_scrollHead table tbody, .dataTables_scrollHead table tr { display: table-row-group !important; } .dataTables_scrollHead table tr { display: table-row !important; } .dataTables_scrollHead table th, .dataTables_scrollHead table td { display: table-cell !important; white-space: nowrap !important; } .dataTables_scrollBody table thead { display: table-header-group !important; } /* E. WORK ORDER REPEATER: LOCK HEADER/BODY TO THE SAME COLUMN GEOMETRY. The repeater header contains explicit widths (130/160/130/...). On mobile, allowing auto-layout lets long body text recalculate the column widths and causes the DataTables header clone to drift from the rows. Keep one deterministic 2530px grid for this 17-column Work Order table. */ table#scroll-horizontal-datatable-button.bill-details-grid { width: 2530px !important; min-width: 2530px !important; max-width: 2530px !important; table-layout: fixed !important; } table#scroll-horizontal-datatable-button.bill-details-grid th, table#scroll-horizontal-datatable-button.bill-details-grid td { box-sizing: border-box !important; overflow: hidden !important; vertical-align: middle !important; } /* Header widths exactly match the repeater HeaderTemplate. */ table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(1), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(1) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(2), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(2) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(3), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(3) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(4), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(4) { width: 150px !important; min-width: 150px !important; max-width: 150px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(5), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(5) { width: 300px !important; min-width: 300px !important; max-width: 300px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(6), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(6) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(7), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(7) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(8), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(8) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(9), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(9) { width: 150px !important; min-width: 150px !important; max-width: 150px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(10), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(10) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(11), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(11) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(12), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(12) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(13), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(13) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(14), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(14) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(15), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(15) { width: 180px !important; min-width: 180px !important; max-width: 180px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(16), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(16) { width: 110px !important; min-width: 110px !important; max-width: 110px !important; } table#scroll-horizontal-datatable-button.bill-details-grid th:nth-child(17), table#scroll-horizontal-datatable-button.bill-details-grid td:nth-child(17) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } /* Keep headers readable but prevent a header from changing column width. */ table#scroll-horizontal-datatable-button.bill-details-grid thead th { white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; line-height: 1.15 !important; height: 48px !important; padding: 7px 8px !important; } /* Body cells remain one-line so each row keeps a compact mobile height. Long values are clipped instead of visually bleeding into the next column. The full table remains available by horizontal scrolling. */ table#scroll-horizontal-datatable-button.bill-details-grid tbody td { white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; height: 44px !important; padding: 6px 8px !important; } /* Work Order name is the intentionally wider text column. */ table#scroll-horizontal-datatable-button.bill-details-grid tbody td:nth-child(5) { text-align: left !important; } /* Keep action buttons side-by-side without changing the Action column. */ table#scroll-horizontal-datatable-button.bill-details-grid tbody td:nth-child(1) { white-space: nowrap !important; overflow: visible !important; text-align: center !important; } table#scroll-horizontal-datatable-button.bill-details-grid .wo-view-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; height: 32px !important; margin: 0 2px !important; padding: 4px 10px !important; border-radius: 6px !important; white-space: nowrap !important; } /* F. When a Work Order table is directly inside .table-responsive, the viewport must scroll the same table containing both header and rows. */ .table-responsive > table#scroll-horizontal-datatable-button.bill-details-grid, .table-responsive > table.bill-details-grid { display: table !important; width: max-content !important; min-width: max-content !important; max-width: none !important; } /* DataTables may clone the Work Order header into .dataTables_scrollHead. The clone has to use the exact same 17-column geometry. */ .dataTables_scrollHeadInner table.bill-details-grid { width: 2530px !important; min-width: 2530px !important; max-width: 2530px !important; table-layout: fixed !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(1) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(2) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(3) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(4) { width: 150px !important; min-width: 150px !important; max-width: 150px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(5) { width: 300px !important; min-width: 300px !important; max-width: 300px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(6) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(7) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(8) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(9) { width: 150px !important; min-width: 150px !important; max-width: 150px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(10) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(11) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(12) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(13) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(14) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(15) { width: 180px !important; min-width: 180px !important; max-width: 180px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(16) { width: 110px !important; min-width: 110px !important; max-width: 110px !important; } .dataTables_scrollHeadInner table.bill-details-grid th:nth-child(17) { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } .dataTables_scrollHeadInner table.bill-details-grid th { box-sizing: border-box !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; line-height: 1.15 !important; height: 48px !important; padding: 7px 8px !important; overflow: hidden !important; } /* G. Do not let generic table.table card rules alter these grids. */ table.table.bill-details-grid, table.table.deduction-grid { display: table !important; } table.table.bill-details-grid#scroll-horizontal-datatable-button { width: 2530px !important; min-width: 2530px !important; max-width: 2530px !important; table-layout: fixed !important; } table.table.bill-details-grid thead, table.table.bill-details-grid tbody, table.table.deduction-grid thead, table.table.deduction-grid tbody { width: auto !important; } /* H. Keep report header visually stable while the body scrolls. */ table.bill-details-grid thead th, table.deduction-grid thead th, table[id*="scroll-horizontal-datatable"] thead th, table[id*="column-search-datatable-four"] thead th { position: static !important; transform: none !important; white-space: nowrap !important; } /* I. Horizontal-scroll tables should never inherit the hidden first-column card rule from the earlier section. */ table.bill-details-grid td:nth-of-type(1), table.bill-details-grid th:nth-of-type(1), table.deduction-grid td:nth-of-type(1), table.deduction-grid th:nth-of-type(1), table[id*="scroll-horizontal-datatable"] td:nth-of-type(1), table[id*="scroll-horizontal-datatable"] th:nth-of-type(1) { display: table-cell !important; } /* ============================================================== 12. CORRECTED FORM CONTROL / RIBBON SAFETY ============================================================== */ /* Water Connection and similar forms use .rdb, not only .RBL. */ .rdb label, .rdb input, .rdb select, .rdb textarea, .rdb .form-control, .rdb .select2-container { max-width: 100% !important; } /* Ribbon content can contain real form controls. */ .ribbon-box .ribbon-content .form-group { width: 100% !important; } .ribbon-box .ribbon-content label { display: block !important; position: static !important; background: transparent !important; font-size: 0.75rem !important; color: #475569 !important; font-weight: 600 !important; margin: 0 0 2px 0 !important; padding: 0 !important; } .ribbon-box .ribbon-content .form-control { width: 100% !important; } /* Do not let the section-heading rule style inputs/buttons as plain text. */ .ribbon-box .ribbon-content input, .ribbon-box .ribbon-content select, .ribbon-box .ribbon-content textarea, .ribbon-box .ribbon-content button, .ribbon-box .ribbon-content .btn, .ribbon-box .ribbon-content .select2-container { float: none !important; font-size: inherit !important; font-weight: inherit !important; line-height: normal !important; } /* ============================================================== 13. FOCUS / TOUCH SAFETY ============================================================== */ :focus-visible { outline: 2px solid #2B3990 !important; outline-offset: 2px !important; } /* Keep clickable table controls above any cell content. */ table td a, table td button, table td input[type="button"], table td input[type="submit"], table td input[type="checkbox"], table td input[type="radio"], table td .btn { position: relative !important; z-index: 2 !important; pointer-events: auto !important; } /* ============================================================== 14. UNIVERSAL MOBILE REPEATER / GRIDVIEW LAYOUT -------------------------------------------------------------- mobile-table-layout.js assigns: .mobile-card-table = 9 columns or fewer .mobile-scroll-table = 10 columns or more Labels are copied from the real header into data-mobile-label, so different forms do not need hard-coded column names. ============================================================== */ /* Card-mode tables: one label/value pair per row, like a definition list. */ table.mobile-card-table { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: auto !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; white-space: normal !important; background: transparent !important; } table.mobile-card-table > thead { display: none !important; } table.mobile-card-table > tbody, table.mobile-card-table > tfoot { display: block !important; width: 100% !important; } table.mobile-card-table > tbody > tr, table.mobile-card-table > tfoot > tr { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 0 12px 0 !important; padding: 8px 12px !important; border: 1px solid #DCE3ED !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05) !important; overflow: visible !important; } table.mobile-card-table > tbody > tr > td, table.mobile-card-table > tfoot > tr > td { display: grid !important; grid-template-columns: minmax(105px, 38%) minmax(0, 1fr) !important; align-items: start !important; column-gap: 10px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 9px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #EDF1F6 !important; background: transparent !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; box-shadow: none !important; } table.mobile-card-table > tbody > tr > td:last-child, table.mobile-card-table > tfoot > tr > td:last-child { border-bottom: 0 !important; } table.mobile-card-table > tbody > tr > td::before, table.mobile-card-table > tfoot > tr > td::before { content: attr(data-mobile-label) !important; display: block !important; min-width: 0 !important; color: #64748B !important; font-size: 0.76rem !important; line-height: 1.35 !important; font-weight: 700 !important; text-transform: none !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; pointer-events: none !important; } table.mobile-card-table > tbody > tr > td > span, table.mobile-card-table > tbody > tr > td > label, table.mobile-card-table > tbody > tr > td > div, table.mobile-card-table > tbody > tr > td > a, table.mobile-card-table > tbody > tr > td > input:not([type="checkbox"]):not([type="radio"]), table.mobile-card-table > tbody > tr > td > select, table.mobile-card-table > tbody > tr > td > textarea, table.mobile-card-table > tfoot > tr > td > span, table.mobile-card-table > tfoot > tr > td > label, table.mobile-card-table > tfoot > tr > td > div { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; text-align: right !important; } /* Preserve the # / SrNo field instead of accidentally hiding the first column. The explicit selectors out-rank legacy ID-based rules from earlier sections. */ table.mobile-card-table > tbody > tr > td:first-child { display: grid !important; } table[id*="scroll-horizontal-datatable"]:not([id*="two"]):not([id*="button"]).mobile-card-table > tbody > tr > td:nth-of-type(1), table[id$="gvHeadList"].mobile-card-table > tbody > tr > td:nth-of-type(1), table[id$="gvHeadListWithSearch"].mobile-card-table > tbody > tr > td:nth-of-type(1), table[id$="gvMaster"].mobile-card-table > tbody > tr > td:nth-of-type(1), table:has(input[type="file"]).mobile-card-table > tbody > tr > td:nth-of-type(1) { display: grid !important; } /* Action cells can contain multiple ASP.NET buttons. Keep them together. */ table.mobile-card-table > tbody > tr > td:has(input[type="submit"]), table.mobile-card-table > tbody > tr > td:has(input[type="button"]), table.mobile-card-table > tbody > tr > td:has(button), table.mobile-card-table > tbody > tr > td:has(.btn) { align-items: start !important; } table.mobile-card-table > tbody > tr > td:has(input[type="submit"]) > input[type="submit"], table.mobile-card-table > tbody > tr > td:has(input[type="button"]) > input[type="button"], table.mobile-card-table > tbody > tr > td:has(.btn) > .btn, table.mobile-card-table > tbody > tr > td > input.btn, table.mobile-card-table > tbody > tr > td > button.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; min-height: 34px !important; margin: 2px 4px 4px 0 !important; padding: 7px 10px !important; font-size: 0.78rem !important; line-height: 1.2 !important; white-space: normal !important; } /* Web Forms sometimes renders buttons as input[type=submit] with btn classes. */ table.mobile-card-table td input[type="submit"].btn, table.mobile-card-table td input[type="button"].btn { width: auto !important; } /* Inputs in editable GridView rows should use the available value column. */ table.mobile-card-table td .form-control, table.mobile-card-table td input[type="text"], table.mobile-card-table td select, table.mobile-card-table td textarea { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; text-align: left !important; } /* Tables with 10+ columns remain true tables and scroll horizontally. */ .mobile-table-scroll { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x pan-y !important; } table.mobile-scroll-table { display: table !important; width: max-content !important; min-width: 100% !important; max-width: none !important; table-layout: auto !important; border-collapse: separate !important; border-spacing: 0 !important; white-space: nowrap !important; } table.mobile-scroll-table > thead { display: table-header-group !important; } table.mobile-scroll-table > tbody { display: table-row-group !important; } table.mobile-scroll-table > tfoot { display: table-footer-group !important; } table.mobile-scroll-table tr { display: table-row !important; width: auto !important; } table.mobile-scroll-table th, table.mobile-scroll-table td { display: table-cell !important; width: auto !important; min-width: 90px !important; max-width: none !important; padding: 9px 10px !important; white-space: nowrap !important; vertical-align: middle !important; } table.mobile-scroll-table td:first-child, table.mobile-scroll-table th:first-child { display: table-cell !important; } /* Do not turn DataTables' cloned header into a card or independently scroll it. */ .dataTables_scrollHead table.mobile-scroll-table, .dataTables_scrollBody table.mobile-scroll-table { width: max-content !important; min-width: 100% !important; max-width: none !important; } .dataTables_scrollHead table.mobile-scroll-table thead { display: table-header-group !important; } .dataTables_scrollBody table.mobile-scroll-table thead { display: table-header-group !important; } /* Specific GridView IDs may vary by naming container; class-based rules above apply. */ table[id$="gvHeadListWithSearch"].mobile-card-table, table[id$="gvHeadList"].mobile-card-table, table[id$="gvMaster"].mobile-card-table { width: 100% !important; min-width: 0 !important; } @media (max-width: 380px) { table.mobile-card-table > tbody > tr > td, table.mobile-card-table > tfoot > tr > td { grid-template-columns: minmax(90px, 36%) minmax(0, 1fr) !important; column-gap: 7px !important; } } } /* ============================================================== 15. MOBILE CARD ACTION BUTTON FIX -------------------------------------------------------------- Fixes ASP.NET Repeater/GridView action cells where global .btn rules make every button width:100% and display:block. Only applies to compact mobile card tables. ============================================================== */ @media (max-width: 768px) { /* Action cell: put its label on its own line, then keep actions in a compact horizontal row that can wrap only on very narrow screens. */ table.mobile-card-table > tbody > tr > td:has(input[type="submit"]), table.mobile-card-table > tbody > tr > td:has(input[type="button"]), table.mobile-card-table > tbody > tr > td:has(button), table.mobile-card-table > tbody > tr > td:has(.btn) { display: block !important; width: 100% !important; min-width: 0 !important; padding: 10px 0 !important; text-align: left !important; } table.mobile-card-table > tbody > tr > td:has(input[type="submit"])::before, table.mobile-card-table > tbody > tr > td:has(input[type="button"])::before, table.mobile-card-table > tbody > tr > td:has(button)::before, table.mobile-card-table > tbody > tr > td:has(.btn)::before { display: block !important; width: 100% !important; margin: 0 0 8px 0 !important; text-align: left !important; } /* ASP.NET Web Forms Button renders as input[type=submit] by default. Bootstrap .btn-info/.btn-danger globals must not force full width. */ table.mobile-card-table > tbody > tr > td:has(input[type="submit"]) > input[type="submit"], table.mobile-card-table > tbody > tr > td:has(input[type="button"]) > input[type="button"], table.mobile-card-table > tbody > tr > td:has(button) > button, table.mobile-card-table > tbody > tr > td:has(.btn) > .btn, table.mobile-card-table > tbody > tr > td > input.btn, table.mobile-card-table > tbody > tr > td > button.btn, table.mobile-card-table > tbody > tr > td > a.btn { display: inline-flex !important; flex: 0 1 auto !important; align-items: center !important; justify-content: center !important; float: none !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 42px !important; height: auto !important; margin: 0 8px 6px 0 !important; padding: 10px 16px !important; border-radius: 10px !important; font-size: 0.9rem !important; line-height: 1.25 !important; white-space: normal !important; text-align: center !important; vertical-align: middle !important; box-sizing: border-box !important; } /* Print/primary action: soft indigo button with readable text. */ table.mobile-card-table > tbody > tr > td:has(input.btn-info) > input.btn-info, table.mobile-card-table > tbody > tr > td:has(.btn-info) > .btn-info, table.mobile-card-table > tbody > tr > td > input.btn-info { background: #E0E7FF !important; color: #312E81 !important; border: 1px solid #C7D2FE !important; box-shadow: 0 2px 7px rgba(49, 46, 129, 0.12) !important; font-weight: 700 !important; } /* Delete/danger action: compact red button, not a full-width block. */ table.mobile-card-table > tbody > tr > td:has(input.btn-danger) > input.btn-danger, table.mobile-card-table > tbody > tr > td:has(.btn-danger) > .btn-danger, table.mobile-card-table > tbody > tr > td > input.btn-danger { background: #F4777D !important; color: #FFFFFF !important; border: 1px solid #F4777D !important; box-shadow: 0 2px 7px rgba(239, 68, 68, 0.16) !important; font-weight: 700 !important; } /* Keep action cells usable on narrow phones without causing overflow. */ @media (max-width: 380px) { table.mobile-card-table > tbody > tr > td:has(input[type="submit"]) > input[type="submit"], table.mobile-card-table > tbody > tr > td:has(input[type="button"]) > input[type="button"], table.mobile-card-table > tbody > tr > td:has(.btn) > .btn, table.mobile-card-table > tbody > tr > td > input.btn { margin-right: 5px !important; padding: 9px 11px !important; font-size: 0.82rem !important; } } }