/* Dark mode and Tabulator styling */

/* Global font family */
body {
  font-family: 'JetBrains Mono', monospace !important;
}

* {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.dark-mode .card {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}

body.dark-mode .navbar {
  background-color: #2d2d2d !important;
}

body.dark-mode .table {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
}

/* Font family for Tabulator tables */
.tabulator {
  font-family: 'JetBrains Mono', monospace !important;
}

.tabulator-header {
  font-family: 'JetBrains Mono', monospace !important;
}

.tabulator-cell {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Tabulator dark theme overrides — apply when body has .dark-mode */
body.dark-mode .tabulator,
body.dark-mode .tabulator .tabulator-header,
body.dark-mode .tabulator .tabulator-header .tabulator-col,
body.dark-mode .tabulator .tabulator-row,
body.dark-mode .tabulator .tabulator-cell,
body.dark-mode .tabulator .tabulator-footer,
body.dark-mode .tabulator .tabulator-paginator {
  background-color: #1e1e1e !important;
  color: #e6e6e6 !important;
  border-color: #2f2f2f !important;
}

body.dark-mode .tabulator .tabulator-header {
  background-color: #232323 !important;
  color: #f1f1f1 !important;
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .tabulator .tabulator-header .tabulator-col {
  color: #e6e6e6 !important;
}

body.dark-mode .tabulator .tabulator-row:nth-child(even) {
  background-color: #1b1b1b !important;
}

body.dark-mode .tabulator .tabulator-row:nth-child(odd) {
  background-color: #171717 !important;
}

body.dark-mode .tabulator .tabulator-cell {
  background-color: transparent !important;
  color: #e6e6e6 !important;
  border-right: 1px solid #2b2b2b !important;
}

body.dark-mode .tabulator .tabulator-row .tabulator-cell .tabulator-cell-value {
  color: #e6e6e6 !important;
}

body.dark-mode .tabulator .tabulator-footer,
body.dark-mode .tabulator .tabulator-paginator {
  background-color: #212121 !important;
  color: #e6e6e6 !important;
  border-top: 1px solid #333 !important;
}

/* Improve contrast for selected/hovered rows */
body.dark-mode .tabulator .tabulator-row.tabulator-select {
  background-color: #2a2a2a !important;
}

body.dark-mode .tabulator .tabulator-row:hover {
  background-color: #2a2a2a !important;
}

/* Make column resize handles and sort arrows visible */
body.dark-mode .tabulator .tabulator-col .tabulator-col-resize-handle,
body.dark-mode .tabulator .tabulator-col .tabulator-col-sorter {
  filter: brightness(150%) !important;
}
/* Keep layout/spacing to Tabulator defaults. Only color overrides for dark mode below. */
/* Dark mode context menu */
body.dark-mode .tabulator-menu {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

body.dark-mode .tabulator-menu .tabulator-menu-item {
  color: #ffffff !important;
  border-bottom-color: #404040 !important;
  background: transparent !important;
}

body.dark-mode .tabulator-menu .tabulator-menu-item:hover {
  background-color: #404040 !important;
}

body.dark-mode .tabulator-menu .tabulator-menu-item .tabulator-menu {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}


/* Keep dropdown/edit-list layout to Tabulator defaults. Only colour overrides below. */
body.dark-mode .tabulator-edit-list,
body.dark-mode .tabulator-edit-select-list {
  background-color: #495057 !important;
  border: 1px solid #6c757d !important;
  color: #f8f9fa !important;
}

body.dark-mode .tabulator-edit-list .tabulator-edit-list-item,
body.dark-mode .tabulator-edit-select-list .tabulator-edit-list-item {
  background-color: #495057 !important;
  color: #f8f9fa !important;
}

body.dark-mode .tabulator-edit-list .tabulator-edit-list-item:hover,
body.dark-mode .tabulator-edit-select-list .tabulator-edit-list-item:hover {
  background-color: #6c757d !important;
}

/* Override light-red inline highlight used in JS (element.style.backgroundColor = "#FFCDD2")
   so new/edited rows remain highlighted in dark mode without changing layout. */
body.dark-mode .tabulator .tabulator-row[style*="#FFCDD2"],
body.dark-mode .tabulator .tabulator-row[style*="#ffcdd2"],
body.dark-mode .tabulator .tabulator-row *[style*="#FFCDD2"],
body.dark-mode .tabulator .tabulator-row *[style*="#ffcdd2"] {
  background-color: #3a1a1a !important; /* dark-red/charcoal highlight */
}

/* Also handle cases where JS may set RGB values inline (e.g., rgb(255, 205, 210)) */
body.dark-mode .tabulator .tabulator-row[style*="rgb(255, 205, 210)"],
body.dark-mode .tabulator .tabulator-row *[style*="rgb(255, 205, 210)"] {
  background-color: #3a1a1a !important;
}