/* Hide Setting Icon  */
label.required::after {
    content: " *";
    color: red;
}

/* ------------------------------------------------------------------
   Wide-table scroll wrapper — project-standard for any modal/page table
   that exceeds the viewport in BOTH dimensions.

   Problem solved: with plain Bootstrap `.table-responsive`, the
   horizontal scrollbar appears at the BOTTOM of the table, which
   is below the visible viewport on long lists — users had to scroll
   vertically all the way down just to reach the horizontal scrollbar,
   then scroll back up to see the data.

   Fix: bound max-height so the wrapper itself stays inside the
   viewport. Scrollbars (both X and Y) sit at the wrapper's edges and
   stay reachable. Sticky thead keeps column labels visible during
   vertical scroll.

   Apply to any wide table whose row count or column count exceeds a
   typical fold. For Bootstrap modals, drop this wrapper inside
   `.modal-body`. Pair with table layout:
       <div class="scroll-x-y">
           <table class="table table-sm table-hover"> ... </table>
       </div>
   ------------------------------------------------------------------ */
.scroll-x-y {
    max-height: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #f1f3f5;
    border-radius: 6px;
}
.scroll-x-y > table {
    margin-bottom: 0;
}
.scroll-x-y thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f0fbf6;
    box-shadow: inset 0 -1px 0 #e9ecef;
}
.scroll-x-y::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.scroll-x-y::-webkit-scrollbar-thumb {
    background: #c1c8d0;
    border-radius: 5px;
}
.scroll-x-y::-webkit-scrollbar-thumb:hover {
    background: #a0a8b0;
}
.scroll-x-y::-webkit-scrollbar-track {
    background: #f8f9fa;
}

/* Compact variant for modals with smaller viewports (e.g. Add Workers). */
.scroll-x-y.scroll-sm {
    max-height: 50vh;
}