/* ==========================================================================
   أمتار — نظام تصميم لوحة الإدارة (Amtar Admin Design System)
   --------------------------------------------------------------------------
   ملف واحد يوحّد مظهر لوحة الإدارة كلها: قشرة React (index.html)
   والصفحات المستقلة (admin-*.html) التي تُعرض داخلها بإطارات iframe.

   يُحمَّل بعد أنماط كل صفحة، فيتغلّب عليها بترتيب التتالي دون
   الحاجة إلى !important إلا في المواضع التي تستعمل أنماطاً سطرية.

   لا يغيّر بنية HTML ولا سلوك الصفحات ولا أسماء الأصناف الموجودة،
   وإنما يعيد تعريف الرموز اللونية والمكوّنات المشتركة.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1) الرموز التصميمية — Design Tokens                                 */
/* ------------------------------------------------------------------ */
:root{
  /* هوية أمتار */
  --am-brand:#173F3A;          /* الأخضر الرئيسي الداكن */
  --am-brand-2:#234742;        /* الأخضر المساند */
  --am-brand-700:#1C4842;
  --am-brand-600:#2A5B54;
  --am-brand-500:#3D6B64;
  --am-brand-300:#8FADA8;
  --am-brand-100:#DCE8E5;
  --am-brand-50:#EFF5F3;
  --am-brand-hover:#12332F;

  /* الطوبي — لون إبراز محدود لا مسيطر */
  --am-terra:#A8573F;
  --am-terra-hover:#8E4733;
  --am-terra-100:#F3E2DC;
  --am-terra-50:#F9EFEB;

  /* الأسطح والحدود */
  --am-bg:#F8FAFC;
  --am-surface:#FFFFFF;
  --am-surface-2:#F1F5F9;
  --am-line:#E2E8F0;
  --am-line-2:#CBD5E1;

  /* النصوص */
  --am-ink:#0F172A;            /* النص الرئيسي — فحمي داكن */
  --am-ink-2:#334155;
  --am-muted:#64748B;          /* نصوص الوصف */
  --am-muted-2:#94A3B8;

  /* ألوان دلالية */
  --am-success:#15803D; --am-success-bg:#E9F5EE; --am-success-line:#BBE0CA;
  --am-warn:#B45309;    --am-warn-bg:#FBF1E3;    --am-warn-line:#EBD5AE;
  --am-danger:#B91C1C;  --am-danger-bg:#FBEBEA;  --am-danger-line:#EFC7C4;
  --am-info:#0E5A6E;    --am-info-bg:#E7F1F4;    --am-info-line:#BFD9E0;

  /* الأنصاف والظلال والمسافات */
  --am-r-xs:6px; --am-r-sm:8px; --am-r:10px; --am-r-lg:12px; --am-r-pill:999px;
  --am-sh-sm:0 1px 2px rgba(15,23,42,.05);
  --am-sh:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --am-sh-md:0 4px 12px rgba(15,23,42,.08);
  --am-sh-pop:0 8px 24px rgba(15,23,42,.12);

  --am-h-sm:32px; --am-h:38px; --am-h-lg:44px;
  --am-gap:12px; --am-pad:16px; --am-pad-lg:20px;

  --am-font:'IBM Plex Sans Arabic','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --am-focus:0 0 0 3px rgba(23,63,58,.22);

  /* ---- إعادة تعيين متغيّرات الصفحات القديمة على الهوية الجديدة ----
     الصفحات المستقلة تستعمل أسماء متغيّرات موروثة (cyan/navy/gold...).
     تُعاد هنا لتشير إلى ألوان أمتار، فتنتقل كل صفحة إلى الهوية
     دون تعديل أي سطر داخلها. */
  --cyan:#173F3A;
  --navy:#0F172A;
  --gold:#A8573F;
  --line:#E2E8F0;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --muted:#64748B;
  --green:#15803D;   --green-soft:#E9F5EE;
  --red:#B91C1C;     --red-soft:#FBEBEA;
  --orange:#B45309;  --orange-soft:#FBF1E3;
  --blue:#0E5A6E;
  --purple:#5B4B8A;
  --brand:#173F3A; --brand-hover:#12332F; --brand-soft:#EFF5F3;
  --terra:#A8573F;
  --ink:#0F172A;
  --accent:#A8573F;
  --primary:#173F3A; --primary-light:#234742;
  --danger:#B91C1C; --danger-soft:#FBEBEA;
  --success:#15803D;
  --border:#E2E8F0; --border-2:#CBD5E1;
  --text:#0F172A; --text-2:#334155; --text-muted:#64748B;
  --r:10px; --r-sm:8px; --r-lg:12px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(15,23,42,.05);
  --sh:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 4px 12px rgba(15,23,42,.08);
  --sh-lg:0 8px 24px rgba(15,23,42,.12);
}

/* ------------------------------------------------------------------ */
/* 2) الأساس والطباعة                                                  */
/* ------------------------------------------------------------------ */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--am-font);
  background:var(--am-bg);
  color:var(--am-ink);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px;
  line-height:1.65;
}
body,button,input,select,textarea,table,.btn{ font-family:var(--am-font); }

h1,h2,h3,h4,h5{ color:var(--am-ink); letter-spacing:0; font-weight:700; }
h1{ font-size:21px; line-height:1.45; }
h2{ font-size:18px; line-height:1.5; }
h3{ font-size:16px; line-height:1.5; }
h4{ font-size:14.5px; }
h5{ font-size:13.5px; }

/* الأرقام دائماً لاتينية ومحاذاة جدولية لتستقيم الأعمدة */
.ltr-num,.num,td .num,.kpi b,.stat b,.kpi-value{
  font-variant-numeric:tabular-nums lining-nums;
  direction:ltr; unicode-bidi:isolate;
}
table td,table th{ font-variant-numeric:tabular-nums; }

a{ color:var(--am-brand); text-decoration:none; }
a:hover{ color:var(--am-brand-hover); }

::selection{ background:var(--am-brand-100); color:var(--am-brand); }

/* شريط تمرير هادئ */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:999px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#94A3B8; background-clip:content-box; }

/* ------------------------------------------------------------------ */
/* 3) إمكانية الوصول — التركيز بلوحة المفاتيح                          */
/* ------------------------------------------------------------------ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--am-brand);
  outline-offset:2px;
  border-radius:var(--am-r-xs);
}
/* لا تُظهر الحلقة عند النقر بالفأرة فقط */
:focus:not(:focus-visible){ outline:none; }

/* ------------------------------------------------------------------ */
/* 4) التخطيط العام للصفحات المستقلة                                   */
/* ------------------------------------------------------------------ */
.wrap{ max-width:1360px; margin:0 auto; padding:20px 20px 56px; }

.topbar{
  background:var(--am-surface);
  color:var(--am-ink);
  border-bottom:1px solid var(--am-line);
  padding:0 20px; min-height:56px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:30;
  box-shadow:none;
}
.topbar a,.topbar .back{ color:var(--am-brand); font-weight:600; font-size:13px; }
.topbar .title,.topbar .ttl{ font-weight:700; font-size:16px; color:var(--am-ink); }
.topbar .ttl .ic{
  width:32px; height:32px; border-radius:var(--am-r-sm);
  background:var(--am-brand-50); color:var(--am-brand);
  display:grid; place-items:center;
}
.topbar .ttl .ic svg{ width:17px; height:17px; }

