/* The orders platform: made for a call agent at a computer all day (a dense, steady table, one place per action) and
   for the shipping desk's phone (scanning). Same charcoal, white glass and one gold as the rest of foor tv. */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg1:#232428;--bg2:#0B0B0E;--text:#F4F4F6;--dim:rgba(255,255,255,.62);--line:rgba(255,255,255,.10);--edge:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.045);--gold:#E8C27A;--good:#7fe0a0;--warn:#ffcf7a;--bad:#ff9d9d;--blue:#9cc8ff;--r:12px}
html,body{min-height:100%;background:linear-gradient(180deg,var(--bg1),var(--bg2)) fixed;color:var(--text);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.mut{color:var(--dim)}.small{font-size:12.5px}
.ltr{direction:ltr;unicode-bidi:isolate}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate}
.sp{flex:1}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--edge);
  background:rgba(255,255,255,.06);color:var(--text);font-weight:500;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.11)}
.btn.p{background:#F4F4F6;border-color:#F4F4F6;color:#0B0B0E;font-weight:700}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1405;font-weight:700}
.btn.r{background:rgba(255,90,90,.1);border-color:rgba(255,120,120,.38);color:var(--bad)}
.btn.g{background:none;border-color:transparent;color:var(--dim)}
.btn.s{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.btn.i{width:32px;padding:0;height:32px}
.btn.big{height:48px;width:100%;font-size:16px}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:1px}
input,select,textarea{height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--edge);background:rgba(0,0,0,.32);font-size:14px;min-width:0}
textarea{height:auto;padding:8px 10px;resize:vertical}
select option{background:#1b1c20}
.lab{display:block;color:var(--dim);font-size:13px;font-weight:500;margin:12px 0 5px}
.err{color:var(--bad);min-height:20px;font-size:14px;margin-top:6px}
.bad-field{border-color:#d84a4a!important;box-shadow:0 0 0 2px rgba(216,74,74,.25)}

.login{max-width:380px;margin:12vh auto 0;padding:26px 22px;display:flex;flex-direction:column}
.login-logo{height:42px;width:auto;align-self:center;margin-bottom:12px}
.login h1{text-align:center;font-size:23px;margin-bottom:6px}
.login input{height:44px}.login .btn{margin-top:18px}.login .small{text-align:center;margin-top:14px}

/* frame */
.bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 18px;background:rgba(22,23,26,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar-logo{height:24px;width:auto}.bar-title{font-size:16px}
.tools{display:flex;gap:4px;margin-inline-start:14px}
.tools a{padding:6px 12px;border-radius:8px;text-decoration:none;color:var(--dim);font-size:14px}
.tools a.on,.tools a:hover{background:rgba(255,255,255,.08);color:#fff}
.tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:rgba(0,0,0,.15)}
.tabs a{display:flex;align-items:center;gap:6px;padding:11px 12px;color:var(--dim);text-decoration:none;font-size:14px;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs a b{font-weight:600;font-size:12px;padding:0 7px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--text);min-width:22px;text-align:center}
.tabs a.on{color:#fff;border-bottom-color:#fff}.tabs a.on b{background:#fff;color:#0B0B0E}
.tabs a.hot b{background:var(--gold);color:#1a1405}
.tabs .sep{width:1px;background:var(--line);margin:8px 6px}
main{padding:16px 18px 60px;max-width:1700px;margin:0 auto}
.head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.head h2{font-size:19px;margin-inline-end:6px}
.search{width:280px}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.panel h3{font-size:15px;margin-bottom:10px}

/* the orders table */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{position:sticky;top:0;background:#1d1e22;color:var(--dim);font-weight:500;font-size:12.5px;text-align:right;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.025)}
.tbl tr.done td{opacity:.35;transition:opacity .3s}
.tbl tr.due td:first-child{box-shadow:inset -3px 0 0 var(--gold)}
.tbl .nm{font-weight:600}
.tbl .sub{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.tbl input.cm{width:140px;height:32px}
.tbl select.act{height:32px;width:128px;font-weight:600}
.tbl td.chk,.tbl th.chk{width:34px;text-align:center}
.tbl input[type=checkbox]{width:17px;height:17px;accent-color:#fff}
.tbl .tools-c{white-space:nowrap}
.wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.12)}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;background:rgba(255,255,255,.1)}
.tag.ok{background:rgba(127,224,160,.14);color:var(--good)}.tag.warn{background:rgba(255,207,122,.14);color:var(--warn)}
.tag.bad{background:rgba(255,90,90,.14);color:var(--bad)}.tag.gold{background:rgba(232,194,122,.16);color:var(--gold)}.tag.blue{background:rgba(156,200,255,.14);color:var(--blue)}
.tel{text-decoration:none;font-weight:600}
.empty{text-align:center;color:var(--dim);padding:40px 10px}
.bulk{position:sticky;bottom:12px;z-index:4;display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:12px;background:#26272d;border:1px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* windows */
#modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:4vh 12px}
.modal{width:min(760px,100%);background:#1B1C20;border:1px solid var(--edge);border-radius:16px;padding:20px 22px}
.modal h2{font-size:19px;margin-bottom:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid2 .full{grid-column:1/-1}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice label{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--edge);border-radius:10px;cursor:pointer}
.choice label:has(input:checked){border-color:#fff;background:rgba(255,255,255,.1)}
.choice input{accent-color:#fff}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reasons label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--edge);border-radius:10px;cursor:pointer}
.reasons label:has(input:checked){border-color:#fff;background:rgba(255,255,255,.1)}
.reasons label.ban{border-color:rgba(255,120,120,.38);color:var(--bad)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.feed{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;margin-top:6px}
.feed div{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.04);font-size:13px}
.feed div.note{background:rgba(232,194,122,.08)}
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.split>div{min-width:0}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}

/* scanning */
.scanbox{max-width:620px;margin:0 auto}
.scanbox input.big{height:56px;font-size:22px;text-align:center;width:100%}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.modes button{min-height:56px;padding:6px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.05);font-weight:700;font-size:15px;cursor:pointer}
.modes button.on{background:#fff;color:#0B0B0E;border-color:#fff}
.flash{padding:16px;border-radius:12px;margin:12px 0;text-align:center;font-size:17px;font-weight:600}
.flash.ok{background:rgba(127,224,160,.14);color:var(--good)}.flash.bad{background:rgba(255,90,90,.14);color:var(--bad)}
video.cam{width:100%;border-radius:12px;background:#000;margin-top:10px;max-height:300px;object-fit:cover}

/* numbers */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.card small{display:block;color:var(--dim);font-size:12.5px}.card b{display:block;font-size:24px;font-variant-numeric:tabular-nums}.card span{font-size:12.5px;color:var(--dim)}
.barrow{display:grid;grid-template-columns:170px 1fr 70px;gap:10px;align-items:center;margin:6px 0;font-size:13.5px}
.barrow i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.75)}
.barrow i.bad{background:rgba(255,120,120,.75)}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;background:#2a2b31;border:1px solid var(--edge);
  padding:10px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:92vw}
@media (max-width:900px){
  .bar{flex-wrap:wrap}.tools{order:3;width:100%;margin:0;overflow-x:auto}
  main{padding:12px}
  .grid2,.split,.reasons{grid-template-columns:1fr}
  .search{width:100%}
  .barrow{grid-template-columns:110px 1fr 54px}
}
.feed .sub{display:block;font-size:12px;margin-top:2px}
.scanbox input.big:not(:placeholder-shown){font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em}
.modes button.on .mut{color:#555}