:root {
    color-scheme: light;
}
body { font-family: 'Inter', sans-serif; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
#scrollable-table thead th {
    position: sticky;
    top: 0;
    background-color: #ffffff; 
    color: #111827 !important; /* Tailwind's gray-900 for high visibility */
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb; /* Stronger separation from rows */
    z-index: 10; /* Ensures it stays above row content */
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}


/* Target the sorting arrows specifically */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important; /* Optional: if using custom icons */
    color: #374151 !important; 
}

/* If your library uses the newer DataTables 2.0 pseudo-elements */
table.dataTable thead th:before,
table.dataTable thead th:after {
    color: #9ca3af !important; /* Light gray for inactive arrows */
    opacity: 1 !important;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    color: #2563eb !important; /* Blue for the active sort direction */
}

/* 1. Base row color (White background, Dark text) */
table.dataTable tbody tr {
    background-color: #ffffff !important; 
    color: #333333 !important;           
}

/* 2. Stripe color (Very light grey for 'odd' rows) */
table.dataTable.stripe tbody tr.odd, 
table.dataTable.display tbody tr.odd {
    background-color: #f9f9f9 !important; 
}

/* 3. Hover state (Light blue or grey highlight) */
table.dataTable.hover tbody tr:hover, 
table.dataTable.display tbody tr:hover {
    background-color: #f1f1f1 !important;
}

/* 4. Fix for the "Action" icons and secondary text (e.g., 'VIEW VEHICLES') */
table.dataTable td {
    border-bottom: 1px solid #eeeeee !important; /* Subtle row dividers */
}

table.dataTable td span, 
table.dataTable td i {
    color: #666666 !important; /* Makes sub-text/icons visible but softer */
}


.dt-search input {
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb;
}

.dt-length select {
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb;
}

.dt-paging button {
    background: #fff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb;
}

.dt-paging .current {
    background: #2563eb !important;
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {

  nav[aria-label="pagination"] a {
      background-color: #ffffff !important;
      color: #374151 !important;
      border-color: #e5e7eb !important;
  }

  nav[aria-label="pagination"] a[aria-current="page"] {
      background-color: #2563eb !important;
      color: #ffffff !important;
      border-color: #2563eb !important;
  }

  nav[aria-label="pagination"] a[aria-disabled="true"] {
      color: #9ca3af !important;
      background-color: #ffffff !important;
  }

}