/* صف عنوان الصفحة وإجراءاتها */
.head-row,.head,.tbl-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:16px;
}
.head-row h1,.head h1,.head h2{ font-size:20px; font-weight:700; margin:0; color:var(--am-ink); }
.head-row p,.head p,.subtitle{ color:var(--am-muted); font-size:13px; margin:4px 0 0; font-weight:400; }
.head-actions,.head-acts,.actions,.acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ------------------------------------------------------------------ */
/* 5) الأزرار — حالات موحّدة                                           */
/* ------------------------------------------------------------------ */
.btn,button.btn,a.btn{
  --btn-bg:var(--am-surface); --btn-fg:var(--am-ink-2); --btn-bd:var(--am-line);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--am-h); padding:0 14px;
  border:1px solid var(--btn-bd); border-radius:var(--am-r-sm);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:inherit; font-size:13.5px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  box-shadow:none;
}
.btn svg,button.btn svg{ width:16px; height:16px; flex:none; }
.btn:hover:not(:disabled){ background:var(--am-surface-2); }
.btn:active:not(:disabled){ transform:translateY(.5px); }
.btn:disabled,.btn[disabled],.btn.is-disabled{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}

/* رئيسي */
.btn.btn-primary,button.btn-primary,a.btn-primary,.btn-primary{
  --btn-bg:var(--am-brand); --btn-fg:#fff; --btn-bd:var(--am-brand);
}
.btn.btn-primary:hover:not(:disabled),.btn-primary:hover:not(:disabled){
  background:var(--am-brand-hover); border-color:var(--am-brand-hover);
}
/* ثانوي / شبح */
.btn.btn-ghost,.btn-ghost,.btn.btn-secondary,.btn-secondary{
  --btn-bg:var(--am-surface); --btn-fg:var(--am-ink-2); --btn-bd:var(--am-line-2);
}
.btn.btn-ghost:hover:not(:disabled),.btn-ghost:hover:not(:disabled){
  background:var(--am-surface-2); border-color:var(--am-line-2);
}
/* إبراز طوبي خفيف */
.btn.btn-gold,.btn-gold{
  --btn-bg:var(--am-terra-50); --btn-fg:var(--am-terra); --btn-bd:var(--am-terra-100);
}
.btn.btn-gold:hover:not(:disabled),.btn-gold:hover:not(:disabled){ background:var(--am-terra-100); }
/* ‎.btn-accent‎ في هذه الصفحات هو زرّ الإجراء الأساسي (التالي/حفظ) لا
   إبرازاً خفيفاً، فيُعطى وزناً كاملاً كي لا يبدو باهتاً ومعطّلاً. */
