/* ============================================================
   Weekly order board (js/deptorder.js).
   The same light surface as the Purchasing board, so the two read
   as one system. Everything is scoped under #mod-ordering and the
   shared tokens are redefined on that root only.
   ============================================================ */

#mod-ordering{
  --bg:#f7f8f9; --panel:#fff; --panel2:#f6f7f8; --line:#ececee;
  --txt:#2f313a; --muted:#54565d; --muted2:#6b6d74; --faint:#8f9095;
  --brand:#44677f; --brand2:#2f5a74; --bluebg:#edf3f7;
  --premium2:#8a6530;
  --green:#2c8b65; --greenbg:#e9f6f0;
  --amber:#a8741a; --amberbg:#fdf3e2;
  --red:#c2303f; --redbg:#fdecee;
  --radius:16px;
  --sh:0 1px 2px rgba(60,64,88,.05), 0 4px 14px rgba(60,64,88,.07);

  background:var(--bg);color:var(--txt);min-height:100vh;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
/* The production stylesheet locks page scrolling (body overflow:hidden),
   so this board scrolls inside its own box, like Sales and Inventory.
   The sticky header sticks to the top of this box; the fixed totals
   bar stays put at the bottom of the screen. */
body[data-view="ordering"] #mod-ordering{
  height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#mod-ordering *{box-sizing:border-box}
#mod-ordering .dor-wrap{max-width:1120px;margin:0 auto;padding:0 16px 140px}

#mod-ordering .dor-hdr{
  position:sticky;top:0;z-index:40;background:rgba(247,248,249,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
}
#mod-ordering .dor-hd{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#mod-ordering .dor-eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--premium2);font-weight:700}
#mod-ordering h1{margin:2px 0 0;font-size:19px;font-weight:700;letter-spacing:-.3px}
#mod-ordering .dor-sub{font-size:12.5px;color:var(--faint)}
#mod-ordering .dor-spacer{flex:1}

#mod-ordering select,#mod-ordering input,#mod-ordering button,#mod-ordering textarea{font:inherit;color:var(--txt)}
#mod-ordering .dor-ctl{background:#fff;border:1px solid #e2e3e6;border-radius:10px;padding:9px 11px;font-size:14px}
#mod-ordering .dor-ctl:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(68,103,127,.12)}
#mod-ordering .dor-btn{
  appearance:none;cursor:pointer;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--muted);
}
#mod-ordering .dor-btn:hover{border-color:var(--brand);color:var(--brand2)}
#mod-ordering .dor-btn.prim{background:var(--brand);border-color:var(--brand);color:#fff}
#mod-ordering .dor-btn.prim:hover{background:var(--brand2);border-color:var(--brand2)}
#mod-ordering .dor-btn[disabled]{opacity:.5;cursor:default}

#mod-ordering .dor-note{
  margin:14px 0 0;padding:12px 15px;border-radius:12px;font-size:13px;line-height:1.55;
  background:var(--bluebg);border:1px solid #dde7ee;color:var(--brand2);
}
#mod-ordering .dor-note.bad{background:var(--redbg);border-color:#f3d3d7;color:var(--red)}
#mod-ordering .dor-note.ok{background:var(--greenbg);border-color:#cfe9de;color:var(--green)}
#mod-ordering .dor-note.warn{background:var(--amberbg);border-color:#f0dfbe;color:var(--amber)}

/* ---- department picker ---- */
#mod-ordering .dor-pick{
  margin:40px auto;max-width:520px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--sh);padding:26px 24px;
}
#mod-ordering .dor-pick h2{margin:0 0 4px;font-size:19px}
#mod-ordering .dor-pick p{margin:0 0 18px;font-size:13.5px;color:var(--muted)}
#mod-ordering .dor-deptbtns{display:grid;gap:9px}
#mod-ordering .dor-deptbtn{
  appearance:none;cursor:pointer;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
