/* ==========================================================================
   manhl-ui.css  —  معيار الواجهة الموحّد
   مؤسسة المنهل لنظم المعلومات  |  مشروع مصنع المالكي
   --------------------------------------------------------------------------
   يُستدعى في القالب الرئيسي قبل أي ملف تنسيق آخر، ويُوضع نسخة واحدة
   في المجلد المشترك بين نشرة المصنع ونشرة الفروع.

   القواعد الحاكمة:
   1) لا يُكتب لون مباشر في أي شاشة — كل الألوان من المتغيرات أدناه.
   2) الإطار (frame) هو أداة الفصل، لا الظل ولا الخلفية.
   3) الأبيض هو الأساس دائماً، واللون يوضع على الحدّ لا على الحشوة.
   4) لكل عملية زر بلون وشكل ثابت في النظام كله.
   ========================================================================== */


/* ==========================================================================
   1 · المتغيرات
   ========================================================================== */
:root{

  /* ---- الهوية: البنفسجي ---- */
  --purple:            #4B2E9E;
  --purple-2:          #5B3FBF;
  --purple-dark:       #37226E;
  --purple-darker:     #2E1C5E;
  --purple-soft:       #EDE9F8;
  --purple-softer:     #F8F6FE;
  --purple-text:       #D9D2F2;
  --purple-label:      #8E7FC7;

  /* ---- الهوية: الذهبي ---- */
  --gold:              #F5B301;
  --gold-2:            #FFC93C;
  --gold-dark:         #B98900;
  --gold-deep:         #9A6E00;
  --gold-soft:         #FFF6DF;
  --gold-line:         #E8CB7A;

  /* ---- الهوية: التركوازي (لون الصفحات) ---- */
  --teal-dark:         #115E59;
  --teal:              #0F766E;
  --teal-2:            #14A69A;
  --teal-line:         #C5E4DF;
  --teal-soft:         #D7EEEB;
  --teal-bg:           #F0FAF9;
  --teal-bg-2:         #DFF3F0;
  --teal-muted:        #8AA5A1;

  /* ---- الحالات ---- */
  --danger:            #C1121F;
  --danger-2:          #E03A47;
  --danger-line:       #F3C6C9;
  --danger-bg:         #FDEBEC;
  --danger-text:       #8E1017;

  --success:           #0F766E;
  --success-line:      #BFE3DE;
  --success-bg:        #F0FAF9;

  --warn:              #B98900;
  --warn-line:         #E8CB7A;
  --warn-bg:           #FFF6DF;
  --warn-text:         #7A5600;

  --info:              #4B2E9E;
  --info-line:         #D5CCEE;
  --info-bg:           #F1EEFA;

  /* ---- الأساس والنص ---- */
  --white:             #FFFFFF;
  --bg-page:           #FFFFFF;
  --ink:               #2C2540;
  --ink-2:             #6B6485;
  --ink-muted:         #8a84a3;
  --ink-faint:         #ADA7BF;

  /* ---- الإطار: العنصر الأساسي في التصميم ---- */
  --frame-w:           2.5px;
  --frame-color:       #A9B7C7;
  --frame-color-strong:#D2DAE3;
  --frame:             var(--frame-w) solid var(--frame-color);
  --frame-teal:        var(--frame-w) solid var(--teal-line);
  --frame-radius:      8px;
  --frame-radius-sm:   4px;
  --frame-radius-lg:   10px;

  /* ---- الصفوف ---- */
  --row-hover:         #F5F2FD;   /* درجة فاتحة جداً من البنفسجي */
  --row-selected:      #EDE9F8;
  --row-line:          #E4E9EF;
  --thead-bg:          #F4F6F9;
  --thead-text:        #6B6485;

  /* ---- المسافات ---- */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;

  /* ---- الخط ---- */
  --font:              'Cairo', sans-serif;
  --font-mono:         'Cairo', ui-monospace, monospace;

  --fs-xs:   .72rem;
  --fs-sm:   .8rem;
  --fs-base: .88rem;
  --fs-md:   .95rem;
  --fs-lg:   1.05rem;
  --fs-xl:   1.3rem;
  --fs-2xl:  1.55rem;

  --lh-tight:  1.25;
  --lh-normal: 1.7;

  /* ---- الظل: خفيف جداً، الإطار هو الفاصل ---- */
  --shadow-sm:  0 1px 3px rgba(55,34,110,.05);
  --shadow-md:  0 4px 14px rgba(55,34,110,.08);
  --shadow-lg:  0 12px 30px rgba(75,46,158,.14);

  /* ---- التخطيط ---- */
  --sidebar-w:  250px;
  --topbar-h:   60px;

  --t-fast:  .12s;
  --t-base:  .2s;
}


/* ==========================================================================
   2 · الأساس
   ========================================================================== */

/* كثافة العرض: الجذر 12px بدل 16px — كل مقاسات rem تنكمش تبعاً له */
html{ font-size:12px; }

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink);
  background:var(--bg-page);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--teal); text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--teal-2); }

h1,h2,h3,h4,h5,h6{ margin:0; font-weight:800; color:var(--purple-dark); line-height:var(--lh-tight); }

/* الأرقام والأكواد: خط أحادي المسافة ليسهل مسحها بالعين */
.num,
.code,
.doc-no{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}


/* ==========================================================================
   3 · الإطار  —  العنصر الأساسي
   --------------------------------------------------------------------------
   كل شيء في الصفحة يوضع داخل إطار: البطاقة، مربع البحث، الجدول.
   الداخل أبيض والخارج أبيض، والفاصل هو خط الحدّ وحده.
   ========================================================================== */

.frame{
  background:var(--white);
  border:var(--frame);
  border-radius:var(--frame-radius);
  margin-bottom:var(--sp-5);
}

/* رأس ملوّن ممتلئ — يفصل الأقسام بوضوح ولا يعتمد على خط باهت */
.frame-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  background:linear-gradient(135deg,var(--purple-dark),var(--purple));
  border-radius:6px 6px 0 0;
  border-bottom:var(--frame-w) solid var(--purple-dark);
}

