:root{--bg:#f3f5fa;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e5e9f2;--side:#0b1120;--pri:#2563eb;--pri2:#3b82f6;--teal:#0891b2;--amber:#d97706;--red:#dc2626;--green:#16a34a;--font:'IBM Plex Sans Arabic',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.app{display:flex;min-height:100vh}

/* sidebar */
.side{width:256px;background:linear-gradient(180deg,#0b1120,#111a33);color:#cbd5e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex:none}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand b{display:block;color:#fff;font-size:17px}.brand small{color:#94a3b8;font-size:11px;display:flex;align-items:center;gap:4px;margin-top:2px}
.brand small img.tl{height:14px;border-radius:2px}
.lg{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--pri2),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px;flex:none}
#nav{padding:12px 10px;display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
#nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#94a3b8;text-decoration:none;font-weight:500;transition:.15s}
#nav a span.i{width:22px;text-align:center;font-size:16px}#nav a em{margin-right:auto;font-style:normal;font-size:11px;color:#64748b;font-family:system-ui}
#nav a:hover{background:rgba(255,255,255,.06);color:#fff}
#nav a.on{background:linear-gradient(90deg,rgba(59,130,246,.25),rgba(59,130,246,.08));color:#fff;box-shadow:inset -3px 0 0 var(--pri2)}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}
.usr{display:flex;gap:10px;align-items:center}.usr b{display:block;color:#fff;font-size:13px}.usr small{color:#64748b}
.av{width:34px;height:34px;border-radius:50%;background:#334155;display:grid;place-items:center;color:#fff;font-weight:600;flex:none}
.u-sw{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:11px;color:#94a3b8}
.u-sw select{background:#1e293b;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 8px;font-size:12px;outline:none}
.pw{font-size:10px;color:#64748b;margin-top:8px;text-align:center}.pw b{color:#cbd5e1}

/* mobile off-canvas nav controls — hidden on desktop/tablet, activated in admin-responsive.css at <=820px */
.nav-toggle,.side-close,.side-overlay{display:none}

/* main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.crumb{color:var(--mut);font-size:13px}.crumb b{color:var(--ink);font-size:16px}
.top-r{display:flex;align-items:center;gap:10px}
.sel-top,.search{height:38px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;padding:0 12px}
.search{display:flex;align-items:center;gap:8px;width:260px;position:relative}.search input{border:0;background:none;outline:none;flex:1}
.s-res{position:absolute;top:44px;right:0;width:320px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:10px;display:none;z-index:50;max-height:380px;overflow-y:auto}
.s-res h6{font-size:11px;color:var(--mut);margin:8px 6px 4px;font-weight:700}
.s-res a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13px;transition:.15s}
.s-res a:hover{background:#f1f5f9;color:var(--pri)}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;position:relative;display:grid;place-items:center;font-size:16px}
.icon-btn:hover{background:#f8fafc}
.bell-cnt{position:absolute;top:-4px;left:-4px;background:var(--red);color:#fff;font-size:10px;border-radius:10px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;font-weight:700;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.ring{animation:wobble 1s ease infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}}
.demo-btn{background:#fdf4ff;border-color:#f0abfc;color:#a21caf}.demo-btn:hover{background:#fae8ff}

/* sound banner */
.snd-banner{background:#fef3c7;color:#92400e;padding:10px 28px;display:flex;justify-content:space-between;align-items:center;font-weight:500;border-bottom:1px solid #fde68a;gap:16px}
.snd-banner span:last-child{display:flex;gap:8px}

.content{padding:24px 28px 60px;max-width:1500px;width:100%}
.ph{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:16px}
.ph h1{font-size:24px;font-weight:700}.ph p{color:var(--mut);margin-top:4px}
.ph .acts{display:flex;gap:10px;flex-wrap:wrap}

/* buttons & cards */
.btn{height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{background:#f1f5f9}.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3)}.btn.pri:hover{background:#1d4ed8}
.btn.grn{background:var(--teal);border-color:var(--teal);color:#fff}.btn.sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px}.btn.dng{color:var(--red)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.danger:hover{background:#b91c1c}
.btn.soon{opacity:.8}.btn.soon em{font-style:normal;font-size:10px;background:#e2e8f0;padding:1px 5px;border-radius:4px;color:#475569;margin-right:3px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card h3{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;gap:18px}.g5{grid-template-columns:repeat(5,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:2fr 1fr}.g2e{grid-template-columns:1fr 1fr}

.kpi{position:relative;overflow:hidden}.kpi small{color:var(--mut);font-size:12px;font-weight:500}.kpi b{display:block;font-size:26px;margin:6px 0 4px;font-weight:700;letter-spacing:-.5px}.kpi b u{text-decoration:none;font-size:13px;color:var(--mut);font-weight:500}
.kpi .ic{position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px}
.kpi .tr{font-size:12px;color:var(--green);font-weight:600}.kpi .tr.w{color:var(--amber)}
.i1{background:#eff6ff}.i2{background:#ecfdf5}.i3{background:#fff7ed}.i4{background:#ecfeff}.i5{background:#fef2f2}

/* live new reservations panel */
.nr-panel{border-right:4px solid var(--pri2);margin-bottom:20px}
.nr-panel h3{margin-bottom:12px}
.nr-panel .cnt{background:#dbeafe;color:var(--pri);padding:2px 8px;border-radius:12px;font-size:12px;margin:0 6px}
.nr-panel .cnt.on{background:var(--red);color:#fff}
.nr-acts{display:flex;gap:8px}
.nr-list{display:flex;flex-direction:column;gap:8px}
.nr-row{display:grid;grid-template-columns:84px 90px 1fr 80px 110px 90px;align-items:center;padding:10px 14px;background:#f8fafc;border-radius:10px;border:1px solid var(--line);gap:12px}
.nr-row.new{background:#eff6ff;border-color:#bfdbfe}
.nr-row.unseen{background:#fffbeb;border-color:#fde68a}
.nr-st{font-size:11px;font-weight:700;border-radius:6px;padding:3px 6px;text-align:center}
.nr-row.new .nr-st{background:#dbeafe;color:#1e40af}
.nr-row.unseen .nr-st{background:#fef3c7;color:#92400e}
.nr-row.seen .nr-st{background:#f1f5f9;color:#64748b}
.nr-time b{display:block;font-size:13px}.nr-time small{color:var(--mut);font-size:11px}
.nr-main b{display:block;font-size:13px;color:var(--pri)}.nr-main span{font-size:13px;font-weight:600}
.nr-n b,.nr-v b{font-size:14px}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{width:100%;border-collapse:collapse}
th{background:#f8fafc;color:var(--mut);font-weight:600;font-size:12px;text-align:right;padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid #eef1f7;white-space:nowrap;vertical-align:middle}
tbody tr:last-child td{border:0}tbody tr:hover{background:#f8faff}
tr.click{cursor:pointer}
tr.unseen{background:#fffdf5;font-weight:500}
.udot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-left:6px}
.nb{background:var(--red);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-right:auto;font-style:normal;font-weight:700}
.num{font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
/* quantity chips: dozens | pieces side by side, never one mixed Arabic/number string */
.qq{display:inline-flex;gap:5px;align-items:stretch;direction:rtl;unicode-bidi:isolate;vertical-align:middle;white-space:nowrap}
.qq>span{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;padding:3px 8px;border-radius:8px;background:#eff6ff;border:1px solid #dbeafe;line-height:1.15}
.qq b{font-size:15px;font-weight:700;color:var(--ink);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.qq i{font-style:normal;font-size:10.5px;color:var(--mut)}
.qq .qp{background:#f8fafc;border-color:var(--line)}
.qq .qp.z{opacity:.45}
.qq.ok .qd{background:#dcfce7;border-color:#bbf7d0}.qq.ok .qd b{color:#15803d}
.qq.bad>span{background:#fee2e2;border-color:#fecaca}.qq.bad b{color:#b91c1c}
.qq.warn>span{background:#fef3c7;border-color:#fde68a}.qq.warn b{color:#b45309}
.qq.bad .qp.z,.qq.warn .qp.z{opacity:.5}
table.items td:nth-child(3),table.items th:nth-child(3){min-width:132px}
.diff .qq{margin:2px 0}
.a4 .qq,.a5 .qq{gap:3px}.a4 .qq>span,.a5 .qq>span{min-width:34px;padding:1px 5px;background:#fff!important;border:1px solid #94a3b8!important}.a4 .qq b,.a5 .qq b{font-size:12.5px;color:#000!important}.a4 .qq i,.a5 .qq i{font-size:9px;color:#475569}
.thumb{width:44px;height:56px;border-radius:8px;object-fit:cover;object-position:top;border:1px solid var(--line)}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.t-g{background:#dcfce7;color:#15803d}.t-b{background:#dbeafe;color:#1d4ed8}.t-a{background:#fef3c7;color:#b45309}.t-r{background:#fee2e2;color:#b91c1c}.t-s{background:#f1f5f9;color:#475569}.t-t{background:#cffafe;color:#0e7490}
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filters select,.filters input{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;min-width:140px}
.mono{font-family:ui-monospace,Consolas,monospace;font-weight:600}
.mut{color:var(--mut)}
.pbar{height:6px;background:#e2e8f0;border-radius:4px;width:90px;overflow:hidden;margin-top:4px}.pbar i{display:block;height:100%;background:var(--teal)}

/* chart */
.chart{display:flex;align-items:flex-end;gap:14px;height:200px;padding-top:10px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart i{width:100%;max-width:46px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--pri2),#93c5fd);transition:height .6s}
.chart small{color:var(--mut);font-size:11px}.chart b{font-size:11px}
.rank{display:flex;flex-direction:column;gap:14px}.rank div{display:flex;gap:12px;align-items:center}.rank .rb{flex:1}.rank .bar{height:6px;border-radius:3px;background:#e2e8f0;margin-top:5px;overflow:hidden}.rank .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#5eead4)}

/* forms & modals */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.f{display:flex;flex-direction:column;gap:6px}.f.full{grid-column:1/-1}
.f label{font-weight:600;font-size:13px;color:#334155}
.f input,.f select,.f textarea{border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;background:#fff;outline:none;transition:.15s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}.kv small{color:var(--mut);display:block;font-size:12px}.kv b{font-size:14px}
.sumrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line)}.sumrow.big{border:0;font-size:18px;font-weight:700;padding-top:14px}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:100}
.modal-bg.open{display:flex}.modal{background:#fff;border-radius:18px;width:520px;max-width:94vw;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:mi .25s}
.modal.wide{width:820px}
@keyframes mi{from{transform:translateY(16px) scale(.97);opacity:0}}
.m-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}.m-h b{font-size:17px}.m-x{border:0;background:#f1f5f9;width:32px;height:32px;border-radius:8px}
.m-b{padding:22px;display:flex;flex-direction:column;gap:14px}.m-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#f8fafc;border-radius:0 0 18px 18px}
.methods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.methods label{border:1.5px solid var(--line);border-radius:10px;padding:10px 4px;text-align:center;cursor:pointer;font-weight:600;font-size:13px}.methods input{display:none}.methods label:has(input:checked){border-color:var(--pri);background:#eff6ff;color:var(--pri)}

/* reservation edit stepper & diff */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stepper button{width:28px;height:28px;background:#f8fafc;border:0;font-weight:700}
.stepper button:hover{background:#e2e8f0}
.stepper b{min-width:56px;padding:0 6px;text-align:center;font-weight:700;white-space:nowrap}
.items-edit .pcs-in{width:84px;height:32px;border:1px solid var(--line);border-radius:8px;text-align:center;font-weight:700}
.stepper input{width:44px;height:28px;border:0;border-right:1px solid var(--line);border-left:1px solid var(--line);text-align:center;font-weight:700;outline:none}
.row-new{background:#f0fdf4!important}.row-chg{background:#fffbeb!important}.warn{color:var(--amber);font-weight:600}
/* edit-mode items table (reservation line removal/addition, migration 085): fixed layout so it always fits
   its card at 1366/1920 with no inner horizontal scroll — image+code+name are merged into one .it-m cell
   (same pattern the view-mode table already uses) instead of 3 separate columns, padding is tighter than
   the generic table default, and the model name is allowed to wrap instead of forcing overflow. The delete
   button keeps its own narrow column at the end so it's always visible without scrolling. */
.items-edit td:nth-child(1){white-space:normal}
.items-edit .it-m{align-items:flex-start;gap:8px}
.items-edit .it-m .thumb{width:36px;height:46px;flex:0 0 auto}
.items-edit .edit-del-cell{text-align:left}
.items-edit .edit-del-cell .btn{white-space:nowrap}
/* column widths only apply once the table is an actual <table> (above the <=720px card-collapse breakpoint in
   admin-responsive.css section 9) — below that, td becomes a flex row (label left, value right) and a % width
   here would squeeze its content (this broke the quantity stepper down to ~14px wide before this guard). */
@media (min-width:721px){
  .items-edit{table-layout:fixed}
  .items-edit th,.items-edit td{padding:10px 8px}
  .items-edit th:nth-child(1),.items-edit td:nth-child(1){width:34%}
  .items-edit th:nth-child(2),.items-edit td:nth-child(2){width:13%}
  .items-edit th:nth-child(3),.items-edit td:nth-child(3){width:19%}
  .items-edit th:nth-child(4),.items-edit td:nth-child(4){width:10%}
  .items-edit th:nth-child(5),.items-edit td:nth-child(5){width:14%}
  .items-edit th:nth-child(6),.items-edit td:nth-child(6){width:10%}
}
.add-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}.add-row select{flex:1 1 220px;min-width:160px;height:38px;border-radius:10px;border:1px solid var(--line);padding:0 10px}.add-row input{width:70px;height:38px;border-radius:10px;border:1px solid var(--line);text-align:center}.add-row button{flex:0 0 auto}.add-row-note{flex:1 1 100%;order:99}
.edit-panel{background:#faf5ff;border:1px solid #e9d5ff}
.diff{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.diff div{background:#fff;padding:10px;border-radius:10px;border:1px solid #e9d5ff}.diff small{display:block;color:var(--mut);font-size:11px}.diff b{font-size:14px}
.dl{font-size:11px;font-weight:700;display:block}.dl.up{color:var(--green)}.dl.dn{color:var(--red)}
.chlist{margin:10px 0 14px;padding-right:20px;font-size:13px;color:#581c87}
.m-actions{display:flex;gap:10px;margin-top:14px}
.revs{display:flex;flex-direction:column;gap:10px}
.rv{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.rv.cur{background:#f0fdf4;border-color:#bbf7d0}
.note{font-size:12px;color:var(--mut);line-height:1.5;margin-top:8px}

/* unified activity & audit log */
.atl{display:flex;flex-direction:column;gap:12px}
.ai{display:flex;gap:12px;align-items:flex-start}
.ai .ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none}
.ai .ico.c-b{background:#dbeafe;color:#1d4ed8}.ai .ico.c-g{background:#dcfce7;color:#15803d}.ai .ico.c-a{background:#fef3c7;color:#b45309}.ai .ico.c-r{background:#fee2e2;color:#b91c1c}.ai .ico.c-t{background:#cffafe;color:#0e7490}.ai .ico.c-s{background:#f1f5f9;color:#475569}
.ai .ab{flex:1}.ai .at{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ai p{font-size:13px;margin:3px 0}
.ai .chg{display:flex;gap:8px;font-size:12px;margin:4px 0;background:#f8fafc;padding:4px 8px;border-radius:6px;width:fit-content}
.ai .chg s{color:var(--mut)}.ai .chg span{color:var(--mut)}.ai .chg b{color:var(--pri)}

/* users & roles */
.role-list{display:flex;flex-direction:column;gap:12px}
.role-card{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px}
.perms-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* floating live alerts */
.alerts{position:fixed;bottom:24px;left:24px;z-index:250;display:flex;flex-direction:column;gap:10px;max-width:340px}
.live-alert{background:#0f172a;color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35);border-right:4px solid var(--teal);animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(-40px);opacity:0}}
.la-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.la-h b{color:#5eead4;font-size:13px}
.la-b{display:flex;flex-direction:column;gap:4px;font-size:13px;margin-bottom:10px}

/* customer copy */
.cust-copy{width:340px;margin:0 auto;background:#f7f2ea;border-radius:30px;border:8px solid #111;padding:18px;font-size:13px}
.cust-copy h4{font-size:16px;margin-bottom:8px}.cust-copy .li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e4dac8}.cust-copy .tt{background:#1b1a17;color:#d9b97e;border-radius:14px;padding:12px;margin-top:10px;display:flex;justify-content:space-between;font-weight:700;font-size:16px}
.cc-acts{justify-content:center;flex-wrap:wrap}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,30px);background:#0f172a;color:#fff;padding:12px 22px;border-radius:12px;opacity:0;pointer-events:none;transition:.3s;z-index:300;font-weight:600}.toast.show{opacity:1;transform:translate(-50%,0)}

/* print modals */
.print-bg{position:fixed;inset:0;background:#475569;z-index:200;display:none;flex-direction:column}.print-bg.open{display:flex}
.print-tools{background:#0f172a;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:12px 24px}.print-tools span{display:flex;gap:10px}
.print-stage{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center}

/* A4 printable reservation */
.a4{width:210mm;min-height:297mm;background:#fff;color:#111;padding:16mm 15mm;box-shadow:0 10px 40px rgba(0,0,0,.4);font-size:12.5px;flex:none;height:fit-content}
.a4 .ph1{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #111;padding-bottom:12px;margin-bottom:16px}
.a4 .fac{display:flex;gap:12px;align-items:center}.a4 .fac .lg{width:54px;height:54px;border-radius:8px;background:#111;font-size:28px}.a4 .fac h2{font-size:21px}.a4 .fac small{color:#555}
.a4 .ttl{text-align:left}.a4 .ttl b{font-size:22px;display:block;letter-spacing:1px}
.a4 .meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;background:#f5f5f5;padding:12px 16px;border-radius:6px;margin-bottom:16px}.a4 .meta small{color:#666;display:block}
.a4 table{border:1px solid #bbb}.a4 th{background:#111;color:#fff;font-size:11.5px;text-align:center;padding:8px 6px}.a4 td{text-align:center;padding:8px 6px;border:1px solid #ddd;white-space:normal}.a4 td.l{text-align:right}
.a4 .tots{width:250px;margin:16px 0 0 auto;margin-right:0;margin-left:auto}.a4 .tots div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #ddd}.a4 .tots .g{background:#111;color:#fff;padding:9px 10px;font-size:15px;font-weight:700;border:0}
.a4 .sign{display:flex;justify-content:space-between;margin-top:56px;color:#444}.a4 .sign div{width:180px;border-top:1px solid #444;text-align:center;padding-top:6px}
.a4 .foot{margin-top:30px;text-align:center;color:#777;font-size:11px;border-top:1px solid #ddd;padding-top:8px}

/* A5 printable QR Card */
.a5{width:148mm;min-height:210mm;background:#fff;color:#111;padding:12mm 12mm;box-shadow:0 10px 40px rgba(0,0,0,.4);font-size:12px;flex:none;height:fit-content;display:flex;flex-direction:column}
.a5-card{height:100%;display:flex;flex-direction:column}
.hanger-hole-mark{display:flex;flex-direction:column;align-items:center;margin-bottom:10px}
.hole-circle{width:15mm;height:15mm;border:1.5px dashed #64748b;border-radius:50%;display:grid;place-items:center;background:#f8fafc}
.hole-hint{font-size:9px;color:#94a3b8;margin-top:2px}
.a5-header{display:flex;align-items:center;gap:12px}
.a5-fac-logo{width:42px;height:42px;border-radius:10px;background:#0f172a;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700}
.a5-header h2{font-size:18px;margin:0}
.a5-divider{height:2px;background:#0f172a;margin:10px 0 14px}
.a5-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.a5-meta{margin-bottom:10px}
.a5-code{font-size:26px;font-weight:800;font-family:ui-monospace,Consolas,monospace;color:#0f172a;letter-spacing:1px}
.a5-title{font-size:19px;font-weight:700;margin:3px 0 6px}
.a5-specs{font-size:12px;color:#475569}
.a5-qr-wrapper{margin:10px 0}
.a5-qr-frame{padding:10px;background:#fff;border:2px solid #0f172a;border-radius:16px;display:inline-block}
.a5-callout{background:#f1f5f9;border-radius:12px;padding:10px 14px;margin-top:10px;width:100%}
.a5-callout b{font-size:13px;display:block;margin-bottom:2px}
.a5-callout p{font-size:11px;color:#475569;margin:0}
.a5-footer{margin-top:auto;border-top:1px solid #cbd5e1;padding-top:10px;display:flex;justify-content:space-between;font-size:10px;color:#64748b}

/* print styles */
/* Printing an A4 document: the old "visibility:hidden" trick kept the whole app in the page flow (blank extra pages) and the
   fixed 210mm width ignored the printer margins (data cut at both sides). Now everything except the open document is
   removed from the flow and the document fills the printable width inside a real 10mm page margin. */
@page{size:A4;margin:10mm}
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important;margin:0!important}
  body > *:not(.print-bg.open){display:none!important}
  .no-print{display:none!important}
  .print-bg.open{position:static!important;display:block!important;background:#fff!important;z-index:auto}
  .print-stage{display:block!important;padding:0!important;overflow:visible!important}
  .a4, .a5{box-shadow:none!important;padding:0!important;width:auto!important;max-width:100%!important;min-height:0!important;height:auto!important;margin:0!important}
  .a4 table{width:100%!important;table-layout:auto}
  .a4 tr,.a4 .tots,.a4 .sign,.a4 .foot{page-break-inside:avoid;break-inside:avoid}
}

/* tablet */
@media (max-width:1180px){
  .g5{grid-template-columns:repeat(3,1fr)}.g2,.g3{grid-template-columns:1fr}
  .side{width:76px}.brand div:last-child,#nav a b,#nav a em,.usr div:last-child,.u-sw,.pw{display:none}
  #nav a{justify-content:center}.search{width:160px}
  .nr-row{grid-template-columns:70px 1fr 80px 90px}
  .nr-time{display:none}
}

/* ===== Admin UX regression fix + polish ===== */
/* header: current user + role */
.who{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;height:38px}
.who b{display:block;font-size:12px;line-height:1.2}.who small{display:block;font-size:10px;color:var(--pri);font-weight:600;line-height:1.2}
.av.sm{width:26px;height:26px;font-size:12px;background:var(--pri)}

/* modals: never scroll horizontally, footer always visible */
.modal{display:flex;flex-direction:column;overflow:hidden}
.modal .m-b{overflow-y:auto;overflow-x:hidden;min-height:0}
.modal .m-b>*{min-width:0}
.modal .m-h,.modal .m-f{flex:none}
.form{grid-template-columns:repeat(2,minmax(0,1fr))}
.f{min-width:0}
.f input,.f select,.f textarea{width:100%;min-width:0;max-width:100%}
.m-f{flex-wrap:wrap}
@media (max-width:640px){.form,.kv{grid-template-columns:1fr}.methods{grid-template-columns:repeat(2,1fr)}.modal.wide{width:94vw}}
.kv .full{grid-column:1/-1}.kv4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.kv4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec-h{font-size:15px;margin:26px 0 12px}

/* big live alert (top-centre, does not cover the page) */
.alerts{bottom:auto;left:50%;top:76px;transform:translateX(-50%);max-width:none;width:min(440px,92vw);align-items:stretch}
.live-alert{border-radius:18px;padding:18px 20px;border-right:0;border-top:5px solid var(--teal);box-shadow:0 18px 50px rgba(2,6,23,.45);animation:alertIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes alertIn{from{transform:translateY(-24px) scale(.96);opacity:0}}
.la-h b{font-size:18px;color:#5eead4;display:flex;align-items:center;gap:8px}
.la-bell{display:inline-block;animation:wobble 1s ease infinite}
.la-b{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;margin-bottom:14px}
.la-no{font-size:15px;color:#93c5fd}.la-cust{grid-column:1;font-size:19px;font-weight:700}
.la-stats{grid-column:2;grid-row:1/3;display:flex;gap:10px}
.la-stats div{background:rgba(255,255,255,.08);border-radius:12px;padding:8px 14px;text-align:center;min-width:70px}
.la-stats b{display:block;font-size:20px}.la-stats small{font-size:11px;color:#94a3b8}
.la-open{width:100%;justify-content:center;height:44px;font-size:15px}
.live-alert .m-x{background:rgba(255,255,255,.12);color:#fff}

/* dashboard layout: KPIs on top, Action Center beside the analytics */
.dash-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}
.dash-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.chart.lg{height:300px}
@media (max-width:1180px){.dash-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){.kpis{grid-template-columns:1fr 1fr!important}}
.nr-panel{margin-bottom:0;position:sticky;top:80px}
.nr-panel h3 .cnt{margin:0 6px}
.nr-list{gap:10px}
.nr-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:12px 14px}
.nr-l1{display:flex;justify-content:space-between;align-items:center}.nr-l1 b{color:var(--pri);font-size:14px}
.nr-cust{font-weight:700;font-size:14px}
.nr-l3{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#475569;gap:8px}.nr-l3 small{color:var(--mut)}
.nr-row .btn{justify-content:center;width:100%}
.nr-empty{text-align:center;color:var(--green);padding:26px 10px;font-size:13px;line-height:2}
.nr-more{display:block;text-align:center;margin-top:10px;font-size:12px;color:var(--pri);font-weight:600;text-decoration:none}
.nr-sim{width:100%;justify-content:center;margin-top:12px}
.cust-conf p{margin:0 0 6px}.cust-conf{border-right:4px solid var(--teal)}

/* seasons */
.seasons{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.seasons{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:700px){.seasons{grid-template-columns:1fr}}
.season{display:flex;flex-direction:column;gap:12px;border-top:4px solid #cbd5e1}
.season.st-active{border-top-color:var(--green)}.season.st-archived{border-top-color:var(--amber)}
.season .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.season .hd h3{margin:0}
.season .st{display:flex;gap:10px}.season .st>div{flex:1;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}
.season .st b{display:block;font-size:17px}.season .st small{color:var(--mut);font-size:11px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:#f1f5f9;border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px;margin-top:auto}
.seg button{border:0;background:transparent;border-radius:8px;height:32px;font-size:12px;font-weight:600;color:var(--mut);transition:.15s}
.seg button:hover{background:#e2e8f0;color:var(--ink)}
.seg button.on{color:#fff;box-shadow:0 2px 6px rgba(15,23,42,.18);cursor:default}
.seg .seg-active.on{background:var(--green)}.seg .seg-inactive.on{background:#64748b}.seg .seg-archived.on{background:var(--amber)}

/* product images */
.pe-imgs{display:flex;gap:10px;flex-wrap:wrap;padding:10px;border:1.5px dashed #cbd5e1;border-radius:12px;background:#f8fafc;min-height:100px}
.pe-img{position:relative;width:96px;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:#fff}
.pe-img.pri{border-color:var(--pri)}
.pe-img img{display:block;width:100%;height:112px;object-fit:cover;object-position:top}
.pe-ord{position:absolute;top:4px;right:4px;background:rgba(15,23,42,.78);color:#fff;font-size:10px;padding:1px 6px;border-radius:6px}.pe-img.pri .pe-ord{background:var(--pri)}
.pe-ctl{display:flex}.pe-ctl button{flex:1;border:0;background:#f1f5f9;height:26px;font-size:13px}.pe-ctl button:hover:not(:disabled){background:#e2e8f0}.pe-ctl button:disabled{opacity:.35;cursor:default}.pe-ctl .x:hover{background:#fee2e2!important}
.pe-none{margin:auto;font-size:13px}
.pe-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.pe-up{cursor:pointer}
.pe-sample{border:1px solid var(--line);background:#fff;border-radius:8px;padding:0;overflow:hidden;width:38px;height:48px}.pe-sample img{width:100%;height:100%;object-fit:cover;object-position:top}.pe-sample:hover{border-color:var(--pri)}
.pe-prev{display:flex;gap:12px;align-items:center;background:#faf7f2;border:1px solid #eadfc9;border-radius:12px;padding:10px 12px}
.pe-prev img{width:52px;height:66px;object-fit:cover;object-position:top;border-radius:8px}.pe-prev div{display:flex;flex-direction:column;gap:2px;font-size:13px}.pe-prev small{font-size:11px}

/* receipt lines */
.rc-lines{display:flex;flex-direction:column;gap:8px}
.rc-line{display:grid;grid-template-columns:minmax(0,1fr) 84px auto auto;gap:8px;align-items:center}
.rc-line select,.rc-line input{height:38px;border:1px solid #cbd5e1;border-radius:10px;padding:0 10px;min-width:0;width:100%}.rc-h{font-size:12px;white-space:nowrap}
@media (max-width:640px){.rc-line{grid-template-columns:minmax(0,1fr) 70px auto}.rc-h{display:none}}
@media (max-width:820px){.top{padding:0 12px;gap:8px}.crumb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-r{gap:6px;min-width:0}.who small,#simBtn{display:none}.content{padding:16px 12px 50px}.snd-banner{padding:10px 12px;flex-wrap:wrap}.ph{flex-wrap:wrap}}

/* daily chart */
.dchart h3{margin-bottom:12px}
.rng{display:inline-flex;background:#f1f5f9;border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.rng button{border:0;background:transparent;border-radius:7px;height:26px;padding:0 10px;font-size:12px;font-weight:600;color:var(--mut)}
.rng button.on{background:#fff;color:var(--pri);box-shadow:0 1px 3px rgba(15,23,42,.15)}
.dc-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.dc-sum>div{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.dc-sum small{display:block;color:var(--mut);font-size:11px}.dc-sum b{font-size:16px}.dc-sum u{text-decoration:none;font-size:11px;color:var(--mut);font-weight:500}
.dc-plot{display:flex;gap:8px;height:240px}
.dc-y{position:relative;width:34px;flex:none}.dc-y span{position:absolute;right:0;transform:translateY(50%);font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.dc-area{position:relative;flex:1;min-width:0;border-right:1px solid var(--line)}
.dc-g{position:absolute;left:0;right:0;height:0;border-top:1px dashed #e2e8f0}
.dc-bars{position:absolute;inset:0;display:flex;gap:10px;padding:0 8px}
.dc-bars.dense{gap:3px}
.dc-col{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.dc-col i{display:block;width:100%;max-width:56px;background:linear-gradient(180deg,#60a5fa,#93c5fd);border-radius:7px 7px 0 0;transition:height .5s,filter .15s}
.dc-col.zero::after{content:'';position:absolute;bottom:0;width:100%;max-width:56px;border-bottom:2px solid #e2e8f0}
.dc-col.today i{background:linear-gradient(180deg,var(--pri),#3b82f6)}
.dc-col:hover i{filter:brightness(.92)}
.dc-val{font-size:11px;font-weight:700;color:#334155;margin-bottom:3px;min-height:14px}
.dc-tip{display:none;position:absolute;bottom:calc(100% + 4px);z-index:5;background:#0f172a;color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;white-space:nowrap;flex-direction:column;gap:2px;box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:none}
.dc-col:hover .dc-tip{display:flex}.dc-col:hover{z-index:6}.dc-tip b{font-size:12px}
.dc-x{display:flex;gap:10px;padding:8px 8px 0 0;margin-right:42px}.dc-x.dense{gap:3px}
.dc-x span{flex:1;min-width:0;text-align:center;font-size:11px;color:var(--mut);display:flex;flex-direction:column;align-items:center}
.dc-x span.today{color:var(--pri);font-weight:700}.dc-x em{font-style:normal;font-size:10px;background:#dbeafe;border-radius:6px;padding:0 6px;margin-top:2px}
@media (max-width:640px){.dc-sum{grid-template-columns:1fr}}

/* dashboard refinements */
.nr-list{max-height:400px;overflow-y:auto;padding-left:4px}
.dash-main .g2e{align-items:stretch}.dcard{display:flex;flex-direction:column}
.rk-line{display:flex;align-items:center;gap:10px}.rk-line .bar{flex:1;margin:0}.rk-n{font-size:12px;color:var(--mut);white-space:nowrap;min-width:58px;text-align:left}.rk-n b{color:var(--ink);font-size:14px}
.rank{gap:16px}.rank>div{display:flex}
.stk-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;text-decoration:none;color:var(--ink);border-right:4px solid var(--amber);transition:.15s}
.stk-row:hover{background:#f8fafc}.stk-row.over,.stk-row.out{border-right-color:var(--red);background:#fffafa}
.stk-row>div:first-child{flex:1;min-width:0}.stk-row b{font-size:13px}.stk-row small{display:block;color:var(--mut);font-size:11px}
.stk-r{text-align:center;min-width:44px}.stk-r b{font-size:16px}.stk-row.over .stk-r b,.stk-row.out .stk-r b{color:var(--red)}
.recent td,.recent th{padding:12px 16px}
.paymini{display:inline-flex;flex-direction:column;gap:3px;vertical-align:middle;margin-right:4px}.paymini i{display:block;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.paymini u{display:block;height:100%;background:var(--teal)}
.go{color:var(--pri);font-weight:600;font-size:12px}
.card h3 small.mut{font-weight:500;font-size:12px;margin-right:6px}
.rank .rb{display:block;min-width:0}.rank .rk-line{display:flex}.rank .bar{display:block;height:7px}.rank .bar i{height:100%;min-width:3px}

/* dashboard v3: operational (new + recent) first, analytics below; side column balances the main one */
.dash-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.nr-panel{position:static}.nr-list{max-height:330px}
.dash-side .dcard{flex:none}
.dc-plot{height:200px}
.dash-side .rank{gap:12px}.dash-side .rank .thumb{width:34px!important;height:42px!important}
.dash-grid{align-items:stretch}
.dash-main .dchart{flex:1;display:flex;flex-direction:column}
.dash-main .dc-plot{flex:1;height:auto;min-height:200px}
@media (max-width:1180px){.dash-main .dc-plot{height:220px;flex:none}}
/* seasons v2 */
.seasons{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.season .st{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px}
.season .st>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 6px}
.season .st b,.season .st b.num{font-size:19px;line-height:1.1;text-align:center;direction:ltr;unicode-bidi:plaintext}
.season .st small{font-size:11px}
.season .hd h3{font-size:16px}

/* activity log v2 */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}}
.act-kpis{margin-bottom:16px}
.act-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px;margin-bottom:16px}
.act-filters input,.act-filters select{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;min-width:140px}
.act-filters #aQ{flex:1;min-width:260px}
.act-filters .dt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}.act-filters .dt input{min-width:0}
.act-filters .chk{display:flex;align-items:center;gap:6px;font-size:12px;color:#475569;cursor:pointer}.act-filters .chk input{min-width:0;height:auto}
.act-card{padding:0;overflow:hidden}
.tbl-wrap.flat{border:0;border-radius:0}
.act-t td{white-space:normal;vertical-align:top;padding:12px 14px}

.a-day td{background:#f1f5f9;padding:8px 16px;font-size:13px;border-bottom:1px solid var(--line)}
.a-t{white-space:nowrap!important;width:86px}.a-t b{display:block;font-size:14px}.a-t small{color:var(--mut);font-size:11px}
.a-ev{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;white-space:nowrap}
.a-ev i{font-style:normal;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;background:#f1f5f9}
.a-ev.c-g i{background:#dcfce7}.a-ev.c-a i{background:#fef3c7}.a-ev.c-r i{background:#fee2e2}.a-ev.c-r{color:var(--red)}
.a-cat{display:block;color:var(--mut);font-size:11px;margin:3px 36px 0 0}
.a-ent a{color:var(--pri);text-decoration:none}.a-ent small{display:block;color:var(--mut);font-size:11px}
.a-d{min-width:260px;line-height:1.6}.a-d .chg{display:flex;gap:8px;font-size:12px;margin-top:4px;background:#f8fafc;padding:3px 8px;border-radius:6px;width:fit-content;align-items:center}.a-d .chg s{color:var(--mut)}.a-d .chg b{color:var(--pri)}
.a-u{white-space:nowrap!important}.a-u .av{display:inline-grid;margin-left:6px;vertical-align:middle}
.a-more{text-align:center;padding:16px;border-top:1px solid var(--line)}

/* ===== business workflow lock: shipping, permissions, logo, payment lists, reports ===== */
.lg-img{object-fit:contain;background:#fff;border-radius:10px;padding:3px}
.doc-logo{height:54px;width:auto;max-width:120px;object-fit:contain}.a5-fac-logo.doc-logo{height:42px;background:none}
.chk-row{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}.chk-row input{width:18px;height:18px}
.ship-note-ro{border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;background:#f8fafc;font-size:13.5px;line-height:1.5}

/* ===== settings screen (round 6 redesign): grouped cards, compact consistent spacing ===== */
.settings-grid{align-items:start}
.settings-card .form{gap:14px}
.settings-card>.btn.pri{margin-top:16px}
.hint{display:block;color:var(--mut);font-size:12px;font-weight:400;line-height:1.5;margin-top:2px}
.settings-img-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.settings-img-prev{width:64px;height:64px;object-fit:contain;border-radius:8px;border:1px solid var(--line)}
.settings-img-prev-wide{width:96px;height:64px;object-fit:cover}
/* shipping */
.ship-find{margin-bottom:16px}.ship-bar{display:flex;gap:10px}.ship-bar input{flex:1;height:46px;border:1.5px solid #cbd5e1;border-radius:12px;padding:0 16px;font-size:16px;font-family:ui-monospace,Consolas,monospace;outline:none}.ship-bar input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.15)}.ship-bar .btn{height:46px}
.ship-ready{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.chip{border:1px solid var(--line);background:#f8fafc;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600}.chip:hover{border-color:var(--pri);color:var(--pri);background:#eff6ff}
.ship-order,.ship-card{margin-bottom:16px}.ship-order h3{gap:8px;justify-content:flex-start;flex-wrap:wrap}
.warn-box{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:600}
.sh-q{width:80px;height:36px;border:1.5px solid #cbd5e1;border-radius:8px;text-align:center;font-weight:700;font-size:15px}.sh-q:disabled{background:#f1f5f9;color:var(--mut)}
.ship-hist{display:flex;flex-direction:column;gap:8px;margin-top:10px;font-size:13px}.ship-hist>div{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
/* per-user permissions */
.perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f8fafc}
.perm-grid .pg{display:flex;flex-direction:column;gap:5px}.perm-grid .pg>b{font-size:12px;color:var(--pri)}
.perm-grid label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;cursor:pointer}.perm-grid label input{width:auto}
.perm-grid label.inrole{color:var(--mut)}.perm-grid label small{color:var(--mut)}
@media (max-width:640px){.perm-grid{grid-template-columns:1fr}}
/* logo field */
.logo-box{display:flex;gap:14px;align-items:center;border:1.5px dashed #cbd5e1;border-radius:12px;padding:12px;background:#f8fafc}
.logo-prev{width:110px;height:80px;background:#fff;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;overflow:hidden;font-size:12px}.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.logo-btns{display:flex;gap:8px;flex-wrap:wrap}
/* payment lists */
.pm-list{display:flex;flex-direction:column;gap:8px}.pm-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}.pm-row.off b{color:var(--mut);text-decoration:line-through}
.pm-row b{flex:1}.pm-act{display:flex;gap:6px}
/* reports */
.rpt-pick{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start;margin-bottom:16px}
.rpt-pick .f select{width:100%;height:40px}
.rpt-f{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding-top:24px}
.rpt-f select,.rpt-f input{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;min-width:140px}
.rpt-f .dt{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mut)}.rpt-f .dt input{min-width:0}
@media (max-width:900px){.rpt-pick{grid-template-columns:1fr}.rpt-f{padding-top:0}}
.rpt-sum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.rpt-sum>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:130px}.rpt-sum small{display:block;color:var(--mut);font-size:11px}.rpt-sum b{font-size:18px}
.a4 .rptt th,.a4 .rptt td{font-size:10.5px;padding:5px 4px}
.a4 .rpt-meta{grid-template-columns:2fr 1fr}

/* ===== reservation page — premium layout ===== */
.oh{background:linear-gradient(135deg,#ffffff 0%,#f5f7ff 100%);border:1px solid var(--line);border-radius:20px;padding:22px 26px 0;margin-bottom:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -18px rgba(37,99,235,.25);position:relative;overflow:hidden}
.oh::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--pri),var(--teal))}
.oh.editing::before{background:linear-gradient(90deg,#d97706,#f59e0b)}.oh.cancelled::before{background:var(--red)}.oh.cancelled .oh-id h1{text-decoration:line-through;color:var(--mut)}
.oh-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.oh-back{display:inline-block;font-size:12px;color:var(--mut);text-decoration:none;font-weight:600;margin-bottom:8px}.oh-back:hover{color:var(--pri)}
.oh-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.oh-id h1{font-size:28px;font-weight:800;letter-spacing:-.5px;margin-left:6px}
.oh-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;color:#475569;font-size:13px}
.oh-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn.acc{background:linear-gradient(135deg,var(--teal),#14b8a6);border-color:var(--teal);color:#fff;box-shadow:0 4px 12px rgba(13,148,136,.3)}.btn.acc:hover{filter:brightness(.93);background:linear-gradient(135deg,var(--teal),#14b8a6)}
.oh-acts .btn{height:42px}
.menu{position:relative}.menu-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.18);padding:6px;z-index:30}
.menu-pop.open{display:block;animation:mi .15s}
.menu-pop button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:none;padding:10px 12px;border-radius:9px;font-weight:600;text-align:right}.menu-pop button:hover{background:#f1f5f9}.menu-pop .dng{color:var(--red)}.menu-pop .dng:hover{background:#fef2f2}.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.oh-stats{display:flex;gap:0;margin:20px -26px 0;border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.oh-stats>div{flex:1;padding:14px 22px;border-left:1px solid var(--line)}.oh-stats>div:last-child{border-left:0}
.oh-stats small{display:block;color:var(--mut);font-size:11px;font-weight:600}.oh-stats b{font-size:21px;font-weight:800;letter-spacing:-.3px}.oh-stats u{text-decoration:none;font-size:12px;color:var(--mut);font-weight:500}
.oh-stats .hl{background:linear-gradient(180deg,#eff6ff,#dbeafe)}.oh-stats .hl b{color:var(--pri)}
.oh-pay{position:relative;height:22px;margin:0 -26px;background:#e2e8f0;overflow:hidden}.oh-pay i{position:absolute;inset:0 auto 0 auto;right:0;background:linear-gradient(90deg,#0891b2,#22d3ee)}.oh-pay span{position:relative;display:block;text-align:center;font-size:11px;font-weight:700;line-height:22px;color:#0f172a;mix-blend-mode:normal}
@media (max-width:900px){.oh-stats{flex-wrap:wrap}.oh-stats>div{flex:1 1 33%}}
/* shipping instruction banner */
.sbn{display:flex;align-items:center;gap:16px;border-radius:18px;padding:18px 22px;margin-bottom:16px;border:1.5px solid}
.sbn-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex:none}
.sbn-tx{flex:1;min-width:0}.sbn-tx b{display:block;font-size:17px;font-weight:800}.sbn-tx span{display:block;font-size:13px;margin-top:3px;opacity:.85}
.sbn-btns{display:flex;gap:8px}
.sbn.wait{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#f59e0b;color:#78350f;box-shadow:0 10px 30px -14px rgba(217,119,6,.55)}
.sbn.wait .sbn-ic{background:#fde68a;animation:ring 2s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.5)}50%{box-shadow:0 0 0 10px rgba(245,158,11,0)}}
.sbn-cta{height:46px;padding:0 24px;font-size:15px;background:linear-gradient(135deg,#d97706,#f59e0b);border-color:#d97706;color:#fff;box-shadow:0 6px 16px rgba(217,119,6,.4)}.sbn-cta:hover{background:linear-gradient(135deg,#b45309,#d97706)}
.sbn-note{font-weight:700;font-size:13px;background:#fff;border:1px dashed #f59e0b;padding:8px 14px;border-radius:10px}
.sbn.ok{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:#4ade80;color:#14532d}.sbn.ok .sbn-ic{background:#bbf7d0}
.sbn.done{background:linear-gradient(135deg,#ecfeff,#cffafe);border-color:#22d3ee;color:#134e4a}.sbn.done .sbn-ic{background:#99f6e4}
.wait-tag{animation:blink 2s ease-in-out infinite}@keyframes blink{50%{opacity:.55}}
/* body */
.od-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.od-main,.od-side{display:flex;flex-direction:column;gap:18px;min-width:0}
@media (max-width:1180px){.od-grid{grid-template-columns:1fr}}
.items td{vertical-align:middle}.it-m{display:flex;align-items:center;gap:12px}.it-m b{display:block}.it-m small{font-size:11px}
.it-sh{min-width:92px;font-size:12px;font-weight:700}.it-sh i{display:block;height:5px;background:#e2e8f0;border-radius:3px;margin-top:4px;overflow:hidden}.it-sh u{display:block;height:100%;background:var(--amber)}.it-sh.done u{background:var(--green)}.it-sh.done{color:var(--green)}.it-sh.part{color:var(--amber)}
.cust-card .cc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}.cc-av{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--pri2),var(--teal));color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700}
.cc-top b{display:block;font-size:16px}.cc-top small{color:var(--mut)}
.cc-rows{display:flex;flex-direction:column;gap:10px}.cc-rows>div{border-top:1px dashed var(--line);padding-top:8px}.cc-rows small{display:block;color:var(--mut);font-size:11px}
.ship-note{margin-bottom:8px}.ship-note b{display:block}
.warn-box.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
/* source line of a live reservation alert (customer app / registered by the administration) */
.la-src{grid-column:1;font-size:13px;color:#cbd5e1}

/* small quantity chips (under a bold piece count in the stock reports) */
.qq.sm{gap:3px}.qq.sm>span{min-width:34px;padding:1px 6px;border-radius:6px}.qq.sm b{font-size:11px}.qq.sm i{font-size:8.5px}

/* ---- reservations list (owner request 2026-10-25): compact table, designed header and filter bar ---- */
.ord-ph{align-items:center}
.ord-acts{padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);gap:6px}
.ord-acts .btn{height:40px;border-radius:10px;font-weight:600;padding:0 16px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ord-acts .btn.pri{box-shadow:0 4px 12px rgba(37,99,235,.28)}
.of-bar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;gap:8px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.of-bar #fQ{flex:1 1 280px;min-width:220px}
.of-bar select,.of-bar input{min-width:0;flex:0 1 150px;background:#f8fafc}
.of-bar #fCount{margin-right:auto;background:#eff6ff;color:#1d4ed8!important;font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:20px;white-space:nowrap}
.ord-wrap{box-shadow:0 1px 3px rgba(15,23,42,.05)}
.ord-tbl{width:100%;font-size:13px}
.ord-tbl th{white-space:nowrap;padding:11px 10px;background:#f8fafc;font-size:12px;color:var(--mut);font-weight:600}
.ord-tbl td{padding:10px;vertical-align:middle}
.ord-tbl td:first-child{white-space:nowrap}
.ord-tbl td .tag{white-space:nowrap}
.ord-tbl tbody tr:hover{background:#f8fbff}
@media (max-width:900px){.ord-ph{align-items:flex-start;flex-direction:column}.ord-acts{width:100%}.ord-acts .btn{flex:1;justify-content:center}.of-bar #fCount{margin-right:0}}
.ord-tbl{font-size:12.5px}
.ord-tbl th{padding:10px 6px}.ord-tbl td{padding:9px 6px}
.ord-tbl .pbar,.ord-tbl .bs-pbar,.ord-tbl td [class*="pbar"]{max-width:60px}
.ord-tbl .btn.sm{padding:0 9px;height:30px}
.ord-tbl td:last-child{white-space:nowrap}