/* ========================================================================== * SHEQ24 — global UI layer (Theme Kit rollout, Phase A). * Approved benchmark: index.php?module=default&action=sheqTheme * See audits/bootstrap/theme-rollout-plan.md. * * Loaded LAST in default_header_tpl.php (after style.bundle.css, select2.min.css, * style.css) so it wins by source order. Promotes the sandbox's proven, scoped * styles to app-wide. * * SCOPE (deliberately conservative for a global change): * 1. Select2 — the CONFIRMED app-wide breakage. Metronic sets Select2's default * theme to "bootstrap5" but that theme CSS isn't loaded, and plain * select2.min.css clobbers the sizing → every dropdown is half-styled. We * target the THEME-AGNOSTIC `.select2-container` (NOT `--default`, which * never matches the bootstrap5 containers) so it applies everywhere. * 2. Badges/pills + icon-only buttons — text/glyph was leaking; centre both axes. * * NOT here (deferred to per-module conversion so we don't change form semantics * app-wide in one shot): checkbox restyle, segmented controls, table/toolbar * structure. Those ship via the partials + the kit classes. * * Rollback: remove the single `sheq-ui.css` entry from $stylesheet in the header. * ========================================================================== */ /* ---- 1. Select2 (theme-agnostic) ---------------------------------------- */ .select2-container { font-family: inherit; } .select2-container .select2-selection { border: 1px solid #dbdfe9; border-radius: .475rem; background: #fff; } .select2-container--open .select2-selection, .select2-container--focus .select2-selection { border-color: #3e97ff !important; } /* SINGLE — fixed box + canonical line-height centring (41px = 43 − 2px border) */ .select2-container .select2-selection--single { height: 43px !important; border: 1px solid #dbdfe9 !important; border-radius: .475rem !important; padding: 0 12px !important; display: block !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 41px !important; color: #4b5675 !important; font-size: .95rem !important; font-weight: 400 !important; padding: 0 !important; } .select2-container .select2-selection--single .select2-selection__placeholder { color: #99a1b7; } .select2-container .select2-selection--single .select2-selection__arrow { height: 41px !important; top: 0 !important; right: 8px !important; } /* MULTIPLE — auto-grow, never clip the placeholder/chips */ .select2-container .select2-selection--multiple { min-height: 43px !important; height: auto !important; border: 1px solid #dbdfe9 !important; border-radius: .475rem !important; padding: 3px 8px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: flex !important; flex-wrap: wrap !important; padding: 0 !important; width: 100%; } .select2-container .select2-selection--multiple .select2-search__field { margin: 4px 0 !important; color: #4b5675; } .select2-container .select2-selection--multiple .select2-selection__choice { background: #eef3ff !important; border: 0 !important; color: #3e97ff !important; border-radius: .4rem !important; font-size: .85rem !important; padding: 3px 9px !important; margin: 3px 5px 3px 0 !important; } .select2-container .select2-selection--multiple .select2-selection__choice__remove { color: #3e97ff !important; border: 0 !important; background: transparent !important; } /* Dropdown panel + results */ .select2-dropdown { border: 1px solid #dbdfe9 !important; border-radius: .475rem !important; box-shadow: 0 10px 30px rgba(56,71,109,.15) !important; } .select2-results__option--highlighted[aria-selected] { background: #3e97ff !important; color: #fff !important; } /* ---- 2. Badges/pills + icon buttons: centre both axes -------------------- */ .badge { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; } .btn-table-action { display: inline-flex; align-items: center; justify-content: center; } /* badge-light-* colours, defined GLOBALLY (were only scoped to the Theme Kit, so on real pages the pills fell back to grey). Dark-on-light for readability. */ .badge.badge-light-success { background: #e7f8ef !important; color: #0a7d3e !important; } .badge.badge-light-warning { background: #fff4d6 !important; color: #9a6b00 !important; } .badge.badge-light-danger { background: #fdecef !important; color: #c01e3c !important; } .badge.badge-light-primary { background: #e9f1ff !important; color: #1a5fd0 !important; } .badge.badge-light-info { background: #e7f6fb !important; color: #0b6e8a !important; } /* sizing only on the light pills, so notification/count badges are untouched */ .badge[class*="badge-light-"] { padding: .42rem .7rem; border-radius: .425rem; font-weight: 600; } /* btn-xs is a Bootstrap-3 size that BS5 dropped, so legacy btn-xs buttons render FULL size (e.g. the shared date_format_class "Due in N d" pills). Restore a real extra-small size app-wide. */ .btn.btn-xs { padding: .2rem .55rem; font-size: .72rem; line-height: 1.35; border-radius: .375rem; } /* ---- 3. Register card + toolbar (scoped to .sheq-register from the partial, * so the 955 existing data-sheq-grid pages are NOT affected) ---------- */ .sheq-register { border: 0; border-radius: .85rem; box-shadow: 0 0 30px rgba(56,71,109,.05); } .sheq-register .card-header { min-height: 70px; align-items: center; border-bottom: 1px solid #f1f1f4; } .sheq-register .card-title h2 { color: #181c32; } .sheq-register .card-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .sheq-register .sheq-toolbar-search { position: relative; } .sheq-register .sheq-toolbar-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #99a1b7; } .sheq-register .sheq-toolbar-search input { padding-left: 34px; width: 220px; } .sheq-register .dataTables_filter { display: none; } /* the toolbar search replaces it */ .sheq-register table.dataTable thead th { font-weight: 600; color: #4b5675; text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; } .sheq-register table.dataTable tbody td { color: #4b5675; vertical-align: middle; } /* ---- 4. Legacy-page normalisation (Rollout Part 2) ------------------------ * Improves the not-yet-converted "card-header clearfix" pages app-wide in one * shot, until each gets its per-page conversion. Safe + cosmetic. */ /* The old round green/red "+" circle toolbar buttons -> clean kit icon button. .btn-circle was the add/import/export/search toolbar shape on legacy pages. */ .btn.btn-circle { border-radius: .475rem !important; width: auto !important; min-width: 38px; height: 38px; padding: 0 .7rem !important; display: inline-flex !important; align-items: center; justify-content: center; background-color: #3e97ff !important; border-color: #3e97ff !important; color: #fff !important; } .btn.btn-circle:hover { background-color: #2d88f5 !important; border-color: #2d88f5 !important; color: #fff !important; } .btn.btn-circle i, .btn.btn-circle .fa, .btn.btn-circle span { color: #fff !important; margin: 0 !important; } /* legacy red action colour -> kit primary (the add buttons were "btn-red") */ .btn.btn-red:not(.btn-circle) { background-color: #3e97ff !important; border-color: #3e97ff !important; color: #fff !important; } .btn.btn-red:not(.btn-circle):hover { background-color: #2d88f5 !important; border-color: #2d88f5 !important; } /* Tidy the DEFAULT DataTables "Filter:" box + length menu on legacy grids (NOT hidden — legacy pages still rely on it for search; just made to look like the kit). Converted .sheq-register pages already hide it for the toolbar search. */ .dataTables_filter input { border: 1px solid #dbdfe9 !important; border-radius: .475rem !important; padding: .45rem .75rem !important; margin-left: .5rem !important; height: 38px; } .dataTables_filter input:focus { border-color: #3e97ff !important; outline: none !important; box-shadow: none !important; } .dataTables_length select { border: 1px solid #dbdfe9 !important; border-radius: .475rem !important; padding: .35rem 1.6rem .35rem .6rem !important; height: 38px; } /* Don't let an empty trailing header cell force a phantom sortable column to render its sort arrows (cosmetic guard for the "extra wide" tables). */ table.dataTable thead th:empty { padding: 0 !important; } /* ---- 5. THIRD legacy header style: plain
Title * +buttons (707 files, e.g. * incident settings). Not clearfix/gradient, so the conversions didn't * touch it. Flex it so the title sits left and the buttons sit right * instead of floating/overlapping. ------------------------------- */ .card-header:has(.panel-heading-icons){ display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .panel-heading-icons{ display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; } /* Secondary buttons rendered near-transparent on white (e.g. the "Edit" action next to "View"). Give them a visible light-grey kit look. Modal footer Cancel/Close keeps its own (more specific) style in sheq-modal-global.css. */ .btn.btn-secondary{ background-color: #eef0f5; border-color: #e4e6ef; color: #4b5675; } .btn.btn-secondary:hover{ background-color: #e4e6ef; border-color: #d6dae3; color: #1f2329; } /* ---- 6. SHEQ24 Training side-menu group (Wave B / 12) --------------------- * * Token: --sheq-training is the single source of the dark-red brand colour for * the LMS training menu group. Defined here so it is available globally * and easy to restyle in one place. * * Usage: .sheq-training-group-header picks up the token for the group label * and caret. Child
  • links inherit the sidebar's normal fg (no * special colour — the header is the visual anchor). * * Dark-red rationale: #c01e3c is the closest true dark-red already referenced * in this file (badge-light-danger text colour). It is distinct from the * coral --danger (#e46a76) and passes WCAG AA on the sidebar dark bg. * ---------------------------------------------------------------------- */ :root { --sheq-training: #c01e3c; } /* Group parent link — dark-red label + caret; no underline; same padding as other sidebar anchors so hover/active sizing is consistent. */ .sheq-training-group-header { color: var(--sheq-training) !important; font-weight: 600; } .sheq-training-group-header i.sheq-training-icon { color: var(--sheq-training) !important; } /* Caret rendered by the sidebar JS (has-arrow::after); override just its colour so it inherits the dark-red instead of the sidebar default fg. */ .sheq-training-group-header.has-arrow::after { border-color: var(--sheq-training) !important; } /* Active state: keep a subtle left-border highlight so the Training group visually anchors even when collapsed. */ #sidebarnav li.sheq-training-group > a.sheq-training-group-header.active, #sidebarnav li.sheq-training-group > a.sheq-training-group-header:focus { color: var(--sheq-training) !important; } /* Child link indentation — matches the sidebar's sub-menu indent so the two Training child items are clearly nested inside the group. */ #sidebarnav li.sheq-training-group > ul > li > a { padding-left: 40px; } /* ---- 7. Frontend-audit Lane F — dead-class compat shims (Wave C) ---------- * * Source: docs/audits/frontend-audit.md (items: dead BS3 responsive utilities, * has-error, gradient-card-header band). These are CSS-only shims so the fleet * is fixed in ONE place instead of editing 1,000+ templates. * * NOTE on the MDB cascade classes (panel-cascade / view-cascade / * gradient-card-header colour / panel-heading-icons / z-depth-* / *-text / * *-gradient / cascading-admin-card): the audit reported these as "orphaned / * no CSS behind them", but that was a false negative — it greped main.css / * style.css / style.bundle.css and MISSED custom.css, which IS loaded in the * active header (default_header_tpl.php $stylesheet) and already carries a * complete "Phase 7.1 — MDB-removal compatibility shims" block (custom.css * lines ~264-435) that styles all of them. So they are NOT re-shimmed here to * avoid duplicate/conflicting rules. Only the genuinely-undefined residue * below is added. * ------------------------------------------------------------------------- */ /* ---- 7a. Bootstrap-3 responsive show/hide utilities ---------------------- * BS3 shipped .hidden-xs / .visible-xs / .hidden-md etc.; BS4+ removed them in * favour of the .d-{bp}-{value} system. ~102 occurrences across ~50 templates * still use the BS3 names and currently style NOTHING (verified absent from all * 6 loaded app CSS files + the Metronic bundles), so elements meant to hide on * a given breakpoint stay visible. These rules restore the BS3 semantics using * Bootstrap 5's own breakpoint boundaries (xs <576, sm 576-767, md 768-991, * lg 992-1199, xl >=1200). Only the names actually present in templates plus * their immediate neighbours are defined; all are scoped so they cannot affect * anything that doesn't already wear the legacy class. */ /* hidden-* : hide AT and ABOVE nothing — BS3 "hidden-xs" means hidden on the xs * range only. Implement each as a single-range media query. */ @media (max-width: 575.98px) { .hidden-xs { display: none !important; } } @media (min-width: 576px) and (max-width: 767.98px) { .hidden-sm { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .hidden-md { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .hidden-lg { display: none !important; } } /* visible-* : BS3 made the element visible ONLY on that range and hidden * elsewhere. Default to hidden, then reveal on the matching range. Use * display:block (BS3's visible-* default) — templates that need inline/flex * already carry their own d-* utility. */ .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } @media (max-width: 575.98px) { .visible-xs { display: block !important; } } @media (min-width: 576px) and (max-width: 767.98px) { .visible-sm { display: block !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .visible-md { display: block !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .visible-lg { display: block !important; } } /* ---- 7b. has-error (legacy BS3/BS4 validation wrapper) ------------------- * IMPORTANT: in SHEQ24 .has-error is applied STATICALLY to ~88 field wrappers * (e.g.
    ) — it is NOT a live "this field is wrong" * marker. The real validator (frontend/js/sheq_form_validate.js) flags bad * fields with Bootstrap 5's own .is-invalid (which BS5 already styles red) and * clears it as the user fixes each field. Therefore a naive * `.has-error .form-control { border-color:red }` shim would paint EVERY field * on those forms permanently red — actively harmful. So this shim is * deliberately INERT by default and only renders the error treatment when a * genuine invalid signal is also present (aria-invalid="true" or .is-invalid). * That keeps static wrappers neutral while still giving legacy has-error forms * a coherent BS5 invalid look when the validator actually fires. main.css * already carries the partial `.has-error .input-icon i` colour rule. */ .has-error .form-control.is-invalid, .has-error .form-select.is-invalid, .has-error .form-control[aria-invalid="true"], .has-error .form-select[aria-invalid="true"] { border-color: #f1416c; } .has-error .form-control.is-invalid:focus, .has-error .form-select.is-invalid:focus, .has-error .form-control[aria-invalid="true"]:focus, .has-error .form-select[aria-invalid="true"]:focus { border-color: #f1416c; box-shadow: 0 0 0 0.25rem rgba(241, 65, 108, 0.18); } /* Colour the field label only when the field is genuinely invalid, never just * because the wrapper statically carries .has-error. */ .has-error:has(.is-invalid) > label, .has-error:has([aria-invalid="true"]) > label, .has-error:has(.is-invalid) > .control-label, .has-error:has([aria-invalid="true"]) > .control-label { color: #f1416c; } /* ---- 7c. gradient-card-header — band shape reinforcement ----------------- * custom.css already gives .gradient-card-header / .view-cascade their text * colour (light-on-dark) and the gradient backgrounds (.blue-gradient etc.). * What MDB also gave this element — and what was lost — is the floating-band * SHAPE (rounded corners + sitting as a self-contained header bar). The * templates supply the colour (a gradient class or an inline background) and * the spacing (mx-4 / py-2 / mb-3 utilities), so here we only add the missing * rounding + a soft elevation so it reads as a header band rather than a flat * full-bleed strip. Additive and colour-agnostic, so it never fights the * custom.css colour rules or a per-template inline background. */ .gradient-card-header, .view.view-cascade.gradient-card-header { border-radius: 0.375rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } /* Inspection editor bar (2026-08-10): ONE standard header for every editor step. Self-contained ON PURPOSE. The navy header look used to come from a per-page