/* ============================================================================
   FLOW · UI guideline B («רצפה», applied in place) — the theme layer.
   v23.19 · App/UI_GUIDELINES.md is the rule book; this file is its tokens and
   component skins. It loads AFTER the inline <style> blocks of index.html /
   admin.html and wins by order at equal specificity.

   THE RULE: solid = «press me», tinted = «this is the state».
   A filled blue block is always a button. A pale tinted pill with dark text is
   always information — which stage, which warning. Red = late / stuck only.
   Amber = a planning warning or the prepress stage. Nothing else is red/amber.

   NO history in this file — CHANGELOG.md carries it. No hex outside :root.
   ========================================================================== */

/* ---------- 1 · tokens (the whole palette) ---------- */
:root{
  --bg:#EEF1F5; --panel:#FFFFFF; --panel2:#E9EDF2; --line:#D8DEE6; --line2:#E9EDF2;
  --txt:#161B22; --muted:#5B6875;
  --accent:#1F5FD1; --accent2:#1F5FD1; --accent-soft:#E4ECFB;
  --green:#1B7A3A; --amber:#8A6100; --red:#B3261E; --purple:#5B3FA6; --chip:#E6EAF0;
  --shadow:none; --shadow-modal:0 18px 50px rgba(22,27,34,.22);

  /* stage pairs — tint · ink. Defined ONCE; every pill, tile disc, badge and
     board block that shows a stage reads these and nothing else. */
  --stg-gfx-bg:#EEE8FB;  --stg-gfx:#5B3FA6;    /* גרפיקה ודגמים */
  --stg-prep-bg:#FBEFC8; --stg-prep:#7A5A00;   /* קדם דפוס */
  --stg-plan-bg:#E6EAF0; --stg-plan:#4A5766;   /* בתוכנית / ממתין / ניטרלי */
  --stg-print-bg:#DCEAFB;--stg-print:#175CD3;  /* הדפסה · בעבודה */
  --stg-wh-bg:#D7F1EC;   --stg-wh:#0B6B5F;     /* הכנת סחורה · מדבקות · מחסן */
  --stg-pack-bg:#E3E7EC; --stg-pack:#3B4652;   /* אריזה ושילוח */
  --stg-done-bg:#D9F2DF; --stg-done:#1B7A3A;   /* הושלם · הודפסה — the light green */
  --stg-ship-bg:#B9E3C6; --stg-ship:#0F5A2A;   /* נשלחה — the fuller green (v23.22, Sahar) */
  --stg-late-bg:#FBE1DF; --stg-late:#B3261E;   /* באיחור · תקועה · דחוף */
  --stg-lock-bg:#E3E7EC; --stg-lock:#5B6875;   /* בוטל · סיום יום */
  --stg-cont-bg:#EEE8FB; --line-strong:#AEB7C2; --row-hover:#F4F7FB; --stg-prep-soft:#FFFCF2;

  --r-card:16px; --r-panel:12px; --r-ctl:10px; --r-pill:999px;
  --tap:44px; --tap-sm:36px; --tap-big:52px;
}
body.floor{--tap:52px;--tap-sm:44px;--tap-big:64px}
body.compact{--tap:36px;--tap-sm:30px;--tap-big:44px}   /* «רגיל» display size: the tokens shrink, the rules do not */

/* ---------- 2 · chrome: header, tab bar ---------- */
.logo{border-radius:var(--r-ctl)}
.userchip{background:var(--bg);border-color:transparent;min-height:40px}
nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;scrollbar-width:none;gap:4px;padding:8px 22px}
nav::-webkit-scrollbar{display:none}
nav.scrollable{-webkit-mask-image:linear-gradient(to left,transparent,black 36px,black calc(100% - 36px),transparent);
  mask-image:linear-gradient(to left,transparent,black 36px,black calc(100% - 36px),transparent)}
