/* ============================================================
   Thin token-based scrollbars for design-system scroll areas.
   ------------------------------------------------------------
   Imported AFTER styles/tables.css in app.js so these equal-
   specificity rules override the legacy gradient scrollbar
   (.tableContainer / .table-responsive) on the new components.
   Scoped to new contexts only — legacy pages keep their style.
   ============================================================ */

.data-table-container,
.confirm-modal__scroll,
.confirm-modal .table-responsive,
.assessment-form .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) transparent;
}

.data-table-container::-webkit-scrollbar,
.confirm-modal__scroll::-webkit-scrollbar,
.confirm-modal .table-responsive::-webkit-scrollbar,
.assessment-form .table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.data-table-container::-webkit-scrollbar-track,
.confirm-modal__scroll::-webkit-scrollbar-track,
.confirm-modal .table-responsive::-webkit-scrollbar-track,
.assessment-form .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.data-table-container::-webkit-scrollbar-thumb,
.confirm-modal__scroll::-webkit-scrollbar-thumb,
.confirm-modal .table-responsive::-webkit-scrollbar-thumb,
.assessment-form .table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    background-image: none;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.data-table-container::-webkit-scrollbar-thumb:hover,
.confirm-modal__scroll::-webkit-scrollbar-thumb:hover,
.confirm-modal .table-responsive::-webkit-scrollbar-thumb:hover,
.assessment-form .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
}

/* Kill legacy arrow buttons */
.data-table-container::-webkit-scrollbar-button,
.data-table-container::-webkit-scrollbar-button:single-button,
.confirm-modal__scroll::-webkit-scrollbar-button,
.confirm-modal .table-responsive::-webkit-scrollbar-button,
.assessment-form .table-responsive::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}