:root {
  --c-primary-600: #0B5FA5; --c-primary-700: #084A82; --c-primary-50: #E8F1FA;
  --c-bg: #F5F7FA; --c-surface: #FFFFFF; --c-border: #D9DEE5; --c-text: #121821; --c-text-muted: #4A5565;
  --s-planned: #6B7280; --s-planned-bg: #F1F2F4;
  --s-in-progress: #1D6FD8; --s-in-progress-bg: #E6F0FC;
  --s-qa-hold: #B26A00; --s-qa-hold-bg: #FFF4E0;
  --s-quarantine: #B42318; --s-quarantine-bg: #FDECEA;
  --s-released: #127A3E; --s-released-bg: #E7F6EC;
  --s-shipped: #5B3FC4; --s-shipped-bg: #EFEBFB;
  --s-overdue: #D92D20;
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --tap-min: 56px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-2: 0 8px 24px rgba(16,24,40,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0E131A; --c-surface: #161D27; --c-border: #2A3442; --c-text: #E6EBF2; --c-text-muted: #9AA6B6; --c-primary-50: #13263A;
    --s-planned-bg: #222a35; --s-in-progress-bg: #13284a; --s-qa-hold-bg: #3a2a0f; --s-quarantine-bg: #3d1614; --s-released-bg: #10301d; --s-shipped-bg: #251c47;
    --s-in-progress: #5B9BF0; --s-qa-hold: #F0A43A; --s-quarantine: #F0706A; --s-released: #4CC27B; --s-shipped: #9C86F0; --c-primary-600: #4A90D9;
  }
}
:root[data-theme="dark"] {
  --c-bg: #0E131A; --c-surface: #161D27; --c-border: #2A3442; --c-text: #E6EBF2; --c-text-muted: #9AA6B6; --c-primary-50: #13263A;
  --s-planned-bg: #222a35; --s-in-progress-bg: #13284a; --s-qa-hold-bg: #3a2a0f; --s-quarantine-bg: #3d1614; --s-released-bg: #10301d; --s-shipped-bg: #251c47;
  --s-in-progress: #5B9BF0; --s-qa-hold: #F0A43A; --s-quarantine: #F0706A; --s-released: #4CC27B; --s-shipped: #9C86F0; --c-primary-600: #4A90D9;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--c-bg); color: var(--c-text); font: 14px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
/* codes and quantities always read left-to-right ("668 / 1,484"), while their block stays right-aligned in the RTL layout */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
:where(div, td, dd, p, h2, input).mono { text-align: right; }
.muted { color: var(--c-text-muted); }
.hidden { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: var(--c-primary-600); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .card:focus-visible { outline: 3px solid var(--c-primary-600); outline-offset: 2px; }
.btn.primary { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.btn.primary:hover { background: var(--c-primary-700); }
.btn.pass { background: var(--s-released); border-color: var(--s-released); color: #fff; }
.btn.warn { background: var(--s-qa-hold); border-color: var(--s-qa-hold); color: #fff; }
.btn.danger { background: var(--s-quarantine); border-color: var(--s-quarantine); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .03em; }
input, select, textarea { min-height: 38px; padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); width: 100%; }
textarea { min-height: 70px; resize: vertical; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* status chips (color + icon + text) */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.st-planned, .st-pending { color: var(--s-planned); background: var(--s-planned-bg); }
.st-in_progress { color: var(--s-in-progress); background: var(--s-in-progress-bg); }
.st-qa_hold { color: var(--s-qa-hold); background: var(--s-qa-hold-bg); }
.st-quarantine, .st-rejected { color: var(--s-quarantine); background: repeating-linear-gradient(135deg, var(--s-quarantine-bg) 0 6px, transparent 6px 10px), var(--s-quarantine-bg); border-color: var(--s-quarantine); }
.st-released, .st-completed, .st-delivered, .st-pass { color: var(--s-released); background: var(--s-released-bg); }
.st-shipped, .st-dispatched, .st-in_transit, .st-loading { color: var(--s-shipped); background: var(--s-shipped-bg); }
.st-overdue { color: var(--s-overdue); border-color: var(--s-overdue); background: transparent; }

/* app shell */
.shell { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 56px 1fr; height: 100vh; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.brand { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; color: var(--c-primary-600); }
.brand svg { width: 24px; height: 24px; }
.topbar .search { max-width: 360px; }
.topbar .spacer { flex: 1; }
.live { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-muted); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-released); }
.live.off::before { background: var(--s-quarantine); }
.sidenav { background: var(--c-surface); border-inline-end: 1px solid var(--c-border); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.sidenav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--c-text); text-decoration: none; font-weight: 500; }
.sidenav a:hover { background: var(--c-bg); }
.sidenav a.active { background: var(--c-primary-50); color: var(--c-primary-600); font-weight: 700; }
.main { overflow: auto; padding: 20px 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.panel-pad { padding: 16px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; border-inline-start: 4px solid var(--c-border); }
.kpi .v { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--c-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kpi.k-wip { border-inline-start-color: var(--s-in-progress); } .kpi.k-qa { border-inline-start-color: var(--s-qa-hold); }
.kpi.k-q { border-inline-start-color: var(--s-quarantine); } .kpi.k-od { border-inline-start-color: var(--s-overdue); } .kpi.k-rel { border-inline-start-color: var(--s-released); }

.toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; padding: 12px; margin-bottom: 12px; }
.toolbar .field { min-width: 150px; }
.seg { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; background: var(--c-surface); padding: 0 14px; min-height: 36px; cursor: pointer; font-weight: 600; }
.seg button.on { background: var(--c-primary-600); color: #fff; }
.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; min-height: 38px; }
.check input { width: 18px; min-height: 18px; }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 300px; }
.col-head { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--c-border); font-weight: 700; font-size: 13px; }
.col.hot .col-head { background: var(--s-qa-hold-bg); }
.col.hot2 .col-head { background: var(--s-quarantine-bg); }
.col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.count { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 6px; }
.card:hover { border-color: var(--c-primary-600); }
.card.flash { animation: flash 1.5s ease-out; }
@keyframes flash { from { background: var(--c-primary-50); } to { background: var(--c-surface); } }
@media (prefers-reduced-motion: reduce) { .card.flash { animation: none; } }
.card .top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.card .code { font-family: var(--font-mono); font-weight: 700; }
.card .meta { font-size: 12px; color: var(--c-text-muted); }
.bar { height: 6px; border-radius: 3px; background: var(--c-border); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--s-in-progress); }
.dwell { font-size: 12px; font-weight: 700; }
.dwell.amber { color: var(--s-qa-hold); } .dwell.red { color: var(--s-overdue); }

/* table */
.tbl-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--c-surface); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--c-text-muted); cursor: pointer; z-index: 1; }
tbody tr { cursor: pointer; } tbody tr:hover { background: var(--c-bg); }
tr.flash td { animation: flash 1.5s ease-out; }

