/* بوليصة — الهيكل: سايدبار يمين + لوحة تحكم.
   الافتراضي فاتح. الدارك بيتفعّل بالزرار بس (data-theme="dark") —
   مش بإعداد النظام، عشان الشكل يبقى واحد عند كل الموظفين. */
:root{
  --paper:#F1F5F9; --surface:#FFFFFF; --surface-2:#F1F5F9; --line:#CBD5E1; --line-soft:#E2E8F0;
  --ink:#0F172A; --ink-2:#334155; --muted:#64748B;
  --accent:#2563EB; --accent-2:#1D4ED8; --accent-soft:#DBEAFE; --accent-ink:#1E40AF;
  --side:#FFFFFF; --side-2:#F1F5F9; --side-ink:#334155; --side-ink-2:#64748B; --side-line:#E2E8F0;
  --ok:#15803D; --ok-soft:#DCFCE7; --warn:#B45309; --warn-soft:#FEF3C7;
  --bad:#B91C1C; --bad-soft:#FEE2E2;
  --t1:#7C3AED; --t2:#E11D48; --t3:#EA9A1A; --t4:#2563EB; --t5:#0D9488; --t6:#334155;
  --thead:#1E293B; --thead-ink:#E2E8F0; --zebra:#F8FAFC;
  --info:#1D4ED8; --info-soft:#DBEAFE;
  --violet:#6D28D9; --violet-soft:#EDE9FE;
  --mute-soft:#F1F5F9;
  --f:"Cairo","Segoe UI",system-ui,sans-serif; --m:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --r:8px; --rs:5px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 26px -20px rgba(15,23,42,.3);
}
:root[data-theme="dark"]{
  --paper:#0B1220; --surface:#111B2E; --surface-2:#18243B; --line:#2B3A55; --line-soft:#1F2C44;
  --ink:#E8EEF8; --ink-2:#BCC9DD; --muted:#8A9BB5;
  --accent:#60A5FA; --accent-2:#93C5FD; --accent-soft:#1B2E4D; --accent-ink:#BFDBFE;
  --side:#0E1727; --side-2:#1A2740; --side-ink:#C6D2E4; --side-ink-2:#8A9BB5; --side-line:#223049;
  --ok:#4ADE80; --ok-soft:#14321F; --warn:#FBBF24; --warn-soft:#3A2B0C;
  --bad:#F87171; --bad-soft:#3B1A1A;
  --t1:#A78BFA; --t2:#FB7185; --t3:#FBBF24; --t4:#60A5FA; --t5:#2DD4BF; --t6:#475569;
  --thead:#0F1B2E; --thead-ink:#BFD0E6; --zebra:#131F33;
  --info:#7DB3FF; --info-soft:#152A47;
  --violet:#B79BFA; --violet-soft:#241C42;
  --mute-soft:#18243B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -20px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}

/* ---------- الهيكل ---------- */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:980px){.shell{grid-template-columns:252px minmax(0,1fr)}}

aside{
  background:var(--side);color:var(--side-ink);border-inline-end:1px solid var(--side-line);
  position:fixed;inset-block:0;inset-inline-start:0;width:272px;z-index:40;
  transform:translateX(100%);transition:transform .18s ease;overflow-y:auto;
}
aside.open{transform:none}
@media(min-width:980px){aside{position:sticky;top:0;height:100vh;width:auto;transform:none;grid-column:1}}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid var(--side-line);
  text-decoration:none;color:inherit}
.brand .mark.img{background:none;padding:0;width:auto;max-width:120px;height:34px;border-radius:4px}
.brand .mark.img img{height:34px;max-width:120px;width:auto;object-fit:contain;display:block}
.brand .mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--accent-2),var(--accent));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.brand .nm{font-weight:600;font-size:16px;color:var(--ink);letter-spacing:-.01em}
.brand .sub{font-size:10.5px;font-family:var(--m);color:var(--side-ink-2);letter-spacing:.08em;text-transform:uppercase}

