/**
 * Custom Bootstrap Table Theme
 * Override bootstrap-table.min.css with your custom colors and theme
 * 
 * Color Scheme Configuration:
 * Primary Color: #4A90E2 (Blue)
 * Success Color: #7CB342 (Green)
 * Danger Color: #E74C3C (Red)
 * Warning Color: #F39C12 (Orange)
 * Info Color: #3498DB (Light Blue)
 * 
 * To change the theme, modify the CSS variables or update the color values below
 */

:root {
  /* Primary Colors */
  --bs-table-primary: #4A90E2;
  --bs-table-primary-light: rgba(74, 144, 226, 0.1);
  --bs-table-primary-dark: #2E5C99;
  
  /* Table Colors */
  --bs-table-bg: #ffffff;
  --bs-table-header-bg: #f8f9fa;
  --bs-table-header-color: #212529;
  --bs-table-border-color: #dee2e6;
  --bs-table-hover-bg: #f5f5f5;
  --bs-table-active-bg: #e3f2fd;
  
  /* Accent Colors */
  --bs-table-success: #7CB342;
  --bs-table-danger: #E74C3C;
  --bs-table-warning: #F39C12;
  --bs-table-info: #3498DB;
}

/* =====================================================
   Header Styling
   ===================================================== */

.bootstrap-table .fixed-table-container .table thead th {
  background-color: var(--bs-table-header-bg) !important;
  color: var(--bs-table-header-color) !important;
  border-bottom: 2px solid var(--bs-table-border-color) !important;
  font-weight: 600 !important;
}

.bootstrap-table .fixed-table-container .table thead th .th-inner {
  color: var(--bs-table-header-color) !important;
  padding: 0.875rem 0.75rem !important;
}

/* =====================================================
   Sortable Headers
   ===================================================== */

.bootstrap-table .fixed-table-container .table thead th .sortable {
  color: var(--bs-table-primary) !important;
}

.bootstrap-table .fixed-table-container .table thead th .sortable:hover {
  background-color: var(--bs-table-primary-light) !important;
  cursor: pointer !important;
}

/* =====================================================
   Row Styling
   ===================================================== */

.bootstrap-table .fixed-table-container .table tbody tr {
  border-bottom: 1px solid var(--bs-table-border-color) !important;
  transition: background-color 0.2s ease-in-out !important;
}

.bootstrap-table .fixed-table-container .table tbody tr:hover {
  background-color: var(--bs-table-hover-bg) !important;
}

.bootstrap-table .fixed-table-container .table tbody tr.selected {
  background-color: var(--bs-table-active-bg) !important;
}

.bootstrap-table .fixed-table-container .table tbody tr.selected td {
  background-color: transparent !important;
}

.bootstrap-table .fixed-table-container .table tbody td {
  padding: 0.75rem !important;
  vertical-align: middle !important;
}

/* =====================================================
   Alternating Row Colors (Striped)
   ===================================================== */

.bootstrap-table .fixed-table-container .table tbody tr:nth-child(even) {
  background-color: #fafafa !important;
}

.bootstrap-table .fixed-table-container .table tbody tr:nth-child(even):hover {
  background-color: #f5f5f5 !important;
}

/* =====================================================
   Toolbar & Controls
   ===================================================== */

.bootstrap-table .fixed-table-toolbar {
  background-color: #f8f9fa !important;
  border: 1px solid var(--bs-table-border-color) !important;
  border-bottom: none !important;
  padding: 10px 15px !important;
  border-radius: 4px 4px 0 0 !important;
}

.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search {
  margin: 5px 0 !important;
}

.bootstrap-table .fixed-table-toolbar .search input {
  border: 1px solid var(--bs-table-border-color) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
}