#mod-ordering .dor-deptbtn:hover{border-color:var(--brand);background:var(--bluebg)}
#mod-ordering .dor-deptbtn b{display:block;font-size:15px}
#mod-ordering .dor-deptbtn i{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:2px}
/* this week's status: green = submitted, red = not yet */
#mod-ordering .dor-deptbtn{display:flex;align-items:center;gap:12px;border-width:2px}
#mod-ordering .dor-dtxt{flex:1;min-width:0}
#mod-ordering .dor-dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff}
#mod-ordering .dor-dst{flex:none;font-size:12px;font-weight:700;text-align:right;max-width:52%}
#mod-ordering .dor-deptbtn.is-in{background:var(--greenbg);border-color:#9fd4bd}
#mod-ordering .dor-deptbtn.is-in .dor-dot{background:var(--green)}
#mod-ordering .dor-deptbtn.is-in .dor-dst{color:var(--green)}
#mod-ordering .dor-deptbtn.is-out{background:var(--redbg);border-color:#efb3ba}
#mod-ordering .dor-deptbtn.is-out .dor-dot{background:var(--red)}
#mod-ordering .dor-deptbtn.is-out .dor-dst{color:var(--red)}
#mod-ordering .dor-deptbtn.is-in:hover,#mod-ordering .dor-deptbtn.is-out:hover{border-color:var(--brand)}
/* send to purchasing */
#mod-ordering .dor-send{margin-top:18px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:#fafbfc;font-size:14px}
#mod-ordering .dor-send.ready{border-color:#9fd4bd;background:var(--greenbg)}
#mod-ordering .dor-send.sent{border-color:#9fd4bd;background:var(--greenbg);color:var(--green)}
#mod-ordering .dor-sendsub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
#mod-ordering .dor-sendrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
#mod-ordering .dor-sendrow .dor-who{flex:1;min-width:160px}
@media (max-width:520px){ #mod-ordering .dor-deptbtn{flex-wrap:wrap} #mod-ordering .dor-dst{max-width:none;flex-basis:100%;text-align:left;padding-left:40px} }

/* ---- totals bar ---- */
#mod-ordering .dor-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(60,64,88,.08);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
#mod-ordering .dor-barin{max-width:1120px;margin:0 auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#mod-ordering .dor-barnum{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
#mod-ordering .dor-barnum b{color:var(--txt);font-size:17px}
#mod-ordering .dor-wholab{font-size:12px;color:var(--faint);font-weight:600}
#mod-ordering .dor-who{width:170px;padding:8px 10px;font-size:14px}
#mod-ordering .dor-who.need{border-color:var(--amber);background:#fffdf7}
#mod-ordering .dor-req{font-weight:700;color:var(--amber);text-transform:uppercase;font-size:9.5px;letter-spacing:.6px;margin-left:3px}

/* ---- categories ---- */
#mod-ordering .dor-cat{
  margin:16px 0 0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--sh);overflow:hidden;
}
#mod-ordering .dor-cathd{
  appearance:none;cursor:pointer;width:100%;text-align:left;background:var(--panel2);
  border:none;border-bottom:1px solid var(--line);padding:13px 16px;
  display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700;
}
#mod-ordering .dor-cathd .n{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--faint)}
#mod-ordering .dor-cathd .chev{color:var(--faint);font-size:12px}
#mod-ordering .dor-catbody{display:block;overflow-x:auto}
#mod-ordering .dor-cat.shut .dor-catbody{display:none}

#mod-ordering table{width:100%;border-collapse:collapse}
#mod-ordering th,#mod-ordering td{text-align:left;padding:10px 12px;border-bottom:1px solid #f3f3f5;vertical-align:middle}
#mod-ordering th{
  font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);
  font-weight:700;background:#fff;
}
#mod-ordering td.num,#mod-ordering th.num{text-align:right;font-variant-numeric:tabular-nums}
#mod-ordering tbody tr:last-child td{border-bottom:none}
#mod-ordering tr.want{background:var(--bluebg)}

