/* ZenX Neon-inspired theme (minimal violet, focus on green/black/pearl) */

:root {
  /* Core palette */
  --deep-space-black: #030304;
  --lumen-green: #8DE971;
  --iridescent-pearl: #F6F2F4;
  --neon-violet: #AD96DC; /* use sparingly */

  /* Tertiary accents */
  --accent-yellow: #ECF166;
  --accent-blue: #74D1EA;
  --accent-coral: #FF7276;

  /* Derived tokens */
  --border-color: #d6d6d6;
  --muted-text: #5c5c5c;
  --shadow-soft: 0 4px 12px rgba(3, 3, 4, 0.15);
}

/* Global */
html, body {
  background-color: var(--iridescent-pearl);
  color: var(--deep-space-black);
}

a { color: var(--lumen-green); }
a:hover { color: #72d85a; }

/* Container */
.container {
  max-width: 1200px;
}

/* Header affix */
header {
  background-color: var(--deep-space-black);
  color: var(--iridescent-pearl);
  box-shadow: var(--shadow-soft);
}

/* Forms */
.form-control, .form-select {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--deep-space-black);
}
.form-control:focus, .form-select:focus {
  border-color: var(--lumen-green);
  box-shadow: 0 0 0 0.2rem rgba(141, 233, 113, 0.25);
}
.form-label { color: var(--deep-space-black); }

/* Buttons */
.btn-primary {
  background-color: var(--lumen-green) !important;
  border-color: var(--lumen-green) !important;
  color: var(--deep-space-black) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #79dc61 !important;
  border-color: #79dc61 !important;
  color: var(--deep-space-black) !important;
}

.btn-secondary {
  background-color: var(--deep-space-black) !important;
  border-color: var(--deep-space-black) !important;
  color: var(--iridescent-pearl) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: var(--iridescent-pearl) !important;
}

/* Tables */
/* Remove inner table border; rely on wrapper borders */
table { 
  border: none; 
  border-collapse: collapse; 
  width: 100% !important;
  table-layout: auto;
  position: relative;
}

/* Ensure table spans full width of container */
div[style*="overflow"] table {
  width: 100% !important;
  display: table;
  min-width: 100%;
}

/* Ensure overflow container allows full table width */
div[style*="overflow:auto"] {
  position: relative;
  width: 100%;
}

/* Remove black background from container - only apply to thead */
div[style*="overflow:auto"] {
  background-color: transparent;
}

/* Ensure table body has white background */
div[style*="overflow:auto"] table tbody {
  background-color: #ffffff;
}

/* Specifically target table within overflow container */
div[style*="overflow:auto"] table thead {
  background-color: var(--deep-space-black) !important;
  width: 100%;
  display: table-header-group;
}

div[style*="overflow:auto"] table thead tr {
  background-color: var(--deep-space-black) !important;
  width: 100%;
  display: table-row;
}

div[style*="overflow:auto"] table thead th {
  background-color: var(--deep-space-black) !important;
  display: table-cell;
}

div[style*="overflow:auto"] table tfoot {
  background-color: var(--lumen-green) !important;
  width: 100%;
  display: table-footer-group;
}

thead {
  background-color: var(--deep-space-black) !important;
  background: var(--deep-space-black) !important;
}

thead tr {
  background-color: var(--deep-space-black) !important;
  background: var(--deep-space-black) !important;
}

thead th {
  background-color: var(--deep-space-black) !important;
  background: var(--deep-space-black) !important;
  color: var(--iridescent-pearl) !important;
  padding: 10px !important;
}

/* Ensure empty th elements also get proper styling */
thead th:empty {
  background-color: var(--deep-space-black) !important;
  background: var(--deep-space-black) !important;
  min-width: 50px !important;
  padding: 10px !important;
}

/* Ensure all thead elements have black background */
table thead,
table thead tr,
table thead th {
  background-color: var(--deep-space-black) !important;
  background: var(--deep-space-black) !important;
}

