/* Fioreva Tech · ERP module
   Operations dashboard inside the systems grid. The panel width drives the layout through
   container queries: KPI row on top, stock left and activity right, stacked under 560px.
   Every row in the stock table and the activity list shares one height, so they line up. */

[data-module="erp"] { container: erp / inline-size; }

.erp {
  --erp-pad: 16px;
  --erp-row: 44px;
  --erp-head: 44px;
  --erp-cell: 10px;
  --erp-gap: 2px;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "kpi kpi"
    "stock act"
    "ai ai"
    "pay pay";
  min-width: 0;
  font: 400 .75rem/1.35 var(--mono);
  color: var(--fg-2);
}

/* ---------- KPI row ---------- */
.erp-kpis {
  grid-area: kpi;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-2);
}
/* a short red segment runs along the divider when a payment lands */
.erp-kpis::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 1px;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
}
.erp-kpi {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px var(--erp-pad) 11px;
}
.erp-kpi + .erp-kpi { border-left: 1px solid var(--line-2); }
.erp-kpi dt { font: 500 .6875rem/1.2 var(--mono); color: var(--fg-3); }
.erp-kpi dd { margin: 0; min-width: 0; }
.erp-val {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 600 1.375rem/1 var(--mono);
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.erp-unit { font-size: .6875rem; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.erp-kpi[data-s="warn"] .erp-num { color: var(--cream); }
.erp-sq { display: inline-flex; gap: 2px; margin-left: 6px; }
.erp-sq i { width: 8px; height: 8px; background: var(--line-3); }
.erp-sq i[data-s="low"] { background: var(--cream); }
.erp-sq i[data-s="out"] { background: var(--red); }
.erp-meta {
  overflow: hidden;
  font: 400 .6875rem/1.3 var(--mono);
  color: var(--fg-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.erp-meta[data-tone="up"] { color: var(--mint); }
/* cash on delivery: confirmed, but not money yet */
.erp-meta[data-tone="due"] { color: var(--fg); }

/* ---------- shared section heads ---------- */
.erp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--erp-head);
  padding: 0 var(--erp-pad);
}
.erp-head h4 { font: 600 .75rem/1 var(--mono); letter-spacing: 0; color: var(--fg); }
.erp-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; color: var(--fg-3); white-space: nowrap; }
.erp-legend i { width: var(--erp-cell); height: var(--erp-cell); background: var(--gray); }
.erp-head .erp-btn { margin-left: auto; }
.erp-clock { margin-left: auto; font-size: .6875rem; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* compact module buttons on top of the global .btn styles */
[data-module="erp"] .erp-btn { min-height: 36px; padding: 0 14px; gap: 10px; font-size: .75rem; }
[data-module="erp"] .erp-btn .btn-flag { width: 6px; height: 13px; }
/* keep the red-to-white wipe inside the border, so no white sliver shows on the left edge */
[data-module="erp"] .btn-red { background-origin: border-box; }
/* the small header button keeps a 36px hit area around a 28px face */
[data-module="erp"] .erp-btn-sm { position: relative; min-height: 28px; padding: 0 10px; font-size: .6875rem; font-weight: 500; }
[data-module="erp"] .erp-btn-sm::after { content: ""; position: absolute; inset: -4px 0; }

/* ---------- stock table ---------- */
.erp-stock { grid-area: stock; container: erpstock / inline-size; min-width: 0; }
.erp-table {
  --erp-pitch: calc(var(--erp-cell) + var(--erp-gap));
  --erp-bar: calc(20 * var(--erp-pitch) - var(--erp-gap));
}
.erp-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4ch 42px;
  align-items: center;
  column-gap: 12px;
  height: var(--erp-row);
  padding: 0 var(--erp-pad);
  border-top: 1px solid var(--line);
}
.erp-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 2px;
}
.erp-row[data-s="low"] { background: rgba(255, 236, 187, .035); }
.erp-row[data-s="low"]::before { background: var(--cream); }
.erp-row[data-s="out"] { background: rgba(255, 0, 37, .05); }
.erp-row[data-s="out"]::before { background: var(--red); }
.erp-fx { position: absolute; inset: 0; background: var(--red); opacity: 0; pointer-events: none; }
.erp-fx[data-tone="mint"] { background: var(--mint); }
.erp-prod, .erp-qty, .erp-st { position: relative; }
.erp-prod { display: grid; gap: 6px; min-width: 0; }
.erp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  max-width: var(--erp-bar);
}
.erp-name { overflow: hidden; color: var(--fg); white-space: nowrap; text-overflow: ellipsis; }
.erp-note { flex: none; font-size: .6875rem; color: var(--fg-3); white-space: nowrap; }
.erp-note[data-s] { color: var(--mint); }

