/* ===== MODERN TABLE STYLING - Based on React Table Component ===== */
/* DevExpress Table Styling with React Table.jsx colors and design */

/* Table Container */
.dx-datagrid,
.omni-gridbox {
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #f3f4f6 !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Table Header */
.dx-datagrid-headers,
.dx-datagrid-header-panel {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.dx-datagrid-table .dx-row.dx-column-lines > td,
.dx-datagrid-table .dx-row.dx-column-lines > th {
  border-right: 0 !important;
}

/* Header Cells */
.dx-datagrid .dx-header-row > td {
  background: #f9fafb !important;
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid #e5e7eb !important;
  transition: background-color 0.2s ease !important;
}

.dx-datagrid .dx-header-row > td:hover {
  background: #f3f4f6 !important;
  cursor: pointer !important;
}


/* Sort Icons */
.dx-sort-up,
.dx-sort-down,
.dx-sort {
  color: #9ca3af !important;
  transition: color 0.2s ease !important;
}

.dx-sort-up:hover,
.dx-sort-down:hover {
  color: #374151 !important;
}

/* Data Rows */
.dx-datagrid .dx-data-row {
  background: white !important;
  border-bottom: 1px solid #f3f4f6 !important;
  transition: all 0.2s ease !important;
}

.dx-datagrid .dx-data-row:hover {
  background: rgba(254, 242, 242, 0.5) !important; /* hover:bg-red-50/50 */
}

.dx-datagrid .dx-data-row.dx-selection {
  background: #fef2f2 !important;
}

.dx-datagrid .dx-data-row.dx-selection:hover {
  background: #fee2e2 !important;
}

.dx-datagrid .dx-data-row.dx-selection:active, 
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td {
  background: unset !important;
}

/* Data Cells */
.dx-datagrid .dx-data-row > td {
  padding: 16px 24px !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-right: 0 !important;
}

.dx-datagrid .dx-column-lines>td{
  border-left: 0 !important;
}

/* First column (name/primary) styling */
.dx-datagrid .dx-data-row > td:first-child {
  /* font-weight: 500 !important; */
  color: #111827 !important;
}

/* Status Badge Styling */
.status-badge,
.dx-datagrid .status-cell {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Status Colors - matching React Table */
.status-active,
.dx-datagrid .status-active {
  background: #dcfce7 !important; /* bg-green-100 */
  color: #166534 !important; /* text-green-800 */
}

.status-inactive,
.dx-datagrid .status-inactive {
  background: #f3f4f6 !important; /* bg-gray-100 */
  color: #1f2937 !important; /* text-gray-800 */
}

.status-pending,
.dx-datagrid .status-pending {
  background: #fef3c7 !important; /* bg-yellow-100 */
  color: #92400e !important; /* text-yellow-800 */
}

/* Search/Filter Panel */
.dx-datagrid-search-panel,
.dx-datagrid-filter-panel {
  background: white !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 16px 24px !important;
}

.dx-datagrid-search-panel .dx-textbox {
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  background: #f9fafb !important;
  transition: all 0.3s ease !important;
}

.dx-datagrid-search-panel .dx-textbox.dx-state-focused {
  background: white !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.dx-datagrid-search-panel .dx-textbox .dx-texteditor-input {
  padding: 12px 16px !important;
  padding-left: 48px !important;
  font-size: 14px !important;
  color: #374151 !important;
}

.dx-datagrid-search-panel .dx-textbox::before {
  content: "🔍" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9ca3af !important;
  z-index: 10 !important;
}

/* Pagination */
.dx-datagrid-pager {
  background: white !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dx-datagrid-pager .dx-info {
  color: #6b7280 !important;
  font-size: 14px !important;
}

.dx-datagrid-pager .dx-info .dx-info-text {
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Pagination Buttons */
.dx-datagrid-pager .dx-pages {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.dx-datagrid-pager .dx-page,
.dx-datagrid-pager .dx-prev-button,
.dx-datagrid-pager .dx-next-button {
  padding: 8px 12px !important;
  color: #6b7280 !important;
  background: white !important;
  border: 1px solid #d1d5db !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.dx-datagrid-pager .dx-prev-button {
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
}

.dx-datagrid-pager .dx-next-button {
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
}

.dx-datagrid-pager .dx-page:hover,
.dx-datagrid-pager .dx-prev-button:hover,
.dx-datagrid-pager .dx-next-button:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.dx-datagrid-pager .dx-page.dx-selection {
  background: #dc2626 !important;
  color: white !important;
  border-color: #dc2626 !important;
}

.dx-datagrid-pager .dx-prev-button.dx-button-disable,
.dx-datagrid-pager .dx-next-button.dx-button-disable {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Loading State */
.dx-datagrid .dx-loadpanel {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.dx-datagrid .dx-loadpanel-content {
  color: #374151 !important;
  font-weight: 500 !important;
}

/* Empty State */
.dx-datagrid .dx-empty-message {
  color: #6b7280 !important;
  font-size: 16px !important;
  padding: 48px 24px !important;
  text-align: center !important;
}

/* Selection Checkboxes */
.dx-datagrid .dx-select-checkbox {
  border-radius: 4px !important;
  border: 2px solid #d1d5db !important;
  transition: all 0.2s ease !important;
}

.dx-datagrid .dx-select-checkbox.dx-checkbox-checked {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.dx-datagrid .dx-select-checkbox:hover {
  border-color: #dc2626 !important;
}

/* Action Buttons in Table */
.dx-datagrid .action-button {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.dx-datagrid .action-button.edit {
  background: #dbeafe !important;
  color: #1e40af !important;
}

.dx-datagrid .action-button.edit:hover {
  background: #bfdbfe !important;
}

.dx-datagrid .action-button.delete {
  background: #fecaca !important;
  color: #dc2626 !important;
}

.dx-datagrid .action-button.delete:hover {
  background: #fca5a5 !important;
}

.dx-datagrid .action-button.view {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.dx-datagrid .action-button.view:hover {
  background: #e5e7eb !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dx-datagrid .dx-data-row > td,
  .dx-datagrid .dx-header-row > td {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  
  .dx-datagrid-pager {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .dx-datagrid-search-panel .dx-textbox .dx-texteditor-input {
    padding: 10px 14px !important;
    padding-left: 40px !important;
  }
}

/* Scrollbar Styling */
.dx-datagrid .dx-scrollable-scrollbar {
  background: #f3f4f6 !important;
  border-radius: 4px !important;
}

.dx-datagrid .dx-scrollable-scroll {
  background: #d1d5db !important;
  border-radius: 4px !important;
}

.dx-datagrid .dx-scrollable-scroll:hover {
  background: #9ca3af !important;
}

/* Group Row Styling */
.dx-datagrid .dx-group-row {
  background: #f9fafb !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.dx-datagrid .dx-group-row:hover {
  background: #f3f4f6 !important;
}

/* Summary Row */
.dx-datagrid .dx-datagrid-summary-item {
  background: #f9fafb !important;
  font-weight: 600 !important;
  color: #374151 !important;
  border-top: 2px solid #e5e7eb !important;
}

/* Filter Row */
.dx-datagrid .dx-filter-row {
  background: #f9fafb !important;
}

.dx-datagrid .dx-filter-row .dx-textbox {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  background: white !important;
}

.dx-datagrid .dx-filter-row .dx-textbox.dx-state-focused {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
}