@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   محكمة القاهرة الجديدة — نظام المخازن
   نظام التصميم: «السِّجِل»
   الفلسفة: سجل رسمي مسطَّر + ختم ذهبي + حبر أخضر داكن
   القاعدة: الموبايل أولاً، ثم التابلت، ثم اللابتوب
   ========================================================================== */

/* ---------- 1. المتغيرات ---------- */
:root{
  /* الحبر (اللون الأساسي) */
  --ink-900:#0B241D;
  --ink-800:#0F2E25;
  --ink-700:#164033;
  --ink-600:#1F5544;
  --ink-500:#2C6E58;
  --ink-300:#6E9A8B;

  /* الذهبي (لون التمييز والاعتماد) */
  --gold-700:#7C5E1E;
  --gold-600:#9B7828;
  --gold-500:#B4913C;
  --gold-400:#CDB06A;
  --gold-200:#E8DBB6;
  --gold-050:#F6F0DE;

  /* الورق */
  --paper-000:#FFFDF8;
  --paper-100:#FAF6EC;
  --paper-200:#F2ECDD;
  --paper-300:#E7DFCB;

  /* النص — تباين أعلى، الرمادي الباهت كان يُتعب العين */
  --text-900:#0E2A22;
  --text-700:#33443D;
  --text-500:#5C6F67;
  --text-300:#8E9C95;

  /* دلالات */
  --ok:#1F5544;      --ok-bg:#E4EFE9;
  /* التباين على خلفيتها ٤٫٦٨ — كان #9B7828 يعطي ٣٫٥٨، ووسم الحالة ١١ نقطة
     فيحتاج ٤٫٥ على الأقل. «تحت الاعتماد» أكثر وسمٍ يقرؤه الموظف في يومه. */
  --wait:#846622;    --wait-bg:#F7EFD8;
  --info:#25566E;    --info-bg:#E2EDF2;
  --bad:#8B2C2C;     --bad-bg:#F6E5E3;
  /* ٤٫٦٤ بدل ٣٫٩٧ — وسم «مسودة» و«موقوف» بنفس الحجم الصغير */
  --off:#616A66;     --off-bg:#EDEAE2;

  --line:#DFD7C4;
  --line-soft:#EAE3D4;

  /* مقاسات */
  --r-sm:5px; --r:8px; --r-lg:12px; --r-xl:18px;
  --tap:48px;                     /* أصغر مساحة لمس على الموبايل */
  --bar:52px;                     /* الشريط العلوي — طبقة واحدة رفيعة */
  --tabbar:66px;                  /* شريط التنقل السفلي */
  --side:252px;                   /* عرض القائمة الجانبية */
  --wrap:1320px;

  --sh-1:0 1px 2px rgba(11,36,29,.06), 0 1px 1px rgba(11,36,29,.04);
  --sh-2:0 4px 14px rgba(11,36,29,.08), 0 1px 3px rgba(11,36,29,.05);
  --sh-3:0 18px 46px rgba(11,36,29,.16), 0 4px 12px rgba(11,36,29,.08);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.5);

  --ease:cubic-bezier(.22,.68,.32,1);

  --bg:var(--paper-100);
  --surface:var(--paper-000);
  --fg:var(--text-900);
  --fg-2:var(--text-500);

  --f-ui:"IBM Plex Sans Arabic","Segoe UI",sans-serif;
  --f-doc:"Amiri","Times New Roman",serif;
  --f-num:"IBM Plex Mono","Consolas",monospace;
}

[data-theme="dark"]{
  --bg:#081713;
  --surface:#0D211B;
  --paper-000:#0D211B;
  --paper-100:#081713;
  --paper-200:#122A23;
  --paper-300:#17352B;
  --fg:#EDE9DC;
  --fg-2:#93A099;
  --text-900:#EDE9DC;
  --text-700:#C6CEC7;
  --text-500:#93A099;
  --text-300:#68766F;
  --line:#1D3E33;
  --line-soft:#173328;
  --ok-bg:#12332A; --wait-bg:#2E2718; --info-bg:#132B36; --bad-bg:#33201F; --off-bg:#1A2622;
  --gold-050:#241E11;
  --sh-in:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* خاصية hidden تسبق أي display في المكوّنات — وإلا ظهر المخفي */
[hidden]{display:none!important}
body{
  margin:0;
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.7;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
/* نسيج السجل: سطور خفيفة جداً في الخلفية */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(22,64,51,.035) 33px 34px);
  opacity:.7;
}
[data-theme="dark"] body::before{background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(180,145,60,.05) 33px 34px)}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.35;letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.18rem} h3{font-size:1rem}
p{margin:0 0 .8em}
a{color:var(--ink-600);text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold-200);color:var(--ink-900)}

/* الأرقام دائماً بخط مميز ومحاذاة عمودية */
/* أرقام لاتينية خالصة وتواريخ: اتجاه من اليسار لليمين */
/* `display:inline-block` للعناصر السطرية وحدها.
   خليةُ جدولٍ تأخذها **تخرج من تخطيط الجدول**: تنكمش على محتواها وتنفصل عن
   عمودها، فتنزاح أعمدة المطبوعة عن عناوينها. أُعيد إنتاجه على كشف حساب
   الأصناف: عنوان «الوارد» عند ٥٤٧ بكسل وقيمته عند ٧١٦ — يقرأ الموظف رقماً
   تحت عنوان غيره في مستندٍ يوقّعه. وخلية الجدول لا تحتاجها أصلاً: `direction`
   و`unicode-bidi` تكفيان لعزل الرقم، وهما ما أُريد من القاعدة. */
.num,.stat-v{display:inline-block}
/* والخلية تعود إلى طبيعتها صراحةً: `.num` صنفٌ يطابق `<td class="num">` أيضاً */
td.num,th.num{display:table-cell}
.num,td.num,.stat-v{font-family:var(--f-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* أكواد مختلطة (كلمة عربية + أرقام): تُترك على اتجاه الصفحة حتى تُقرأ صحيحة */
.code{font-family:var(--f-ui);font-variant-numeric:tabular-nums;unicode-bidi:isolate;display:inline-block}

/* ---------- 3. الهيكل العام ---------- */
.shell{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}
.content{
  flex:1;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:16px 14px calc(var(--tabbar) + env(safe-area-inset-bottom) + 22px);
}

/* الشريط العلوي */
.topbar{
  position:sticky;top:0;z-index:40;
  height:var(--bar);display:flex;align-items:center;gap:10px;
  padding-inline:12px;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-900));
  color:#F0EADA;
  box-shadow:0 1px 0 var(--gold-600),0 6px 18px rgba(11,36,29,.22);
  padding-top:env(safe-area-inset-top);
  height:calc(var(--bar) + env(safe-area-inset-top));
}
.topbar h1{font-size:1.02rem;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sub{display:block;font-size:.7rem;font-weight:400;color:var(--gold-400);letter-spacing:.02em}
.ico-btn{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(232,219,182,.14);
  border-radius:var(--r);color:inherit;cursor:pointer;transition:.18s var(--ease);
}
.ico-btn:hover{background:rgba(255,255,255,.13)}
.ico-btn:active{transform:scale(.94)}

/* شريط التنقل السفلي — الموبايل */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:45;
  height:calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.66rem;color:var(--text-500);position:relative;min-height:var(--tap);
}
.tabbar a.on{color:var(--ink-600);font-weight:600}
[data-theme="dark"] .tabbar a.on{color:var(--gold-400)}
.tabbar a.on::before{
  content:"";position:absolute;top:0;inset-inline:22%;height:3px;
  background:var(--gold-500);border-radius:0 0 4px 4px;
}
.tabbar svg{width:22px;height:22px}

/* القائمة الجانبية — التابلت واللابتوب */
.sidenav{display:none}

/* زر الإجراء العائم */
.fab{
  position:fixed;inset-inline-end:16px;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px);
  z-index:44;height:54px;padding-inline:20px;border:0;border-radius:var(--r-xl);
  display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;
  background:linear-gradient(160deg,var(--ink-600),var(--ink-800));color:var(--gold-050);
  box-shadow:var(--sh-3),inset 0 1px 0 rgba(232,219,182,.22);cursor:pointer;
  transition:.2s var(--ease);
}
.fab:active{transform:scale(.95)}

/* ---------- 4. الختم والهوية ---------- */
.seal{
  --s:76px;width:var(--s);height:var(--s);flex:none;position:relative;
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--paper-000),var(--paper-200));
  border:2px solid var(--gold-500);
  box-shadow:0 0 0 3px var(--paper-000),0 0 0 4px var(--gold-400),var(--sh-2);
}
[data-theme="dark"] .seal{background:radial-gradient(circle at 32% 28%,#15302738,#0d211b);box-shadow:0 0 0 3px #0d211b,0 0 0 4px var(--gold-600),var(--sh-2)}
.seal img{width:66%;height:66%;object-fit:contain}
.seal.on-dark{box-shadow:0 0 0 3px var(--ink-900),0 0 0 4px var(--gold-500),0 10px 30px rgba(0,0,0,.4)}
.seal--sm{--s:40px;border-width:1.5px;box-shadow:0 0 0 2px var(--ink-900),0 0 0 3px var(--gold-500)}
.seal--xl{--s:132px}

.identity{display:flex;align-items:center;gap:12px;min-width:0}
.identity .org{font-family:var(--f-doc);font-size:1.12rem;font-weight:700;line-height:1.25}
.identity .sys{font-size:.72rem;color:var(--gold-400);letter-spacing:.04em}

/* ---------- 5. البطاقات واللوحات ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.card + .card{margin-top:12px}
.card-h{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--paper-100),transparent);
}
[data-theme="dark"] .card-h{background:linear-gradient(180deg,#0f271f,transparent)}
.card-h h2,.card-h h3{flex:1;font-size:.98rem}
.card-b{padding:15px}
.card-f{padding:12px 15px;border-top:1px solid var(--line-soft);display:flex;gap:8px;flex-wrap:wrap}

/* الخط الذهبي الفاصل — عنصر متكرر في كل النظام */
.rule{height:2px;border:0;margin:18px 0;
  background:linear-gradient(90deg,transparent,var(--gold-400),var(--gold-500),var(--gold-400),transparent)}
.rule--tight{margin:10px 0}

.sec-title{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.sec-title h2{font-size:1.05rem}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-title .n{font-family:var(--f-num);font-size:.72rem;color:var(--gold-600);
  border:1px solid var(--gold-400);border-radius:var(--r-sm);padding:1px 6px}

/* ---------- 6. مؤشرات لوحة البداية ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:13px 14px;box-shadow:var(--sh-1);overflow:hidden;
}
.stat::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--ink-500)}
.stat.w::before{background:var(--gold-500)} .stat.d::before{background:var(--bad)} .stat.i::before{background:var(--info)}
.stat-k{font-size:.76rem;color:var(--fg-2);display:flex;align-items:center;gap:6px}
.stat-v{font-size:1.72rem;font-weight:600;line-height:1.25;margin-top:2px}
/* تسمية الإحصاء تشرح رقمها («بانتظار العدّ» · «المعدود أقل») فهي محتوى
   لا زخرفة — كانت بتباين ٢٫٨١ فيقرأ الموظف أرقاماً بلا ما تعنيه. */
.stat-n{font-size:.7rem;color:var(--text-500)}

/* ---------- 7. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:0 18px;border-radius:var(--r);
  border:1px solid transparent;font-weight:600;font-size:.92rem;
  cursor:pointer;transition:.16s var(--ease);white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--p{background:linear-gradient(170deg,var(--ink-600),var(--ink-800));color:var(--gold-050);
  box-shadow:var(--sh-1),inset 0 1px 0 rgba(232,219,182,.18)}
.btn--p:hover{filter:brightness(1.13)}
.btn--g{background:linear-gradient(170deg,var(--gold-500),var(--gold-700));color:#FFFCF2;
  box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--o{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn--o:hover{border-color:var(--ink-500);color:var(--ink-600)}
.btn--d{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btn--t{background:transparent;color:var(--fg-2);padding-inline:10px}
.btn--sm{min-height:40px;font-size:.83rem;padding:0 13px}
.btn--full{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- 8. الحقول ---------- */
.field{margin-bottom:15px}
.label{display:block;font-size:.84rem;font-weight:500;margin-bottom:6px;color:var(--text-700)}
.label .req{color:var(--bad)}
.input,.select,.textarea{
  width:100%;min-height:var(--tap);padding:11px 13px;
  font-size:16px;                                   /* يمنع تكبير الشاشة في الموبايل */
  background:var(--surface);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);
  transition:.16s var(--ease);
}
.textarea{min-height:96px;resize:vertical;line-height:1.7}
.input:focus,.select:focus,.textarea:focus{
  outline:0;border-color:var(--ink-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-400) 45%,transparent);
}
.input::placeholder{color:var(--text-300)}
.select{appearance:none;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 1l5 5 5-5' stroke='%236B7570' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;padding-inline-start:13px;padding-inline-end:36px}
.hint{font-size:.76rem;color:var(--text-500);margin-top:5px}
.err{font-size:.78rem;color:var(--bad);margin-top:5px}
.input.is-err{border-color:var(--bad)}

.grid2{display:grid;gap:0 14px;grid-template-columns:1fr}
.grid3{display:grid;gap:0 14px;grid-template-columns:1fr}

/* حقل بوحدة ملحقة */
.with-unit{display:flex}
.with-unit .input{border-start-end-radius:0;border-end-end-radius:0}
.with-unit .select{width:auto;min-width:112px;border-start-start-radius:0;border-end-start-radius:0;
  margin-inline-start:-1px;background-color:var(--paper-100);font-size:.88rem}

.switch{display:flex;align-items:center;gap:11px;min-height:var(--tap);cursor:pointer}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:48px;height:28px;border-radius:99px;background:var(--paper-300);
  position:relative;transition:.2s var(--ease);flex:none;border:1px solid var(--line)}
.switch .track::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:.2s var(--ease)}
.switch input:checked + .track{background:var(--ink-600);border-color:var(--ink-700)}
.switch input:checked + .track::after{inset-inline-start:22px}

