/* theme.css */

/* =====================
   Light Theme (default)
   ===================== */
:root {
  --bg-color: white;
  --text-color: black;

  --highlight-bg: lightyellow;
  --highlight-text: black;

  --filter-col-bg: lavender;
  --filter-col-hover-bg: lightsteelblue;
  --filter-col-active-bg: cornflowerblue;
  --filter-col-text: darkblue;
}

/* =====================
   Dark Theme
   ===================== */
.dark {
  --bg-color: black;
  --text-color: gainsboro;

  --highlight-bg: darkslategray;
  --highlight-text: lightgoldenrodyellow;

  --filter-col-bg: dimgray;
  --filter-col-hover-bg: slategray;
  --filter-col-active-bg: steelblue;
  --filter-col-text: lightblue;
}

/* =====================
   Generic elements
   ===================== */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
}

/* Column header behavior */
.filter-col {
  cursor: pointer;
  color: var(--filter-col-text);
  background-color: var(--filter-col-bg);
}

/* Mouse hover on column header */
.filter-col:hover {
  background-color: var(--filter-col-hover-bg);
}

/* Active (selected) column header */
.filter-col.active {
  background-color: var(--filter-col-active-bg);
}

/* Highlighted table cells or rows */
.highlight {
  background-color: var(--highlight-bg);
  color: var(--highlight-text);
}