.bootstrap-table .fixed-table-toolbar .search input:focus {
  border-color: var(--bs-table-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem var(--bs-table-primary-light) !important;
}

/* =====================================================
   Buttons in Toolbar
   ===================================================== */

.bootstrap-table .fixed-table-toolbar .btn-group .btn {
  background-color: #fff !important;
  border: 1px solid var(--bs-table-border-color) !important;
  color: #212529 !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
}

.bootstrap-table .fixed-table-toolbar .btn-group .btn:hover {
  background-color: var(--bs-table-primary) !important;
  border-color: var(--bs-table-primary) !important;
  color: #fff !important;
}

.bootstrap-table .fixed-table-toolbar .btn-group .btn.active {
  background-color: var(--bs-table-primary) !important;
  border-color: var(--bs-table-primary) !important;
  color: #fff !important;
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu {
  border: 1px solid var(--bs-table-border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu label {
  transition: background-color 0.2s ease !important;
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu label:hover {
  background-color: var(--bs-table-primary-light) !important;
}

/* =====================================================
   Pagination
   ===================================================== */

.bootstrap-table .fixed-table-pagination {
  background-color: #f8f9fa !important;
  border: 1px solid var(--bs-table-border-color) !important;
  border-top: none !important;
  padding: 10px 15px !important;
  border-radius: 0 0 4px 4px !important;
}

.bootstrap-table .fixed-table-pagination .pagination {
  margin: 0 !important;
}

.bootstrap-table .fixed-table-pagination .pagination li a {
  color: var(--bs-table-primary) !important;
  border: 1px solid var(--bs-table-border-color) !important;
  padding: 0.375rem 0.75rem !important;
}

.bootstrap-table .fixed-table-pagination .pagination li a:hover {
  background-color: var(--bs-table-primary) !important;
  border-color: var(--bs-table-primary) !important;
  color: #fff !important;
}

.bootstrap-table .fixed-table-pagination .pagination li.active a {
  background-color: var(--bs-table-primary) !important;
  border-color: var(--bs-table-primary) !important;
  color: #fff !important;
}

.bootstrap-table .fixed-table-pagination .pagination li.disabled a {
  color: #6c757d !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.bootstrap-table .fixed-table-pagination .pagination-detail {
  color: #212529 !important;
}

/* =====================================================
   Checkboxes & Selections
   ===================================================== */

.bootstrap-table .table .bs-checkbox label input[type="checkbox"],
.bootstrap-table .table .bs-checkbox label input[type="radio"] {
  accent-color: var(--bs-table-primary) !important;
}

/* =====================================================
   Loading State
   ===================================================== */

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .animation-dot,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .animation-wrap::after,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .animation-wrap::before {
  background-color: var(--bs-table-primary) !important;
}

/* =====================================================
   Dark Table Variant
   ===================================================== */

.bootstrap-table .fixed-table-container.table-dark {
  --bs-table-bg: #212529;
  --bs-table-header-bg: #1a1d20;
  --bs-table-header-color: #ffffff;
  --bs-table-border-color: #454d55;
  --bs-table-hover-bg: #2c3137;
  --bs-table-active-bg: #3d4451;
}

.bootstrap-table .fixed-table-container.table-dark .table {
  background-color: var(--bs-table-bg) !important;
  color: #ffffff !important;
}

.bootstrap-table .fixed-table-container.table-dark .table thead th {
  background-color: var(--bs-table-header-bg) !important;
  border-bottom-color: var(--bs-table-border-color) !important;
}

.bootstrap-table .fixed-table-container.table-dark .table tbody tr {
  border-bottom-color: var(--bs-table-border-color) !important;
}

.bootstrap-table .fixed-table-container.table-dark .table tbody tr:hover {
  background-color: var(--bs-table-hover-bg) !important;
}

.bootstrap-table .fixed-table-container.table-dark .table tbody tr.selected {
  background-color: var(--bs-table-active-bg) !important;
}

.bootstrap-table .fixed-table-container.table-dark .fixed-table-toolbar {
  background-color: #1a1d20 !important;
  border-color: var(--bs-table-border-color) !important;
}

.bootstrap-table .fixed-table-container.table-dark .fixed-table-pagination {
  background-color: #1a1d20 !important;
  border-color: var(--bs-table-border-color) !important;
}

/* =====================================================
   Table Variants (Success, Danger, Warning, Info)
   ===================================================== */

.bootstrap-table .table tbody tr.table-success {
  background-color: rgba(124, 179, 66, 0.1) !important;
}

.bootstrap-table .table tbody tr.table-success:hover {
  background-color: rgba(124, 179, 66, 0.2) !important;
}

.bootstrap-table .table tbody tr.table-danger {
  background-color: rgba(231, 76, 60, 0.1) !important;
}

.bootstrap-table .table tbody tr.table-danger:hover {
  background-color: rgba(231, 76, 60, 0.2) !important;
}

.bootstrap-table .table tbody tr.table-warning {
  background-color: rgba(243, 156, 18, 0.1) !important;
}

.bootstrap-table .table tbody tr.table-warning:hover {
  background-color: rgba(243, 156, 18, 0.2) !important;
}

.bootstrap-table .table tbody tr.table-info {
  background-color: rgba(52, 152, 219, 0.1) !important;
}

.bootstrap-table .table tbody tr.table-info:hover {
  background-color: rgba(52, 152, 219, 0.2) !important;
}

/* =====================================================
   Responsive Cards
   ===================================================== */

.bootstrap-table .fixed-table-container .table tbody tr .card-view {
  background-color: var(--bs-table-bg) !important;
  border: 1px solid var(--bs-table-border-color) !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
  padding: 10px !important;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
  color: var(--bs-table-primary) !important;
  font-weight: 600 !important;
}

/* =====================================================
   No Records Found
   ===================================================== */

.bootstrap-table .fixed-table-container .table tbody tr.no-records-found td {
  text-align: center !important;
  padding: 20px !important;
  color: #6c757d !important;
  font-style: italic !important;
}

/* =====================================================
   Detail View
   ===================================================== */

.bootstrap-table .detail-view-icon {
  color: var(--bs-table-primary) !important;
}

.bootstrap-table .detail-view-icon:hover {
  color: var(--bs-table-primary-dark) !important;
  cursor: pointer !important;
}

/* =====================================================
   Mobile Responsive
   ===================================================== */

@media (max-width: 768px) {
  .bootstrap-table .fixed-table-toolbar {
    flex-direction: column !important;
  }

  .bootstrap-table .fixed-table-toolbar .bs-bars,
  .bootstrap-table .fixed-table-toolbar .columns,
  .bootstrap-table .fixed-table-toolbar .search {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .bootstrap-table .fixed-table-toolbar .search input {
    width: 100% !important;
  }
}

/* =====================================================
   Custom Utility Classes
   ===================================================== */

/* Compact Table */
.bootstrap-table.table-compact .fixed-table-container .table thead th,
.bootstrap-table.table-compact .fixed-table-container .table tbody td {
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
}

/* Spacious Table */
.bootstrap-table.table-spacious .fixed-table-container .table thead th,
.bootstrap-table.table-spacious .fixed-table-container .table tbody td {
  padding: 1rem !important;
}

/* Bordered Table */
.bootstrap-table.table-bordered .fixed-table-container .table {
  border-collapse: collapse !important;
}

.bootstrap-table.table-bordered .fixed-table-container .table td,
.bootstrap-table.table-bordered .fixed-table-container .table th {
  border: 1px solid var(--bs-table-border-color) !important;
}

/* Striped Table */
.bootstrap-table.table-striped .fixed-table-container .table tbody tr:nth-child(odd) {
  background-color: #f8f9fa !important;
}

.bootstrap-table.table-striped .fixed-table-container .table tbody tr:nth-child(odd):hover {
  background-color: #e9ecef !important;
}

/* =====================================================
   Scrollbar Styling (Webkit browsers)
   ===================================================== */

.bootstrap-table .fixed-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.bootstrap-table .fixed-table-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb {
  background: var(--bs-table-border-color);
  border-radius: 4px;
}

.bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb:hover {
  background: var(--bs-table-primary);
}