/* ---------- 9. الحالات ---------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:99px;
  border:1px solid transparent;white-space:nowrap;
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.tag.wait{background:var(--wait-bg);color:var(--wait);border-color:color-mix(in srgb,var(--wait) 25%,transparent)}
.tag.info{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)}
.tag.bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 22%,transparent)}
.tag.off{background:var(--off-bg);color:var(--off);border-color:color-mix(in srgb,var(--off) 20%,transparent)}

/* رقم الإذن — يظهر كأنه مطبوع بختم */
.doc-no{
  font-family:var(--f-ui);font-variant-numeric:tabular-nums;unicode-bidi:isolate;display:inline-block;
  font-weight:600;font-size:.82rem;letter-spacing:.04em;
  color:var(--ink-700);background:var(--gold-050);
  border:1px dashed var(--gold-400);border-radius:var(--r-sm);
  padding:2px 8px;
}
[data-theme="dark"] .doc-no{color:var(--gold-400)}

/* ---------- 10. الجداول — تتحول لبطاقات في الموبايل ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl thead th{
  text-align:start;font-weight:600;font-size:.78rem;color:var(--gold-050);
  background:var(--ink-700);padding:11px 13px;white-space:nowrap;position:sticky;top:0;
}
.tbl thead th:first-child{border-start-start-radius:var(--r)}
.tbl thead th:last-child{border-start-end-radius:var(--r)}
.tbl td{padding:12px 13px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--paper-100) 60%,transparent)}
.tbl tbody tr:hover{background:var(--gold-050)}
.tbl .t-main{font-weight:600}
.tbl .t-sub{font-size:.76rem;color:var(--fg-2)}

@media (max-width:860px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tbody tr{
    background:var(--surface)!important;border:1px solid var(--line);border-radius:var(--r-lg);
    margin-bottom:10px;box-shadow:var(--sh-1);overflow:hidden;position:relative;
    padding-inline-start:5px;
  }
  .tbl tbody tr::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--gold-500)}
  .tbl td{
    display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;
    padding:10px 13px;border-bottom:1px dashed var(--line-soft);text-align:end;
  }
  /* السطر الفرعي ينزل تحت في وضع البطاقات */
  .tbl td .t-sub{flex:0 0 100%;text-align:end}
  .tbl td:last-child{border-bottom:0}
  .tbl td::before{
    content:attr(data-l);font-size:.76rem;color:var(--fg-2);font-weight:500;
    text-align:start;flex:none;
  }
  .tbl td[data-l=""]::before{display:none}
}

