.nav-link {
    color: #342424 !important;
    -webkit-transition: 0.35s;
    -o-transition: 0.35s;
    transition: 0.35s;
}
.sheq-gradient {
    background: -webkit-linear-gradient(50deg, #929cc0, #375371) !important;
    background: -o-linear-gradient(50deg, #929cc0, #375371) !important;
    background: linear-gradient(40deg, #929cc0, #375371) !important;
}
table.table td {

/*  padding-top: 1.1rem;
  padding-bottom: 1rem; */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.btn-side-menu-block span {
    color: #fff !important;
}
.btn-group>.btn:first-child {
    margin-left: 0;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-group>.btn:first-child {
    margin-left: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.btn-default.dropdown-toggle {
    background-color: #2bbbad !important;
}
.btn-group .btn {
    margin: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    float: left;
}
.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu>li>a:hover {
    color: #333;
   background: rgba(0, 0, 0, 0.03);
}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
            position: relative !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 1;
        }
.brand-logo {
    width: 100% !important;
}

.custom-search .btn-default {
    border: none;
    border-radius: 3px !important;
    background: none;
    background-color: #e0e2e2;
    color: #060606 !important;
    font-size: 11px;
    font-weight: bold;
}
.sidebar-nav ul li a.active {
    font-weight: 800  !important;
    color: #fb9678 !important;
}

ul.nav.nav-tabs li a {
    background: none !important;
}

.container-fluid {
   margin-top: 2%;
}
a {
    color: #3e3938 !important;
}
table.table{
    border-spacing: 3px;
    border-collapse: separate;
}

.position-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left:0px;
    background: rgba(200, 220, 255, 0.5);
}

thead tr:nth-child(1) th {
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
}
table.fixed-custom-column th:first-child,table.fixed-custom-column td:first-child
{
    position: -webkit-sticky;
    position:sticky;
    left:0px;
}

table.fixed-custom-column  th:first-child,table.fixed-custom-column td:first-child
{
    background-color:white;
}

table.fixed-custom-column th:nth-child(1),table.fixed-custom-column td:nth-child(1)
{
    position: -webkit-sticky;
    position:sticky;
    left:0px;
}

table.fixed-custom-column th:nth-child(1),table.fixed-custom-column td:nth-child(1)
{
    background-color:white;
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}
/*
.fn-label a {
    font-weight: 500;
}
.fn-gantt {
    border: 2px solid #EEF2F4;
    border-radius: 4px;
}
.fn-gantt-hint {
    background: #6c7888;
    border: 0px;
    color: #fff;
}
.fn-gantt .leftPanel {
    width: 450px;
    border-right: 1px solid #e4e4e4;
}
.fn-gantt .leftPanel .name {
    font-weight: 600;
    font-size: 15px;
    background: #717a86;
}
.fn-gantt .rightPanel .fn-label:hover {
    cursor: pointer;
}
.fn-gantt .rightPanel .month {
    color: #717a86;
}
.fn-gantt .wd,
.fn-gantt .bottom,
.fn-gantt .rightPanel .month,
.fn-gantt .rightPanel .year,
.fn-gantt .spacer,
.fn-gantt .leftPanel .desc {
    background-color: #ffffff;
}
.fn-gantt .leftPanel .fn-label {
    width: 100%;
}
.fn-gantt .leftPanel .name,
.fn-gantt .leftPanel .desc {
    border-bottom: 1px solid #f5f5f5;
    height: 23px;
}
.fn-gantt .leftPanel .name {
    width: 40%;
}
.fn-gantt .leftPanel .desc {
    width: 60%;
}
#gantt .gantt_project_name {
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    display: block;
    margin-top: 32px;
}
.fn-gantt .leftPanel .name .fn-label {
    color: #fff;
}
.fn-gantt table th:first-child {
    width: 150px;
    width: 150px;
}
.fn-gantt *,
.fn-gantt *:after,
.fn-gantt *:before {
    box-sizing: content-box;
}*/
/*
.selectpicker  a:hover,
.selectpicker a:focus {
    background: #dc6767;
    color: #3e3938 !important;
}*/

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .6 !important;
}

.ui-state-default {
    color: #ffffff !important;
}

.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 18px;
    /*line-height: unset;*/
    line-height: 20px;
}

.btn-info-darker{
    background-color: #197fa8 !important;
    border-color: #197fa8 !important;
}

.btn-circle-custom {
    border-radius: 100%;
    width: 20px;
    height: 20px;
    padding: 5px;
}

.fa-custom {
    display:  flex;
    align-items: center;
    vertical-align: middle;
    margin-top: -1px;
    margin-left:  -1px;
}

.input-next-to-select {
        margin-top: -2px;
    }

/* ========================================================================= */
/* Phase 7.1 — MDB-removal compatibility shims                                */
/*                                                                           */
/* MDB (Material Design Bootstrap) was removed in Phase 4. Its component CSS  */
/* for .gradient-card-header, .view-cascade, .btn-circle, .panel-cascade,    */
/* .h3-responsive, etc. is no longer defined. SHEQ24 templates still use     */
/* these class names — this section provides minimal styling to keep them    */
/* visually sane until templates are migrated to native BS5 / Metronic       */
/* equivalents per-page during the per-template QA polish pass.              */
/* ========================================================================= */

/* ---- 1. Card-header replacements (MDB's dark-banner equivalent) ---------- */
/* The "Company Branches"-style headers carry these classes and an inline    */
/* background:#1c3f59 !important — without MDB, text inside falls back to    */
/* the body's dark color, producing dark-on-dark unreadable text.            */
.gradient-card-header,
.view-cascade,
.view.view-cascade {
    color: var(--sheq-sidebar-fg, #ffffff);
}
.gradient-card-header h1, .gradient-card-header h2, .gradient-card-header h3,
.gradient-card-header h4, .gradient-card-header h5, .gradient-card-header h6,
.gradient-card-header p,  .gradient-card-header span, .gradient-card-header a,
.view-cascade h1, .view-cascade h2, .view-cascade h3,
.view-cascade h4, .view-cascade h5, .view-cascade h6,
.view-cascade p,  .view-cascade span,
.h3-responsive, .h2-responsive, .h4-responsive, .h5-responsive {
    color: var(--sheq-sidebar-fg, #ffffff) !important;
}

/* ---- 2. Round icon buttons (MDB's .btn-circle / .btn-rounded) ------------ */
.btn-circle,
.btn-rounded {
    border-radius: 50% !important;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-circle > i,
.btn-circle > .fa,
.btn-circle > .fas,
.btn-circle > .far,
.btn-rounded > i,
.btn-rounded > .fa {
    margin: 0;
    line-height: 1;
}
/* Generic icon-in-button: center vertically (BS5 .btn is inline-block) */
.btn > i.fa,
.btn > i.fas,
.btn > i.far,
.btn > i.fab,
.btn > i.fal,
.btn > i.fa-solid,
.btn > i.fa-regular {
    vertical-align: middle;
    line-height: 1;
}

/* ---- 3. Body scroll: Metronic + the SHEQ24 legacy body classes ----------- */
/* (.skin-default / .fixed-layout) combined to impose overflow rules that    */
/* prevented page scroll. Force natural document scroll.                      */
body.fixed-layout,
body.skin-default,
body {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}
.page-wrapper {
    height: auto !important;
    min-height: 100vh;
}

/* ---- 4. Panel-cascade etc. — give them BS5-card visual when MDB gone ---- */
.panel-cascade,
.card.panel-cascade {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
    background: #ffffff;
}

/* ---- 5. MDB's .panel-heading-icons custom class — flex centering for the */
/* row of round circle buttons that sit next to a card-header title.       */
.panel-heading-icons {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin-right: 0.5rem;
}

/* ---- 6. MDB text-color helper class shims --------------------------------
   MDB (Material Design Bootstrap) shipped a set of -text helper classes
   that are used throughout SHEQ24 dashboards to color text. After Phase 4
   removed MDB, these classes lost their definitions and any element using
   them inherits the default body text color — which on dark tile backgrounds
   becomes dark-on-dark.

   Restored MDB's named color helpers below.
*/
.white-text, .text-white                { color: #ffffff !important; }
.black-text, .text-black                { color: #000000 !important; }
.dark-grey-text                         { color: #4f4f4f !important; }
.grey-text                              { color: #757575 !important; }
.light-grey-text                        { color: #b0b0b0 !important; }
.red-text                               { color: #f44336 !important; }
.pink-text                              { color: #e91e63 !important; }
.purple-text                            { color: #9c27b0 !important; }
.deep-purple-text                       { color: #673ab7 !important; }
.indigo-text                            { color: #3f51b5 !important; }
.blue-text                              { color: #2196f3 !important; }
.light-blue-text                        { color: #03a9f4 !important; }
.cyan-text                              { color: #00bcd4 !important; }
.teal-text                              { color: #009688 !important; }
.green-text                             { color: #4caf50 !important; }
.light-green-text                       { color: #8bc34a !important; }
.lime-text                              { color: #cddc39 !important; }
.yellow-text                            { color: #ffeb3b !important; }
.amber-text                             { color: #ffc107 !important; }
.orange-text                            { color: #ff9800 !important; }
.deep-orange-text                       { color: #ff5722 !important; }
.brown-text                             { color: #795548 !important; }
.blue-grey-text                         { color: #607d8b !important; }

/* MDB context-override: when .text-white / .white-text wraps a tile, the
   inner labels should still be white, even if they have .black-text or
   .dark-grey-text from the original MDB-on-light design. Dashboards put
   .black-text labels on dark tile backgrounds. */
.text-white .black-text,
.text-white .dark-grey-text,
.text-white .grey-text,
.white-text .black-text,
.white-text .dark-grey-text,
.white-text .grey-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ---- 7. MDB background-color helper class shims --------------------------
   Same problem on the bg side. SHEQ24 templates use these on PCDA cards,
   incident-type tiles, etc.
*/
.blue-gradient                          { background: linear-gradient(40deg, #45cafc, #303f9f) !important; }
.red-gradient                           { background: linear-gradient(40deg, #ff5252, #b71c1c) !important; }
.green-gradient                         { background: linear-gradient(40deg, #66bb6a, #1b5e20) !important; }
.yellow-gradient                        { background: linear-gradient(40deg, #ffeb3b, #f57f17) !important; }
.purple-gradient                        { background: linear-gradient(40deg, #ce93d8, #6a1b9a) !important; }
.peach-gradient                         { background: linear-gradient(40deg, #ffd54f, #e91e63) !important; }
.aqua-gradient                          { background: linear-gradient(40deg, #2096ff, #05ffa3) !important; }

.lighten-1                              { filter: brightness(1.1); }
.lighten-2                              { filter: brightness(1.2); }
.darken-1                               { filter: brightness(0.9); }
.darken-2                               { filter: brightness(0.8); }

/* ---- 8. MDB structural classes commonly referenced ---------------------- */
.card-cascade                           { /* MDB cascade — give base BS5 card look */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    border-radius: 0.5rem;
    background: #fff;
}
/* .narrower — MDB-faithful cascade metrics (2026-07-06, PDCA polish).
   The previous bare shim (.narrower { margins on EVERYTHING }) lifted and
   squeezed the whole card AND its header, so coloured headers rendered
   narrower than their content (PDCA tiles wider than the PLAN strip) and
   columns crowded upward. Real MDB had NO bare .narrower rule — it pushed
   the CARD down and lifted only the header INSIDE it:
     .card.card-cascade.narrower                      { margin-top: 1.25rem }
     .card.card-cascade.narrower .view.view-cascade   { margin-top: -1.25rem;
                                                        margin-left/right: 4% }
   The mx-4 utility (1.5rem !important) present on every header wins over the
   4%, which aligns header edges exactly with px-4 tile insets — the clean
   look of the original dashboard. Verified: every .narrower in the fleet is
   one of these two shapes (card panel-cascade narrower / view view-cascade
   ... narrower), so the contextual rules cover 100% of usage. */
.card.panel-cascade.narrower,
.card.card-cascade.narrower {
    margin-top: 1.25rem;
    margin-left: 0;
    margin-right: 0;
}
.card.panel-cascade .view.view-cascade,
.card.card-cascade .view.view-cascade {
    border-radius: 0.25rem;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.card.panel-cascade.narrower .view.view-cascade,
.card.card-cascade.narrower .view.view-cascade {
    margin-top: -1.25rem;
    margin-left: 4%;
    margin-right: 4%;
}
.font-weight-bold                       { font-weight: 700 !important; }
.z-depth-1                              { box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }
.z-depth-2                              { box-shadow: 0 4px 8px 0 rgba(0,0,0,.16), 0 6px 20px 0 rgba(0,0,0,.19); }
.z-depth-3                              { box-shadow: 0 8px 17px 0 rgba(0,0,0,.16), 0 12px 50px 0 rgba(0,0,0,.19); }
.z-depth-1-half                         { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

/* End Phase 7.1 shims */

/* ========================================================================= */
/* Phase 7.10 — PDF-comparison audit fixes                                    */
/* (See audits/bootstrap/phase7-frontend-audit-pdf-comparison.md for the      */
/*  full audit with severity codes C1/C2/.../M8.)                             */
/* ========================================================================= */

/* ---- C1: Manage-Open tile labels invisible (white on white card) -------- */
/* The tile wrapper has .text-white for a dark-card variant, but inside it    */
/* sit labels with .black-text that should stay readable on the white card.   */
/* Bump specificity so .black-text wins inside cascading-admin-card scopes.   */
.cascading-admin-card .black-text,
.cascading-admin-card.text-white .black-text,
.card.text-white .black-text {
    color: #1c3f59 !important;
}
.cascading-admin-card .dark-grey-text,
.cascading-admin-card.text-white .dark-grey-text,
.card.text-white .dark-grey-text {
    color: #424242 !important;
}

/* ---- C2: .btn-primary text invisible on dark navy bg -------------------- */
/* Metronic body text color (#3E3938) bled into .btn-primary which uses      */
/* dark navy bg. Force white text so the button labels are readable.         */
.btn-primary,
.btn.btn-primary {
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: #ffffff !important;
}

/* Same fix for the other strong-color BS button variants — many of these    */
/* had their text color reset by Metronic's reset. Force readable text.      */
.btn-success, .btn-danger, .btn-info, .btn-warning,
.btn-secondary, .btn-dark {
    color: #ffffff !important;
}
.btn-warning, .btn-light {
    /* .btn-warning is bright yellow; white text is unreadable. Use dark.    */
}
.btn-warning { color: #212529 !important; }
.btn-light   { color: #212529 !important; }

/* ---- C5: Success toast position overlaps user dropdown chip ------------- */
/* The auth-flow toast was fixed to top:0 right:0, sitting directly on top   */
/* of the user-profile chip. Push it below the navbar.                        */
.toast,
.toast-container,
.alert.alert-success.alert-dismissible,
.message-success-toast,
#toast-container > .toast {
    top: 70px !important;
}
/* Some toasts use .position-fixed without a top class; cover those too */
.position-fixed.top-0 {
    top: 70px !important;
}

/* ---- H1: Manage-Open metric numbers rendered bright orange -------------- */
/* The template emits inline style="color:var(--sheq-block-bg) !important"   */
/* on the h3 — which gives them the orange tile-background color, jarring on */
/* a white card. Override to dark navy (which matches the PDF reference).    */
/* Note: inline style with !important wins by spec unless we use a more      */
/* specific selector + !important. The :is() trick bumps specificity.       */
.cascading-admin-card .data > h3,
.cascading-admin-card .data > h3 > span,
.cascading-admin-card .data h3[style*="--sheq-block-bg"],
.cascading-admin-card .data h3[style*="--sheq-block-bg"] > span {
    color: #1c3f59 !important;
}

/* ---- H2: Dashboard tab strip lost UPPERCASE ----------------------------- */
/* DOM confirmed via DevTools — the SHEQ24 dashboard tab strip lives inside */
/* .tabbable.tabbable-custom > .nav.nav-tabs but the inner pill is actually */
/* <button class="btn btn-white"><a>NCR | 0</a></button> — i.e. .nav-link  */
/* is NOT used. Target the button + anchor directly.                       */
.tabbable.tabbable-custom .nav-tabs .nav-link,
.tabbable.tabbable-custom .nav-tabs .btn,
.tabbable.tabbable-custom .nav-tabs .btn a,
.tabbable.tabbable-custom .nav-tabs > li > a,
.tabbable.tabbable-custom .nav-tabs > li > button,
.tabbable-full-width .nav-tabs .nav-link,
.tabbable-full-width .nav-tabs .btn,
.tabbable-full-width .nav-tabs .btn a {
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 600;
}

/* ---- H3: Dashboard tab strip overflows on 1440 viewport ---------------- */
/* Force horizontal scroll instead of wrap. Trim per-pill padding too.     */
.tabbable.tabbable-custom .nav-tabs,
.tabbable-full-width .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: thin;
}
.tabbable.tabbable-custom .nav-tabs .nav-link,
.tabbable.tabbable-custom .nav-tabs .btn,
.tabbable-full-width .nav-tabs .nav-link,
.tabbable-full-width .nav-tabs .btn {
    white-space: nowrap;
    padding: 0.4rem 0.75rem;
}

/* ---- M1: required-field orange border is too aggressive ---------------- */
/* The original .critical_field rule emits border-color:#e54519 (bright      */
/* orange-red). PDF baseline used a softer pink for "required". Lighten.    */
.critical_field {
    border-color: #f4a59f !important;          /* softer pink */
    background-color: rgba(244, 165, 159, 0.04);
}
/* Keep the bright color for genuine validation errors (BS5 .is-invalid).   */
.critical_field.is-invalid,
.critical_field:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #e54519 !important;
    background-color: rgba(229, 69, 25, 0.05);
}

/* ---- M4: Sidebar item "Department Performance" wraps ------------------- */
/* Allow long sidebar labels to wrap onto two lines cleanly OR truncate     */
/* with ellipsis. Two-line wrap with smaller line-height looks better.     */
.left-sidebar .sidebar-nav a,
#sidebarnav a,
aside .menu-link {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- M7: SHEQ24 Mailbox button poor contrast --------------------------- */
/* Currently orange bg + dark text. Restore to dark navy bg + white text.  */
/* Actual selector confirmed via DevTools: id=messagesBoxBtn + class       */
/* .card-heading_blocks (the SHEQ24 custom button class used in topbar).   */
#messagesBoxBtn,
.card-heading_blocks,
.btn.card-heading_blocks,
a[id="messagesBoxBtn"],
.sheq24-mailbox-btn,
.btn.sheq24-mailbox,
.btn.sheq-mailbox {
    background-color: #1c3f59 !important;
    border-color: #1c3f59 !important;
    color: #ffffff !important;
    text-transform: uppercase;
}
#messagesBoxBtn:hover,
.card-heading_blocks:hover,
.btn.card-heading_blocks:hover,
.sheq24-mailbox-btn:hover {
    background-color: #163448 !important;
    color: #ffffff !important;
}
/* Make sure the inner icon + label both inherit the white */
#messagesBoxBtn i,
#messagesBoxBtn span,
.card-heading_blocks i,
.card-heading_blocks span {
    color: #ffffff !important;
}

/* ---- General contrast safety: any orange button gets white text -------- */
/* If a button is on the SHEQ orange (#ee6600), its text must be white, not */
/* dark navy. PDF reference had this; Metronic reset broke it.              */
[style*="background-color: #ee6600"],
[style*="background:#ee6600"],
[style*="background-color:#ee6600"],
.bg-orange, .btn-orange {
    color: #ffffff !important;
}
[style*="background-color: #ee6600"] a,
[style*="background-color: #ee6600"] span,
[style*="background:#ee6600"] a,
[style*="background:#ee6600"] span {
    color: #ffffff !important;
}

/* ---- M3: Footer "© 2026 SHEQ24 Software" hidden on dashboards ---------- */
/* Footer template IS included on My Dashboard and Company Dashboard but    */
/* Metronic's content wrapper clips it. Force-visible with a safe bottom    */
/* anchor and decent typography.                                            */
footer.footer {
    display: block !important;
    visibility: visible !important;
    padding: 1rem 1.5rem !important;
    color: #6b7280;
    font-size: 0.8125rem;
    border-top: 1px solid #eef0f3;
    background: #fff;
    margin-top: 1.5rem;
}

/* ---- M5: Page-title consistency ---------------------------------------- */
/* Pages have wildly different title treatments (two-tone hero vs small h3  */
/* vs nothing). Normalise the small h3 variant up to the page-title size    */
/* used on Documents v2.0 / Audits headers — dark navy, medium weight.      */
.page-title,
.content-header h1,
.content-header h3,
.kt-subheader__title {
    color: #1c3f59 !important;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0.5rem 0 1rem;
}

/* End Phase 7.10 fixes */

/* ======================================================================== */
/* Phase 9 F5 — Modal-header consistency + visible close X                  */
/* Decision (Henrick, 2026-05-29): ALL modal headers dark navy.             */
/* Was: 1077 modals forced navy via inline style, ~1729 used the BS5        */
/* default light header -> inconsistent, and the BS5 .btn-close (dark SVG)  */
/* was invisible on the navy ones. One rule set makes every header navy     */
/* with white title + a white, visible close X. Excludes the in-app guide   */
/* drawer header (.sheq-guide-header) which owns its own chrome.            */
/* custom.css loads last, so these win without fighting specificity.        */
.modal-header:not(.sheq-guide-header) {
    background: var(--sheq-sidebar-bg, #1c3f59) !important;
    color: #fff;
    border-bottom: 0;
}
.modal-header:not(.sheq-guide-header) .modal-title,
.modal-header:not(.sheq-guide-header) h1,
.modal-header:not(.sheq-guide-header) h2,
.modal-header:not(.sheq-guide-header) h3,
.modal-header:not(.sheq-guide-header) h4,
.modal-header:not(.sheq-guide-header) h5,
.modal-header:not(.sheq-guide-header) h6 {
    color: #fff;
}
/* BS5 .btn-close is a dark SVG; invert it to white so the X shows on navy. */
.modal-header:not(.sheq-guide-header) .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.modal-header:not(.sheq-guide-header) .btn-close:hover {
    opacity: 1;
}
/* End Phase 9 F5 */

/* ======================================================================== */
/* Phase 9 F1 — floating close X for modals with no modal-header.           */
/* The JS guard in main.js (sheqEnsureModalClose) injects .sheq-injected-    */
/* close into any modal lacking an X (incl. AJAX 'sheqModal' fragments).    */
/* Position it top-right of the content box so it never collides with body. */
.sheq-close-host { position: relative; }
.sheq-injected-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 1056;
}
/* End Phase 9 F1 */

/* ======================================================================== */
/* Phase 9 T1 — Table consistency: standard action button + sticky header.  */
/* See audits/bootstrap/table-consistency-action-plan.md.                   */
/* .btn-table-action centralises the cog/dropdown toggle that was inlined   */
/* ~1,199x as style="...background:#17a589;font-size:11px;...". Colour is    */
/* reproduced EXACTLY (#17a589) so swapping inline->class is a pure          */
/* no-visual-change refactor. .is-muted = the "not my record" grey variant. */
.btn-table-action {
    font-size: 11px;
    border-radius: 0 !important;
    color: #fff !important;
    background: #17a589 !important;
    text-decoration: none;
}
.btn-table-action.is-muted {
    color: #232323 !important;
    background: #efefef !important;
}
/* Opt-in sticky header for tall registers (no pagination = header scrolls   */
/* away). Add class="... sticky-head" to the <table>. table-responsive       */
/* provides the scroll container.                                            */
.table-responsive .table.sticky-head > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sheq-sidebar-bg, #1c3f59);
    color: #fff;
}
/* End Phase 9 T1 */

/* ======================================================================== */
/* Phase 9 L12.2 — star-rating widget (replaces bootstrap-rating.js).        */
/* Enhanced from <input class="rating"> by sheqInitStarRating() in main.js.  */
.sheq-star-rating {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.sheq-star-rating .sheq-star {
    color: #d0d5dd;
    padding: 0 1px;
    transition: color 0.1s ease;
}
.sheq-star-rating .sheq-star.on,
.sheq-star-rating .sheq-star:hover {
    color: #f5a623;
}
.sheq-star-rating .sheq-star:focus-visible {
    outline: 2px solid var(--sheq-sidebar-bg, #1c3f59);
    outline-offset: 1px;
}
/* End Phase 9 L12.2 */

/* ======================================================================== */
/* Phase 9 T2 — make DataTables filter (search) + length (rows) controls    */
/* clearly visible. The default DataTables controls are bare/unstyled and    */
/* read as plain text on the page; this gives them a proper bordered field   */
/* + a coloured label so users can see the Filter box and rows selector.     */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sheq-sidebar-bg, #1c3f59);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #c4ccd6;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    margin-left: 0.4rem;
    font-weight: 400;
    color: #232323;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    min-height: 34px;
}
.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--sheq-sidebar-bg, #1c3f59);
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(28, 63, 89, 0.18);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.6rem;
}
/* End Phase 9 T2 */