nav.side{padding:10px 10px 40px}
.grp{margin-bottom:2px}
.ghead{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--rs);
  background:none;border:0;color:var(--side-ink);font-family:var(--f);font-size:13.5px;cursor:pointer;text-align:start}
.ghead:hover{background:var(--side-2);color:var(--accent-ink)}
.ghead .ico{width:18px;text-align:center;opacity:.85;flex:none}
.ghead .ttl{flex:1}
.ghead .arw{font-size:10px;color:var(--side-ink-2);transition:transform .15s}
.grp.open .ghead{color:var(--accent-ink);font-weight:500}
.grp.open .arw{transform:rotate(90deg)}
.gbody{display:none;padding:2px 0 6px}
.grp.open .gbody{display:block}
.gbody a{display:block;padding:7px 13px 7px 34px;padding-inline-start:40px;border-radius:var(--rs);
  color:var(--side-ink-2);text-decoration:none;font-size:13px;position:relative}
.gbody a::before{content:"";position:absolute;inset-inline-start:24px;top:50%;width:4px;height:4px;
  border-radius:50%;background:currentColor;opacity:.5;transform:translateY(-50%)}
.gbody a:hover{background:var(--side-2);color:var(--accent-ink)}
.gbody a.active{background:var(--accent);color:#fff}
.gbody a.active::before{opacity:1}
.solo{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--rs);
  color:var(--side-ink);text-decoration:none;font-size:13.5px}
.solo:hover{background:var(--side-2);color:var(--accent-ink)}
.solo.active{background:var(--accent);color:#fff}
.scrim{position:fixed;inset:0;background:rgba(10,18,24,.5);z-index:35;display:none}
.scrim.on{display:block}
@media(min-width:980px){.scrim{display:none!important}}

main{min-width:0;grid-column:2}
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:11px 16px}
.theme-btn{background:none;border:1px solid var(--line);border-radius:100px;
  padding:5px 11px;font-size:13px;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.theme-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.burger{display:inline-flex;font-size:19px;background:none;border:0;color:var(--ink);cursor:pointer;padding:4px 6px}
@media(min-width:980px){.burger{display:none}}
.crumb{font-weight:600;font-size:16px;letter-spacing:-.01em}
.grow{flex:1}
.who{font-size:12.5px;color:var(--muted);text-align:end;line-height:1.3}
.who b{display:block;color:var(--ink);font-weight:500;font-size:13.5px}
.page{padding:18px 18px 70px}

/* ---------- عناصر ---------- */
h2{font-size:16px;font-weight:600;margin:0 0 13px;letter-spacing:-.01em}
h3{font-size:11.5px;font-family:var(--m);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:20px 0 9px}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;margin-bottom:15px;box-shadow:var(--shadow)}
.cols{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:1040px){.cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .cols.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row > input:not([type=date]):not([type=number]){flex:1 1 180px;width:auto}
.row > select{flex:0 1 auto;width:auto}
.row > button,.row > .btn{flex:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

button,.btn{font-family:var(--f);font-size:13.5px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);padding:7px 13px;border-radius:var(--rs);cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
button.p{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
button.p:hover{background:var(--accent-2);color:#fff}
button.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
button.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
button.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
button.big{font-size:17px;padding:14px 18px;width:100%;font-weight:600}
input,select,textarea{font-family:var(--f);font-size:14px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--rs);background:var(--surface);color:var(--ink);width:100%}
input.scan{font-family:var(--m);font-size:21px;padding:15px;text-align:center;letter-spacing:.06em}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}

/* ---------- بلاطات ملوّنة (لوحة التحكم) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.stat{border-radius:var(--r);padding:16px 17px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.stat .n{font-family:var(--m);font-size:28px;font-variant-numeric:tabular-nums;line-height:1.15;font-weight:500}
.stat .l{font-size:12.5px;opacity:.9;margin-top:2px}
.stat .ico{position:absolute;inset-inline-start:-6px;bottom:-14px;font-size:62px;opacity:.14;line-height:1}
.stat.c1{background:var(--t1)} .stat.c2{background:var(--t2)} .stat.c3{background:var(--t3)}
.stat.c4{background:var(--t4)} .stat.c5{background:var(--t5)} .stat.c6{background:var(--t6)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:13px 15px}
.tile .n{font-family:var(--m);font-size:21px;font-variant-numeric:tabular-nums;line-height:1.2}
.tile .l{font-size:12px;color:var(--muted)}

.chartbox{position:relative;height:270px}
.chartbox.sm{height:220px}

/* ---------- جداول ---------- */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:14px;table-layout:auto}
th,td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--line-soft);white-space:nowrap;
  max-width:190px;overflow:hidden;text-overflow:ellipsis}