/* drawer & modal */
.scrim { position: fixed; inset: 0; background: rgba(10,15,25,.45); z-index: 40; }
.drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: min(520px, 100%); background: var(--c-surface); z-index: 41; box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.drawer-body { padding: 16px 20px; overflow: auto; flex: 1; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px; }
.tabs button { border: 0; background: none; padding: 10px 12px; cursor: pointer; font-weight: 600; color: var(--c-text-muted); border-bottom: 3px solid transparent; }
.tabs button.on { color: var(--c-primary-600); border-bottom-color: var(--c-primary-600); }
.modal { position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 20px; }
.modal-scrim { z-index: 50; }

.stepper { list-style: none; padding: 0; margin: 0; }
.stepper li { position: relative; padding-block: 0 16px; padding-inline-start: 28px; }
.stepper li::before { content: ""; position: absolute; inset-inline-start: 8px; top: 18px; bottom: 0; width: 2px; background: var(--c-border); }
.stepper li:last-child::before { display: none; }
.stepper .dot { position: absolute; inset-inline-start: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-surface); display: grid; place-items: center; font-size: 10px; color: #fff; }
.stepper .dot.completed { background: var(--s-released); border-color: var(--s-released); }
.stepper .dot.in_progress { border-color: var(--s-in-progress); box-shadow: inset 0 0 0 3px var(--s-in-progress); }
.stepper .dot.qa_hold { background: var(--s-qa-hold); border-color: var(--s-qa-hold); }
.stepper .dot.quarantine { background: var(--s-quarantine); border-color: var(--s-quarantine); }
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed .item { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 10px; }

