/* Project overrides for the HumeFinbiz design system.
   Stock Code Manager · sc.humeint.africa

   RULES (AI-INSTRUCTIONS.md § 2.3):
     - Reference var(--hf-*) tokens only. No literal colours, radii or shadows.
     - No !important. (One documented exception, at the top of this file.)
     - If a rule here is generic enough for another project, it belongs in the
       design system, not here. Raise it against style_framework_hume_finbiz.

   `php tools/verify_design_tokens.php` enforces the first and third rules and
   allows exactly the one exception below. */


/* ── The one !important, justified ──────────────────────────────────────────
   This is the application's visibility utility. All three page scripts toggle
   it with classList to show and hide panels, table cells and badges, and it is
   applied to elements that also carry Bootstrap display rules — .modal.show
   (0,2,0) and .dropdown-menu among them — which outrank a bare .hidden on
   specificity. Dropping the !important would silently stop hiding those
   elements, which is a behaviour change, not a styling one.

   Recorded in docs/design-audit.md § 4 as the sole surviving legacy rule. */
.hidden { display: none !important; }


/* ── Behavioural classes carried over from the legacy stylesheet ────────────
   AI-INSTRUCTIONS § 0 rule 2: a class a script depends on keeps its name and
   gets restyled. These are toggled from JavaScript and must not be renamed. */

.admin-only { /* visibility is driven by .hidden; no styling of its own */ }

/* A soft-deleted lookup row. Reads as inert, per the status vocabulary. */
.inactive .row-name { color: var(--hf-ink-faint); text-decoration: line-through; }

/* The selected row in a cascade column. Matches .hf-table tr.is-selected. */
.cascade-list .row.selected { background: var(--hf-surface-active); }

/* Disabled tick in the generated-description builder. */
.gen-param.disabled { opacity: .5; cursor: not-allowed; }


/* ── Header: the notifications panel ────────────────────────────────────────
   Sized here rather than inline so no style="" attribute survives in a view
   (§ 4.2). Placeholder until GET /api/notifications exists. */
.sc-bell-panel { width: 300px; padding: var(--hf-sp-2); }
.sc-bell-panel .hf-empty { padding: var(--hf-sp-5) var(--hf-sp-3); border: 0; }


/* ── Sign-in ────────────────────────────────────────────────────────────────
   The one page with no shell: an unauthenticated visitor must not be shown a
   sidebar of links they cannot follow. */
.sc-signin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hf-sp-5);
  background: var(--hf-canvas-soft);
}
.sc-signin__card { width: 100%; max-width: 380px; }
.sc-signin__brand {
  display: flex;
  align-items: center;
  gap: var(--hf-sp-3);
  margin-bottom: var(--hf-sp-6);
}
.sc-signin__mark {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hf-surface-dark);
  color: var(--hf-ink-inverse);
  font-weight: var(--hf-fw-bold);
  font-size: var(--hf-fs-sm);
  letter-spacing: var(--hf-ls-tight);
}
.sc-signin__title {
  font-size: var(--hf-fs-h2);
  font-weight: var(--hf-fw-semibold);
  letter-spacing: var(--hf-ls-heading);
  line-height: var(--hf-lh-tight);
  margin: 0;
}
.sc-signin__title small {
  display: block;
  font-size: var(--hf-fs-xs);
  font-weight: var(--hf-fw-regular);
  letter-spacing: var(--hf-ls-body);
  color: var(--hf-ink-muted);
}


/* ── Stock list: the filter toolbar ─────────────────────────────────────────
   The selects sit in .hf-table-toolbar; they need a sane basis so the row
   wraps predictably rather than stretching one control across the width. */
.sc-filter { flex: 0 1 168px; min-width: 132px; }
.sc-filter-wide { flex: 0 1 220px; }


/* ── Stock edit: SKU preview ────────────────────────────────────────────────
   The code is the headline value on the page, so it uses the stat tile rather
   than an <h1> containing a string (§ 8, "read a headline number"). */
.sc-sku__value {
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-h1);
  font-weight: var(--hf-fw-semibold);
  letter-spacing: var(--hf-ls-tight);
  line-height: var(--hf-lh-tight);
  color: var(--hf-ink);
  display: block;
}


/* ── Stock edit: the generated-description builder ──────────────────────────
   Ticking a parameter appends its value to the description IN TICK ORDER, so
   each tick has to show its own position. The system has no ordered-multi-
   select component; this composes one from .hf-chip and .hf-count. */