.erp-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(20, var(--erp-cell));
  gap: var(--erp-gap);
  height: var(--erp-cell);
}
.erp-bar i { background: var(--line-2); }
.erp-bar i.on { background: var(--gray); }
.erp-bar i.half { background: #6b6b6a; background: color-mix(in srgb, var(--gray) 42%, var(--line-2)); }
.erp-row[data-s="low"] .erp-bar i.on { background: var(--cream); }
.erp-row[data-s="low"] .erp-bar i.half { background: #7f7762; background: color-mix(in srgb, var(--cream) 42%, var(--line-2)); }
.erp-row[data-s="out"] .erp-bar i { background: rgba(255, 0, 37, .2); }
.erp-bar i.in { background: transparent; box-shadow: inset 0 0 0 1px var(--mint); }
.erp-row.is-inbound .erp-bar i.in { animation: erp-march .8s steps(1, end) infinite; animation-delay: calc(var(--i) * 40ms - .8s); }
@keyframes erp-march { 50% { box-shadow: inset 0 0 0 1px rgba(0, 255, 194, .3); } }
/* reorder point: a notch under the bar at the item's minimum */
.erp-tick {
  position: absolute;
  top: calc(100% + 2px);
  left: calc(var(--at) * var(--erp-pitch) - var(--erp-gap));
  width: 2px;
  height: 3px;
  background: var(--fg-3);
}
.erp-row[data-s="low"] .erp-tick, .erp-row[data-s="out"] .erp-tick { background: var(--cream); }

.erp-qty {
  justify-self: end;
  overflow: hidden;
  font: 600 .875rem/1.2 var(--mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.erp-qty span { display: inline-block; }
.erp-st { justify-self: end; }
.erp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(0, 255, 194, .32);
  border-radius: var(--r-s);
  font: 600 .6875rem/1 var(--mono);
  color: var(--mint);
}
.erp-chip[data-s="low"] { border-color: rgba(255, 236, 187, .4); background: rgba(255, 236, 187, .07); color: var(--cream); }
.erp-chip[data-s="out"] { border-color: rgba(255, 0, 37, .55); background: rgba(255, 0, 37, .1); color: var(--red); }

/* ---------- activity ---------- */
.erp-acts {
  grid-area: act;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line-2);
}
.erp-feed { position: relative; height: calc(4 * var(--erp-row)); overflow: hidden; }
.erp-act {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-content: center;
  column-gap: 9px;
  row-gap: 4px;
  height: var(--erp-row);
  padding: 0 var(--erp-pad);
  border-top: 1px solid var(--line);
}
.erp-act-dot { align-self: center; width: 6px; height: 6px; background: var(--gray); }
.erp-act-main { min-width: 0; overflow: hidden; color: var(--fg); white-space: nowrap; text-overflow: ellipsis; }
.erp-act-meta {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: .6875rem;
  color: var(--fg-3);
}
.erp-act-what { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.erp-act-meta time { flex: none; font-variant-numeric: tabular-nums; }
.erp-act[data-kind="sale"] .erp-act-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--gray); }
.erp-act[data-kind="low"] .erp-act-dot { background: var(--cream); }
.erp-act[data-kind="low"] .erp-act-what { color: var(--cream); }
.erp-act[data-kind="out"] .erp-act-dot, .erp-act[data-kind="po"] .erp-act-dot { background: var(--red); }
.erp-act[data-kind="out"] .erp-act-what { color: var(--red); }
.erp-act[data-kind="in"] .erp-act-dot, .erp-act[data-kind="payroll"] .erp-act-dot,
.erp-act[data-kind="cash"] .erp-act-dot { background: var(--mint); }

/* ---------- AI strip ---------- */
.erp-ai {
  grid-area: ai;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 60px;
  padding: 10px var(--erp-pad);
  border-top: 1px solid var(--line-2);
  transition: background-color .5s;
}
.erp-ai::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 2px;
}
.erp-ai[data-state="alert"] { background: rgba(255, 236, 187, .045); }
.erp-ai[data-state="alert"]::before { background: var(--cream); }
.erp-ai[data-state="ordering"]::before { background: var(--red); }
.erp-ai[data-state="received"]::before { background: var(--mint); }
.erp-ai-tag {
  padding: 4px 5px;
  border-radius: 2px;
  background: var(--mint);
  color: var(--black);
  font: 700 .625rem/1 var(--mono);
  letter-spacing: .04em;
}
.erp-ai-text { font: 400 .78125rem/1.5 var(--sans); color: var(--fg-2); }
.erp-ai[data-state="alert"] .erp-ai-text { color: var(--fg); }
.erp-ai-rest { color: transparent; }
.erp-ai.is-typing [data-ai-typed]::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-right: -2px;
  vertical-align: -0.18em;
  background: var(--red);
}
.erp-ai .erp-btn.is-pending { visibility: hidden; }

