/* ds.css — DRUPAL_DATA_STACK shared component classes.
 *
 * Five components: .ds-tile, .ds-pill, .ds-table, .ds-state, .ds-card.
 * Plus chrome pieces: .ds-theme-toggle, .ds-poll-status.
 *
 * Token-driven only — no hex codes, no font names. Brand changes live
 * in tokens.css; component visuals here are layout + structure.
 */

/* ── KPI tile ───────────────────────────────────────────────────────── */
[hidden] {display: none;}
body {
  background: #fefefe;
  color: #333;
  padding: 0;
  margin: 0;
  font:1em/1.5 sans-serif;
}
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem 3rem;
}
.center {text-align: center}

.ds-tile {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pico-spacing) * 0.25);
  padding: var(--pico-spacing);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.ds-tile-label {
  font-size: 0.85em;
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ds-tile-value {
  font-family: var(--pico-font-family-monospace);
  font-size: 1.8em;
  font-weight: 700;
  color: var(--pico-primary);
  line-height: 1.1;
}
.ds-tile-sub {
  font-size: 0.85em;
  color: var(--pico-muted-color);
  margin-top: calc(var(--pico-spacing) * 0.25);
}
.ds-tile-hint {
  font-size: 0.75em;
  color: var(--pico-muted-color);
  font-style: italic;
  margin-top: calc(var(--pico-spacing) * 0.4);
}
.ds-tile-spark {
  margin-top: calc(var(--pico-spacing) * 0.5);
  height: 40px;
  position: relative;
}

/* ── Status pill ────────────────────────────────────────────────────── */

.ds-pill {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.4;
  background: var(--pico-secondary-background);
  color: var(--pico-color);
}
.ds-pill[data-variant="success"] { background: rgba(107, 157, 47, 0.18); color: #4a6e21; }
.ds-pill[data-variant="warn"]    { background: rgba(217, 153, 18, 0.18); color: #7a5500; }
.ds-pill[data-variant="error"]   { background: rgba(220, 38, 38, 0.18); color: #991b1b; }
.ds-pill[data-variant="info"]    { background: rgba(73, 35, 118, 0.15); color: var(--pico-primary); }

[data-theme="dark"] .ds-pill[data-variant="success"] { color: #a6d870; }
[data-theme="dark"] .ds-pill[data-variant="warn"]    { color: #f3c870; }
[data-theme="dark"] .ds-pill[data-variant="error"]   { color: #f87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-pill[data-variant="success"] { color: #a6d870; }
  :root:not([data-theme="light"]) .ds-pill[data-variant="warn"]    { color: #f3c870; }
  :root:not([data-theme="light"]) .ds-pill[data-variant="error"]   { color: #f87171; }
}

/* ── Sortable table ─────────────────────────────────────────────────── */

.ds-table {
  width: 100%;
  border-collapse: collapse;
}
.ds-table th,
.ds-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.9em;
  vertical-align: top;
}
.ds-table tbody td {
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.ds-table tbody tr:hover td {
  background: var(--pico-card-sectioning-background-color);
}
.ds-table th.num,
.ds-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--pico-font-family-monospace);
}
.ds-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.ds-table th[data-sort]:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: -2px;
}
.ds-table th[data-sort][aria-sort="none"]::after {
  content: " \2195"; /* ↕ */
  opacity: 0.35;
  font-size: 0.85em;
}
.ds-table th[data-sort][aria-sort="ascending"]::after  { content: " \25B2"; opacity: 1; } /* ▲ */
.ds-table th[data-sort][aria-sort="descending"]::after { content: " \25BC"; opacity: 1; } /* ▼ */

/* ── File-match card (Zoekt-derived) ────────────────────────────────── */

.ds-file-match {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  margin-bottom: var(--pico-spacing);
  overflow: hidden;
  background: var(--pico-card-background-color);
}
.ds-file-match-header {
  background: var(--pico-card-sectioning-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 0.5rem var(--pico-spacing);
  font-size: 0.9em;
  font-weight: 600;
}
.ds-file-match-header .ds-file-match-count {
  color: var(--pico-muted-color);
  font-weight: 400;
  margin-left: 0.4rem;
}
.ds-file-match-body {
  overflow-x: auto;
}
.ds-file-match-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pico-font-family-monospace);
  font-size: 0.85em;
  line-height: 1.5;
}
.ds-file-match-body td {
  padding: 0.2rem 0.6rem;
  border-top: 1px solid var(--pico-muted-border-color);
  vertical-align: top;
}
.ds-file-match-body tr:first-child td {
  border-top: none;
}
.ds-file-match-body td.gutter {
  width: 1%;
  white-space: nowrap;
  background: var(--pico-card-sectioning-background-color);
  border-right: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  text-align: right;
  padding-right: 0.75rem;
}
.ds-file-match-body tr:hover td {
  background: var(--pico-card-sectioning-background-color);
}
.ds-file-match-body tr:hover td.gutter {
  background: var(--pico-card-background-color);
  color: var(--pico-color);
}
.ds-file-match-footer {
  padding: 0.4rem var(--pico-spacing);
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.8em;
  color: var(--pico-muted-color);
  font-style: italic;
}

/* ── Filter bar (Zoekt navbar-derived) ──────────────────────────────── */

.ds-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
  background: var(--pico-card-sectioning-background-color);
  border-top: 1px solid var(--pico-muted-border-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  font-size: 0.9em;
}
.ds-filter-bar > label {
  margin-bottom: 0;
}
.ds-filter-bar input[type="search"],
.ds-filter-bar input[type="text"],
.ds-filter-bar select {
  margin-bottom: 0;
  padding: 0.3rem 0.5rem;
  height: auto;
  min-width: 12rem;
}
.ds-filter-bar input[type="search"] {
  flex: 1;
  max-width: 28rem;
}
.ds-filter-bar .ds-filter-counter {
  margin-left: auto;
  color: var(--pico-muted-color);
  font-variant-numeric: tabular-nums;
}

/* ── State wrapper (loading / empty / error) ────────────────────────── */

.ds-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pico-spacing) * 0.5);
  padding: calc(var(--pico-spacing) * 2);
  text-align: center;
  color: var(--pico-muted-color);
}
.ds-state[data-state="error"] { color: var(--pico-del-color, #991b1b); }
.ds-state-icon { font-size: 2em; opacity: 0.6; line-height: 1; }
.ds-state[data-state="loading"] .ds-state-icon {
  animation: ds-spin 1.2s linear infinite;
}
@keyframes ds-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Card ───────────────────────────────────────────────────────────── */

.ds-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  overflow: hidden;
}
.ds-card-header {
  padding: calc(var(--pico-spacing) * 0.75) var(--pico-spacing);
  border-bottom: 1px solid var(--pico-muted-border-color);
  font-weight: 700;
}
.ds-card-body { padding: var(--pico-spacing); }
.ds-card-footer {
  padding: calc(var(--pico-spacing) * 0.75) var(--pico-spacing);
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.9em;
  color: var(--pico-muted-color);
}

/* ── Chrome: theme toggle (auto-injected by ds.js) ──────────────────── */

.ds-theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 100;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-theme-toggle:hover {
  background: var(--pico-secondary-background);
}

/* ── Chrome: polling status badge ───────────────────────────────────── */

.ds-poll-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  color: var(--pico-muted-color);
  font-weight: 500;
}
.ds-poll-status::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--pico-primary);
  animation: ds-pulse 2s ease-in-out infinite;
}
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.center {text-align: center}