/*
  Final Fix for Scrollbar Styling: Maximize Specificity.
  We explicitly link every pseudo-element to the .table-responsive class,
  which is the element generating the horizontal scrollbar.
*/

/* --- 1. Base Styles (unchanged - ensures file is loading) --- */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
}

/* ... other base styles ... */
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-responsive {
  display: block;
  width: 100%;
  /* This is the element that owns the scrollbar */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 2. Highly Specific Scrollbar Beautification --- */

/* --- Global Scrollbar Variable Definitions --- */
/* Define variables on the highest element (root) for easy color management */
:root {
  /* Set vertical scrollbar to always show (Constant Scrollbar requirement) */
  overflow-y: scroll !important;
  
  --scrollbar-thumb-color: #888;
  --scrollbar-track-color: #f1f1f1;
  --scrollbar-size: 8px;
}

/* --- Global Scrollbar Dimensions (Vertical) --- */
/* Target the element that scrolls the page (body or html) */
body::-webkit-scrollbar {
  width: var(--scrollbar-size) !important;
}

/* --- Local Table Scrollbar Dimensions (Horizontal Roller) --- */
/* Target the element that scrolls the table */
.table-responsive::-webkit-scrollbar {
  height: var(--scrollbar-size) !important; /* Horizontal Roller Height */
  width: var(--scrollbar-size) !important;  /* Consistent width */
}

/* --- Scrollbar Track Styles (Applied globally and locally) --- */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color) !important;
  border-radius: 10px !important;
}

/* --- Scrollbar Thumb Styles (Applied globally and locally) --- */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color) !important;
  border-radius: 10px !important;
}

/* --- Scrollbar Thumb Hover State --- */
::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

/* --- Fallback for Firefox (Limited styling support) --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}