.gen-params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hf-sp-2);
}
.gen-param {
  display: inline-flex;
  align-items: center;
  gap: var(--hf-sp-2);
  padding: var(--hf-sp-2) var(--hf-sp-3);
  border: 1px solid var(--hf-hairline);
  background: var(--hf-surface);
  font-size: var(--hf-fs-sm);
  color: var(--hf-ink-secondary);
  cursor: pointer;
  user-select: none;
}
.gen-param:hover:not(.disabled) { background: var(--hf-surface-hover); }
.gen-param strong { color: var(--hf-ink); font-weight: var(--hf-fw-semibold); }
.gen-param em { color: var(--hf-ink-faint); font-style: normal; }

/* Ticked. Selection is emphasis without sentiment, so it is ink, not green
   (§ 7 status vocabulary: --solid is "Current, Selected, Default"). */
.gen-param:has(input:checked) {
  border-color: var(--hf-ink);
  background: var(--hf-surface-active);
}
.gen-param:has(input:checked) strong { color: var(--hf-ink); }

/* Position in the tick order. A quantity, so .hf-count, not a status badge. */
.order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 var(--hf-sp-1);
  border-radius: var(--hf-r-full);
  background: var(--hf-ink);
  color: var(--hf-ink-inverse);
  font-size: var(--hf-fs-xxs);
  font-weight: var(--hf-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.desc-preview {
  margin-top: var(--hf-sp-3);
  padding: var(--hf-sp-3);
  background: var(--hf-surface-alt);
  border-radius: var(--hf-r-sm);
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-sm);
  color: var(--hf-ink);
  word-break: break-word;
}
.marketing-row {
  display: flex;
  align-items: center;
  gap: var(--hf-sp-2);
  flex-wrap: wrap;
}
.marketing-row .form-control { flex: 1 1 220px; }
.marketing-prefix {
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-sm);
  color: var(--hf-ink-muted);
  padding: var(--hf-sp-2) var(--hf-sp-3);
  background: var(--hf-surface-alt);
  border-radius: var(--hf-r-sm);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Admin: the groupings cascade ───────────────────────────────────────────
   Three drill-down columns. The columns are .hf-card; only the list rows
   inside them need rules the system does not already supply. */
.cascade-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 460px;
  overflow-y: auto;
}
.cascade-list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-sp-2);
  padding: var(--hf-sp-2) var(--hf-sp-3);
  border-bottom: 1px solid var(--hf-hairline-soft);
  font-size: var(--hf-fs-sm);
}
.cascade-list .row:last-child { border-bottom: 0; }
.cascade-list .row:hover { background: var(--hf-surface-hover); }
.cascade-list .row-name { flex: 1 1 auto; cursor: pointer; }
.cascade-list .row-actions {
  display: flex;
  align-items: center;
  gap: var(--hf-sp-1);
  flex: 0 0 auto;
}
.cascade-list .empty {
  padding: var(--hf-sp-5) var(--hf-sp-3);
  text-align: center;
  color: var(--hf-ink-muted);
  font-size: var(--hf-fs-sm);
}


/* ── Admin: SKU decode result ───────────────────────────────────────────────
   A SKU is unique per entity, not globally, so decode returns one block per
   owning entity. Two columns per match: the decoded fields, and the stock row
   that claims the code in that entity. */
.sku-result-match {
  border: 1px solid var(--hf-hairline);
  border-radius: var(--hf-r-sm);
  margin-top: var(--hf-sp-4);
  overflow: hidden;
}
.sku-result-entity {
  margin: 0;
  padding: var(--hf-sp-3) var(--hf-sp-4);
  background: var(--hf-surface-alt);
  border-bottom: 1px solid var(--hf-hairline);
  font-size: var(--hf-fs-sm);
  font-weight: var(--hf-fw-semibold);
  letter-spacing: var(--hf-ls-caps);
  text-transform: uppercase;
}
.sku-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--hf-sp-5);
  padding: var(--hf-sp-4);
}
@media (max-width: 767.98px) {
  .sku-result-grid { grid-template-columns: minmax(0, 1fr); }
}
.sku-result-table { width: 100%; border-collapse: collapse; font-size: var(--hf-fs-sm); }
.sku-result-table th {
  text-align: left;
  font-weight: var(--hf-fw-medium);
  color: var(--hf-ink-muted);
  padding: var(--hf-sp-2) var(--hf-sp-3) var(--hf-sp-2) 0;
  white-space: nowrap;
  width: 45%;
}
.sku-result-table td {
  padding: var(--hf-sp-2) 0;
  border-bottom: 1px solid var(--hf-hairline-soft);
}
.sku-result-stock {
  padding: var(--hf-sp-4);
  background: var(--hf-canvas-soft);
  border-radius: var(--hf-r-sm);
}
.sku-result-stock h3 {
  font-size: var(--hf-fs-sm);
  font-weight: var(--hf-fw-semibold);
  letter-spacing: var(--hf-ls-tight);
  margin: 0 0 var(--hf-sp-2);
}
.sku-result-head {
  display: flex;
  align-items: baseline;
  gap: var(--hf-sp-3);
  flex-wrap: wrap;
}


