/* ============ Supplier board: flat pass (6.11, Daniel: "ככה בדיוק אני רוצה" on reel DfVio6bBWl1) ============
   1. Solid content: no gradients or glow; cards and lists are solid white.
      6.11 evening, Daniel approved the flat pass and asked for "טיפה יותר ליקוויד גלאס" as the final look. So glass goes
      only on what floats above the content (header, tab bar, sticky day heading, the order sheet's head and foot, bulk
      bar, toasts): a near-opaque navy or white tint with blur, a 1 px light rim, no gradient edge. Every glass surface
      falls back to the solid flat colour (no backdrop-filter support, reduced transparency, more contrast).
   2. One line-icon family (inline SVG, 1.9 stroke). No emoji.
   3. Chips only where they change a decision (status, problem, change, late, reprint). Delivery is text with an icon.
   4. No card inside a card: inside the order, items are sections split by a hairline.
   5. Related facts sit together (size + type + print; money lines; the customer block).
   6. Concentric radii: a box inside a padded box gets (outer radius - padding), with a small floor.
   7. No looping animation. Motion only for a change that matters (a saved status, an opened sheet); the skeleton
      shimmers only while it is loading.
   Brand: navy #071e44 for the main action and the bars, gold #c4a35a (solid) for the selected state. Contrast and focus
   rules from Gate 0 stay: text 4.5:1 or more, a 3 px focus ring. */

