/* Shop Floor app (sf-*): the tablet screens (work centres, queue cards, PIN keypad, lightbox) and the manager screens (orders, instructions, variance, settings).
   Tokens from admin.css only, logical properties only (it reads right-to-left in Arabic), light + dark through the tokens. Tablet first: 768 / 1024 px, fine at 375 px and on desktop.
   Loaded by public/js/admin/modules/shopfloor/kit.js (useCss) and linked in admin.html. Buttons on the tablet are >= 56 px, everything else >= 44 px. */

/* ------------------------------------------------------------ shared */
.sf-page { display: grid; gap: 14px; align-content: start; }
.sf-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-top .grow h1 { font-size: 26px; line-height: 1.2; }
.sf-top .icon-btn, .sf-top .btn { min-height: 48px; min-width: 48px; }
.sf-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-bar-row .search-box { flex: 1 1 220px; max-width: 360px; }
.sf-bar-row .seg, .sf-bar-row .chip-select { min-height: 44px; }
.btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.sf-var { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.sf-var.over { color: var(--danger-ink); }
.sf-var.under { color: var(--ok-ink); }
.sf-product { font-size: 15px; overflow-wrap: anywhere; }
.sf-instr { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line-2); }
.sf-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-bar { height: 12px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.sf-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .4s; }
.sf-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); }
.sf-banner > .ico { color: var(--info-ink); margin-block-start: 2px; }
.sf-banner p { margin: 2px 0 0; }
.sf-banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.sf-banner.ok > .ico { color: var(--ok-ink); }
.sf-h { margin: 8px 0 0; font-size: 16px; }
.sf-thumbs, .sf-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-thumb { width: 84px; height: 84px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--panel-3); cursor: pointer; }
.sf-thumb:hover, .sf-thumb:focus-visible { border-color: var(--accent); }
.sf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ tablet: work centres */
.sf-wcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.sf-wc { display: grid; gap: 14px; align-content: space-between; min-height: 150px; padding: 18px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.sf-wc:hover, .sf-wc:focus-visible { border-color: var(--accent); }
.sf-wc.has-run { border-color: var(--ok); }
.sf-wc-head { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.sf-wc-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sf-wc-total { min-width: 44px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-size: 22px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sf-wc-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sf-count { display: grid; justify-items: center; gap: 0; padding: 6px 2px; border-radius: var(--r-sm); background: var(--panel-2); }
.sf-count b { font-size: 22px; font-variant-numeric: tabular-nums; }
.sf-count small { font-size: 12px; color: var(--muted); text-align: center; }
.sf-count.zero { opacity: .45; }
.sf-count.st-ready b { color: var(--info-ink); }
.sf-count.st-progress b { color: var(--ok-ink); }
.sf-count.st-paused b { color: var(--warn-ink); }

/* ------------------------------------------------------------ tablet: queue */
.sf-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-weight: 650; }
.sf-chip b { font-size: 18px; font-variant-numeric: tabular-nums; }
.sf-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.sf-card, .sf-wo, .sf-ocard, .sf-icard { --st: var(--line); }
.st-ready { --st: var(--info); } .st-progress { --st: var(--ok); } .st-paused { --st: var(--warn); } .st-pending { --st: var(--muted); } .st-done { --st: var(--ok); } .st-cancelled { --st: var(--danger); }
.sf-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-inline-start: 8px solid var(--st); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); min-width: 0; }
.sf-card.st-pending { opacity: .72; }
.sf-card.is-over { border-color: var(--danger); border-inline-start-color: var(--danger); }
.sf-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sf-order { font-size: 20px; }
.sf-qty { margin-inline-start: auto; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-opname { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--accent-d); }
.sf-times { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
.sf-times > div { display: grid; gap: 0; }
.sf-times small { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sf-times b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sf-over { padding: 2px 10px; border-radius: 999px; background: var(--danger-soft); color: var(--danger-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-card.is-over .sf-bar > i { background: var(--danger); }
.sf-card.is-over .sf-actual { color: var(--danger-ink); }
.sf-workers { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-worker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); font-weight: 650; }
.sf-clock { font-variant-numeric: tabular-nums; font-weight: 800; }
.sf-wait { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.sf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
:root:root .sf-act { flex: 1 1 140px; min-height: 60px; font-size: 18px; font-weight: 750; }

/* ------------------------------------------------------------ PIN dialog (operator tiles + keypad) */
.sf-op-box { display: grid; gap: 14px; justify-items: center; }
.sf-op-box > * { max-width: 100%; }
.sf-op-sub { margin: 0; text-align: center; }
.sf-op-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; }
.sf-op { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; min-height: 120px; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); color: inherit; cursor: pointer; text-align: center; font: inherit; }
.sf-op:hover:not(:disabled), .sf-op:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.sf-op:disabled { opacity: .55; cursor: not-allowed; }
.sf-op b { overflow-wrap: anywhere; }
.sf-op-busy { white-space: normal; }
.sf-op-who { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.sf-op-hint { margin: 0; }
.sf-dots { display: flex; gap: 16px; justify-content: center; }
.sf-dots i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--muted); background: transparent; transition: background .1s; }
.sf-dots i.on { background: var(--accent); border-color: var(--accent); }
.sf-dots.bad i { border-color: var(--danger); animation: sf-shake .35s; }
@keyframes sf-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.sf-op-error { min-height: 22px; color: var(--danger-ink); font-weight: 650; text-align: center; }
.sf-op-error.ph { visibility: hidden; }
.sf-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 84px)); gap: 12px; justify-content: center; }
.sf-key { height: 72px; border-radius: 18px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 30px; font-weight: 750; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.sf-key:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.sf-key:active:not(:disabled) { transform: scale(.96); }
.sf-key:disabled { opacity: .5; }
.sf-key.small { color: var(--muted); }
.sf-op-change { min-height: 56px; }

/* ------------------------------------------------------------ lightbox */
.sf-lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 56px 12px; background: color-mix(in srgb, var(--side) 94%, transparent); }
.sf-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); touch-action: pan-y; }
.sf-lb .icon-btn { position: absolute; width: 56px; height: 56px; color: var(--side-strong); background: var(--side-hl); border-radius: 50%; }
.sf-lb-close { inset-block-start: 10px; inset-inline-end: 10px; }
.sf-lb-nav { inset-block-start: 50%; translate: 0 -50%; }
.sf-lb-prev { inset-inline-start: 10px; }
.sf-lb-next { inset-inline-end: 10px; }
[dir="rtl"] .sf-lb-nav .ico { transform: scaleX(-1); }
.sf-lb-count { position: absolute; inset-block-end: 14px; inset-inline: 0; text-align: center; color: var(--side-strong); font-weight: 700; }