th{font-family:var(--f);font-weight:600;font-size:12px;letter-spacing:.01em;text-transform:uppercase;color:var(--muted);
  font-weight:500;background:var(--surface-2)}
tbody tr:hover{background:var(--accent-soft)}
tbody tr.click{cursor:pointer}
.wb{font-family:var(--m);font-size:12.5px;color:var(--accent-ink)}
.num{font-family:var(--m);font-variant-numeric:tabular-nums}

.st{font-size:11.5px;padding:2px 9px;border-radius:100px;display:inline-block;white-space:nowrap}
.st.open{background:var(--surface-2);color:var(--ink-2)}
.st.good{background:var(--ok-soft);color:var(--ok)}
.st.problem{background:var(--warn-soft);color:var(--warn)}
.st.bad{background:var(--bad-soft);color:var(--bad)}
.st.closed{background:var(--surface-2);color:var(--muted)}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:12.5px;padding:3px 11px;border-radius:100px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;color:var(--ink-2)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip b{font-family:var(--m);margin-inline-start:5px}

.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line-soft);font-size:13.5px}
.kv span{color:var(--muted)} .kv b{font-weight:500}
.item{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;margin-bottom:10px}
.item .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:3px}
.item .who2{font-weight:600;font-size:15px}
.item .addr{font-size:13px;color:var(--ink-2)}
.item .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

.msg{padding:10px 13px;border-radius:var(--rs);font-size:13.5px;margin-bottom:12px}
.msg.e{background:var(--bad-soft);color:var(--bad)}
.msg.s{background:var(--ok-soft);color:var(--ok)}
.msg.w{background:var(--warn-soft);color:var(--warn)}
.empty{color:var(--muted);font-size:13.5px;padding:24px 0;text-align:center}
.hint{font-size:12px;color:var(--muted);margin-top:8px}