.toast-wrap { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--c-text); color: var(--c-surface); padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); font-weight: 600; display: flex; gap: 12px; align-items: center; }
.toast.err { background: var(--s-quarantine); color: #fff; }

/* bottleneck bars */
.bn { display: grid; grid-template-columns: 200px 1fr 90px; gap: 10px; align-items: center; padding: 6px 0; }
.bn .track { height: 14px; background: var(--c-bg); border-radius: 4px; position: relative; overflow: hidden; }
.bn .track i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: var(--s-in-progress); }
.bn .track i.over { background: var(--s-overdue); }
.bn .track b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--c-text); }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .panel { width: min(440px, 100%); padding: 28px; }
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ===== factory (operator) ===== */
.factory { font-size: 18px; min-height: 100vh; display: flex; flex-direction: column; }
.f-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 5; }
.f-top .spacer { flex: 1; }
.netbar { padding: 8px 16px; font-weight: 700; font-size: 15px; }
.netbar.off { background: var(--s-quarantine); color: #fff; }
.netbar.q { background: var(--s-qa-hold-bg); color: var(--s-qa-hold); }
.f-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; width: 100%; margin: 0 auto; }
.f-card { min-height: 96px; padding: 16px; border-radius: var(--radius-md); background: var(--c-surface); border: 2px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; width: 100%; }
.f-card:hover { border-color: var(--c-primary-600); }
.f-card.locked { opacity: .65; cursor: not-allowed; border-style: dashed; }
.f-card .code { font-family: var(--font-mono); font-weight: 800; font-size: 22px; }
.f-card .chip { font-size: 15px; padding: 4px 10px; }
.f-big { min-height: 72px; font-size: 20px; font-weight: 800; width: 100%; border-radius: var(--radius-md); }
.f-btn { min-height: var(--tap-min); font-size: 18px; }
.keypad, .qty-display { direction: ltr; }
.qty-display { font-size: 40px; font-weight: 800; text-align: right; padding: 8px 16px; min-height: 72px; border: 2px solid var(--c-primary-600); border-radius: var(--radius-md); background: var(--c-surface); font-family: var(--font-mono); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { min-height: 64px; font-size: 26px; font-weight: 700; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; }
.keypad button:active { background: var(--c-primary-50); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; font-size: 15px; }
.tags button.on { background: var(--c-primary-600); color: #fff; border-color: var(--c-primary-600); }
.f-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-toggle button { min-height: 56px; border-radius: var(--radius-md); border: 2px solid var(--c-border); background: var(--c-surface); font-size: 17px; font-weight: 700; cursor: pointer; }
.f-toggle button.on { border-color: var(--c-primary-600); background: var(--c-primary-50); color: var(--c-primary-600); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 56px auto 1fr; }
  .sidenav { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--c-border); padding: 6px; }
  .sidenav a { white-space: nowrap; padding: 8px 10px; }
  .main { padding: 16px; }
  .topbar .search, .topbar .who { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .bn { grid-template-columns: 1fr; }
}

/* ===== Editable interface texts ===== */
body.text-edit { padding-top: 38px; }
body.text-edit .te-hover { outline: 2px dashed var(--c-primary-600); outline-offset: 2px; cursor: text; }
.edit-banner { position: fixed; top: 0; inset-inline: 0; z-index: 69; display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: 6px 12px; background: var(--c-primary-600); color: #fff; font-weight: 600; font-size: 13px; }
.text-editor { position: fixed; z-index: 70; inset-inline-start: 16px; bottom: 16px; width: min(440px, calc(100% - 32px)); padding: 14px; box-shadow: var(--shadow-2); }

/* ===== Receiving: raw materials & empty packaging ===== */
.st-expected { color: var(--s-planned); background: var(--s-planned-bg); }
.st-received_company { color: var(--s-shipped); background: var(--s-shipped-bg); }
.st-in_transit_factory { color: var(--s-in-progress); background: var(--s-in-progress-bg); }
.st-received_factory { color: var(--s-released); background: var(--s-released-bg); }
.mat-raw_material { color: var(--s-qa-hold); background: var(--s-qa-hold-bg); }
.mat-empty_packaging { color: var(--s-shipped); background: var(--s-shipped-bg); }
.route-via_company, .route-direct_factory { color: var(--c-text-muted); background: var(--c-bg); border-color: var(--c-border); }

/* route progress: supplier -> (company -> transfer ->) factory */
.rtrack { list-style: none; margin: 2px 0; padding: 0; display: flex; gap: 4px; }
.rtrack li { flex: 1; font-size: 11px; font-weight: 600; color: var(--c-text-muted); text-align: center; padding-top: 8px; position: relative; }
.rtrack li::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; border-radius: 2px; background: var(--c-border); }
.rtrack li.done::before { background: var(--s-released); }
.rtrack li.cur::before { background: var(--s-in-progress); }
.rtrack li.cur { color: var(--c-text); }

.recv-strip { margin-bottom: 16px; }
.recv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.recv-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; border: 1px solid transparent; }
.recv-tile:hover { border-color: currentColor; }
.recv-tile .v { font-size: 26px; font-weight: 700; line-height: 1.1; }
.recv-tile .l { font-size: 13px; font-weight: 600; }
.recv-tile .split { font-size: 12px; opacity: .85; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: 13px; }
.facts dt { color: var(--c-text-muted); }
.facts dd { margin: 0; }

@media (max-width: 760px) {
  .recv-tiles { grid-template-columns: repeat(2, 1fr); }
}