.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                               { margin-left: 1rem !important; margin-right: 1rem !important; margin-top: -1rem !important; }
.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 */