.tl{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)}
.tl li{position:relative;padding:0 0 13px 16px;padding-inline-start:17px;font-size:13px}
.tl li::before{content:"";position:absolute;inset-inline-start:-5px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tl .when{font-family:var(--m);font-size:11px;color:var(--muted)}
.tl .who3{color:var(--muted);font-size:12px}

.bar{height:7px;border-radius:100px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:100px}
.sync{position:fixed;inset-inline-start:14px;bottom:14px;font-size:12px;padding:7px 13px;border-radius:100px;z-index:30}
.sync.on{background:var(--ok-soft);color:var(--ok)} .sync.off{background:var(--bad-soft);color:var(--bad)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- شريط مراحل الشحنة (متابعة الشحنات) ---------- */
.stages{display:flex;gap:2px;overflow-x:auto;border-bottom:2px solid var(--line-soft);
  margin-bottom:14px;padding-bottom:0;scrollbar-width:thin}
.stage-tab{flex:none;display:flex;align-items:center;gap:7px;padding:10px 14px;cursor:pointer;
  border:0;background:none;color:var(--muted);font-family:var(--f);font-size:13px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-2px}
.stage-tab:hover{color:var(--accent-ink);background:var(--surface-2)}
.stage-tab.on{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:500;background:none}
.stage-tab .c{font-family:var(--m);font-size:11.5px;background:var(--surface-2);color:var(--ink-2);
  border-radius:100px;padding:1px 7px;min-width:22px;text-align:center}
.stage-tab.on .c{background:var(--accent);color:#fff}
.stage-tab .dot{width:7px;height:7px;border-radius:50%;flex:none}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.filters .wide{grid-column:span 2}
@media(max-width:700px){.filters .wide{grid-column:span 1}}

/* جدول المتابعة فيه ١٦ عمود — بنضيّق الحشو والخط عشان أكبر عدد يبان
   من غير زحلقة، والباقي بيتزحلق أفقي زي أي نظام شحن. */
#trkTbl table{min-width:1280px;font-size:13px}
#trkTbl th,#trkTbl td{padding:7px 8px;max-width:140px}
#trkTbl td.cellcol{min-width:92px}
#trkTbl .st{font-size:11px;padding:1px 7px}

/* عمود الاختيار في جدول المتابعة */
#trkTbl td:first-child,#trkTbl th:first-child{width:34px;text-align:center}
#trkTbl input[type=checkbox]{width:16px;height:16px;cursor:pointer}
#trkTbl td.click{cursor:pointer}

/* ═══════════ لمسات بصرية ═══════════ */

/* الحركة: خفيفة ومقصودة — بتوضّح إن الصفحة اتغيّرت، مش بتتفلسف */
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.page > #view > *{animation:rise .22s ease both}
.page > #view > *:nth-child(2){animation-delay:.04s}
.page > #view > *:nth-child(3){animation-delay:.08s}
.card,.item,.stat,button,.btn,.chip,.stage-tab,tbody tr{transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease}

/* البلاطات الملوّنة: تدرّج خفيف + رفعة عند المرور */
.stat{background-image:linear-gradient(135deg,rgba(255,255,255,.17),rgba(0,0,0,.07))}
.stat:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(15,23,42,.5)}
.stat .ico{transition:transform .25s ease,opacity .25s ease}
.stat:hover .ico{transform:scale(1.08) rotate(-6deg);opacity:.2}

.card:hover{box-shadow:0 1px 2px rgba(15,23,42,.06), 0 14px 32px -24px rgba(15,23,42,.45)}
.tile{border-inline-start:3px solid var(--accent)}
.tile:hover{transform:translateY(-1px)}

/* ترويسة الجدول غامقة — بتثبّت العين وبتفصل الرأس عن البيانات */
th{background:var(--thead)!important;color:var(--thead-ink)!important;
  font-weight:600;letter-spacing:.01em;border-bottom:0!important;position:sticky;top:0;z-index:2}
thead tr th:first-child{border-start-start-radius:var(--rs)}
thead tr th:last-child{border-start-end-radius:var(--rs)}
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr:hover{background:var(--accent-soft)}

/* خلايا الحالة: بلوك ملوّن بيملا الخانة — بيتقري من بعيد */
.cell{display:block;text-align:center;padding:6px 8px;border-radius:var(--rs);
  font-size:12px;font-weight:500;line-height:1.35}
.cell.good{background:var(--ok-soft);color:var(--ok)}
.cell.warn{background:var(--warn-soft);color:var(--warn)}
.cell.bad{background:var(--bad-soft);color:var(--bad)}
.cell.open{background:var(--info-soft);color:var(--info)}
.cell.closed{background:var(--mute-soft);color:var(--muted)}
.cell.violet{background:var(--violet-soft);color:var(--violet)}
td.cellcol{padding:5px 6px!important}

/* فلوس: الأرقام الكبيرة بتاخد وزن بصري */
.mny{font-family:var(--m);font-variant-numeric:tabular-nums;font-weight:500}
.mny.big{color:var(--ink);font-size:13.5px}

/* أزرار الإجراءات الصغيرة جنب الصف */
.iconbar{display:flex;gap:4px;justify-content:center}
.ico-btn{width:27px;height:27px;border-radius:7px;border:0;display:grid;place-items:center;
  cursor:pointer;font-size:13px;line-height:1;padding:0}
.ico-btn:hover{transform:translateY(-1px);filter:brightness(.95)}
.ico-btn.b1{background:var(--info-soft);color:var(--info)}
.ico-btn.b2{background:var(--violet-soft);color:var(--violet)}
.ico-btn.b3{background:var(--ok-soft);color:var(--ok)}

/* شريط المراحل: التبويب الشغّال بيلمع شوية */
.stage-tab.on{background:linear-gradient(180deg,transparent,var(--accent-soft))}
.stage-tab .c{transition:background .14s ease}

/* زرار أساسي بتدرّج */
button.p{background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.06))}
button.p:hover{transform:translateY(-1px)}

