/** * React Modules CSS Isolation * * AUTO-GENERATED FILE * Generated by: node scripts/generate-css-isolation.cjs * Generated at: 2026-08-11T12:50:59.418Z * * This file resets Bootstrap/DataTables/legacy CSS styles inside * [data-react-module] containers to prevent conflicts with Tailwind CSS. * * To regenerate: node scripts/generate-css-isolation.cjs */ /* ========== Base Isolation ========== */ [data-react-module] { isolation: isolate; } [data-react-module] *, [data-react-module] *::before, [data-react-module] *::after { box-sizing: border-box; } /* ========== Typography Resets ========== */ /* Headings: only margins are reset. Known accepted leaks: bootstrap's h1-h6 font-size/line-height and skin_150n.css `h5 { font-weight: Bold }` apply to BARE headings (no explicit utility classes) — module headings carry explicit classes, so in practice nothing visible leaks. An inherit-based :where() reset (font-family/weight/size/line-height/ color: inherit) was tried on 2026-07-31 per PR review and REGRESSED the modules visually: `inherit` is not "reset to normal", it re-wires every heading/span without its own font class to take the size of its ANCESTOR — and through portaled content ([data-react-module='portal'] under ) that chain ends in legacy page containers with zoom-scaled sizes, so module text ballooned. Module typography is designed against browser/bootstrap defaults, not against inheritance. Do NOT re-add inherit-based font resets here (with or without !important) — neutralize a concrete leaking legacy rule individually in Manual Overrides instead. */ [data-react-module] :where(h1, h2, h3, h4, h5, h6) { margin: 0; } /* ========== Layout Resets ========== */ /* Reset Bootstrap grid - using attribute selector for all col-* classes */ [data-react-module] [class*="col-"] { float: none !important; padding-left: 0 !important; padding-right: 0 !important; position: relative; width: auto; } [data-react-module] .row { margin-left: 0 !important; margin-right: 0 !important; display: block; } [data-react-module] .container, [data-react-module] .container-fluid { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; } /* ========== Button Resets ========== */ /* Reset Bootstrap button styles */ [data-react-module] .btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* ========== Form Resets ========== */ [data-react-module] input, [data-react-module] select, [data-react-module] textarea, [data-react-module] button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } [data-react-module] .form-control { all: unset; display: block; width: 100%; } [data-react-module] .form-group { margin-bottom: 0 !important; } /* ========== Table Resets ========== */ /* Reset DataTables styles */ [data-react-module] .table, [data-react-module] table { border-collapse: collapse; border-spacing: 0; } [data-react-module] .dataTables_wrapper { all: unset; } /* ========== Modal Resets ========== */ /* Prevent Bootstrap modal backdrop from interfering */ [data-react-module] .modal-backdrop { display: none !important; } /* ========== Utility Resets ========== */ /* Reset Bootstrap utility classes that might conflict */ [data-react-module] .clearfix::before, [data-react-module] .clearfix::after { display: none; } [data-react-module] .pull-left, [data-react-module] .pull-right { float: none !important; } [data-react-module] .hidden { display: revert !important; } [data-react-module] .show { display: revert !important; } /* ========== Link Resets ========== */ [data-react-module] a { color: inherit; text-decoration: inherit; } [data-react-module] a:hover, [data-react-module] a:focus { color: inherit; text-decoration: inherit; } /* ========== Text Element Margin Resets ========== */ /* Bootstrap (loaded twice: bootstrap.min.css + a 3.3.5 copy embedded in datatables.min.css) sets unlayered margins on bare text elements (p { margin: 0 0 10px }, ul/ol { margin-bottom: 10px }, ...). The modules' Tailwind preflight lives in @layer base and always loses to unlayered CSS, so those margins leak into React modules. Re-assert the preflight values here (this file is unlayered and loads after the legacy CSS). :where() keeps specificity at exactly (0,1,0): enough to beat legacy element rules (0,0,x), low enough not to shadow anything class-based. Only margin is reset — bootstrap doesn't touch padding on these elements, so padding utilities (e.g. px-2 on dropdown