.frame-title{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-md); font-weight:800; color:var(--white); margin:0;
}
.frame-title i{ color:var(--gold-2); }

/* رأس تركوازي — لأقسام الملخص والمعلومات */
.frame-head.teal{
  background:linear-gradient(135deg,var(--teal-dark),var(--teal));
  border-bottom-color:var(--teal-dark);
}

/* رأس هادئ — حين لا يحتاج القسم تمييزاً */
.frame-head.plain{
  background:var(--thead-bg);
  border-bottom-color:var(--frame-color);
}
.frame-head.plain .frame-title{ color:var(--teal-dark); }
.frame-head.plain .frame-title i{ color:var(--gold-dark); }

/* عناصر داخل الرأس الملوّن */
.frame-head .btn-sm{ border-color:rgba(255,255,255,.35); }
.frame-head .badge{ background:rgba(255,255,255,.16); color:var(--white); border-color:transparent; }

.frame-body{ padding:1.1rem 1.2rem; }
/* قدم الإطار: مكان الأزرار — داخل البطاقة لا خارجها،
   فلا يبحث المستخدم عن زر الحفظ أسفل الصفحة */
.frame-foot{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-4);
  border-top:var(--frame-w) solid var(--frame-color);
  background:var(--thead-bg);
  border-radius:0 0 6px 6px;
}
.frame-foot.end{ justify-content:flex-end; }

/* إطارات دلالية: يتغيّر لون الحدّ فقط، والداخل يبقى أبيض */
.frame-teal   { border-color:var(--teal-line); }
.frame-gold   { border-color:var(--gold-line); }
.frame-danger { border-color:var(--danger-line); }
.frame-success{ border-color:var(--success-line); }
.frame-purple { border-color:var(--purple-soft); }

/* إطار سميك للتأكيد (بطاقات الحالة في رأس الشاشة) */
.frame-strong{ border-width:2.5px; }

/* منطقة مجمّعة: تجمع عدة بطاقات تحت عنوان واحد */
.zone{
  background:linear-gradient(160deg,var(--teal-bg-2),var(--teal-bg));
  border:2.5px solid var(--teal-line);
  border-radius:var(--frame-radius-lg);
  padding:var(--sp-5);
  margin-bottom:var(--sp-5);
}
.zone-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4);
}
.zone-head h5{
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--teal-dark); font-size:var(--fs-md); font-weight:900; margin:0;
}
.zone-head h5 i{ color:var(--gold); }
.zone-link{
  display:flex; align-items:center; gap:var(--sp-1);
  color:var(--teal); font-weight:800; font-size:var(--fs-sm);
}


/* ==========================================================================
   4 · رأس الصفحة
   ========================================================================== */

.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5);
}
.page-title{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-lg); font-weight:900; color:var(--teal-dark); margin:0;
}
.page-title i{ color:var(--gold); }
.page-sub{ font-size:var(--fs-sm); color:var(--ink-muted); margin-top:2px; }
.page-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }


/* ==========================================================================
   5 · بطاقات الأرقام
   ========================================================================== */

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.stat-grid-3{ grid-template-columns:repeat(3,1fr); }
.stat-grid-2{ grid-template-columns:repeat(2,1fr); }

.stat{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--white);
  border:var(--frame);
  border-radius:var(--frame-radius);
  padding:var(--sp-4);
  height:100%;
  transition:border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
a.stat, a .stat{ text-decoration:none; }
.stat:hover{ border-color:var(--gold); box-shadow:var(--shadow-md); transform:translateY(-2px); }

.stat-icon{
  width:44px; height:44px; flex:0 0 44px;
  border-radius:var(--frame-radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--white);
  background:var(--teal);
}
.stat-num{ font-size:var(--fs-2xl); font-weight:900; color:var(--teal-dark); line-height:1.1; }
.stat-lbl{ font-size:var(--fs-sm); font-weight:800; color:var(--ink-2); }

/* بطاقة حالة: الإطار وحده يحمل المعنى، والداخل أبيض */
.stat-state{
  display:block; text-align:center;
  background:var(--white);
  border:2.5px solid var(--frame-color);
  border-radius:var(--frame-radius);
  padding:var(--sp-4);
}
.stat-state .lbl{ font-size:var(--fs-base); font-weight:800; margin-bottom:var(--sp-1); }
.stat-state .val{ font-size:var(--fs-xl); font-weight:900; }

.stat-state.is-danger { border-color:var(--danger); }
.stat-state.is-danger  .lbl,.stat-state.is-danger  .val{ color:var(--danger); }
.stat-state.is-success{ border-color:var(--success); }
.stat-state.is-success .lbl,.stat-state.is-success .val{ color:var(--teal-dark); }
.stat-state.is-warn   { border-color:var(--gold-dark); }
.stat-state.is-warn    .lbl,.stat-state.is-warn    .val{ color:var(--gold-deep); }
.stat-state.is-neutral{ border-color:var(--frame-color-strong); }
.stat-state.is-neutral .lbl,.stat-state.is-neutral .val{ color:var(--ink-2); }

