/* Crop Protection Browser — McMaster-inspired styles, no ALLCAPS. */

:root {
  --fg: #1a1a1a;
  --fg-mute: #6a6a6a;
  --bg: #fff;
  --bg-alt: #f7f7f7;
  --bg-row-hover: #fff8ec;
  --bg-expanded: #fbf6ee;
  --line: #d9d9d9;
  --line-strong: #9a9a9a;
  --accent: #c00;
  --accent-hover: #900;
  --link: #0a4fa8;
  --link-hover: #062f66;
  --ok: #0a7;
  --warn: #d80;
  --bad: #c00;
  --neutral: #777;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link-hover); }

button, .btn {
  background: var(--fg);
  color: #fff;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: var(--accent); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-alt); color: var(--accent); }

.muted { color: var(--fg-mute); }

/* ---- topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 2px solid var(--fg);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 16px;
  color: var(--fg) !important;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }
.topsearch { flex: 1; display: flex; }
.topsearch input {
  flex: 1;
  border: 1px solid var(--line);
  padding: 6px 10px;
  font: inherit;
}
.topsearch button { border-left: 0; }
.topnav { display: flex; gap: 14px; }
.topnav a { color: var(--fg); font-weight: 600; }
.topnav a:hover { color: var(--accent); }

/* ---- footer ---- */
.footbar {
  border-top: 1px solid var(--line);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  color: var(--fg-mute);
  font-size: 12px;
}

/* ---- dashboard ---- */
.dashboard { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.hero h1 { font-size: 26px; margin: 0 0 4px 0; font-weight: 700; }
.hero .hero-search { display: flex; max-width: 720px; margin-top: 12px; }
.hero .hero-search input {
  flex: 1; border: 2px solid var(--fg); padding: 10px 12px; font-size: 16px;
}
.hero .hero-search button { font-size: 16px; padding: 10px 16px; }
.hero-suggest { margin-top: 10px; font-size: 12px; }
.hero-suggest a { margin: 0 12px 0 4px; }

/* ---- audit table ---- */
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table th,
.audit-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.audit-table th:first-child,
.audit-table td:first-child {
  text-align: left;
}
.audit-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  font-weight: 700;
  border-bottom: 2px solid var(--line-strong);
}

.coverage-headline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--fg-mute);
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.coverage-headline a { font-size: 12px; }
.coverage-headline .built-at { margin-left: auto; font-style: italic; }

.cov-badge {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--fg-mute);
  padding-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctile .vintage {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--fg-mute);
  opacity: 0.8;
}

