/* Sofravo — أنماط مشتركة */

:root{
  --bg:#F2F3F0; --surface:#FBFCFA; --surface-2:#E8EBE5; --sunken:#E2E6DE;
  --ink:#17211F; --ink-2:#3D4946; --muted:#6D7772; --line:#D4D9D1;
  --brand:#A65B2E; --brand-soft:#F3E5DA; --on-brand:#fff;
  --ok:#2C6E64; --ok-soft:#DCEAE6;
  --warn:#8A6410; --warn-soft:#F5EAD2;
  --bad:#A8342F; --bad-soft:#F6E2E0;
  --info:#3A5F80; --info-soft:#DFE8F0;
  --shadow:0 1px 2px rgba(23,33,31,.05),0 10px 28px -14px rgba(23,33,31,.22);
  --r:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111716; --surface:#19201F; --surface-2:#222A28; --sunken:#0D1312;
  --ink:#E7EBE6; --ink-2:#C0C8C4; --muted:#8A9490; --line:#2E3937;
  --brand:#D9915F; --brand-soft:#2B2019; --on-brand:#111716;
  --ok:#56A497; --ok-soft:#152F2B;
  --warn:#D6A542; --warn-soft:#2C2415;
  --bad:#E2716A; --bad-soft:#2F1B19;
  --info:#7FA6C6; --info-soft:#18242E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --bg:#111716; --surface:#19201F; --surface-2:#222A28; --sunken:#0D1312;
  --ink:#E7EBE6; --ink-2:#C0C8C4; --muted:#8A9490; --line:#2E3937;
  --brand:#D9915F; --brand-soft:#2B2019; --on-brand:#111716;
  --ok:#56A497; --ok-soft:#152F2B;
  --warn:#D6A542; --warn-soft:#2C2415;
  --bad:#E2716A; --bad-soft:#2F1B19;
  --info:#7FA6C6; --info-soft:#18242E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  direction:rtl; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.num,.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;line-height:1.35}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
a{color:var(--brand)}

.wrap{max-width:1100px;margin:0 auto;padding:0 14px 100px}
.bar{
  position:sticky;top:0;z-index:20;background:var(--bg);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:16px;
}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1rem}
.logo .mark{width:24px;height:24px;border-radius:6px;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-size:.68rem;font-weight:700}
.spacer{flex:1}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:500;
  padding:4px 9px;border-radius:99px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h2{font-size:.95rem;font-weight:600}
.card-h .sub{font-size:.75rem;color:var(--muted)}
.card-b{padding:15px}

.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:6px;padding:9px 15px;font-size:.88rem;font-weight:500}
.btn:hover:not(:disabled){border-color:var(--brand)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:.8rem}
.btn.block{width:100%;justify-content:center}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:.8rem;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:9px 11px;
  color:var(--ink);font:inherit;font-size:.9rem;width:100%}
.field .hint{font-size:.74rem;color:var(--muted)}

.msg{border-radius:6px;padding:9px 12px;font-size:.84rem;margin-bottom:10px}
.msg.err{background:var(--bad-soft);color:var(--bad)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.msg.warn{background:var(--warn-soft);color:var(--warn)}
.msg.info{background:var(--info-soft);color:var(--info)}

.empty{color:var(--muted);font-size:.86rem;text-align:center;padding:26px 10px}
.sec{font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  margin:16px 0 8px;font-family:"IBM Plex Mono",monospace}
.sec:first-child{margin-top:0}

/* لوح منزلق للتعديلات */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none}
.sheet-bg.open{display:block}
.sheet{
  position:fixed;inset-inline:0;bottom:0;z-index:51;background:var(--surface);
  border-radius:14px 14px 0 0;max-height:88vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .22s ease;
  box-shadow:0 -8px 32px rgba(0,0,0,.25);
}
.sheet.open{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.sheet-h{position:sticky;top:0;background:var(--surface);padding:14px 16px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sheet-h h3{flex:1;font-size:1rem}
.sheet-b{padding:16px;max-width:640px;margin:0 auto}
.sheet-f{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:12px 16px;display:flex;gap:8px}

.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  border-radius:99px;padding:6px 13px;font-size:.83rem}
.opt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.opt:disabled{opacity:.4;cursor:not-allowed}

.stat{display:inline-flex;align-items:center;font-size:.73rem;font-weight:600;padding:3px 9px;border-radius:99px}
.stat.new{background:var(--brand-soft);color:var(--brand)}
.stat.accepted{background:var(--info-soft);color:var(--info)}
.stat.ready{background:var(--ok-soft);color:var(--ok)}
.stat.out_for_delivery{background:var(--warn-soft);color:var(--warn)}
.stat.delivered{background:var(--surface-2);color:var(--muted)}
.stat.rejected,.stat.cancelled{background:var(--bad-soft);color:var(--bad)}