/* =============================================================
   matrix.css — styles for the shared ICO Data Matrix / Data
   Extraction tool (matrix.js). Self-contained + theme-aware:
   light by default, dark under [data-theme="dark"], so it looks
   identical inside the (light) management dashboard and on the
   public Data Extraction page (which can toggle light/dark).
   Colors: values that exist in tokens.css (canonical) are written
   var(--token, #hex) — the hex fallback keeps pages that do not
   load tokens.css rendering identically. The rest are private
   shades with no tokens.css equivalent.
   ============================================================= */
.icm-wrap, .icm-page-head, #icm-toast-root {
  --icm-panel:  var(--paper, #ffffff);
  --icm-bg:     #f4ece2;
  --icm-text:   #241310;
  --icm-muted:  #6c5448;
  --icm-border: rgba(81,42,36,.18);
  --icm-accent: var(--cherry-500, #b12e0b);
  --icm-accent2:#c43d18;
  /* NOT var(--cream-50, …): admin.css remaps --cream-50 to dark text
     inside .adm-body, which would flip this on the management page. */
  --icm-on-acc: #faf3e1;
  --icm-th:     #efe6d9;
  --icm-leaf:   #4d6e26;
  font-family: 'Archivo', 'PT Sans', system-ui, Arial, sans-serif;
  color: var(--icm-text);
}
[data-theme="dark"] .icm-wrap,
[data-theme="dark"] .icm-page-head,
[data-theme="dark"] #icm-toast-root {
  --icm-panel:  #2d1813;
  --icm-bg:     #1f100d;
  --icm-text:   #ede4dc;
  --icm-muted:  #b9a79c;
  --icm-border: rgba(237,214,165,.18);
  --icm-th:     #241310;
}

.icm-page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--icm-border);
}
.icm-page-head h2 {
  margin: 0; font: 700 22px 'Archivo Black', 'Archivo', sans-serif;
  letter-spacing: .01em; color: var(--icm-text);
}
.icm-page-head p { margin: 6px 0 0; font-size: 13px; color: var(--icm-muted); }

.icm-wrap {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 16px; align-items: start;
}

.icm-sidebar {
  background: color-mix(in srgb, var(--icm-panel) 70%, transparent);
  border: 1px solid var(--icm-border);
  border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  /* The whole workbench fits one screen: if the control stack is taller than
     the viewport allows, the SIDEBAR scrolls — never the page. */
  max-height: max(340px, calc(100vh - 215px));
  overflow-y: auto;
}
.icm-group { display: flex; flex-direction: column; gap: 6px; }
/* the `hidden` attribute must win over display:flex for conditional groups */
.icm-group[hidden] { display: none !important; }
.icm-grouplbl {
  font: 600 10px 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--icm-muted);
  border-bottom: 1px solid var(--icm-border); padding-bottom: 4px;
}
.icm-group label {
  display: flex; flex-direction: column; gap: 4px;
  font: 11px 'Archivo', sans-serif; color: var(--icm-muted);
}
.icm-group select {
  background: var(--icm-bg); color: var(--icm-text);
  border: 1px solid var(--icm-border);
  border-radius: 4px; padding: 5px 8px; font: 12px 'Archivo', sans-serif;
}
/* Info affordance — a small ⓘ that reveals a definition popover on hover/focus. */
.icm-lblrow { display: inline-flex; align-items: center; }
.icm-group label .info-i { text-transform: none; letter-spacing: 0; }
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 5px; border-radius: 50%;
  border: 1px solid var(--icm-border); color: var(--icm-muted);
  font: 700 9px/1 ui-monospace, monospace; font-style: normal; cursor: help;
  position: relative; vertical-align: middle; flex: 0 0 auto; user-select: none;
}
.info-i:hover, .info-i:focus { color: var(--icm-text); border-color: var(--icm-accent, #c9853f); outline: none; }
.info-i::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px; z-index: 60;
  background: #241611; color: #f3e9dd; border: 1px solid var(--icm-border);
  border-radius: 6px; padding: 8px 10px; font: 400 11px/1.45 'Archivo', system-ui, sans-serif;
  text-align: left; white-space: normal; box-shadow: 0 10px 26px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease;
}
.info-i:hover::after, .info-i:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.icm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.icm-go { width: 100%; padding: 10px; margin-top: 2px; }

.icm-btn-primary {
  background: var(--icm-accent); color: var(--icm-on-acc);
  border: none; border-radius: 6px; cursor: pointer;
  font: 600 13px 'Archivo', sans-serif; padding: 9px 16px;
}
.icm-btn-primary:hover { background: var(--icm-accent2); }
.icm-btn-ghost {
  background: transparent; color: var(--icm-text);
  border: 1px solid var(--icm-border);
  border-radius: 6px; padding: 5px 12px; font: 12px 'Archivo', sans-serif; cursor: pointer;
}
.icm-btn-ghost:hover { border-color: var(--icm-accent); color: var(--icm-accent); }

.icm-results {
  background: color-mix(in srgb, var(--icm-panel) 55%, transparent);
  border: 1px solid var(--icm-border);
  border-radius: 10px;
  display: flex; flex-direction: column; min-height: 420px;
  /* A grid item's min-size is `auto`: without this, a wide matrix blows the
     1fr track out to the table's full width, the PAGE scrolls sideways
     instead of .icm-scroll, and the sticky entity column never engages. */
  min-width: 0;
}
.icm-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--icm-border);
}
.icm-tabs { display: flex; gap: 4px; }
.icm-mode {
  background: transparent; color: var(--icm-muted);
  border: 1px solid var(--icm-border);
  border-radius: 6px; padding: 4px 12px; font: 12px 'Archivo', sans-serif; cursor: pointer;
}
.icm-mode.active { background: var(--icm-accent); border-color: var(--icm-accent); color: var(--icm-on-acc); }
.icm-meta { font: 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--icm-muted); }
.icm-spacer { flex: 1; }