/* ألوان أيقونات لوحة التحكم — تدرجات، للوحة فقط لا لشاشات العمل */
.ic-purple{ background:linear-gradient(135deg,#4B2E9E,#6C4FD8); }
.ic-teal  { background:linear-gradient(135deg,#0E7C66,#19B08C); }
.ic-gold  { background:linear-gradient(135deg,#B98700,#F5B301); color:var(--purple-dark); }
.ic-plum  { background:linear-gradient(135deg,#8E3B8E,#C767C7); }
.ic-amber { background:linear-gradient(135deg,#B3541E,#EE8A45); }
.ic-blue  { background:linear-gradient(135deg,#175A8C,#3D9BD9); }
.ic-danger{ background:linear-gradient(135deg,#C1121F,#E03A47); }

/* في شاشات العمل: ألوان مسطّحة لا تدرجات */
.flat .stat-icon{ background:var(--teal) !important; }


/* ==========================================================================
   6 · شرائح التنبيه
   ========================================================================== */

.chip{
  display:flex; align-items:center; gap:var(--sp-3);
  border-radius:var(--frame-radius); padding:var(--sp-3) var(--sp-4);
  height:100%; border:2px solid transparent;
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.chip i{
  width:40px; height:40px; flex:0 0 40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--white);
}
.chip .n{ font-weight:900; font-size:var(--fs-lg); line-height:1.2; }
.chip .l{ font-weight:800; font-size:var(--fs-xs); }

.chip.danger{ background:var(--danger-bg); border-color:var(--danger-line); }
.chip.danger i{ background:linear-gradient(135deg,var(--danger),var(--danger-2)); }
.chip.danger .n{ color:var(--danger); }
.chip.danger .l{ color:var(--danger-text); }

.chip.warn{ background:var(--warn-bg); border-color:var(--warn-line); }
.chip.warn i{ background:linear-gradient(135deg,var(--gold-dark),#E0A800); }
.chip.warn .n{ color:var(--gold-deep); }
.chip.warn .l{ color:var(--warn-text); }

/* الحالة الهادئة: لا مشكلة — لا تصرخ في وجه الموظف بلا سبب */
.chip.quiet{ background:#F1F7F6; border-color:#DDE9E7; }
.chip.quiet i{ background:linear-gradient(135deg,#8AA5A1,#A9C0BC); }
.chip.quiet .n{ color:#5F7975; }
.chip.quiet .l{ color:#7F918E; }


/* ==========================================================================
   7 · الأزرار  —  لون وشكل ثابت لكل عملية في النظام كله
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:800;
  padding:.5rem 1.1rem; border-radius:5px;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none; line-height:1.6;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:disabled,.btn.disabled{ opacity:.5; cursor:not-allowed; }
.btn i{ font-size:1rem; }

.btn-sm{ padding:.32rem .7rem; font-size:var(--fs-xs); }
.btn-lg{ padding:.7rem 1.4rem; font-size:var(--fs-md); }
.btn-block{ width:100%; }

/* --- عام --- */
/* الحفظ ذهبي بارز — أهم زر في أي نموذج، فيجب أن تقع عليه العين أولاً */
.btn-save    { background:var(--gold); color:var(--purple-dark); font-weight:900; }
.btn-save:hover{ background:var(--gold-2); }

/* حفظ تركوازي — لنموذج ثانوي داخل شاشة فيها حفظ رئيسي */
.btn-save-alt    { background:var(--teal); color:var(--white); }
.btn-save-alt:hover{ background:var(--teal-dark); }

.btn-new     { background:var(--gold);       color:var(--purple-dark); }
.btn-new:hover{ background:var(--gold-dark); color:var(--white); }

.btn-edit    { background:var(--white); color:var(--purple); border-color:var(--purple-soft); }
.btn-edit:hover{ background:var(--purple-soft); }

.btn-delete  { background:var(--white); color:var(--danger); border-color:var(--danger-line); }
.btn-delete:hover{ background:var(--danger); color:var(--white); border-color:var(--danger); }

.btn-search  { background:var(--purple);     color:var(--white); }
.btn-search:hover{ background:var(--purple-dark); }

.btn-reset   { background:var(--white); color:var(--ink-2); border-color:var(--frame-color-strong); }
.btn-reset:hover{ background:#F2F4F7; }

.btn-print   { background:var(--white); color:var(--teal-dark); border-color:var(--teal-line); }
.btn-print:hover{ background:var(--teal-soft); }

.btn-export  { background:var(--white); color:var(--gold-deep); border-color:var(--gold-line); }
.btn-export:hover{ background:var(--gold-soft); }

.btn-back    { background:var(--white); color:var(--ink-2); border-color:var(--frame-color); }
.btn-back:hover{ background:#F2F4F7; }

/* --- محاسبي --- */
.btn-approve { background:var(--teal-dark);  color:var(--gold-2); }
.btn-approve:hover{ background:var(--teal); }

.btn-post    { background:var(--purple-dark); color:var(--gold-2); }
.btn-post:hover{ background:var(--purple); }

.btn-unpost  { background:var(--white); color:var(--danger); border-color:var(--danger); border-style:dashed; }
.btn-unpost:hover{ background:var(--danger-bg); }

.btn-pay     { background:var(--gold);       color:var(--purple-dark); }
.btn-pay:hover{ background:var(--gold-2); }

/* --- المصنع --- */
.btn-issue   { background:var(--purple);     color:var(--white); }   /* صرف */
.btn-issue:hover{ background:var(--purple-2); }

.btn-receive { background:var(--teal);       color:var(--white); }   /* استلام */
.btn-receive:hover{ background:var(--teal-2); }

.btn-transfer{ background:var(--white); color:var(--purple); border-color:var(--purple); }  /* تحويل */
.btn-transfer:hover{ background:var(--purple); color:var(--white); }

.btn-close-order{ background:var(--gold-dark); color:var(--white); }  /* إقفال أمر */
.btn-close-order:hover{ background:var(--gold-deep); }

.btn-stocktake{ background:var(--white); color:var(--teal-dark); border-color:var(--teal); }  /* جرد */
.btn-stocktake:hover{ background:var(--teal-soft); }

/* --- زر أيقونة للجداول --- */
.btn-ico{
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:5px;
  border:1.75px solid var(--frame-color);
  background:var(--white); color:var(--ink-2);
  cursor:pointer; transition:all var(--t-fast);
}
.btn-ico:hover{ border-color:var(--purple); color:var(--purple); background:var(--purple-softer); }
.btn-ico.view   :hover{ border-color:var(--purple);   color:var(--purple); }
.btn-ico.edit   :hover{ border-color:var(--gold-dark);color:var(--gold-dark); background:var(--gold-soft); }
.btn-ico.print  :hover{ border-color:var(--teal);     color:var(--teal);     background:var(--teal-bg); }
.btn-ico.pay    :hover{ border-color:var(--gold);     color:var(--gold-deep);background:var(--gold-soft); }
.btn-ico.delete { color:var(--danger); border-color:var(--danger-line); }
.btn-ico.delete:hover{ background:var(--danger); color:var(--white); border-color:var(--danger); }

/* مجموعة إجراءات الصف: الحذف آخر الصف ومفصول بمسافة — لا يُضغط بالخطأ */
.row-actions{ display:inline-flex; align-items:center; gap:var(--sp-1); }
.row-actions .btn-ico.delete{ margin-inline-start:var(--sp-3); }


/* ==========================================================================
   8 · الجداول
   ========================================================================== */

.table-frame{
  background:var(--white);
  border:var(--frame);
  border-radius:var(--frame-radius);
  overflow:hidden;           /* الجدول يلتصق بإطاره */
  margin-bottom:var(--sp-5);
}
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

table.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-base); }

/* رأس الجدول وسطي — ليطابق الأرقام تحته.
   والأعمدة النصية تُعاد إلى اليمين بـ .text-start أدناه. */
table.tbl thead th{
  background:var(--thead-bg); color:var(--thead-text);
  font-weight:800; font-size:var(--fs-sm);
  padding:.7rem .8rem; text-align:center; white-space:nowrap;
  border-bottom:var(--frame-w) solid var(--frame-color);
}
table.tbl tbody td{
  padding:.6rem .8rem;
  border-bottom:1px solid var(--row-line);
  vertical-align:middle;
}
table.tbl tbody tr:last-child td{ border-bottom:none; }

/* التمرير: لون محسوس بلا إزعاج + شريط جانبي يحدّد الصف */
table.tbl tbody tr{
  transition:background var(--t-fast);
  box-shadow:inset 3px 0 0 0 transparent;
}
table.tbl tbody tr:hover{
  background:var(--row-hover);
  box-shadow:inset 3px 0 0 0 var(--purple);
}
table.tbl tbody tr.selected{
  background:var(--row-selected);
  box-shadow:inset 3px 0 0 0 var(--gold);
}

/* عرض مكثّف للجداول الطويلة والتقارير */
table.tbl.dense thead th{ padding:.45rem .6rem; font-size:var(--fs-xs); }
table.tbl.dense tbody td{ padding:.38rem .6rem; font-size:var(--fs-sm); }

/* ---- محاذاة أعمدة الجدول ----
   القاعدة: الأرقام وسطية لتقع تحت عناوينها مباشرة،
   والنصوص يمينية لأنها تُقرأ من اليمين.

   .cell-num   رقم  → وسط
   .cell-text  نص   → يمين  (اسم الصنف، الملاحظات)
   .num-right  رقم  → يسار عند الحاجة (أعمدة مالية متتالية) */

table.tbl .cell-num{
  text-align:center;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
table.tbl .cell-text  { text-align:right; }
table.tbl .num-right  { text-align:left; }

table.tbl .cell-total{ font-weight:900; color:var(--teal-dark); }
table.tbl .cell-due  { color:var(--danger); font-weight:800; }
table.tbl .cell-paid { color:var(--teal); }

/* عمود النص يبقى يمينياً رأساً وجسماً */
table.tbl th.text-start,
table.tbl td.text-start{ text-align:right !important; }

/* الخلية النصية الافتراضية: يمين.
   وأي خلية فيها fw-700 أو fw-800 غالباً اسم، فتُحاذى يميناً. */
table.tbl tbody td{ text-align:center; }
table.tbl tbody td.fw-700,
table.tbl tbody td.fw-800,
table.tbl tbody td.fw-900{ text-align:right; }

/* صف الإجماليات */
table.tbl tfoot td{
  background:var(--teal-bg); font-weight:900; color:var(--teal-dark);
  padding:.7rem .8rem; border-top:2px solid var(--teal-line);
  text-align:center;
}
/* عنوان صف الإجماليات يبقى يمينياً */
table.tbl tfoot td.text-start{ text-align:right !important; }

/* لا شيء لعرضه */
.tbl-empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  padding:var(--sp-8) var(--sp-4); color:var(--teal-muted);
}
.tbl-empty i{ font-size:2.2rem; color:#C5DEDA; }
.tbl-empty span{ font-weight:800; font-size:var(--fs-base); }


/* ==========================================================================
   9 · الشارات
   ========================================================================== */

.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:.18rem .6rem; border-radius:20px;
  font-size:var(--fs-xs); font-weight:800; white-space:nowrap;
  border:1px solid transparent;
}
.badge-success{ background:var(--teal-soft);  color:var(--teal-dark);  border-color:var(--teal-line); }
.badge-danger { background:var(--danger-bg);  color:var(--danger);     border-color:var(--danger-line); }
.badge-warn   { background:var(--warn-bg);    color:var(--gold-deep);  border-color:var(--warn-line); }
.badge-info   { background:var(--info-bg);    color:var(--purple);     border-color:var(--info-line); }
.badge-muted  { background:#F2F4F7;           color:var(--ink-muted);  border-color:var(--frame-color); }

/* حالات أمر الإنتاج */
.badge-draft    { background:#F2F4F7;        color:var(--ink-2);      border-color:var(--frame-color-strong); }
.badge-running  { background:var(--warn-bg); color:var(--gold-deep);  border-color:var(--warn-line); }
.badge-done     { background:var(--teal-soft);color:var(--teal-dark); border-color:var(--teal-line); }
.badge-cancelled{ background:var(--danger-bg);color:var(--danger);    border-color:var(--danger-line); }

/* حالات المستند */
.badge-posted   { background:var(--purple-soft); color:var(--purple-dark); border-color:#D5CCEE; }
.badge-unposted { background:#F2F4F7;            color:var(--ink-muted);   border-color:var(--frame-color); }


/* ==========================================================================
   10 · النماذج
   ========================================================================== */

/* شبكة النماذج — تباعد أوسع للراحة عند الإدخال الطويل.
   القاعدة: لا حقل يأخذ عرضاً أكبر مما يحتاج.
     نص قصير / قائمة / رقم / تاريخ  ← عمود واحد
     اسم طويل أو عنوان              ← عمودان  (span-2)
     ملاحظات ووصف                   ← عرض كامل (span-all) */
.form-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem 1rem; }
.form-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem 1rem; }
.form-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem 1rem; }

.span-2   { grid-column:span 2; }
.span-all { grid-column:1 / -1; }

.form-group{ margin-bottom:0; }   /* التباعد من gap لا من الهامش */

.form-label{
  display:block; font-size:var(--fs-sm); font-weight:800;
  color:var(--teal-dark); margin-bottom:3px;
}
.form-label .req{ color:var(--danger); margin-inline-start:2px; }

.form-control,
.form-select{
  width:100%; font-family:var(--font); font-size:var(--fs-base);
  color:var(--ink); background:var(--white);
  padding:.45rem .65rem;
  border:1px solid var(--frame-color-strong);
  border-radius:4px;
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.form-control:focus,
.form-select:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(75,46,158,.10);
}
.form-control::placeholder{ color:var(--ink-faint); }
.form-control:disabled,.form-control[readonly]{ background:#F7F8FA; color:var(--ink-muted); }

.form-control.is-invalid,.form-select.is-invalid{ border-color:var(--danger); background:var(--danger-bg); }
.invalid-feedback{ display:block; font-size:var(--fs-xs); color:var(--danger); margin-top:3px; font-weight:700; }
.form-hint{ font-size:var(--fs-xs); color:var(--ink-muted); margin-top:2px; line-height:1.4; }

/* حقول الإدخال الرقمي */
.form-control.num-input{ font-family:var(--font-mono); text-align:left; font-variant-numeric:tabular-nums; }

/* شريط البحث */
.search-bar{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
}
.search-bar .form-control{ flex:1; min-width:200px; }


/* ==========================================================================
   10b · مفتاح التبديل والحقول المحمية
   ========================================================================== */

/* أوضح من مربع الاختيار وأسهل ضغطاً، خصوصاً على الأجهزة اللمسية */
.switch{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  cursor:pointer; user-select:none;
}
.switch input{ position:absolute; opacity:0; width:0; height:0; }

.switch .track{
  position:relative; width:44px; height:24px; flex:0 0 44px;
  background:var(--frame-color-strong); border-radius:999px;
  transition:background var(--t-base);
}
.switch .track::after{
  content:''; position:absolute; top:3px; right:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform var(--t-base);
}
.switch input:checked + .track{ background:var(--teal); }
.switch input:checked + .track::after{ transform:translateX(-20px); }
.switch input:focus-visible + .track{ box-shadow:0 0 0 3px rgba(75,46,158,.18); }
.switch input:disabled + .track{ opacity:.5; cursor:not-allowed; }

.switch .label{ font-size:var(--fs-sm); font-weight:800; color:var(--ink); }

/* حقل للقراءة فقط — للأرقام التي يولّدها النظام: تُعرض ولا تُعدَّل */
.form-readonly{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:.5rem .7rem;
  background:var(--purple-softer);
  border:1.75px dashed var(--purple-soft);
  border-radius:var(--frame-radius-sm);
  font-family:var(--font-mono); font-weight:900;
  color:var(--purple-dark);
}
.form-readonly i{ color:var(--purple); }


/* ==========================================================================
   11 · التنبيهات
   ========================================================================== */

.alert{
  display:flex; align-items:flex-start; gap:var(--sp-2);
  padding:.7rem 1rem; border-radius:var(--frame-radius-sm);
  border:1.5px solid transparent; font-size:var(--fs-base); font-weight:700;
  margin-bottom:var(--sp-4);
}
.alert-success{ background:var(--success-bg); color:var(--teal-dark);  border-color:var(--success-line); }
.alert-danger { background:var(--danger-bg);  color:var(--danger);     border-color:var(--danger-line); }
.alert-warn   { background:var(--warn-bg);    color:var(--warn-text);  border-color:var(--warn-line); }
.alert-info   { background:var(--info-bg);    color:var(--purple-dark);border-color:var(--info-line); }


/* ==========================================================================
   12 · الشريط الجانبي
   ========================================================================== */

.sidebar{
  position:fixed; top:0; right:0; bottom:0; width:var(--sidebar-w); z-index:1040;
  background:linear-gradient(180deg,var(--purple-dark) 0%,var(--purple-darker) 100%);
  display:flex; flex-direction:column;
  transition:transform .3s ease;
}
.sidebar .brand{
  padding:var(--sp-4); text-align:center;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sidebar .brand img{ height:52px; background:var(--white); border-radius:10px; padding:3px; }
.sidebar .brand div{ color:var(--gold-2); font-weight:900; font-size:var(--fs-sm); margin-top:var(--sp-2); }

.side-menu{ flex:1; overflow-y:auto; padding:.8rem .6rem; list-style:none; margin:0; }
.side-menu::-webkit-scrollbar{ width:5px; }
.side-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:5px; }

.side-menu a{
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--purple-text); font-weight:700; font-size:var(--fs-md);
  padding:.5rem .7rem; border-radius:10px; margin-bottom:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:all var(--t-base);
}
.side-menu a i{ color:var(--gold); font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.side-menu a:hover{ background:rgba(255,255,255,.08); color:var(--white); }
.side-menu a.active{ background:var(--gold); color:var(--purple-dark); }
.side-menu a.active i{ color:var(--purple-dark); }

.side-menu .menu-label{
  color:var(--purple-label); font-size:var(--fs-xs); font-weight:800;
  padding:.8rem .8rem .3rem; letter-spacing:.5px;
}

.side-menu .group-toggle{
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  color:var(--purple-text); font-weight:800; font-size:var(--fs-md);
  padding:.5rem .7rem; border-radius:10px; margin-bottom:.15rem;
  background:transparent; border:none; cursor:pointer; transition:all var(--t-base);
}
.side-menu .group-toggle i.lead-icon{ color:var(--gold); font-size:1rem; width:20px; text-align:center; }
.side-menu .group-toggle .chevron{ margin-inline-start:auto; color:#C9BFEA; font-size:.8rem; transition:transform .25s; }
.side-menu .group-toggle:hover{ background:rgba(255,255,255,.08); color:var(--white); }
.side-menu .menu-group.open > .group-toggle{ background:rgba(245,179,1,.14); color:var(--white); }
.side-menu .menu-group.open > .group-toggle .chevron{ transform:rotate(-90deg); }

.side-menu .group-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding-inline-start:.6rem; }
.side-menu .menu-group.open > .group-body{ max-height:800px; }
.side-menu .group-body a{ font-size:var(--fs-base); font-weight:700; }


/* ==========================================================================
   13 · الترويسة والمحتوى
   ========================================================================== */

.topbar{
  position:fixed; top:0; right:var(--sidebar-w); left:0; height:var(--topbar-h); z-index:1030;
  background:var(--white); border-bottom:1px solid var(--frame-color);
  display:flex; align-items:center; gap:var(--sp-4); padding:0 1.2rem;
}
.topbar .toggle-btn{
  display:none; border:1.5px solid var(--frame-color); background:var(--white);
  color:var(--purple); border-radius:10px; width:38px; height:38px; font-size:1.1rem;
}
.topbar .bar-title{ font-weight:900; color:var(--teal-dark); font-size:var(--fs-lg); margin:0; }
.topbar .user-chip{ margin-inline-start:auto; display:flex; align-items:center; gap:var(--sp-2); }
.topbar .user-chip .avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--purple-2));
  color:var(--gold); font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.topbar .user-chip b{ font-size:var(--fs-md); }
.topbar .user-chip small{ display:block; color:var(--ink-muted); font-size:var(--fs-xs); }

.btn-logout{
  border:1.5px solid var(--danger-line); color:var(--danger); background:var(--white);
  border-radius:10px; font-weight:800; font-size:var(--fs-sm); padding:.3rem .8rem; cursor:pointer;
}
.btn-logout:hover{ background:var(--danger); color:var(--white); border-color:var(--danger); }

.content{
  margin-right:var(--sidebar-w);
  padding:calc(var(--topbar-h) + var(--sp-5)) 1.4rem var(--sp-6);
  min-height:100vh;
}

.sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1035; display:none; }
.sidebar-backdrop.show{ display:block; }


/* ==========================================================================
   14 · الترقيم
   ========================================================================== */

.pagination{ display:flex; align-items:center; justify-content:center; gap:4px; padding:var(--sp-4) 0; flex-wrap:wrap; }
.page-link{
  display:flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 .5rem;
  border:1.75px solid var(--frame-color); border-radius:var(--frame-radius-sm);
  font-size:var(--fs-sm); font-weight:700; color:var(--ink-2);
  transition:all var(--t-fast);
}
.page-link:hover{ background:var(--purple-softer); border-color:var(--purple); color:var(--purple); }
.page-link.active{ background:var(--purple-dark); border-color:var(--purple-dark); color:var(--gold-2); }
.page-link.disabled{ opacity:.4; pointer-events:none; }


/* ==========================================================================
   15 · أدوات مساعدة
   ========================================================================== */

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }

.d-flex{ display:flex; }
.align-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.flex-wrap{ flex-wrap:wrap; }
.gap-1{ gap:var(--sp-1); } .gap-2{ gap:var(--sp-2); } .gap-3{ gap:var(--sp-3); } .gap-4{ gap:var(--sp-4); }

.text-center{ text-align:center; } .text-start{ text-align:start; } .text-end{ text-align:end; }
.text-muted { color:var(--ink-muted); }
.text-teal  { color:var(--teal-dark); }
.text-purple{ color:var(--purple); }
.text-gold  { color:var(--gold-deep); }
.text-danger{ color:var(--danger); }
.fw-700{ font-weight:700; } .fw-800{ font-weight:800; } .fw-900{ font-weight:900; }
.fs-xs{ font-size:var(--fs-xs); } .fs-sm{ font-size:var(--fs-sm); } .fs-lg{ font-size:var(--fs-lg); }

.mt-1{ margin-top:var(--sp-1); } .mt-2{ margin-top:var(--sp-2); } .mt-3{ margin-top:var(--sp-3); } .mt-4{ margin-top:var(--sp-4); }
.mb-1{ margin-bottom:var(--sp-1); } .mb-2{ margin-bottom:var(--sp-2); } .mb-3{ margin-bottom:var(--sp-3); } .mb-4{ margin-bottom:var(--sp-4); }
.w-100{ width:100%; }


/* ==========================================================================
   18 · التقارير والطباعة
   --------------------------------------------------------------------------
   وثيقة التقرير كتلة تُدرج في أي شاشة — لا قالب مستقل.
   وتُطبع بالأبيض والأسود: الورق لا يحتاج ألواناً، والحبر يكلّف.
   ========================================================================== */

.report-doc{
  background:var(--white);
  border:var(--frame-w) solid var(--frame-color);
  border-radius:var(--frame-radius);
  padding:1rem 1.1rem;
  margin-bottom:var(--sp-5);
}

/* ---- ترويسة المنشأة: تظهر عند الطباعة فقط ---- */
.report-head{ display:none; }

/* ---- شريط العنوان: سطر واحد لا ثلاثة ---- */
.report-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap;
  padding-bottom:.5rem; margin-bottom:.7rem;
  border-bottom:2px solid var(--purple-dark);
}
.report-bar .title{
  font-size:var(--fs-md); font-weight:900; color:var(--purple-dark);
  display:flex; align-items:center; gap:6px;
}
.report-bar .title i{ color:var(--gold-dark); }
.report-bar .meta{
  font-size:var(--fs-xs); color:var(--ink-2); font-weight:700;
}

/* ---- جدول التقرير ---- */
.report-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }

.report-table thead th{
  background:var(--thead-bg); color:var(--ink);
  font-weight:800; font-size:var(--fs-xs);
  padding:.45rem .5rem; text-align:right; white-space:nowrap;
  border-top:1px solid var(--frame-color);
  border-bottom:2px solid var(--purple-dark);
}
.report-table tbody td{
  padding:.38rem .5rem;
  border-bottom:1px solid var(--row-line);
  vertical-align:middle;
}
.report-table tbody tr:nth-child(even){ background:#FBFCFD; }

.report-table tfoot td{
  padding:.55rem .5rem;
  background:var(--thead-bg); font-weight:900; color:var(--purple-dark);
  border-top:2px solid var(--purple-dark);
}
.report-table .tf-label{ text-align:left; }
.report-table .tf-total{ font-size:var(--fs-base); }

/* محاذاة وتمييز — أصناف قصيرة تتكرر كثيراً */
.report-table .c      { text-align:center; }
.report-table .l      { text-align:left; font-variant-numeric:tabular-nums; }
.report-table .mut    { color:var(--ink-muted); font-size:var(--fs-xs); }
.report-table .bold-p { font-weight:800; color:var(--purple-dark); }
.report-table .num-c  { text-align:left; font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- بطاقات الإجماليات ---- */
.report-summary{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:.8rem;
}
.report-sum-item{
  flex:1 1 150px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:.45rem .7rem;
  border:1px solid var(--frame-color); border-radius:5px;
  font-size:var(--fs-sm);
}
.report-sum-item span  { color:var(--ink-2); font-weight:700; }
.report-sum-item strong{ color:var(--purple-dark); font-weight:900; font-variant-numeric:tabular-nums; }
.report-sum-item.total { border-color:var(--purple-dark); border-width:2px; }
.report-sum-item.total strong{ color:var(--gold-deep); }

/* ---- التذييل ---- */
.report-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap;
  margin-top:.8rem; padding-top:.5rem;
  border-top:1px solid var(--frame-color);
  font-size:var(--fs-xs); color:var(--ink-muted); font-weight:700;
}

/* ---- حالة فارغة ---- */
.report-empty{
  text-align:center; padding:2.5rem 1rem;
  color:var(--teal-muted); font-weight:800;
}

/* ==========================================================================
   16 · الطباعة
   --------------------------------------------------------------------------
   النظام مليء بالمستندات المطبوعة: فواتير، أذون صرف، أوامر إنتاج، قيود.
   القاعدة: أبيض على أسود، بلا ألوان خلفية، بلا عناصر تنقّل.
   ========================================================================== */

@media print{

  @page{ margin:12mm; }

  html{ font-size:11px; }
  body{ background:#fff !important; color:#000 !important; }

  .sidebar,.topbar,.sidebar-backdrop,
  .page-actions,.row-actions,.pagination,
  .btn,.btn-ico,.search-bar,.no-print{ display:none !important; }

  .content{ margin:0 !important; padding:0 !important; }

  .frame,.table-frame,.zone,.stat,.stat-state{
    border:1px solid #999 !important;
    background:#fff !important;
    box-shadow:none !important;
    border-radius:0 !important;
    break-inside:avoid;
  }
  .zone{ background:#fff !important; }

  table.tbl{ font-size:10px; }
  table.tbl thead{ display:table-header-group; }   /* رأس الجدول يتكرر في كل صفحة */
  table.tbl tfoot{ display:table-footer-group; }
  table.tbl thead th{ background:#EEE !important; color:#000 !important; border-bottom:1px solid #999 !important; }
  table.tbl tbody td{ border-bottom:1px solid #DDD !important; }
  table.tbl tbody tr{ break-inside:avoid; box-shadow:none !important; background:#fff !important; }
  table.tbl tfoot td{ background:#EEE !important; color:#000 !important; }

  .badge{ border:1px solid #999 !important; background:#fff !important; color:#000 !important; }

  /* ---------- وثيقة التقرير ---------- */
  .report-doc{
    border:none !important; padding:0 !important; margin:0 !important;
    border-radius:0 !important;
  }

  /* ترويسة المنشأة: مخفية على الشاشة، تظهر على الورق */
  .report-head{
    display:block !important;
    text-align:center;
    padding-bottom:6px; margin-bottom:8px;
    border-bottom:2px solid #000;
  }
  .report-head .org{ font-size:14px; font-weight:900; color:#000; }
  .report-head .sub{ font-size:9px; color:#333; margin-top:2px; }

  .report-bar{ border-bottom:1px solid #000 !important; padding-bottom:4px; margin-bottom:6px; }
  .report-bar .title{ color:#000 !important; font-size:12px; }
  .report-bar .title i{ display:none; }
  .report-bar .meta { color:#333 !important; font-size:8.5px; }

  .report-table{ font-size:9px; }
  .report-table thead{ display:table-header-group; }   /* الرأس يتكرر في كل صفحة */
  .report-table tfoot{ display:table-footer-group; }
  .report-table thead th{
    background:#EEE !important; color:#000 !important;
    border-bottom:1.5px solid #000 !important; padding:3px 4px;
  }
  .report-table tbody td{ padding:2.5px 4px; border-bottom:1px solid #CCC !important; }
  .report-table tbody tr{ break-inside:avoid; background:#fff !important; }
  .report-table tbody tr:nth-child(even){ background:#F7F7F7 !important; }
  .report-table tfoot td{
    background:#EEE !important; color:#000 !important;
    border-top:1.5px solid #000 !important;
  }
  .report-table .bold-p{ color:#000 !important; }
  .report-table .mut   { color:#555 !important; }

  .report-summary{ break-inside:avoid; margin-top:8px; gap:6px; }
  .report-sum-item{
    border:1px solid #999 !important; padding:3px 6px; font-size:9px;
  }
  .report-sum-item span,
  .report-sum-item strong{ color:#000 !important; }
  .report-sum-item.total{ border:1.5px solid #000 !important; }

  .report-footer{
    border-top:1px solid #000 !important;
    color:#333 !important; font-size:8px;
    margin-top:8px; padding-top:4px;
  }

  /* ترقيم الصفحات */
  .report-doc{ counter-reset:page; }

  a{ color:#000 !important; text-decoration:none !important; }

  /* ترويسة المستند: تظهر عند الطباعة فقط */
  .print-only{ display:block !important; }
  .print-head{
    display:flex !important; justify-content:space-between; align-items:flex-start;
    border-bottom:2px solid #000; padding-bottom:6px; margin-bottom:10px;
  }
  .print-head h3{ font-size:14px; margin:0; }
  .print-sign{
    display:flex !important; justify-content:space-between;
    margin-top:28px; font-size:10px; font-weight:700;
  }
  .print-sign div{ border-top:1px solid #000; padding-top:4px; min-width:110px; text-align:center; }
}

.print-only{ display:none; }



/* ---- تخطيط العمود الجانبي ----
   بديل نظيف للـ style المضمّن في القوالب:

     <div class="layout-side">          ← بدل grid-2 بـ style
         <div>...المحتوى...</div>
         <aside class="side-panel">...</aside>
     </div>

   ينهار تلقائياً إلى عمود واحد على اللوحي والجوال،
   ويُلغى الالتصاق فلا يبقى العمود عالقاً في مكان خاطئ. */
.layout-side{
  display:grid;
  grid-template-columns:1fr 340px;
  align-items:start;
  gap:1rem;
}
.layout-side.narrow{ grid-template-columns:1fr 300px; }
.layout-side.wide  { grid-template-columns:1fr 380px; }

.side-panel{
  position:sticky;
  top:calc(var(--topbar-h) + 12px);
}

/* ==========================================================================
   17 · التجاوب
   ========================================================================== */

/* لوحي كبير */
@media (max-width:1200px){
  .stat-grid  { grid-template-columns:repeat(3,1fr); }
  .grid-4,.form-grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* لوحي */
@media (max-width:991.98px){
  .sidebar{ transform:translateX(100%); }
  .sidebar.open{ transform:none; }
  .topbar{ right:0; }
  .topbar .toggle-btn{ display:block; }
  .content{ margin-right:0; padding-inline:1rem; }

  .stat-grid,.stat-grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-3,.form-grid-3{ grid-template-columns:repeat(2,1fr); }

  /* العمود الجانبي ينزل تحت المحتوى بدل أن ينضغط */
  .layout-side,
  .layout-side.narrow,
  .layout-side.wide{ grid-template-columns:1fr; }

  /* الالتصاق يُلغى — وإلا بقي العمود عالقاً وحجب المحتوى.
     ويشمل الـ style المضمّن في القوالب القائمة. */
  .side-panel,
  [style*="sticky"]{ position:static !important; top:auto !important; }

  /* الشبكات المكتوبة بـ style مضمّن في القوالب:
     grid-template-columns:1fr 340px  →  عمود واحد */
  .grid-2[style*="grid-template-columns"],
  .grid-3[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}

/* جوال */
@media (max-width:767.98px){
  .stat-grid,.stat-grid-3,.stat-grid-2,
  .grid-2,.grid-3,.grid-4,
  .form-grid,.form-grid-3,.form-grid-4{ grid-template-columns:1fr; }

  /* الامتدادات تُلغى — لا معنى لـ span-2 في عمود واحد */
  .span-2,.span-all{ grid-column:auto; }

  .page-head{ flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
  .page-actions{ width:100%; flex-wrap:wrap; }
  .page-actions .btn{ flex:1 1 auto; justify-content:center; }

  table.tbl{ min-width:640px; }         /* الجدول يمرّر أفقياً بدل أن ينضغط */
  table.tbl.dense{ min-width:560px; }

  /* .hide-sm على الأعمدة الثانوية: يُخفي الرأس والخلية معاً */
  .hide-sm{ display:none !important; }

  /* إشارة بصرية أن الجدول يمرّر أفقياً */
  .table-scroll{
    position:relative;
    -webkit-mask-image:linear-gradient(to left, transparent 0, #000 18px);
            mask-image:linear-gradient(to left, transparent 0, #000 18px);
  }

  /* أزرار الصف تلتف بدل أن تخرج */
  .row-actions{ flex-wrap:wrap; gap:2px; }

  /* رأس الإطار: العنوان والشارة في سطرين عند الضيق */
  .frame-head{ gap:var(--sp-2); }
  .frame-foot{ flex-direction:column-reverse; align-items:stretch; }
  .frame-foot .btn{ width:100%; justify-content:center; }

  .zone{ padding:var(--sp-4); }
  .frame-body{ padding:var(--sp-3); }

  /* التنبيهات: الأيقونة فوق النص لا بجواره */
  .alert{ flex-direction:column; align-items:flex-start; gap:var(--sp-2); }

  /* شريط البحث عمودي */
  .search-bar{ flex-direction:column; align-items:stretch; }
  .search-bar .btn{ width:100%; justify-content:center; }
}

/* جوال صغير */
@media (max-width:479.98px){
  .content{ padding-inline:.75rem; }
  .page-title{ font-size:var(--fs-md); }
  .page-sub{ font-size:var(--fs-xs); }
  .stat-num{ font-size:var(--fs-xl); }
  .stat-state .val{ font-size:var(--fs-lg); }

  table.tbl{ min-width:560px; }
  table.tbl.dense{ min-width:480px; }

  .btn{ padding:.45rem .8rem; font-size:var(--fs-xs); }

  /* بطاقة المستخدم: الاسم يختفي ويبقى الحرف الأول */
  .user-chip .text-end{ display:none; }

  /* .hide-xs لما يُخفى على الجوال الصغير وحده */
  .hide-xs{ display:none !important; }

  /* الشارات أصغر فلا تكسر الصف */
  .badge{ font-size:9px; padding:2px 6px; }
}

/* أجهزة اللمس: أهداف ضغط أكبر، والإجراءات تبقى ظاهرة دائماً */
@media (hover:none) and (pointer:coarse){
  .btn{ min-height:40px; }
  .btn-ico{ width:36px; height:36px; }
  .form-control,.form-select{ min-height:42px; font-size:16px; }  /* 16px يمنع تكبير iOS التلقائي */
  .side-menu a,.side-menu .group-toggle{ min-height:44px; }
  table.tbl tbody tr:hover{ background:transparent; box-shadow:none; }
}