before Select2 initialises, so these rules apply to real divs with no table formatting context. align-items:stretch — every cell in the same flex line grows to the tallest cell's height. flex-direction:column + justify-content:flex-end on each cell — pushes label+input to the bottom of the stretched cell so all controls land on the same horizontal baseline regardless of label wrap height. flex-wrap:wrap — cells that would overflow the card wrap to the next line instead. .zone-break-cell spans full width to force a new flex line at ZoneBreak points. --------------------------------------------------------------- */ .zone-field-table { display: flex; flex-direction: column; /* fields in a zone stack VERTICALLY (one per line) */ align-items: stretch; align-content: flex-start; width: 100%; } .zone-field-cell { display: flex; flex-direction: column; justify-content: flex-end; flex: 0 0 auto; /* cells take their natural height; full width per row */ width: 100%; min-width: 0; box-sizing: border-box; max-width: 100%; float: none; } /* Image/icon field types set display:flex + centering inline — restore row direction so their horizontal layout is preserved. */ .zone-field-cell.zone-cell-inline-flex { flex-direction: row; align-items: center; justify-content: center; } /* ZoneBreak forces a new flex line */ .zone-field-cell.zone-break-cell { flex: 0 0 100%; min-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; } /* Safety net: prevent float on any remaining real table cells */ .card-body > table > tbody > tr > td, .card-body > table > tr > td { float: none !important; } /* --------------------------------------------------------------- Card header flex layout — left title / right action buttons Wraps gracefully at narrow widths: title stays left, buttons wrap right-aligned beneath each other with consistent spacing. --------------------------------------------------------------- */ .card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 8px; padding-top: 4px; padding-bottom: 4px; } .card-header .card-header-left { flex: 1 1 auto; text-align: left; min-width: 0; } .card-header .card-header-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; align-content: flex-start; gap: 4px; flex-shrink: 0; } /* form-field-container divs are the actual flex children of card-header-right. align-self: flex-start keeps lone wrapped buttons pinned to the top of their row instead of floating down to match the height of the previous row. */ .card-header-right .form-field-container { align-self: flex-start; } /* Individual pill buttons never wrap their own label text */ .btn.rounded-pill { white-space: nowrap !important; } .btn-inline-spacing > * { margin: 0rem 0.375rem 0 0 !important; } .card-header-right.non-desktop { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 4px; } .card-header-right.non-desktop > * { display: inline-block; margin: 0 !important; } @media (max-width: 768px) { .card-header { flex-direction: column; align-items: flex-start; } .card-header .card-header-right { justify-content: flex-start; width: 100%; } .btn-inline-spacing { display: flex; flex-wrap: wrap; gap: 4px; } .btn-inline-spacing > * { margin: 0 !important; } } /* =========== Filter row inputs inside .listform — uniform 30px height, 14px Arial =========== */ /* shared-components.css sets min-height: 40.5px on .form-control which overrides the inline height: 30px on filter text inputs. Higher specificity here wins. */ .listform .form-label { font-weight: 700; } .listform thead th { font-weight: 700; padding-top: 1px !important; padding-bottom: 1px !important; } /* Center checkboxes in grid data cells. Must use table-cell (not flex) so consecutive checkbox columns each occupy their own column slot. */ .index-table tbody td:has(> input[type="checkbox"]) { display: table-cell !important; text-align: center !important; vertical-align: middle !important; padding: 6px 8px !important; } .index-table tbody td:has(> input[type="checkbox"]) > input[type="checkbox"] { margin: 0 !important; } .listform .form-control, .listform .form-select { height: 30px; min-height: 30px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 2px 8px; } /* =========== Select2 inside .listform — match grid font (14px Arial) =========== */ /* Select2 creates its own DOM and inherits from .listform (10px), not from the native is wrapped in a nested .pagination-control div. display:contents collapses that wrapper so the select aligns like all other dropdowns. */ .pagination-wrapper .pagination-control .pagination-control { display: contents; } /* Select2 arrow — default height is 26px which causes it to float near the top when the selection box is taller. 100% height centers the arrow correctly. */ .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; } /* Detail form labels with green ✚ — keep the plus on the same line as the label text with at least 2 spaces of gap; never let it wrap underneath. */ label.form-label:has(.ddNew) { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; } label.form-label .ddNew { flex-shrink: 0; white-space: nowrap; margin-left: 2px; }