/* ---------- 11. مسار الموافقات ---------- */
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;inset-block:14px 14px;inset-inline-start:13px;width:2px;background:var(--line)}
.steps li{position:relative;padding-inline-start:40px;padding-block:9px}
.steps .dot{
  position:absolute;inset-inline-start:0;top:11px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);
  font-size:.72rem;font-weight:700;color:var(--text-300);z-index:1;
}
.steps li.done .dot{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.steps li.now .dot{background:var(--wait-bg);border-color:var(--gold-500);color:var(--gold-700);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold-400) 35%,transparent)}
.steps li.no .dot{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.steps .who{font-weight:600;font-size:.9rem}
.steps .when{font-size:.76rem;color:var(--fg-2)}
.steps .note{font-size:.8rem;color:var(--text-700);background:var(--paper-100);
  border-inline-start:3px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;margin-top:6px}

/* ---------- 12. اللوح السفلي (الفلاتر) ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(11,36,29,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:.24s var(--ease)}
.scrim.open{opacity:1;visibility:visible}
.sheet{
  position:fixed;inset-inline:0;bottom:0;z-index:61;max-height:88dvh;overflow:auto;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:3px solid var(--gold-500);
  transform:translateY(101%);transition:transform .3s var(--ease);
  padding:0 15px calc(18px + env(safe-area-inset-bottom));
  box-shadow:var(--sh-3);
}
.sheet.open{transform:translateY(0)}
.sheet-h{position:sticky;top:0;background:var(--surface);padding:12px 0 10px;
  display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line-soft);margin-bottom:14px;z-index:2}
.sheet-h h3{flex:1}
.grip{width:42px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 2px}

/* ---------- 13. الشرائح والتبويبات ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding-block:2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:40px;display:inline-flex;align-items:center;gap:6px;
  padding:0 14px;border-radius:99px;font-size:.84rem;font-weight:500;
  background:var(--surface);border:1px solid var(--line);color:var(--text-700);cursor:pointer;
  transition:.16s var(--ease);
}
.chip.on{background:var(--ink-700);border-color:var(--ink-700);color:var(--gold-050)}
.chip .c{font-family:var(--f-num);font-size:.74rem;opacity:.8}

.tabs{display:flex;gap:2px;background:var(--paper-200);padding:4px;border-radius:var(--r);overflow-x:auto}
.tabs button{flex:1;min-width:max-content;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-sm);
  background:transparent;font-size:.86rem;font-weight:500;color:var(--text-700);cursor:pointer;transition:.16s}
.tabs button.on{background:var(--surface);color:var(--ink-700);font-weight:600;box-shadow:var(--sh-1)}

/* ---------- 14. حالات فارغة وتنبيهات ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--fg-2)}
.empty .seal{margin-inline:auto;margin-bottom:14px;opacity:.5}
.note{
  display:flex;gap:11px;padding:12px 14px;border-radius:var(--r);
  background:var(--gold-050);border:1px solid var(--gold-200);
  border-inline-start:4px solid var(--gold-500);font-size:.86rem;
}
.note.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 25%,transparent);border-inline-start-color:var(--bad)}
.note.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 22%,transparent);border-inline-start-color:var(--ok)}

/* ---------- 15. الحركة ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* الختم يهبط ولا يتمدد: scale(1.5) كان يخرج الختم عن عرض الشاشة على الموبايل
   فيظهر تمرير أفقي للصفحة لحظة التحميل — والقاعدة أن لا تمرير أفقي إطلاقاً. */
@keyframes stamp{0%{opacity:0;transform:scale(.88) rotate(-6deg)}60%{opacity:1;transform:scale(1.02) rotate(1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.rise{animation:rise .5s var(--ease) both}
.rise:nth-child(1){animation-delay:.04s} .rise:nth-child(2){animation-delay:.1s}
.rise:nth-child(3){animation-delay:.16s} .rise:nth-child(4){animation-delay:.22s}
.rise:nth-child(5){animation-delay:.28s} .rise:nth-child(6){animation-delay:.34s}
.stamp{animation:stamp .7s var(--ease) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 16. التابلت ---------- */
@media (min-width:640px){
  body{font-size:15.5px}
  .content{padding:22px 22px calc(var(--tabbar) + 28px)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .card-b{padding:18px}
  h1{font-size:1.7rem}
}

/* ---------- 17. اللابتوب: قائمة جانبية بدل الشريط السفلي ---------- */
@media (min-width:1024px){
  :root{--tap:42px}
  .shell{flex-direction:row}
  .tabbar,.fab{display:none}
  .sidenav{
    display:flex;flex-direction:column;width:var(--side);flex:none;
    position:sticky;top:0;height:100dvh;overflow:auto;
    background:linear-gradient(180deg,var(--ink-800),var(--ink-900));color:#DDE5DF;
    border-inline-start:1px solid var(--gold-700);
  }
  .sidenav .brand{padding:18px 16px 14px;display:flex;align-items:center;gap:11px;
    border-bottom:1px solid rgba(232,219,182,.14)}
  .sidenav .brand .org{font-family:var(--f-doc);font-size:1.02rem;font-weight:700;color:#F3EEDF;line-height:1.3}
  .sidenav .brand .sys{font-size:.68rem;color:var(--gold-400)}
  .sidenav nav{padding:10px 9px;flex:1}
  .sidenav .grp{font-size:.68rem;color:var(--ink-300);letter-spacing:.08em;padding:14px 9px 6px}
  .sidenav a{
    display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r);
    color:#C6D3CC;font-size:.9rem;margin-bottom:2px;transition:.15s var(--ease);
  }
  .sidenav a:hover{background:rgba(255,255,255,.07);color:#fff}
  .sidenav a.on{background:linear-gradient(90deg,rgba(180,145,60,.22),transparent);
    color:#F6F0DE;font-weight:600;box-shadow:inset 2px 0 0 var(--gold-500)}
  .sidenav svg{width:19px;height:19px;flex:none;opacity:.9}
  .sidenav .foot{padding:12px 14px;border-top:1px solid rgba(232,219,182,.14);font-size:.76rem;color:var(--ink-300)}
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .topbar{height:var(--bar);padding-inline:22px}
  .content{padding:24px 26px 40px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .btn{min-height:40px}
  .btn--sm{min-height:34px}
  .ico-btn{width:40px;height:40px}
  .chip{min-height:34px}
  .tabs button{min-height:38px}
  .input,.select,.textarea{min-height:40px;font-size:.92rem;padding:8px 12px}
  .sheet{
    inset-inline:0;margin-inline:auto;width:min(900px,92vw);
    top:50%;bottom:auto;max-height:84vh;
    border-radius:var(--r-lg);border:1px solid var(--line);border-top:3px solid var(--gold-500);
    padding:0 20px 20px;
    transform:translateY(-46%) scale(.98);opacity:0;visibility:hidden;
    transition:transform .24s var(--ease),opacity .24s var(--ease),visibility .24s;
  }
  .sheet.open{transform:translateY(-50%) scale(1);opacity:1;visibility:visible}
  .sheet .grip{display:none}
}
@media (min-width:1400px){ :root{--side:284px} }

/* ---------- 18. المطبوعات ---------- */
.doc{
  background:#fff;color:#111;max-width:820px;margin-inline:auto;
  padding:26px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  font-family:var(--f-doc);box-shadow:var(--sh-2);
}
.doc-head{text-align:center;position:relative}
.doc-head .seal{margin-inline:auto;margin-bottom:8px}
.doc-head .org{font-size:1.5rem;font-weight:700;letter-spacing:.01em;line-height:1.3}
.doc-head .org2{font-size:1.05rem;color:#3A423D}
.doc-head .tagline{font-size:.9rem;color:#5A625C;margin-top:3px}
.doc-title{
  display:inline-block;margin:12px auto 0;padding:5px 26px;
  font-size:1.18rem;font-weight:700;border:2px solid var(--gold-600);border-radius:var(--r-sm);
  background:var(--gold-050);
}
.doc-meta{display:grid;grid-template-columns:1fr;gap:4px 18px;font-size:.92rem;margin:16px 0}
.doc-meta .r{display:flex;gap:8px;border-bottom:1px dotted #C9C2B0;padding-bottom:4px}
.doc-meta .r b{font-weight:700;color:#2A312C;flex:none}
/* مطبوعة التقرير تكتب سطورها بـ`.k`/`.v` لا بـ`.r b`، فكانت بلا تنسيق:
   «عدد السطور٩» و«التقريركشف حساب الأصناف» ملتصقين بلا فاصل ولا تمييز. */
.doc-meta > div{display:flex;gap:8px;align-items:baseline;
  border-bottom:1px dotted #C9C2B0;padding-bottom:4px}
.doc-meta .k{font-weight:700;color:#2A312C;flex:none}
.doc-meta .k::after{content:":"}
.doc-meta .v{min-width:0;overflow-wrap:anywhere}
.doc-meta .v.num{font-family:var(--f-num)}
.doc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
.doc table{width:100%;min-width:480px;border-collapse:collapse;font-family:var(--f-ui);font-size:.86rem}
/* `color` إلزامية هنا: `.tbl thead th` تلوّن النص `--gold-050` لأن خلفيتها
   داكنة، وهذه القاعدة تقلب الخلفية إلى **اللون نفسه** — فيصير النص أبيض على
   أبيض بتباين ١:١. رأس جدول البنود كان موجوداً في المستند وغير مقروء: يوقّع
   الموظف على ورقة فيها عمودان رقميان («الكمية» و«بالوحدة الأساسية») بلا ما
   يميّزهما، وهو الفرق الجوهري في إذنٍ بوحدة بديلة. */
.doc table th{background:var(--gold-050);color:var(--ink-800);border:1px solid #B9B09A;
  padding:8px;font-weight:600;text-align:start}
.doc table td{border:1px solid #C9C2B0;padding:8px}
.doc table td.num{font-family:var(--f-num)}
.doc-note{margin-top:14px;font-size:.9rem;border:1px dashed #B9B09A;padding:9px 12px;border-radius:var(--r-sm);min-height:52px}

/* جدولُ مطبوعةٍ صار بطاقات لا أرضيةَ عرضٍ له.
   `.doc table{min-width:480px}` صحيحةٌ ما دام الجدول جدولاً — تمنع انسحاق
   الأعمدة وتترك `.doc-scroll` يمرّره. لكن دون ٨٦٠ بكسل يتحوّل `.tbl` إلى
   بطاقات `display:block` بصفٍّ لكل خلية، عنوانُها في أول السطر وقيمتها في
   آخره؛ فتبقى الأرضية مطبِّقةً عرضاً ٤٨٠ على شاشة ٣٧٥ وتدفع **القيمة**
   وحدها خارج الإطار: يقرأ الموظف «رقم الصنف» و«الكمية المطلوبة» بلا رقم
   واحد بجوارها حتى يمرّر أفقياً وهو لا يعرف أن ثمّة ما يُمرَّر.
   قِيس على كل مطبوعات النظام لا على الورقة الحكومية وحدها. */
@media (max-width:860px){
  .doc table.tbl{min-width:0}
}
.signs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.sign{border:1px solid #C9C2B0;border-radius:var(--r-sm);padding:9px 11px;min-height:104px;
  display:flex;flex-direction:column;background:#FDFCF8}
.sign .role{font-weight:700;font-size:.9rem;border-bottom:1px solid #DDD6C4;padding-bottom:5px;margin-bottom:6px}
.sign .nm{font-size:.86rem;color:#3A423D}
.sign .ln{margin-top:auto;border-top:1px dotted #9A9384;padding-top:5px;font-size:.74rem;color:#6B7570;text-align:center}
.doc-foot{margin-top:20px;padding-top:10px;border-top:2px solid var(--gold-500);
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;font-size:.78rem;color:#5A625C;font-family:var(--f-ui)}
.qr{width:64px;height:64px;border:1px solid #C9C2B0;border-radius:4px;display:grid;place-items:center;
  font-size:.56rem;color:#8A8375;text-align:center;flex:none;background:#fff}

@media (min-width:640px){
  .signs{grid-template-columns:repeat(4,1fr)}
  .doc-meta{grid-template-columns:1fr 1fr}
}

@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}

  /* ===== على الورق لا توجد شاشةٌ ضيقة =====
     `.tbl` يتحول بطاقاتٍ دون ٨٦٠ بكسل، و**عرضُ صفحة الطباعة يُقاس دون ذلك**
     (A4 عرضها ٢١٠ مم = ٧٩٣ بكسل) — فكانت كل مطبوعة في النظام تخرج من
     الطابعة بصفوفٍ منهارة: رأسُ جدولٍ بعشرة أعمدة في أعلى الورقة، وتحته
     كل صنفٍ مفكوكٌ إلى عشرة أسطر بعرض الصفحة، وإذنٌ بثلاثة أصناف ينسكب
     على ثلاث صفحات. أُعيد إنتاجه بتوليد PDF فعليّ — ولم تكشفه معاينةُ
     الشاشة لأن وسيط `screen` لا يمرّ بهذا المسار أصلاً.
     فالقاعدة هنا **بعد** قواعد الموبايل وداخل `print`: الجدول جدولٌ دائماً. */
  .doc table.tbl{display:table;width:100%;min-width:0;table-layout:auto}
  .doc table.tbl thead{display:table-header-group}
  .doc table.tbl tbody{display:table-row-group}
  .doc table.tbl tr{display:table-row;margin:0;border:0;border-radius:0;
    box-shadow:none;padding:0;background:none!important;overflow:visible}
  .doc table.tbl tr::before{display:none}
  .doc table.tbl td,.doc table.tbl th{display:table-cell;width:auto;
    text-align:start;justify-content:initial;flex-wrap:initial;
    border-bottom:1px solid #C9C2B0}
  .doc table.tbl td::before{display:none}
  .doc table.tbl th.c-num,.doc table.tbl td.c-num{text-align:center}
  /* وصفوف الورقة الفارغة وخانتا القلم تعودان: هما جزء النموذج الذي يُكتب بالقلم */
  .doc table.gov-tbl .gov-empty{display:table-row}
  .doc table.gov-tbl td.gov-pen{display:table-cell}
  body::before,.topbar,.tabbar,.sidenav,.fab,.no-print,.scrim,.sheet{display:none!important}
  .content{padding:0;max-width:none}
  .doc{border:0;box-shadow:none;max-width:none;padding:0;border-radius:0}
  .doc-scroll{overflow:visible}
  .doc table{min-width:0;page-break-inside:auto} .doc tr{page-break-inside:avoid}
  .doc-meta{grid-template-columns:1fr 1fr}
  .signs{page-break-inside:avoid}
  a{color:#000}
}

/* ---------- 19. مساعدات ---------- */
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.mt{margin-top:14px} .mt-lg{margin-top:24px} .mb{margin-bottom:14px}
.center{text-align:center}
.muted{color:var(--fg-2)} .small{font-size:.8rem}
.hide-sm{display:none}
@media (min-width:640px){ .hide-sm{display:revert} .only-sm{display:none} }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   20. الإدخال السريع بالكيبورد — شاشات الصرف والإضافة
   ========================================================================== */

/* شريط الإدخال: يظل لاصقاً أعلى الجدول */
.entry{
  position:sticky;top:calc(var(--bar) + env(safe-area-inset-top));z-index:30;
  background:linear-gradient(180deg,var(--gold-050),var(--surface));
  border:1px solid var(--gold-200);border-inline-start:4px solid var(--gold-500);
  border-radius:var(--r-lg);padding:11px 12px;margin-bottom:12px;
  box-shadow:var(--sh-2);
}
.entry-row{display:grid;grid-template-columns:1fr;gap:8px}
.entry .lbl{font-size:.72rem;color:var(--fg-2);display:block;margin-bottom:3px}
.entry .input,.entry .select{min-height:46px;font-size:16px}
.entry .input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-400) 55%,transparent)}

/* حقل الكود: أيقونة الباركود بداخله */
.f-code{position:relative}
.f-code .input{padding-inline-start:40px;font-weight:600}
.f-code > svg{position:absolute;inset-inline-start:12px;top:calc(50% + 8px);transform:translateY(-50%);
  width:20px;height:20px;color:var(--gold-600);pointer-events:none}

/* قائمة الاقتراحات */
.ac{
  position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);max-height:290px;overflow:auto;display:none;
}
.ac.open{display:block}
.ac li{list-style:none;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line-soft);
  display:flex;gap:10px;align-items:center}
.ac li:last-child{border-bottom:0}
.ac li.on{background:var(--gold-050);box-shadow:inset 3px 0 0 var(--gold-500)}
.ac .nm{flex:1;min-width:0;font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .cd{font-size:.76rem;color:var(--fg-2)}
.ac .st{font-size:.76rem;font-family:var(--f-num);color:var(--ok);flex:none}
.ac .st.zero{color:var(--bad)}
.ac .empty-i{padding:14px;text-align:center;color:var(--fg-2);font-size:.86rem}

/* الصنف المختار قبل الإضافة */
.picked-item{
  display:flex;align-items:center;gap:9px;margin-top:9px;padding:7px 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.86rem;
}
.picked-item b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked-item .av{font-family:var(--f-num);color:var(--ok);flex:none}
.picked-item .av.zero{color:var(--bad)}

/* جدول السطور */
.lines{width:100%;border-collapse:collapse;font-size:.9rem}
.lines thead th{
  background:var(--ink-700);color:var(--gold-050);font-size:.76rem;font-weight:600;
  padding:9px 10px;text-align:start;white-space:nowrap;position:sticky;top:0;z-index:2;
}
.lines tbody td{padding:6px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.lines tbody tr:nth-child(even){background:color-mix(in srgb,var(--paper-100) 55%,transparent)}
.lines tbody tr.hot{animation:flash .9s var(--ease)}
@keyframes flash{0%{background:var(--gold-200)}100%{background:transparent}}
.lines .c-n{width:38px;color:var(--fg-2);font-size:.8rem}
.lines .c-i b{font-weight:600;display:block;line-height:1.4}
.lines .c-i i{font-style:normal;font-size:.74rem;color:var(--fg-2)}
.lines .c-u{width:96px}
.lines .c-q{width:104px}
.lines .c-a{width:104px;font-family:var(--f-num);color:var(--fg-2);font-size:.84rem}
.lines .c-x{width:44px}
.qin{
  width:100%;min-height:36px;padding:4px 8px;text-align:center;
  font-family:var(--f-num);font-weight:600;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);
}
.qin:focus{outline:0;border-color:var(--ink-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-400) 45%,transparent)}
.qin.is-err{border-color:var(--bad);background:var(--bad-bg)}
.xbtn{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:transparent;color:var(--bad);cursor:pointer;display:grid;place-items:center}
.xbtn:hover{background:var(--bad-bg)}

/* شريط الإجماليات */
.tot{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:10px 13px;background:var(--ink-800);color:var(--gold-050);
  border-radius:var(--r-lg);margin-top:12px;font-size:.88rem;
}
.tot b{font-family:var(--f-num);font-size:1.1rem}
.tot .sep{width:1px;height:22px;background:rgba(232,219,182,.25)}

/* دليل اختصارات الكيبورد */
.keys{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;font-size:.76rem;color:var(--fg-2)}
.keys span{display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 9px}
.keys kbd{font-family:var(--f-num);font-size:.72rem;background:var(--paper-200);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:0 5px;color:var(--fg)}

/* ---- شكل السطور على الموبايل ---- */
@media (max-width:860px){
  .lines thead{display:none}
  .lines,.lines tbody{display:block}
  .lines tbody tr{
    display:grid;grid-template-columns:30px 1fr 92px 38px;gap:2px 8px;align-items:center;
    grid-template-areas:"n i i x" "n u q x";
    background:var(--surface)!important;border:1px solid var(--line);border-radius:var(--r);
    padding:8px 10px;margin-bottom:8px;box-shadow:var(--sh-1);
  }
  .lines tbody td{display:block;padding:0;border:0}
  .lines .c-n{grid-area:n;text-align:center;font-family:var(--f-num)}
  .lines .c-i{grid-area:i}
  .lines .c-u{grid-area:u;width:auto;font-size:.82rem;color:var(--fg-2)}
  .lines .c-q{grid-area:q;width:auto}
  .lines .c-a{display:none}
  .lines .c-x{grid-area:x;width:auto}
  .qin{min-height:40px}
}

/* ---- شريط الإدخال على الشاشات الأكبر ---- */
@media (min-width:640px){
  .entry-row{grid-template-columns:1fr 130px 150px auto;align-items:end}
}
@media (min-width:1024px){
  .entry .input,.entry .select{min-height:42px;font-size:.95rem}
  .entry-row{grid-template-columns:1fr 130px 160px auto}
}

/* ==========================================================================
   21. محطة البيانات — شاشات الجداول الكبيرة (٤٠٠+ سجل)
   الفكرة: كثافة عالية، كل الإجراءات ظاهرة، والكيبورد يقود كل شيء.
   ========================================================================== */

:root{
  --row:50px;          /* ارتفاع السطر — مساحة لمس مريحة للموظف */
  --gfs:14.6px;        /* حجم خط الجدول */
  --hrow:38px;         /* ارتفاع رأس الجدول */
}
/* الوضع المضغوط لمن يريد كثافة أعلى — ولم يعد هو الافتراضي */
[data-density="compact"]{ --row:38px; --gfs:13.4px; --hrow:32px }

/* ---------- شريط الأدوات ---------- */
.wsbar{
  position:sticky;z-index:35;
  top:calc(var(--bar) + env(safe-area-inset-top));
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;
  border-bottom:2px solid var(--gold-500);
  box-shadow:0 3px 10px rgba(11,36,29,.06);
}
.wsbtn{
  /* ٤٤ نقطة: أصغر مساحة لمس مقبولة — القاعدة ٥ في ملف المشروع */
  height:44px;padding:0 15px;flex:none;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9rem;font-weight:600;color:var(--fg);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:.13s var(--ease);white-space:nowrap;
}
.wsbtn:hover{background:var(--gold-050);border-color:var(--gold-400)}
.wsbtn:active{transform:translateY(1px)}
.wsbtn[disabled]{opacity:.34;pointer-events:none}
.wsbtn svg{width:17px;height:17px;flex:none}
.wsbtn--p{
  background:linear-gradient(170deg,var(--ink-600),var(--ink-800));
  color:var(--gold-050);border-color:transparent;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(232,219,182,.2);
}
.wsbtn--p:hover{filter:brightness(1.15)}
.wsbtn--d:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.wsbtn kbd{
  font-family:var(--f-num);font-size:.64rem;line-height:1.6;
  padding:0 4px;border-radius:3px;opacity:.75;
  background:var(--paper-200);border:1px solid var(--line);color:var(--fg-2);
}
.wsbtn--p kbd{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:inherit}
.wssep{width:1px;height:22px;background:var(--line);margin-inline:3px;flex:none}
.wsgrow{flex:1;min-width:8px}

/* البحث داخل الشريط */
.wsfind{position:relative;flex:1 1 240px;min-width:170px;max-width:380px}
.wsfind input{
  width:100%;height:42px;padding:0 36px 0 34px;font-size:.92rem;
  background:var(--paper-100);color:var(--fg);
  border:1.5px solid var(--line);border-radius:var(--r);
}
.wsfind input:focus{outline:0;border-color:var(--gold-500);background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-400) 35%,transparent)}
.wsfind .ic{position:absolute;inset-inline-start:9px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--text-300);pointer-events:none}
.wsfind kbd{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  font-family:var(--f-num);font-size:.62rem;padding:1px 4px;border-radius:3px;
  background:var(--paper-200);border:1px solid var(--line);color:var(--text-300)}

/* ---------- شريط الشرائح ---------- */
.wstabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  background:var(--paper-100);border-inline:1px solid var(--line);
}
.wstabs::-webkit-scrollbar{display:none}
.wstabs button{
  flex:none;height:36px;padding:0 14px;border:0;border-bottom:2px solid transparent;
  background:transparent;font-size:.82rem;color:var(--text-700);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.wstabs button:hover{background:var(--gold-050)}
.wstabs button.on{color:var(--ink-700);font-weight:600;border-bottom-color:var(--gold-500);background:var(--surface)}
[data-theme="dark"] .wstabs button.on{color:var(--gold-400)}
.wstabs .c{font-family:var(--f-num);font-size:.7rem;padding:0 5px;border-radius:99px;
  background:var(--paper-300);color:var(--text-700)}
.wstabs button.on .c{background:var(--gold-200);color:var(--gold-700)}

/* ---------- الجدول ---------- */
.wswrap{
  border:1px solid var(--line);border-top:0;background:var(--surface);
  overflow:auto;max-height:calc(100dvh - 250px);
  overscroll-behavior:contain;
}
.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--gfs)}
/* رأس الجدول: ورق فاتح وخط واضح — الكتلة الخضراء الداكنة كانت تُتعب العين */
.grid thead th{
  position:sticky;top:0;z-index:3;
  height:var(--hrow);padding:0 11px;
  background:var(--paper-200);color:var(--text-700);
  font-size:.78rem;font-weight:600;text-align:start;white-space:nowrap;
  border-bottom:2px solid var(--ink-800);
  user-select:none;
}
.grid thead th.srt{cursor:pointer}
.grid thead th.srt:hover{background:var(--gold-050);color:var(--ink-700)}
.grid thead th i{font-style:normal;opacity:.35;margin-inline-start:3px;font-size:.8em}
.grid thead th.asc i,.grid thead th.desc i{opacity:1;color:var(--gold-600)}
.grid thead th .lk{opacity:.6;margin-inline-start:4px}

.grid tbody td{
  height:var(--row);padding:0 9px;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grid tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--paper-100) 55%,transparent)}
.grid tbody tr:hover td{background:var(--gold-050)}
.grid tbody tr.sel td{background:color-mix(in srgb,var(--gold-200) 45%,transparent)}
.grid tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--gold-500)}
.grid tbody tr.cur td{background:color-mix(in srgb,var(--gold-200) 70%,transparent)}
.grid tbody tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--ink-600)}
/* `--text-500` لا `--text-300`: صفُّ الملغى أو الموقوف **محتوى** يُقرأ، لا
   زخرفة. كان بتباين ٢٫٨١ فيصير رقم الإذن الملغى واسم مورده شبه غير مقروءين،
   والموظف يبحث عن الملغى بالذات. الحالة تُعلَن بوسمها «ملغي» لا بإخفاء الصف. */
.grid tbody tr.off td{color:var(--text-500)}
/* direction:ltr + unicode-bidi:isolate كما في `.num`: بدونهما يضع محرك
   الاتجاه ثنائي الاتجاه إشارةَ السالب **بعد** الرقم في سياق RTL، فيقرأ
   الموظف «12-» بدل «-12» — والقيمة نفسها تظهر صحيحة على الموبايل وفي
   المطبوعة، فيرى الرقم الواحد بصورتين ولا يدري أيهما الصحيحة.
   وفروق الجرد وصافي العُهد كلها أرقام سالبة. */
.grid .c-num{text-align:end;font-family:var(--f-num);font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate}
/* رقم السطر يُشار إليه في الكلام («راجع السطر الخامس») فهو محتوى — ٢٫٤٣ لا تكفي */
.grid .c-idx{width:44px;text-align:center;color:var(--text-500);font-family:var(--f-num);font-size:.74rem}
.grid .c-chk{width:34px;text-align:center}
.grid .nm{font-weight:600}
.grid .sub{color:var(--fg-2);font-size:.92em}

.gchk{width:15px;height:15px;accent-color:var(--ink-600);cursor:pointer;vertical-align:middle}

/* شريط مستوى الرصيد */
.bar{display:inline-block;width:52px;height:5px;border-radius:99px;background:var(--paper-300);
  overflow:hidden;vertical-align:middle;margin-inline-end:6px}
.bar i{display:block;height:100%;border-radius:99px}
.bar.ok i{background:var(--ok)} .bar.w i{background:var(--gold-500)} .bar.d i{background:var(--bad)}

/* أزرار الصف — ظاهرة دائماً */
.ract{display:flex;gap:4px;justify-content:flex-end}
/* الأزرار داخل الصف: مساحة لمس حقيقية وحدّ ظاهر — لا أيقونات شبحية صغيرة */
.ract button,.ract .wsbtn{
  width:36px;height:36px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text-700);cursor:pointer;transition:.12s var(--ease);
}
.ract button:hover,.ract .wsbtn:hover{background:var(--gold-050);border-color:var(--gold-500);color:var(--ink-700)}
.ract button.dz:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.ract button[disabled]{opacity:.3;cursor:not-allowed}
.ract svg{width:16px;height:16px}

/* وسم صغير داخل الجدول */
.mini{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;padding:1px 7px;border-radius:99px;
  border:1px solid transparent;white-space:nowrap;
}
.mini.ok{background:var(--ok-bg);color:var(--ok)}
.mini.w{background:var(--wait-bg);color:var(--wait)}
.mini.i{background:var(--info-bg);color:var(--info)}
.mini.d{background:var(--bad-bg);color:var(--bad)}
.mini.o{background:var(--off-bg);color:var(--off)}
.mini.lock{background:var(--paper-200);color:var(--text-500)}

/* ---------- شريط الحالة السفلي ---------- */
.wsfoot{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 10px;font-size:.78rem;color:var(--fg-2);
  background:var(--surface);
  border:1px solid var(--line);border-top:2px solid var(--line);
  border-radius:0 0 var(--r) var(--r);
}
.wsfoot b{color:var(--fg);font-family:var(--f-num)}
.wsfoot .sel-info{color:var(--gold-700);font-weight:600}
.pager{display:flex;align-items:center;gap:4px}
.pager button{
  min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--fg);font-family:var(--f-num);font-size:.88rem;cursor:pointer;
}
.pager button:hover:not([disabled]){border-color:var(--gold-500);background:var(--gold-050)}
.pager button.on{background:var(--ink-700);color:var(--gold-050);border-color:var(--ink-700);font-weight:600}
.pager button[disabled]{opacity:.35;pointer-events:none}
.psize{height:38px;padding:0 30px 0 10px;font-size:.86rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--fg)}

/* ---------- لوحة التفاصيل الجانبية ---------- */
.dpanel{
  position:fixed;z-index:70;inset-block:0;inset-inline-end:0;
  width:min(430px,100%);background:var(--surface);
  border-inline-start:1px solid var(--line);box-shadow:-18px 0 46px rgba(11,36,29,.18);
  transform:translateX(100%);transition:transform .26s var(--ease);
  display:flex;flex-direction:column;
}
.dpanel.open{transform:none}
.dpanel-h{
  display:flex;align-items:flex-start;gap:10px;padding:13px 15px;
  border-bottom:2px solid var(--gold-500);
  background:linear-gradient(180deg,var(--gold-050),var(--surface));
}
.dpanel-b{flex:1;overflow:auto;padding:15px;padding-bottom:calc(var(--tabbar) + 24px)}
.dpanel-f{padding:11px 15px;border-top:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.85rem;margin:0}
.kv dt{color:var(--fg-2)}
.kv dd{margin:0;font-weight:500}
.mv{border-inline-start:2px solid var(--line);padding-inline-start:14px;margin:0 5px 0 0;list-style:none}
.mv li{position:relative;padding-block:7px;font-size:.82rem}
.mv li::before{content:"";position:absolute;inset-inline-start:-19px;top:13px;
  width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--gold-500)}
.mv .in{color:var(--ok);font-weight:600}
.mv .out{color:var(--bad);font-weight:600}

/* تنبيه منع الحذف */
.blocked{
  display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);
  background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 25%,transparent);
  border-inline-start:3px solid var(--bad);font-size:.82rem;color:var(--bad);
}
.locked-note{
  display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);
  background:var(--paper-200);border:1px solid var(--line);
  border-inline-start:3px solid var(--text-300);font-size:.82rem;color:var(--text-700);
}