/* Sort control — an inline label+select pair living in the toolbar row. */
.icm-sort {
  display: inline-flex; align-items: center; gap: 6px;
  font: 11px 'Archivo', sans-serif; color: var(--icm-muted); white-space: nowrap;
}
.icm-sort select {
  background: var(--icm-bg); color: var(--icm-text);
  border: 1px solid var(--icm-border);
  border-radius: 4px; padding: 4px 6px; font: 12px 'Archivo', sans-serif;
}

/* API link panel — revealed by the toolbar's "Generate API link". Three
   radio groups (countries / fields / format), the URL, copy actions and
   the Bearer-key instructions. */
.icm-apilink {
  display: flex; flex-direction: column; gap: 9px;
  padding: 10px 14px 12px; border-bottom: 1px solid var(--icm-border);
  background: color-mix(in srgb, var(--icm-th) 45%, transparent);
}
.icm-apilink[hidden] { display: none !important; }
.icm-api-head { display: flex; align-items: center; gap: 10px; font: 600 13px 'Archivo', sans-serif; color: var(--icm-text); }
.icm-api-close { padding: 1px 9px; font-size: 15px; line-height: 1.3; }
.icm-api-opts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.icm-api-opts fieldset {
  border: 1px solid var(--icm-border); border-radius: 6px; margin: 0;
  padding: 3px 10px 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
}
.icm-api-opts legend {
  font: 600 10px 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--icm-muted); padding: 0 4px;
}
.icm-api-opt { display: inline-flex; align-items: center; gap: 5px; font: 12px 'Archivo', sans-serif; color: var(--icm-text); cursor: pointer; }
.icm-api-opt input { accent-color: var(--icm-accent); margin: 0; }
.icm-api-url code {
  display: block; background: var(--icm-bg); border: 1px solid var(--icm-border); border-radius: 6px;
  padding: 8px 10px; font: 12px/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--icm-text);
  white-space: pre-wrap; word-break: break-all; user-select: all;
}
.icm-api-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.icm-api-help { font: 12px/1.5 'Archivo', sans-serif; color: var(--icm-muted); }
.icm-api-help p { margin: 3px 0; }
.icm-api-help pre {
  margin: 4px 0; background: var(--icm-bg); border: 1px solid var(--icm-border); border-radius: 6px;
  padding: 7px 10px; font: 11.5px/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--icm-text);
  white-space: pre-wrap; word-break: break-all;
}

/* Focus headline — names the partner breakdown when a country is pinned
   ("Exports of Brazil · by destination"). Sits between toolbar and table. */