.btn.btn-accent,.btn-accent{
  --btn-bg:var(--am-brand); --btn-fg:#fff; --btn-bd:var(--am-brand);
}
.btn.btn-accent:hover:not(:disabled),.btn-accent:hover:not(:disabled){
  background:var(--am-brand-hover); border-color:var(--am-brand-hover);
}
/* نجاح */
.btn.btn-green,.btn-green,.btn.btn-success,.btn-success{
  --btn-bg:var(--am-success-bg); --btn-fg:var(--am-success); --btn-bd:var(--am-success-line);
}
.btn.btn-green:hover:not(:disabled),.btn-green:hover:not(:disabled){ background:#DCEEE4; }
/* تحذير */
.btn.btn-warn,.btn-warn,.btn.btn-orange,.btn-orange{
  --btn-bg:var(--am-warn-bg); --btn-fg:var(--am-warn); --btn-bd:var(--am-warn-line);
}
.btn.btn-warn:hover:not(:disabled),.btn-warn:hover:not(:disabled){ background:#F7E7CE; }
/* حذف */
.btn.btn-danger,.btn-danger,.btn.btn-delete,.btn-delete{
  --btn-bg:var(--am-danger-bg); --btn-fg:var(--am-danger); --btn-bd:var(--am-danger-line);
}
.btn.btn-danger:hover:not(:disabled),.btn-danger:hover:not(:disabled){ background:#F7DBD9; }
/* أحجام */
.btn.btn-sm,.btn-sm{ height:var(--am-h-sm); padding:0 10px; font-size:12.5px; border-radius:var(--am-r-xs); }
.btn.btn-sm svg,.btn-sm svg{ width:14px; height:14px; }
.btn.btn-lg,.btn-lg{ height:var(--am-h-lg); padding:0 20px; font-size:15px; }
.btn.btn-icon,.btn-icon{ width:var(--am-h); padding:0; }
.btn.btn-icon.btn-sm,.btn-icon.btn-sm{ width:var(--am-h-sm); }

/* حالة التحميل — أضف الصنف is-loading أو السمة data-loading */
.btn.is-loading,.btn[data-loading="true"]{ position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading > *,.btn[data-loading="true"] > *{ visibility:hidden; }
.btn.is-loading::after,.btn[data-loading="true"]::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:var(--btn-fg); visibility:visible;
  animation:am-spin .7s linear infinite;
}
@keyframes am-spin{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* 6) البطاقات                                                         */
/* ------------------------------------------------------------------ */
.card,.pcard,.lic-card,.doc,.panel,.box{
  background:var(--am-surface);
  border:1px solid var(--am-line);
  border-radius:var(--am-r-lg);
  box-shadow:var(--am-sh-sm);
}
/* لا overflow:hidden على البطاقة: كانت تقصّ القوائم المنسدلة
   والتلميحات التي تفتح داخلها. */
.card-head,.card > header,.card-title{
  padding:12px 16px; border-bottom:1px solid var(--am-line);
  font-weight:700; font-size:14.5px; color:var(--am-ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-body{ padding:16px; }

/* ------------------------------------------------------------------ */
/* 7) البطاقات الإحصائية (KPI)                                         */
/* ------------------------------------------------------------------ */
.stats,.stats-row,.kpis{ gap:10px; margin-bottom:16px; }
/* المظهر فقط. بعض الصفحات تعرض الرقم فوق التسمية متوسّطاً وأخرى
   في صفّ مع أيقونة، ففرض flex كان يقلب الأولى رأساً على عقب. */
.stat,.kpi{
  background:var(--am-surface);
  border:1px solid var(--am-line);
  border-radius:var(--am-r-lg);
  padding:13px 15px;
  box-shadow:var(--am-sh-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* البطاقات التي فيها أيقونة تُنسَّق صفّاً، وهي التي صُمِّمت كذلك أصلاً */
.stat:has(> .ico),.kpi:has(> .ico){ display:flex; align-items:center; gap:11px; text-align:right; }
.stat:hover,.kpi:hover{ border-color:var(--am-brand-300); }
.stat.on,.stat.active,.kpi.on{
  border-color:var(--am-brand); box-shadow:0 0 0 2px rgba(23,63,58,.10);
}
.stat b,.kpi b,.stat .v,.kpi .v{
  display:block; font-size:22px; font-weight:700; color:var(--am-ink); line-height:1.25;
  font-variant-numeric:tabular-nums lining-nums;
}
.stat span,.kpi span,.stat .l,.kpi .l{ font-size:12px; color:var(--am-muted); font-weight:500; }
.stat .ico,.kpi .ico{
  width:36px; height:36px; border-radius:var(--am-r-sm);
  display:grid; place-items:center; flex:none;
  background:var(--am-brand-50); color:var(--am-brand);
}
.stat .ico svg,.kpi .ico svg{ width:18px; height:18px; }

/* ------------------------------------------------------------------ */
/* 8) الفلاتر والبحث                                                   */
/* ------------------------------------------------------------------ */
/* المظهر فقط. لا يُفرض display هنا: لكل صفحة شبكتها داخل .filters
   (‎.fgrid مثلاً)، وتحويل الحاوية إلى flex كان يطوي تلك الشبكة في
   عمود ضيّق ويترك بقيّة العرض فارغاً. */
.filters,.filter-bar,.sbar{
  background:var(--am-surface);
  border:1px solid var(--am-line);
  border-radius:var(--am-r-lg);
  padding:12px 14px; margin-bottom:14px;
  box-shadow:var(--am-sh-sm);
}
.filters .field,.filters .fld{ margin-bottom:0; }

/* ------------------------------------------------------------------ */
/* 9) الحقول والنماذج                                                  */
/* ------------------------------------------------------------------ */
.field,.fld,.form-row{ margin-bottom:14px; }
.field label,.fld label,label.lb,.form-label{
  display:block; font-size:12.5px; font-weight:600;
  color:var(--am-ink-2); margin-bottom:5px;
}
.field .hint,.fld .hint,.form-hint{
  display:block; font-size:11.5px; color:var(--am-muted); margin-top:4px; font-weight:400;
}
/* علامة الحقل المطلوب */
.field label .req,.fld label .req,label .required,.is-required > label::after{
  color:var(--am-danger); margin-inline-start:3px;
}

/* بلا width هنا: الصفحات تضع حقولاً داخل صفوف أفقية تعتمد العرض
   التلقائي، وفرض 100% كان يمدّها على السطر كلّه. */
input[type=text],input[type=search],input[type=number],input[type=email],
input[type=tel],input[type=url],input[type=password],input[type=date],
input[type=datetime-local],input[type=time],select,textarea,
.field input,.field select,.field textarea,.fld input,.fld select,.fld textarea{
  height:var(--am-h);
  padding:0 11px;
  border:1px solid var(--am-line-2);
  border-radius:var(--am-r-sm);
  background:var(--am-surface);
  color:var(--am-ink);
  font-family:inherit; font-size:13.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
  outline:none;
}
textarea,.field textarea,.fld textarea{ height:auto; min-height:88px; padding:9px 11px; line-height:1.7; resize:vertical; }
select,.field select,.fld select{
  appearance:none; -webkit-appearance:none;
  padding-inline-end:32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 10px center;
  background-size:15px;
}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){ border-color:#AFBECD; }
input:focus,select:focus,textarea:focus{
  border-color:var(--am-brand); box-shadow:var(--am-focus); outline:none;
}
input:disabled,select:disabled,textarea:disabled{
  background:var(--am-surface-2); color:var(--am-muted); cursor:not-allowed;
}
input::placeholder,textarea::placeholder{ color:var(--am-muted-2); }

/* حالة الخطأ ورسالتها */
input.is-invalid,select.is-invalid,textarea.is-invalid,
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--am-danger); background:#FFFBFB;
}
input.is-invalid:focus,textarea.is-invalid:focus,select.is-invalid:focus{
  box-shadow:0 0 0 3px rgba(185,28,28,.16);
}
.field .err,.fld .err,.form-error,.error-text{
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:var(--am-danger); margin-top:5px; font-weight:500;
}

/* مجموعة حقول */
fieldset,.form-section{
  border:1px solid var(--am-line); border-radius:var(--am-r-lg);
  padding:14px 16px; margin:0 0 16px;
}
legend,.form-section > h3,.form-section-title{
  font-size:13.5px; font-weight:700; color:var(--am-brand);
  padding:0 6px;
}

/* شبكات النماذج تعرّفها كل صفحة بأعمدتها، فلا تُعاد هنا. */

/* ------------------------------------------------------------------ */
/* 10) الجداول                                                         */
/* ------------------------------------------------------------------ */
.tablewrap,.tbl-wrap,.tbl-scroll,.am-tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--am-r-lg);
}
table{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--am-surface); }
thead th{
  background:var(--am-surface-2);
  color:var(--am-muted);
  font-weight:600; font-size:12px;
  text-align:right;
  padding:10px 14px;
  border-bottom:1px solid var(--am-line);
  white-space:nowrap;
}
/* تثبيت رأس الجدول داخل حاوية التمرير فقط، حتى لا يطفو فوق المحتوى
   في الجداول غير الملفوفة */
.tablewrap thead th,.tbl-wrap thead th,.tbl-scroll thead th,.am-tablewrap thead th{
  position:sticky; top:0; z-index:2;
}
tbody td{
  padding:11px 14px;
  border-bottom:1px solid #EFF3F7;
  vertical-align:middle;
  color:var(--am-ink-2);
}
tbody tr{ transition:background .12s ease; }
tbody tr:hover{ background:var(--am-brand-50); }
tbody tr:last-child td{ border-bottom:none; }
tbody td strong,tbody td b{ color:var(--am-ink); font-weight:600; }

/* النصوص الطويلة داخل الخلايا لا تكسر الجدول */
td .ellip,td.ellip,.cell-ellip{
  max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}

/* عمود إجراءات الصف */
td .row-acts,td .acts,td .actions{ display:flex; gap:5px; align-items:center; justify-content:flex-start; }

/* ------------------------------------------------------------------ */
/* 11) الشارات — Badges / Tags / Chips / Pills                         */
/* ------------------------------------------------------------------ */
.badge,.tag,.pill,.chip,.st{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px;
  border-radius:var(--am-r-pill);
  font-size:11.5px; font-weight:600; line-height:1;
  background:var(--am-surface-2); color:var(--am-ink-2);
  border:1px solid transparent;
  white-space:nowrap;
}
.badge svg,.tag svg,.pill svg,.chip svg{ width:12px; height:12px; }
/* لا تعتمد على اللون وحده: نقطة دلالية قبل النص */
.badge::before,.tag::before,.st::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.75; flex:none;
}
.badge.no-dot::before,.pill::before,.chip::before{ content:none; }

.badge-on,.badge-active,.badge.hi,.st-on,.st.ok,.badge-success{
  background:var(--am-success-bg); color:var(--am-success); border-color:var(--am-success-line);
}
.badge-off,.badge-inactive,.st-off,.badge-danger,.badge-red{
  background:var(--am-danger-bg); color:var(--am-danger); border-color:var(--am-danger-line);
}
.badge-warn,.badge-gold,.badge-pending,.st-pending{
  background:var(--am-warn-bg); color:var(--am-warn); border-color:var(--am-warn-line);
}
.badge-cyan,.badge-info,.badge-blue{
  background:var(--am-info-bg); color:var(--am-info); border-color:var(--am-info-line);
}
.badge-muted,.badge-src,.badge-slate{
  background:var(--am-surface-2); color:var(--am-muted); border-color:var(--am-line);
}
.badge-purple,.badge-leave{
  background:var(--am-terra-50); color:var(--am-terra); border-color:var(--am-terra-100);
}

/* شرائح الفلاتر القابلة للنقر */
.chip-f{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:var(--am-r-pill);
  border:1px solid var(--am-line-2); background:var(--am-surface);
  color:var(--am-ink-2); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:.15s;
}
.chip-f:hover{ background:var(--am-surface-2); }
.chip-f.on,.chip-f.active{
  background:var(--am-brand); border-color:var(--am-brand); color:#fff;
}

/* ------------------------------------------------------------------ */
/* 12) التبويبات                                                       */
/* ------------------------------------------------------------------ */
.tabs{
  display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--am-line);
  margin-bottom:16px;
}
.tab{
  appearance:none; background:none; border:none;
  padding:9px 14px; margin-bottom:-1px;
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--am-muted); cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  border-radius:var(--am-r-xs) var(--am-r-xs) 0 0;
}
.tab:hover{ color:var(--am-ink); background:var(--am-brand-50); }
.tab.on,.tab.active,.tab[aria-selected="true"]{
  color:var(--am-brand); border-bottom-color:var(--am-brand); background:transparent;
}

/* ------------------------------------------------------------------ */
/* 13) الترقيم — Pagination                                            */
/* ------------------------------------------------------------------ */
.pager,.pagination{
  display:flex; align-items:center; justify-content:center;
  gap:5px; flex-wrap:wrap; padding:14px 0;
}
.pager button,.pager a,.pagination button,.pagination a{
  min-width:var(--am-h-sm); height:var(--am-h-sm); padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--am-line-2); border-radius:var(--am-r-xs);
  background:var(--am-surface); color:var(--am-ink-2);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:.15s;
}
.pager button:hover:not(:disabled),.pagination button:hover:not(:disabled){ background:var(--am-surface-2); }
.pager button.on,.pager button.active,.pager .on,.pagination .active{
  background:var(--am-brand); border-color:var(--am-brand); color:#fff;
}
.pager button:disabled,.pagination button:disabled{ opacity:.45; cursor:not-allowed; }
.pager .count,.pager .info{ color:var(--am-muted); font-size:12.5px; margin-inline-end:8px; }