/* ---------- الموبايل: الجدول يصير سطوراً مضغوطة ---------- */
@media (max-width:900px){
  .wswrap{max-height:none;border-radius:0}
  .grid,.grid tbody{display:block}
  .grid thead{display:none}
  .grid tbody tr{
    display:grid;grid-template-columns:26px 1fr auto;gap:1px 9px;align-items:center;
    grid-template-areas:"k a e" "k b e";
    padding:8px 10px;border-bottom:1px solid var(--line-soft);
  }
  .grid tbody tr.sel{background:color-mix(in srgb,var(--gold-200) 45%,transparent)}
  .grid tbody tr.cur{background:color-mix(in srgb,var(--gold-200) 70%,transparent)}
  .grid tbody td{display:block;height:auto;padding:0;border:0;background:none!important;white-space:normal}
  .grid td[data-m="k"]{grid-area:k}
  .grid td[data-m="a"]{grid-area:a;font-weight:600;font-size:.9rem;line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .grid td[data-m="b"]{grid-area:b;font-size:.76rem;color:var(--fg-2);
    display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .grid td[data-m="e"]{grid-area:e}
  .grid td[data-m="x"]{display:none}
  .wsbar{border-radius:0;padding:6px 8px}
  /* الاسم يُخفى بصرياً لا من شجرة الوصول: display:none كان يمحو النص الوحيد داخل
     الزر فيسمعه قارئ الشاشة «زر» بلا اسم. والإخفاء مشروط بوجود رمز يعوّضه —
     زر نصّه وحده (مثل «فتح للبتّ») كان يظهر مربّعاً فارغاً بلا أي دلالة. */
  .wsbtn:has(svg) span.t{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;white-space:nowrap;clip-path:inset(50%);
  }
  /* ٤٤ نقطة عرضاً أيضاً — الزر الأيقوني كان ٣٧ فيخالف قاعدة اللمس الخامسة */
  .wsbtn{position:relative;padding:0 9px;min-width:44px;justify-content:center}
  .wsbtn kbd{display:none}
  /* الشريط اللاصق يرتفع فوق شريط التنقل السفلي — وإلا اختفى تحته كاملاً.
     ارتفاعه ٦١ بكسل وارتفاع --tabbar ٦٦، فبلا هذا السطر لا يظهر منه شيء:
     يفقد الموظف على الهاتف عدّاد «عرض س–ص من ع» وأزرار الترقيم ومنتقي عدد
     الصفوف في نحو ٢٥ شاشة قائمة. وأخواته .gfoot و .sfoot و .idle-warn
     كلها ترفع نفسها هكذا — هذا وحده كان قد سُهي عنه. */
  .wsfoot{border-radius:0;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .dpanel{inset-inline:0;inset-block:auto 0;width:100%;max-height:88dvh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);border:0;border-top:3px solid var(--gold-500)}
  .dpanel.open{transform:translateY(0)}
}

@media (min-width:1024px){
  .wswrap{max-height:calc(100dvh - 232px)}
}

/* ==========================================================================
   22. تنبيه انتهاء الجلسة — شريط ثابت يظهر قبل انتهاء مدة الخمول بدقيقة
   ========================================================================== */
.idle-warn{
  position:fixed;inset-inline:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:120;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--r-lg);
  background:var(--bad-bg);
  border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);
  border-inline-start:4px solid var(--bad);
  box-shadow:var(--sh-3);font-weight:600;font-size:.9rem;
}
.idle-warn button{
  margin-inline-start:auto;min-height:var(--tap);padding:0 18px;border:0;cursor:pointer;
  border-radius:var(--r);background:var(--ink-700);color:#fff;
  font:inherit;font-weight:700;
}
.idle-warn button:hover{background:var(--ink-600)}
/* شريط التنقل السفلي ظاهر حتى 1023px — التنبيه يرتفع فوقه في كل هذا المدى */
@media (max-width:1023px){
  .idle-warn{bottom:calc(var(--tabbar) + 12px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   23. سطر الإذن — بيانات المستند تُقرأ كجملة لا كنموذج
   يحل محل كارت «بيانات الإذن» الذي كان يبتلع نصف الشاشة
   ========================================================================== */
.decl{
  position:sticky;z-index:34;
  top:calc(var(--bar) + env(safe-area-inset-top));
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:11px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.decl .w{color:var(--fg-2);font-size:.92rem;white-space:nowrap}
.pick{position:relative;display:inline-flex;align-items:center}
.pick select,.pick input{
  appearance:none;-webkit-appearance:none;border:0;
  border-bottom:2px solid var(--gold-500);background:transparent;color:var(--fg);
  padding:5px 26px 5px 6px;font-weight:600;font-size:1rem;font-family:inherit;
  border-radius:0;min-height:40px;cursor:pointer;transition:.15s var(--ease);
}
.pick input{padding-left:6px;font-family:var(--f-num);font-size:.95rem}
.pick select:hover,.pick input:hover{background:var(--gold-050)}
.pick select:focus,.pick input:focus{outline:0;background:var(--gold-050);border-bottom-color:var(--ink-700)}
.pick.is-err select,.pick.is-err input{border-bottom-color:var(--bad)}
.pick::after{content:"";position:absolute;left:8px;top:calc(50% - 2px);pointer-events:none;
  border:4px solid transparent;border-top-color:var(--gold-600)}
.pick.no-caret::after,.pick.txt::after{display:none}

.stamp{
  margin-inline-start:auto;display:flex;align-items:center;gap:10px;
  padding:6px 14px;border:1.5px solid var(--gold-500);border-radius:var(--r);
  background:var(--gold-050);
}
.stamp .k{font-size:.68rem;color:var(--gold-700);display:block;line-height:1.3}
.stamp .v{font-family:var(--f-num);font-weight:600;font-size:1.02rem;letter-spacing:.5px;color:var(--fg)}

.decl-more{flex-basis:100%;display:none;gap:10px;flex-wrap:wrap;
  padding-top:10px;margin-top:4px;border-top:1px dashed var(--line)}
.decl-more.open{display:flex}
.decl-more label{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:var(--fg-2)}
/* حقول «البيانات الإضافية»: ١٦ نقطة و٤٤ نقطة لمس — أقل من ذلك يُكبّر سفاري الصفحة */
.decl-more input,.decl-more textarea{
  border:1px solid var(--line);border-radius:6px;padding:10px 11px;min-height:44px;
  background:var(--paper-100);color:var(--fg);font-family:inherit;font-size:1rem;min-width:220px}
.decl-more input:focus,.decl-more textarea:focus{outline:2px solid var(--gold-500);outline-offset:-1px;background:var(--surface)}
/* زر «بيانات إضافية»: مساحة لمس ٤٤ نقطة كاملة رغم أنه يبدو رابطاً */
.more-btn{font-size:.86rem;color:var(--gold-700);text-decoration:underline;
  text-underline-offset:3px;padding:6px 8px;min-height:44px;background:none;border:0;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center}

/* ==========================================================================
   24. الجدول-النموذج — الجدول نفسه هو الإدخال
   سطر لكل صنف · خانة الصنف قابلة للبحث · الكمية ثم يفتح سطر جديد تلقائياً
   ========================================================================== */
/* بلا min-width: الإطار لا يقصّ قائمة البحث، والأعمدة تتقلّص بدل التمرير الأفقي */
.gform{--grow:52px;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.gform .g-item{min-width:0}
.gform .gitem b,.gform .gcell{max-width:100%}
.gform thead th{
  position:sticky;top:0;z-index:5;text-align:start;
  font-size:.78rem;font-weight:600;color:var(--text-700);
  padding:10px 12px;background:var(--paper-200);
  border-bottom:2px solid var(--ink-800);white-space:nowrap;
}
.gform tbody td{
  padding:0;border-bottom:1px solid var(--line-soft);
  height:var(--grow);vertical-align:middle;position:relative;
}
.gform tbody tr.cur td{background:var(--gold-050)}
.gform tbody tr.is-blank td{
  background:repeating-linear-gradient(45deg,transparent 0 8px,color-mix(in srgb,var(--gold-500) 4%,transparent) 8px 16px)}
.gform tbody tr:last-child td{border-bottom:0}

.gcell{
  width:100%;height:var(--grow);border:0;background:transparent;color:var(--fg);
  padding:0 12px;font-size:.97rem;font-weight:500;font-family:inherit;
}
.gcell:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--gold-500)}
.gcell::placeholder{color:var(--text-300);font-weight:400}
.gcell-num{font-family:var(--f-num);font-size:1.06rem;font-weight:600;text-align:center}
.gcell-num.is-err{background:var(--bad-bg);box-shadow:inset 0 0 0 2px var(--bad)}
select.gcell{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-300) 50%),
                   linear-gradient(135deg,var(--text-300) 50%,transparent 50%);
  background-position:12px calc(50% - 1px),17px calc(50% - 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-left:28px}
select.gcell:disabled{opacity:.4;cursor:not-allowed}

.gitem{display:flex;flex-direction:column;justify-content:center;height:var(--grow);padding:0 12px;pointer-events:none}
.gitem b{font-size:.96rem;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.gitem i{font-style:normal;font-family:var(--f-num);font-size:.73rem;color:var(--text-300)}

.g-n{width:48px;text-align:center;font-family:var(--f-num);color:var(--text-300);font-size:.85rem}
.g-item{min-width:250px}
.g-unit{width:130px}
.g-qty{width:124px}
.g-track{width:168px}
.g-rest{width:156px;padding:0 12px;font-family:var(--f-num);font-size:.86rem;color:var(--fg-2);white-space:nowrap}
.g-rest.bad{color:var(--bad);font-weight:600}
.g-x{width:52px;text-align:center}
.g-x button{width:34px;height:34px;border-radius:6px;color:var(--text-300);
  display:inline-grid;place-items:center;border:0;background:none;cursor:pointer}
.g-x button:hover{background:var(--bad-bg);color:var(--bad)}

/* قائمة البحث داخل الخلية */
.gac{
  position:absolute;inset-inline:0;top:calc(100% - 1px);z-index:40;margin:0;padding:0;
  background:var(--surface);border:1.5px solid var(--gold-500);border-radius:0 0 var(--r) var(--r);
  box-shadow:0 16px 36px rgba(11,36,29,.19);max-height:300px;overflow:auto;display:none;
}
.gac.open{display:block}
.gac li{
  list-style:none;display:flex;align-items:center;gap:10px;
  padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line-soft);
}
.gac li:last-child{border-bottom:0}
.gac li.on{background:var(--gold-050)}
.gac .nm{flex:1;font-weight:600;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gac .cd{font-family:var(--f-num);font-size:.75rem;color:var(--text-300);font-weight:400;margin-inline-start:7px}
.gac .bal{font-family:var(--f-num);font-size:.82rem;font-weight:600;padding:2px 9px;border-radius:20px;
  background:var(--ok-bg);color:var(--ok);white-space:nowrap}
.gac .bal.zero{background:var(--bad-bg);color:var(--bad)}
.gac .note{padding:8px 13px;font-size:.74rem;color:var(--fg-2);
  background:var(--paper-100);border-top:1px solid var(--line-soft);position:sticky;bottom:0}
.gac .empty{padding:18px;text-align:center;color:var(--fg-2);font-size:.9rem}

/* شريط الإجراءات الثابت */
.gfoot{
  position:sticky;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));z-index:46;
  background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--gold-500);
  border-radius:0 0 var(--r) var(--r);
  box-shadow:0 -4px 18px rgba(11,36,29,.08);
  display:flex;align-items:center;gap:12px;padding:11px 14px;flex-wrap:wrap;
}
.gfoot .t{display:flex;align-items:center;gap:9px;white-space:nowrap}
.gfoot .t .k{font-size:.75rem;color:var(--fg-2)}
.gfoot .t .v{font-family:var(--f-num);font-size:1.26rem;font-weight:600}
.gfoot .sep{width:1px;height:30px;background:var(--line)}

