/* emag-tracker UI — list and structure pages (catalog, ranking, movers, taxonomy, categories, sweeps,
   products, sellers, login, error). Loaded after app.css; uses ONLY the tokens defined there (no colour
   literals) and extends the shared components. Owned by the list-page work. */

/* the "Filtre" count is always in the DOM (an htmx out-of-band target); it only shows when non-empty */
.filter-more-count:empty { display: none; }

/* ---------------------------------------------------------------- page head: h1 + one subtitle line, actions on the same baseline */
.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 var(--space-4); }
.page-head .page-title { margin: 0; min-width: 0; flex: 1 1 20rem; }
.page-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.crumbs + .page-head { margin-top: 0; }
.page-head + .tiles, .page-head + .metrics { margin-top: 0; }
/* the header's explanation, folded: one quiet summary line; prose only when opened */
.help { margin: calc(-1 * var(--space-2)) 0 var(--space-4); max-width: 76ch; font-size: var(--text-sm); color: var(--fg-muted); }
.help > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--fg-muted); }
.help > summary::-webkit-details-marker { display: none; }
.help > summary::before { content: ""; width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid var(--fg-4); transition: transform var(--dur-fast) var(--ease); }
.help[open] > summary::before { transform: rotate(90deg); }
.help > summary:hover { color: var(--fg); }
.help p { margin: var(--space-2) 0 0; color: var(--fg-2); }
.help p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- section head with tools (buttons after the title) */
.section-h h2 { margin: 0; }
.section-h .muted.small { margin-left: 0; }
.section-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.section-tools .field { flex-direction: row; align-items: center; gap: 6px; margin-right: var(--space-2); }
.section-tools .field input[type="date"] { min-width: 9rem; min-height: 26px; padding: 3px 8px; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- name cell: name + one meta line; inline tags stay quiet */
.cell-sub .chip { padding: 0 5px; font-size: 10px; vertical-align: text-bottom; }
.cell-sub code { font-size: 0.9em; }

/* ---------------------------------------------------------------- tier distribution: the bar reads first, the counts second */
.tier-cell { min-width: 9rem; }
.tier-cell .tier-bar { margin: 3px 0 3px; }
.tier-counts { display: flex; flex-wrap: wrap; gap: 0 7px; font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-counts b { font-weight: 500; color: var(--fg-2); }
.tile-chips .chip { padding: 0 5px; font-size: 10px; }

/* ---------------------------------------------------------------- scored taxonomy tree: an aligned grid, indented by depth */
.tree-wrap { overflow-x: auto; --tree-cols: minmax(0, 1fr) 8rem 5rem 5rem 9rem; }
.tree, .tree-head { min-width: 46rem; }
.tree-head, .tree-row { display: grid; grid-template-columns: var(--tree-cols); align-items: center; gap: var(--space-3); }
.tree-head { padding: 6px 6px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }
.tree-row { padding: 3px 6px; border-radius: 0; border-bottom: 1px solid var(--border); }
.tree-node { --depth: 0; }
.tree-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-left: calc(var(--depth) * 18px); }
.tree-main .tree-toggle { flex: none; }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-children { margin-left: 0; padding-left: 0; border-left: 0; }
.tree-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.tree-num.is-empty { color: var(--fg-4); }
.tree-tiers { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tree-tiers .tier-bar { flex: 1 1 auto; width: 100%; margin: 0; min-width: 0; }
.tree-tiers .tree-total { font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sweeps: a running sweep gets a spine, not a filled row */
.sweeps-table tr.is-running { background: transparent; color: inherit; }
.sweeps-table tr.is-running td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.status-list .status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- auth + errors */
.notice-warn { background: var(--warn-bg); color: var(--warn-fg); }
.login .muted.small { margin: 0; }
.error-page { max-width: 44rem; padding: var(--space-6) var(--space-5); }
.error-page h1 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-lg); letter-spacing: -0.01em; }
.error-page .cmd { margin: var(--space-2) 0 0; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .page-title { flex: 0 0 auto; }
  .page-head-actions { margin-left: 0; }
  .section-tools { margin-left: 0; }
}

/* ---------------------------------------------------------------- list pages: room for 10+ columns without side scrolling */
.container--wide { max-width: 1760px; }
.container--wide .data-table { font-size: 12.5px; }
.container--wide .data-table th, .container--wide .data-table td { padding: 6px 8px; }
.container--wide td.cell-name { max-width: 22rem; min-width: 12rem; }
.container--wide .cell-name .chips { flex-wrap: nowrap; overflow: hidden; }
.container--wide .cell-image { width: 52px; }
.container--wide .cell-image-lg { width: 60px; }
.container--wide .cell-image-lg img { width: 48px; height: 48px; }
@media (max-width: 1500px) {
  .container--wide td.cell-name { max-width: 18rem; }
  .container--wide .data-table th, .container--wide .data-table td { padding: 5px 7px; }
}