/* ------------------------------------------------------------------ */
/* 14) النوافذ المنبثقة                                                */
/* ------------------------------------------------------------------ */
/* لا تُضبط خاصية display هنا إطلاقاً: الصفحات تُخفي نوافذها بـ
   display:none وتُظهرها بتبديلها، فأي إعلان display في هذه الطبقة
   يجعل كل نافذة مخفيّة تظهر فور تحميل الصفحة. تُضبط هيئة الظهور فقط. */
.modal-bg,.modal-backdrop,.overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);
  align-items:center; justify-content:center;
  padding:16px;
}
.modal,.dialog{
  background:var(--am-surface);
  border:1px solid var(--am-line);
  border-radius:var(--am-r-lg);
  box-shadow:var(--am-sh-pop);
  max-width:640px; width:100%;
  max-height:calc(100vh - 48px);
  overflow:auto;
  animation:am-pop .16s ease-out;
}
@keyframes am-pop{ from{ opacity:0; transform:translateY(6px) scale(.99); } }
.modal-head,.modal > header,.modal h3:first-child{
  padding:14px 18px; border-bottom:1px solid var(--am-line);
  font-size:15px; font-weight:700; color:var(--am-ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--am-surface);
}
.modal-body{ padding:18px; }
.modal-foot,.modal > footer,.modal-actions{
  padding:12px 18px; border-top:1px solid var(--am-line);
  display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap;
  background:var(--am-surface);
}
.modal .close,.modal-close{
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:var(--am-r-xs); border:none; background:transparent;
  color:var(--am-muted); cursor:pointer;
}
.modal .close:hover,.modal-close:hover{ background:var(--am-surface-2); color:var(--am-ink); }

/* ------------------------------------------------------------------ */
/* 15) القوائم المنسدلة                                                */
/* ------------------------------------------------------------------ */
.dropdown,.menu,.popover{
  background:var(--am-surface);
  border:1px solid var(--am-line);
  border-radius:var(--am-r); 
  box-shadow:var(--am-sh-pop);
  padding:5px; min-width:180px;
  z-index:60;
}
.dropdown a,.dropdown button,.menu a,.menu button,.menu-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:none; background:none;
  border-radius:var(--am-r-xs);
  font-family:inherit; font-size:13px; font-weight:500;
  color:var(--am-ink-2); text-align:right; cursor:pointer;
}
.dropdown a:hover,.dropdown button:hover,.menu a:hover,.menu button:hover,.menu-item:hover{
  background:var(--am-brand-50); color:var(--am-brand);
}
.menu-item.danger,.dropdown .danger{ color:var(--am-danger); }
.menu-item.danger:hover,.dropdown .danger:hover{ background:var(--am-danger-bg); color:var(--am-danger); }
.menu-sep{ height:1px; background:var(--am-line); margin:4px 0; }

/* ------------------------------------------------------------------ */
/* 16) التنبيهات والإشعارات                                            */
/* ------------------------------------------------------------------ */
/* .msg تُخفى بـ display:none في عدّة صفحات وتُظهر عند الحاجة،
   فلا يُعلن لها display هنا لنفس السبب أعلاه. */
.alert,.notice,.msg{
  align-items:flex-start; gap:9px;
  padding:11px 14px; border-radius:var(--am-r);
  border:1px solid var(--am-line); background:var(--am-surface-2);
  font-size:13px; color:var(--am-ink-2); margin-bottom:14px;
}
.alert,.notice{ display:flex; }
.msg[style*="display: flex"],.msg[style*="display:flex"],.msg.on,.msg.show{ display:flex !important; }
.alert svg,.notice svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.alert-success,.msg.ok{ background:var(--am-success-bg); border-color:var(--am-success-line); color:var(--am-success); }
.alert-warn,.msg.warn{ background:var(--am-warn-bg); border-color:var(--am-warn-line); color:var(--am-warn); }
.alert-danger,.alert-error,.msg.err{ background:var(--am-danger-bg); border-color:var(--am-danger-line); color:var(--am-danger); }
.alert-info,.msg.info{ background:var(--am-info-bg); border-color:var(--am-info-line); color:var(--am-info); }

.toast{
  position:fixed; z-index:200;
  background:var(--am-ink); color:#fff;
  padding:11px 16px; border-radius:var(--am-r);
  font-size:13px; font-weight:600;
  box-shadow:var(--am-sh-pop);
  display:flex; align-items:center; gap:8px;
}
.toast.ok,.toast.success{ background:var(--am-success); }
.toast.err,.toast.error{ background:var(--am-danger); }
.toast.warn{ background:var(--am-warn); }