/* ---------- payroll ---------- */
.erp-pay {
  grid-area: pay;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 60px;
  padding: 10px var(--erp-pad);
  border-top: 1px solid var(--line-2);
}
.erp-pay-info { display: grid; gap: 5px; min-width: 0; }
.erp-label { font: 500 .6875rem/1.2 var(--mono); color: var(--fg-3); }
.erp-pay-line, .erp-pay-run { grid-row: 2; grid-column: 1; min-height: 16px; }
.erp-pay-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--fg-2); }
.erp-pay[data-state="done"] .erp-pay-line { color: var(--fg); }
.erp-pay-run { display: none; align-items: center; gap: 10px; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-pay[data-state="running"] .erp-pay-line { visibility: hidden; }
.erp-pay[data-state="running"] .erp-pay-run { display: flex; }
.erp-pay-cells { display: grid; grid-template-columns: repeat(24, 6px); gap: 2px; height: 10px; }
.erp-pay-cells i { background: var(--line-2); }
.erp-pay-cells i.on { background: var(--red); }
.erp-pay-count { color: var(--fg-3); }
.erp-check { flex: none; width: 14px; height: 10px; margin-top: 3px; fill: var(--mint); shape-rendering: crispEdges; }
.erp-pay .btn-flag { color: var(--red); }

/* ---------- before the panel is first seen, and the intro ---------- */
.erp[data-boot="pre"] :is(.erp-num, .erp-meta, .erp-sq, .erp-qty span, .erp-chip, .erp-note, .erp-tick, .erp-feed, .erp-ai-text) { visibility: hidden; }
.erp[data-boot="pre"] .erp-row .erp-bar i { background: var(--line-2); box-shadow: none; }
.erp[data-boot="pre"] .erp-row { background: none; }
.erp[data-boot="pre"] .erp-row::before { background: none; }

.erp[data-boot="intro"] .erp-bar i:is(.on, .half) {
  animation: erp-cell-in .3s steps(1, end) both;
  animation-delay: calc(140ms + var(--r) * 90ms + var(--i) * 26ms);
}
@keyframes erp-cell-in {
  0% { background: var(--line-2); }
  40% { background: var(--pure); }
}
.erp[data-boot="intro"] :is(.erp-chip, .erp-note, .erp-tick) {
  animation: erp-blink-in .36s steps(1, end) both;
  animation-delay: calc(520ms + var(--r) * 90ms);
}
.erp[data-boot="intro"] .erp-row::before { animation: erp-blink-in .36s steps(1, end) both; animation-delay: calc(560ms + var(--r) * 90ms); }
@keyframes erp-blink-in {
  0% { opacity: 0; }
  50% { opacity: .45; }
}
.erp[data-boot="intro"] .erp-act { animation: erp-rise .55s var(--ease) both; animation-delay: calc(260ms + var(--k, 0) * 90ms); }
@keyframes erp-rise { from { opacity: 0; transform: translateY(10px); } }
.erp[data-boot="intro"] :is(.erp-meta, .erp-sq) { animation: erp-fade .5s ease both; animation-delay: .75s; }
@keyframes erp-fade { from { opacity: 0; } }

/* ---------- narrower panels ---------- */
/* fallback cell sizes; the module sets an exact size from the column width when it runs */
@container erpstock (max-width: 365px) { :is(.erp-table, .erp-legend) { --erp-cell: 9px; } }
@container erpstock (max-width: 345px) { :is(.erp-table, .erp-legend) { --erp-cell: 8px; } }
@container erpstock (max-width: 325px) { :is(.erp-table, .erp-legend) { --erp-cell: 7px; } }
@container erpstock (max-width: 305px) { :is(.erp-table, .erp-legend) { --erp-cell: 6px; } }
/* very narrow: the notch under the bar carries the minimum, the label steps aside */
@container erpstock (max-width: 300px) {
  .erp-line { max-width: none; }
  .erp-note:not([data-s]) { display: none; }
}

/* side by side, but tight: give activity a little more room */
@container erp (min-width: 560px) and (max-width: 639px) {
  .erp { --erp-pad: 13px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .erp-act { column-gap: 8px; }
  .erp-act-main { font-size: .71875rem; }
  /* 'QAR 2,055 due on delivery' still fits a 560px panel */
  .erp-meta { letter-spacing: -0.02em; }
}

@container erp (max-width: 559px) {
  .erp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "kpi"
      "stock"
      "ai"
      "act"
      "pay";
  }
  .erp-acts { border-left: 0; border-top: 1px solid var(--line-2); }
}

@container erp (max-width: 419px) {
  .erp { --erp-pad: 14px; }
  .erp-row { grid-template-columns: minmax(0, 1fr) 4ch 36px; column-gap: 10px; }
  .erp-chip { min-width: 36px; padding: 0 4px; }
  .erp-pay[data-state="done"] .erp-label { display: none; }
  .erp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-kpi:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line-2); }
  .erp-kpi:nth-child(2) { border-left: 0; }
  .erp-legend { display: none; }
  .erp-ai { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; align-items: start; }
  .erp-ai-tag { margin-top: 2px; }
  .erp-ai .erp-btn { grid-column: 2; justify-self: start; }
  .erp-pay { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .erp-pay .erp-btn { width: 100%; }
  .erp-pay-cells { grid-template-columns: repeat(24, 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .erp *, .erp *::before, .erp *::after { animation: none !important; transition: none !important; }
}

/* paused by the visitor: every ERP animation stops in its end state (the module's JS also stops
   its own tweens). Named one by one so the buttons keep their hover response, as elsewhere on the page. */
:root[data-motion="paused"] .erp-row.is-inbound .erp-bar i.in,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-bar i,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-chip,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-note,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-tick,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-row::before,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-act,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-meta,
:root[data-motion="paused"] .erp[data-boot="intro"] .erp-sq { animation: none !important; }
:root[data-motion="paused"] .erp-ai { transition: none !important; }