/* ---- the tick box: big enough for a gloved finger on a tablet ---- */
#mod-ordering th.ck,#mod-ordering td.ck{width:52px;padding-right:0;text-align:center}
#mod-ordering .dor-ck{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;margin:-8px 0}
#mod-ordering .dor-ck input{width:24px;height:24px;margin:0;cursor:pointer;accent-color:var(--brand)}
#mod-ordering .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#mod-ordering .nm{font-size:13.5px;font-weight:600;line-height:1.35}
#mod-ordering .meta{font-size:11px;color:var(--faint);margin-top:2px}
#mod-ordering .bin{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;color:var(--muted);
}
#mod-ordering .dor-pill{
  display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap;
}
#mod-ordering .dor-pill.ok{background:var(--greenbg);color:var(--green)}
#mod-ordering .dor-pill.low{background:var(--amberbg);color:var(--amber)}
#mod-ordering .dor-pill.out{background:var(--redbg);color:var(--red)}
#mod-ordering .dor-pill.none{background:var(--panel2);color:var(--faint)}
#mod-ordering .dor-pill.special{background:rgba(230,126,34,.16);color:#e08a3c}

#mod-ordering .dor-qty{width:92px;text-align:right;padding:7px 9px;font-size:14px;font-weight:600}
#mod-ordering .dor-qty::-webkit-outer-spin-button,#mod-ordering .dor-qty::-webkit-inner-spin-button{opacity:1}

#mod-ordering .dor-wi{margin-top:16px}
#mod-ordering .dor-wirow{display:grid;grid-template-columns:1fr 150px 90px 36px;gap:8px;margin-bottom:8px}
#mod-ordering .dor-wirow .dor-ctl{width:100%;min-width:0}
@media (max-width:720px){
  #mod-ordering .dor-wirow{grid-template-columns:1fr 1fr}
  #mod-ordering th.hide,#mod-ordering td.hide{display:none}
  #mod-ordering h1{font-size:17px}
}
@media (max-width:620px){
  #mod-ordering .dor-pill{white-space:normal;font-size:9.5px;padding:2px 6px;line-height:1.3}
  #mod-ordering th,#mod-ordering td{padding:9px 7px}
  #mod-ordering th.ck,#mod-ordering td.ck{width:40px}
  #mod-ordering .dor-qty{width:62px}
}
#mod-ordering .dor-empty{padding:30px 20px;text-align:center;color:var(--faint);font-size:13.5px}
#mod-ordering .dor-foot{padding:30px 0 0;font-size:12px;color:var(--faint);line-height:1.6}

/* ================= Weekly order on phones =================
   The bottom bar was four rows tall and its Submit button fell off the
   screen; on phones it's three compact rows, and the item table fits. */
@media (max-width:620px){
  #mod-ordering .dor-bar{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  #mod-ordering .dor-barin{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #mod-ordering .dor-barnum{grid-column:1 / -1}
  #mod-ordering .dor-spacer,#mod-ordering .dor-wholab{display:none}
  #mod-ordering .dor-who{width:100%;min-width:0;padding:9px 10px}
  #mod-ordering #dorClear{justify-self:start}
  #mod-ordering #dorNothing,#mod-ordering #dorSubmit{width:100%;padding:11px 8px;font-size:13px;line-height:1.2;white-space:normal}
  #mod-ordering .dor-wrap{padding-bottom:200px}
}
@media (max-width:440px){
  #mod-ordering th,#mod-ordering td{padding:8px 4px}
  #mod-ordering th.ck,#mod-ordering td.ck{width:36px}
  #mod-ordering .dor-ck{width:36px}
  #mod-ordering .dor-qty{width:58px;padding:7px 5px}
  #mod-ordering .nm{font-size:13px}
}

/* ---- one-off requests (write-ins) ---- */
#mod-ordering .dor-wicard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--panel2)}
#mod-ordering .dor-wihd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13.5px}
#mod-ordering .dor-wix{padding:6px 12px;font-size:12.5px}
#mod-ordering .dor-wigrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
#mod-ordering .dor-wif{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted);min-width:0}
#mod-ordering .dor-wif em{font-style:normal;font-weight:700;color:var(--amber);text-transform:uppercase;font-size:9.5px;letter-spacing:.5px;margin-left:4px}
#mod-ordering .dor-wif .dor-ctl{width:100%;min-width:0;box-sizing:border-box;padding:9px 10px}
#mod-ordering .dor-wif.wide{grid-column:span 3}
@media (max-width:720px){
  #mod-ordering .dor-wigrid{grid-template-columns:1fr 1fr}
  #mod-ordering .dor-wif.wide{grid-column:1 / -1}
}