/* 49-inv-list-card.css
   ----------------------------------------------------------------
   Status-colored list row. Icon bubble (left) + title/sub body
   (centre, flex-1) + numeric meta (right). Promoted from the
   inventory atlas inline sketch.

   Used by:
     - inventory: stock dashboard, product detail movement ledger,
       reorder list
     - suppliers: list, pricelist, purchase history
     - purchase orders: list, detail lines
     - supplier invoices: overdue + pending sections

   Wireframe contract: shell_mobile/inventory_atlas.html frames
   1.1, 1.2, 1.3, 4.1, 4.2, 4.3, 8.1, 8.2, 8.3, 9.1, 9.3.

   ## Container
     .inv-list                stacked column · flex gap
                              Page provides its own gutter; the
                              container itself has no padding.

   ## Row
     .inv-list-card           card-style row · clickable when <a>
     .inv-list-card-icon      36px round bubble, tonal variants
                              .success | .warning | .error | .info
     .inv-list-card-body      flex-1 text column
     .inv-list-card-title     name + inline chips · flex wrap
     .inv-list-card-sub       muted caption sub-line
     .inv-list-card-meta      right-aligned tabular numeric

   Tokens only. No raw colors.
   ---------------------------------------------------------------- */

.inv-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* "…and N more" truncation trailer - a plain paragraph, not a card,
   so it needs its own centering + breathing room. */
.inv-list-trailer {
  text-align: center;
  padding: var(--space-2);
}

.inv-list-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  font: inherit;
  width: 100%;
  cursor: pointer;
}

a.inv-list-card:hover,
button.inv-list-card:hover {
  border-color: var(--border);
  background: var(--table-row-hover-bg, var(--surface-soft));
}

.inv-list-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}

.inv-list-card-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.inv-list-card-icon.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.inv-list-card-icon.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.inv-list-card-icon.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}

.inv-list-card-icon.info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

.inv-list-card-icon.primary {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.inv-list-card-icon.muted {
  background: var(--surface-soft);
  border-color: var(--divider);
  color: var(--muted);
}

.inv-list-card-body {
  flex: 1;
  min-width: 0;
}

.inv-list-card-title {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.inv-list-card-sub {
  font-size: var(--font-size-small);
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.inv-list-card-sub.is-error {
  color: var(--error);
  font-weight: 600;
}

.inv-list-card-meta {
  font-size: var(--font-size-body);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.inv-list-card-meta.error {
  color: var(--error);
}

.inv-list-card-meta.warning {
  color: var(--warning);
}

.inv-list-card-meta.success {
  color: var(--success);
}

.inv-list-card-meta small {
  display: block;
  font-size: var(--font-size-micro);
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

.inv-list-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}

.inv-list-card-chevron svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.inv-list-card.is-error .inv-list-card-title {
  color: var(--error);
}

.inv-list-card.is-locked {
  background: var(--surface-soft);
  cursor: default;
}

.inv-list-card.is-locked .inv-list-card-title,
.inv-list-card.is-locked .inv-list-card-sub {
  color: var(--muted);
}

.inv-list-card.is-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.inv-list-card.is-success {
  background: var(--success-bg);
  border-color: var(--success-border);
}

.inv-list-card.is-info {
  background: var(--info-bg);
  border-color: var(--info-border);
}

/* Section label above inv-list / ops-lines blocks (atlas §1–2). */
.inv-section-label {
  font-size: var(--font-size-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-micro-label);
  color: var(--muted);
  /* padding: var(--space-3) var(--space-3) var(--space-1); */
  margin: 0;
}

.inv-section-label.is-flush-top {
  padding-top: 0;
}