/* ===========================================================================
   COA database — the /coa/ page as a spreadsheet.

   One table, one row per certificate, filters and search in a toolbar above.
   Everything inherits the DP tokens so both themes come for free; the table
   chrome (hairlines, sticky header, row hover) is deliberately quiet so the
   page reads as data, not as marketing.
   =========================================================================== */

.dp-cdb { margin-top: var(--dp-s-10); }

/* --- Toolbar --------------------------------------------------------------- */
.dp-cdb__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--dp-s-4) var(--dp-s-5);
  margin-bottom: var(--dp-s-5);
}
.dp-cdb__search { flex: 1 1 260px; min-width: 220px; }
.dp-cdb__bar .dp-coa__q { width: 100%; }

.dp-cdb__filter { display: flex; flex-direction: column; gap: 4px; }
.dp-cdb__flabel {
  font-size: var(--dp-fs-xs);
  font-weight: var(--dp-fw-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dp-ink-50);
}
.dp-cdb__select {
  height: 40px;
  padding: 0 var(--dp-s-5);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
  color: var(--dp-ink);
  font-family: inherit;
  font-size: var(--dp-fs-base);
  cursor: pointer;
}
.dp-cdb__select:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 1px; }

.dp-cdb__reset {
  height: 40px;
  padding: 0 var(--dp-s-5);
  border: 0;
  border-radius: var(--dp-r-pill);
  background: transparent;
  color: var(--dpx-fg-blue, var(--dp-blue));
  font-family: inherit;
  font-size: var(--dp-fs-sm);
  font-weight: var(--dp-fw-medium);
  cursor: pointer;
}
.dp-cdb__reset:hover { text-decoration: underline; }

.dp-cdb__count {
  margin-left: auto;
  align-self: center;
  font-size: var(--dp-fs-sm);
  color: var(--dp-muted);
  white-space: nowrap;
}

/* --- Table ----------------------------------------------------------------- */
.dp-cdb__scroll {
  overflow: auto;
  max-height: min(72vh, 920px);     /* the sheet scrolls, the page stays put */
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-sm);
  background: var(--dp-surface);
}
.dp-cdb__table {
  width: 100%;
  min-width: 880px;                 /* phones scroll the sheet sideways */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dp-fs-base);
}

.dp-cdb__th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0;
  background: var(--dp-surface-alt);
  border-bottom: 1px solid var(--dp-hairline);
  text-align: left;
  white-space: nowrap;
}
.dp-cdb__th--plain { padding: 12px 16px; }
.dp-cdb__th--plain,
.dp-cdb__sort {
  font-size: var(--dp-fs-xs);
  font-weight: var(--dp-fw-semi);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dp-ink-50);
}
.dp-cdb__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.dp-cdb__sort:hover { color: var(--dp-ink); }
.dp-cdb__sort:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -2px; }
.dp-cdb__arrows path { fill: currentColor; opacity: .35; }
.dp-cdb__th[aria-sort="ascending"]  .dp-cdb__up,
.dp-cdb__th[aria-sort="descending"] .dp-cdb__down { opacity: 1; fill: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-cdb__th[aria-sort="ascending"] .dp-cdb__sort,
.dp-cdb__th[aria-sort="descending"] .dp-cdb__sort { color: var(--dp-ink); }

.dp-cdb__td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--dp-hairline);
  vertical-align: middle;
  white-space: nowrap;
}
.dp-cdb__table tbody tr:last-child .dp-cdb__td { border-bottom: 0; }
.dp-cdb__tr:hover .dp-cdb__td { background: var(--dp-surface-mute); }

.dp-cdb__prod {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--dp-fw-semi);
  color: var(--dp-ink);
  text-decoration: none;
}
.dp-cdb__prod:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-cdb__thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--dp-r-4xs, 6px);
  background: var(--dp-surface-card);
  object-fit: cover;
  flex: 0 0 32px;
}

.dp-cdb__td--lot { font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--dp-ink-60, var(--dp-ink)); }

.dp-cdb__chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--dp-r-pill);
  font-size: var(--dp-fs-xs);
  font-weight: var(--dp-fw-medium);
  background: var(--dp-surface-mute);
  color: var(--dp-ink-60, var(--dp-ink));
}
.dp-cdb__chip--purity {
  background: var(--dpx-bg-eaf1fc, rgba(220, 73, 32, .10));
  color: var(--dpx-fg-blue, var(--dp-blue));
}

.dp-cdb__pdf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--dp-fw-medium);
  color: var(--dpx-fg-blue, var(--dp-blue));
  text-decoration: none;
}
.dp-cdb__pdf:hover { text-decoration: underline; }

.dp-cdb__none {
  margin: var(--dp-s-7) 0 0;
  text-align: center;
  color: var(--dp-muted);
}

/* The old bar now only holds the validate link — keep it off to the side. */
.dp-cdb__topbar { justify-content: flex-end; }

@media (max-width: 809px) {
  .dp-cdb__count { margin-left: 0; flex-basis: 100%; }
  .dp-cdb__filter { flex: 1 1 44%; }
  .dp-cdb__select { width: 100%; }
  .dp-cdb__scroll { max-height: none; }
}