/* ------------------------------------------------------------------ */
/* 17) حالات الفراغ والخطأ والتحميل                                    */
/* ------------------------------------------------------------------ */
.empty,.empty-state,.no-data{
  padding:44px 20px; text-align:center;
  color:var(--am-muted); font-size:13.5px;
}
/* التنسيق العمودي لِما فيه أيقونة فقط */
.empty:has(> svg),.empty-state:has(> svg),.no-data:has(> svg){
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.empty svg,.empty-state svg{ width:38px; height:38px; color:var(--am-line-2); stroke-width:1.5; }
.empty b,.empty strong,.empty-state b{ color:var(--am-ink-2); font-size:14.5px; font-weight:600; display:block; }
.empty .sub{ font-size:12.5px; color:var(--am-muted); }

.error-state{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:36px 20px; text-align:center;
  border:1px solid var(--am-danger-line); background:var(--am-danger-bg);
  border-radius:var(--am-r-lg); color:var(--am-danger);
}
.error-state b{ font-size:14.5px; }
.error-state .sub{ color:var(--am-ink-2); font-size:12.5px; font-weight:400; }

/* هياكل التحميل — Skeleton */
.skel,.skeleton{
  display:block; border-radius:var(--am-r-xs);
  background:linear-gradient(90deg,#EEF2F6 25%,#E2E8F0 37%,#EEF2F6 63%);
  background-size:400% 100%;
  animation:am-shimmer 1.3s ease-in-out infinite;
  min-height:12px;
}
@keyframes am-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.skel-text{ height:12px; margin:7px 0; }
.skel-title{ height:18px; width:40%; margin:9px 0; }
.skel-row{ height:40px; margin:6px 0; border-radius:var(--am-r-sm); }
.skel-card{ height:78px; border-radius:var(--am-r-lg); }
@media (prefers-reduced-motion:reduce){
  .skel,.skeleton{ animation:none; background:#EEF2F6; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* دوّار تحميل */
.spinner,.loader{
  width:22px; height:22px; border-radius:50%;
  border:2.5px solid var(--am-line); border-top-color:var(--am-brand);
  animation:am-spin .7s linear infinite;
}

/* ------------------------------------------------------------------ */
/* 18) التلميحات — Tooltips                                            */
/* ------------------------------------------------------------------ */
[data-tip]{ position:relative; }
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); right:50%; transform:translateX(50%);
  background:var(--am-ink); color:#fff;
  padding:5px 9px; border-radius:var(--am-r-xs);
  font-size:11.5px; font-weight:500; line-height:1.5;
  white-space:nowrap; z-index:150; pointer-events:none;
  box-shadow:var(--am-sh-md);
  width:max-content;
}

/* ------------------------------------------------------------------ */
/* 19) فتات الخبز                                                      */
/* ------------------------------------------------------------------ */
.breadcrumb,.crumbs{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; color:var(--am-muted); margin-bottom:10px;
}
.breadcrumb a,.crumbs a{ color:var(--am-muted); font-weight:500; }
.breadcrumb a:hover,.crumbs a:hover{ color:var(--am-brand); }
.breadcrumb .sep,.crumbs .sep{ color:var(--am-line-2); }
.breadcrumb .current,.crumbs .current{ color:var(--am-ink); font-weight:600; }

/* ------------------------------------------------------------------ */
/* 20) المفاتيح — Switches                                             */
/* ------------------------------------------------------------------ */
.switch{
  position:relative; display:inline-block; width:38px; height:21px; flex:none;
}
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .sl,.switch span,.switch i{
  position:absolute; inset:0; cursor:pointer;
  background:var(--am-line-2); border-radius:var(--am-r-pill);
  transition:background .18s ease;
}
.switch .sl::before,.switch span::before,.switch i::before{
  content:""; position:absolute; width:15px; height:15px; top:3px; right:3px;
  background:#fff; border-radius:50%; transition:transform .18s ease;
  box-shadow:var(--am-sh-sm);
}
.switch input:checked + .sl,.switch input:checked + span,.switch input:checked + i{ background:var(--am-brand); }
.switch input:checked + .sl::before,.switch input:checked + span::before,.switch input:checked + i::before{
  transform:translateX(-17px);
}
.switch input:focus-visible + .sl,.switch input:focus-visible + span{ box-shadow:var(--am-focus); }

/* ------------------------------------------------------------------ */
/* 21) قشرة React — إعادة تلوين أصناف Tailwind المبنية                 */
/*     الحزمة مبنية بقيم لونية ثابتة، فتُعاد هنا على هوية أمتار.       */
/* ------------------------------------------------------------------ */
.bg-brand-900,.hover\:bg-brand-900:hover{ background-color:var(--am-brand) !important; }
.bg-brand-950{ background-color:#102D29 !important; }
.bg-brand-500{ background-color:var(--am-brand-500) !important; }
.bg-brand-100{ background-color:var(--am-brand-100) !important; }
.bg-brand-50,.from-brand-50{ background-color:var(--am-brand-50) !important; }
.text-brand-900,.hover\:text-brand-900:hover{ color:var(--am-brand) !important; }
.text-brand-700{ color:var(--am-brand-700) !important; }
.text-brand-500{ color:var(--am-brand-500) !important; }
.border-brand-500{ border-color:var(--am-brand-500) !important; }
.border-t-brand-500{ border-top-color:var(--am-brand-500) !important; }
.ring-brand-500{ --tw-ring-color:var(--am-brand-500); }

/* الأسطح */
.bg-card{ background-color:var(--am-surface) !important; }
.bg-card-alt{ background-color:var(--am-surface) !important; border:1px solid var(--am-line); }
.rounded-card{ border-radius:var(--am-r-lg) !important; }

/* الألوان الدلالية داخل الحزمة */
.bg-accent-green-bg{ background-color:var(--am-success-bg) !important; }
.text-accent-green-fg,.bg-accent-green-fg{ color:var(--am-success) !important; }
.bg-accent-green-fg{ background-color:var(--am-success) !important; }
.bg-accent-orange-bg{ background-color:var(--am-warn-bg) !important; }
.text-accent-orange-fg{ color:var(--am-warn) !important; }
.bg-accent-red-bg{ background-color:var(--am-danger-bg) !important; }
.text-accent-red-fg{ color:var(--am-danger) !important; }
.bg-accent-red-fg{ background-color:var(--am-danger) !important; }
.border-accent-red-fg{ border-color:var(--am-danger) !important; }
.bg-accent-amber-bg{ background-color:var(--am-warn-bg) !important; }
.text-accent-amber-fg{ color:var(--am-warn) !important; }
.bg-accent-sky-bg{ background-color:var(--am-info-bg) !important; }
.text-accent-sky-fg{ color:var(--am-info) !important; }
.bg-accent-purple-bg{ background-color:var(--am-terra-50) !important; }
.text-accent-purple-fg{ color:var(--am-terra) !important; }
.bg-accent-purple-fg{ background-color:var(--am-terra) !important; }
.bg-accent-slate-bg{ background-color:var(--am-surface-2) !important; }
.text-accent-slate-fg{ color:var(--am-muted) !important; }

/* الحبيبات داخل الحزمة */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px; border-radius:var(--am-r-pill);
  font-size:11.5px; font-weight:600; line-height:1;
}

/* أنصاف الحزمة الكبيرة تُهدَّأ */
.rounded-2xl{ border-radius:var(--am-r-lg) !important; }
.rounded-xl{ border-radius:var(--am-r) !important; }
.rounded-3xl{ border-radius:14px !important; }

/* ------------------------------------------------------------------ */
/* 22) قشرة React — القائمة الجانبية والشريط العلوي                    */
/* ------------------------------------------------------------------ */
#root aside,#root [class*="w-\[260px\]"]{ background:var(--am-brand); }

#root header{
  background:var(--am-surface);
  border-bottom:1px solid var(--am-line) !important;
  position:sticky; top:0; z-index:40;
}

/* منطقة المحتوى: عرض مريح ومسافات ثابتة */
#root main,#root [role="main"]{ background:var(--am-bg); }

/* الإطارات المضمّنة تملأ المساحة بلا حدود مزدوجة */
#root iframe{ background:var(--am-bg); }

/* ------------------------------------------------------------------ */
/* 23) الاستجابة                                                       */
/* ------------------------------------------------------------------ */
@media (max-width:1024px){
  .wrap{ padding:16px 14px 48px; }
  .stats,.stats-row,.kpis{ grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); }
}
@media (max-width:768px){
  body{ font-size:13.5px; }
  .wrap{ padding:14px 12px 44px; }
  .head-row,.head{ flex-direction:column; align-items:stretch; }
  .head-actions,.head-acts{ width:100%; }
  .head-actions .btn,.head-acts .btn{ flex:1 1 auto; }
  .stats,.stats-row,.kpis{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
  .stat,.kpi{ padding:11px 12px; }
  .stat b,.kpi b{ font-size:19px; }
  .filters,.sbar{ flex-direction:column; align-items:stretch; }
  .filters .field,.filters .fld{ min-width:0; width:100%; }
  /* الجداول تنزلق داخل حاويتها ولا تخرج عن الشاشة */
  .tablewrap,.tbl-wrap,.tbl-scroll,.am-tablewrap{ margin-inline:-2px; }
  thead th,tbody td{ padding:9px 10px; }
  /* أهداف لمس مريحة */
  .btn,.btn-sm{ min-height:36px; }
  .pager button,.pagination button{ min-width:34px; height:34px; }
  .modal,.dialog{ max-height:calc(100vh - 24px); }
}
@media (max-width:480px){
  .stats,.stats-row,.kpis{ grid-template-columns:1fr 1fr; }
  h1,.head-row h1,.head h2{ font-size:18px; }
}

/* لا يخرج شيء عن عرض الشاشة */
html,body{ overflow-x:hidden; max-width:100%; }
img,svg,video,canvas{ max-width:100%; }

/* ------------------------------------------------------------------ */
/* 24) الطباعة                                                         */
/* ------------------------------------------------------------------ */
@media print{
  .topbar,.filters,.head-actions,.head-acts,.pager,.btn{ display:none !important; }
  .wrap{ padding:0; max-width:none; }
  .card,.stat,.kpi{ box-shadow:none; border-color:#CBD5E1; }
}

/* ------------------------------------------------------------------ */
/* 25) قشرة React — تفاصيل القائمة الجانبية                            */
/* ------------------------------------------------------------------ */
#root aside{
  background:var(--am-brand);
  border-inline-start:1px solid rgba(255,255,255,.06);
}
#root aside nav{ padding:10px 10px 20px; }

.nav-link{
  position:relative;
  border-radius:var(--am-r-sm) !important;
  padding:8px 12px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.78) !important;
  margin-bottom:1px;
}
.nav-link:hover{ background-color:rgba(255,255,255,.07) !important; color:#fff !important; }
.nav-link.active{
  background-color:rgba(255,255,255,.11) !important;
  color:#fff !important;
  font-weight:600 !important;
}
/* مؤشّر الحالة النشطة على الحافة اليمنى (RTL) — لا يعتمد على اللون وحده */
.nav-link.active::before{
  content:""; position:absolute; inset-inline-end:-10px; top:6px; bottom:6px;
  width:3px; border-radius:999px; background:var(--am-terra);
}
.nav-link .nav-icon{ color:rgba(255,255,255,.62) !important; }
.nav-link .nav-icon svg{ width:17px; height:17px; }
.nav-link.active .nav-icon{ color:#fff !important; }

/* عناصر المستوى الثاني أهدأ وأصغر */
#root aside ul ul .nav-link{
  font-size:13px !important;
  padding:6px 11px !important;
  color:rgba(255,255,255,.66) !important;
}
#root aside ul ul .nav-link.active::before{ inset-inline-end:-8px; }

/* الشريط العلوي */
#root header{ min-height:56px; padding:0 16px !important; }
@media (min-width:768px){ #root header{ padding:0 24px !important; } }
#root header nav[aria-label="breadcrumb"] a{ color:var(--am-muted); }
#root header nav[aria-label="breadcrumb"] a:hover{ color:var(--am-brand); }

/* الحقل العائم في شاشة الدخول والنماذج */
.floating-input input,.floating-input select,.floating-input textarea{
  border-radius:var(--am-r-sm) !important;
  border-color:var(--am-line-2) !important;
  padding:1.15rem .8rem .45rem !important;
}
.floating-input input:focus,.floating-input select:focus,.floating-input textarea:focus{
  border-color:var(--am-brand) !important;
  box-shadow:var(--am-focus) !important;
}
.floating-input label{ right:.8rem !important; color:var(--am-muted) !important; }

/* ------------------------------------------------------------------ */
/* 26) الصفحات المضمّنة داخل إطار — لا تكرار للقشرة                    */
/*     قشرة React تعرض العنوان وفتات الخبز، فيُخفى الشريط العلوي       */
/*     الداخلي للصفحة كي لا يتكرّر العنوان وزر الرجوع.                 */
/* ------------------------------------------------------------------ */
.am-embedded .topbar{ display:none !important; }
.am-embedded body{ background:var(--am-bg); }
.am-embedded .wrap{ padding-top:16px; }
/* الصفحة المستقلة تحتفظ بشريطها ويُنسَّق */
.am-standalone .wrap{ padding-top:20px; }

/* ================================================================== */
/* 27) صفحة الرئيسية — مركز القيادة                                    */
/* ================================================================== */
.am-home{ padding:16px 0 32px; display:flex; flex-direction:column; gap:14px; }

/* ---- شريط الأدوات ---- */
.am-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--am-surface); border:1px solid var(--am-line);
  border-radius:var(--am-r-lg); padding:9px 11px;
}
.am-toolbar-sp{ flex:1 1 auto; }

