/*
 * ParamQuery Grid — follow portal Theme Settings (light / dark meridian, advisory, …).
 * Uses Acorn CSS variables from html[data-color=…].
 */
div.pq-grid,
[class*="pq-grid"].pq-grid {
  color: var(--body, #4e4e4e) !important;
  background: var(--foreground, #fff) !important;
  border-color: var(--separator, #dee2e6) !important;
}

.pq-grid .pq-grid-top,
.pq-grid > .pq-grid-top,
.pq-grid .pq-grid-bottom,
.pq-grid .pq-header-outer,
.pq-grid .pq-cont-inner,
.pq-grid .pq-grid-cont,
.pq-grid .ui-widget-content {
  background: var(--foreground, #fff) !important;
  color: var(--body, #4e4e4e) !important;
  border-color: var(--separator, #dee2e6) !important;
}

.pq-grid .ui-widget-header {
  background: var(--background-light, var(--background, #f8f9fa)) !important;
  border-color: var(--separator, #dee2e6) !important;
  color: var(--body, #4e4e4e) !important;
}

.pq-grid .pq-grid-title,
.pq-grid-title {
  color: var(--body, #4e4e4e) !important;
}

.pq-toolbar,
div[class*="pq-grid"] .pq-toolbar {
  background: linear-gradient(
    to bottom,
    var(--background-light, var(--background, #f8f9fa)) 0%,
    var(--separator-light, var(--separator, #e9ecef)) 100%
  ) !important;
  border-bottom: 1px solid var(--separator, #dee2e6) !important;
}

.pq-toolbar button,
div.pq-toolbar button,
[class*="pq-toolbar"] button {
  background: var(--foreground, #fff) !important;
  background-image: none !important;
  background-color: var(--foreground, #fff) !important;
  border: 1px solid var(--separator, #d1d7dd) !important;
  color: var(--body, #495057) !important;
  box-shadow: 0 1px 2px rgba(var(--body-rgb, 0, 0, 0), 0.06) !important;
}

.pq-toolbar button:hover,
div.pq-toolbar button:hover,
[class*="pq-toolbar"] button:hover {
  background: var(--primary, #0d6efd) !important;
  background-image: none !important;
  background-color: var(--primary, #0d6efd) !important;
  color: var(--light-text, #fff) !important;
  border-color: var(--primary, #0d6efd) !important;
}

.pq-toolbar button:active,
.pq-toolbar button:focus,
div.pq-toolbar button:active,
div.pq-toolbar button:focus {
  background: var(--primary-darker, var(--primary, #0b5ed7)) !important;
  background-color: var(--primary-darker, var(--primary, #0b5ed7)) !important;
  color: var(--light-text, #fff) !important;
  border-color: var(--primary-darker, var(--primary, #0b5ed7)) !important;
}

.pq-toolbar .pq-separator,
.pq-toolbar span.pq-separator,
div.pq-toolbar .pq-separator,
.pq-grid span.pq-separator {
  background-color: var(--separator, #dee2e6) !important;
}

.pq-grid .pq-grid-header,
.pq-grid .pq-grid-header-search-row,
.pq-header-outer > .pq-grid-header {
  background-color: var(--background-light, var(--background, #f8f9fa)) !important;
  color: var(--body, #4e4e4e) !important;
}

.pq-grid .pq-grid-col,
.pq-grid .pq-grid-number-col {
  background: var(--background-light, var(--background, #f8f9fa)) !important;
  color: var(--body, #4e4e4e) !important;
  border-color: var(--separator, #dee2e6) !important;
}

.pq-grid .pq-grid-col:hover {
  background: rgba(var(--primary-rgb, 13, 110, 253), 0.08) !important;
}

.pq-grid .pq-grid-hd-search-field,
.pq-grid .pq-grid-header-search-row select,
.pq-grid .pq-grid-header-search-row input,
.pq-grid .pq-grid-header-search-row textarea,
.pq-grid select,
.pq-grid input[type="text"],
.pq-grid input,
.pq-grid textarea {
  background-color: var(--foreground, #fff) !important;
  color: var(--body, #4e4e4e) !important;
  border-color: var(--separator, #ced4da) !important;
}

.pq-grid .pq-grid-table > tbody > tr > .pq-grid-cell,
.pq-grid .pq-grid-cell {
  background-color: var(--foreground, #fff) !important;
  color: var(--body, #4e4e4e) !important;
  border-color: var(--separator-light, var(--separator, #e9ecef)) !important;
}

.pq-grid .pq-grid-odd-row > .pq-grid-cell,
.pq-grid tr.pq-grid-odd-row > td.pq-grid-cell {
  background-color: var(--background, #f8f9fa) !important;
}

.pq-grid .pq-grid-row:hover,
.pq-grid .pq-grid-row:hover .pq-grid-cell {
  background-color: rgba(var(--primary-rgb, 13, 110, 253), 0.08) !important;
  color: var(--body, #4e4e4e) !important;
}

.pq-grid .pq-grid-row.pq-row-select,
.pq-grid .pq-grid-row.pq-row-select .pq-grid-cell,
.pq-grid .pq-state-select,
.pq-grid td.pq-state-select,
.pq-grid .ui-state-highlight,
.pq-grid td.ui-state-highlight,
.pq-grid .pq-grid-cell.ui-state-highlight {
  background: rgba(var(--primary-rgb, 13, 110, 253), 0.16) !important;
  background-color: rgba(var(--primary-rgb, 13, 110, 253), 0.16) !important;
  background-image: none !important;
  color: var(--body, #4e4e4e) !important;
}

.pq-grid .pq-pager,
.pq-grid-footer.pq-pager,
.pq-grid .pq-grid-bottom {
  background: var(--background-light, var(--background, #f8f9fa)) !important;
  border-top: 1px solid var(--separator, #dee2e6) !important;
  color: var(--body, #4e4e4e) !important;
}

.pq-grid .pq-pager select,
.pq-grid .pq-pager input,
.pq-grid .pq-pager button {
  background-color: var(--foreground, #fff) !important;
  color: var(--body, #4e4e4e) !important;
  border-color: var(--separator, #ced4da) !important;
}

.pq-grid .pq-grid-col-sort-up,
.pq-grid .pq-grid-col-sort-down {
  color: var(--primary, #0d6efd) !important;
}

.pq-grid .pq-grid-number-cell,
.pq-grid .pq-grid-number-col {
  background: var(--background-light, var(--background, #f8f9fa)) !important;
  color: var(--muted, var(--alternate, #6c757d)) !important;
  border-color: var(--separator, #dee2e6) !important;
}

.pq-grid .pq-grid-cont::-webkit-scrollbar-track {
  background: var(--background, #f1f1f1) !important;
}

.pq-grid .pq-grid-cont::-webkit-scrollbar-thumb {
  background: var(--muted, var(--alternate, #888)) !important;
  border-radius: 4px !important;
}

.pq-grid .pq-grid-cont::-webkit-scrollbar-thumb:hover {
  background: var(--body, #555) !important;
}

/* Loading / freeze panes / group headers */
.pq-grid .pq-loading-bg,
.pq-grid .pq-loading {
  background: rgba(var(--background-rgb, 248, 249, 250), 0.65) !important;
}

.pq-grid .pq-group-row > td,
.pq-grid .pq-summary-row > td {
  background: var(--background-light, var(--background, #f0f2f5)) !important;
  color: var(--body, #4e4e4e) !important;
}