/* DataTable Production Fixes - Balanced Layout */

/* Thin scrollbar for DataTable */
.table-responsive,
.table,
[class*="table"] {
  /* Firefox - thin scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

/* Webkit browsers (Chrome, Safari, Edge) - thin scrollbar */
.table-responsive::-webkit-scrollbar,
.table::-webkit-scrollbar,
[class*="table"]::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.table-responsive::-webkit-scrollbar-track,
.table::-webkit-scrollbar-track,
[class*="table"]::-webkit-scrollbar-track {
  background: transparent !important;
}

.table-responsive::-webkit-scrollbar-thumb,
.table::-webkit-scrollbar-thumb,
[class*="table"]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-radius: 2px !important;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.table::-webkit-scrollbar-thumb:hover,
[class*="table"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* React Data Table Component specific fixes (if using react-data-table-component) */
.rdt_Table,
.rdt_TableBody,
.rdt_TableWrapper,
[class*="rdt_"] {
  /* Firefox - thin scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

/* Webkit browsers (Chrome, Safari, Edge) - thin scrollbar */
.rdt_Table::-webkit-scrollbar,
.rdt_TableBody::-webkit-scrollbar,
.rdt_TableWrapper::-webkit-scrollbar,
[class*="rdt_"]::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.rdt_Table::-webkit-scrollbar-track,
.rdt_TableBody::-webkit-scrollbar-track,
.rdt_TableWrapper::-webkit-scrollbar-track,
[class*="rdt_"]::-webkit-scrollbar-track {
  background: transparent !important;
}

.rdt_Table::-webkit-scrollbar-thumb,
.rdt_TableBody::-webkit-scrollbar-thumb,
.rdt_TableWrapper::-webkit-scrollbar-thumb,
[class*="rdt_"]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-radius: 2px !important;
}

.rdt_Table::-webkit-scrollbar-thumb:hover,
.rdt_TableBody::-webkit-scrollbar-thumb:hover,
.rdt_TableWrapper::-webkit-scrollbar-thumb:hover,
[class*="rdt_"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3) !important;
}