/* ------------------------------------------------------------ manager: orders, order page */
.sf-ogrid, .sf-igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.sf-ocard, .sf-icard { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-inline-start: 6px solid var(--st); border-radius: var(--r); background: var(--panel); color: inherit; text-decoration: none; text-align: start; font: inherit; cursor: pointer; min-width: 0; min-height: 44px; }
.sf-ocard.has-run { --st: var(--ok); }
.sf-ocard:hover, .sf-icard:hover, .sf-icard:focus-visible { border-color: var(--accent); }
.sf-ostats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.sf-ostats > div { display: grid; }
.sf-ostats small { color: var(--muted); font-size: 12px; font-weight: 700; }
.sf-icard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-wolist { display: grid; gap: 12px; }
.sf-wo { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-inline-start: 6px solid var(--st); border-radius: var(--r); background: var(--panel); min-width: 0; }
.sf-wo-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sf-wo-head .btn { min-height: 44px; }
.sf-seq { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); font-weight: 800; font-size: 13px; }
.sf-tl-wrap, .sf-table-wrap { overflow-x: auto; }
.sf-tl, .sf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sf-tl th, .sf-table th { text-align: start; font-size: 12px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-block-end: 1px solid var(--line); white-space: nowrap; }
.sf-tl td, .sf-table td { padding: 9px 10px; border-block-end: 1px solid var(--line); vertical-align: middle; }
.sf-tl th.num, .sf-tl td.num, .sf-table th.num, .sf-table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.sf-open-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sf-open-wo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); }

/* ------------------------------------------------------------ manager: instructions editor, settings */
.sf-icard-head b { overflow-wrap: anywhere; }
.sf-gal-head { display: flex; align-items: center; gap: 10px; margin-block: 12px 8px; }
.sf-gal-head .btn { min-height: 44px; }
.sf-gimg { position: relative; }
.sf-gdel { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 44px; height: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 50%; }
.modal textarea { width: 100%; }
.sf-set { display: grid; gap: 14px; }
.sf-set-row { gap: 16px; min-height: 56px; }
.sf-set-text { display: grid; gap: 4px; min-width: 0; }

/* ------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .sf-top .grow h1 { font-size: 22px; }
  .sf-wc-counts { grid-template-columns: repeat(2, 1fr); }
  .sf-bar-row .search-box { max-width: none; flex-basis: 100%; }
  .sf-bar-row .chip-select, .sf-bar-row .segmented { flex: 1 1 140px; }
  .sf-key { height: 64px; font-size: 26px; }
  .sf-pad { grid-template-columns: repeat(3, minmax(0, 76px)); gap: 10px; }
  .sf-tl thead, .sf-table thead { display: none; }
  .sf-tl, .sf-tl tbody, .sf-tl tr, .sf-tl td, .sf-table, .sf-table tbody, .sf-table tr, .sf-table td { display: block; width: 100%; }
  .sf-tl tr, .sf-table tr { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); padding: 6px 10px; margin-block-end: 8px; }
  .sf-tl td, .sf-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: end; min-height: 32px; }
  .sf-tl td::before, .sf-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; text-align: start; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .sf-bar > i { transition: none; } .sf-dots.bad i { animation: none; } }