/* السايدبار: الشغّال بيبان بشريط جانبي */
.gbody a.active,.solo.active{box-shadow:inset 3px 0 0 rgba(255,255,255,.55)}

@media (prefers-reduced-motion:reduce){
  .page > #view > *{animation:none}
  .stat:hover,.tile:hover,.ico-btn:hover,button.p:hover{transform:none}
}

/* ---------- خانة المحافظة والمنطقة (بحث واحد) ---------- */
.geo{position:relative}
.geo-pop{position:absolute;inset-inline:0;top:100%;z-index:30;margin-top:4px;max-height:320px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 34px -18px rgba(15,23,42,.5)}
.geo-grp{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:11px;
  font-weight:600;padding:6px 12px;letter-spacing:.02em;z-index:1}
.geo-item{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;border:0;background:none;cursor:pointer;text-align:start;font-family:var(--f);
  font-size:13.5px;color:var(--ink);border-radius:0}
.geo-item:hover,.geo-item.on{background:var(--accent-soft);color:var(--accent-ink)}
.geo-item mark{background:transparent;color:var(--accent);font-weight:700;padding:0}
.geo-city{font-size:11.5px;color:var(--muted);flex:none}
.geo-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.geo-picked{margin-top:6px}
.geo-x{border:0;background:none;cursor:pointer;color:inherit;font-size:12px;opacity:.7;padding:0 2px}
.geo-x:hover{opacity:1}

/* ---------- شريط الإجراءات الملوّن (نمط بساط) ---------- */
.actbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-bottom:14px}
.bigbtn{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 14px;border:0;
  border-radius:var(--r);cursor:pointer;font-family:var(--f);font-size:13.5px;font-weight:600;
  line-height:1.3;text-align:center;transition:transform .14s ease,filter .14s ease}
.bigbtn:hover{transform:translateY(-2px);filter:brightness(.97)}
.bigbtn .bi{font-size:16px;opacity:.85;flex:none}
.bigbtn.a1{background:var(--violet-soft);color:var(--violet)}
.bigbtn.a2{background:var(--warn-soft);color:var(--warn)}
.bigbtn.a3{background:#F59E0B;color:#fff}
.bigbtn.a4{background:var(--bad-soft);color:var(--bad)}
.bigbtn.a5{background:var(--info-soft);color:var(--info)}
.bigbtn.a6{background:var(--ok-soft);color:var(--ok)}
.bigbtn.a7{background:var(--accent);color:#fff}
.bigbtn:disabled{opacity:.45;cursor:default;transform:none}

/* صندوق «برقم البوليصة» — بيفتح تحت الأزرار */
.scanbox{background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:14px}
.scanbox h3{margin:0 0 8px}
.scanlog{max-height:190px;overflow-y:auto;margin-top:10px}
.scanlog .ln{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px;
  border-bottom:1px dashed var(--line-soft)}
.scanlog .ok{color:var(--ok)} .scanlog .no{color:var(--bad)}

/* ---------- لوحة أرقام البوالص ---------- */
.batch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-bottom:15px;box-shadow:var(--shadow)}
.batch.has{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.batch-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.batch-head h3{margin:0}
.batch-count{font-family:var(--m);font-size:15px;font-weight:600;background:var(--accent);color:#fff;
  border-radius:100px;padding:2px 13px;min-width:44px;text-align:center}
.batch.has .batch-count{animation:pop .22s ease}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:none}}
.batch textarea{font-family:var(--m);font-size:13.5px;line-height:1.7;resize:vertical;min-height:110px}
.batch-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.batch-acts button{flex:1 1 150px}
.batchcol[hidden]{display:none}
@media(min-width:1040px){.withbatch.on{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:15px;align-items:start}}