/* الموبايل: كل سطر بطاقة */
@media (max-width:860px){
  .decl{padding:10px 12px;gap:6px}
  .stamp{margin-inline-start:0;flex-basis:100%;justify-content:space-between}
  .gform{min-width:0}
  .gform thead{display:none}
  .gform tbody tr{display:grid;grid-template-columns:32px 1fr 108px;gap:6px 8px;
    padding:10px;border-bottom:1px solid var(--line);align-items:center}
  .gform tbody td{height:auto;border:0;background:none!important}
  .gcell,.gitem{height:46px}
  .g-n{grid-row:1/3;align-self:start;padding-top:12px}
  .g-item{grid-column:2/4}
  .g-unit{grid-column:2;width:auto}
  .g-qty{grid-column:3;width:auto}
  .g-track{grid-column:2/4;width:auto}
  .g-rest{grid-column:2/4;width:auto;font-size:.8rem;padding:0 2px}
  .g-x{grid-column:3;grid-row:1;width:auto;text-align:left}
  .gcell{border:1px solid var(--line);border-radius:7px;background:var(--paper-100)}
  .gitem{border:1px solid var(--gold-500);border-radius:7px;background:var(--gold-050)}
  .gfoot{padding:12px}
  .gfoot .btn{flex:1 1 100%}
}

/* ==========================================================================
   25. الوضع الليلي للمكوّنات الجديدة
   المتغيرات وحدها لا تكفي: بعض الخلفيات الصريحة تحتاج قلباً
   ========================================================================== */
[data-theme="dark"] .grid thead th{
  background:var(--paper-200);color:var(--fg);border-bottom-color:var(--gold-600);
}
[data-theme="dark"] .grid thead th.srt:hover{background:var(--paper-300);color:var(--gold-400)}

[data-theme="dark"] .gform thead th{
  background:var(--paper-200);color:var(--fg);border-bottom-color:var(--gold-600);
}
[data-theme="dark"] .gform tbody tr.cur td{background:color-mix(in srgb,var(--gold-500) 14%,transparent)}
[data-theme="dark"] .gcell:focus{background:var(--paper-200)}
[data-theme="dark"] .gitem b{color:var(--fg)}

[data-theme="dark"] .gac{background:var(--paper-200)}
[data-theme="dark"] .gac li.on{background:color-mix(in srgb,var(--gold-500) 16%,transparent)}
[data-theme="dark"] .gac .note{background:var(--paper-300)}

[data-theme="dark"] .stamp{background:color-mix(in srgb,var(--gold-500) 12%,transparent)}
[data-theme="dark"] .stamp .k{color:var(--gold-400)}
[data-theme="dark"] .pick select:hover,[data-theme="dark"] .pick input:hover,
[data-theme="dark"] .pick select:focus,[data-theme="dark"] .pick input:focus{
  background:color-mix(in srgb,var(--gold-500) 12%,transparent);
}
[data-theme="dark"] .more-btn{color:var(--gold-400)}

[data-theme="dark"] .act .ic{background:var(--paper-300);color:var(--gold-400)}
[data-theme="dark"] .act:hover{background:color-mix(in srgb,var(--gold-500) 10%,transparent)}
[data-theme="dark"] .wait-c.on{background:color-mix(in srgb,var(--gold-500) 10%,transparent)}

[data-theme="dark"] .ract button,[data-theme="dark"] .ract .wsbtn{
  background:var(--paper-200);color:var(--fg-2);border-color:var(--line);
}
[data-theme="dark"] .ract button:hover{background:var(--paper-300);color:var(--gold-400)}