.am-seg{ display:inline-flex; background:var(--am-surface-2); border-radius:var(--am-r-sm); padding:2px; gap:1px; flex-wrap:wrap; }
.am-seg-b{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--am-muted);
  padding:6px 11px; border-radius:var(--am-r-xs); white-space:nowrap;
  transition:background .14s ease, color .14s ease;
}
.am-seg-b:hover{ color:var(--am-ink); }
.am-seg-b.on{ background:var(--am-surface); color:var(--am-brand); box-shadow:var(--am-sh-sm); }

.am-range{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.am-range label{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--am-muted); font-weight:600; }
.am-range input{ width:auto; height:var(--am-h-sm); font-size:12.5px; padding:0 8px; }

.am-select{
  height:var(--am-h-sm); border:1px solid var(--am-line-2); border-radius:var(--am-r-sm);
  background:var(--am-surface); color:var(--am-ink-2); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:0 26px 0 9px; max-width:190px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 8px center; background-size:14px;
}
.am-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:var(--am-h-sm); padding:0 11px;
  border:1px solid var(--am-line-2); border-radius:var(--am-r-sm);
  background:var(--am-surface); color:var(--am-ink-2);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .14s ease;
}
.am-btn:hover:not(:disabled){ background:var(--am-surface-2); }
.am-btn:disabled{ opacity:.5; cursor:not-allowed; }
.am-btn.primary{ background:var(--am-brand); border-color:var(--am-brand); color:#fff; }
.am-btn.primary:hover{ background:var(--am-brand-hover); }
.am-updated{ font-size:11.5px; color:var(--am-muted); white-space:nowrap; }

/* ---- شبكة المؤشرات ---- */
.am-kpi-grid{
  display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
}
.am-kpi{
  display:block; background:var(--am-surface);
  border:1px solid var(--am-line); border-radius:var(--am-r-lg);
  padding:11px 13px; color:inherit; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  position:relative;
}
a.am-kpi:hover{ border-color:var(--am-brand-300); box-shadow:var(--am-sh-sm); }
.am-kpi-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }
.am-kpi-main{ min-width:0; flex:1; }
.am-kpi-label{ font-size:11.5px; color:var(--am-muted); font-weight:500; line-height:1.5; }
.am-kpi-val{
  font-size:21px; font-weight:700; color:var(--am-ink); line-height:1.3; margin-top:1px;
  font-variant-numeric:tabular-nums lining-nums; direction:ltr; text-align:right;
  unicode-bidi:isolate; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.am-kpi-suffix{ font-size:11px; font-weight:600; color:var(--am-muted); margin-inline-start:3px; }
.am-kpi-na{ font-size:12px; color:var(--am-muted-2); font-weight:500; margin-top:5px; }
.am-kpi-foot{ display:flex; align-items:center; gap:7px; margin-top:3px; min-height:15px; flex-wrap:wrap; }
.am-kpi-total{ font-size:10.5px; color:var(--am-muted-2); font-variant-numeric:tabular-nums; }
.am-kpi-ico{
  width:31px; height:31px; border-radius:var(--am-r-sm); flex:none;
  display:grid; place-items:center;
  background:var(--am-brand-50); color:var(--am-brand);
}
.am-trend{
  display:inline-flex; align-items:center; gap:2px;
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:1px 5px; border-radius:var(--am-r-pill);
}
.am-trend.up{ color:var(--am-success); background:var(--am-success-bg); }
.am-trend.down{ color:var(--am-danger); background:var(--am-danger-bg); }
.am-trend.neutral{ color:var(--am-muted); background:var(--am-surface-2); font-weight:600; }

/* ---- الإجراءات السريعة ---- */
.am-quick{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:var(--am-surface); border:1px solid var(--am-line);
  border-radius:var(--am-r-lg); padding:9px 11px;
}
.am-quick-t{ font-size:12px; font-weight:700; color:var(--am-muted); margin-inline-end:3px; }
.am-quick-b{
  display:inline-flex; align-items:center; gap:6px;
  height:31px; padding:0 11px;
  border:1px solid var(--am-line-2); border-radius:var(--am-r-pill);
  background:var(--am-surface); color:var(--am-ink-2);
  font-size:12.5px; font-weight:600; text-decoration:none;
  transition:.15s;
}
.am-quick-b:hover{ background:var(--am-brand-50); border-color:var(--am-brand-300); color:var(--am-brand); }
.am-quick-b svg{ color:var(--am-brand); }

/* ---- التبويبات ---- */
.am-tabs{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--am-line); }
.am-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--am-muted);
  padding:9px 13px; margin-bottom:-1px; border-bottom:2px solid transparent;
  border-radius:var(--am-r-xs) var(--am-r-xs) 0 0; transition:.15s; white-space:nowrap;
}
.am-tab:hover{ color:var(--am-ink); background:var(--am-brand-50); }
.am-tab.on{ color:var(--am-brand); border-bottom-color:var(--am-brand); }

/* ---- الشبكة ---- */
.am-grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.am-col-5{ grid-column:span 5; min-width:0; }
.am-col-6{ grid-column:span 6; min-width:0; }
.am-col-7{ grid-column:span 7; min-width:0; }
.am-col-12{ grid-column:span 12; min-width:0; }