@font-face { font-family: "Assistant"; src: url("/fonts/assistant-400.woff") format("woff"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Assistant"; src: url("/fonts/assistant-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Assistant"; src: url("/fonts/assistant-700.woff") format("woff"); font-weight: 700 900; font-display: swap; }

:root {
  color-scheme: light;
  --navy: #071e44; --navy-hover: #0d2b5e; --gold: #c4a35a; --gold-ink: #1b1404;
  --page: #f4f5f7; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef0f4;
  --ink: #0f172a; --muted: #4b5565; --faint: #5f6878; --hair: #e3e6eb; --hair-2: #cfd4dc;
  --focus: #071e44;
  --red: #b42318; --red-bg: #fdecea; --red-line: #f2b8b2; --amber: #7a5000; --amber-bg: #fdf3e1; --green: #1d6b3a; --blue: #1d3a7a; --blue-bg: #e8eefb;
  --r-card: 16px; --pad: 16px; --r-ctl: 10px; --r-in: 6px;
  --hdr: 56px; --tab: 64px;
  --font: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --st-new: #eef0f4; --st-new-ink: #344054;
  --st-rec: #e8eefb; --st-rec-ink: #1d3a7a;
  --st-pro: #fbf2df; --st-pro-ink: #6b4f12;
  --st-shp: #071e44; --st-shp-ink: #ffffff;
  --st-bad: #fdecea; --st-bad-ink: #b42318;
  /* glass: alpha .88 keeps the gold brand text 4.8:1 and muted text 7.6:1 even with white right behind the bar */
  --glass-navy: rgba(7, 30, 68, .88); --glass-page: rgba(244, 245, 247, .85); --glass-white: rgba(255, 255, 255, .85);
  --glass-fx: blur(18px) saturate(160%); --glass-fx-sm: blur(12px) saturate(160%);
  --rim-dark: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06);
  --rim-light: inset 0 1px 0 rgba(255, 255, 255, .9);
  --float-drop: 0 10px 28px -10px rgba(7, 30, 68, .45);
  --tab-gap: 10px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 16px/1.45 var(--font); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 40px 10px; }
:lang(zh-CN) body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", var(--font); }
svg { flex: none; }

/* ---------- bars: navy glass (solid navy where glass is off) ---------- */
.hdr, .tabbar { color: #fff; --ink: #ffffff; --muted: #c9d2e6; --focus: #e3c682; }
/* Within ~25px of the screen's bottom edge the browser cannot blur (nothing below the screen to sample), so rows
   there show through sharp. The tab bar floats 10px above that edge: it gets a thicker tint (7 % shows through). */
.tabbar::before { content: ""; position: absolute; z-index: -1; border-radius: inherit; pointer-events: none; background: rgba(7, 30, 68, .93); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); }
.tabbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.hdr { position: sticky; top: 0; z-index: 40; height: var(--hdr); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; }
/* The blur layer runs a full header-height below the bar and is masked back to it: a backdrop blur only samples what
   is under its own box, so rows right at the bar's bottom edge stayed sharp. Hard-stop mask, nothing visible fades. */
.hdr::before { content: ""; position: absolute; inset: 0 0 -100%; z-index: -1; pointer-events: none; background: var(--glass-navy);
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  -webkit-mask-image: linear-gradient(#000 50%, transparent 50%); mask-image: linear-gradient(#000 50%, transparent 50%); }
.hdr::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgba(255, 255, 255, .08); pointer-events: none; }
.brand { display: flex; align-items: center; font-weight: 800; white-space: nowrap; }
.brand b { color: var(--gold); font-size: 15px; font-weight: 800; margin-inline-start: 12px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(255, 255, 255, .25); line-height: 22px; }
.logo { display: block; height: 28px; width: auto; filter: brightness(0) invert(1); }
.hdr .who { margin-inline-start: auto; color: var(--muted); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { width: 44px; height: 44px; border-radius: var(--r-ctl); border: 0; background: transparent; display: grid; place-items: center; color: var(--ink); flex: none; }
.iconbtn:hover { background: rgba(255, 255, 255, .1); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.spin svg { animation: spin .9s linear infinite; } /* only while a request runs */
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn.lang { width: auto; min-width: 46px; padding: 0 10px; font-weight: 800; font-size: 14px; border: 1px solid rgba(255, 255, 255, .3); }

/* phone: a floating glass capsule, the list scrolls under it; radii are concentric (22 = 16 + 6).
   As in the header, the blur layer reaches one bar-height above and below and is masked back to the capsule. */
.tabbar { position: fixed; z-index: 45; inset-inline: 12px; bottom: calc(var(--tab-gap) + env(safe-area-inset-bottom)); height: var(--tab); padding: 6px; border-radius: 22px; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 4px; box-shadow: var(--float-drop); }
.tabbar::before { inset: -100% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='22'/%3E%3C/svg%3E") center / 100% calc(100% / 3) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='22'/%3E%3C/svg%3E") center / 100% calc(100% / 3) no-repeat; }
.tabbar::after { box-shadow: var(--rim-dark); }
.tabbar button { border: 0; background: none; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--muted); position: relative; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.on { background: var(--gold); color: var(--gold-ink); }
.tabbar .badge { position: absolute; top: 2px; inset-inline-end: calc(50% - 24px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

main { padding: 16px 12px calc(var(--tab) + var(--tab-gap) + 28px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; }

/* ---------- cards: white, hairline, no shadow ---------- */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: var(--pad); margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card h4, .block h4 { margin: 14px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.hero .k { color: var(--muted); font-weight: 700; font-size: 14px; }
.hero .v { font-size: 44px; font-weight: 800; line-height: 1.05; margin-top: 2px; }

/* ---------- controls ---------- */
.btn { border: 1px solid transparent; height: 48px; padding: 0 18px; border-radius: var(--r-ctl); font-weight: 800; background: var(--navy); color: #fff; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn:hover { background: var(--navy-hover); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--hair-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { height: 44px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; }
.field, .search, .notefield, select, .reqform textarea { border: 1px solid var(--hair-2); background: var(--surface); border-radius: var(--r-ctl); color: var(--ink); }
.field { flex: 1; min-width: 0; height: 48px; padding: 0 14px; font-weight: 600; }
.field::placeholder, .search::placeholder, .notefield::placeholder, textarea::placeholder { color: var(--faint); font-weight: 500; }
select { height: 48px; padding: 0 12px; font-weight: 700; }
.notefield, .reqform textarea { width: 100%; min-height: 72px; padding: 10px 12px; resize: vertical; }
.trow { display: flex; gap: 8px; align-items: center; }
.reqform { display: grid; gap: 8px; }
.linkish { border: 0; background: none; color: var(--navy); font-weight: 700; font-size: 14px; min-height: 44px; padding: 0 2px; text-decoration: underline; text-underline-offset: 3px; }
.linkish[aria-pressed="true"] { text-decoration: none; color: var(--muted); }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.dates label { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; display: grid; gap: 6px; }
.lblrow { display: grid; gap: 4px; }

/* ---------- toolbar: search + filters, one white card ---------- */
.toolbar { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 8px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.toolbar .row { display: flex; gap: 8px; align-items: center; }
.search { flex: 1; min-width: 0; height: 44px; border-radius: 8px; /* 16 - 8 */ padding: 0 14px 0 38px; font-weight: 600; background: var(--surface-2)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6878' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-f { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; }
.chip-f .n { color: var(--faint); font-weight: 700; }
.chip-f svg { width: 16px; height: 16px; }
.chip-f.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.chip-f.on .n { color: #3a2c08; }
.tmeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; padding: 0 4px; }
.batch { color: var(--faint); font-size: 13px; font-weight: 600; }
.toolbar .tools { display: flex; gap: 6px; }
.toolbar .tools .btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* ---------- a day: a plain heading on the page, then one white list ---------- */
.day { margin: 0 0 20px; }
.dayhead { position: sticky; top: var(--hdr); z-index: 20; background: var(--glass-page); -webkit-backdrop-filter: var(--glass-fx-sm); backdrop-filter: var(--glass-fx-sm); padding: 10px 4px; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.dayhead .d b { font-size: 18px; font-weight: 800; }
.dayhead .tot { grid-row: span 2; text-align: end; font-size: 24px; font-weight: 800; line-height: 1.1; }
.dayhead .tot small { display: block; font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.dayhead .cnt { font-size: 14px; font-weight: 600; color: var(--muted); }
.dayhead .prog { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--navy); }
.dayfoot { display: flex; justify-content: center; margin-top: 10px; }

.list { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
.orow { width: 100%; text-align: start; border: 0; background: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hair); color: var(--ink); }
.orow:last-child { border-bottom: 0; }
.orow:hover { background: var(--surface-2); }
.orow.sel { background: #fdf8ec; box-shadow: inset 3px 0 0 var(--gold); }
.orow.problem { box-shadow: inset 3px 0 0 var(--red); }
.orow.done .thumbs { opacity: .6; }
.orow[aria-pressed="true"] { background: #fdf8ec; }
.thumbs { display: flex; grid-row: span 2; }
.thumbs img, .thumbs span { width: 48px; height: 48px; border-radius: var(--r-ctl); object-fit: cover; background: var(--surface-3); border: 2px solid var(--surface); }
.thumbs > * + * { margin-inline-start: -22px; }
.thumbs span { display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--muted); }
.orow .top { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.orow .no { font-size: 17px; font-weight: 800; }
.orow .sub { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: 8px; }
.orow .sub .sum { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.orow .amt { grid-row: span 2; text-align: end; font-size: 18px; font-weight: 800; }
.orow .amt small { display: block; font-size: 12px; font-weight: 600; color: var(--faint); }
.pickbox { width: 22px; height: 22px; border-radius: var(--r-in); display: inline-grid; place-items: center; border: 2px solid var(--hair-2); }
.pickbox svg { width: 16px; height: 16px; }
.orow[aria-pressed="true"] .pickbox { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* status: the one chip everywhere; flags only where they change a decision */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill.st-new { background: var(--st-new); color: var(--st-new-ink); }
.pill.st-received { background: var(--st-rec); color: var(--st-rec-ink); }
.pill.st-production { background: var(--st-pro); color: var(--st-pro-ink); }
.pill.st-shipped { background: var(--st-shp); color: var(--st-shp-ink); }
.pill.st-problem { background: var(--st-bad); color: var(--st-bad-ink); }
.pill.st-hold { background: var(--st-pro); color: var(--st-pro-ink); box-shadow: inset 0 0 0 1px var(--st-pro-ink); }
.pill.st-cancelled { background: var(--st-new); color: var(--muted); text-decoration: line-through; }
.flag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-in); font-size: 12px; font-weight: 800; color: var(--ink); border: 1px solid var(--hair-2); background: var(--surface); white-space: nowrap; }
.flag.pill-changed, .flag.pill-item { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.flag.late { color: #fff; background: var(--red); border-color: var(--red); }
.flag.soon { color: var(--amber); background: var(--amber-bg); border-color: #edd29c; }
.flag.msg { color: var(--blue); background: var(--blue-bg); border-color: #c4d2f2; }
/* delivery is information, not a decision: text with an icon */
.ship { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ship svg { width: 15px; height: 15px; }
.ship.home { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-in); font-size: 12px; font-weight: 800; white-space: nowrap; }
.chip.late { background: var(--red); color: #fff; }
.chip.soon { background: var(--amber-bg); color: var(--amber); }
.chip.pick { background: var(--surface-3); color: var(--muted); }
.noteicon { display: inline-flex; color: var(--faint); }
.noteicon svg { width: 15px; height: 15px; }

/* ---------- one order: a white sheet (phone) or pane (desktop); items are sections, not cards ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; z-index: 61; inset-inline: 0; bottom: 0; height: 92vh; height: min(92dvh, 900px); border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); display: flex; flex-direction: column; transform: translateY(105%); transition: transform .35s var(--ease); border-top: 1px solid var(--hair); }
.sheet.on { transform: none; }
.sheet .grip { height: 22px; display: grid; place-items: center; touch-action: none; cursor: grab; flex: none; }
.sheet .grip::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--hair-2); }
/* head and foot are sticky glass inside the scroller; each blur layer reaches one bar-height into the items and is
   masked back to its bar (same reason as the header: no sharp text along the edge) */
.sheet .shead { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; padding: 2px 12px 12px 16px; border-bottom: 1px solid var(--hair); flex: none; }
.sheet .shead::before, .sheet .sfoot::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--glass-white); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); }
.sheet .shead::before { inset: 0 0 -100%; -webkit-mask-image: linear-gradient(#000 50%, transparent 50%); mask-image: linear-gradient(#000 50%, transparent 50%); }
/* The foot sits on the screen's bottom edge, where the browser cannot blur (see the tab bar), and it holds the status
   buttons: it gets a thicker tint (6 % shows through). */
.sheet .sfoot::before { inset: -100% 0 0; background: rgba(255, 255, 255, .94);
  -webkit-mask-image: linear-gradient(transparent 50%, #000 50%); mask-image: linear-gradient(transparent 50%, #000 50%); }
.sheet .shead h2 { margin: 0; font-size: 24px; font-weight: 800; white-space: nowrap; }
.sheet .shead h2:focus { outline: none; }
.sheet .shead h2:focus-visible { outline: 3px solid var(--focus); border-radius: var(--r-in); }
.sheet .shead .amt { font-size: 22px; font-weight: 800; }
.sheet .shead .iconbtn { color: var(--muted); }
.sheet .shead .iconbtn:hover { background: var(--surface-3); }
.sheet .shead .srow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet .sbody { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column;
  scroll-padding-block: var(--shead-h, 96px) var(--sfoot-h, 140px); }
.sheet .sinner { flex: 1 0 auto; padding: 0 16px 16px; }
.sheet .sfoot { position: sticky; bottom: 0; z-index: 3; flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.empty-pane { display: none; }

.item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.item > div { min-width: 0; }
.imgcol { display: grid; gap: 6px; align-self: start; justify-items: start; width: 88px; }
.imgbtn { position: relative; border: 0; padding: 0; background: none; border-radius: var(--r-ctl); cursor: zoom-in; width: 88px; height: 88px; }
.imgbtn img, .item .noimg { display: block; width: 88px; height: 88px; border-radius: var(--r-ctl); object-fit: cover; background: var(--surface-3); border: 1px solid var(--hair); }
.imgcount { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 12px; font-weight: 700; }
.imgcount svg { width: 14px; height: 14px; }
.item .t { font-weight: 800; font-size: 16px; line-height: 1.3; }
.item .he { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* size, quantity, type and print as one block */
.item .facts { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; align-items: flex-end; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-ctl); }
.item .lbl { display: block; font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.item .size { font-size: 26px; font-weight: 800; line-height: 1; }
.qtychip { display: inline-block; font-size: 22px; font-weight: 800; line-height: 1; padding: 2px 8px 3px; border-radius: var(--r-in); background: var(--red); color: #fff; }
.item .type { font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-in); }
.item .type.t-fan { background: var(--navy); color: #fff; }
.item .type.t-player { background: var(--gold); color: var(--gold-ink); }
.item .type.t-retro { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.item .type.t-other { background: var(--surface-3); color: var(--navy); }
.item .print { font: 700 15px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-in); background: var(--surface); border: 1px solid var(--hair-2); }
.item .note { color: var(--amber); font-weight: 700; margin-top: 8px; font-size: 14px; }
.item .price { margin-top: 8px; font-weight: 800; font-size: 15px; color: var(--ink); }
.item .price .bd, .bd { font-size: 13px; color: var(--muted); font-weight: 600; }
.item.item-held { box-shadow: inset 3px 0 0 var(--red); padding-inline-start: 10px; }
.itemacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.item .reqform select, .item .reqform .field, .item .reqform input { width: 100%; min-width: 0; height: 44px; }
.item .reqform .trow > * { min-width: 0; }
.issue { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-ctl); font-size: 13px; background: var(--surface-2); border: 1px solid var(--hair); }
.issue.open.k-not_available, .issue.open.k-hold, .issue.open.k-cancel { background: var(--red-bg); border-color: var(--red-line); color: #7a1a12; }
.issue .muted { color: inherit; opacity: .85; }
.issue .offer { font-weight: 700; }

/* the other parts of an order: sections with a hairline, no boxes */
.block { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.block h4 { margin-top: 0; }
.client .nm { font-weight: 800; font-size: 16px; }
.labelnote { margin-top: 6px; font-weight: 700; color: var(--amber); }
.custnote { white-space: pre-wrap; font-weight: 600; }
.reqline { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--hair); }
.reqline:first-of-type { border-top: 0; }
.askbtn { width: 100%; margin-top: 12px; }
.notice { border-radius: var(--r-ctl); padding: 10px 14px; background: var(--amber-bg); color: var(--amber); font-weight: 700; font-size: 14px; margin: 12px 0; }
.alert { border-radius: var(--r-ctl); padding: 12px 14px; margin: 12px 0; background: var(--red-bg); border: 1px solid var(--red-line); color: #7a1a12; display: grid; gap: 8px; }
.alert .diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 13px; background: var(--surface); border-radius: var(--r-in); padding: 8px 10px; }
.alert .diff .old { text-decoration: line-through; color: var(--muted); }
.alert .diff .new { font-weight: 800; }
.pstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; }
.pthumb { flex: 0 0 auto; border: 1px solid var(--hair); padding: 0; border-radius: var(--r-ctl); overflow: hidden; cursor: zoom-in; background: var(--surface-3); scroll-snap-align: start; }
.pthumb img { display: block; width: 88px; height: 88px; object-fit: cover; }
.claim { display: grid; gap: 8px; }
.card .claim { padding: 14px 0; border-top: 1px solid var(--hair); }
.card .claim:first-of-type { border-top: 0; padding-top: 4px; }
.sheet .claim { padding: 12px; margin-top: 12px; border-radius: var(--r-ctl); background: var(--red-bg); border: 1px solid var(--red-line); }
.facts2 { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.thread { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.thread .msg { padding: 8px 12px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--hair); max-width: 92%; }
.thread .msg.us { justify-self: end; background: #fdf8ec; border-color: #ecdcb5; }
.thread .meta { font-size: 12px; color: var(--faint); }
.thread .body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* status buttons: quiet; the current one is solid gold with a check */
.stbtns { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.stbtns button { border: 1px solid var(--hair-2); min-height: 56px; padding: 4px 2px; line-height: 1.1; text-align: center; border-radius: var(--r-ctl); background: var(--surface); font-size: 13px; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background .15s var(--ease); }
.stbtns button svg { width: 18px; height: 18px; }
.stbtns button.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.stbtns button.on.problem { background: var(--red); border-color: var(--red); color: #fff; }
.stbtns button:disabled { opacity: .45; }

/* ---------- other tabs ---------- */
.ledger .ln { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.ledger > :first-child .ln, .ledger > .ln:first-child { border-top: 0; }
.ledger .ln .d { color: var(--faint); font-weight: 700; }
.ledger .ln .a { font-weight: 800; text-align: end; }
.ledger .ln .a small { display: block; font-weight: 600; color: var(--faint); }
.ledger .neg { color: var(--green); }
.ledger .ln.tap .d::after { content: " \203A"; color: var(--faint); }
.lnbtn { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: start; color: inherit; }
.lnbtn[aria-expanded="true"] .ln { background: var(--surface-2); }
.daydetail { padding: 10px 12px 14px; border-radius: var(--r-in); background: var(--surface-2); margin-bottom: 8px; display: grid; gap: 8px; }
.dorder { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--hair); }
.dorder.cancelled { opacity: .6; }
.pline { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--hair); }
.pline:first-of-type { border-top: 0; }
.pmain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ptable { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 18px; margin-top: 8px; }
.prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.prow .field { max-width: 120px; height: 44px; }
.ptable.imp { grid-template-columns: 1fr; }
.ptable.imp .prow { display: grid; grid-template-columns: 90px 1fr auto; }
.imp .prow.bad { color: var(--red); }
.score .srow2 { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--hair); }
.score .srow2:first-of-type { border-top: 0; }
.score .srow2 small { grid-column: 2 / -1; text-align: end; }
.score .trend { display: inline-flex; gap: 3px; color: var(--faint); }
.score .b-green b { color: var(--green); }
.score .b-amber b { color: var(--amber); }
.score .b-red b { color: var(--red); }

/* ---------- desktop batch ---------- */
.bulkbar { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 20px; /* 10 + 10 */ max-width: calc(100vw - 32px); background: var(--glass-navy); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--rim-dark), var(--float-drop); color: #fff; --focus: #e3c682; }
.bulkbar .btn { background: var(--surface); color: var(--ink); }
.bulkbar .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }

/* ---------- toast: navy glass, announced; errors stay (solid red) ---------- */
.toasts { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab) + var(--tab-gap) + 14px + env(safe-area-inset-bottom)); display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
body.sheet-open .toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border-radius: 14px; /* 6 + 8 */ background: var(--glass-navy); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--rim-dark), var(--float-drop); color: #fff; font-weight: 700; animation: toastIn .2s var(--ease); --focus: #e3c682; }
.toast .msg { overflow-wrap: anywhere; padding: 4px 0; }
.toast.bad { background: var(--red); }
.toast .tbtn { flex: none; min-width: 44px; height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-in); background: transparent; color: #fff; font-weight: 800; }
.toast .tbtn.x { font-size: 22px; padding: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- skeleton: shimmers only while loading ---------- */
.sk { border-radius: var(--r-card); background: var(--surface-3); animation: sk 1.2s ease-in-out infinite alternate; }
@keyframes sk { to { opacity: .55; } }

/* ---------- photo viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 90; background: #0b0f19; display: flex; flex-direction: column; --focus: #e3c682; }
.vbar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; color: #fff; }
.vbar .vcount { margin-inline-end: auto; font-weight: 800; }
.vbar .vlink { height: 44px; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .4); }
.viewer .iconbtn { color: #fff; }
.vstrip { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vstrip::-webkit-scrollbar { display: none; }
.vslide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 8px; touch-action: pan-x pinch-zoom; }
.vslide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-ctl); background: #fff; }
.vnav { position: absolute; inset-inline: 0; top: 50%; display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; }
.vnav .iconbtn { pointer-events: auto; background: rgba(255, 255, 255, .14); }

/* ---------- desktop: rail + two panes ---------- */
@media (min-width: 900px) {
  :root { --rail: 92px; }
  .tabbar { inset: var(--hdr) auto 0 0; width: var(--rail); height: auto; padding: 12px 8px; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; grid-auto-rows: 72px; align-content: start; }
  .tabbar::before { inset: 0; -webkit-mask: none; mask: none; } /* nothing scrolls under the rail */
  .tabbar::after { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .08); }
  .tabbar button { border-radius: var(--r-ctl); }
  main { margin-left: var(--rail); max-width: none; padding: 20px 20px 40px; }
  .toasts { bottom: 24px; }
}
@media (min-width: 1100px) {
  :root { --pane: min(560px, 42vw); }
  main { margin-right: var(--pane); }
  .scrim { display: none; }
  .sheet { inset: var(--hdr) 0 0 auto; width: var(--pane); height: auto; border-radius: 0; border-top: 0; border-inline-start: 1px solid var(--hair); transform: none; }
  .sheet .grip { display: none; }
  .sheet .shead { padding-top: 14px; }
  .sheet:not(.on) > :not(.empty-pane) { display: none; }
  .sheet:not(.on) .empty-pane { display: grid; place-items: center; height: 100%; color: var(--faint); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .scrim, .toast, .stbtns button { transition: none; animation: none; }
  .sk { animation: none; }
}
@media (max-width: 420px) { .hdr .who { display: none; } .hdr #lang { margin-inline-start: auto; } .brand b { font-size: 14px; margin-inline-start: 9px; padding-inline-start: 9px; } .hdr .logo { height: 24px; } }

/* ---------- login and setup ---------- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login { position: relative; width: min(400px, 100%); border-radius: var(--r-card); padding: 28px 22px 22px; background: var(--surface); border: 1px solid var(--hair); }
.login .logo { filter: none; }
.login .logo.lg { height: 40px; margin-bottom: 4px; }
.login h1 { margin: 16px 0 4px; font-size: 26px; line-height: 1.15; }
.login p { color: var(--muted); margin: 0 0 8px; }
.login label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 16px 0 6px; }
.login .field { width: 100%; background: var(--surface-2); }
.login .btn { width: 100%; margin-top: 20px; }
.login .gbtn { margin-top: 22px; min-height: 44px; display: flex; justify-content: center; }
.login .err { color: var(--red); min-height: 1.3em; margin-top: 12px; font-weight: 700; }
.login .foot { margin-top: 14px; color: var(--faint); font-size: 13px; }
.login .loginlang { position: absolute; top: 16px; right: 16px; color: var(--ink); border-color: var(--hair-2); }
.login .loginlang:hover { background: var(--surface-2); }
.login .alt { display: block; width: 100%; margin-top: 12px; background: none; border: 0; color: var(--navy); font-weight: 700; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.login .who { font-size: 22px; font-weight: 800; margin: 10px 0 2px; }
.login .hint { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* ---------- our screen (Hebrew, RTL) ---------- */
.adm main { max-width: 1240px; margin: 0 auto; padding: 18px 12px 48px; }
.adm .hdr .linkbtn { height: 40px; border-radius: var(--r-ctl); border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-weight: 800; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.adm .hdr .linkbtn svg { width: 18px; height: 18px; }
.adm .hero { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 24px; }
.adm .hero .say { color: var(--muted); font-weight: 600; font-size: 17px; flex: 1 1 260px; }
.adm .cols { display: grid; gap: 12px; }
@media (min-width: 980px) { .adm .cols { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.adm .card h3 { display: flex; align-items: center; gap: 8px; }
.adm .card h3 .n { min-width: 24px; height: 24px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 13px; padding: 0 7px; background: var(--st-pro); color: var(--st-pro-ink); }
.adm .card h3 .n.bad { background: var(--red); color: #fff; }
.adm .line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.adm .line:first-of-type { border-top: 0; }
.adm .line .who { font-weight: 800; }
.adm .line a.who { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.adm .line .ltr, .adm .ltr { direction: ltr; unicode-bidi: isolate; }
.adm .line .grow { flex: 1 1 180px; }
.adm .line .bad { color: var(--red); font-weight: 700; }
.adm .actions { display: flex; gap: 8px; width: 100%; margin-top: 6px; flex-wrap: wrap; }
.adm .actions .field { flex: 1; height: 44px; }
.adm .btn.ok { background: var(--navy); color: #fff; }
.adm .btn.no { background: var(--surface); color: var(--red); border-color: var(--red-line); }
.adm .btn.quiet { background: var(--surface); color: var(--ink); border-color: var(--hair-2); }
.adm .dayrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.adm .dayrow:first-of-type { border-top: 0; }
.adm .dayrow .d { font-weight: 800; }
.adm .dayrow .s { color: var(--muted); font-size: 14px; }
.adm .dayrow .t { font-weight: 800; font-size: 18px; direction: ltr; }
.adm .dayrow .bar { grid-column: 2; }
.adm .form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.adm label.f { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.adm .member { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; border-top: 1px solid var(--hair); align-items: center; }
.adm .member:first-of-type { border-top: 0; }
.adm .member.off { opacity: .55; }
.adm .member .nm { font-weight: 800; }
.adm .member .meta { color: var(--muted); font-size: 13px; }
.adm .member .btns { grid-row: span 2; display: flex; gap: 6px; flex-wrap: wrap; }
.adm .pw { margin-top: 12px; }
.adm .pw b { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.adm .tag { display: inline-block; padding: 1px 8px; border-radius: var(--r-in); font-size: 12px; font-weight: 800; background: var(--surface-2); border: 1px solid var(--hair); margin-inline-start: 6px; }
.adm .tag.warn { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.adm .qr { width: 200px; height: 200px; background: #fff; border-radius: var(--r-in); padding: 8px; display: block; border: 1px solid var(--hair); }
.adm .setup { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: start; margin-top: 12px; }
.adm .setup .url { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; color: var(--muted); }
.adm .lane h4 { margin: 14px 0 2px; }
.adm .lane-late h4 { color: var(--red); }
.adm .photoline a { flex: 0 0 auto; }
.adm .pq { display: block; width: 64px; height: 64px; border-radius: var(--r-ctl); object-fit: cover; background: var(--surface-3); border: 1px solid var(--hair); }
@media (max-width: 560px) {
  .adm .hdr { gap: 8px; }
  .adm .hdr .who { display: none; }
  .adm .hdr .linkbtn { margin-inline-start: auto; padding: 0 12px; }
  .adm .hdr .linkbtn .t { display: none; }
  .adm .hero .v { font-size: 40px; }
  .adm .setup { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) { .bulkbar { z-index: 62; left: calc(var(--rail) + (100vw - var(--rail) - var(--pane)) / 2); } }
.adm .line a { color: var(--navy); }

/* ---------- glass off: the flat pass exactly (old in-app browsers, reduced transparency, more contrast) ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hdr::before, .tabbar::before { inset: 0; -webkit-mask: none; mask: none; background: var(--navy); }
  .sheet .shead::before, .sheet .sfoot::before { inset: 0; -webkit-mask: none; mask: none; background: var(--surface); }
  .bulkbar, .toast { background: var(--navy); }
  .dayhead { background: var(--page); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .hdr::before, .tabbar::before { inset: 0; -webkit-mask: none; mask: none; background: var(--navy); }
  .sheet .shead::before, .sheet .sfoot::before { inset: 0; -webkit-mask: none; mask: none; background: var(--surface); }
  .hdr::before, .tabbar::before, .sheet .shead::before, .sheet .sfoot::before, .bulkbar, .toast, .dayhead { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bulkbar, .toast { background: var(--navy); }
  .dayhead { background: var(--page); }
}