.icm-focus {
  padding: 10px 14px 0; font: 400 14px 'Archivo', sans-serif; color: var(--icm-muted);
}
.icm-focus strong { color: var(--icm-text); font-weight: 700; }
.icm-focus-arrow { color: var(--icm-accent); font-weight: 600; }
.icm-focus-sep { color: color-mix(in srgb, var(--icm-muted) 55%, transparent); padding: 0 2px; }

#icm-host { padding: 14px; flex: 1; overflow: auto; }
/* Fill the viewport below the page chrome so the whole tool fits one screen;
   the table scrolls inside this box, never the page. */
.icm-scroll { overflow: auto; max-height: max(300px, calc(100vh - 295px)); border-radius: 6px; }

.icm-table { width: 100%; border-collapse: collapse; font-size: 12px; background: transparent; }
.icm-table th, .icm-table td {
  text-align: left; padding: 8px 11px;
  border-bottom: 1px solid var(--icm-border); white-space: nowrap;
}
.icm-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--icm-th); color: var(--icm-muted);
  font: 600 11px 'Archivo', sans-serif; letter-spacing: .04em;
}
/* Corner cell sticks BOTH ways and sits above everything scrolling under it. */
.icm-table th:first-child { left: 0; z-index: 3; }
.icm-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* Entity column: opaque and above the data cells sliding beneath it — a
   translucent background here lets numbers ghost through when scrolling
   sideways. Hover tint is mixed onto the PANEL color (opaque), not onto
   transparent, for the same reason. */
.icm-table tr td:first-child { position: sticky; left: 0; z-index: 1; background: var(--icm-panel); }
.icm-table tbody tr:hover td { background: color-mix(in srgb, var(--icm-accent) 7%, var(--icm-panel)); }
.icm-table strong { color: var(--icm-text); font-weight: 600; }
.icm-null { color: color-mix(in srgb, var(--icm-muted) 55%, transparent); }

.icm-stub {
  background: color-mix(in srgb, var(--icm-panel) 60%, transparent);
  border: 1px dashed var(--icm-border);
  border-radius: 10px; padding: 28px; text-align: center; color: var(--icm-muted);
}
.icm-stub h3 { margin: 0 0 8px; font: 600 16px 'Archivo', sans-serif; color: var(--icm-text); }
.icm-stub p { margin: 0; font-size: 13px; }
.icm-stub.error { border-color: var(--icm-accent); }
.icm-stub.error h3 { color: var(--icm-accent); }

.icm-skeleton { padding: 60px; text-align: center; color: var(--icm-muted); font: 14px 'Archivo', sans-serif; }

.icm-bookmarks { display: flex; flex-direction: column; gap: 4px; max-height: 88px; overflow-y: auto; }
.icm-bookmark {
  display: flex; align-items: stretch;
  background: var(--icm-bg); border: 1px solid var(--icm-border);
  border-radius: 4px; overflow: hidden;
}
.icm-bm-load {
  flex: 1; background: transparent; border: none; color: var(--icm-text);
  text-align: left; padding: 6px 8px; cursor: pointer; font: 12px 'Archivo', sans-serif;
  display: flex; flex-direction: column; gap: 1px;
}
.icm-bm-load:hover { background: color-mix(in srgb, var(--icm-accent) 8%, transparent); }
.icm-bm-sub { font: 10px 'JetBrains Mono', ui-monospace, monospace; color: var(--icm-muted); }
.icm-bm-del { background: transparent; border: none; color: var(--icm-muted); padding: 0 10px; cursor: pointer; font: 600 16px 'Archivo', sans-serif; }
.icm-bm-del:hover { background: var(--icm-accent); color: var(--icm-on-acc); }

/* toasts (only used when no host onToast is provided — i.e. the public page) */
#icm-toast-root { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.icm-toast {
  background: var(--icm-panel); color: var(--icm-text);
  border: 1px solid var(--icm-border); border-left: 3px solid var(--icm-accent);
  padding: 10px 14px; border-radius: 6px; font: 13px 'Archivo', sans-serif;
  box-shadow: 0 10px 28px rgba(40,20,12,.18);
}
.icm-toast.ok { border-left-color: var(--icm-leaf); }
.icm-toast.error { border-left-color: var(--icm-accent); }

@media (max-width: 880px) { .icm-wrap { grid-template-columns: 1fr; } }