/* Ensure tbody has proper white background */
table tbody {
  background-color: #ffffff;
}

table tbody td {
  background-color: transparent;
}

tfoot {
  background-color: var(--lumen-green) !important;
  background: var(--lumen-green) !important;
}

tfoot tr {
  background-color: var(--lumen-green) !important;
  background: var(--lumen-green) !important;
}

tfoot th {
  background-color: var(--lumen-green) !important;
  background: var(--lumen-green) !important;
  color: var(--deep-space-black) !important;
  padding: 10px !important;
}

/* Ensure empty th elements in footer also get proper styling */
tfoot th:empty {
  background-color: var(--lumen-green) !important;
  background: var(--lumen-green) !important;
  min-width: 50px !important;
  padding: 10px !important;
}

/* Ensure all tfoot elements have green background */
table tfoot,
table tfoot tr,
table tfoot th {
  background-color: var(--lumen-green) !important;
  background: var(--lumen-green) !important;
}

/* Ensure tbody rows have proper colors - not black! */
table tbody tr {
  background-color: #ffffff;
}

table:not(.no-alternate-color) tbody tr:nth-child(even) {
  background-color: rgba(141, 233, 113, 0.08) !important; /* subtle green tint */
}

table:not(.no-hover) tbody tr:hover {
  background-color: rgba(141, 233, 113, 0.18) !important;
}

/* Sort indicators */
table.table-sortable th.currently-sorted[data-sort-dir="asc"]::after,
.table-sortable th.currently-sorted[data-sort-dir="desc"]::after {
  color: var(--iridescent-pearl);
}

/* Search Filters UI */
.search-filters-header {
  background: var(--iridescent-pearl);
  border: 1px solid var(--border-color);
}
.search-filters-header:hover { background: #e9e9ec; }
.filters-title { color: var(--deep-space-black); }
.search-filters-body {
  background: #ffffff;
  border: 1px solid var(--border-color);
}
#filtersToggleBtn {
  background: #ffffff;
  border: 1px solid var(--border-color);
}
#filtersToggleBtn:hover { background: #f5f6f7; }

/* Search/Pivot buttons enhancements */
#searchPipeline, #generatePivot, #searchProject, #generateReport {
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(141, 233, 113, 0.25) !important;
}
#searchPipeline:hover, #generatePivot:hover, #searchProject:hover, #generateReport:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(141, 233, 113, 0.35) !important;
}

/* Pivot */
.pivot-controls {
  background-color: var(--iridescent-pearl);
  border: 1px solid var(--border-color);
}
.pivot-table-container {
   border: 2px solid var(--deep-space-black);
   border-radius: 6px;
   background-color: #ffffff;
 }

 /* Outer border for table containers: scroll wrappers and responsive wrappers */
 div[style*="overflow"],
 .table-responsive,
 #screen_section > div {
   border: 2px solid var(--deep-space-black);
   border-radius: 6px;
 }

/* Popups */
.popup .popuptext {
  background-color: var(--deep-space-black);
  color: var(--iridescent-pearl);
}
.popup .popuptext::after {
  border-color: var(--deep-space-black) transparent transparent transparent;
}

/* Toggles and sliders */
.toggle-slider { background-color: #cfcfcf; }
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--lumen-green);
}
.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 1px var(--lumen-green);
}
.custom-slider { background-color: #d1d1d1; }
.custom-slider .slider-knob {
  background-color: var(--accent-blue);
}
.custom-slider input:checked + .slider-knob {
  background-color: var(--accent-blue);
}

/* Figures/avatars */
figure {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

/* Accent utility classes */
.accent-yellow { color: var(--accent-yellow); }
.accent-blue { color: var(--accent-blue); }
.accent-coral { color: var(--accent-coral); }

/* Minimal violet accents (sparingly) */
.badge-violet { background-color: var(--neon-violet); color: var(--deep-space-black); }

/* Footer */
footer, .footer {
  background-color: var(--deep-space-black);
  color: var(--iridescent-pearl);
}