/* ---- اللوحات ---- */
.am-panel{
  background:var(--am-surface); border:1px solid var(--am-line);
  border-radius:var(--am-r-lg); display:flex; flex-direction:column; height:100%;
  overflow:hidden;
}
.am-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--am-line);
}
.am-panel-t{ display:flex; align-items:center; gap:8px; min-width:0; }
.am-panel-t h3{ font-size:14px; font-weight:700; margin:0; color:var(--am-ink); }
.am-panel-ico{
  width:26px; height:26px; border-radius:var(--am-r-xs); flex:none;
  display:grid; place-items:center; background:var(--am-brand-50); color:var(--am-brand);
}
.am-panel-hint{ color:var(--am-muted-2); display:inline-flex; cursor:help; }
.am-panel-body{ padding:14px; flex:1; min-width:0; }
.am-panel-body.flush{ padding:0; }
.am-more{ font-size:12px; font-weight:600; color:var(--am-brand); white-space:nowrap; }
.am-more:hover{ text-decoration:underline; }
.am-count-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:21px; padding:0 7px; border-radius:var(--am-r-pill);
  background:var(--am-terra-50); color:var(--am-terra);
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ---- الرسوم الزمنية ---- */
.am-multi{ display:flex; flex-direction:column; gap:14px; }
.am-multi-c{ min-width:0; }
.am-multi-t{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--am-ink-2); margin-bottom:5px;
}
.am-multi-t i{ width:8px; height:8px; border-radius:2px; flex:none; }

.am-chart{ min-width:0; }
.am-chart-plot{ position:relative; }
.am-svg{ width:100%; height:100%; display:block; overflow:visible; }
.am-chart-max{
  position:absolute; top:-2px; inset-inline-start:0;
  font-size:10.5px; color:var(--am-muted-2); font-variant-numeric:tabular-nums;
  background:var(--am-surface); padding:0 3px;
}
.am-chart-x{
  position:relative; height:16px; margin-top:5px;
  font-size:10px; color:var(--am-muted-2);
}
.am-chart-x span{
  position:absolute; transform:translateX(50%); white-space:nowrap;
  inset-inline-start:auto;
}

