/* Inventory Intelligence (release 1.32) — Inventory › Overview. Logical properties only (Arabic RTL / English LTR); one column on phones. */
.ii { display: block; }
.ii-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; }
.ii-bar .inp { height: 36px; width: auto; max-width: 210px; min-width: 0; font-size: 13px; }
.ii-period, .ii-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ii-period button, .ii-chips button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); border-radius: 18px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ii-period button[aria-pressed="true"], .ii-chips button[aria-pressed="true"] { background: var(--tara-teal); border-color: var(--tara-teal); color: #fff; }
.ii-custom { display: inline-flex; gap: 6px; align-items: center; }
.ii-custom[hidden] { display: none; }
.ii-test { font-size: 12.5px; }
.ii-upd { font-size: 12px; color: var(--text-3); margin: -4px 0 12px; }
#iiBody.busy { opacity: .55; transition: opacity .2s; pointer-events: none; }
.ii-loading { padding: 40px; text-align: center; color: var(--text-3); }

/* KPI cards */
.ii-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ii-k { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.ii-k.warn { border-inline-start: 4px solid var(--tara-gold); }
.ii-k.bad { border-inline-start: 4px solid var(--tara-coral); }
.ii-k.hl { background: var(--tara-teal); border-color: var(--tara-teal); color: #fff; }
.ii-kmain { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; border-radius: 12px; }
.ii-kmain:disabled { cursor: default; }
.ii-kmain:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--tara-teal-100); }
.ii-k .k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); padding-inline-end: 18px; }
.ii-k .v { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ii-k .d { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.35; }
.ii-k.hl .k, .ii-k.hl .d { color: rgba(255, 255, 255, .88); }
.ii-info { position: absolute; top: 7px; inset-inline-end: 7px; border: 0; background: none; color: var(--text-3); font-size: 14px; cursor: pointer; line-height: 1; padding: 3px; }
.ii-k.hl .ii-info { color: #fff; }
.ii-def { font-size: 12px; line-height: 1.45; color: var(--text-2); background: var(--surface-2); border-top: 1px solid var(--border); padding: 8px 12px; border-radius: 0 0 12px 12px; }
.ii-k.hl .ii-def { color: var(--text); }
.ii-delta { font-weight: 800; white-space: nowrap; }
.ii-delta.up { color: var(--ok); } .ii-delta.down { color: var(--tara-coral-txt); }
.ii-k.hl .ii-delta { color: #fff; }

/* layout */
.ii-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.ii-grid2.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ii .card { margin-bottom: 12px; }
.ii-grid2 > .card { margin-bottom: 0; }
.ii h4 { margin: 4px 0 8px; font-size: 13px; color: var(--text-2); }
.ii-split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
.ii-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

/* donut */
.ii-donut { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
.ii-donut .ii-legend { width: 100%; }
.ii-donut svg { width: 160px; height: 160px; display: block; }
.ii-donut .d-k { font-size: 10px; fill: var(--text-3); font-weight: 700; }
.ii-donut .d-v { font-size: 17px; fill: var(--text); font-weight: 800; }
.ii-seg { cursor: pointer; transition: stroke-width .15s; }
.ii-seg:hover { stroke-width: 30; }
.ii-legend { display: flex; flex-direction: column; gap: 2px; }
.ii-legend button { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 52px; gap: 6px; align-items: center; border: 0; background: none; padding: 4px 6px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--text); text-align: start; cursor: pointer; }
.ii-legend button:hover, .ii-row:hover, .ii-hbar:hover { background: var(--row-hover); }
.ii-legend i, .ii-rows i { width: 10px; height: 10px; border-radius: 3px; }
.ii-legend .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-legend small, .ii-rows small.p { color: var(--text-3); text-align: end; font-variant-numeric: tabular-nums; }

/* horizontal bars */
.ii-hbars { display: flex; flex-direction: column; gap: 2px; }
.ii-hbar { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(60px, 1fr) minmax(70px, auto); gap: 10px; align-items: center; border: 0; background: none; padding: 5px 6px; border-radius: 8px; font: inherit; text-align: start; cursor: pointer; color: var(--text); }
.ii-hbar .lab { min-width: 0; display: flex; flex-direction: column; }
.ii-hbar .nm { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-hbar .sub { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-hbar .track { height: 12px; background: #EEF1F2; border-radius: 6px; overflow: hidden; }
.ii-hbar .fill { display: block; height: 100%; border-radius: 6px; }
.ii-hbar .val { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.ii-hbar .val small { font-weight: 600; color: var(--text-3); margin-inline-start: 4px; }

/* stacked bar + rows */
.ii-stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #EEF1F2; margin-bottom: 10px; }
.ii-stack button { border: 0; padding: 0; cursor: pointer; min-width: 3px; }
.ii-stack button + button { border-inline-start: 2px solid var(--surface); }
.ii-rows { display: flex; flex-direction: column; gap: 1px; }
.ii-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto 56px; gap: 8px; align-items: center; border: 0; background: none; padding: 5px 6px; border-radius: 6px; font: inherit; font-size: 13px; text-align: start; cursor: pointer; color: var(--text); }
.ii-row .nm small { display: block; font-size: 11px; color: var(--text-3); }
.ii-row .n { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.ii-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* trend */
.ii-trend { width: 100%; height: auto; }
.ii-trend .grid { stroke: #E6ECEC; } .ii-trend .ax { font-size: 10px; fill: var(--text-3); }

/* badges */
.ii-cls { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 10px; color: #fff; background: var(--c); white-space: nowrap; }
.ii-conf { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border-strong); color: var(--text-2); white-space: nowrap; }
.ii-conf.verified { border-color: #8CC7A9; color: var(--ok); }
.ii-conf.partial { border-color: #EBCB72; color: var(--warn); }
.ii-conf.insufficient { border-color: var(--border-strong); color: var(--text-3); }
.ii-conf.rx { background: var(--tara-sky-50); border-color: var(--tara-sky); color: var(--tara-sky-700); }
.ii-conf.test { background: var(--tara-coral-50); border-color: #F3A79F; color: var(--tara-coral-txt); }
.ii-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 8px; background: var(--tara-gold-50); color: var(--warn); }
.ii-tag.bad { background: var(--tara-coral-50); color: var(--tara-coral-txt); }
.ii-tag.ref { background: var(--tara-sky-50); color: var(--tara-sky-700); }
.ii .card h3 .ii-chips { margin-inline-start: 8px; }
.ii-flag { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.ii-flag.ok { background: var(--ok-50); color: var(--ok); }
.ii-flag.belowMin { background: var(--warn-50); color: var(--warn); }
.ii-flag.belowCost { background: var(--tara-coral-50); color: var(--tara-coral-txt); }
.ii-basis { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.ii-basis.velocity, .ii-basis.both { border-color: #8CC7A9; color: var(--ok); }
.ii-basis.thresholdShortHistory { border-color: #EBCB72; color: var(--warn); }
.warn-t { color: var(--warn); }

/* clearance */
.ii-clr { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 10px; }
.ii-more .ii-clr { margin-top: 10px; }
.ii-clr-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.ii-clr-card header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 6px; }
.ii-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 12.5px; margin: 0 0 8px; }
.ii-dl dt { color: var(--text-3); } .ii-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.ii-scn td, .ii-scn th { padding: 5px 7px; font-size: 12.5px; white-space: nowrap; }
.ii-scn tr.belowCost td { background: var(--tara-coral-50); }
.ii-scn tr.belowMin td { background: var(--warn-50); }
.ii-plink { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 160px; }
.ii-plink .sub { font-size: 11.5px; color: var(--text-3); font-weight: 400; }

/* category table, quality, definitions, list */
.ii-pbar { display: inline-block; width: 54px; height: 7px; background: #EEF1F2; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.ii-pbar span { display: block; height: 100%; background: var(--tara-teal); }
.ii-sort { border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; padding: 0; text-transform: inherit; letter-spacing: inherit; }
.ii-sort.asc::after { content: " ▲"; } .ii-sort.desc::after { content: " ▼"; }
.ii-dq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ii-dq button { display: flex; flex-direction: column; gap: 2px; text-align: start; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 9px 11px; font: inherit; cursor: pointer; color: var(--text); }
.ii-dq b { font-size: 19px; } .ii-dq span { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.ii-defs summary { cursor: pointer; font-weight: 800; }
.ii-defs ul { margin: 10px 0 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.55; }
.ii-defs li { margin-bottom: 6px; }
.ii-set label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.ii-set .inp { width: 110px; height: 34px; }
.ii-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--tara-teal); margin-top: 8px; }
.ii-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; font-size: 13px; }
.ii .qf { margin-bottom: 8px; }
.ii-stock .kpi-grid { display: none; }

@media (max-width: 1280px) { .ii-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .ii-grid2, .ii-grid2.wide { grid-template-columns: minmax(0, 1fr); }
  .ii-split { grid-template-columns: minmax(0, 1fr); }
  .ii-dq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ii-clr { grid-template-columns: minmax(0, 1fr); }
  .ii-bar { position: static; padding: 8px; }
  .ii-bar .inp { max-width: 100%; flex: 1 1 140px; width: 100%; }
  .ii-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ii-k .v { font-size: 17px; }
  .ii-kmain { padding: 10px 11px; }
  .ii-split2 { grid-template-columns: minmax(0, 1fr); }
  .ii-hbar { grid-template-columns: minmax(0, 1fr) auto; }
  .ii-hbar .track { grid-column: 1 / -1; grid-row: 2; }
  .ii-row { grid-template-columns: 12px minmax(0, 1fr) auto 50px; }
  .ii-row .n { display: none; }
  .ii-legend button { grid-template-columns: 12px minmax(0, 1fr) auto 46px; }
}

/* ---------- 1.36 Retail X history (inventory-history.js) ---------- */
.hx .hx-sec { margin-top: 18px; }
.hx h4 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.hx-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 10px; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.hx-tag.observed { color: #0A7146; border-color: #8CC7A9; background: #EEF8F2; }
.hx-tag.linked { color: #2B4E7E; border-color: #9DB4D6; background: #EEF3FA; }
.hx-tag.estimate { color: #8A6100; border-color: #EBCB72; background: #FFF8E3; }
.hx-tag.missing { color: #5B6A70; border-color: #C3CCCF; background: #F1F4F5; }
.hx-src .hx-legend { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hx-files { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12px; overflow-wrap: anywhere; }
.hx-kpis .ii-kmain { cursor: default; }
.hx-kpis .ii-k .k { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hx-chart .hx-m:hover rect { opacity: .8; }
.hx-recbox summary { cursor: pointer; font-weight: 700; }
.hx-rec { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.6; }
.hx-pm { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding: 6px 0 18px; overflow-x: auto; }
.hx-pmc { position: relative; flex: 0 0 22px; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.hx-pmc .b, .hx-pmc .s { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.hx-pmc .b { background: #ECAC01; } .hx-pmc .s { background: #037171; }
.hx-pmc small { position: absolute; bottom: -16px; left: -4px; font-size: 9px; color: var(--text-3); white-space: nowrap; }
@media (max-width: 640px) { .hx .table-wrap { font-size: 12.5px; } }