/* ── Audit: the changes diff ────────────────────────────────────────────────
   A JSON before/after blob inside a table cell. Constrained so one wide diff
   cannot stretch the table past its wrapper. */
.diff {
  margin: 0;
  max-width: 420px;
  max-height: 160px;
  overflow: auto;
  padding: var(--hf-sp-2);
  background: var(--hf-surface-alt);
  border-radius: var(--hf-r-xs);
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-xxs);
  line-height: var(--hf-lh-snug);
  color: var(--hf-ink-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Stock-edit audit history: same content, list form. */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list li {
  padding: var(--hf-sp-3) 0;
  border-bottom: 1px solid var(--hf-hairline-soft);
  font-size: var(--hf-fs-sm);
}
.audit-list li:last-child { border-bottom: 0; }
.audit-list time { color: var(--hf-ink-muted); font-size: var(--hf-fs-xs); }
.audit-list pre {
  margin: var(--hf-sp-2) 0 0;
  padding: var(--hf-sp-2);
  background: var(--hf-surface-alt);
  border-radius: var(--hf-r-xs);
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-xxs);
  color: var(--hf-ink-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}


/* ── CSV import result ──────────────────────────────────────────────────────
   The endpoint returns a JSON summary; it is shown verbatim rather than
   paraphrased, because the row-level errors in it matter. */
.import-result {
  margin: var(--hf-sp-4) 0 0;
  padding: var(--hf-sp-3);
  background: var(--hf-surface-alt);
  border-radius: var(--hf-r-sm);
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-xs);
  line-height: var(--hf-lh-snug);
  color: var(--hf-ink-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow: auto;
}


/* ── Keyboard shortcut keys ─────────────────────────────────────────────────
   Bootstrap ships a dark <kbd>; the system is monochrome and flat. */
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px var(--hf-sp-2);
  border: 1px solid var(--hf-hairline);
  border-bottom-width: 2px;
  border-radius: var(--hf-r-xs);
  background: var(--hf-surface-alt);
  color: var(--hf-ink);
  font-family: var(--hf-font-mono);
  font-size: var(--hf-fs-xs);
  line-height: var(--hf-lh-tight);
  text-align: center;
}


/* ── Table cells that hold a control ────────────────────────────────────────
   Row actions are ghost buttons (§ 8), and they should not force the row
   taller than the text beside them. */
.sc-row-actions {
  display: flex;
  gap: var(--hf-sp-1);
  justify-content: flex-end;
  white-space: nowrap;
}


/* ── Request portal (/request/*) ────────────────────────────────────────────
   Frameless pages opened from other internal sites. No shell: one bar naming
   the page and the signed-in person. */
.sc-portal { background: var(--hf-canvas-soft); min-height: 100vh; }
.sc-portal__bar {
  display: flex; align-items: center; gap: var(--hf-sp-3);
  padding: var(--hf-sp-3) var(--hf-sp-4);
  background: var(--hf-surface);
  border-bottom: 1px solid var(--hf-hairline);
}
.sc-portal__title { font-size: var(--hf-fs-h3); font-weight: var(--hf-fw-semibold); margin: 0; }
.sc-portal__user { margin-left: auto; display: flex; align-items: center; gap: var(--hf-sp-2); font-size: var(--hf-fs-sm); color: var(--hf-ink-secondary); }
.sc-portal__main { max-width: 1200px; margin: 0 auto; padding: var(--hf-sp-5) var(--hf-sp-4); }

/* A sortable column header: a real button for keyboard and screen readers,
   styled to read as the header text. */
.sc-sort { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--hf-sp-1); }
.sc-sort .bi { color: var(--hf-ink-faint); }

/* A request's message thread. */
.sc-thread { list-style: none; padding: 0; margin: var(--hf-sp-4) 0 0; }
.sc-thread__item { border-left: 2px solid var(--hf-hairline); padding: var(--hf-sp-1) 0 var(--hf-sp-3) var(--hf-sp-3); }
.sc-thread__item--admin { border-left-color: var(--hf-ink); }

/* The header bell's list of waiting requests. */
.sc-bell-list { min-width: 320px; }
.sc-bell-list .dropdown-item { white-space: normal; }