/* الشارات في الوضع الليلي: اللون الداكن على خلفية داكنة كان غير مقروء */
[data-theme="dark"] .mini.ok,[data-theme="dark"] .tag.ok{color:#7FD3A8}
[data-theme="dark"] .mini.w,[data-theme="dark"] .tag.wait{color:#E3BE63}
[data-theme="dark"] .mini.i,[data-theme="dark"] .tag.info{color:#7FC4E0}
[data-theme="dark"] .mini.d,[data-theme="dark"] .tag.bad{color:#EF9A96}
[data-theme="dark"] .mini.o,[data-theme="dark"] .tag.off{color:#A9B6B0}

/* دليل الاختصارات مطوي — يظهر لمن يطلبه فقط */
.keys-fold{margin-top:12px}
.keys-fold summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:.79rem;color:var(--fg-2);padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);width:fit-content;
}
.keys-fold summary::-webkit-details-marker{display:none}
.keys-fold summary::before{content:"⌨";font-size:.9rem;opacity:.7}
.keys-fold summary:hover{border-color:var(--gold-500);color:var(--fg)}
.keys-fold[open] summary{border-color:var(--gold-500);color:var(--fg)}
.keys-fold .keys{margin-top:8px}

@media (min-width:1024px){ .gfoot{bottom:0} }

/* سطر المستند في شاشات العرض — نفس لغة سطر الإدخال بلا حقول */
.doc-line{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:13px 15px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);
  border-inline-start:4px solid var(--gold-500);border-radius:var(--r);
}
.doc-line .w{color:var(--fg-2);font-size:.9rem}
.doc-line .v{font-size:1.04rem;font-weight:700}
.doc-line .stamp{margin-inline-start:auto}
@media (max-width:860px){ .doc-line .stamp{margin-inline-start:0;flex-basis:100%;justify-content:space-between} }

/* الوضع الليلي: تصحيحات تباين لازمة — رموز كانت تنقلب فتختفي النصوص */
[data-theme="dark"]{ --on-ink:#F3EFE3 }
:root{ --on-ink:#F6F0DE }
.btn--p,.wsbtn--p{color:var(--on-ink)}
[data-theme="dark"] .tbl thead th{background:var(--paper-200);color:var(--fg);border-bottom:2px solid var(--gold-600)}
[data-theme="dark"] .grid tbody tr.cur td{background:color-mix(in srgb,var(--gold-500) 22%,transparent);color:var(--fg)}
[data-theme="dark"] .grid tbody tr.sel td{background:color-mix(in srgb,var(--gold-500) 14%,transparent)}
[data-theme="dark"] .stamp .v,[data-theme="dark"] .doc-line .v{color:var(--fg)}

/* سطر الإذن يلتصق فعلاً: الالتصاق يفشل لو كان داخل عنصر لا يمتد بارتفاع التمرير */
.decl-host{display:contents}
/* على الموبايل الجملة تُطوى لسطرين ويبقى المهم ظاهراً */
@media (max-width:860px){
  .decl{position:static}
  .decl .w{font-size:.82rem}
  /* الحقل لا ينزل تحت ١٦ نقطة ولا تحت ٤٤ نقطة لمس مهما ضاقت الشاشة —
     أصغر من ذلك يُكبّر سفاري iOS الصفحة عند التركيز فينكسر «لا تمرير أفقي». */
  .decl select,.decl input{min-height:44px;font-size:1rem;padding-block:5px}
  .decl .stamp{padding:5px 11px}
  .decl .stamp .v{font-size:.92rem}
  .ghead{padding:9px 12px}
}

/* لوحة نتيجة رفع السطور من ملف */
.imp{
  margin:0;padding:11px 14px;border-bottom:1px solid var(--line);
  background:var(--paper-100);font-size:.88rem;
}
.imp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imp-h b{font-weight:700}
.imp-bad{color:var(--bad);font-weight:600}
.imp-x{margin-inline-start:auto;width:30px;height:30px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--fg-2);cursor:pointer}
.imp-x:hover{border-color:var(--bad);color:var(--bad)}
.imp-list{margin:9px 0 0;padding:0;list-style:none;max-height:168px;overflow:auto;
  display:flex;flex-direction:column;gap:4px}
.imp-list li{display:flex;gap:9px;align-items:baseline;font-size:.83rem;color:var(--bad)}
.imp-ln{font-family:var(--f-num);font-size:.76rem;color:var(--fg-2);flex:none;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 7px}

/* ==========================================================================
   26. النموذج كجملة — شاشات البيانات الأساسية
   السطر يُقرأ: «إدارة اسمها … كودها … تابعة لـ …» بدل حقول مربّعة متراصّة.
   نفس لغة سطر الإذن (القسم ٢٣) لكن بلا التصاق: النموذج هنا ليس فوق جدول.
   ========================================================================== */
.decl.flow{
  position:static;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-inline-start:4px solid var(--gold-500);border-radius:var(--r);
  padding:13px 15px;margin-bottom:12px;gap:9px;
}
.decl.flow .lead{
  font-family:var(--f-doc);font-size:1.14rem;font-weight:700;color:var(--ink-700);
  white-space:nowrap;padding-inline-end:2px;
}
[data-theme="dark"] .decl.flow .lead{color:var(--gold-400)}

/* حقل نصي داخل الجملة: بخط الواجهة لا بخط الأرقام، ويتمدد بما يُكتب فيه */
.pick.txt input,.pick.txt textarea{
  font-family:inherit;font-size:1rem;font-weight:600;padding-inline:7px;
  min-width:13ch;width:auto;max-width:min(44ch,100%);field-sizing:content;
}
.pick.txt.sm input{min-width:8ch}
.pick.txt.lg input{min-width:22ch}
.pick.txt.xl input{min-width:30ch;max-width:min(60ch,100%)}
.pick.code input{font-family:var(--f-num);font-size:1rem;letter-spacing:.3px}
.pick input[readonly],.pick select:disabled,.pick input:disabled{
  opacity:.72;cursor:default;border-bottom-style:dashed;
}
.pick input[readonly]:hover,.pick select:disabled:hover{background:transparent}
/* لاحقة بعد الحقل — «قطعة» بعد معامل التحويل مثلاً */
.pick .u{font-size:.82rem;color:var(--fg-2);margin-inline-start:5px;white-space:nowrap}

/* قائمة اختيار طويلة (الصلاحيات · المخازن · الإدارات) — سطر لكل خيار */
.plist{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;margin-bottom:12px}
.plist-h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 13px;border-bottom:2px solid var(--ink-800);background:var(--paper-200);
}
[data-theme="dark"] .plist-h{background:var(--paper-200);border-bottom-color:var(--gold-600)}
.plist-h h3{font-family:var(--f-doc);font-size:1.04rem;font-weight:700}
.plist-h .n{font-family:var(--f-num);font-size:.76rem;font-weight:600;
  background:var(--ink-800);color:var(--gold-400);border-radius:20px;padding:2px 10px}
.plist-h .filter{
  margin-inline-start:auto;min-height:38px;min-width:190px;font-size:16px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 11px;
  background:var(--paper-100);color:var(--fg);font-family:inherit;
}
.plist-h .filter:focus{outline:2px solid var(--gold-500);outline-offset:-1px;background:var(--surface)}
.plist-g{
  font-size:.78rem;font-weight:600;color:var(--gold-700);letter-spacing:.03em;
  padding:9px 13px 5px;background:var(--paper-100);border-bottom:1px solid var(--line-soft);
}
[data-theme="dark"] .plist-g{color:var(--gold-400)}
.plist label{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 13px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);font-size:.95rem;
}
.plist label:last-child{border-bottom:0}
.plist label:hover{background:var(--gold-050)}
.plist label.off{opacity:.6;cursor:default}
.plist input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--ink-600);cursor:pointer}
.plist input[type=checkbox]:disabled{cursor:default}
.plist label .sub{color:var(--fg-2);font-size:.82rem;margin-inline-start:auto;white-space:nowrap}
.plist .empty{padding:22px;text-align:center;color:var(--fg-2);font-size:.9rem}
@media (min-width:900px){
  .plist-rows{display:grid;grid-template-columns:1fr 1fr}
  .plist-g{grid-column:1/-1}
  .plist label:nth-child(even){border-inline-start:1px solid var(--line-soft)}
}

/* شريط حفظ لاصق للنماذج — نفس شريط الجدول-النموذج */
.sfoot{
  position:sticky;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));z-index:46;
  background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--gold-500);
  border-radius:var(--r);box-shadow:0 -4px 18px rgba(11,36,29,.08);
  display:flex;align-items:center;gap:11px;padding:11px 14px;flex-wrap:wrap;margin-top:14px;
}
.sfoot .hint-t{font-size:.79rem;color:var(--fg-2)}
@media (min-width:1024px){ .sfoot{bottom:0} }
@media (max-width:640px){ .sfoot .btn{flex:1 1 100%} }

/* بطاقة الحقائق — شاشات العرض: مفتاح وقيمة، لا كروت متداخلة */
.facts{
  /* minmax(0,…) لا 1fr وحدها: الحد الأدنى التلقائي للعمود هو min-content، وقيمة
     طويلة (قائمة مخازن النطاق مثلاً) ترفعه فوق عرض الإطار، ومع overflow:hidden
     يُقصّ طرف كل سطر بلا تمرير أفقي يكشفه. */
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;margin-bottom:12px;
}
.facts > div{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line-soft);min-height:48px;
}
.facts > div:last-child{border-bottom:0}
.facts .k{font-size:.8rem;color:var(--fg-2);flex:0 0 148px}
.facts .v{font-size:.98rem;font-weight:600;flex:1;min-width:0;overflow-wrap:anywhere}
.facts .v.num{font-family:var(--f-num);font-weight:600}
@media (min-width:900px){
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .facts > div:nth-child(even){border-inline-start:1px solid var(--line-soft)}
  .facts > div.wide{grid-column:1/-1}
}

/* سطر الجملة على الموبايل: الكلمات تُلفّ والحقول تكبر */
@media (max-width:860px){
  .decl.flow{padding:11px 12px;gap:7px;align-items:center}
  .decl.flow .lead{flex-basis:100%;font-size:1.02rem}
  .pick.txt input{min-width:11ch}
  .pick.txt.lg input,.pick.txt.xl input{min-width:100%;flex:1}
  .plist-h .filter{margin-inline-start:0;flex:1 1 100%}
}

/* شارة عدد التنبيهات فوق أيقونة الجرس */
.bdg{
  position:absolute;top:2px;inset-inline-end:2px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--bad);color:#fff;font-family:var(--f-num);font-size:.64rem;font-weight:700;
  line-height:1;border:1.5px solid var(--surface);
}
.topbar .bdg{border-color:var(--ink-900)}

/* زر «المزيد» في شريط الموبايل — نفس هيئة الروابط تماماً */
.tabbar button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.66rem;color:var(--text-500);min-height:var(--tap);
  background:none;border:0;cursor:pointer;font-family:inherit;
}
.tabbar button svg{width:22px;height:22px}

/* قائمة لوح «المزيد» — كل شاشات النظام على الموبايل */
.navlist{display:flex;flex-direction:column}
.navlist .grp{
  font-size:.7rem;color:var(--gold-700);letter-spacing:.05em;
  padding:14px 4px 6px;font-weight:600;
}
[data-theme="dark"] .navlist .grp{color:var(--gold-400)}
.navlist a,.navlist .off{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;
  border-radius:var(--r);color:var(--fg);text-decoration:none;font-size:.97rem;
  border:1px solid transparent;
}
.navlist a:hover{background:var(--gold-050);border-color:var(--line)}
.navlist a.on{background:var(--gold-050);border-color:var(--gold-500);font-weight:600}
.navlist .off{opacity:.5}
.navlist svg{width:21px;height:21px;flex:none;opacity:.85}
.navlist b{flex:1;font-weight:inherit}

/* ==========================================================================
   27. تشديد الموبايل — القاعدة ٥: لا تمرير أفقي · ١٦ نقطة للحقل · ٤٤ للمس
   قياسات فعلية على عرض ٣٧٥ كشفت هذه المخالفات، وهذا موضع إصلاحها الواحد.
   ========================================================================== */

/* حقل الملف عرضه الأصلي ٤٦٧ بكسل — بلا تقييد يدفع الصفحة كلها للتمرير الأفقي */
.pick{max-width:100%;min-width:0}
.pick input[type=file]{width:100%;max-width:100%;min-width:0;cursor:pointer}

/* خلية الجدول-النموذج: ١٦ نقطة وإلا كبّر سفاري iOS الصفحة عند التركيز */
.gcell{font-size:1rem}
/* وحقول «بيانات إضافية» كذلك — القائمة المنسدلة فيها كانت ١٢٫١٦ نقطة
   وارتفاعها ٢٢، فتكبّر الصفحةَ عند التركيز وتخطئها الإصبع (القاعدة ٥). */
.decl-more input,.decl-more select,.decl-more textarea{font-size:1rem;min-height:44px}
.plist-h .filter{min-height:44px}