.prov-pill {
  font-size: 10px;
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px solid var(--line, #ddd);
  border-radius: 3px;
  color: var(--fg-mute, #666);
  margin-left: 4px;
}

/* Source-provenance badge: colour-codes how trustworthy the row's origin is. */
.src-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  margin-left: 6px;
  white-space: nowrap;
}
.src-registry { background: #e6f4ea; color: #1e7e34; border-color: #b7dfc3; }
.src-authoritative_non_registry { background: #e8f0fe; color: #1a56b3; border-color: #c3d6f5; }
.src-retailer_scrape { background: #fff4e5; color: #b25e00; border-color: #f5d9b0; }
.src-pdf_dump { background: #f1f1f1; color: #555; border-color: #ddd; }

/* Compact provenance dot in the results grid (legend = product detail badge). */
.src-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
}
.src-dot.src-registry { background: #1e7e34; }
.src-dot.src-authoritative_non_registry { background: #1a56b3; }
.src-dot.src-retailer_scrape { background: #b25e00; }
.src-dot.src-pdf_dump { background: #999; }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  margin-top: 24px;
}
.dash-side { display: flex; flex-direction: column; gap: 16px; }
.dash-card {
  border: 1px solid var(--line);
  padding: 12px 14px;
}
.dash-card h2 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.dash-card .filter-typeahead { margin-bottom: 8px; }

.country-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-height: 480px;
  overflow-y: auto;
}
.ctile {
  background: #fff;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--fg) !important;
  font-size: 12px;
}
.ctile:hover { background: var(--bg-row-hover); text-decoration: none; color: var(--accent) !important; }
.ctile .iso { font-weight: 700; color: var(--accent); }
.ctile .n { color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.ctile .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

ul.rank { list-style: none; margin: 0; padding: 0; }
ul.rank li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12px;
}
ul.rank li:last-child { border-bottom: 0; }
ul.rank .n { color: var(--fg-mute); font-variant-numeric: tabular-nums; font-size: 11px; }

/* ---- search layout ---- */
.search { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 110px); }
.sidebar {
  border-right: 1px solid var(--line);
  padding: 12px;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  position: sticky;
  top: 50px;
}
.main { padding: 12px 16px; min-width: 0; }

.searchbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.searchbar input[type=search] {
  border: 2px solid var(--fg);
  padding: 7px 10px;
  font: inherit;
}
.searchbar select {
  border: 1px solid var(--line);
  padding: 6px 8px;
  font: inherit;
  background: #fff;
}

/* ---- facet sidebar ---- */
.facet-group {
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.facet-group:first-child { border-top: 0; }
.facet-group h3 {
  font-size: 12px;
  font-weight: 700;
  margin: 4px 0 6px 0;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.facet-clear {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-mute);
  text-decoration: underline;
}
.facet-clear:hover { color: var(--fg); }
.facet-list {
  list-style: none;
  margin: 0; padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.facet-list li label {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  font-size: 12px;
  cursor: pointer;
}
.facet-list li label:hover { background: var(--bg-alt); }
.facet-list .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-list .n { color: var(--fg-mute); font-variant-numeric: tabular-nums; font-size: 11px; }
.facet-list .empty {
  padding: 6px 4px;
  color: var(--fg-mute);
  font-size: 12px;
  font-style: italic;
}

.filter-typeahead {
  width: 100%;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  margin-bottom: 4px;
}

/* Status pill toggles in the sidebar. Higher specificity than .facet-group label. */
.pillgroup { display: flex; flex-wrap: wrap; gap: 4px; }
.facet-group .pillgroup label.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid var(--line);
  padding: 4px 10px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  background: #fff;
  color: var(--fg);
  white-space: nowrap;
}
.facet-group .pillgroup label.pill:hover { border-color: var(--fg); }
.facet-group .pillgroup label.pill input { display: none; }
.facet-group .pillgroup label.pill.on {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
}

.range { display: flex; align-items: center; gap: 6px; }
.range input { width: 70px; border: 1px solid var(--line); padding: 3px 6px; font: inherit; }

.facet-group label { display: block; font-size: 12px; padding: 2px 0; }
.facet-group input[type=date] { border: 1px solid var(--line); padding: 2px 4px; font: inherit; }

.facet-actions { margin-top: 12px; }

/* ---- results grid ---- */
.results-meta {
  font-size: 12px;
  color: var(--fg-mute);
  padding: 0 0 8px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.results-meta .count b { color: var(--fg); font-size: 13px; }

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.grid th, .grid td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.grid th {
  background: var(--bg-alt);
  font-weight: 700;
  font-size: 12px;
  color: var(--fg);
  border-bottom: 2px solid var(--line-strong);
  position: sticky; top: 0;
  white-space: nowrap;
}
.grid th a.th-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.grid th a.th-sort:hover { color: var(--accent); }
.grid th a.th-sort .sort-indicator {
  font-size: 10px;
  color: var(--fg-mute);
  opacity: 0.6;
}
.grid th a.th-sort.active { color: var(--accent); }
.grid th a.th-sort.active .sort-indicator {
  color: var(--accent);
  opacity: 1;
}
.grid tbody tr.product-row { cursor: pointer; }
.grid tbody tr.product-row:hover { background: var(--bg-row-hover); }
.grid tbody tr.product-row.expanded { background: var(--bg-expanded); }
.grid td.iso { font-weight: 700; width: 36px; }
.grid td.iso a { color: var(--accent); }
.grid td.name a { font-weight: 600; color: var(--fg); }
.grid td.name a:hover { color: var(--accent); }
.grid td.ai { color: var(--fg-mute); max-width: 360px; }
.grid td.ai a { color: var(--link); }
.grid .w-ck { width: 24px; }
.grid .empty { text-align: center; padding: 32px; color: var(--fg-mute); }
.grid .toggle-expand {
  width: 14px;
  color: var(--fg-mute);
  font-family: monospace;
  user-select: none;
}

/* Expand-row drawer */
.grid tr.drawer-row td {
  padding: 0;
  background: var(--bg-expanded);
  border-bottom: 1px solid var(--line);
}
.drawer {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  padding: 12px 16px 14px 16px;
  font-size: 12px;
}
.drawer:has(> .drawer-thumb) {
  grid-template-columns: 56px 1.2fr 1fr 1fr;
}
.drawer-thumb {
  align-self: start;
}
.drawer-thumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #fff;
  padding: 2px;
  border-radius: 3px;
}
.drawer h4 {
  margin: 0 0 4px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-mute);
  letter-spacing: 0.02em;
}
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { padding: 2px 0; }
.drawer .open-detail {
  align-self: end;
  text-align: right;
}
.drawer .kv-mini { color: var(--fg-mute); font-size: 11px; }

/* Status pill in results — fixed sizing, no caps */
.status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  min-width: 64px;
  text-align: center;
}
.status-active    { background: var(--ok); }
.status-expired   { background: var(--bad); }
.status-withdrawn { background: var(--neutral); }
.status-emergency { background: var(--warn); }
.status-pending   { background: var(--warn); }
.status-other     { background: var(--neutral); }

.pager { padding: 12px 0; font-size: 12px; color: var(--fg-mute); }
.pager a { margin: 0 4px; }
.mass-actions { padding: 12px 0; display: flex; gap: 8px; align-items: center; }
.mass-actions .selcount { color: var(--fg-mute); font-size: 11px; }

/* ---- product page ---- */
.product { max-width: 1100px; margin: 12px auto; padding: 0 16px; }
.crumbs { color: var(--fg-mute); font-size: 12px; }
.crumbs a { color: var(--fg-mute); }
.product-head h1 { margin: 4px 0; font-size: 22px; font-weight: 700; }
.product-head .sub { margin: 4px 0 12px 0; }
.tabs { display: flex; border-bottom: 2px solid var(--fg); margin-bottom: 12px; }
.tabs button {
  background: transparent;
  color: var(--fg);
  border: 0;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tabs button:hover { color: var(--accent); background: transparent; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv th { text-align: left; padding: 5px 12px 5px 0; width: 180px; color: var(--fg-mute); font-weight: 600; vertical-align: top; }
.kv td { padding: 5px 0; border-bottom: 1px solid var(--line); }
code { background: var(--bg-alt); padding: 1px 5px; font-size: 12px; }
.product-images { margin-bottom: 16px; }
.image-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.image-thumb {
  display: block;
  border: 1px solid var(--line);
  background: #fff;
  padding: 4px;
  border-radius: 4px;
}
.image-thumb:hover { border-color: var(--accent); }
.image-thumb img { display: block; max-height: 160px; max-width: 200px; object-fit: contain; }

.unit-toggle { margin-bottom: 8px; font-size: 12px; }
.unit-toggle button { background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 3px 8px; }
.unit-toggle button.on { background: var(--fg); color: #fff; }

/* ---- compare ---- */
.compare { max-width: 1400px; margin: 12px auto; padding: 0 16px; }
.compare-grid { display: grid; gap: 12px; }
.compare .card { border: 1px solid var(--line); padding: 12px; }
.compare .card h2 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; }
.compare .card h3 { font-size: 12px; font-weight: 700; margin: 12px 0 4px 0; color: var(--fg); }
.compare .card ul { margin: 0; padding-left: 18px; font-size: 12px; }