/* ─────────────────────────────────────────────────────────────────
   Explore Results Table & Inline Filters — Story 4.3
   ───────────────────────────────────────────────────────────────── */

/* ── Results container ──────────────────────────────────────────── */

.explore-results-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
  padding: var(--spacing-md, 1rem) 0;
}

/* ── Results toolbar ────────────────────────────────────────────── */

.explore-results-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  background: var(--bg-secondary, #171717);
  border-radius: var(--radius-md, 0.5rem);
  flex-wrap: wrap;
}

.explore-results-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  flex: 1;
  min-width: 0;
}

.explore-results-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
}

.explore-add-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent, #facc15);
  background: transparent;
  border: 1px solid var(--accent, #facc15);
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.explore-add-filter-btn:hover {
  background: var(--accent, #facc15);
  color: var(--bg-primary, #0a0a0a);
}

.explore-totals-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #a3a3a3);
  user-select: none;
  padding-left: 0.75rem;
}

.explore-totals-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.explore-totals-toggle input[type="checkbox"] {
  accent-color: var(--accent, #facc15);
  width: 14px;
  height: 14px;
}

.explore-row-count {
  font-size: 0.75rem;
  color: var(--text-muted, #737373);
  white-space: nowrap;
  padding: 0 0.5rem;
}

.explore-export-csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #a3a3a3);
  background: transparent;
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.explore-export-csv-btn:hover {
  border-color: var(--text-secondary, #a3a3a3);
  color: var(--text-primary, #fafafa);
}

/* ── Large dataset banner ───────────────────────────────────────── */

.explore-large-dataset-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: 0.5rem 1rem;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 0.8125rem;
  color: var(--accent, #facc15);
}

.explore-large-dataset-banner .banner-icon {
  font-size: 1rem;
}

/* ── Inline filters ─────────────────────────────────────────────── */

.explore-inline-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
}

.explore-inline-filter-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: 0.375rem 0.75rem;
  background: var(--bg-secondary, #171717);
  border-radius: var(--radius-sm, 0.25rem);
  border: 1px solid var(--border-subtle, #2a2a2a);
  animation: filter-slide-in 0.15s ease;
}

@keyframes filter-slide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.explore-filter-label {
  font-size: 0.75rem;
  color: var(--text-muted, #737373);
  white-space: nowrap;
  min-width: 40px;
}

.explore-filter-field-select,
.explore-filter-operator-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-primary, #fafafa);
  background: var(--bg-primary, #0a0a0a);
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-radius: var(--radius-sm, 0.25rem);
  outline: none;
  min-width: 120px;
  max-width: 200px;
  transition: border-color 0.15s ease;
}

.explore-filter-field-select:focus,
.explore-filter-operator-select:focus {
  border-color: var(--accent, #facc15);
}

.explore-filter-value-input {
  flex: 1;
  min-width: 100px;
  max-width: 250px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-primary, #fafafa);
  background: var(--bg-primary, #0a0a0a);
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-radius: var(--radius-sm, 0.25rem);
  outline: none;
  transition: border-color 0.15s ease;
}

.explore-filter-value-input:focus {
  border-color: var(--accent, #facc15);
}

.explore-filter-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-muted, #737373);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
  flex-shrink: 0;
}

.explore-filter-remove-btn:hover {
  color: var(--color-error, #ef4444);
  background: var(--color-error-bg);
}

/* ── Skeleton loading ───────────────────────────────────────────── */

.explore-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
}

.explore-skeleton-header {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary, #171717);
  padding: 0.75rem 1rem;
}

.explore-skeleton-header-cell {
  height: 14px;
  background: var(--bg-surface, #262626);
  border-radius: 4px;
  flex: 1;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.explore-skeleton-row {
  display: flex;
  gap: 2px;
  padding: 0.625rem 1rem;
  background: var(--bg-primary, #0a0a0a);
}

.explore-skeleton-row:nth-child(even) {
  background: var(--bg-secondary, #171717);
}

.explore-skeleton-cell {
  height: 12px;
  background: var(--bg-surface, #262626);
  border-radius: 4px;
  flex: 1;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.explore-skeleton-cell:nth-child(2n) {
  animation-delay: 0.15s;
}

.explore-skeleton-cell:nth-child(3n) {
  animation-delay: 0.3s;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

/* ── Table wrapper ──────────────────────────────────────────────── */

.explore-table-wrapper {
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
  border: 1px solid var(--border-subtle, #2a2a2a);
}

/* DataTable theme overrides for explore context */
.explore-table-wrapper .dash-spreadsheet-container {
  border: none !important;
  --accent: var(--accent, #facc15) !important;
  --selected-background: var(--accent-muted);
}

.explore-table-wrapper .dash-header {
  background: var(--bg-secondary, #171717) !important;
}

.explore-table-wrapper .dash-cell {
  border-bottom: 1px solid var(--border-subtle, #2a2a2a) !important;
}

/* ── Totals row ─────────────────────────────────────────────────── */

.explore-totals-row {
  display: flex;
  padding: 0.625rem 1rem;
  background: var(--bg-secondary, #171717);
  border: 1px solid var(--border-subtle, #2a2a2a);
  border-top: 2px solid var(--accent, #facc15);
  border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
  font-weight: 600;
  font-size: 0.8125rem;
  gap: 0.5rem;
  overflow-x: auto;
}

.explore-totals-cell {
  flex: 1;
  min-width: 80px;
  padding: 0.25rem 0.5rem;
  color: var(--text-primary, #fafafa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-totals-cell--numeric {
  text-align: right;
}

.explore-totals-cell--label {
  color: var(--accent, #facc15);
  font-weight: 700;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .explore-results-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .explore-results-toolbar-left,
  .explore-results-toolbar-right {
    flex-wrap: wrap;
  }

  .explore-inline-filter-row {
    flex-wrap: wrap;
  }

  .explore-filter-field-select,
  .explore-filter-operator-select,
  .explore-filter-value-input {
    min-width: 100%;
  }
}