@media (max-width:1023px){
  .wstabs button{min-height:44px}
  .wsfoot select,.wsfoot .per{min-height:44px;font-size:1rem}
  .g-x button,.imp-x{width:44px;height:44px}
  .btn--sm{min-height:44px}
  /* أزرار الصف تصير أهدافاً حقيقية حين يتحول الجدول بطاقات */
  .ract button,.ract .wsbtn{min-width:44px;min-height:44px}
  /* الرابط داخل خلية الجدول (رقم الإذن في التقارير مثلاً) كان ارتفاعه ٢٢ نقطة
     فيُخطئه الإصبع ويفتح صفاً غير المقصود — يصير هدف لمس كاملاً */
  .grid tbody td[data-m="a"] > a,.grid tbody td[data-m="b"] > a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

/* شريط البحث والتصفية: الحقل والمصفّيات في صفٍّ واحد، كلها ٤٤ نقطة و١٦ نقطة خطاً.
   قبل ذلك كانت القوائم تسقط سطراً تحت الحقل بارتفاع ٢٤ نقطة وخط ١٥. */
.wsfind{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  flex:1 1 260px;max-width:min(100%,640px)}
/* min-width:0 لازمة: بدونها لا ينزل الحقل تحت عرض محتواه الأصلي (٣٢٧ بكسل)
   فيدفع الشريط كله ومعه الصفحة إلى تمرير أفقي على الموبايل. */
.wsfind input{
  flex:1 1 160px;width:auto;min-width:0;height:44px;padding:0 34px 0 12px;font-size:1rem;
  background:var(--paper-100);color:var(--fg);
  border:1.5px solid var(--line);border-radius:var(--r);
}
.wsfind select{
  height:44px;padding:0 11px;font-size:1rem;font-family:inherit;min-width:0;max-width:190px;
  background:var(--paper-100);color:var(--fg);border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;
}
.wsfind select:focus{outline:0;border-color:var(--gold-500);background:var(--surface)}
/* تلميح الاختصار يلتصق بآخر عنصر في الصف — فيُخفى حين تُضاف مصفّيات بعد الحقل */
.wsfind:has(select) kbd{display:none}

/* ==========================================================================
   28. نموذج (٢) مخازن حكومة — «طلب وإذن صرف»
   الورقة الرسمية التي تعرفها المحكمة: ثلاث كتل ترويسة، وعشرة أعمدة،
   وخمس خانات توقيع، وحاشيتان. الشكل هنا يتبع الورقة لا ذوق الشاشة.
   ========================================================================== */

/* الورقة الحكومية أعرض من المستندات الأخرى: عشرة أعمدة وثلاث كتل ترويسة
   لا تسع ٨٢٠ بكسل — قِيس فعلاً: العنوان ينكسر سطرين، ورقم الإذن ينكسر
   ثلاثة، وقيم الترويسة تلتفّ فوق خطوطها. والمطبوعة عرضية أصلاً. */
.doc--gov{max-width:1180px;padding:22px 20px}
.doc--gov .doc-title{display:none}          /* اسم المستند داخل الترويسة الوسطى */

/* ---- الترويسة الثلاثية ---- */
.gov-head{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 10px;font-size:.86rem}
.gov-col{display:flex;flex-direction:column;gap:5px;min-width:0}
.gov-f{display:flex;gap:6px;align-items:baseline;min-width:0}
/* النقطتان في نصّ الخانة نفسها («اسم الجهة :») كما في النموذج الورقي،
   فلا تُضاف ثانيةً من `.doc-meta .k::after` الموروثة — وإلا قُرئ «اسم الجهة ::». */
.gov-f .k{font-weight:700;color:#2A312C;flex:none}
.gov-head .k::after{content:none}
/* الخانة خطٌّ يُكتب عليه: ما سجّله النظام مطبوع، وما بقي فراغاً يُكتب بالقلم */
.gov-f .v{flex:1;min-width:0;border-bottom:1px solid #9A9384;padding-bottom:2px;
  min-height:17px;overflow-wrap:break-word}
.gov-f .v.doc-no,.gov-f .v.num{font-family:var(--f-num)}
.gov-f .v.num,.gov-f .v.doc-no{font-family:var(--f-num)}
.gov-hint{font-size:.72rem;color:#5A625C;margin-top:-2px}
.gov-model{font-size:.74rem;color:#3A423D;text-align:start}

.gov-col--mid{align-items:center;justify-content:flex-start;gap:7px}
.gov-name{font-family:var(--f-doc);font-size:1.3rem;font-weight:700;
  color:var(--ink-800);letter-spacing:.2px}
/* «مستديم / مستهلك»: الاثنان مطبوعان والمختار محاط — كما يُدوَّر بالقلم */
.gov-nature{display:flex;align-items:center;gap:6px;font-size:.88rem}
.gov-nature .opt{padding:1px 4px;color:#6B7570;border-bottom:2px solid transparent}
/* المختار يُعلَّم بخطٍّ تحته لا بكبسولة حوله: الكبسولة على ورقة رسمية
   تُقرأ زراً، والخط تحت الكلمة هو ما يفعله القلم على النموذج الورقي. */
.gov-nature .opt.is-on{font-weight:700;color:var(--ink-800);border-bottom-color:var(--ink-800)}
.gov-nature .sep{color:#9A9384}

/* دون الترويسة الثلاثية: العنوان فوق خانته لا بجوارها.
   في صفٍّ واحد يبقى للقيمة ما يفضل عن العنوان، فينكسر «صرف-2026-00020»
   أربعة أسطر بحرفين في كل سطر — رقمُ الإذن هو أول ما يبحث عنه المراجع،
   ولا يُقرأ هكذا. وبسطرٍ كامل يسع الرقم كله مرة واحدة. */
@media (max-width:759px){
  .gov-f{flex-direction:column;align-items:stretch;gap:1px}
  .gov-f .k{font-size:.76rem;font-weight:600;color:#5A625C}
  .gov-col--mid{align-items:flex-start;margin-block:4px}
}

/* الترويسة الثلاثية — من ٧٦٠ بكسل فأعلى وحدها.
   و`nowrap` **هنا لا في القاعدة العامة**: منعُ كسر رقم الإذن صحيحٌ على
   الورقة وفي الشاشة العريضة، وكان يفرض على الترويسة عرضاً أدنى ٤٨٣ بكسل
   فتدفع الصفحة كلها إلى تمرير أفقي عند ٣٧٥ — أُعيد إنتاجه بالقياس. وعلى
   الهاتف يكسر الرقم سطرين ولا يُقصّ: سطران مقروءان خيرٌ من صفحةٍ تنزلق. */
@media (min-width:760px){
  .gov-head{grid-template-columns:1.25fr auto 1.05fr;align-items:start;gap:24px}
  .gov-col--end{text-align:start}
  .gov-name{white-space:nowrap}
  .gov-f .k{white-space:nowrap}
  .gov-f .v.doc-no,.gov-f .v.num{white-space:nowrap}
}

/* ---- الجدول: عشرة أعمدة، والرأس ورقٌ لا كتلة داكنة ---- */
.gov-tbl{font-size:.8rem}
.doc--gov .doc-scroll table.gov-tbl th{padding:6px 4px;text-align:center;line-height:1.3;
  font-size:.76rem;vertical-align:middle}
.doc--gov .doc-scroll table.gov-tbl td{padding:7px 5px;height:30px;vertical-align:middle}
/* عمودٌ رقميّ في مطبوعة لم يكن يأخذ خط الأرقام: `.c-num` معرَّفة داخل `.grid`
   وحدها، فأرقام الكميات الثلاث تُقرأ بخط النص وتتفاوت عرضاً فلا تصطف. */
/* خط الأرقام للخلايا الرقمية وحدها — لا لرؤوسها.
   `th.c-num` نصّه **عربي** («الكمية المطلوبة»)، وخط الأرقام اللاتيني يرسم
   العربية بمحارف بديلة رديئة — ويظهر الأثر على الموبايل حيث يصير الرأس
   عنواناً داخل البطاقة، وعلى الورق في رأس الجدول نفسه. */
.doc--gov .doc-scroll table.gov-tbl td.c-num{font-family:var(--f-num);text-align:center;
  direction:ltr;unicode-bidi:isolate}
.doc--gov .doc-scroll table.gov-tbl th.c-num{text-align:center}
/* لا `display:table-cell` هنا عمداً.
   كانت مكتوبة استناداً إلى القاعدة ٢١ — وهي في غير موضعها: القاعدة تعالج
   صنفاً **عامّاً** (`.num`) يطابق الخلية فيُخرجها من عمودها، وقد عولج مرةً
   واحدة في `td.num{display:table-cell}` أعلى الملف. أما هنا فكانت تُبطل
   تحوّل `.tbl` إلى بطاقات دون ٨٦٠ بكسل، فيبقى جدولٌ بعشرة أعمدة جدولاً
   على شاشة ٣٧٥ — قِيس فعلاً: الاسم والقيمة يتراكبان في عمودٍ ٤٠ بكسل. */
.gov-empty td{height:30px}
/* صفوف الورقة الفارغة **للورق وحده**: على الهاتف يصير كل صفٍّ بطاقة،
   فسبعُ بطاقاتٍ خاليةٍ تحت البنود ضجيجٌ يُخفي ما تحته ولا يُكتب فيه بقلم. */
@media (max-width:860px){
  .gov-tbl .gov-empty{display:none}
  /* وخانتا القلم كذلك: على الورق خانتان فارغتان في صفٍّ، وعلى الهاتف
     تصيران **بطاقتين** لكل صنف بعنوانٍ ماليّ وقيمةٍ خالية — أربع بطاقات
     فارغة في إذنٍ بصنفين، تُبعد ما يُقرأ ولا تُكتب بقلم على شاشة. */
  .gov-tbl td.gov-pen{display:none}
}
/* الخانتان اللتان يملؤهما القلم — النظام بلا أي ماليات فلا يطبع فيهما شيئاً */
.gov-tbl td.gov-pen{background:#FCFAF3}
.gov-notes{margin-top:10px;font-size:.86rem}
/* ملاحظة مطبوعة التقرير — سطرٌ يُقرأ لا كتلةٌ تُتخطّى */
.doc-note-line{margin:10px 0;font-size:.82rem;color:#3A423D;line-height:1.75;
  border-inline-start:3px solid var(--gold-500);padding-inline-start:10px}

/* ---- خانات التوقيع الخمس ---- */
.signs--gov{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.signs--gov .sign{min-height:88px;padding:8px 9px}
.signs--gov .sign .role{font-size:.84rem;border-bottom:0;padding-bottom:0;margin-bottom:1px;text-align:center}
.signs--gov .sign .who{font-size:.78rem;color:#3A423D;text-align:center;font-weight:600}
.signs--gov .sign .ln{margin-top:auto;border-top:1px dotted #9A9384;padding-top:0;min-height:15px}

@media (min-width:860px){ .signs--gov{grid-template-columns:repeat(5,1fr)} }

.gov-foot-notes{margin-top:12px;font-size:.72rem;color:#3A423D;line-height:1.7}

/* ---- الطباعة: عشرة أعمدة لا تسع عرض A4 الطولي ---- */
@media print{
  /* النموذج الحكومي ورقةٌ **واحدة**.
     الورقة الأصلية سندٌ يُوقَّع ويُحفظ في ملف واحد، وانسكابُها على صفحتين
     يفصل التوقيعات الخمس عن البنود التي توقَّع عليها — فالمقاسات هنا مشدودة
     عمداً حتى تسع A4 عرضيةً كاملةً: ترويسةٌ أصغر، وصفوفٌ بارتفاع ٢٦ لا ٤٦. */
  .doc--gov{font-size:.74rem;padding:0}
  .doc--gov .doc-head{margin-bottom:0}
  .doc--gov .doc-head .seal{width:38px;height:38px;margin-bottom:1px}
  .doc--gov .doc-head .seal img{width:28px;height:28px}
  .doc--gov .doc-head .org{font-size:.98rem;line-height:1.1}
  .doc--gov .doc-head .org2,.doc--gov .doc-head .tagline{font-size:.66rem;line-height:1.15}
  .doc--gov .gov-head{margin:4px 0 2px;font-size:.72rem;gap:14px}
  .doc--gov .gov-name{font-size:1rem}
  .doc--gov .gov-f{gap:4px}
  .doc--gov .gov-col{gap:2px}
  .doc--gov .gov-f .v{min-height:12px;padding-bottom:0}
  .doc--gov .gov-hint,.doc--gov .gov-model{font-size:.62rem}
  .doc--gov .doc-scroll{margin-top:2px}

  /* التخصيص هنا **يطابق** قاعدة الشاشة (`.doc--gov .doc-scroll table.gov-tbl td`)
     ولا يقلّ عنها: أول صياغة كتبت `.doc--gov .gov-tbl td` بصنفين مقابل ثلاثة،
     فخسرت المواجهة وبقي الحشو ٧ بكسل على الورق — قِيس فعلاً بعد توليد PDF،
     والصفوف بقيت ٤٣ بكسل بدل ٢٤ فانسكبت التوقيعات إلى صفحة ثانية.
     قاعدةٌ لا تُطبَّق أسوأ من قاعدة خاطئة: تبدو في الملف وكأنها تعمل. */
  .doc--gov .doc-scroll table.gov-tbl th{padding:3px;font-size:.66rem;line-height:1.2}
  .doc--gov .doc-scroll table.gov-tbl td{padding:2px 4px;height:18px;
    font-size:.7rem;line-height:1.35}
  .doc--gov .doc-scroll table.gov-tbl .gov-empty td{height:18px}
  .doc--gov .signs--gov{margin-top:8px;gap:6px}
  .doc--gov .signs--gov .sign{min-height:54px;padding:4px 6px}
  .doc--gov .signs--gov .sign .role{font-size:.74rem}
  .doc--gov .signs--gov .sign .who{font-size:.68rem}
  .doc--gov .gov-foot-notes{margin-top:6px;font-size:.64rem;line-height:1.5}
  .doc--gov .doc-foot{margin-top:8px;padding-top:5px;font-size:.66rem}
  .doc--gov .qr{width:44px;height:44px;font-size:.5rem}

  /* رأس الجدول يتكرر على كل صفحة — بلا ذلك تُقرأ الصفحة الثانية أعمدةً بلا أسماء */
  .doc--gov .gov-tbl thead{display:table-header-group}
  .doc--gov .gov-tbl tfoot{display:table-footer-group}
  /* الورق يعود دائماً إلى شكل النموذج مهما كان عرض الشاشة التي طُبع منها */
  .gov-head{grid-template-columns:1.25fr auto 1.05fr;gap:20px}
  .gov-col--mid{align-items:center;margin-block:0}
  .gov-f{flex-direction:row;align-items:baseline;gap:6px}
  .gov-f .k{font-size:.86rem;font-weight:700;color:#2A312C}
  .gov-name,.gov-head .k,.gov-head .v.doc-no,.gov-head .v.num{white-space:nowrap}
  .signs--gov{grid-template-columns:repeat(5,1fr);page-break-inside:avoid}
  .gov-foot-notes{page-break-inside:avoid}
}

/* ---- جدول الكميات داخل لوح الاعتماد والتنفيذ ----
   سطرٌ لكل بند وحقلٌ واحد فيه: الحالة الغالبة «صرفٌ كامل» تحتاج ضغطةً واحدة
   لأن الحقول مملوءة سلفاً بالحد الأعلى، والتخفيض وحده يحتاج كتابة. */
.qform-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.qform{width:100%;margin:0}
.qform td,.qform th{padding:6px 8px;vertical-align:middle}
.qform .sub{display:block;font-size:.74rem;color:var(--fg-2)}
/* ١٦ نقطة وإلا كبّر سفاري iOS الصفحة عند التركيز فانكسرت «لا تمرير أفقي» */
.qform .gcell{width:100%;min-width:72px;height:44px;font-size:1rem;
  font-family:var(--f-num);text-align:center;padding:0 6px}
.qform select.gcell{font-family:var(--f-ui);text-align:start;padding:0 8px}

/* ==========================================================================
   29. شاشة التحليل — بطاقات الأرقام · الرسوم · التبويبات · الفلاتر الجانبية
   تُبنى في المحرك مرة فترثها كل التقارير. والرسوم SVG من الخادم: النظام
   قد يعمل بلا إنترنت، وقالب المطبوعات لا يحمّل جافاسكربت أصلاً.
   ========================================================================== */

/* ---- بطاقات الأرقام: فوق الجدول لا تحته ---- */
.rcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;padding:12px 14px 0}
@media (max-width:860px){ .rcards{padding:10px 10px 0;gap:8px} }
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;display:flex;flex-direction:column;gap:3px;min-width:0;
  border-inline-start:3px solid var(--line)}
.rcard .k{font-size:.78rem;color:var(--fg-2);font-weight:500}
/* `direction:ltr` و`unicode-bidi:isolate` إلزاميتان مع خط الأرقام.
   بدونهما يضع محرك النص الثنائي إشارةَ السالب **بعد** الرقم في سياق عربي:
   «٣٧−» بدل «−٣٧» — على الشاشة وعلى الورقة الموقَّعة معاً. وصافي الحركة
   عمودٌ حقيقي في تقارير هذا النظام، فالسالب ليس حالةً نادرة. */
.rcard .v{font-family:var(--f-num);font-size:1.42rem;font-weight:700;line-height:1.15;
  color:var(--fg);overflow-wrap:anywhere;
  direction:ltr;unicode-bidi:isolate;text-align:start}
.rcard .v .u{direction:rtl;unicode-bidi:isolate}
.rcard .u{font-family:var(--f-ui);font-size:.76rem;font-weight:500;color:var(--fg-2)}
.rcard .h{font-size:.72rem;color:var(--fg-2)}
.rcard--in{border-inline-start-color:var(--ok,#2E7D57)}
.rcard--out{border-inline-start-color:var(--bad,#A3392F)}
.rcard--net{border-inline-start-color:var(--gold-500)}
.rcard--warn{border-inline-start-color:#B4700F}

/* ---- الرسوم ---- */
.rcharts{display:grid;grid-template-columns:1fr;gap:10px;padding:12px 14px 0}
@media (max-width:860px){ .rcharts{padding:10px 10px 0} }
@media (min-width:1100px){ .rcharts.two{grid-template-columns:1.55fr 1fr} }
.chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px 9px;margin:0;min-width:0}
.chart-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.chart-t{font-weight:700;font-size:.88rem}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.76rem;color:var(--fg-2)}
.chart-legend .lg{display:inline-flex;align-items:center;gap:5px}
.chart-legend .lg::before{content:"";width:11px;height:3px;border-radius:2px;background:currentColor}
.chart-box{width:100%;overflow:hidden}
.chart-box svg{width:100%;height:190px;display:block}

.chart-grid{stroke:var(--line);stroke-width:1}
.chart-ax{fill:var(--fg-2);font-size:10px;font-family:var(--f-num);text-anchor:start}
.chart-ax--x{text-anchor:middle}
.chart-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-dot{stroke:var(--surface);stroke-width:1.2}

/* السلاسل: الوارد والمنصرف والصافي — ألوان من القالب فتنقلب مع الوضع الليلي */
.lg--in,.chart-line--in{color:#2E7D57;stroke:#2E7D57}
.lg--out,.chart-line--out{color:#A3392F;stroke:#A3392F}
.lg--net,.chart-line--net{color:#B4913C;stroke:#B4913C}
.lg--plain,.chart-line--plain{color:#1F5544;stroke:#1F5544}
.chart-dot--in{fill:#2E7D57} .chart-dot--out{fill:#A3392F}
.chart-dot--net{fill:#B4913C} .chart-dot--plain{fill:#1F5544}
[data-theme="dark"] .lg--in,[data-theme="dark"] .chart-line--in{color:#5FBE8E;stroke:#5FBE8E}
[data-theme="dark"] .lg--out,[data-theme="dark"] .chart-line--out{color:#E0776A;stroke:#E0776A}
[data-theme="dark"] .lg--net,[data-theme="dark"] .chart-line--net{color:#D8B166;stroke:#D8B166}
[data-theme="dark"] .lg--plain,[data-theme="dark"] .chart-line--plain{color:#7FC7AE;stroke:#7FC7AE}
[data-theme="dark"] .chart-dot--in{fill:#5FBE8E} [data-theme="dark"] .chart-dot--out{fill:#E0776A}
[data-theme="dark"] .chart-dot--net{fill:#D8B166} [data-theme="dark"] .chart-dot--plain{fill:#7FC7AE}

/* ---- الدائرة ---- */
.donut-wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.donut-wrap svg{width:140px;height:140px;flex:none}
.donut-mid{fill:var(--fg-2);font-size:9px;text-anchor:middle;font-family:var(--f-ui)}
.donut-sum{fill:var(--fg);font-size:13px;font-weight:700;text-anchor:middle;font-family:var(--f-num)}
.donut-keys{list-style:none;margin:0;padding:0;flex:1;min-width:180px;
  display:flex;flex-direction:column;gap:4px;font-size:.78rem}
.donut-keys li{display:flex;align-items:center;gap:7px;min-width:0}
.donut-keys .ky{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-keys .vl{font-family:var(--f-num);font-weight:600;direction:ltr;unicode-bidi:isolate}
.donut-keys .pc{font-family:var(--f-num);color:var(--fg-2);width:42px;text-align:end;
  direction:ltr;unicode-bidi:isolate}
.donut-keys .sw{width:11px;height:11px;border-radius:3px;flex:none}

.donut-arc--0,.sw--0{stroke:#1F5544;background:#1F5544}
.donut-arc--1,.sw--1{stroke:#B4913C;background:#B4913C}
.donut-arc--2,.sw--2{stroke:#2E7D57;background:#2E7D57}
.donut-arc--3,.sw--3{stroke:#7A6A9B;background:#7A6A9B}
.donut-arc--4,.sw--4{stroke:#A3392F;background:#A3392F}
.donut-arc--5,.sw--5{stroke:#4A7C93;background:#4A7C93}
.donut-arc--6,.sw--6{stroke:#8A8375;background:#8A8375}
/* الوضع الليلي: الألوان أعلاه مختارة للورق الفاتح، وأغمقها (`#1F5544`
   حبرُ الهوية) تباينه ١٫٩٥ على الخلفية الداكنة — أي أن أكبر شريحة في
   الدائرة تختفي في الوضع الذي يعمل به نصف الموظفين. والدائرة ليست زينة:
   هي نصف المعلومة، ونصفها الآخر جدولُ الأرقام بجوارها. */
[data-theme="dark"] .donut-arc--0,[data-theme="dark"] .sw--0{stroke:#6FB79B;background:#6FB79B}
[data-theme="dark"] .donut-arc--1,[data-theme="dark"] .sw--1{stroke:#D8B166;background:#D8B166}
[data-theme="dark"] .donut-arc--2,[data-theme="dark"] .sw--2{stroke:#5FBE8E;background:#5FBE8E}
[data-theme="dark"] .donut-arc--3,[data-theme="dark"] .sw--3{stroke:#A99AC9;background:#A99AC9}
[data-theme="dark"] .donut-arc--4,[data-theme="dark"] .sw--4{stroke:#E0776A;background:#E0776A}
[data-theme="dark"] .donut-arc--5,[data-theme="dark"] .sw--5{stroke:#7FB4CB;background:#7FB4CB}
[data-theme="dark"] .donut-arc--6,[data-theme="dark"] .sw--6{stroke:#B5AE9E;background:#B5AE9E}

/* ---- شريط الفلاتر الجانبي ----
   على اللابتوب عمودٌ ثابت بجوار النتيجة، وتحت ذلك يعود جملةً فوق الجدول
   كما كان — القاعدة ٥: لا عمود جانبي يسرق عرضاً من جدولٍ على الموبايل. */
.rlayout{display:block}
@media (min-width:1180px){
  .rlayout{display:grid;grid-template-columns:264px minmax(0,1fr);
    gap:12px;align-items:start;padding:0 14px}
  .rside{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);padding:12px;max-height:calc(100vh - 24px);overflow:auto}
  .rside .decl.flow{margin:0;flex-direction:column;align-items:stretch;gap:9px;
    background:none;border:0;padding:0;box-shadow:none}
  .rside .decl.flow .lead{font-size:.95rem;margin-bottom:2px}
  .rside .decl.flow .w{display:block;font-size:.78rem;color:var(--fg-2);margin-bottom:-4px}
  .rside .decl.flow .pick{width:100%}
  .rside .decl.flow .pick select,.rside .decl.flow .pick input{width:100%}
  .rside .decl.flow .stamp{margin:4px 0 0;width:100%}
  .rside .decl.flow > button{width:100%}
  .rmain{min-width:0}
  .rlayout .rcards,.rlayout .rcharts{padding-inline:0}
  .rlayout .wsbar{margin-inline:0}
}

/* ---- تبويبات العرض و«تجميع حسب» ---- */
.rviews{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px 0}
@media (max-width:860px){ .rviews{padding:10px 10px 0} }
.rviews .lb{font-size:.78rem;color:var(--fg-2)}
.rgroup{display:flex;align-items:center;gap:7px}
.rgroup select{height:44px;min-width:0;max-width:220px;padding:0 11px;font-size:1rem;
  font-family:inherit;background:var(--paper-100);color:var(--fg);
  border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer}
.rgroup select:focus{outline:0;border-color:var(--gold-500);background:var(--surface)}

/* ---- الرسوم والبطاقات في المطبوعة ---- */
@media print{
  .rcards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:8px;padding:0;margin:10px 0}
  .rcard{border:1px solid #C9C2B0;background:#fff;page-break-inside:avoid}
  .rcharts{display:block;padding:0;margin:10px 0}
  .chart{border:1px solid #C9C2B0;background:#fff;page-break-inside:avoid;margin-bottom:8px}
  .chart-box svg{height:150px}
  .rside,.rviews{display:none!important}
}

/* ==========================================================================
   ٢٨. لمس الموبايل — الضغط يُري الموظف ما داس عليه لا أن يُخفيه
   المتصفح يضع افتراضياً مستطيل تظليل فوق كل زر عند اللمس فيغطّي الأيقونة
   لحظة الضغط («بدوس فالأيقونة تقلب ولا أرى ما تحتها»)، و:hover يبقى لزيقاً
   بعد رفع الإصبع فيُبقي الكارت مضيئاً. نلغي الاثنين ونستبدلهما بـ:active مقصود.
   ========================================================================== */
a, button, label, summary, select, [role="button"],
.act, .wait-c, .tabbar a, .wsbtn, .ico-btn, .fab,
.ract button, .more-btn, .btn, .plist label, .navlist a {
  -webkit-tap-highlight-color: transparent;
}

/* تغذية راجعة واضحة عند الضغط — تمييز خفيف لا يطمس المحتوى */
.act:active            { background:var(--gold-050); border-color:var(--gold-500); transform:translateY(1px); }
.wait-c:active         { background:var(--gold-050); }
.tabbar a:active       { background:var(--gold-050); }
.ico-btn:active        { background:rgba(255,255,255,.22); transform:scale(.94); }
.more-btn:active       { opacity:.55; }
.navlist a:active,
.plist label:active    { background:var(--gold-050); }

/* أجهزة اللمس (لا فأرة): ألغِ hover اللزيق الباقي بعد رفع الإصبع */
@media (hover:none){
  .acts .act:hover     { background:var(--surface); border-color:var(--line); transform:none; box-shadow:none; }
  .wait-c:hover        { box-shadow:none; }
  .wsbtn:hover         { background:var(--surface); border-color:var(--line); }
  .ico-btn:hover       { background:rgba(255,255,255,.06); }
  .ract button:hover, .ract .wsbtn:hover { background:var(--surface); border-color:var(--line); color:var(--fg); }
  .g-x button:hover    { background:transparent; color:var(--fg); }
}

/* ==========================================================================
   ٢٩. شاشات الجداول على الموبايل — سكرول الصفحة، شريط أدوات مرتّب، بلا مؤشر لمس
   ثلاث علل قِيست على شاشة الأرصدة بعرض ٣٧٥: الحاوية تبلع لمس التمرير فلا
   تسكرول الصفحة إلا فوق الهيدر · شريط الفلاتر يلتفّ مكدّساً ٢١٤ بكسل ·
   مؤشر الصف (للكيبورد) يظهر على كل صنف يُلمس فيربك.
   ========================================================================== */
@media (max-width:900px){
  /* (أ) الجدول يصير بطاقات فلا يحتاج overflow — والحاوية تُعيد التمرير للصفحة */
  .wswrap{overflow:visible;overscroll-behavior:auto;max-height:none}

  /* (ب) شريط الأدوات عمودي مرتّب: البحث ثم كل قائمة سطراً كاملاً */
  .wsbar{gap:8px;padding:8px}
  .wsbar .wsgrow{display:none}
  .wsfind{flex-direction:column;align-items:stretch;gap:8px;flex:1 1 100%;max-width:none;order:-1}
  .wsfind input{flex:none;width:100%;height:46px;padding:0 40px 0 12px;font-size:1rem}
  .wsfind .ic{top:23px;transform:none}
  .wsfind select{flex:none;width:100%;max-width:none;height:46px;font-size:1rem}

  /* (ج) لا مؤشر صف على اللمس — هو للتنقل بالكيبورد على الحاسب وحده */
  .grid tbody tr.cur td{background:none}
  .grid tbody tr.cur td:first-child{box-shadow:none}
  .grid tbody tr.cur{background:transparent}
}