nav button,.navmore{white-space:nowrap;min-height:40px;padding:0 14px;border-radius:var(--r-ctl);
  font-size:15px;font-weight:600;color:var(--txt);background:transparent;border:none;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
nav button:hover,.navmore:hover{background:var(--panel2);color:var(--txt)}
nav button.active{background:var(--accent);color:var(--panel)}
.navgroup{position:relative;display:inline-flex;flex:0 0 auto}
.navgroup.active>.navmore{background:var(--accent-soft);color:var(--accent)}
.navgroup.open>.navmore{background:var(--panel2)}
.navmore .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.navmenu{display:none;position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:6px;min-width:230px;box-shadow:var(--shadow-modal);z-index:60;flex-direction:column;gap:2px}
.navgroup.open .navmenu{display:flex}
.navmenu button{width:100%;justify-content:flex-start;text-align:right;border-radius:8px}
.navbadge{background:var(--red)}
.navmore .navbadge{margin-inline-start:2px}

/* ---------- 3 · buttons: three levels ---------- */
.btn{border-radius:var(--r-ctl);min-height:var(--tap);padding:0 16px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap}
.btn:hover{filter:brightness(1.04)}
.btn.ghost{background:var(--panel);border:1.5px solid var(--line);color:var(--txt)}
.btn.ghost:hover{background:var(--bg)}
.btn.sm{min-height:var(--tap-sm);padding:0 12px;font-size:14px}
.btn.big{min-height:var(--tap-big);font-size:17px;border-radius:12px;padding:0 20px}
.btn.ok{background:var(--green)}                                   /* «done / confirm» — the floor's green */
.btn.danger{background:var(--panel);color:var(--red);border:1.5px solid var(--red)}
.btn.warn{background:var(--panel);color:var(--amber);border:1.5px solid var(--amber)}
.btn.issue{background:var(--panel);color:var(--red);border:1.5px solid var(--red)}
body.floor .btn.sm{min-height:var(--tap-sm)}
.btn.ghost.cbcancel{color:var(--red);border-color:var(--stg-late-bg)}   /* the ✕ that cancels a carton stays red — it is the only thing that says what it does */
/* Icon button — a square control of the row's small height, one glyph, a line and a colour that
   says what it does: ＋ add (accent) · − remove (red — Sahar, 07.09: the one red control besides the
   carton ✕) · ✎ edit (ink) · ✓ done (green). Lives in table rows and list rows; never the primary. */
.xib{width:var(--tap-sm);height:var(--tap-sm);min-height:0;padding:0;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;line-height:1;border:1.5px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer;flex:0 0 auto}
.xib.add{color:var(--stg-print);border-color:var(--stg-print)} .xib.rm{color:var(--red);border-color:var(--red)}
.xib.ok{color:var(--green);border-color:var(--green)} .xib.ed{font-size:16px}
/* Dialog note — the paragraph above a PIN / confirm that says what will actually happen (tint, never a button) */
.ovnote{background:var(--panel2);border-radius:8px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
body.compact .btn{min-height:var(--tap);padding:0 14px;font-size:14px;border-radius:var(--r-ctl)}
body.compact .btn.sm{min-height:var(--tap-sm);padding:0 10px;font-size:13px}

/* ---------- 4 · segmented controls: one tray ---------- */
/* a tool row has ONE control height — the density token: trays, chips, small buttons and the ⓘ share it (layout gate R3/R4) */
.legendbar .btn.sm,.cal-head .btn.sm,.planbar .btn.sm,.qsbar .btn.sm,.tool .btn.sm{min-height:var(--tap)}
.legendbar .hint{margin:0}
.brkchip{min-height:var(--tap);display:inline-flex;align-items:center}
.viewtog,.daytabs{display:inline-flex;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-ctl);
  padding:3px;gap:3px;overflow:visible;min-height:var(--tap);box-sizing:border-box}
.viewtog button,.viewtog button:first-child,.viewtog button:last-child,
.daytabs button,.daytabs button+button{background:transparent;border:0;border-radius:7px;min-height:calc(var(--tap) - 9px);padding:0 14px;
  color:var(--muted);font-weight:600;font-size:14px;line-height:1.05}
.daytabs button b{font-size:13px} .daytabs button small,.daytabs button span{font-size:11px}
.viewtog button.on,.daytabs button.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.daytabs button b{color:inherit}
.daytabs button{justify-content:center}   /* the two stacked lines sit in the middle of the segment, not at its top */
/* multi-select filter chips (printers, priority) — outline pills, same height */
.prchip,.prichip{min-height:var(--tap);border-width:1.5px;border-radius:var(--r-pill);opacity:1;font-weight:600;background:var(--panel)}
.prchip.on{background:var(--accent-soft);border-color:var(--pc,var(--accent))}
.prichip{color:var(--muted);border-color:var(--line)}
.prichip.urgent{color:var(--stg-late);border-color:var(--stg-late)}
.prichip.high{color:var(--txt);border-color:var(--line)}
.prichip.urgent.on{background:var(--stg-late-bg);color:var(--stg-late)}
.prichip.high.on{background:var(--stg-plan-bg);color:var(--txt);border-color:var(--stg-plan)}

/* ---------- 5 · status vocabulary: ONE pill, stage pairs ---------- */
.st{background:var(--pb,var(--stg-plan-bg));color:var(--pc,var(--stg-plan));border-radius:var(--r-pill);
  min-height:32px;padding:0 12px;font-weight:600;font-size:14px;gap:6px}
.st.g-intake{--pb:var(--stg-wh-bg);--pc:var(--stg-wh)}
.st.g-prep{--pb:var(--stg-gfx-bg);--pc:var(--stg-gfx)}
.st.g-wait{--pb:var(--stg-plan-bg);--pc:var(--stg-plan)}
.st.g-plan{--pb:var(--stg-plan-bg);--pc:var(--stg-plan)}
.st.g-print{--pb:var(--stg-print-bg);--pc:var(--stg-print)}
.st.g-done{--pb:var(--stg-done-bg);--pc:var(--stg-done)}
.st.g-locked{--pb:var(--stg-lock-bg);--pc:var(--stg-lock)}
.st.g-cont{--pb:var(--stg-cont-bg);--pc:var(--purple)}
.st.g-amber{--pb:var(--stg-prep-bg);--pc:var(--stg-prep)}   /* «ממתינה לשיבוץ» — a planning warning wears amber */
/* the stage decides, the family is the fallback (stChip stamps data-stg) */
.st[data-stg=gfx]{--pb:var(--stg-gfx-bg);--pc:var(--stg-gfx)}
.st[data-stg=prep]{--pb:var(--stg-prep-bg);--pc:var(--stg-prep)}
.st[data-stg=plan]{--pb:var(--stg-plan-bg);--pc:var(--stg-plan)}
.st[data-stg=print]{--pb:var(--stg-print-bg);--pc:var(--stg-print)}
.st[data-stg=wh]{--pb:var(--stg-wh-bg);--pc:var(--stg-wh)}
.st[data-stg=pack]{--pb:var(--stg-pack-bg);--pc:var(--stg-pack)}
.st[data-stg=done]{--pb:var(--stg-done-bg);--pc:var(--stg-done)}
.st[data-stg=recv]{--pb:var(--stg-plan-bg);--pc:var(--stg-plan)}   /* התקבלה is grey — green is for done (v23.22, Sahar) */
.st[data-stg=ship]{--pb:var(--stg-ship-bg);--pc:var(--stg-ship)}
.st[data-stg=assign]{--pb:var(--stg-prep-bg);--pc:var(--stg-prep)}
.st[data-stg=hold]{--pb:transparent;--pc:var(--stg-plan);box-shadow:inset 0 0 0 1.5px var(--stg-plan)}
.st[data-stg=lock]{--pb:var(--stg-lock-bg);--pc:var(--stg-lock)}
/* the open-task pills beside a status (🎨 דגמים טרם עלו · 🧰 קדם דפוס טרם הושלם) — the same stage pairs */
.taskpill{font-size:13px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);border:1.5px solid transparent;margin-inline-start:0}   /* the row's gap spaces it — even gaps (R4) */
.taskpill.gfx{color:var(--stg-gfx);background:var(--stg-gfx-bg);border-color:transparent}
.taskpill.prep{color:var(--stg-prep);background:var(--stg-prep-bg);border-color:transparent}
/* flow-phase chips (planning pool) — same pairs, one size */
.wfchip{font-size:13px;min-height:26px;padding:0 9px;border-radius:var(--r-pill);border:1.5px solid transparent;font-weight:600}
.wfchip.gfx{color:var(--stg-gfx);background:var(--stg-gfx-bg);border-color:transparent}
.wfchip.prep{color:var(--stg-prep);background:var(--stg-prep-bg);border-color:transparent}
.wfchip.ready{color:var(--stg-print);background:transparent;border-color:var(--stg-print)}
.wfchip.other{color:var(--stg-plan);background:var(--stg-plan-bg);border-color:transparent}
/* worker state — idle grey · work blue · pause amber · done green · stuck red · end-of-day slate */
.statebadge{border-radius:var(--r-pill);font-weight:600;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.statebadge.sb-idle{background:var(--stg-plan-bg);color:var(--stg-plan)}
.statebadge.sb-work{background:var(--stg-print-bg);color:var(--stg-print)}
.statebadge.sb-pause{background:var(--stg-prep-bg);color:var(--stg-prep)}
.statebadge.sb-done{background:var(--stg-done-bg);color:var(--stg-done)}
.statebadge.sb-stuck{background:var(--stg-late-bg);color:var(--stg-late)}
.statebadge.sb-eod{background:var(--stg-lock-bg);color:var(--stg-lock)}
/* alarms — tinted, never a block that looks like a button */
.stuckbadge{background:var(--stg-late-bg);color:var(--stg-late);border-radius:var(--r-pill);padding:0 11px;min-height:32px;
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.pill{border-radius:var(--r-pill);min-height:28px;font-weight:600}
.pill.late{background:var(--stg-late-bg);color:var(--stg-late)}
.pill.today{background:var(--stg-prep-bg);color:var(--stg-prep)}
.pill.stg{background:transparent;color:var(--stg-prep);border:1.5px solid var(--stg-prep)}
.pill.urg{background:transparent;color:var(--stg-late);border:1.5px solid var(--stg-late)}
.pill.imp{background:transparent;color:var(--txt);border:1.5px solid var(--line)}
.jchip.late{background:var(--stg-late-bg);color:var(--stg-late);border-color:transparent}
.jchip.stuckj{outline-color:var(--stg-late)}
.stglate{color:var(--stg-prep);background:var(--stg-prep-bg);border-color:transparent;border-radius:var(--r-pill)}
/* priority — outline, small. Red only for דחוף; גבוה is neutral (amber belongs to prepress). */
.chip{border-radius:var(--r-pill);font-weight:600}
.chip.pri-URGENT{background:transparent;color:var(--stg-late);border:1.5px solid var(--stg-late)}
.chip.pri-HIGH{background:transparent;color:var(--txt);border:1.5px solid var(--line-strong)}
.chip.pri-MEDIUM,.chip.pri-LOW{background:transparent;color:var(--muted);border:1.5px solid var(--line)}
/* row rail for late rows (kept: tr.rowlate) */
tr.rowlate>td:first-child{border-right:4px solid var(--stg-late)}

/* ---------- 6 · surfaces: panels, KPI tiles, station tiles, cards ---------- */
.panel{border-radius:var(--r-panel);box-shadow:none}
.kpis{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:10px}   /* the six stages + «פעילות» in one row */
.kpis+.kpis2{grid-template-columns:repeat(7,minmax(0,1fr));justify-content:stretch;margin-top:0;margin-bottom:18px}   /* alarms: same width, second row */
.kpi{border-radius:var(--r-panel);box-shadow:none;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;
  column-gap:12px;align-items:center;min-height:68px;border:1.5px solid var(--line)}
.kpi.on{border-color:var(--accent)}
.kpi .ki{grid-row:1/3;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pb,var(--stg-plan-bg));color:var(--pc,var(--stg-plan))}
.kpi .ki svg{width:18px;height:18px}
.kpi .n{font-size:24px;font-weight:800;line-height:1}
.kpi .l{font-size:13px;margin-top:3px}
.kpi.alert .n{color:var(--stg-late)} .kpi.warn .n{color:var(--stg-prep)} .kpi.ok .n{color:var(--stg-done)}
.kpi[data-k=gfx] .ki{--pb:var(--stg-gfx-bg);--pc:var(--stg-gfx)}
.kpi[data-k=pp] .ki{--pb:var(--stg-prep-bg);--pc:var(--stg-prep)}
.kpi[data-k=ready] .ki,.kpi[data-k=sched] .ki{--pb:var(--stg-plan-bg);--pc:var(--stg-plan)}
.kpi[data-k=print] .ki{--pb:var(--stg-print-bg);--pc:var(--stg-print)}
.kpi[data-k=ship_ready] .ki{--pb:var(--stg-pack-bg);--pc:var(--stg-pack)}
.kpi[data-k=late] .ki,.kpi[data-k=stuck] .ki{--pb:var(--stg-late-bg);--pc:var(--stg-late)}
.kpi[data-k=bill_wait] .ki{--pb:var(--stg-done-bg);--pc:var(--stg-done)}
.kpi[data-k=reorder] .ki{--pb:var(--stg-prep-bg);--pc:var(--stg-prep)}
/* station tiles (תפעול) — Sahar, 07.09: the icon stays colourless with no disc, the title on the row
   below it, and NO count bubble on the tile (the house switch «מונים על אריחי התפעול» still governs the
   detail line). data-stg stays on the tile for the day a stage colour is wanted here. */
.tile{border-radius:var(--r-card);box-shadow:none;border:1.5px solid var(--line)}
.tile:hover{border-color:var(--accent)}
.tile.me{border-color:var(--accent)}
.tile .ic{display:flex;justify-content:center;margin:0 0 10px;background:transparent;color:var(--txt);line-height:1}
.tile .ic svg{width:34px;height:34px}
.ops-tiles .tile .cnt{display:none}
.tile[data-stg=wh]{--pb:var(--stg-wh-bg);--pc:var(--stg-wh)}
.tile[data-stg=gfx]{--pb:var(--stg-gfx-bg);--pc:var(--stg-gfx)}
.tile[data-stg=prep]{--pb:var(--stg-prep-bg);--pc:var(--stg-prep)}
.tile[data-stg=print]{--pb:var(--stg-print-bg);--pc:var(--stg-print)}
.tile[data-stg=pack]{--pb:var(--stg-pack-bg);--pc:var(--stg-pack)}
.tile[data-stg=bill]{--pb:var(--stg-done-bg);--pc:var(--stg-done)}
.tile[data-stg=stock]{--pb:var(--stg-wh-bg);--pc:var(--stg-wh)}
/* an alarm inside a tile stays red — the badge is a count, the strong text is the alarm */
.tile .sub2 strong{color:var(--stg-late)}
/* floor cards */
.opscard,.qcard,.wcard,.fcard,.ppcard{border-radius:var(--r-card);box-shadow:none}
.qcard{border-radius:var(--r-ctl)}
.qcard.overdue{border-color:var(--stg-late);background:var(--panel)}
.qcard.needresched{border-color:var(--stg-prep)}
.opscard .noimg{background:var(--bg)}
/* modal — the one elevated object */
.modal{border-radius:var(--r-card);box-shadow:var(--shadow-modal)}
.modal .mh strong{font-size:20px;font-weight:800}
/* tables */
th{font-size:13px;font-weight:600;letter-spacing:.01em}
tr.job-row:hover{background:var(--row-hover)}
/* headline */
h2.sec{font-size:20px;font-weight:800}

/* ---------- 7 · toasts & banners: colour = meaning ---------- */
.toast.ok{background:var(--stg-done-bg);color:var(--stg-done)}
.reschedbox{border-color:var(--stg-prep);background:var(--stg-prep-soft);border-radius:var(--r-panel)}

/* ---------- 8 · admin joins the app ---------- */
body.admin nav button.active,body.admin .btn.primary,body.admin button.primary{background:var(--accent)}

/* ---------- 9 · widths ---------- */
@media(max-width:1000px){
  nav{padding:8px 12px;gap:2px}
  nav button,.navmore{padding:0 10px;font-size:14px}
  /* the header stays ONE row on a tablet held upright: the subtitle (with the version) goes,
     the chip and the clock tighten (Sahar, 07.09) */
  header{flex-wrap:nowrap;padding:10px 14px}
  .brand .sub{display:none}
  .hd-left{gap:8px}
  .userchip{padding:5px 10px}
  .clock{white-space:nowrap}
}
/* the daily board's colour key rides on the breaks row */
.legendbar.row2 .lgkey{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px;color:var(--muted)}
.legendbar.row2{flex-wrap:wrap}
@media(max-width:1180px){
  .kpis,.kpis+.kpis2{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  :root{--tap:40px;--tap-sm:34px;--tap-big:48px}   /* phone density: the sheet keeps its room (check_v2241) */
  body.compact{--tap:34px;--tap-sm:30px;--tap-big:44px}
  .kpis,.kpis+.kpis2{display:flex}   /* the phone keeps its chip strip */
  .kpi{grid-template-columns:auto auto;min-height:0}
  .kpi .ki{display:none}
}