:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #17191c;
  --muted: #5d646e;
  --line: #dfe3e8;
  --accent: #1c5fd4;
  --accent-soft: #e8f0ff;
  --warn-bg: #fff4e5;
  --warn-ink: #7a4b00;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --panel: #1c1f25;
    --ink: #e8eaed;
    --muted: #9aa3ae;
    --line: #2c313a;
    --accent: #6ea8ff;
    --accent-soft: #1e2a3d;
    --warn-bg: #3a2c12;
    --warn-ink: #f0c98a;
  }
}

:root[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1c1f25;
  --ink: #e8eaed;
  --muted: #9aa3ae;
  --line: #2c313a;
  --accent: #6ea8ff;
  --accent-soft: #1e2a3d;
  --warn-bg: #3a2c12;
  --warn-ink: #f0c98a;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win. Any class that sets display (flex,
   grid, inline-flex) outranks the browser's own [hidden] rule, which silently
   leaves "hidden" elements on screen. This one line covers every such case,
   present and future. */
[hidden] { display: none !important; }

/* PIN screen */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* This rule is essential. `display: flex` above is a class selector, which
   outranks the browser's own `[hidden] { display: none }`, so setting the
   hidden attribute did nothing and the overlay stayed on top of the loaded
   page after a correct PIN. Same trap for any other element hidden by
   attribute that also has a display rule from a class. */
.gate[hidden] { display: none; }
.gate-box {
  width: 100%;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gate-box h2 { margin: 0; font-size: 18px; font-weight: 650; }
.gate-hint { margin: 0; color: var(--muted); font-size: 13px; }
.gate-box input {
  font-size: 18px;
  letter-spacing: 4px;
  text-align: center;
  padding: 10px;
}
.gate-box button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: 9px;
  font-weight: 600;
}
.gate-box button:hover { filter: brightness(1.08); }
.gate-error {
  margin: 0;
  font-size: 13px;
  color: var(--warn-ink);
  background: var(--warn-bg);
  padding: 7px 10px;
  border-radius: 6px;
}

.link-btn {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: underline;
  padding: 0 0 0 12px;
}
.link-btn:hover { color: var(--accent); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

header {
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}

header h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: .2px; }
header .sub { color: var(--muted); font-size: 13px; }
header .spacer { flex: 1; }

.freshness {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono);
}
.freshness.stale {
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: 2px 8px;
  border-radius: 4px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

input[type="search"], select, button {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
}
input[type="search"] { min-width: 240px; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { border-color: var(--line); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.toggle input { accent-color: var(--accent); }

.count { color: var(--muted); font-size: 13px; margin-left: auto; }

/* master filter button: a circle with an arrow, sitting at the right end of the
   toolbar. The whole circle turns over when the panel is open, so the arrow
   points up. */
.filters-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  transition: transform .22s ease, background .15s, color .15s, border-color .15s;
}
.filters-btn:hover { color: var(--accent); border-color: var(--accent); }
.filters-btn.open {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* The panel slides by animating a grid row from zero to its content height,
   so the table below is pushed down rather than covered. */
.panel-slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
  background: var(--panel);
}
.panel-slot.open { grid-template-rows: 1fr; }
.panel-inner { overflow: hidden; }

.panel {
  border-bottom: 1px solid var(--line);
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.panel-note {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 6px 10px;
  align-self: flex-start;
}

/* value picker hanging under a column heading */
.dropdown {
  position: absolute;
  z-index: 40;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.dropdown-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .3px;
}
.dropdown-actions { margin-left: auto; display: flex; gap: 6px; }
.dropdown-actions button { padding: 2px 8px; font-size: 12px; }
.dropdown-list { max-height: 280px; overflow-y: auto; padding: 6px 0; }
.dropdown-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-list label:hover { background: var(--accent-soft); }
.dropdown-list .n { margin-left: auto; color: var(--muted); font-size: 12px; }

/* round button in a column heading, arrow points down when shut and up when
   the value list is open */
th .filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: transform .18s ease, background .15s, color .15s, border-color .15s;
}
th .filter-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
}
th .filter-icon.open { transform: rotate(180deg); }
th .filter-icon.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.table-wrap {
  margin: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Default view: the chosen columns are given percentage widths that add up to
   100, so the table always fits the window and never scrolls sideways.
   Long text wraps inside its cell instead of pushing the table wider. */
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 13.5px;
}

th, td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

/* The all-columns view has 30 columns, which cannot fit any screen. Only that
   view gets a horizontal scrollbar, and it is confined to the table box. */
.table-wrap.wide { overflow-x: auto; }
.table-wrap.wide table { table-layout: auto; }
.table-wrap.wide th,
.table-wrap.wide td { white-space: nowrap; }

th {
  position: sticky;
  top: 0;
  background: var(--panel);
  cursor: pointer;
  user-select: none;
  font-weight: 620;
  font-size: 12.5px;
  letter-spacing: .3px;
}
th:hover { color: var(--accent); }
th .arrow { color: var(--accent); font-size: 11px; }

tbody tr:hover { background: var(--accent-soft); }
td.num {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
td.null { color: var(--muted); }

@media (max-width: 900px) {
  table { font-size: 12.5px; }
  th, td { padding: 6px 7px; }
  .table-wrap { margin: 10px; }
}

.pager { display: flex; gap: 8px; align-items: center; padding: 0 18px 24px; }
.pager .page-info { color: var(--muted); font-size: 13px; }
.pager .count { margin-left: auto; }

.message {
  margin: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
}
.message.error { background: var(--warn-bg); color: var(--warn-ink); }