/* ============================================================================
   Oya Logistics — design system v2 (Batch 20)
   Arabic-RTL-first, bilingual. © Sysenta.
   Same class & variable names as v1 — refined palette, depth, type & motion.
   ============================================================================ */
:root{
  /* brand — 271.2: the Emdado catalogue colour (Sysenta DESIGN.md line-emdado #8E1B3A, white text 8.9:1).
     An install upgraded from ≤271.1 keeps its maroon (#5C0E17): install/batch271_2_install.php stores it
     explicitly and brand_css() re-emits the exact old values. A colour picked in Settings ▸ Company wins. */
  --brand:#8E1B3A;--brand-2:#74162F;--brand-3:#4A0E1E;--brand-mid:#621329;
  --accent:#A8264A;--accent-2:#7E1834;
  /* sidebar group headers: a light tint of the brand (was a third accent, gold #F3C97A — kept on the maroon install) */
  --nav-head:#F6C7D3;--nav-head-hi:#FFE1EA;--nav-head-open:#FFD6E2;
  /* warm neutral surfaces */
  --bg:#f6f2f3;--panel:#ffffff;--panel-2:#f9f5f6;--ink:#241419;--muted:#76606a;
  --line:#ecdfe3;--line-2:#d9c5cc;
  /* status */
  --ok:#178a4c;--warn:#c77414;--bad:#d3304a;--info:#2563eb;--purple:#7c3aed;
  /* geometry & depth */
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(71,12,30,.05),0 1px 6px rgba(71,12,30,.04);
  --shadow-md:0 2px 6px rgba(71,12,30,.06),0 10px 28px rgba(71,12,30,.07);
  --ring:0 0 0 3px rgba(142,27,58,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Cairo","Segoe UI","Tahoma",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[dir=ltr] body{font-family:"Cairo","Segoe UI",Tahoma,sans-serif}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
input,select,textarea{font-family:inherit;font-size:14px}
::selection{background:rgba(139,30,58,.16)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============================ Shell ============================ */
.app{display:flex;min-height:100vh}
.sidebar{width:256px;background:linear-gradient(178deg,var(--brand-3) 0%,var(--brand-mid,#5a1128) 55%,var(--brand-2) 100%);color:#f7e3e8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{display:flex;align-items:center;gap:11px;padding:20px 16px 14px}
.brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:20px;box-shadow:0 4px 14px rgba(0,0,0,.28);overflow:hidden}
.brand .bt{font-weight:800;font-size:16px;letter-spacing:.01em}.brand .bs{font-size:12px;opacity:.72}
.brand-lockup{max-width:200px;width:100%;height:auto;display:block}
.login-form .brand-lockup{max-width:230px}
.nav{padding:8px;overflow:auto;flex:1;scrollbar-width:thin}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:0}
.nav-grp-head{display:flex;align-items:center;gap:8px;padding:8px 11px 4px;font-size:12.5px;letter-spacing:.05em;opacity:.78;cursor:pointer;font-weight:800;user-select:none} /* 248: عنوان قسم أوضح وأكبر */
.nav-grp-head:hover{opacity:.85}
.nav-grp-head span:first-child{flex:1}
.nav-grp-caret{transition:transform .22s;font-size:12px}
.nav-grp .nav-grp-items{display:none;padding-bottom:4px}
.nav-grp.open .nav-grp-items{display:block}
.nav-grp.open .nav-grp-caret{transform:rotate(180deg)}
/* ==== دفعة 257 — رؤوس الأقسام في القائمة الجانبية بلون مميز (ذهبي كريمي على العنابي) ==== */
.nav-grp-head{color:var(--nav-head,#F3C97A);opacity:1;font-size:13px;padding:11px 11px 5px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.nav-grp-head::before{content:"";width:4px;height:14px;border-radius:3px;background:var(--nav-head,#F3C97A);flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.nav-grp-head:hover{opacity:1;color:var(--nav-head-hi,#FFE3A6)}
.nav-grp-head .nav-grp-caret{color:var(--nav-head,#F3C97A);opacity:.85}
.nav-grp.open>.nav-grp-head{color:var(--nav-head-open,#FFDD99)}
.nav-grp:first-child>.nav-grp-head{border-top:0;margin-top:0}
/* ==== دفعة 248 — المجموعات الفرعية داخل القسم (sub menu) ==== */
.nav-sub{margin:2px 0 4px}
.nav-sub-head{display:flex;align-items:center;gap:8px;padding:4px 11px 2px;padding-inline-start:16px;font-size:12px;letter-spacing:.03em;opacity:.6;cursor:pointer;font-weight:800;user-select:none;color:#fff}
.nav-sub-head:hover{opacity:.9}
.nav-sub-head span:first-child{flex:1}
.nav-sub-caret{transition:transform .22s;font-size:12px}
.nav-sub .nav-sub-items{display:none;border-inline-start:2px solid rgba(255,255,255,.14);margin-inline-start:14px;padding-inline-start:4px}
.nav-sub.open .nav-sub-items{display:block}
.nav-sub.open .nav-sub-caret{transform:rotate(180deg)}
.nav-sub .nav-sub-items a{font-size:13.2px;padding:6px 9px}

.nav a{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:9px;color:rgba(255,255,255,.9);font-size:14px;margin-bottom:1px;transition:background .16s,color .16s,transform .16s;position:relative} /* 248: بند أكبر وأوضح */
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav a.active{background:#fff;color:var(--brand-3);font-weight:800;box-shadow:0 3px 12px rgba(0,0,0,.22)}
.nav a.active::before{content:"";position:absolute;inset-inline-start:-10px;top:22%;bottom:22%;width:4px;border-radius:4px;background:var(--accent)}
.nav .ico{width:21px;text-align:center;font-size:15px}
.nav .badge{margin-inline-start:auto;background:var(--accent);color:#fff;border-radius:20px;font-size:12px;padding:1.5px 8px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.side-foot{padding:13px;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.14)}
.side-foot .su{display:flex;align-items:center;gap:10px}
.side-foot .sn{font-weight:800;font-size:13px}.side-foot .sr{opacity:.65;font-size:12px}
.btn-logout{display:block;text-align:center;background:rgba(255,255,255,.1);color:#fff;padding:8.5px;border-radius:10px;margin-top:10px;font-weight:700;font-size:12.5px;transition:background .16s}
.btn-logout:hover{background:rgba(255,255,255,.2)}
.avatar{width:35px;height:35px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30}
.topbar h1{font-size:17px;font-weight:800}
.spacer{flex:1}
.tb-btn{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px 13px;color:var(--ink);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:border-color .16s,box-shadow .16s,transform .16s}
.tb-btn:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.tb-btn:active{transform:translateY(1px)}
.nb{background:var(--accent);color:#fff;border-radius:20px;font-size:12px;padding:1px 6px;font-weight:800}
.hamburger{display:none;background:var(--panel);border:1px solid var(--line);border-radius:11px;width:40px;height:40px;font-size:19px;color:var(--ink);align-items:center;justify-content:center;flex-shrink:0}
.tb-search{position:relative;min-width:190px;max-width:280px}
.tb-search .si{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tb-search .inp{padding-inline-start:36px;height:40px;border-radius:12px}
.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(36,20,25,.55);z-index:40;opacity:0;transition:opacity .25s}
.drawer-backdrop.show{opacity:1}
.content{padding:24px;max-width:1400px;width:100%;margin:0 auto}
.app-copyright{letter-spacing:.02em}

/* ============================ Feedback ============================ */
.flash{padding:12px 16px;border-radius:12px;margin-bottom:15px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);animation:flashIn .28s ease}
@keyframes flashIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.flash.ok{background:#eafaf1;color:#116639;border:1px solid #bfe8d0}
.flash.err{background:#fdeef1;color:#9c1f36;border:1px solid #f5c6d0}
.flash.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.help-line{background:#f2f7ff;border:1px solid #cfe0fa;color:#274a86;border-radius:12px;padding:10px 14px;font-size:12.5px;margin-bottom:14px;line-height:1.65}
.empty{text-align:center;padding:52px 24px;color:var(--muted)}
.empty .ei{font-size:42px;margin-bottom:12px;opacity:.85}

/* ============================ Layout helpers ============================ */
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.g3{grid-template-columns:repeat(2,1fr)}}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sec-head h2{font-size:20px;font-weight:800}.sec-head .sh-sub{color:var(--muted);font-size:13px}
.seg{display:inline-flex;gap:6px;flex-wrap:wrap}

/* ============================ Cards & KPIs ============================ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .18s}
.card.pad{padding:20px}
.card .ct{font-size:14.5px;font-weight:800}.card .csub{color:var(--muted);font-size:12px;margin-bottom:12px;line-height:1.6}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.85}
.kpi .kl{color:var(--muted);font-size:12.5px;font-weight:700}
.kpi .kv{font-size:26px;font-weight:800;margin-top:7px;letter-spacing:-.02em}
.kpi .kf{font-size:12px;margin-top:3px;color:var(--muted)}
.kpi .kico{position:absolute;inset-inline-end:15px;top:16px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px}

/* ============================ Buttons ============================ */
.btn{border:1px solid transparent;border-radius:11px;padding:9.5px 16px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:7px;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;background:var(--panel-2);color:var(--ink)}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 3px 10px rgba(139,30,58,.28)}
.btn.primary:hover{background:linear-gradient(180deg,var(--brand-2),var(--brand-3));box-shadow:0 5px 16px rgba(139,30,58,.34)}
.btn.accent{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 3px 10px rgba(200,56,93,.28)}
.btn.accent:hover{filter:brightness(.95)}
.btn.ghost{background:var(--panel);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.sm{padding:6.5px 12px;font-size:12px;border-radius:9px}
.btn.danger{background:#fdeef1;color:var(--bad)}.btn.danger:hover{background:#fbdfe5}
.btn.success{background:#eafaf1;color:var(--ok)}.btn.success:hover{background:#d9f4e5}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:15px}
.exp-bar{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.sec-head .exp-bar{margin-inline-start:6px}

/* ============================ Forms ============================ */
.inp,.sel{background:var(--panel);border:1.5px solid var(--line);border-radius:11px;padding:9.5px 12px;color:var(--ink);width:100%;outline:none;transition:border-color .16s,box-shadow .16s}
/* Batch 147 — form controls IMMUNE to font metrics: a fixed height + zero block padding makes the
   engine vertically center the text regardless of the font's ascent/descent (Cairo's raw metrics
   sank field text to the bottom edge on phones even after the Batch 146 metric overrides).
   Textareas (which also carry .inp) keep their flowing height. */
input.inp,select.sel{height:44px;padding-top:0;padding-bottom:0;line-height:normal}
.inp:hover,.sel:hover{border-color:var(--line-2)}
.inp:focus,.sel:focus{border-color:var(--brand);box-shadow:var(--ring)}
.search{position:relative;min-width:210px}.search .inp{padding-inline-start:36px}
.search .si{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px;color:#5b4048}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}.req{color:var(--bad)}
/* standalone hint (outside a .field) + wrap long LTR tokens so they never overflow the card on mobile */
.hint{font-size:12px;color:var(--muted);line-height:1.6}
.hint,.help-line,.csub,.card .csub,.sh-sub,.sec-head .sh-sub{overflow-wrap:anywhere;word-break:break-word;min-width:0}

/* ============================ Tables ============================ */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse}
.tbl-wrap thead th{position:sticky;top:0;z-index:1}
th{background:var(--panel-2);text-align:start;font-size:12px;color:var(--muted);font-weight:800;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
td{padding:11.5px 14px;border-bottom:1px solid var(--line);font-size:13px;white-space:normal;overflow-wrap:break-word;vertical-align:middle}
/* columns fit their data: long text wraps, but atomic values never break mid-value */
td .mono,td .pill,td .chip,td .btn,td .tag,td time,td .sv,td.sv,td.nowrap,th{white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:#faf3f5}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;white-space:nowrap}
.link{color:var(--brand);font-weight:700;cursor:pointer}.link:hover{text-decoration:underline}

/* ============================ Badges & chips ============================ */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3.5px 11px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:4px 10px;font-size:12px;font-weight:700}
/* Tabs v3 (Batch 34) — unmistakably clickable segmented buttons */
.tabs{display:inline-flex;gap:5px;background:var(--panel-2);border:1px solid var(--line);padding:5px;border-radius:13px;margin-bottom:20px;flex-wrap:wrap;max-width:100%}
.tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-weight:700;font-size:13px;color:var(--muted);border:1px solid transparent;background:transparent;text-decoration:none;border-radius:9px;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s,transform .1s}
.tab:hover{color:var(--ink);background:var(--panel);border-color:var(--line);transform:translateY(-1px)}
.tab.active{color:#fff;background:var(--brand);font-weight:800;box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 40%,transparent)}
.tab.active:hover{color:#fff;background:var(--brand-2);transform:none}
.tab.active .chip{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.stat-row:last-child{border-bottom:0}.stat-row .sv{font-weight:800}
.progress{height:8px;background:var(--line);border-radius:20px;overflow:hidden}
.progress>span{display:block;height:100%;border-radius:20px;transition:width .4s ease}

/* ============================ Toggle switch ============================ */
.switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:40px;height:23px;background:var(--line-2);border-radius:20px;position:relative;transition:background .2s;flex-shrink:0;cursor:pointer}
.switch input:checked{background:var(--ok)}
.switch input:disabled{opacity:.55;cursor:not-allowed}
.switch input::after{content:"";position:absolute;top:2.5px;inset-inline-start:2.5px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked::after{inset-inline-start:19px}
[dir=rtl] .switch input::after{inset-inline-start:auto;inset-inline-end:2.5px}
[dir=rtl] .switch input:checked::after{inset-inline-end:19px}

/* ============================ Steps & timeline ============================ */
.steps{display:flex;align-items:flex-start;gap:0;margin:8px 0}
.step{flex:1;text-align:center;position:relative}
.step .sc{width:30px;height:30px;border-radius:50%;background:var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:12px;font-weight:800;z-index:2;position:relative;transition:background .2s}
.step.on .sc{background:var(--brand);color:#fff}
.step.cur .sc{background:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(200,56,93,.18)}
.step:not(:last-child)::after{content:"";position:absolute;top:15px;inset-inline-start:50%;width:100%;height:3px;background:var(--line);z-index:1}
.step.on:not(:last-child)::after{background:var(--brand)}
.step .sl{font-size:12px;font-weight:700;color:var(--muted)}.step.on .sl,.step.cur .sl{color:var(--ink)}
.timeline{position:relative}
.tl-item{display:flex;gap:13px;position:relative;padding-bottom:17px}
.tl-item:last-child{padding-bottom:0}
.tl-line{position:absolute;inset-inline-start:13px;top:26px;bottom:-2px;width:2px;background:linear-gradient(180deg,var(--brand),var(--line))}
.tl-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--brand);color:#fff;z-index:1;border:3px solid var(--panel);box-shadow:var(--shadow-sm)}
.tl-item.cur .tl-dot{background:var(--accent);box-shadow:0 0 0 4px rgba(200,56,93,.2)}
.tl-item.fail .tl-dot{background:var(--bad)}
.tl-body .tt{font-weight:700;font-size:13.5px}.tl-body .ts{font-size:12px;color:var(--muted);margin-top:2px}

/* ============================ Login ============================ */
.login-wrap{min-height:100vh;display:flex}
.login-hero{flex:1;background:linear-gradient(150deg,var(--brand-3),var(--brand) 55%,var(--brand-2));color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);top:-140px;inset-inline-end:-140px}
.login-hero h1{font-size:40px;font-weight:900;line-height:1.18;margin-bottom:14px}
.login-hero p{font-size:15px;opacity:.9;line-height:1.75;max-width:440px}
.login-hero .feat{display:flex;align-items:center;gap:12px;font-size:14px;margin-top:13px}
.login-hero .fi{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.login-form{width:450px;max-width:100%;background:var(--panel);padding:48px 42px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){.login-hero{display:none}.login-form{width:100%}}
.demo-acct{display:flex;align-items:center;gap:10px;padding:9.5px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:7px;background:var(--panel-2);width:100%;text-align:start;transition:border-color .15s,background .15s,transform .15s}
.demo-acct:hover{border-color:var(--brand);background:#fbf1f4;transform:translateY(-1px)}

/* ============================ AWB & misc ============================ */
.awb{background:#fff;color:#000;border:2px solid #000;width:420px;font-family:"Segoe UI",Tahoma,sans-serif;margin:0 auto;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.awb .ah{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:2px solid #000}
.awb .arow{display:flex;border-bottom:1px solid #000}
.awb .acell{padding:7px 12px;flex:1}.awb .acell+.acell{border-inline-start:1px solid #000}
.awb .lab{font-size:9px;text-transform:uppercase;color:#555;font-weight:700}.awb .val{font-size:13px;font-weight:700}
.barcode{display:inline-block;line-height:0}
.sig-pad{border:2px dashed var(--line-2);border-radius:12px;background:#fff;touch-action:none;width:100%;cursor:crosshair}
.modal{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-md)}

/* ============================ Maps (Leaflet) ============================ */
.map-box{position:relative;z-index:0;isolation:isolate;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map-box .leaflet-container{font-family:inherit}
.geo-panel{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto}
.geo-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;transition:border-color .15s,transform .15s}
.geo-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.geo-card.active{border-color:var(--brand);background:#fbf1f4}
.geo-card .gn{font-weight:800;font-size:13.5px}
.geo-card .gt{font-size:12px;color:var(--muted)}
[data-theme=dark] .geo-card.active{background:#332027}

/* ============================ Theme polish v3 (Batch 34) ============================ */
.btn{transition:transform .12s,box-shadow .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-2) 100%);box-shadow:0 3px 12px color-mix(in srgb,var(--brand) 32%,transparent)}
.btn.primary:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 42%,transparent)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.card{transition:box-shadow .2s,border-color .2s}
.tbl-wrap thead th{background:var(--panel-2);font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:800}
.tbl-wrap tbody tr{transition:background .12s}
.tbl-wrap tbody tr:hover{background:color-mix(in srgb,var(--brand) 3.5%,var(--panel))}
a.link{color:var(--brand);font-weight:600}
a.link:hover{text-decoration:underline}
:where(.inp,.sel):focus-visible{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.btn:focus-visible,.tab:focus-visible{outline:none;box-shadow:var(--ring)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--brand) 35%,var(--line-2))}
::-webkit-scrollbar-track{background:transparent}
.sec-head h2{letter-spacing:-.2px}
.flash{box-shadow:var(--shadow-sm)}
[data-theme=dark] .tbl-wrap thead th{background:#241a1e;color:#b9a3ac}
[data-theme=dark] .tbl-wrap tbody tr:hover{background:#2a1d22}

/* ============================ Hide sidebar / filters (Batch 37) ============================ */
@media(min-width:901px){
  html.sb-collapsed .sidebar{display:none}
  html.sb-collapsed .main{width:100%}
}
@media(max-width:900px){.sb-tgl{display:none}}
.sb-tgl{font-size:15px}

/* ============================ Filter position + column picker (Batch 28) ============================ */
.flt-split{display:flex;gap:16px;align-items:flex-start}
.flt-side{flex:0 0 210px;position:sticky;top:74px;z-index:5;max-height:calc(100vh - 90px)}
.flt-main{flex:1;min-width:0}
.fltbar-apply{position:sticky;bottom:0;z-index:4;background:var(--panel)}
.flt-top-row .flt-pos a:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.flt-side .fltbar{flex-direction:column;align-items:stretch}
.flt-side .fltbar .search{min-width:0;width:100%}
.flt-side .fltbar .search .inp{width:100%}
.flt-side .fltbar select.sel{width:100%!important;max-width:none!important}
.flt-side .fltbar>label{display:flex!important;flex-direction:column;align-items:stretch!important;gap:4px}
.flt-side .fltbar>label .inp{width:100%!important}
.flt-side .fltbar .btn{justify-content:center}
.flt-split.flt-right{flex-direction:row} html[dir=ltr] .flt-split.flt-right{flex-direction:row-reverse}
.flt-split.flt-left{flex-direction:row-reverse} html[dir=ltr] .flt-split.flt-left{flex-direction:row}
.flt-pos{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--panel-2);align-self:center}
.flt-pos a{padding:2px 8px;border-radius:6px;font-size:13px;line-height:1.3;text-decoration:none;color:var(--muted)}
.flt-pos a.on{background:var(--brand);color:#fff}
.col-pop{position:fixed;z-index:130;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:12px 14px;max-height:340px;overflow:auto;min-width:210px}
.col-pop label{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 2px;cursor:pointer}
/* Batch 145 — mobile filters, bulletproof: !important beats the inline (cache-safety) styles that
   filter_bar emits (sticky/210px side pane), which on phones turned the bar into a height-capped
   column that wrapped fields into OVERLAPPING columns. On mobile every filter bar is one clean,
   full-width stacked column; nothing sticky, nothing height-capped, nothing can overlap. */
@media (max-width:900px){
  .flt-split{flex-direction:column!important}
  .flt-side{position:static!important;flex:none!important;width:100%!important;max-height:none!important;top:auto!important}
  .fltbar{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;height:auto!important;max-height:none!important;overflow:visible!important}
  .fltbar>*{max-width:100%!important;min-width:0}
  .fltbar .search{min-width:0!important;width:100%!important}
  .fltbar .search .inp{width:100%!important}
  .fltbar select.sel{width:100%!important;max-width:none!important}
  .fltbar>label{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important}
  .fltbar>label .inp{width:100%!important}
  .fltbar-apply{position:static!important;margin-top:8px}
  .fltbar-apply .btn{flex:1;justify-content:center}
  /* dashboard quick-filter (and any form marked .dash-flt): stack full-width on phones */
  .dash-flt{flex-direction:column!important;align-items:stretch!important}
  .dash-flt .field{margin:0}
  .dash-flt .inp,.dash-flt .sel{width:100%!important}
  .dash-flt .btn{justify-content:center}
}
@media print{.flt-side,.flt-pos,.col-pop,.fltbar{display:none!important}}

/* ============================ Mobile / tablet ============================ */
@media(max-width:900px){
  .hamburger{display:inline-flex}
  /* hard stop against horizontal overflow: nothing may widen the page, so the browser never
     zooms out and the fixed drawer always anchors to the real screen edge */
  html,body{overflow-x:clip;max-width:100vw}
  .app,.main,.content{max-width:100vw;min-width:0}
  .sidebar{position:fixed;top:0;bottom:0;height:100%;z-index:50;width:268px;box-shadow:0 0 46px rgba(0,0,0,.4);transition:transform .28s ease}
  [dir=ltr] .sidebar{left:0;right:auto;transform:translateX(-110%)}
  [dir=rtl] .sidebar{right:0;left:auto;transform:translateX(110%)}
  [dir=ltr] .sidebar.open,[dir=rtl] .sidebar.open{transform:translateX(0)}
  .drawer-backdrop.show{display:block}
  body.drawer-lock{overflow:hidden}
  .topbar{padding:10px 14px;gap:8px}
  .topbar h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
  .content{padding:15px}
  .tb-search{min-width:0;flex:1;max-width:none}
}
@media(max-width:760px){
  .grid{grid-template-columns:1fr!important}
  .grid>*{min-width:0}
  /* many-column tables: size columns to their content (long text wraps at its own max-width),
     and scroll horizontally only when the total genuinely exceeds the screen */
  .content .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .content .tbl-wrap table{width:max-content;min-width:100%}
  .tb-btn{padding:9px 11px}
  .btn{padding:10px 15px}
  .btn.sm{padding:8px 12px}
  .toolbar>.btn,.toolbar>.search,.toolbar>.sel,.toolbar>.inp{width:100%}
  .toolbar .search{min-width:0}
  .sec-head h2{font-size:17px}
  .kpi .kv{font-size:22px}
  .modal{width:100%!important;max-width:100%!important;border-radius:14px 14px 0 0!important}
  .tb-search{display:none}
  .topbar .avatar{display:none}
  .topbar h1{max-width:52vw}
}
@media(max-width:520px){
  .card.pad{padding:14px}
  .content{padding:12px}
  /* Batch 167 — seven rungs instead of five: shrink the dots too, and let the long
     «استلام بالمخزن» label wrap inside its column instead of pushing the row wider. */
  .steps .sl{font-size:12px;line-height:1.2;word-break:break-word;padding-inline:1px}
  .steps .step .sc{width:24px;height:24px;font-size:12px;margin-bottom:4px}
  .steps .step:not(:last-child)::after{top:11px;height:2px}
  .steps .step.cur .sc{box-shadow:0 0 0 3px rgba(200,56,93,.18)}
  /* topbar must never clip the profile/logout chip — the title yields first, the user chip is pinned */
  .topbar{gap:6px}
  .topbar h1{max-width:34vw;flex-shrink:1;min-width:0}
  .tb-user{flex-shrink:0}
  .tb-btn{padding:8px 9px}
  .nb{max-width:34px;overflow:hidden}
}
/* Batch 92 — the profile chip is pinned across all mobile widths so it can't be pushed off-screen */
@media(max-width:900px){ .tb-user{flex-shrink:0} .spacer{min-width:0} }
@media print{.sidebar,.topbar,.no-print,.app-copyright{display:none!important}.content{padding:0}.app{display:block}.card,.kpi,.tbl-wrap{box-shadow:none}}
/* ============================ A4 manifest print (Batch 68) ============================ */
@page{size:A4 portrait;margin:10mm}
@media print{
  .mfprint{max-width:100%!important;width:100%!important;border:0!important;padding:0!important}
  .mfprint table{width:100%;font-size:13.5px}
  .mfprint th{font-size:11.5px;padding:9px 10px}
  .mfprint td{padding:9px 10px;font-size:13px}
  .mfprint .mono{font-size:12.5px}
  .mfprint thead{display:table-header-group}          /* header repeats on every A4 page */
  .mfprint tr{page-break-inside:avoid}
}

/* ============================ Dark mode ============================ */
[data-theme=dark]{
  --bg:#140d10;--panel:#1e1519;--panel-2:#281c21;
  --ink:#f2e9ec;--muted:#a9959c;--line:#372a30;--line-2:#4e3c44;
  --brand:#c62c50;--brand-2:#a52240;--brand-3:#3a0e1a;
  --accent:#e0537a;--accent-2:#c8385d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 6px rgba(0,0,0,.3);
  --shadow-md:0 2px 6px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(198,44,80,.3);
}
[data-theme=dark] body{background:var(--bg);color:var(--ink)}
[data-theme=dark] .sidebar{background:linear-gradient(178deg,#20060e,#33101c)}
[data-theme=dark] .topbar{background:rgba(30,21,25,.86);border-bottom-color:var(--line)}
[data-theme=dark] .card,[data-theme=dark] .kpi,[data-theme=dark] .tbl-wrap{background:var(--panel);border-color:var(--line)}
[data-theme=dark] th{background:var(--panel-2);color:var(--muted);border-bottom-color:var(--line)}
[data-theme=dark] td{border-bottom-color:var(--line)}
[data-theme=dark] tbody tr:hover{background:#2a1d23}
[data-theme=dark] .nav a.active{background:#4a3039;color:#fff}
[data-theme=dark] .inp,[data-theme=dark] .sel{background:var(--panel-2);border-color:var(--line-2);color:var(--ink)}
[data-theme=dark] .tb-btn,[data-theme=dark] .hamburger{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .btn{background:var(--panel-2);color:var(--ink)}
[data-theme=dark] .btn.ghost{background:var(--panel);border-color:var(--line-2);color:var(--ink)}
[data-theme=dark] .btn.danger{background:#3b181f;color:#f2a5b3}
[data-theme=dark] .btn.success{background:#12301f;color:#7fd8a5}
[data-theme=dark] .chip{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .field label{color:#cdbcc3}
[data-theme=dark] .tabs{background:#241a1e;border-color:var(--line)}
[data-theme=dark] .tab:hover{background:#332027;border-color:var(--line)}
[data-theme=dark] .tab.active{background:var(--brand);color:#fff}
[data-theme=dark] .stat-row{border-bottom-color:var(--line)}
[data-theme=dark] .modal{background:var(--panel);color:var(--ink)}
[data-theme=dark] .modal .mf,[data-theme=dark] .modal .mh{background:var(--panel-2);border-color:var(--line)}
[data-theme=dark] .empty{color:var(--muted)}
[data-theme=dark] .flash.ok{background:#0f2c1c;border-color:#1d5237;color:#8fe0b2}
[data-theme=dark] .flash.err{background:#361219;border-color:#5e2230;color:#f2a5b3}
[data-theme=dark] .flash.warn{background:#332107;border-color:#5c3d0b;color:#fcd34d}
[data-theme=dark] .help-line{background:#101d33;border-color:#23406e;color:#a9c6f2}
[data-theme=dark] .login-form{background:var(--panel)}
[data-theme=dark] .demo-acct{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .demo-acct:hover{background:#332027}
[data-theme=dark] .sig-pad{background:#241a1e}

/* ---- compact topbar user chip (Batch 46) ---- */
.tb-user{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 4px;max-height:34px}
[dir=rtl] .tb-user{padding:3px 4px 3px 10px}
.tb-user .avatar{width:26px;height:26px;font-size:12px;flex:none}
.tbu-t{line-height:1.15;min-width:0}
.tbu-n{font-weight:800;font-size:12px;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.tbu-r{font-size:12px;color:var(--muted);white-space:nowrap}
.tbu-out{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--panel-2);color:var(--bad);font-weight:800;font-size:13px;transition:background .15s}
.tbu-out:hover{background:#fee2e2}
@media (max-width:760px){ .tbu-t{display:none} }

/* ============================ Batch 72 — premium polish ============================ */
/* soft page-enter (pure CSS, ends visible; disabled under prefers-reduced-motion above) */
.content{animation:pageIn .34s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* KPI cards: bolder number, rounded accent bar, faint brand wash in the corner */
.kpi .kv{font-size:28px}
.kpi::before{height:4px}
.kpi::after{content:"";position:absolute;inset-inline-end:-34px;top:-34px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%);pointer-events:none}
/* interactive cards lift on hover (static cards unaffected) */
.card{transition:box-shadow .18s,transform .18s}
a.card:hover,.card.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* headings a touch larger & tighter; refined table headers & pills */
.sec-head h2{font-size:21px;letter-spacing:-.02em}
th{letter-spacing:.05em}
.pill{box-shadow:0 1px 2px rgba(71,12,30,.06)}
.btn.primary:active,.btn.accent:active{transform:translateY(1px) scale(.99)}
/* refined empty state */
.empty .ei{filter:saturate(.9)}

/* ===== Batch 76 — courier field cockpit (route / delivery run) ===== */
.route-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
.rkpi{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.rkpi-c{flex:1}
.rkpi-sep{border-inline-start:1px solid var(--line);padding-inline-start:14px}
.rkpi-l{font-size:12px;color:var(--muted);font-weight:700}
.rkpi-v{font-size:24px;font-weight:900;line-height:1.1;margin-top:2px}
.rstop{padding:14px;margin-bottom:12px;border-inline-start:5px solid var(--brand)}
.rstop-head{display:flex;align-items:center;gap:10px}
.rnum{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.rstop-id{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rtrk{font-weight:900;font-size:15px}
.rmove{display:flex;flex-direction:column;gap:3px}
.rmove .btn{padding:1px 8px;line-height:1.3}
.rname{margin-top:9px;font-weight:900;font-size:16px}
.raddr{margin-top:3px;font-size:14px;opacity:.82;line-height:1.5;overflow-wrap:break-word}
.rcod{margin-top:11px;display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);border-radius:12px;padding:8px 13px}
.rcod-l{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.04em}
.rcod-v{font-size:20px;font-weight:900}
.rcontact,.ract{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.rbtn{flex:1 1 92px;min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;font-weight:800;font-size:15px;text-decoration:none;border:1.5px solid transparent;padding:0 10px;transition:transform .08s ease,filter .15s ease;white-space:nowrap}
.rbtn:active{transform:scale(.97)}
.rbtn:hover{filter:brightness(.97)}
.rbtn-nav{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.rbtn-call{background:#f1f5f9;color:#0f172a;border-color:#cbd5e1}
.rbtn-wa{background:#dcfce7;color:#166534;border-color:#86efac}
.rbtn-go{background:var(--brand);color:#fff}
.rbtn-part{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.rbtn-fail{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.route-map{overflow:hidden;position:sticky;top:74px}
.route-map #map{height:520px;background:var(--panel-2)}
[data-theme=dark] .rbtn-call{background:#20303f;color:#e2e8f0;border-color:#334155}
[data-theme=dark] .rbtn-nav{background:#1e1b4b;color:#c7d2fe;border-color:#3730a3}
[data-theme=dark] .rbtn-wa{background:#14321f;color:#86efac;border-color:#166534}
[data-theme=dark] .rbtn-part{background:#3a2410;color:#fed7aa;border-color:#9a3412}
[data-theme=dark] .rbtn-fail{background:#3a1414;color:#fecaca;border-color:#991b1b}
@media(max-width:820px){
  .route-wrap{grid-template-columns:1fr}
  .route-map{position:static;order:2}
  .route-map #map{height:300px}
  .rstop{padding:16px}
  .rname{font-size:17px}
  .raddr{font-size:15px}
  .rcod-v{font-size:22px}
  .rbtn{min-height:52px;font-size:16px}
}

/* ===== Batch 77 — courier landing (field hero + compact KPIs) ===== */
.cour-hero{margin-bottom:12px;background:linear-gradient(150deg,#ffffff,#fdf2f4)}
[data-theme=dark] .cour-hero{background:linear-gradient(150deg,var(--panel),#2a1116)}
.cour-greet{font-size:20px;font-weight:900}
.cour-sub{color:var(--muted);font-size:13px;margin-top:2px}
.cour-figs{display:flex;gap:14px;margin-top:12px}
.cour-fig{flex:1;min-width:0}
.cour-fig+.cour-fig{border-inline-start:1px solid var(--line);padding-inline-start:14px}
.cour-fl{font-size:12px;color:var(--muted);font-weight:700}
.cour-fv{font-size:26px;font-weight:900;line-height:1.1;margin-top:2px}
.cour-start{margin-top:14px;min-height:54px;font-size:17px}
.cour-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.ckpi{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:inherit}
.ck-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.ck-v{font-size:20px;font-weight:900;line-height:1.1}
.ck-l{font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:820px){ .cour-greet{font-size:19px} .cour-fv{font-size:23px} .cour-start{min-height:56px} }

/* ===== Batch 78 — client (merchant) landing extras ===== */
.cour-actions{display:flex;gap:10px;margin-top:14px}
.cour-actions .cour-start{margin-top:0}
.cour-kpis-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){ .cour-kpis-4{grid-template-columns:repeat(2,1fr)} .cour-actions{flex-wrap:wrap} }

/* ===== Batch 79 — merchant new-shipment form: guided steps + sticky submit ===== */
.form-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--brand);margin-bottom:12px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.fs-n{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex:none}
.sum-receipt{border:1px dashed var(--line)}
.sum-head{font-weight:800;font-size:13px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.sum-collect{font-size:15px}
.sum-collect .sv{font-size:21px!important;font-weight:900}
.form-submit-bar{position:sticky;bottom:0;z-index:15;margin-top:16px;padding:12px 0;background:linear-gradient(to top,var(--bg) 62%,transparent)}
.ord-submit{width:100%;justify-content:center;min-height:52px;font-size:16px;font-weight:800;box-shadow:0 6px 20px rgba(139,30,58,.28)}
@media(max-width:820px){ .ord-submit{min-height:56px;font-size:17px} }

/* ===== Batch 80 — shipments list: mobile card view (table stays on desktop) ===== */
.orders-cards{display:flex;flex-direction:column;gap:10px}
.ocard{background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-sm)}
.oc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.oc-trk{font-weight:900;font-size:14.5px}
.oc-rec{margin-top:8px;font-weight:800;font-size:15px;overflow-wrap:break-word}
.oc-ph{font-weight:400;color:var(--muted);font-size:12px}
.oc-meta{margin-top:3px;font-size:12.5px;color:var(--muted);overflow-wrap:break-word;line-height:1.5}
.oc-fig{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--panel-2);border-radius:11px;padding:9px 11px}
.oc-fig>div{display:flex;flex-direction:column;min-width:0}
.oc-fig span{font-size:12px;color:var(--muted);font-weight:700}
.oc-fig b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-fig b.brand{color:var(--brand)}
.oc-act{margin-top:11px;display:flex;gap:8px}
.oc-act .btn{flex:1;justify-content:center;min-height:42px}
@media(max-width:760px){ .orders-table{display:none} }
@media(min-width:761px){ .orders-cards{display:none} }

/* ===== Batch 81 — order detail: actions moved to a clean toolbar ===== */
.order-actions{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.order-actions form{display:inline-flex;margin:0}
@media(max-width:760px){
  .order-actions{gap:8px}
  .order-actions>.btn,.order-actions>form{flex:1 1 140px}
  .order-actions>form>.btn{width:100%}
  .order-actions .btn{justify-content:center;min-height:48px;font-size:14px}
  .order-actions>.btn.primary,.order-actions>form:first-child>.btn.primary{flex-basis:100%}
}

/* ===== Batch 82 — status cards swipe row on mobile + detail share row ===== */
.ord-status-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:16px}
.ord-status-cards>.kpi{padding:11px 12px;text-decoration:none}
@media(max-width:900px){
  .ord-status-cards{display:flex;overflow-x:auto;gap:9px;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .ord-status-cards>.kpi{flex:0 0 auto;min-width:118px;scroll-snap-align:start}
}

/* ===== Batch 85 — warehouse + manifests mobile card views ===== */
.whcard,.mancard{background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-sm);margin-bottom:10px}
.mancard{display:block;text-decoration:none;color:inherit}
.wh-top,.man-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wh-nm{font-weight:800;font-size:15px;overflow-wrap:break-word}
.wh-sku,.man-code{font-size:12.5px;color:var(--muted);font-weight:800;margin-top:2px}
.man-code{color:var(--brand)}
.wh-meta,.man-meta{margin-top:7px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.man-type{margin-top:7px;font-weight:800;font-size:14.5px}
.man-count{margin-top:8px;font-weight:800;font-size:14px}
.wh-fig{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--panel-2);border-radius:11px;padding:9px 11px}
.wh-fig>div{display:flex;flex-direction:column;min-width:0}
.wh-fig span{font-size:12px;color:var(--muted);font-weight:700}
.wh-fig b{font-size:15px;font-weight:900}.wh-fig b small{font-weight:500;color:var(--muted);font-size:12px}
.wh-batches{margin-top:9px;border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:5px}
.wh-b{display:flex;justify-content:space-between;gap:8px;font-size:12px;align-items:center}
.wh-act{margin-top:11px;display:flex;gap:8px}
.wh-act .btn{flex:1;justify-content:center;min-height:42px}
@media(max-width:760px){ .wh-table,.man-table{display:none} }
@media(min-width:761px){ .wh-cards,.man-cards{display:none} }

/* ===== Batch 86 — finance mobile cards (vouchers + statements) ===== */
.v-cards,.stmt-cards{display:flex;flex-direction:column;gap:10px}
.vcard,.scard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 13px;box-shadow:var(--shadow-sm)}
.vcard{border-inline-start:4px solid var(--brand)}
.v-top,.s-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.v-code{font-weight:900;font-size:14px}
.v-amt{font-weight:900;font-size:16px;color:var(--brand)}
.v-line{margin-top:7px;font-weight:700;font-size:13.5px;overflow-wrap:break-word}
.v-meta{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.5;overflow-wrap:break-word}
.v-stat{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:800}
.vs-ok{color:#16a34a}.vs-no{color:var(--muted)}.vs-x{color:#b91c1c}
/* statement cards */
.s-ref{font-weight:800;font-size:13px}
.s-date{font-size:12px;color:var(--muted)}
.s-desc{margin-top:6px;font-size:13px;overflow-wrap:break-word}
.s-fig{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.s-amt{font-weight:900;font-size:15px}
.s-bal{font-size:12px;color:var(--muted)}.s-bal b{color:var(--ink);font-size:13.5px}
.stmt-open,.stmt-close{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-radius:12px;font-weight:800;background:var(--panel-2);border:1px solid var(--line)}
.stmt-close{background:#fdf2f4}.stmt-close b{color:var(--brand);font-size:16px}
[data-theme=dark] .stmt-close{background:#2a1116}
@media(max-width:760px){ .v-table,.stmt-table{display:none} }
@media(min-width:761px){ .v-cards,.stmt-cards{display:none} }
/* print: always use the tables, never the cards (covers all card views) */
@media print{
  .orders-cards,.wh-cards,.man-cards,.v-cards,.stmt-cards,.orders-status-cards{display:none!important}
  .orders-table,.wh-table,.man-table,.v-table,.stmt-table{display:block!important}
}

/* ===== Batch 87 — generic mobile list cards (couriers/commissions/aging/trial-balance) ===== */
.m-cards{display:flex;flex-direction:column;gap:10px}
.lcard{background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:14px;padding:12px 13px;box-shadow:var(--shadow-sm)}
.lc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.lc-sub{font-size:12px;color:var(--muted)}
.lc-fig4,.lc-fig3,.lc-fig2,.lc-money{margin-top:10px;display:grid;gap:8px;background:var(--panel-2);border-radius:11px;padding:9px 11px}
.lc-fig4{grid-template-columns:repeat(4,1fr)}.lc-fig3{grid-template-columns:repeat(3,1fr)}
.lc-fig2,.lc-money{grid-template-columns:repeat(2,1fr)}
.lc-fig4>div,.lc-fig3>div,.lc-fig2>div,.lc-money>div{display:flex;flex-direction:column;min-width:0}
.lc-fig4 span,.lc-fig3 span,.lc-fig2 span,.lc-money span{font-size:12px;color:var(--muted);font-weight:700}
.lc-fig4 b,.lc-fig3 b,.lc-fig2 b,.lc-money b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-buckets{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.lc-buckets span{background:var(--panel-2);border-radius:8px;padding:4px 8px;font-weight:700}
.lc-act{margin-top:10px;display:flex;gap:8px}
.lc-act .btn{flex:1;justify-content:center;min-height:42px}
@media(max-width:760px){ .m-table{display:none} }
@media(min-width:761px){ .m-cards{display:none} }
@media print{ .m-cards{display:none!important} .m-table{display:block!important} }

/* ===== Batch 88 — users + tickets list cards (meta line) ===== */
.lc-meta{margin-top:7px;font-size:12.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center;line-height:1.6;overflow-wrap:break-word}
.lc-meta span[dir=ltr]{color:var(--muted)}

/* ===== Batch 89 — responsive editable tables (reflow to cards on mobile; single inputs) ===== */
@media screen and (max-width:760px){
  .rtable thead{display:none}
  .rtable, .rtable tbody, .rtable tr, .rtable td{display:block;width:auto}
  .rtable tr{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow-sm);overflow:hidden}
  .rtable td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 13px;border:0;border-bottom:1px solid var(--line);text-align:start;max-width:none;white-space:normal}
  .rtable td:last-child{border-bottom:0}
  .rtable td:before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:12.5px;flex:0 0 auto}
  .rtable td:first-child{background:var(--panel-2);font-weight:800;justify-content:flex-start}
  .rtable td:first-child:before{content:''}
  .rtable td .inp{max-width:150px!important;text-align:end}
}

/* ============================ Batch 92 — notifications + card address ============================ */
.oc-addr{margin-top:4px;font-size:12px;color:var(--muted);overflow-wrap:break-word;line-height:1.45}
.notif-list{display:flex;flex-direction:column;gap:10px}
.ncard{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:13px;padding:12px 14px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,transform .12s}
.ncard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.ncard.is-read{border-inline-start-color:var(--line);opacity:.62;box-shadow:none}
.nc-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.nc-body{flex:1;min-width:0}
.nc-title{font-weight:800;font-size:14px;display:flex;align-items:center;gap:7px}
.nc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.nc-desc{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);overflow-wrap:break-word;line-height:1.45}
.nc-go{color:var(--brand);font-weight:800;font-size:18px;flex:none}

/* ===== Batch 148 — Android-proof selects: native select PAINTING is disabled (appearance:none),
   so every device renders the closed select through the same standard CSS path — fixed 44px box,
   line-height-centered text, our own chevron. This is the Bootstrap .form-select technique; it is
   immune to the Android-specific text placement that survived batches 145–147 on phones. ===== */
select.sel{
  -webkit-appearance:none;appearance:none;
  height:44px;padding-top:0;padding-bottom:0;line-height:41px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a7078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:12px 8px;
}
[dir=rtl] select.sel{background-position:left 13px center;padding-left:34px;padding-right:12px}
[dir=ltr] select.sel{background-position:right 13px center;padding-right:34px;padding-left:12px}
[data-theme=dark] select.sel{
  background-color:var(--panel-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9959c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== Batch 149 — mobile compositor hygiene: the remaining phone-only glitch is a FLASH
   (too fast to screenshot) — the signature of Android GPU-compositing artifacts, not layout.
   The two classic triggers, disabled on phones only (desktop keeps the premium effects):
   1. the sticky topbar's backdrop-filter blur — notorious for ghosted/misplaced text repaints
      in the content scrolling underneath it on Android;
   2. the whole-page enter animation (.content pageIn) — promotes the entire content to a GPU
      layer for ~340ms on every load, and the de-promotion snap can flash misrendered fields. */
@media (max-width:900px){
  .topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--panel)!important}
  .content{animation:none!important}
}

/* ============================================================================================
   DESIGN SYSTEM v3 — the scale layer                                    (Batch 176)
   ============================================================================================
   What was wrong with v2. It was competent, not premium, and for five specific reasons:

     1. NO SCALE. Fourteen ad-hoc font sizes (10.5, 11, 11.5, 12, 12.5, 12.8, 13, 13.5, 14.5,
        15, 17, 20, 26, 28) and ~20 hand-picked paddings (9.5, 11.5, 12.8 …). Nothing shared a
        rhythm, so nothing aligned — the single clearest tell of "built by a developer".
     2. FLAT ELEVATION. One shadow token on cards, KPIs, tables and popovers alike. When every
        surface floats equally, nothing reads as important.
     3. THE BRAND DID ALL THE WORK. A maroon gradient on primary buttons, KPI bars, active tabs,
        step dots and card borders at once. Emphasis everywhere is emphasis nowhere.
     4. NUMBERS WEREN'T ENGINEERED. A finance system rendering money in proportional numerals:
        digits of different widths, so columns of figures never optically aligned.
     5. THIN SECTION RHYTHM. 18px under a section head and a uniform 16px gap — the page never
        breathed at the top of its hierarchy, which is what makes whitespace read as expensive.

   What this layer does NOT touch, deliberately: the mobile drawer, the RTL logical properties,
   the print/A4 rules, and the Android hardening of batches 145–149 (select painting, compositor
   flashes, filter-bar overlap). Those encode real production failures. A rewrite would have
   silently thrown them away; this rebuilds the visual system on top of them instead.
   ============================================================================================ */
:root{
  /* type scale — 8 steps, ~1.22 ratio, no value outside it */
  --fs-2xs:12px; --fs-xs:12px; --fs-sm:12.5px;   /* 282 (OYA-P2-19): 12px floor */ --fs-md:13.5px;
  --fs-lg:15px;    --fs-xl:18px;   --fs-2xl:22px;  --fs-3xl:30px;
  /* spacing scale — dashboard density (8→48) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  /* radius scale */
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-pill:999px;
  /* elevation — three levels with intent, not one shadow for everything */
  --e1:0 1px 2px rgba(71,12,30,.05), 0 2px 8px rgba(71,12,30,.045);          /* resting surface */
  --e2:0 2px 6px rgba(71,12,30,.07), 0 12px 28px rgba(71,12,30,.09);         /* lifted / hovered */
  --e3:0 8px 20px rgba(71,12,30,.12), 0 28px 60px rgba(71,12,30,.16);        /* overlay          */
}
[data-theme=dark]{
  --e1:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --e2:0 2px 6px rgba(0,0,0,.5),  0 12px 28px rgba(0,0,0,.45);
  --e3:0 8px 20px rgba(0,0,0,.55), 0 28px 60px rgba(0,0,0,.5);
}

/* ---- 4) numbers first: this is a finance system ------------------------------------------
   Tabular figures make every digit the same width, so a column of money aligns on its own
   without per-module alignment hacks. Applied to every element that can hold a figure. */
.mono,.kv,.num,.sv,.rcod-v,.rkpi-v,.cour-fv,.ck-v,.v-amt,.s-amt,.man-count,
td,th,.oc-fig b,.wh-fig b,.lc-fig4 b,.lc-fig3 b,.lc-fig2 b,.lc-money b,input.inp[type=number]{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
/* 214 — غشاء تحميل مركز التقارير: لون من الثيم فلا يومض أبيض في الوضع الليلي */
.rc-load{position:fixed;inset:0;background:rgba(250,247,248,.72);z-index:90;backdrop-filter:blur(1px)}
[data-theme=dark] .rc-load{background:rgba(18,12,15,.72)}
/* 214 — بطاقات الموبايل المولّدة لتقارير مركز التقارير */
.rc-card-line{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px}
.rc-card-line span{color:var(--muted)}
.rc-card-line b{font-variant-numeric:tabular-nums;unicode-bidi:plaintext;text-align:end}

/* money and counts read right-aligned in both directions — a number column is LTR by nature.
   208.1 — PHYSICAL right, not logical end: digit-only cells carry unicode-bidi:plaintext (the
   negative-sign fix), which makes start/end resolve against the cell's OWN LTR content — so the
   Arabic header drifted to one edge and its numbers to the other. One physical side for both
   kills the ambiguity in RTL and matches the normal convention in LTR unchanged. */
td.num,th.num,.tbl-wrap td.money,.tbl-wrap th.money{text-align:right;white-space:nowrap}
/* 232 — رؤوس الجداول المُرحّلة: خلية mono كاملة (أكواد/أرقام) يحل اتجاه سطرها من محتواها
   (plaintext — إصلاح السالب 177)، فسطر أرقام يصير LTR وتنقلب start/end من صف لصف بينما
   العنوان العربي فوقها ثابت — فيبدو الرأس «مرحّلاً». جانب فيزيائي واحد للخلية يطابق العنوان
   في الاتجاهين، والأنماط السطرية بعد كنس 232 (end→right) تتفق معه لا تنقضه. */
[dir=rtl] td.mono{text-align:right}
[dir=ltr] td.mono{text-align:left}

/* ---- 1) the scale, applied ---------------------------------------------------------------- */
body{font-size:var(--fs-md);line-height:1.6}
.sec-head{margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);gap:var(--sp-3)}
.sec-head h2{font-size:var(--fs-2xl);font-weight:800;line-height:1.2;letter-spacing:-.02em}
.sec-head .sh-sub{font-size:var(--fs-sm);line-height:1.5}
.card.pad{padding:var(--sp-5)}
.card .ct{font-size:var(--fs-lg);line-height:1.3}
.card .csub{font-size:var(--fs-sm);margin-bottom:var(--sp-3)}
.field{margin-bottom:var(--sp-4)}
.field label{font-size:var(--fs-sm);margin-bottom:var(--sp-2);letter-spacing:.01em}
.grid{gap:var(--sp-4)}
.toolbar{gap:var(--sp-3);margin-bottom:var(--sp-4)}
.help-line{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);margin-bottom:var(--sp-4);border-radius:var(--r-md)}
.flash{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);border-radius:var(--r-md);margin-bottom:var(--sp-4)}

/* ---- 2) elevation with intent -------------------------------------------------------------- */
.card,.kpi,.tbl-wrap,.ocard,.whcard,.mancard,.vcard,.scard,.lcard,.ncard,.ckpi{box-shadow:var(--e1)}
.kpi:hover,a.card:hover,.card.lift:hover,.ncard:hover{box-shadow:var(--e2)}
.modal,.col-pop{box-shadow:var(--e3)}
.card{border-radius:var(--r-md)}

/* ---- 3) one loud thing per screen ----------------------------------------------------------
   The gradient is now reserved for the single primary action and the sidebar. Everything else
   that used to shout in brand-gradient becomes flat brand, so the eye has somewhere to land. */
.kpi::before{height:3px;background:var(--brand);opacity:1}
.kpi::after{display:none}                       /* the corner wash added noise, not depth */
.kpi{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md)}
.kpi .kl{font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em}
.kpi .kv{font-size:var(--fs-3xl);line-height:1.05;margin-top:var(--sp-2);letter-spacing:-.03em}
.kpi .kf{font-size:var(--fs-xs);margin-top:var(--sp-1)}
.tab.active{background:var(--brand);box-shadow:none}
.step.on .sc,.step.cur .sc,.rnum,.fs-n,.tl-dot{background:var(--brand)}
.step.cur .sc{background:var(--accent)}
.btn.primary{box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 26%,transparent)}
.btn.primary:hover{box-shadow:0 6px 20px color-mix(in srgb,var(--brand) 36%,transparent)}

/* ---- 5) tables that read like a ledger ----------------------------------------------------- */
.tbl-wrap{border-radius:var(--r-md)}
th{font-size:var(--fs-2xs);letter-spacing:.08em;padding:var(--sp-3) var(--sp-4);
   border-bottom:1.5px solid var(--line-2);background:var(--panel-2)}
td{font-size:var(--fs-md);padding:var(--sp-3) var(--sp-4);line-height:1.55}
/* long free text (addresses, notes) yields; atomic values never break — v2 rule kept, capped */
td{max-width:38ch}
td .mono,td .pill,td .chip,td .btn,td time{max-width:none}
tbody tr:hover{background:color-mix(in srgb,var(--brand) 4%,var(--panel))}
/* the sticky header earns a shadow only once the body scrolls under it */
.tbl-wrap thead th{box-shadow:0 1px 0 var(--line-2)}

/* ---- buttons & inputs on the scale ---------------------------------------------------------- */
.btn{padding:10px var(--sp-4);font-size:var(--fs-md);border-radius:var(--r-sm);min-height:40px}
.btn.sm{padding:7px var(--sp-3);font-size:var(--fs-sm);min-height:34px}
.inp,.sel{border-radius:var(--r-sm);font-size:var(--fs-md)}
.chip{border-radius:var(--r-sm);font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-3)}
.pill{font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-3)}

/* ---- an empty state that looks intentional --------------------------------------------------- */
.empty{padding:var(--sp-7) var(--sp-5);font-size:var(--fs-md);line-height:1.7}
.empty .ei{font-size:44px;margin-bottom:var(--sp-3);opacity:.55;filter:none}

/* ---- touch: nothing interactive under 44px on a phone ----------------------------------------- */
@media(max-width:900px){
  .btn,.tb-btn,.tab,.demo-acct{min-height:44px}
  .btn.sm{min-height:40px}
  .nav a{padding:10px 11px}                     /* sidebar links were 5.5px tall targets */
  .sec-head{margin-bottom:var(--sp-4);padding-bottom:var(--sp-2)}
  .card.pad{padding:var(--sp-4)}
  .kpi{padding:var(--sp-4)}
  .kpi .kv{font-size:var(--fs-2xl)}
  td{max-width:26ch}
}

/* ---- touch audit fix: measured at 375px, these four were the only sub-44px targets ----------
   The logout chip and the hamburger keep their compact VISUAL size — a 44px pill in the topbar
   would dominate it — and gain the missing area through a transparent ::after, which is how you
   satisfy the touch minimum without redesigning a dense header. */
@media(max-width:900px){
  .hamburger{width:44px;height:44px}
  .btn.sm{min-height:44px}
  .tbu-out{position:relative}
  .tbu-out::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                  width:44px;height:44px;border-radius:50%}
}

/* ---- bug found while rendering v3: in dark mode the select's chevron TILED across the whole
   control (a zig-zag band instead of one caret). The dark override re-declared background-image
   without re-declaring repeat/size, and the shorthand reset in that cascade dropped them. It has
   been there since the dark theme shipped; restating both longhands fixes it. ---- */
[data-theme=dark] select.sel{background-repeat:no-repeat;background-size:12px 8px}

/* ============================================================================================
   Batch 177 — signed numbers render correctly in RTL, everywhere, with one rule.
   ============================================================================================
   The defect: an Arabic (RTL) table cell holding "-10,400.50" has no strong-direction character,
   so the bidi algorithm resolves the cell RTL and paints the minus on the WRONG side: 10,400.50-.
   In a finance system that is not cosmetic — it reverses the sign the eye reads.
   The fix: unicode-bidi:plaintext makes each such element resolve its direction from its own
   content; content that is only digits/punctuation falls back to LTR (minus on the left), while
   an element that begins with Arabic stays RTL exactly as before. Verified side-by-side in a
   rendered browser on negatives, positives, Arabic labels, dates and tracking codes. */
.mono,td.num,th.num,.v-amt,.s-amt,.rcod-v,.rkpi-v,.cour-fv,.ck-v,
.oc-fig b,.wh-fig b,.lc-fig4 b,.lc-fig3 b,.lc-fig2 b,.lc-money b{unicode-bidi:plaintext}
/* ---- 190.1 — .sv and td .sv REMOVED from the plaintext list, same disease as .kv (179.1):
   .sv is very often the FULL CELL (td.sv) or a stat-row value with text-align:start. A negative
   money value starts with the LRM that money() emits (177), i.e. a strong-LTR first character —
   plaintext then resolves the whole cell LTR and the value jumps to the LEFT edge of an RTL
   table («‎-50 ج.م» sitting alone at the far left of the الصافي column while every other row
   hugs the right). The LRM at the source already guarantees the minus sits on the correct side
   of the digits, so plaintext adds nothing for .sv except the misalignment. Pixel-verified. */
/* ---- 179.1 — .kv was REMOVED from the plaintext list above. It is the one member that is a
   full-width BLOCK with no text-align: give a digits-only value ("49", "0") plaintext and the
   whole paragraph resolves LTR, so the number jumps to the LEFT edge of the KPI card — exactly
   where the icon sits (.kico is at inset-inline-end) — and hides behind it. The dashboard cards
   showed "49" swallowed by the truck icon. Negative amounts in .kv stay correct without
   plaintext because money()/num() already prefix negatives with an LRM at the source (177),
   which was pixel-verified. The other members are shrink-wrapped spans or cells that carry
   their own text-align, so they keep plaintext safely. ---- */
/* and a hard guarantee for the same cards: the icon zone (.kico = 40px + 15px inset at
   inline-end) is reserved, so even a 7-digit money value can never run underneath it */
.kpi .kv{padding-inline-end:58px}

/* ============================================================================================
   Batch 179 UI — the three OUTER surfaces: login, merchant portal, courier phone screens.
   Everything below is additive; no existing selector is redefined destructively.
   ============================================================================================ */

/* ---- app tiles (تطبيقي): the launcher buttons a courier taps 50 times a day.
   Class-driven now (was inline styles): real pressed feedback, a focus ring for keyboards,
   and a guaranteed ≥64px touch target. The arrow is drawn by CSS so it points FORWARD in
   both directions (‹ in RTL, › in LTR) instead of a hardcoded glyph. ---- */
.tile{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r,14px);
  box-shadow:var(--e1,0 1px 2px rgba(15,18,25,.05));text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tile:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));box-shadow:var(--e2,0 6px 18px rgba(15,18,25,.08))}
.tile:active{transform:scale(.98)}
.tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tile-ico{font-size:28px;width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:var(--panel-2)}
.tile-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tile-tx b{font-size:var(--fs-md,15px)}
.tile-sub{font-size:var(--fs-xs,12px);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-arrow{color:var(--brand);font-weight:800;font-size:20px;flex:none;line-height:1}
.tile-arrow::before{content:"‹"}
[dir=ltr] .tile-arrow::before{content:"›"}

/* ---- login: phones lost the whole brand story (the hero is display:none ≤860px and the
   merchant landed on a bare white form). A compact gradient strip now carries the identity.
   Also: a one-time CSS-only entrance for the form (ends visible — never depends on JS). ---- */
.login-mhead{display:none}
@media(max-width:860px){
  .login-mhead{display:flex;align-items:center;gap:12px;padding:18px 20px calc(18px + 6px);
    background:linear-gradient(135deg,var(--brand-3),var(--brand) 60%,var(--brand-2));color:#fff}
  .login-mhead .lm-brand img{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
  .lm-t{font-weight:900;font-size:17px;line-height:1.2}
  .lm-s{font-size:12px;opacity:.85}
  .login-wrap{flex-direction:column}
  .login-form{padding:28px 22px calc(28px + env(safe-area-inset-bottom,0px))}
}
@keyframes loginIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.login-form{animation:loginIn .35s ease both}
@media(prefers-reduced-motion:reduce){.login-form{animation:none}}
.login-form .inp{min-height:44px}
.login-form .btn{min-height:46px}
/* the hero gets a second, lower glow so the gradient reads layered, not flat */
.login-hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);bottom:-160px;inset-inline-start:-120px}

/* ---- portal & PWA niceties: content clears the iPhone home-indicator when installed,
   and the install/push cards' buttons meet the 44px touch rule. ---- */
@media(display-mode:standalone){.content{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
.oya-install,.oya-pushbtn{min-height:44px}

/* ---- Batch 179.2 — AWB thermal print density. The 10×15cm page size itself is declared in the
   two AWB print views (order_view / bulk) so ONLY label printing gets that size; these rules
   just make the label content fit one 10×15 sheet. !important is needed to beat the label's
   inline sizes at print time only. ---- */
@media print{
  .awb{width:96mm;border-width:1px;font-size:11px}
  .awb .ah{padding:3px 8px}
  .awb .ah img{height:10mm!important}
  .awb .ah svg{width:14mm;height:14mm}
  .awb .acell{padding:3px 6px}
  .awb .lab{font-size:7.5px}
  .awb .val{font-size:11px!important}
  .awb .mono{font-size:11.5px!important}
  .awb td{font-size:10px!important}
  .awb div[style*="text-align:center"] svg{height:9mm}
  .awb div[style*="text-align:center"]{padding:4px 0 1px!important}
  .awb .arow:last-child .val{font-size:15px!important}
}

/* ============================================================================================
   Batch 192 — dark-mode legibility for the TINTED cards + light-mode button definition.
   ============================================================================================
   (أ) Dozens of info cards across the modules carry INLINE light tints (#f0fdf4 mint, #fffbeb
   amber, #eff6ff blue…). In dark mode they stayed light while every text inside assumed a light
   theme — the «إيراد الشركة من هذا الكشف» card rendered muted-gray-on-mint, unreadable. Inline
   styles cannot be edited in one place, but author !important BEATS inline: remap every known
   tint (and its strong text colors) to a dark twin with AA-contrast text. One block, whole system.
   (ب) In LIGHT mode the default/ghost buttons were borderless near-white on white — no edge to
   see. Buttons now carry a visible border + a resting shadow; primary/accent stay the loud ones. */

/* --- (ب) light mode: every button has a visible edge at rest --- */
.btn{border-color:var(--line-2);box-shadow:0 1px 2px rgba(36,20,25,.07)}
.btn.primary,.btn.accent{border-color:transparent}
.btn.danger{border-color:#f2bfca}
.btn.success{border-color:#b9e4cb}
.btn.ghost:hover{background:#fdf7f9}
[data-theme=dark] .btn{border-color:var(--line-2);box-shadow:none}
[data-theme=dark] .btn.primary,[data-theme=dark] .btn.accent{border-color:transparent}
[data-theme=dark] .btn.danger{border-color:#5e2230}
[data-theme=dark] .btn.success{border-color:#1d5237}

/* --- (أ) dark mode: inline light tints → dark twins (bg + border), AA text --- */
[data-theme=dark] [style*="background:#f0fdf4"]{background:#102819!important;border-color:#1d5237!important}
[data-theme=dark] [style*="background:#dcfce7"]{background:#16341f!important;border-color:#1d5237!important;color:#86efac!important}
[data-theme=dark] [style*="background:#eafaf1"]{background:#102819!important;border-color:#1d5237!important}
[data-theme=dark] [style*="background:#fffbeb"]{background:#2c2009!important;border-color:#5c3d0b!important}
[data-theme=dark] [style*="background:#fef3c7"],[data-theme=dark] [style*="background:#fef9c3"]{background:#33250a!important;border-color:#6b4a0e!important;color:#fcd34d!important}
[data-theme=dark] [style*="background:#fff7ed"]{background:#2f1f0d!important;border-color:#6b4310!important}
[data-theme=dark] [style*="background:#fef2f2"]{background:#321418!important;border-color:#5e2230!important}
[data-theme=dark] [style*="background:#fee2e2"]{background:#3b181f!important;border-color:#6e2938!important;color:#f6b3bd!important}
[data-theme=dark] [style*="background:#fdf2f4"]{background:#33161d!important;border-color:#5e2230!important}
[data-theme=dark] [style*="background:#fdeef1"]{background:#33161d!important;border-color:#5e2230!important}
[data-theme=dark] [style*="background:#eff6ff"]{background:#14213a!important;border-color:#2b4a7d!important}
[data-theme=dark] [style*="background:#ede9fe"],[data-theme=dark] [style*="background:#f5f3ff"],[data-theme=dark] [style*="background:#faf5ff"]{background:#251b3a!important;border-color:#463170!important}
[data-theme=dark] [style*="background:#f9fafb"],[data-theme=dark] [style*="background:#f8fafc"],[data-theme=dark] [style*="background:#f7f7f7"],[data-theme=dark] [style*="background:#faf5f6"],[data-theme=dark] [style*="background:#f4efe9"],[data-theme=dark] [style*="background:#faf0f3"],[data-theme=dark] [style*="background:#fff7f8"]{background:var(--panel-2)!important;border-color:var(--line)!important}
/* strong text tints that assumed a light page */
[data-theme=dark] [style*="color:#166534"]{color:#7ee2a8!important}
[data-theme=dark] [style*="color:#15803d"]{color:#5fdc92!important}
[data-theme=dark] [style*="color:#16a34a"]{color:#4ade80!important}
[data-theme=dark] [style*="color:#b91c1c"],[data-theme=dark] [style*="color:#991b1b"]{color:#f89aa6!important}
[data-theme=dark] [style*="color:#92400e"],[data-theme=dark] [style*="color:#b45309"]{color:#f5b955!important}
[data-theme=dark] [style*="color:#0f766e"]{color:#5eead4!important}
[data-theme=dark] [style*="color:#1d4ed8"],[data-theme=dark] [style*="color:#1e40af"],[data-theme=dark] [style*="color:#274a86"]{color:#93c5fd!important}
[data-theme=dark] [style*="color:#d97706"]{color:#fbbf24!important}

/* 217 — الشحنة الملغاة تُعرف من بعيد: الصف/البطاقة باهتة والتتبع مشطوب، والشارة كما هي */
tr.row-cancel td{opacity:.55}
tr.row-cancel td:first-child a, .ocard.row-cancel .oc-trk{text-decoration:line-through}
.ocard.row-cancel{opacity:.6}
tr.row-cancel:hover td{opacity:.85}
/* 268 — الملغاة في الوضع الداكن: الرمادي الغامق (#475569) كان بيختفي على الخلفية الداكنة، والبهتان كان بيخلي الصف مش مقروء */
[data-theme=dark] .pill[data-st="إلغاء"]{background:rgba(148,163,184,.18)!important;color:#e2e8f0!important;border:1px solid rgba(148,163,184,.35)}
[data-theme=dark] .pill[data-st="إلغاء"] .dot,[data-theme=dark] .dot[data-st="إلغاء"]{background:#cbd5e1!important}
[data-theme=dark] .pill[data-st="استلام"],[data-theme=dark] .pill[data-st="طلب شحن"]{background:rgba(148,163,184,.16)!important;color:#cbd5e1!important}
[data-theme=dark] .pill[data-st="استلام"] .dot,[data-theme=dark] .dot[data-st="استلام"]{background:#94a3b8!important}
[data-theme=dark] .pill[data-st="مرتجع"],[data-theme=dark] .pill[data-st="تسليم المرتجع للراسل"]{background:rgba(244,63,94,.16)!important;color:#fda4af!important}
[data-theme=dark] tr.row-cancel td{opacity:.78;color:#cbd5e1;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(148,163,184,.05) 10px 20px)}
[data-theme=dark] tr.row-cancel:hover td{opacity:1}
[data-theme=dark] .ocard.row-cancel{opacity:.85;border-inline-start-color:#64748b;background:#1a1518}
/* 268 — شريط التحديد الجماعي في قائمة الشحنات: كان فاتح وزرار «إلغاء» أبيض على أبيض في الوضع الداكن */
.bulk-bar{background:#fdf2f4}
.bulk-fail{background:#fff}
[data-theme=dark] .bulk-bar{background:#2a141b;border-color:var(--brand)!important}
[data-theme=dark] .bulk-bar b{color:#f9a8bd!important}
[data-theme=dark] .bulk-fail{background:var(--panel);border-color:#7f1d1d!important}
[data-theme=dark] .bulk-clear{background:var(--panel-2);color:var(--ink);border-color:var(--line-2)}
/* 218 — اقتراحات دفتر المستلمين (خانة واحدة: اكتب أو اختر) */
.cust-drop{position:absolute;top:100%;inset-inline:0;z-index:60;margin-top:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.14);max-height:264px;overflow:auto}
.cust-drop .cd-it{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;cursor:pointer;font-size:12.5px;border-bottom:1px solid var(--line)}
.cust-drop .cd-it:last-child{border-bottom:0}
.cust-drop .cd-it:hover,.cust-drop .cd-it.on{background:var(--panel-2)}
.cust-drop .cd-ph{direction:ltr;font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);white-space:nowrap}

/* 219 — فلاتر متعددة الاختيار (كذا عميل/حالة معاً) */
details.fmulti{position:relative;display:inline-block}
details.fmulti>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none;white-space:nowrap}
details.fmulti>summary::-webkit-details-marker{display:none}
details.fmulti[data-on="1"]>summary{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.fm-n{background:var(--brand);color:#fff;border-radius:99px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;padding:0 5px}
.fm-all{color:var(--muted);font-size:12px;font-weight:600}
.fm-ar{font-size:12px;color:var(--muted)}
.fm-pop{position:absolute;top:calc(100% + 5px);inset-inline-start:0;z-index:70;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.16);min-width:230px;max-width:300px;padding:8px}
.fm-q{width:100%;margin-bottom:6px;font-size:12px;padding:7px 10px}
.fm-list{max-height:250px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.fm-it{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600}
.fm-it:hover{background:var(--panel-2)}
.fm-it.on{background:var(--panel-2);color:var(--brand)}
.fm-it input{accent-color:var(--brand);width:15px;height:15px;flex:0 0 auto}
.fm-foot{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:560px){.fm-pop{position:fixed;inset-inline:12px;top:auto;bottom:12px;max-width:none;max-height:60vh;overflow:auto}}
/* 268 — مسح بكاميرا الموبايل */
.camscan-ov{position:fixed;inset:0;z-index:9999;background:rgba(10,6,8,.72);display:flex;align-items:center;justify-content:center;padding:14px}
.camscan-box{background:var(--panel,#fff);color:var(--ink,#222);border-radius:16px;width:min(520px,100%);padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.camscan-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.camscan-last{flex:1;font-weight:800;color:var(--ok,#16a34a);font-family:monospace;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:center}
.camscan-view{min-height:220px;border-radius:12px;overflow:hidden;background:#000}
.camscan-view video,.camscan-video{width:100%;display:block;max-height:62vh;object-fit:cover}
.camscan-hint{font-size:12px;color:var(--muted,#888);margin-top:8px;text-align:center}
.camscan-x{min-height:40px}
/* 269.1 — تاريخ الإنتاج لكل صنف: الخانة الفاضية واضحة */
#siTbl .si-prd:invalid{border-color:var(--bad,#dc2626);background:#fef2f2}
[data-theme=dark] #siTbl .si-prd:invalid{background:#3a1418}
/* ============================ 270.3 — app shell: the sidebar always runs the full page height ============================
   The sidebar stays sticky (own scroll in .nav), and the shell paints the same rail colour down the whole
   page behind it, so the menu column never "ends" while a long page scrolls (also in full-page captures).
   Mobile drawer (<=900px) is untouched. */
@media(min-width:901px){
  .sidebar{height:100vh;height:100dvh;align-self:flex-start}
  .nav{overscroll-behavior:contain}
  .app{background-image:linear-gradient(var(--brand-2),var(--brand-2));background-repeat:no-repeat;background-size:256px 100%}
  [dir=rtl] .app{background-position:right top}
  [dir=ltr] .app{background-position:left top}
  [data-theme=dark] .app{background-image:linear-gradient(#33101c,#33101c)}
  html.sb-collapsed .app{background-image:none}
}
/* ============================ 270.3 — manifest column chooser (all instances) — theme tokens, dark-safe ============================ */
.mf-cols{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 18px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink)}
.mf-cols .mf-cols-t{color:var(--muted);font-weight:800;margin-inline-end:4px}
.mf-cols>label{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--ink);font-weight:700;cursor:pointer;white-space:nowrap;user-select:none;transition:border-color .15s,background .15s}
.mf-cols>label:hover{border-color:var(--brand)}
.mf-cols>label:has(input:checked){background:color-mix(in srgb,var(--brand) 10%,var(--panel));border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.mf-cols input{accent-color:var(--brand);width:15px;height:15px;margin:0;cursor:pointer}
@media(pointer:coarse){.mf-cols>label{padding:8px 13px 8px 11px}}
.mf-addr{display:inline-block;max-width:240px;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.45;color:var(--muted)}
/* destructive secondary action: outline, not a filled block */
.btn.danger-ol{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.danger-ol:hover{background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:var(--bad)}
[data-theme=dark] .btn.danger-ol{background:transparent;color:#f2a5b3;border-color:#6b2a37}
[data-theme=dark] .btn.danger-ol:hover{background:#3b181f;border-color:#f2a5b3}
/* ============================ 270.3 — open manifest screen (.mfd) ============================ */
.content:has(.mfd){max-width:1760px}
.mfd{display:flex;flex-direction:column;gap:16px;min-width:0}
.mfd-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:16px 20px}
.mfd-id{display:flex;align-items:center;gap:12px 14px;min-width:0;flex-wrap:wrap}
.mfd-ico{width:48px;height:48px;flex:0 0 auto;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:color-mix(in srgb,var(--brand) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line))}
.mfd-idt{min-width:0}
.mfd-code{font-size:21px;font-weight:800;margin:0;line-height:1.2;color:var(--ink)}
[dir=rtl] .mfd-code{text-align:right}
.mfd-tags{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}
.mfd-date{font-size:12px;color:var(--muted);font-weight:600}
.mfd-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mfd-actions form{display:inline-flex;margin:0}
.mfd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.mfd-stat{background:var(--panel);padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mfd-sl{font-size:12px;color:var(--muted);font-weight:700}
.mfd-sv{font-size:15px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.mfd-num{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.3}
.mfd-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"scan" "list" "elig";align-items:start}
.mfd-scan{grid-area:scan}.mfd-list{grid-area:list}.mfd-elig{grid-area:elig}
.mfd-grid>.card{min-width:0;overflow:hidden}
@media(min-width:1600px){.mfd-grid.has-side{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"list scan" "list elig"}}
.mfd-ch{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line)}
.mfd-ct{font-weight:800;font-size:14.5px;color:var(--ink)}
.mfd-cnt{background:color-mix(in srgb,var(--brand) 10%,var(--panel));color:var(--brand);border-radius:999px;padding:1px 10px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
[data-theme=dark] .mfd-cnt{color:#f2a5b3}
.mfd-sub{font-size:12px;color:var(--muted);font-weight:600;min-width:0;overflow-wrap:anywhere}
.mfd-cb{padding:14px 18px}
.mfd-scanrow{display:flex;gap:8px;flex-wrap:wrap}
.mfd-scanrow .inp{flex:1 1 200px;min-width:0;font-size:15px}
.mfd-tbl{border:0;border-radius:0;box-shadow:none;overflow:auto;-webkit-overflow-scrolling:touch}
.mfd-tbl table{width:max-content;min-width:100%}
.mfd-tbl-scroll{max-height:460px}
.mfd-foot{padding:12px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--panel-2)}
.mfd-empty{padding:36px 20px}
.mfd-empty .ei{font-size:34px;margin-bottom:8px}
.mfd-empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.mfd-empty .hint{font-size:12.5px;color:var(--muted)}
@media(max-width:1100px){.mfd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .mfd-head{padding:14px}
  .mfd-actions{width:100%}
  .mfd-actions>*{flex:1 1 auto}
  .mfd-actions .btn{width:100%;justify-content:center;min-height:44px}
  .mfd-code{font-size:18px}
  .mfd-ico{width:40px;height:40px;font-size:20px}
  .mfd-ch,.mfd-cb,.mfd-foot,.mf-cols{padding-inline:14px}
  .mfd-stat{padding:12px 14px}
}
/* 270.3 — dark mode: «[data-theme=dark] .btn» (same specificity, later) was flattening every primary/accent
   button to a plain grey one, so the screen's main action didn't stand out. Restore the hierarchy. */
[data-theme=dark] .btn.primary{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff}
[data-theme=dark] .btn.primary:hover{background:linear-gradient(160deg,var(--brand-2) 0%,var(--brand-3) 100%)}
[data-theme=dark] .btn.accent{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff}
/* 270.3 — manifest print preview on a phone screen: the sheet scrolls inside itself instead of being clipped (paper print unchanged) */
@media screen{.mfprint{overflow-x:auto}.mfprint svg{max-width:100%;height:auto}}
/* 270.3 — the manifest-type pill uses the light-mode maroon inline; give it a readable dark twin */
[data-theme=dark] .mfd-tags .pill:first-child{background:rgba(198,44,80,.18)!important;color:#f2a5b3!important}
/* ============================ 270.5 — «تسليم الوردية» (.ho) + «تذاكري» badge — 270.3 card style, theme tokens, dark-safe ============================ */
.nav .badge.badge-me{background:#2563eb;margin-inline-start:4px;white-space:nowrap;flex:0 0 auto;padding:1.5px 7px}
.nav .badge{flex:0 0 auto;white-space:nowrap}
.nav .badge.badge-me+.badge,.nav .badge+.badge.badge-me{margin-inline-start:4px}
.tk-tabs .chip{min-width:22px;justify-content:center}
.ho{display:flex;flex-direction:column;gap:16px;min-width:0}
.content:has(.ho){max-width:1600px}
.ho-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:16px 20px}
.ho-id{display:flex;align-items:center;gap:12px 14px;min-width:0;flex:1 1 320px}
.ho-ico{width:48px;height:48px;flex:0 0 auto;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:color-mix(in srgb,var(--brand) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line))}
.ho-idt{min-width:0}
.ho-code{font-size:21px;font-weight:800;margin:0;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
[dir=rtl] .ho-code.mono{text-align:right}
.ho-tags{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:6px}
.ho-date{font-size:12.5px;color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.ho-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ho-actions form{display:inline-flex;margin:0}
.ho-since{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:14px 20px}
.ho-since .field{flex:0 1 240px;min-width:0}
.ho-sub{font-size:12px;color:var(--muted);font-weight:600;min-width:0;overflow-wrap:anywhere}
.ho-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.ho-stat{background:var(--panel);padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ho-sl{font-size:12px;color:var(--muted);font-weight:700}
.ho-sv{font-size:15px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.ho-time{font-size:13px;font-variant-numeric:tabular-nums}
.ho-num{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.3}
.ho-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1200px){.ho-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.ho-main{position:sticky;top:84px}}
.ho-main,.ho-lists{display:flex;flex-direction:column;gap:16px;min-width:0}
.ho-sec{min-width:0;overflow:hidden}
.ho-ch{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line)}
.ho-ct{font-weight:800;font-size:14.5px;color:var(--ink)}
.ho-cnt{background:color-mix(in srgb,var(--brand) 10%,var(--panel));color:var(--brand);border-radius:999px;padding:1px 10px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
[data-theme=dark] .ho-cnt{color:#f2a5b3}
.ho-all{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.ho-all input,.ho-chk input{accent-color:var(--brand);width:17px;height:17px;margin:0;cursor:pointer}
.ho-cb{padding:14px 18px}
.ho-cb textarea{resize:vertical;min-height:96px}
.ho-summary{white-space:normal;line-height:1.85;overflow-wrap:anywhere}
.ho-foot{padding:12px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--panel-2)}
.ho-empty{padding:22px 18px;color:var(--muted);font-size:13px;text-align:center}
.ho-items{list-style:none;margin:0;padding:0}
.ho-item{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line)}
.ho-item:last-child{border-bottom:0}
.ho-item:has(.ho-chk input:not(:checked)){opacity:.55}
.ho-chk{padding-top:3px;flex:0 0 auto}
.ho-it{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ho-it1{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.ho-it1 .mono{font-weight:800;font-size:13px}
.ho-it2{font-weight:700;color:var(--ink);overflow-wrap:anywhere;line-height:1.5}
.ho-meta{font-size:12px;color:var(--muted)}
.ho-note{margin-top:6px;padding:7px 10px;font-size:13px}
.ho-itnote{margin-top:4px;font-size:12.5px;background:var(--panel-2);border:1px dashed var(--line-2);border-radius:9px;padding:6px 10px;overflow-wrap:anywhere}
.ho-st{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.ho-recv{border-inline-start:4px solid var(--ok)}
.ho-recvform{border-inline-start:4px solid #b45309}
.ho-comment{margin-top:8px;background:var(--panel-2);border-radius:10px;padding:8px 12px;line-height:1.7;overflow-wrap:anywhere}
tr.ho-row-new td{background:color-mix(in srgb,#b45309 6%,transparent)}
@media(max-width:1100px){.ho-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .ho-head,.ho-since{padding:14px}
  .ho-actions{width:100%}
  .ho-actions>*{flex:1 1 auto}
  .ho-actions .btn{width:100%;justify-content:center;min-height:44px}
  .ho-code{font-size:18px}
  .ho-ico{width:40px;height:40px;font-size:20px}
  .ho-ch,.ho-cb,.ho-foot,.ho-item{padding-inline:14px}
  .ho-stat{padding:12px 14px}
  .ho-since .field{flex:1 1 100%}
  .ho-since .btn,.ho-foot .btn{min-height:44px}
  .ho-foot .btn.primary{flex:1 1 100%;justify-content:center}
  .ho-chk input{width:20px;height:20px}
}
/* 270.5 — A4 handover sheet (screen preview scrolls inside itself on a phone; paper = A4 portrait) */
.ho-printbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.hoprint{background:#fff;color:#111;max-width:210mm;margin:0 auto;padding:14mm 12mm;border:1px solid var(--line);border-radius:6px;font-size:12.5px;overflow-x:auto}
.hop-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:2px solid #5C0E17;padding-bottom:8px;margin-bottom:10px}
.hop-title{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:15px}
[dir=ltr] .hop-title{align-items:flex-start}
.hop-kv,.hop-tbl{width:100%;border-collapse:collapse;margin:6px 0}
.hop-kv th,.hop-kv td,.hop-tbl th,.hop-tbl td{border:1px solid #cfc3c6;padding:5px 7px;text-align:start;vertical-align:top;color:#111;background:#fff;font-size:12px;text-transform:none;letter-spacing:0}
.hop-kv th,.hop-tbl th{background:#f4eef0;font-weight:800;white-space:nowrap}
.hop-sec{margin-top:12px}
.hop-sec>b{display:block;margin-bottom:4px;font-size:13px}
.hop-sum{border:1px solid #cfc3c6;border-radius:4px;padding:7px 9px;line-height:1.8;overflow-wrap:anywhere}
.hop-sign{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:28px}
.hop-sign>div{border-top:1px solid #555;padding-top:6px;text-align:center;font-size:12px}
@media screen and (max-width:760px){
  .hoprint{padding:14px 12px}
  .hop-head{flex-wrap:wrap}
  .hop-kv,.hop-kv tbody,.hop-kv tr{display:block;width:100%}
  .hop-kv tr{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr)}
  .hop-kv th,.hop-kv td{display:block;white-space:normal;overflow-wrap:anywhere;min-width:0}
}
@media print{
  @page{size:A4 portrait;margin:10mm}
  .ho-printbar{display:none!important}
  .hoprint{border:0;padding:0;max-width:none;overflow:visible}
  .hop-tbl tr{page-break-inside:avoid}
}
/* ============================ 270.6 — manifest flow like the old system: page (.mf-page) · add (.mfp) · scan (.mfs) — 270.3 card style, theme tokens ============================ */
.mf-page [hidden]{display:none!important}
.content:has(.mf-page){max-width:1760px}
.mf-svg{flex:0 0 auto;display:block}
.mf-dim{color:var(--muted);font-size:12px}
/* breadcrumb «الرئيسية › قوائم العمليات › … › تعديل» */
.mf-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.mf-crumbs li{display:inline-flex;align-items:center;min-width:0}
.mf-crumbs li+li::before{content:"›";margin:0 8px;color:var(--line-2);font-weight:800}
.mf-crumbs a{color:var(--muted);text-decoration:none;border-radius:6px;padding:2px 2px}
.mf-crumbs a:hover{color:var(--brand);text-decoration:underline}
.mf-crumbs [aria-current]{color:var(--ink)}
/* «تعديل الإذن» warning strip */
.mf-editstrip{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-radius:12px;font-size:13px;line-height:1.6;
  background:color-mix(in srgb,var(--warn) 11%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));color:var(--ink)}
.mf-editstrip .mf-svg{color:var(--warn);margin-top:2px}
.mf-editstrip b{color:var(--warn)}
/* header card */
.mf-hd{padding:0;overflow:hidden}
.mf-hd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:16px 20px}
.mf-hd .mfd-actions .btn{min-height:40px}
.mf-approve{min-width:118px;justify-content:center;font-size:14px}
.mf-approve:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.mf-hint{margin:-6px 20px 12px;font-size:12px;color:var(--muted);font-weight:600}
.mf-fields{margin:0 0 -1px;margin-inline-end:-1px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.mf-f{background:var(--panel);padding:12px 20px;display:flex;flex-direction:column;gap:5px;min-width:0;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
.mf-f-wide{grid-column:1/-1}
.mf-fl{font-size:12px;color:var(--muted);font-weight:700;margin:0}
.mf-fv{margin:0;font-size:14.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.mf-fields-edit .mf-f{background:color-mix(in srgb,var(--warn) 4%,var(--panel))}
.mf-fields-edit .sel,.mf-fields-edit .inp{width:100%}
.mf-f-act{grid-column:1/-1;background:var(--panel-2);padding:12px 20px;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
/* shipments card «عدد الشحنات : N» + icon tools */
.mf-ship{padding:0;overflow:hidden;min-width:0}
.mf-ship-h{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.mf-ship-t{margin:0;font-size:15.5px;font-weight:800;color:var(--ink)}
.mf-ship-n{font-variant-numeric:tabular-nums;color:var(--brand);font-size:18px}
[data-theme=dark] .mf-ship-n{color:#f2a5b3}
.mf-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mf-ib{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:42px;height:42px;padding:0 12px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,transform .12s}
.mf-ib:hover{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.mf-ib:active{transform:translateY(1px)}
.mf-ib:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mf-ib.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.mf-ib.danger:hover{background:color-mix(in srgb,var(--bad) 8%,var(--panel));border-color:var(--bad);color:var(--bad)}
.mf-ib:disabled{opacity:.42;cursor:not-allowed;transform:none}
.mf-ib-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.mf-ck{width:44px;text-align:center}
.mf-ck input{width:18px;height:18px;cursor:pointer;accent-color:var(--brand);vertical-align:middle}
.mf-page tr.is-sel>td{background:color-mix(in srgb,var(--brand) 7%,var(--panel))}
.mf-empty-act{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.mf-sub{font-size:12px;font-weight:700;color:var(--muted)}
.mf-sub.ok{color:var(--ok)}
/* ⊕ add page: toolbar + side filters + eligible table */
.mfp-head{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 20px}
.mfp-title{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;min-width:0}
.mfp-title h2{margin:0;font-size:19px;font-weight:800;color:var(--ink)}
.mfp-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mfp-tools .btn{min-height:42px}
.mfp-tools .btn:disabled{opacity:.5;cursor:not-allowed}
.mfp-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:901px){.mfp-grid{grid-template-columns:240px minmax(0,1fr)}.mfp-grid.flt-off{grid-template-columns:minmax(0,1fr)}}
.mfp-grid.flt-off .mfp-flt{display:none}
.mfp-flt{padding:14px 16px;min-width:0}
@media(min-width:901px){.mfp-flt{position:sticky;top:74px;max-height:calc(100vh - 90px);overflow:auto}}
.mfp-fh{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--ink);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.mfp-f{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;min-width:0}
.mfp-f>span{font-size:12px;font-weight:800;color:var(--muted)}
.mfp-f .inp,.mfp-f .sel{width:100%}
.mfp-f2{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(max-width:900px){.mfp-f2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}}
.mfp-fa{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.mfp-fa .btn{flex:1 1 auto;justify-content:center}
.mfp-main{padding:0;overflow:hidden;min-width:0}
.mfp-tbl td{white-space:nowrap;vertical-align:top}
.mfp-tbl td .pill{white-space:nowrap}
.mfp-tbl .mf-num,.mfd-tbl [data-col=cod]{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}   /* 270.7 */
.mfp-tbl td.mf-addr-c{max-width:260px}
.mfp-tbl td.mf-wrap{white-space:normal;min-width:110px;max-width:190px;font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.mfp-pager{padding:0 16px;border-top:1px solid var(--line);background:var(--panel-2)}
/* ⌗ scan page */
.mfs{max-width:980px;margin-inline:auto;width:100%}
.mfs-card{padding:0;overflow:hidden}
.mfs-top{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.mfs-h{margin:0;font-size:19px;font-weight:800;color:var(--ink)}
.mfs .mfd-ico{color:var(--brand)}
[data-theme=dark] .mfs .mfd-ico{color:#f2a5b3}
.mfs-done{min-width:110px;justify-content:center;min-height:44px;font-size:14px}
.mfs-form{padding:18px 20px 12px}
.mfs-lbl{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px}
.mfs-row{display:flex;gap:10px;flex-wrap:wrap}
.mfs-in{flex:1 1 260px;min-width:0;font-size:24px;font-weight:800;letter-spacing:.04em;min-height:60px;padding:10px 16px;border-width:2px;border-color:color-mix(in srgb,var(--brand) 40%,var(--line-2))}
.mfs-in:focus{border-color:var(--brand);box-shadow:var(--ring,0 0 0 3px rgba(139,30,58,.16))}
.mfs-go{min-height:60px;min-width:120px;justify-content:center;font-size:15px}
.mfs-row #scanbtn{min-height:60px}
.mfs-opts{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;margin-top:10px}
.mfs-snd{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;min-height:32px}
.mfs-snd input{width:17px;height:17px;accent-color:var(--brand)}
.mfs-cam:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 20px 14px}
.mfs-cam video{max-width:100%;max-height:300px;border-radius:12px;background:#000}
.mfs-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.mfs-k{background:var(--panel);padding:12px 20px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mfs-k span{font-size:12px;font-weight:700;color:var(--muted)}
.mfs-k b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.2}
.mfs-k.ok b{color:var(--ok)}
.mfs-k.bad b{color:var(--bad)}
.mfs-log{padding:0;overflow:hidden}
.mfs-list{list-style:none;margin:0;padding:0;max-height:min(60vh,560px);overflow:auto}
.mfs-list li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13.5px}
.mfs-list li:last-child{border-bottom:0}
.mfs-list li.ok{border-inline-start:4px solid var(--ok)}
.mfs-list li.bad{border-inline-start:4px solid var(--warn);background:color-mix(in srgb,var(--warn) 5%,var(--panel))}
.mfs-list li.is-new{animation:mfsIn .35s ease}
@keyframes mfsIn{from{background:color-mix(in srgb,var(--brand) 14%,var(--panel))}}
.mfs-c{font-weight:800;color:var(--ink);white-space:nowrap}
.mfs-m{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.mfs-list li.bad .mfs-m{color:var(--warn);font-weight:700}
.mfs-t{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mfs-list .mfs-empty{display:block;padding:28px 20px;text-align:center;color:var(--muted);font-size:13px;border:0}
@media (prefers-reduced-motion:reduce){.mfs-list li.is-new{animation:none}}
@media(max-width:1100px){.mf-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .mf-hd-top,.mfp-head,.mfs-top{padding:14px}
  .mf-f,.mf-f-act,.mfs-k{padding:10px 14px}
  .mf-hint{margin-inline:14px}
  .mf-page .mfd-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mf-page .mfd-actions>*{min-width:0}
  .mf-page .mfd-actions form{display:flex}
  .mf-ship-h{padding:12px 14px}
  .mf-ib{min-width:44px;height:44px}
  .mf-ib .mf-ib-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mfp-tools{width:100%}
  .mfp-tools .btn{flex:1 1 auto;justify-content:center;min-height:44px}
  .mfs-form{padding:14px}
  .mfs-in{font-size:20px;min-height:56px}
  .mfs-go{flex:1 1 auto}
  .mfs-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mfs-k b{font-size:20px}
  .mfs-list li{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 14px}
  .mfs-list li .mfs-m{grid-column:2/-1}
}
/* ============================ 270.8 — «الأعمدة ▾» menu (show/hide + reorder) · «طباعة البوالص» ============================ */
.mf-cols{padding:8px 18px;gap:8px}
.mf-cm{position:relative}
.mf-cm>summary{list-style:none;cursor:pointer;user-select:none;min-height:36px}
.mf-cm>summary::-webkit-details-marker{display:none}
.mf-cm-n{font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--brand) 10%,var(--panel));color:var(--brand)}
[data-theme=dark] .mf-cm-n{color:#f2a5b3}
.mf-cm-car{font-size:12px;color:var(--muted);transition:transform .15s}
.mf-cm[open] .mf-cm-car{transform:rotate(180deg)}
.mf-cm[open]>summary{border-color:var(--brand);color:var(--brand)}
/* the card that holds an open menu stops clipping so the panel can float over the table */
.card:has(.mf-cm[open]){overflow:visible}
.mf-cm-pop{position:absolute;z-index:60;top:calc(100% + 6px);inset-inline-start:0;width:340px;max-width:calc(100vw - 40px);
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-md,0 12px 30px rgba(0,0,0,.18));padding:10px;color:var(--ink)}
.mf-cm-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:6px;font-size:13px}
.mf-cm-reset{background:none;border:1px solid var(--line-2);border-radius:9px;padding:5px 9px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;min-height:32px}
.mf-cm-reset:hover{border-color:var(--brand);color:var(--brand)}
.mf-cm-list{list-style:none;margin:0;padding:0;max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain}
.mf-cm-it{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:9px;border:1px solid transparent;background:var(--panel)}
.mf-cm-it:hover{background:var(--panel-2)}
.mf-cm-it.is-drag{opacity:.55;border-color:var(--brand);border-style:dashed}
.mf-cm-grip{cursor:grab;color:var(--muted);font-size:16px;line-height:1;padding:6px 2px;user-select:none;flex:0 0 auto}
.mf-cm-it label{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer;min-height:36px;padding:0;border:0;background:none;color:var(--ink)}
.mf-cm-it label span{overflow-wrap:anywhere}
.mf-cm-it input{width:17px;height:17px;accent-color:var(--brand);margin:0;flex:0 0 auto;cursor:pointer}
.mf-cm-mv{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mf-cm-mv:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.mf-cm-mv:disabled{opacity:.3;cursor:default}
.mf-cm-mv:focus-visible,.mf-cm-reset:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.mf-cm-f{font-size:12px;color:var(--muted);padding:8px 4px 2px;border-top:1px solid var(--line);margin-top:6px}
@media(pointer:coarse){.mf-cm-mv{width:38px;height:38px}.mf-cm-it label{min-height:42px}}
@media(max-width:760px){.mf-cols{padding:8px 14px}.mf-cm-pop{width:calc(100vw - 40px)}}
.mf-ib-n2{background:var(--brand)}
/* ============================================================================
   Batch 271 — getting-started wizard (ob-*) + «resume» banner. Theme variables only (light/dark),
   RTL/LTR by logical properties, no horizontal scroll at 375 px.
   ============================================================================ */
.ob-wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.ob-head{padding:18px 20px 14px;overflow:hidden}
.ob-hi{font-size:var(--fs-xl,18px);font-weight:800;line-height:1.35}
.ob-sub{color:var(--muted);font-size:var(--fs-sm,12.5px);margin-top:4px;line-height:1.7}
.ob-rail{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:4px;position:relative}
.ob-rail::before{content:"";position:absolute;inset-inline:7%;top:15px;height:2px;background:var(--line);z-index:0}
.ob-rail li{flex:1 1 0;min-width:0;position:relative;z-index:1}
.ob-rail a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);text-align:center;padding:0 2px}
.ob-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--panel);border:2px solid var(--line-2);color:var(--muted);transition:background .15s,border-color .15s}
.ob-lbl{font-size:12px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ob-rail li.done .ob-dot{background:color-mix(in srgb,var(--brand) 14%,var(--panel));border-color:color-mix(in srgb,var(--brand) 55%,var(--line));color:var(--brand)}
.ob-rail li.cur .ob-dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.ob-rail li.cur .ob-lbl{color:var(--ink)}
.ob-rail a:hover .ob-dot{border-color:var(--brand)}
.ob-rail a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:10px}
.ob-card{padding:20px 22px}
.ob-step-h{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ob-step-ico{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--brand) 10%,var(--panel-2))}
.ob-step-n{font-size:12px;font-weight:700;color:var(--muted)}
.ob-step-t{font-size:var(--fs-xl,18px);font-weight:800;line-height:1.3}
.ob-lead{color:var(--muted);font-size:13px;line-height:1.75;margin:4px 0 16px}
.ob-span2{grid-column:1/-1}
.ob-logo{display:flex;align-items:center;gap:12px}
.ob-logo-pv{width:52px;height:52px;flex:0 0 52px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:22px}
.ob-logo-pv img{width:100%;height:100%;object-fit:contain;background:#fff}
.ob-have{background:var(--panel-2);border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px;margin:0 0 14px;font-size:12.5px;font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ob-have .hint{flex-basis:100%;font-weight:500}
.ob-more{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:4px;background:var(--panel-2)}
.ob-more summary{cursor:pointer;font-weight:800;font-size:13px;color:var(--brand);list-style:none}
.ob-more summary::-webkit-details-marker{display:none}
.ob-row3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;margin-bottom:8px}
.ob-check{display:flex !important;align-items:center;gap:8px;cursor:pointer;min-height:40px}
.ob-check input,.ob-zone input,.ob-opt input{accent-color:var(--brand);width:16px;height:16px;flex:0 0 16px}
.ob-zones{display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow:auto;padding:2px}
.ob-zones .ob-zone{display:inline-flex;margin:0;color:var(--ink);align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--panel)}
.ob-zones .ob-zone:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--panel));color:var(--brand)}
.ob-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.ob-opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--panel)}
.ob-opt span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ob-opt b{font-size:13px}.ob-opt small{color:var(--muted);font-size:12px;line-height:1.6}
.ob-opt:has(input:checked){border-color:var(--brand);box-shadow:var(--ring)}
.ob-pane{margin-bottom:6px}
.ob-pane[hidden]{display:none}
.ob-bands{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:8px}
.ob-band{display:grid;grid-template-columns:minmax(0,1fr) 130px 130px;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.ob-band-h{border-top:0;background:var(--panel-2);font-size:12px;font-weight:800;color:var(--muted)}
.ob-band-l{min-width:0}.ob-band-l b{font-size:13px}.ob-band-l .hint{font-size:12px}
.ob-band-v{display:block;margin:0}.ob-band-v small{display:none;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:3px}
.ob-band .inp.num{text-align:center}
.ob-note{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:700;font-size:13px}
.ob-note.ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--panel))}
.ob-list{margin:0 0 14px;padding-inline-start:20px;line-height:2}
.ob-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ob-chk{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ob-chk.ok{color:var(--ink);border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.ob-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ob-lnk{display:flex;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2);min-width:0}
.ob-lnk-ic{font-size:22px;line-height:1}
.ob-lnk-b{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ob-lnk-b b{font-size:13px}.ob-lnk-b small{color:var(--muted);font-size:12px;line-height:1.6}
.ob-lnk-b .inp{font-size:12px;padding:6px 9px;direction:ltr;text-align:left}
.ob-link{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--panel))}
.ob-link-t{font-weight:800;margin-bottom:4px}
.ob-copy{display:flex;gap:8px;margin-top:8px}.ob-copy .inp{direction:ltr;text-align:left;font-size:12px}
.ob-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ob-sp{flex:1}
.ob-skip{color:var(--muted)}
.ob-resume{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:7px 16px;font-size:12.5px;font-weight:700;background:color-mix(in srgb,var(--brand) 8%,var(--panel));border-bottom:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));color:var(--ink)}
@media (max-width:760px){
  .ob-opts{grid-template-columns:1fr}
  .ob-checks{grid-template-columns:repeat(2,1fr)}
  .ob-links{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ob-head{padding:14px 14px 12px}
  .ob-card{padding:16px 14px}
  .ob-rail{gap:2px}
  .ob-rail::before{top:13px}
  .ob-dot{width:28px;height:28px;font-size:12px}
  .ob-rail li:not(.cur) .ob-lbl{display:none}
  .ob-rail li.cur{flex:2.4 1 0}
  .ob-row3{grid-template-columns:1fr}
  .ob-actions .btn{flex:1 1 auto;justify-content:center}
  .ob-actions .ob-sp{display:none}
  .ob-actions .btn.primary{order:-1;flex-basis:100%}
  .ob-band{grid-template-columns:1fr 1fr;row-gap:6px}
  .ob-band-h{display:none}
  .ob-band-l{grid-column:1/-1}
  .ob-band-v small{display:block}
  .ob-step-ico{width:38px;height:38px;flex-basis:38px;font-size:19px}
}

/* ============================ 271.1 — UI wave 1 (contrast tokens) ============================
   Status pills: text colour = a darker «ink» of the status colour (≥4.5:1 on the pill's own 10% tint),
   one token per status so a later palette wave swaps values here only. Dark mode re-tunes the
   status tokens, links and the pill inks (they kept their light values before: 2.6–3.6:1). */
:root{
  --st-new:#475569;--st-recv:#475569;--st-wh:#115e59;--st-prep:#1d4ed8;--st-ship:#6d28d9;--st-out:#a14a04;
  --st-done:#13733a;--st-part:#0e6680;--st-ret:#be123c;--st-retd:#9f1239;--st-fail:#b91c1c;--st-cancel:#334155;
  --st-other:#475569;--link:var(--brand);--badge-bg:var(--accent)
}
[data-theme=dark]{
  color-scheme:dark;
  --ok:#4ade80;--warn:#fbbf24;--bad:#ff8a9a;--info:#7aa7ff;--purple:#c4b5fd;
  --st-new:#cbd5e1;--st-recv:#cbd5e1;--st-wh:#5eead4;--st-prep:#93c5fd;--st-ship:#c4b5fd;--st-out:#fbbf24;
  --st-done:#4ade80;--st-part:#67e8f9;--st-ret:#fda4af;--st-retd:#fda4af;--st-fail:#fca5a5;--st-cancel:#e2e8f0;
  --st-other:#cbd5e1;--link:#f58aa5;--badge-bg:var(--accent-2)
}
.pill[data-st]{color:var(--st-other)}
.pill[data-st="طلب شحن"]{color:var(--st-new)}
.pill[data-st="استلام"]{color:var(--st-recv)}
.pill[data-st="استلام بالمخزن"]{color:var(--st-wh)}
.pill[data-st="تجهيز"]{color:var(--st-prep)}
.pill[data-st="شحن"]{color:var(--st-ship)}
.pill[data-st="توصيل"]{color:var(--st-out)}
.pill[data-st="مؤكد"]{color:var(--st-done)}
.pill[data-st="تسليم جزئي"]{color:var(--st-part)}
.pill[data-st="مرتجع"]{color:var(--st-ret)}
.pill[data-st="تسليم المرتجع للراسل"]{color:var(--st-retd)}
.pill[data-st="فشل التسليم"]{color:var(--st-fail)}
.pill[data-st="إلغاء"]{color:var(--st-cancel)}
.link,a.link{color:var(--link)}
[data-theme=dark] .mf-ib-n,[data-theme=dark] .tl-item.fail .tl-dot{color:var(--panel)}   /* white on the lighter dark --bad would fail */
.nav .badge,.nb,.step.cur .sc{background:var(--badge-bg)}                                /* P2-9: white on #e0537a was 3.7:1 in dark */
/* inline brand / red text kept its light value in dark (2.6–3.4:1): same tokens as the links and --bad */
[data-theme=dark] [style^="color:var(--brand)"],[data-theme=dark] [style*=";color:var(--brand)"],[data-theme=dark] .oc-fig b.brand{color:var(--link)!important}
[data-theme=dark] [style^="color:#be123c"],[data-theme=dark] [style*=";color:#be123c"]{color:var(--st-ret)!important}
[data-theme=dark] [style^="color:#dc2626"],[data-theme=dark] [style*=";color:#dc2626"]{color:var(--bad)!important}
::placeholder{color:var(--muted);opacity:1}                                              /* P2-8 */
/* shipments list: names stay on one line (full name on hover) instead of wrapping to four lines */
.orders-table .nm{display:block;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================ 271.2 — UI wave 2 ============================
   (a) Dark mode: inline light backgrounds and their dark text (990 literals in modules/ + includes/) are
       re-mapped here, in ONE place, to dark tints and light inks — the screens keep their markup.
       Prints never carry data-theme=dark, so they stay light. */
[data-theme=dark]{--t-ok-bg:rgba(74,222,128,.13);--t-ok-ink:#86efac;--t-warn-bg:rgba(251,191,36,.13);--t-warn-ink:#fcd34d;
  --t-bad-bg:rgba(248,113,113,.14);--t-bad-ink:#fca5a5;--t-info-bg:rgba(96,165,250,.14);--t-info-ink:#93c5fd;
  --t-pur-bg:rgba(167,139,250,.15);--t-pur-ink:#c4b5fd;--t-teal-ink:#5eead4}
[data-theme=dark] [style*="background:#f0fdf4" i],[data-theme=dark] [style*="background:#dcfce7" i],[data-theme=dark] [style*="background:#ecfdf5" i]{background:var(--t-ok-bg)!important;border-color:rgba(74,222,128,.3)!important}
[data-theme=dark] [style*="background:#fffbeb" i],[data-theme=dark] [style*="background:#fef3c7" i],[data-theme=dark] [style*="background:#fff7ed" i],[data-theme=dark] [style*="background:#fef9c3" i]{background:var(--t-warn-bg)!important;border-color:rgba(251,191,36,.3)!important}
[data-theme=dark] [style*="background:#fef2f2" i],[data-theme=dark] [style*="background:#fee2e2" i],[data-theme=dark] [style*="background:#fdf2f4" i],[data-theme=dark] [style*="background:#fdeef1" i],[data-theme=dark] [style*="background:#fff7f8" i],[data-theme=dark] [style*="background:#faf0f3" i]{background:var(--t-bad-bg)!important;border-color:rgba(248,113,113,.3)!important}
[data-theme=dark] [style*="background:#eff6ff" i],[data-theme=dark] [style*="background:#e0f2fe" i]{background:var(--t-info-bg)!important;border-color:rgba(96,165,250,.3)!important}
[data-theme=dark] [style*="background:#ede9fe" i],[data-theme=dark] [style*="background:#f5f3ff" i],[data-theme=dark] [style*="background:#faf5ff" i]{background:var(--t-pur-bg)!important;border-color:rgba(167,139,250,.3)!important}
[data-theme=dark] [style*="background:#fff;" i],[data-theme=dark] [style$="background:#fff" i],[data-theme=dark] [style*="background:#ffffff" i],[data-theme=dark] [style*="background:white" i]{background:var(--panel)!important}
[data-theme=dark] [style*="background:#f9fafb" i],[data-theme=dark] [style*="background:#f8fafc" i],[data-theme=dark] [style*="background:#f1f5f9" i],[data-theme=dark] [style*="background:#f7f7f7" i],[data-theme=dark] [style*="background:#faf5f6" i],[data-theme=dark] [style*="background:#f6f3f1" i],[data-theme=dark] [style*="background:#f4efe9" i],[data-theme=dark] [style*="background:#f5f1ef" i]{background:var(--panel-2)!important}
[data-theme=dark] [style*="color:#166534" i],[data-theme=dark] [style*="color:#16a34a" i],[data-theme=dark] [style*="color:#15803d" i],[data-theme=dark] [style*="color:#178a4c" i],[data-theme=dark] [style*="color:#065f46" i]{color:var(--t-ok-ink)!important}
[data-theme=dark] [style*="color:#b45309" i],[data-theme=dark] [style*="color:#92400e" i],[data-theme=dark] [style*="color:#d97706" i],[data-theme=dark] [style*="color:#a16207" i],[data-theme=dark] [style*="color:#854d0e" i],[data-theme=dark] [style*="color:#9a3412" i],[data-theme=dark] [style*="color:#c2410c" i]{color:var(--t-warn-ink)!important}
[data-theme=dark] [style*="color:#b91c1c" i],[data-theme=dark] [style*="color:#991b1b" i],[data-theme=dark] [style*="color:#b3261e" i],[data-theme=dark] [style*="color:#9f1239" i]{color:var(--t-bad-ink)!important}
[data-theme=dark] [style*="color:#1d4ed8" i],[data-theme=dark] [style*="color:#2563eb" i],[data-theme=dark] [style*="color:#1e40af" i],[data-theme=dark] [style*="color:#0369a1" i],[data-theme=dark] [style*="color:#0e7490" i]{color:var(--t-info-ink)!important}
[data-theme=dark] [style*="color:#5b21b6" i],[data-theme=dark] [style*="color:#7c3aed" i],[data-theme=dark] [style*="color:#6d28d9" i]{color:var(--t-pur-ink)!important}
[data-theme=dark] [style*="color:#0f766e" i],[data-theme=dark] [style*="color:#115e59" i]{color:var(--t-teal-ink)!important}
[data-theme=dark] [style*="color:#5c0e17" i],[data-theme=dark] [style*="color:#8b1e3a" i],[data-theme=dark] [style*="color:#8e1b3a" i]{color:var(--link)!important}
[data-theme=dark] [style*="color:#555" i],[data-theme=dark] [style*="color:#666" i],[data-theme=dark] [style*="color:#64748b" i],[data-theme=dark] [style*="color:#6b7280" i],[data-theme=dark] [style*="color:#777" i],[data-theme=dark] [style*="color:#888" i],[data-theme=dark] [style*="color:#475569" i]{color:var(--muted)!important}
[data-theme=dark] [style*="color:#111" i],[data-theme=dark] [style*="color:#1a1a1a" i],[data-theme=dark] [style*="color:#334155" i],[data-theme=dark] [style*="color:#444" i],[data-theme=dark] [style*="color:#0f172a" i],[data-theme=dark] [style*="color:#241419" i]{color:var(--ink)!important}
/* white text on a coloured fill keeps its fill (those inline pairs are already ≥4.5:1) */
[data-theme=dark] :is([style*="background:#16a34a;" i],[style$="background:#16a34a" i],[style*="background:#d97706;" i],[style$="background:#d97706" i],[style*="background:#dc2626;" i],[style$="background:#dc2626" i],[style*="background:#b45309;" i],[style$="background:#b45309" i],[style*="background:#b91c1c;" i],[style$="background:#b91c1c" i],[style*="background:#7c3aed;" i],[style$="background:#7c3aed" i]){color:#fff!important}
/* (d) light status tokens used as TEXT cleared 4.5:1 only on white (--ok 4.4, --warn 3.5): one shade darker, light theme only */
:root:not([data-theme=dark]){--ok:#15803d;--warn:#b45309}
.pill.pc{color:color-mix(in srgb,var(--pc) 70%,#000)}
[data-theme=dark] .pill.pc{color:color-mix(in srgb,var(--pc) 45%,#fff)}
/* (b) login follows the dark theme (P2-10) */
[data-theme=dark] .login-wrap{background:var(--bg)}
[data-theme=dark] .login-form .inp{background:var(--panel-2);color:var(--ink);border-color:var(--line)}
/* (c) courier / phone topbar (P2-14): one-line buttons, the chip never clipped, filters really hide */
.tb-btn{white-space:nowrap}
.fltbar.flt-hidden,.flt-side.flt-hidden{display:none!important}
@media (max-width:420px){
  .topbar{gap:4px;padding-inline:8px}
  .topbar h1{font-size:14px;max-width:30vw}
  .tb-lang .tb-ico{display:none}
  .tb-btn{padding:7px 8px}
  .tb-user{padding:2px 6px 2px 2px}
  [dir=rtl] .tb-user{padding:2px 2px 2px 6px}
}

/* 274.1 — dark mode: hover of ghost/danger/success buttons stayed near-white (light text unreadable while the
   pointer rests on a just-clicked button). Dark hovers keep the dark surface and tint it with the brand. */
[data-theme=dark] .btn:not(.primary):not(.accent):hover{background:color-mix(in srgb,var(--brand) 16%,var(--panel-2));color:var(--ink)}
[data-theme=dark] .btn.ghost:hover{background:color-mix(in srgb,var(--brand) 18%,var(--panel));border-color:var(--brand);color:#fff}
[data-theme=dark] .btn.danger:hover{background:#4a1d27;color:#f8c1cb}
[data-theme=dark] .btn.success:hover{background:#173b27;color:#9be3b9}
[data-theme=dark] .btn:not(.primary):not(.accent):focus:not(:focus-visible){background:var(--panel-2)}
[data-theme=dark] .btn.ghost:focus:not(:focus-visible){background:var(--panel)}

/* ============================ 275 — data-migration wizard (mw-) ============================
   Built only from the shared tokens (--panel/--line/--ink/--muted/--brand/--ok/--warn/--bad), so the dark theme and the
   later sx-shell reskin carry it with no extra rules. One neutral border for every card; colour means state only. */
.mw-i{flex-shrink:0;vertical-align:-3px}
.mw-head h2{display:flex;align-items:center;gap:8px}
.mw-lead{color:var(--muted);font-size:13px;margin:-8px 0 14px;line-height:1.7}
.mw-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.mw-step{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);min-width:0;box-shadow:var(--shadow-sm)}
.mw-step:hover{border-color:var(--line-2)}
.mw-step .mw-n{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--panel-2);border:1px solid var(--line-2);flex-shrink:0}
.mw-step .mw-tx{min-width:0;display:block}
.mw-step .mw-t{font-weight:800;font-size:13.5px;display:block}
.mw-step .mw-s{font-size:12px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-step.done .mw-n{color:var(--ok);border-color:currentColor}
.mw-step.cur{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.mw-step.cur .mw-n{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme=dark] .mw-step.cur{border-color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
.mw-card{margin-bottom:14px}
.mw-card .ct{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.mw-hero{border-color:var(--line-2)}
.mw-sec-h{display:flex;align-items:center;gap:8px;margin:20px 2px 8px;font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.01em}
.mw-list{margin-bottom:14px;overflow:hidden}
.mw-row{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mw-row:last-child{border-bottom:0}
.mw-row.mw-foot{background:var(--panel-2)}
.mw-row-main{flex:1;min-width:180px;display:block}
.mw-row-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-inline-start:auto}
.mw-num{min-width:26px;height:26px;padding:0 6px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;color:var(--ink);flex-shrink:0}
.mw-ttl{font-weight:800;font-size:14px;display:block}
.mw-desc{font-size:12.5px;color:var(--muted);line-height:1.7;display:block;margin-top:2px}
.mw-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:10px;box-shadow:var(--shadow-sm)}
.mw-item>summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:13px 16px}
.mw-item>summary::-webkit-details-marker{display:none}
.mw-item>summary:focus-visible{border-radius:var(--radius)}
.mw-item .mw-sum{flex:1;min-width:0;display:block}
.mw-item .mw-state{flex-shrink:0;margin-top:2px}
.mw-item .mw-chev{color:var(--muted);margin-top:4px;transition:transform .18s}
[dir=rtl] .mw-item .mw-chev,[dir=rtl] .mw-fwd{transform:scaleX(-1)}
.mw-item[open] .mw-chev,[dir=rtl] .mw-item[open] .mw-chev{transform:rotate(90deg)}
.mw-item[open]>summary{border-bottom:1px solid var(--line)}
.mw-item .mw-body{padding:4px 16px 16px}
.mw-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);white-space:nowrap}
.mw-tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 9%,var(--panel))}
.mw-tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--panel))}
.mw-tag.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line));background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.mw-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);font-size:12.5px;line-height:1.7;margin:10px 0;color:var(--ink)}
.mw-note>.mw-i{margin-top:3px;color:var(--muted)}
.mw-note.ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 7%,var(--panel))}
.mw-note.ok>.mw-i{color:var(--ok)}
.mw-note.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--panel))}
.mw-note.warn>.mw-i{color:var(--warn)}
.mw-note.bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--line));background:color-mix(in srgb,var(--bad) 7%,var(--panel))}
.mw-note.bad>.mw-i{color:var(--bad)}
.mw-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.mw-form-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.mw-prog{margin-top:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-height:260px;overflow:auto}
.mw-files{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mw-file-row{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mw-file-row:last-child{border-bottom:0}
.mw-ok{color:var(--ok)}.mw-mute{color:var(--muted)}
.mw-file{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:8px;border:1px dashed var(--line-2);border-radius:12px;cursor:pointer;background:var(--panel-2)}
.mw-file:hover{border-color:var(--brand)}
.mw-file:focus-within{box-shadow:var(--ring)}
.mw-file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.mw-file .mw-pick{color:var(--ink);font-weight:700}
.mw-alt{margin-top:10px}
.mw-alt>summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:700}
.mw-kpis{margin:10px 0 12px}
.mw-kpis .kpi{padding:12px 14px}.mw-kpis .kv{font-size:19px}
.mw-next{display:flex;justify-content:flex-end;margin:18px 0 6px}
.mw-danger{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.flash.mw-res{align-items:flex-start}
.flash.mw-res>.mw-i{margin-top:2px}
.mw-res-b{flex:1;min-width:0;font-weight:700;line-height:1.7}
.mw-res-l{margin:6px 0 0;padding-inline-start:18px;font-weight:600}
.mw-tech{margin-top:6px;font-weight:600}
.mw-tech>summary{cursor:pointer;font-size:12px;opacity:.85}
.mw-tech pre{white-space:pre-wrap;word-break:break-word;font-size:12px;max-height:240px;overflow:auto;background:color-mix(in srgb,currentColor 6%,transparent);padding:8px 10px;border-radius:8px;margin:6px 0 0;font-family:ui-monospace,Consolas,monospace}
@media (max-width:820px){
  .mw-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .mw-steps{gap:6px}
  .mw-step{padding:8px 10px;gap:8px}
  .mw-step .mw-s{display:none}
  .mw-row{padding:12px}
  .mw-row-act{margin-inline-start:0;width:100%}
  .mw-row-act form,.mw-row-act .btn{width:100%;justify-content:center}
  .mw-item>summary{padding:12px;gap:10px}
  .mw-item .mw-body{padding:4px 12px 14px}
  .mw-item .mw-state{display:none}
  .mw-actions>.field,.mw-actions>.field .inp{width:100%!important}
  .mw-head .btn{flex:1;justify-content:center}
  .mw-next .btn{width:100%;justify-content:center}
}
/* the shared .btn.danger text reads 4.35:1 on its light pink — one shade deeper here (light theme only) */
:root:not([data-theme=dark]) .mw-row .btn.danger,:root:not([data-theme=dark]) .mw-item .btn.danger{color:#a3243b}

/* ==========================================================================================
   Batch 279 (v8.1.3) — body icons (oya_ic(): one SVG family instead of emoji). Loaded by BOTH UIs:
   the new shell (after sx-shell.css, so this wins over its 20px default) and the classic fallback.
   ========================================================================================== */
svg.oya-ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn svg.oya-ic,.oya-menu svg.oya-ic{width:16px;height:16px;vertical-align:-3px}
/* «⋯ المزيد» and «طباعة وتصدير» menus — details.oya-menu (no JS needed to open; oya_menu_js() closes on outside click) */
details.oya-menu{position:relative;display:inline-block}
details.oya-menu>summary{list-style:none;cursor:pointer;user-select:none}
details.oya-menu>summary::-webkit-details-marker{display:none}
details.oya-menu[open]>summary{border-color:var(--brand);color:var(--brand)}
.oya-menu-pop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:70;min-width:230px;max-width:min(340px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px;text-align:start}
.oya-menu-pop form{display:block;margin:0}
.oya-menu-pop .mi{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:none;border-radius:6px;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;text-align:start;cursor:pointer;text-decoration:none;white-space:nowrap}
.oya-menu-pop .mi:hover,.oya-menu-pop .mi:focus-visible{background:var(--panel-2)}
.oya-menu-pop .mi svg.oya-ic{color:var(--muted)}
.oya-menu-pop .mi.bad,.oya-menu-pop .mi.bad svg.oya-ic{color:var(--bad)}
.oya-menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.oya-menu-pop .mi-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);padding:6px 10px;line-height:1.5;white-space:normal}
@media (max-width:640px){.oya-menu-pop{position:fixed;inset:auto 12px 12px 12px;top:auto;max-width:none;box-shadow:0 -8px 32px rgba(0,0,0,.28)}}
/* a page head with actions: secondary → primary → «⋯» (visual order; the markup order does not matter) */
.sec-head>.ia-sec{order:1}.sec-head>.ia-pri{order:2}.sec-head>.ia-more{order:3}
/* shipments list: status chips with counts (one row; scrolls sideways when it does not fit) */
.oya-stchips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 0 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.oya-stc{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.oya-stc b{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--panel-2);color:var(--ink);font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.oya-stc:hover{border-color:var(--brand)}
.oya-stc.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--panel));color:var(--brand)}
.oya-stc.is-on b{background:var(--brand);color:var(--panel)}
.oya-stc.is-zero{color:var(--muted)}
.oya-stc.is-zero b{color:var(--muted);background:transparent}
.ord-status-cards{display:none}
/* dashboard: orders by status — ranked list with one-hue bars */
.oya-stlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.oya-stlist a{display:grid;grid-template-columns:auto 1fr auto 3.2em;grid-template-rows:auto 6px;column-gap:8px;row-gap:4px;align-items:center;padding:6px 6px 8px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13px}
.oya-stlist a:hover{background:var(--panel-2)}
.oya-stlist .l{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oya-stlist .n{font-variant-numeric:tabular-nums}
.oya-stlist .p{color:var(--muted);font-size:12px;text-align:end;font-variant-numeric:tabular-nums}
.oya-stlist .bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.oya-stlist .bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}
/* dashboard: one «needs your attention» strip */
.oya-attn{padding:10px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:2px}
.oya-attn-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);margin:0 0 4px}
.oya-attn-i{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 6px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px}
.oya-attn-i:hover{background:var(--panel-2)}
.oya-attn-i>svg.oya-ic{color:var(--warn)}
.oya-attn-i.is-bad>svg.oya-ic{color:var(--bad)}
.oya-attn-i .t{flex:1;min-width:180px;font-weight:600}
.oya-attn-i .n{font-variant-numeric:tabular-nums;font-size:15px}
.oya-attn-i .late{color:var(--bad);font-size:12.5px;font-weight:700}
.oya-attn-i .go{display:inline-flex;align-items:center;gap:4px;color:var(--brand);font-size:13px;font-weight:700}
.oya-attn-i .go svg.oya-ic{transform:rotate(-90deg)}
[dir=rtl] .oya-attn-i .go svg.oya-ic{transform:rotate(90deg)}
/* card icons: neutral grey (no hand-coded pink / blue tiles) */
.kpi .kico,.ck-ic{background:var(--panel-2);color:var(--muted)}
.kpi .kico svg.oya-ic,.ck-ic svg.oya-ic{width:20px;height:20px}
.oya-pill-ok{background:color-mix(in srgb,var(--ok) 14%,var(--panel));color:var(--ok)}
.oya-pill-bad{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)}
.oya-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* 279 — migrate wizard: under 1024px only the «done from a computer» note + status (P2-12); B11 single button */
.mw-mobile{display:none}
@media (max-width:1023px){
  html:not(.mw-force) .mw-mobile{display:block;margin-bottom:14px}
  html:not(.mw-force) .mw-mobile~:not(.app-copyright):not(script):not(.mw-res):not(.flash){display:none!important}
  html:not(.mw-force) .mw-steps{display:none!important}
}
.mw-mob-sum{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.mw-mob-sum li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.mw-mob-sum li.cur{border-color:var(--brand)}
.mw-mob-sum .mw-n{grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);font-weight:700}
.mw-mob-sum li>span:last-child{color:var(--muted);font-size:12.5px}
.mw-b11{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:4px}
.mw-b11[hidden],.mw-b11-typed[hidden],#mwB11Forms[hidden]{display:none!important}
.mw-b11-opts{border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0;display:flex;flex-direction:column;gap:6px}
.mw-b11-opts legend{font-weight:700;font-size:13px;padding:0 4px}
.mw-b11-opts label{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
.mw-b11-typed{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--bad);font-weight:600}
/* 279 — KPI rows that fit their count (no lonely last card) · empty states with a real icon, not a faded emoji */
.grid.oya-autofit{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.empty .ei:has(svg){opacity:1;filter:none;color:var(--muted);line-height:1}
.empty .ei svg.oya-ic{width:44px;height:44px;stroke-width:1.4}

/* 280 (v8.1.4) — migration run log («سجل التشغيل»), «آخر تشغيل» stamps, chunked-stage progress */
.mw-stamp{margin-top:4px}
.rl-stamp{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12px;color:var(--muted);line-height:1.6}
.rl-stamp b{color:var(--ink);font-weight:600}
.rl-stamp svg{flex:0 0 auto}
.rl-res{font-weight:700;color:var(--muted)}
.rl-res.ok{color:var(--ok)}
.rl-res.bad{color:var(--bad)}
.rl-res.warn{color:var(--warn)}
.rl-card{margin-top:16px;margin-bottom:14px}
.rl-tbl td{vertical-align:top}
.rl-tbl .hint{font-size:12px}
.rl-tbl .mw-tech pre{max-width:420px}
.mig-prog{max-width:640px}
.mig-prog-n{font-weight:800;margin-bottom:8px;font-variant-numeric:tabular-nums}
.mig-prog-n span{color:var(--muted);font-weight:600}
.mig-prog-bar{height:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mig-prog-bar>div{height:100%;background:var(--brand);transition:width .3s}
.mig-prog-x{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.mig-prog-x .btn{margin-inline-start:auto}

/* ============================ 282 (v8.1.6) ============================
   closing the migration (MIG-P3-13 / P1-06), the step dates (P3-14), the «انقل الكل» queue, the one-time tools,
   status tints as tokens (P2-12/13), empty states with a next step (P3-23) */
:root{--tint-ok:color-mix(in srgb,var(--ok) 9%,var(--panel));--tint-ok-b:color-mix(in srgb,var(--ok) 32%,var(--line));
  --tint-warn:color-mix(in srgb,var(--warn) 10%,var(--panel));--tint-warn-b:color-mix(in srgb,var(--warn) 34%,var(--line));
  --tint-bad:color-mix(in srgb,var(--bad) 8%,var(--panel));--tint-bad-b:color-mix(in srgb,var(--bad) 32%,var(--line));
  --tint-brand:color-mix(in srgb,var(--brand) 8%,var(--panel));--tint-info:color-mix(in srgb,var(--info,#2563eb) 9%,var(--panel))}
.mw-step .mw-at{font-variant-numeric:tabular-nums}
.mw-locked{margin:0 0 14px;border-color:var(--tint-warn-b);background:var(--tint-warn)}
fieldset.mw-ro{border:0;margin:0;padding:0;min-width:0}
fieldset.mw-ro .btn:disabled,fieldset.mw-ro button:disabled{opacity:1;background:var(--panel-2)!important;color:var(--muted)!important;border-color:var(--line)!important;box-shadow:none!important;cursor:not-allowed}
fieldset.mw-ro input:disabled,fieldset.mw-ro select:disabled{opacity:.7}
.mw-close.is-locked{border-inline-start:3px solid var(--warn)}
.mw-close .mw-form-foot{margin-top:6px}
.mw-row-wrap .mw-row-main{flex:1 1 320px}
.mw-row-wrap>form{flex:1 1 100%}
.mw-typed{gap:6px;align-items:center;flex-wrap:wrap}
.mw-typed .inp{width:150px;max-width:100%;padding:6px 9px}
.mw-alt-moved{margin:10px 0 0;display:flex;gap:6px;align-items:center}
.rl-csv{margin-top:10px}
.mig-all{max-width:720px}
.mig-all-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mig-all-l li{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line)}
.mig-all-l li:last-child{border-bottom:0}
.mig-all-n{width:28px;height:28px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--panel-2);border:1px solid var(--line-2,var(--line))}
.mig-all-l li.is-ok .mig-all-n{color:var(--ok);border-color:currentColor}
.mig-all-l li.is-bad .mig-all-n{color:var(--bad);border-color:currentColor}
.mig-all-l li.is-cur .mig-all-n{border-color:var(--brand);color:var(--brand)}
.mig-all-l li.is-wait{color:var(--muted)}
.mig-all-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.mig-all-r{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.oya-migcard .oya-migcard-b{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;padding:2px 6px 4px}
.oya-migcard .t{flex:1;min-width:220px;font-size:13.5px;line-height:1.7}
.oya-migcard .late{color:var(--muted);font-size:13px;white-space:nowrap}
.oya-migcard-a{display:flex;gap:8px;flex-wrap:wrap}
/* tinted chips / notes (inline literals in order_view and warehouse moved to these tokens) */
.tint-ok{background:var(--tint-ok)!important;border-color:var(--tint-ok-b)!important;color:var(--ok)!important}
.tint-warn{background:var(--tint-warn)!important;border-color:var(--tint-warn-b)!important;color:var(--warn)!important}
.tint-bad{background:var(--tint-bad)!important;border-color:var(--tint-bad-b)!important;color:var(--bad)!important}
.tint-brand{background:var(--tint-brand)!important;color:var(--link,var(--brand))!important}
/* empty states that say what to do next */
.empty .empty-next{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.empty .empty-sub{margin-top:2px}

/* 282 (OYA-P2-19) — 12px minimum on screen for the small sizes still written inline in the pages (print keeps its sizes) */
@media screen{[style*="font-size:7.5px"],[style*="font-size:8px"],[style*="font-size:8.5px"],[style*="font-size:9px"],[style*="font-size:9.5px"],[style*="font-size:10px"],[style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size:11.5px"]{font-size:12px!important}}