/* ===== رفع الإكسيل ===== */
.imp{display:grid;gap:15px}
.imp .step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:15px;align-items:start}
.imp .stepn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:800;font-size:19px}
.imp .step h2{margin:0 0 7px}
.imp input[type=file]{display:block;width:100%;padding:13px;border:2px dashed var(--line);
  border-radius:12px;background:var(--bg2);cursor:pointer}
.imp input[type=file]:hover{border-color:var(--accent)}
a.bigbtn{display:inline-block;text-decoration:none;text-align:center}
tr.bad td{background:color-mix(in srgb,var(--bad) 9%,transparent)}
#impPrev td{white-space:normal}
#impPrev .bigbtn{max-width:320px}
.tbl.doc td{white-space:normal;line-height:1.6}
.tbl.doc td:first-child,.tbl.doc td:nth-child(2){white-space:nowrap}

/* ══════════ مودال صغير ══════════
   سؤال واحد وإجابة واحدة — زي اختيار المندوب قبل التوزيع. */
.mdl{position:fixed;inset:0;background:rgba(10,18,24,.5);z-index:60;
  display:none;align-items:center;justify-content:center;padding:20px}
.mdl.on{display:flex}
.mdl__box{background:var(--surface);border-radius:14px;width:100%;max-width:420px;
  box-shadow:0 18px 50px rgba(10,18,24,.28);overflow:hidden}
.mdl__h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mdl__h h3{margin:0;font-size:15px}
.mdl__x{margin-inline-start:auto;background:none;border:0;font-size:20px;line-height:1;
  cursor:pointer;color:var(--muted);padding:0 4px}
.mdl__b{padding:18px}
.mdl__f{display:flex;gap:8px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line)}

/* ===== نافذة تفاصيل الشحنة ===== */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);
  display:none;place-items:center;padding:20px;z-index:90}
.modal.on{display:grid;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  width:min(560px,100%);max-height:88vh;overflow:auto;padding:22px;box-shadow:0 30px 70px -30px rgba(2,6,23,.7);
  animation:pop .18s ease}
.modal-x{position:absolute;inset-inline-start:14px;top:13px;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:14px;z-index:2}
.modal-x:hover{color:var(--bad);border-color:var(--bad)}
#mdBody h2{padding-inline-start:46px}
td.wb.click{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
td.wb.click:hover{color:var(--accent)}
.mdl__box--wide{max-width:720px;max-height:88vh;display:flex;flex-direction:column}
.mdl__box--wide .mdl__b{overflow-y:auto}

/* ══════════ شريط ترتيب الأعمدة ══════════
   الأعمدة بالعرض زي ما هي في الجدول، وتحت كل واحد قيمة حقيقية من أول صف
   — بترتّب وإنت شايف النتيجة مش بتتخيّلها. */
.colrow{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px}
.colchip{flex:0 0 auto;min-width:120px;max-width:190px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface-2);padding:9px 11px;cursor:grab;user-select:none}
.colchip:active{cursor:grabbing}
.colchip .h{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colchip .v{font-size:11.5px;color:var(--muted);margin-top:5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.colchip.drag{opacity:.4}
.colchip.over{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}

/* نافذة ترتيب الأعمدة بعرض الشاشة — عشان تشوف الجدول كله زي ما هو */
.mdl__box--full{max-width:none;width:calc(100vw - 28px);max-height:90vh;
  display:flex;flex-direction:column}
.mdl__box--full .mdl__b{overflow:auto}

/* الأعمدة بتتوزّع على العرض زي رأس الجدول الحقيقي */
.colrow{display:flex;gap:6px;align-items:stretch}
.colrow .colchip{flex:1 1 0;min-width:76px;max-width:none}
.colchip .h{text-align:center}
.colchip .v{text-align:center;direction:ltr}

/* ══════════ اختيار نموذج البوليصة ══════════ */
.tplrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tplcard{border:2px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;
  background:var(--surface);display:flex;flex-direction:column;gap:9px}
.tplcard.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.tplhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tplhead b{font-size:13.5px}
.tplprev{width:100%;height:380px;border:1px solid var(--line);border-radius:7px;background:#fff}