/* ---- الأشرطة الأفقية ---- */
.am-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.am-bars-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
.am-bars-label{
  font-size:12.5px; font-weight:600; color:var(--am-ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.am-bars-val{
  font-size:12.5px; font-weight:700; color:var(--am-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; flex:none;
}
.am-bars-val i{ font-style:normal; font-size:11px; color:var(--am-muted-2); font-weight:600; margin-inline-start:5px; }
.am-bars-track{ height:6px; background:var(--am-surface-2); border-radius:999px; overflow:hidden; }
.am-bars-fill{ height:100%; border-radius:999px; transition:width .35s ease; }

/* ---- الحلقة ---- */
.am-donut{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.am-donut-ring{ position:relative; width:132px; height:132px; flex:none; }
.am-donut-ring svg{ width:100%; height:100%; display:block; }
.am-donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.am-donut-center b{ font-size:19px; font-weight:700; color:var(--am-ink); font-variant-numeric:tabular-nums; }
.am-donut-center span{ font-size:10.5px; color:var(--am-muted); }
.am-legend{ list-style:none; margin:0; padding:0; flex:1; min-width:150px; display:flex; flex-direction:column; gap:7px; }
.am-legend li{ display:flex; align-items:center; gap:7px; font-size:12.5px; }
.am-legend i{ width:9px; height:9px; border-radius:2px; flex:none; }
.am-legend-l{ flex:1; color:var(--am-ink-2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.am-legend b{ color:var(--am-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.am-legend em{ font-style:normal; font-size:11px; color:var(--am-muted-2); min-width:32px; text-align:left; font-variant-numeric:tabular-nums; }

/* ---- مركز الإجراء ---- */
.am-actions{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.am-actions li + li{ border-top:1px solid var(--am-line); }
.am-action-link{
  display:flex; align-items:center; gap:9px; padding:9px 2px;
  color:var(--am-ink-2); text-decoration:none; transition:.14s;
}
.am-action-link:hover{ color:var(--am-brand); }
.am-action-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--am-muted-2); }
.tone-danger .am-action-dot{ background:var(--am-danger); }
.tone-warn   .am-action-dot{ background:var(--am-warn); }
.tone-info   .am-action-dot{ background:var(--am-info); }
.am-action-label{ flex:1; font-size:13px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-action-count{
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:1px 8px; border-radius:var(--am-r-pill);
  background:var(--am-surface-2); color:var(--am-ink);
}
.tone-danger .am-action-count{ background:var(--am-danger-bg); color:var(--am-danger); }
.tone-warn   .am-action-count{ background:var(--am-warn-bg);   color:var(--am-warn); }
.tone-info   .am-action-count{ background:var(--am-info-bg);   color:var(--am-info); }
.am-action-arrow{ color:var(--am-muted-2); flex:none; }

.am-clear{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:26px 12px; text-align:center; color:var(--am-success);
}
.am-clear b{ font-size:13.5px; color:var(--am-ink-2); }
.am-clear span{ font-size:12px; color:var(--am-muted); }

/* ---- الجداول المختصرة ---- */
.am-mini-wrap{ overflow-x:auto; margin:0 -14px -14px; padding:0 0 2px; }
.am-mini{ width:100%; border-collapse:collapse; font-size:12.5px; }
.am-mini thead th{
  background:transparent; color:var(--am-muted); font-size:11px; font-weight:600;
  text-align:right; padding:0 14px 7px; border-bottom:1px solid var(--am-line); white-space:nowrap;
}
.am-mini tbody td{
  padding:9px 14px; border-bottom:1px solid #F1F5F9; color:var(--am-ink-2); vertical-align:middle;
}
.am-mini tbody tr:last-child td{ border-bottom:none; }
.am-mini tbody tr:hover{ background:var(--am-brand-50); }
.am-ellip{ display:block; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; direction:ltr; unicode-bidi:isolate; }
.am-late{ color:var(--am-danger); font-weight:600; }

.am-badge{
  display:inline-flex; align-items:center; gap:4px;
  height:20px; padding:0 8px; border-radius:var(--am-r-pill);
  font-size:11px; font-weight:600; line-height:1; white-space:nowrap;
  background:var(--am-surface-2); color:var(--am-muted);
}
.am-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8; }
.am-badge.green{ background:var(--am-success-bg); color:var(--am-success); }
.am-badge.red{   background:var(--am-danger-bg);  color:var(--am-danger); }
.am-badge.amber{ background:var(--am-warn-bg);    color:var(--am-warn); }
.am-badge.slate{ background:var(--am-surface-2);  color:var(--am-muted); }

/* ---- الحالات ---- */
.am-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:30px 14px; text-align:center;
  color:var(--am-muted); font-size:12.5px;
}
.am-empty svg{ color:var(--am-line-2); }
.am-empty.sm{ padding:20px 10px; font-size:12px; }

.am-error{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:44px 20px; text-align:center;
  background:var(--am-surface); border:1px solid var(--am-danger-line);
  border-radius:var(--am-r-lg); color:var(--am-danger);
}
.am-error b{ font-size:15px; }
.am-error span{ font-size:12.5px; color:var(--am-muted); max-width:400px; }

.am-note{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:var(--am-r);
  background:var(--am-info-bg); border:1px solid var(--am-info-line);
  color:var(--am-info); font-size:12.5px;
}
.am-note.warn{ background:var(--am-warn-bg); border-color:var(--am-warn-line); color:var(--am-warn); }

.am-skel{
  display:block; border-radius:var(--am-r-xs); margin:5px 0;
  background:linear-gradient(90deg,#EEF2F6 25%,#E2E8F0 37%,#EEF2F6 63%);
  background-size:400% 100%; animation:am-shimmer 1.3s ease-in-out infinite;
}

/* ---- الاستجابة ---- */
@media (max-width:1100px){
  .am-col-5,.am-col-6,.am-col-7{ grid-column:span 12; }
  .am-kpi-grid{ grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); }
}
@media (max-width:768px){
  .am-home{ padding:12px 0 28px; gap:11px; }
  .am-toolbar{ padding:9px; }
  .am-seg{ width:100%; }
  .am-seg-b{ flex:1 1 auto; text-align:center; padding:6px 8px; font-size:12px; }
  .am-toolbar-sp{ display:none; }
  .am-select{ flex:1 1 140px; max-width:none; }
  .am-updated{ width:100%; }
  .am-kpi-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
  .am-kpi-val{ font-size:18px; }
  .am-kpi-ico{ width:27px; height:27px; }
  .am-tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .am-tab{ flex:none; }
  .am-donut{ justify-content:center; }
  .am-ellip{ max-width:140px; }
  .am-btn{ min-height:34px; }
  .am-quick-b{ min-height:34px; }
}
@media (max-width:420px){
  .am-kpi-grid{ grid-template-columns:1fr 1fr; }
}

/* مبلغ مالي داخل الجداول: الرقم لاتيني معزول والعملة بعده */
.am-money{ display:inline-flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums; }
.am-money > i{ font-style:normal; font-size:11px; color:var(--am-muted); }

/* تلميح أيقونة الشرح داخل ترويسة اللوحة: اللوحة تقصّ ما يتجاوز حدودها
   (overflow:hidden لتستدير أطرافها)، وأيقونة الشرح قريبة من الحافّتين
   العليا واليمنى، فلو ظهر التلميح فوقها أو متوسّطاً عليها لاقتُصّ.
   يُسدل هنا إلى الأسفل ويُحاذى إلى اليمين فيبقى كاملاً داخل اللوحة. */
.am-panel-hint[data-tip]:hover::after,
.am-panel-hint[data-tip]:focus-visible::after{
  bottom:auto; top:calc(100% + 6px);
  inset-inline-start:0; right:auto; transform:none;
  white-space:normal; width:max-content; max-width:230px;
  text-align:right; line-height:1.6;
}
/* التلميحات الطويلة عموماً تلتفّ بدل أن تمتدّ خارج الشاشة */
[data-tip]:hover::after,[data-tip]:focus-visible::after{ max-width:min(280px,90vw); }

/* ================================================================== */
/* 28) الشعار المعتمد                                                  */
/* ------------------------------------------------------------------ */
/* الحزمة تكتب الشعار نصّاً («أمتـار» + AMTARAQAR) لا بالعلامة المعتمدة  */
/* في amtaraqar.com. تُستبدل هنا بالشعار الرسمي نفسه، بنسخته الفاتحة    */
/* لأن حاويته دائماً على خلفية خضراء داكنة (الشريط الجانبي وصفحة        */
/* الدخول). لا يُمسّ شيء في الحزمة، والنصّ يبقى في DOM لقارئ الشاشة.     */
/* ================================================================== */
.inline-flex.flex-col.items-center.text-white:has(> span[style*="Tajawal"]){
  width:154px; height:52px;
  background-image:url("/assets/amtar-logo-light.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  gap:0 !important;
}
.inline-flex.flex-col.items-center.text-white:has(> span[style*="Tajawal"]) > span{
  /* يُخفى بصرياً فقط، ويبقى مقروءاً لقارئات الشاشة */
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* احتياط للمتصفحات التي لا تدعم ‎:has()‎ — يُستهدف الوسم مباشرةً */
[data-amtar-logo]{
  width:154px; height:52px; display:block;
  background:url("/assets/amtar-logo-light.png") center/contain no-repeat;
}
[data-amtar-logo] > span{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* على الخلفيات الفاتحة تُستعمل النسخة الداكنة */
.am-logo-dark{ background-image:url("/assets/amtar-logo-dark.png") !important; }

/* شعار الصفحات المستقلة في شريطها العلوي */
.am-standalone .topbar .ttl::before{
  content:""; width:96px; height:30px; flex:none;
  background:url("/assets/amtar-logo-dark.png") right/contain no-repeat;
  margin-inline-end:10px;
  border-inline-end:1px solid var(--am-line);
  padding-inline-end:12px;
}

/* الفصل بين مجتمعَي الحسابات أسفل حلقة التوزيع */
.am-split{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--am-line);
}
.am-split-i{
  flex:1 1 150px; min-width:0;
  background:var(--am-surface-2); border-radius:var(--am-r-sm);
  padding:9px 11px;
}
.am-split-i b{
  display:block; font-size:17px; font-weight:700; color:var(--am-ink);
  font-variant-numeric:tabular-nums lining-nums; line-height:1.3;
}
.am-split-i span{ font-size:11.5px; color:var(--am-muted); }

/* ================================================================== */
/* 29) شارة «قريباً» على الروابط قيد التطوير                           */
/* ------------------------------------------------------------------ */
/* يكتبها amtar-admin-nav-fix.js بأنماط سطرية بالسماوي القديم، ولا     */
/* تُلتقط بإعادة تعيين المتغيّرات، فتُصحَّح هنا على الهوية.              */
/* ================================================================== */
[data-amtar-soon-badge]{
  background:var(--am-surface-2) !important;
  color:var(--am-muted) !important;
  border:1px solid var(--am-line) !important;
  font-size:10px !important;
  font-weight:600 !important;
  padding:1px 7px !important;
  border-radius:var(--am-r-pill) !important;
}
/* الرابط المعطّل: لا يُشرح بالشفافية وحدها */
[data-amtar-soon]{ opacity:.6 !important; }
[data-amtar-soon]:hover{ background-color:transparent !important; }

/* ================================================================== */
/* 30) مؤشّر التنقّل بين الصفحات                                       */
/* ------------------------------------------------------------------ */
/* صفحات اللوحة قطعٌ كسولة، فبين النقر وظهور الصفحة فترةُ تحميل يبقى   */
/* فيها المحتوى السابق ظاهراً. هذا الشريط يجعل الانتظار مرئياً بدل أن  */
/* يبدو أن النقر لم يفعل شيئاً.                                        */
/* ================================================================== */
#am-route-progress{
  position:fixed; inset-block-start:0; inset-inline:0;
  height:2px; z-index:9999; pointer-events:none;
  background:transparent;
  opacity:0; transition:opacity .2s ease;
}
#am-route-progress::before{
  content:""; display:block; height:100%; width:40%;
  background:linear-gradient(90deg, transparent, var(--am-terra), transparent);
  transform:translateX(-100%);
}
#am-route-progress.on{ opacity:1; }
#am-route-progress.on::before{ animation:am-route-slide 1s ease-in-out infinite; }
@keyframes am-route-slide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}
@media (prefers-reduced-motion:reduce){
  #am-route-progress.on::before{ animation:none; width:100%; transform:none;
    background:var(--am-terra); opacity:.5; }
}

/* تنبيه تعثّر فتح الصفحة */
#am-route-stuck{
  position:fixed; inset-block-end:20px; inset-inline-start:50%;
  transform:translateX(-50%);
  z-index:9998; display:flex; align-items:center; gap:10px;
  background:var(--am-surface); color:var(--am-ink-2);
  border:1px solid var(--am-warn-line); border-inline-start:3px solid var(--am-warn);
  border-radius:var(--am-r); padding:10px 12px;
  box-shadow:var(--am-sh-pop); font-size:13px; max-width:min(92vw,460px);
}
#am-route-stuck button{
  height:30px; padding:0 12px; border-radius:var(--am-r-xs);
  border:1px solid var(--am-brand); background:var(--am-brand); color:#fff;
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
#am-route-stuck button:hover{ background:var(--am-brand-hover); }
#am-route-stuck .am-x{
  background:transparent; color:var(--am-muted); border:none;
  width:26px; height:26px; padding:0; font-size:17px; line-height:1;
}
#am-route-stuck .am-x:hover{ background:var(--am-surface-2); color:var(--am-ink); }