/* =========================================================================
   سماعتي — داشبورد الطلبات
   -------------------------------------------------------------------------
   نفس نظام تصميم sammaty.sa: الأزرق #184187، خط Cairo، شبكة 8pt،
   وضع داكن من اليوم الأول. كل قيمة هنا متغيّر — صفر ألوان مكتوبة في المكوّنات.
   ========================================================================= */

:root{
  /* ---- سلّم العلامة (أزرق سماعتي) ---- */
  --navy-50:#EEF3FB; --navy-100:#DCE6F5; --navy-200:#B7CBEA;
  --navy-300:#8FACDD; --navy-400:#5B84CC; --navy-500:#2E63C4;
  --navy-600:#24519F; --navy-700:#184187; --navy-800:#13346B; --navy-900:#0D2450;

  /* ---- الحبر والرماديات ---- */
  --ink:#000814;
  --gray:#545A62;                /* الرمادي الثانوي الوحيد */
  --line:#E6EAF0;
  --line-soft:#EEF1F5;

  /* ---- الدلالات (فاتح) ---- */
  --page:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F1F4F8;
  --surface-3:#E9EEF5;
  --text:var(--ink);
  --text-2:var(--gray);
  --brand:var(--navy-700);
  --brand-hover:var(--navy-800);
  --brand-bright:var(--navy-500);
  --on-brand:#FFFFFF;
  --focus:var(--navy-500);

  /* ---- ألوان الحالات ---- */
  --ok:#16A34A;        --ok-bg:#E8F6EE;
  --warn:#D97706;      --warn-bg:#FDF3E3;
  --danger:#DC2626;    --danger-bg:#FCEBEB;   --on-danger:#FFFFFF;
  --info:var(--navy-600); --info-bg:var(--navy-50);
  --muted-bg:#EDF1F6;
  /* لون إضافي لمراحل العملاء — خمس مراحل تحتاج خمسة ألوان تتمايز */
  --violet:#7C3AED;    --violet-bg:#F1EBFE;

  /* ---- الخط ---- */
  --font:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;
  --fs-h1:1.5rem; --fs-h2:1.125rem; --fs-body:.9375rem;
  --fs-sm:.875rem; --fs-xs:.8125rem; --fs-num:1.75rem;
  --lh-tight:1.3; --lh-body:1.7;

  /* ---- المسافات (8pt) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- الأنصاف ---- */
  --r-sm:8px; --r-md:10px; --r-card:14px; --r-pill:50px;

  /* ---- الظلال (أزرق-أسود، لا أسود صرف) ---- */
  --sh-sm:0 1px 2px rgba(16,24,40,.06);
  --sh-card:0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.04);
  --sh-float:0 20px 24px -4px rgba(16,24,40,.10), 0 8px 8px -4px rgba(16,24,40,.04);
  --sh-deep:0 24px 48px -12px rgba(16,24,40,.25);

  /* ---- الحركة ---- */
  --t-fast:150ms; --t:240ms;
  --ease:cubic-bezier(.25,1,.5,1);

  /* ---- التخطيط ---- */
  --sidebar-w:248px;
  --header-h:68px;

  color-scheme:light;
}

[data-theme="dark"]{
  --page:#0B111C;
  --surface:#141B28;
  --surface-2:#1B2433;
  --surface-3:#222D3E;
  --line:#242E3D;
  --line-soft:#1C2432;
  --text:#F3F6FA;
  --text-2:#A3ACB9;
  --brand:var(--navy-500);
  --brand-hover:var(--navy-400);
  --brand-bright:var(--navy-300);
  --on-brand:#FFFFFF;
  --focus:var(--navy-300);

  --ok:#4ADE80;        --ok-bg:rgba(22,163,74,.16);
  --warn:#FBBF24;      --warn-bg:rgba(217,119,6,.16);
  /* الأحمر الداكن فاتح، فالنص فوقه لازم يكون غامقاً لا أبيض */
  --danger:#F87171;    --danger-bg:rgba(220,38,38,.16); --on-danger:#2A0A0A;
  --info:var(--navy-300); --info-bg:rgba(46,99,196,.18);
  --muted-bg:#222D3E;
  --violet:#A78BFA;    --violet-bg:rgba(124,58,237,.2);

  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-card:0 12px 20px -6px rgba(0,0,0,.5);
  --sh-float:0 22px 40px -10px rgba(0,0,0,.55);
  --sh-deep:0 24px 48px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ============================== الأساس ============================== */
*,*::before,*::after{box-sizing:border-box}

/* لازم !important: عناصر كثيرة هنا تعلن display بصنفها (.btn مثلاً
   inline-flex) وهو أقوى من display:none الافتراضي للسمة hidden، فيظهر
   العنصر رغم el.hidden = true. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

button,input,select,textarea{font:inherit;color:inherit}

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

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
      stroke-linecap:round;stroke-linejoin:round}
.icon-16{width:16px;height:16px}
.icon-24{width:24px;height:24px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* الأرقام دائماً LTR حتى داخل نص عربي، وبعرض ثابت حتى لا ترقص عند التحديث */
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================== شاشة الدخول ============================== */
.login{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:var(--s-5);
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--navy-50), transparent 70%),
    var(--page);
}
[data-theme="dark"] .login{
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(46,99,196,.14), transparent 70%),
    var(--page);
}

.login__card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-float);
  padding:var(--s-6);
  text-align:center;
}

.login__logo{
  height:52px;width:auto;
  margin-bottom:var(--s-5);
  object-fit:contain;
}
[data-theme="dark"] .login__logo{filter:brightness(0) invert(1)}

.login__title{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-tight)}
.login__lead{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--s-2)}

.login form{margin-top:var(--s-5);text-align:start}

.login__error{
  display:none;
  align-items:center;
  gap:var(--s-2);
  margin-top:var(--s-4);
  padding:var(--s-3);
  border-radius:var(--r-sm);
  background:var(--danger-bg);
  color:var(--danger);
  font-size:var(--fs-sm);
  text-align:start;
}
.login__error[data-show]{display:flex}

/* ============================== الحقول ============================== */
.field{margin-bottom:var(--s-4)}
.field:last-child{margin-bottom:0}

/* :not(.check) — بدونه يغلب هذا المحدِّد (0,1,1) صنفَ .check (0,1,0)
   فيكسر صفّ «نفس رقم الجوال»: يصير block بلا محاذاة ولا فراغ. */
.field > label:not(.check){
  display:block;
  font-size:var(--fs-sm);
  font-weight:600;
  margin-bottom:var(--s-2);
}

.input,.select{
  width:100%;
  height:44px;                     /* هدف لمس ≥44 */
  padding:0 var(--s-3);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus,.select:focus{
  outline:none;
  border-color:var(--brand-bright);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent);
}
.input::placeholder{color:var(--text-2);opacity:.7}

.input:disabled,.select:disabled{
  opacity:.5;
  cursor:not-allowed;
  background:var(--surface-3);
}

.select{
  appearance:none;
  padding-inline-end:var(--s-6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545A62' stroke-width='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-size:18px;
  background-position:left var(--s-3) center;
  cursor:pointer;
}
[dir="ltr"] .select{background-position:right var(--s-3) center}
[data-theme="dark"] .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3ACB9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================== الأزرار ============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:44px;
  padding:0 var(--s-4);
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-size:var(--fs-body);
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
/* بعض الأزرار روابط <a> (واتساب مثلاً) — نمنع خطّ الرابط تحتها */
.btn,.btn:hover{text-decoration:none}

.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover:not(:disabled){background:var(--brand-hover)}

.btn-outline{background:transparent;border-color:var(--line);color:var(--text)}
.btn-outline:hover:not(:disabled){background:var(--surface-2);border-color:var(--brand-bright)}

.btn-quiet{background:transparent;color:var(--text-2);border-color:transparent}
.btn-quiet:hover:not(:disabled){background:var(--surface-2);color:var(--text)}

.btn-danger{background:var(--danger);color:var(--on-danger)}
.btn-danger:hover:not(:disabled){filter:brightness(.94)}

/* زر أيقونة بدلالة خطر — محايد في السكون حتى لا تصرخ سلال المهملات في
   كل بطاقة، ويحمرّ عند المرور أو التركيز. */
.btn-icon.btn-danger{background:transparent;color:var(--text-2)}
.btn-icon.btn-danger:hover:not(:disabled),
.btn-icon.btn-danger:focus-visible{background:var(--danger-bg);color:var(--danger);filter:none}

.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 var(--s-3);font-size:var(--fs-sm)}

.btn-icon{
  width:40px;height:40px;min-height:40px;padding:0;
  border-radius:var(--r-md);
  background:transparent;
  border-color:transparent;
  color:var(--text-2);
}
.btn-icon:hover{background:var(--surface-2);color:var(--text)}

/* زر دائري صغير يحمل عدّاداً */
.btn .count{
  font-size:var(--fs-xs);
  font-weight:700;
  padding:1px var(--s-2);
  border-radius:var(--r-pill);
  background:color-mix(in srgb, currentColor 16%, transparent);
}

/* ============================== الهيكل ============================== */
.app{display:none;min-height:100vh;min-height:100dvh}

/* عمودان: القائمة الجانبية بعرض ثابت والمحتوى يأخذ الباقي. في RTL العمود
   الأول على اليمين. minmax(0,…) يمنع جدولاً عريضاً من دفع العمود وتوسيعه. */
.app[data-show]{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  align-items:start;
}

/* ---- القائمة الجانبية: من أعلى الشاشة لأسفلها، ثابتة أثناء التمرير ---- */
.sidebar{
  position:sticky;
  top:0;
  z-index:20;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-5) var(--s-3) var(--s-4);
  background:var(--surface);
  border-inline-end:1px solid var(--line);
  overflow-y:auto;
}

.sidebar__brand{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  padding:0 var(--s-2) var(--s-4);
  border-bottom:1px solid var(--line-soft);
}
.sidebar__logo{height:40px;width:auto;object-fit:contain;margin-inline-end:auto}
.sidebar__close{display:none}                   /* للجوال فقط */

[data-theme="dark"] .sidebar__logo,
[data-theme="dark"] .mobilebar__logo{filter:brightness(0) invert(1)}

/* أدوات أسفل القائمة — margin-top:auto يلصقها بالقاع مهما قصرت الأقسام */
.sidebar__foot{
  display:grid;
  gap:var(--s-1);
  margin-top:auto;
  padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
}

/* ---- التنقّل بين الأقسام ---- */
.nav{display:grid;gap:var(--s-1)}

.nav__label{
  padding:0 var(--s-3);
  margin-bottom:var(--s-1);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--text-2);
  letter-spacing:.03em;
}

.nav__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  min-height:44px;
  padding:0 var(--s-3);
  border:0;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:600;
  text-align:start;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__item:hover{background:var(--surface-2);color:var(--text)}
.nav__item[aria-current="page"]{background:var(--info-bg);color:var(--brand-bright)}
/* شريط على حافة القسم الحالي — نفس لغة بطاقات الإحصاء */
.nav__item[aria-current="page"]::before{
  content:"";
  position:absolute;
  inset-block:10px;
  inset-inline-start:0;
  width:3px;
  border-radius:var(--r-pill);
  background:var(--brand-bright);
}
.nav__item--danger:hover{background:var(--danger-bg);color:var(--danger)}

/* ---- شريط الجوال وخلفية القائمة: لا يظهران إلا على الشاشات الضيّقة ---- */
.mobilebar{display:none}
.sidebar-backdrop{display:none}

/* ---- الأقسام: واحد ظاهر في كل مرة ---- */
.view{display:none}
.view[data-show]{display:block}

.main{
  max-width:1320px;
  margin:0 auto;
  padding:var(--s-6) var(--s-5) var(--s-8);
}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
  margin-bottom:var(--s-5);
}
.page-head h1{font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight)}
.page-head p{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--s-1)}
.page-head__actions{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* ============================== بطاقات الإحصاء ============================== */
.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-4);
  margin-bottom:var(--s-5);
}

.kpi{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5);
  box-shadow:var(--sh-sm);
  position:relative;
  overflow:hidden;
}
/* شريط لوني رفيع على حافة البداية — يميّز البطاقات بلا ضجيج */
.kpi::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:3px;
  background:var(--kpi-accent,var(--brand-bright));
}
.kpi--revenue{--kpi-accent:var(--ok)}
.kpi--orders{--kpi-accent:var(--brand-bright)}
.kpi--pending{--kpi-accent:var(--warn)}
.kpi--avg{--kpi-accent:var(--navy-400)}

.kpi__head{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:600;
}
.kpi__head .icon{color:var(--kpi-accent,var(--brand-bright))}

.kpi__value{
  font-size:var(--fs-num);
  font-weight:700;
  line-height:1.2;
  margin-top:var(--s-2);
}
.kpi__value small{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}

.kpi__note{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--s-1)}

/* ============================== شريط الفلاتر ============================== */
.toolbar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s-4);
  margin-bottom:var(--s-4);
  box-shadow:var(--sh-sm);
}

.toolbar__row{
  display:grid;
  grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(140px,1fr)) auto;
  gap:var(--s-3);
  align-items:end;
}

.toolbar .field{margin:0}

.search-wrap{position:relative}
.search-wrap .icon{
  position:absolute;
  inset-inline-start:var(--s-3);
  top:50%;
  transform:translateY(-50%);
  color:var(--text-2);
  pointer-events:none;
}
.search-wrap .input{padding-inline-start:42px}

/* رقائق الحالة السريعة */
.chips{
  display:flex;
  gap:var(--s-2);
  flex-wrap:wrap;
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:34px;
  padding:0 var(--s-3);
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.chip:hover{border-color:var(--brand-bright);color:var(--text)}
.chip[aria-pressed="true"]{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--on-brand);
}
.chip__n{
  font-size:var(--fs-xs);
  font-weight:700;
  padding:0 var(--s-2);
  border-radius:var(--r-pill);
  background:var(--surface-3);
  color:var(--text-2);
}
.chip[aria-pressed="true"] .chip__n{
  background:color-mix(in srgb, #FFF 22%, transparent);
  color:var(--on-brand);
}

/* ============================== الجدول ============================== */
.table-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  /* حتى لا يغطّي الشريط العلوي اللاصق أعلى الجدول عند القفز إليه */
  scroll-margin-top:calc(var(--header-h) + var(--s-4));
}

/* overflow-x:auto ينشئ حاوية تمرير خاصة، فالرأس اللاصق داخلها يُقاس منها
   لا من الصفحة. لذلك top:0 هنا هو الصحيح — ولو وضعنا --header-h لنزل الرأس
   بمقدار ارتفاع الشريط العلوي وغطّى أول صف. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

table{width:100%;border-collapse:collapse;min-width:860px}

thead th{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--surface-2);
  text-align:start;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--text-2);
  letter-spacing:.02em;
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

tbody td{
  padding:var(--s-4);
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:0}

tbody tr{cursor:pointer;transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--surface-2)}
tbody tr[data-active]{background:var(--info-bg)}

.cell-id{font-weight:700;white-space:nowrap}
.cell-id small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text-2)}

.cell-customer{min-width:170px}
.cell-customer strong{display:block;font-weight:600}
.cell-customer small{color:var(--text-2);font-size:var(--fs-xs)}

.cell-items{max-width:260px}
.cell-items span{
  display:block;
  font-size:var(--fs-sm);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cell-items small{color:var(--text-2);font-size:var(--fs-xs)}

.cell-total{font-weight:700;white-space:nowrap}
.cell-date{color:var(--text-2);font-size:var(--fs-sm);white-space:nowrap}
.cell-date small{display:block;font-size:var(--fs-xs)}

/* ---- شارة الحالة ---- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px var(--s-3);
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);
  font-weight:700;
  white-space:nowrap;
}
.badge::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:currentColor;
  flex:none;
}
.badge--completed{background:var(--ok-bg);color:var(--ok)}
.badge--processing{background:var(--info-bg);color:var(--info)}
.badge--pending,.badge--on-hold{background:var(--warn-bg);color:var(--warn)}
.badge--cancelled,.badge--failed{background:var(--danger-bg);color:var(--danger)}
.badge--refunded{background:var(--muted-bg);color:var(--text-2)}

/* حالة الأخصائي */
.badge--available{background:var(--ok-bg);color:var(--ok)}
.badge--unavailable{background:var(--muted-bg);color:var(--text-2)}

/* ============================== الترقيم ============================== */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--line);
  background:var(--surface-2);
  flex-wrap:wrap;
}
.pager__info{font-size:var(--fs-sm);color:var(--text-2)}
.pager__nav{display:flex;align-items:center;gap:var(--s-2)}

/* ============================== الحالات الفارغة ============================== */
.state{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-8) var(--s-5);
  text-align:center;
  color:var(--text-2);
}
.state[data-show]{display:flex}
.state .icon{width:44px;height:44px;stroke-width:1.5;color:var(--text-2);opacity:.55}
.state strong{color:var(--text);font-size:var(--fs-h2);font-weight:700}
.state p{font-size:var(--fs-sm);max-width:42ch}

/* حالة واقفة بذاتها (خارج بطاقة جدول) — تحتاج سطحها وحدّها */
.state--panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
}

/* هيكل عظمي أثناء التحميل — أهدأ للعين من دوّارة */
.skeleton td > span,
.sp-card--skeleton span,
.ld-card--skeleton span{
  display:block;
  height:12px;
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

.spinner{
  width:18px;height:18px;
  border:2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color:currentColor;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================== لوحة التفاصيل ============================== */
.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:40;
  background:rgba(11,17,28,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.drawer-backdrop[data-show]{opacity:1;visibility:visible}

.drawer{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;             /* RTL: تنزلق من اليسار */
  z-index:41;
  width:min(480px,100%);
  background:var(--surface);
  border-inline-end:1px solid var(--line);
  box-shadow:var(--sh-deep);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);       /* في RTL هذا يعني: خارج الشاشة يساراً */
  transition:transform var(--t) var(--ease);
}
[dir="ltr"] .drawer{
  inset-inline-start:auto;
  inset-inline-end:0;
  border-inline-end:0;
  border-inline-start:1px solid var(--line);
  transform:translateX(100%);
}
.drawer[data-show]{transform:translateX(0)}

.drawer__head{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
  flex:none;
}
.drawer__head h2{font-size:var(--fs-h2);font-weight:700;margin-inline-end:auto}
.drawer__head h2 small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--text-2)}

.drawer__body{flex:1;overflow-y:auto;padding:var(--s-5);display:grid;gap:var(--s-5)}

.drawer__foot{
  flex:none;
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);
  background:var(--surface-2);
  display:grid;
  gap:var(--s-3);
}

/* ---- مجموعة داخل اللوحة ---- */
.group__title{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--text-2);
  letter-spacing:.03em;
  margin-bottom:var(--s-3);
}
.group__title .icon{width:16px;height:16px;color:var(--brand-bright)}

.kv{display:grid;gap:var(--s-2)}
.kv__row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:var(--s-3);
  align-items:start;
  font-size:var(--fs-sm);
}
.kv__k{color:var(--text-2)}
.kv__v{font-weight:600;overflow-wrap:anywhere}
.kv__v a{font-weight:600}

/* ---- بنود الطلب ---- */
.items{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.item{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line-soft);
}
.item:last-child{border-bottom:0}
.item__name{flex:1;font-size:var(--fs-sm);font-weight:600}
.item__name small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text-2)}
.item__total{font-weight:700;white-space:nowrap;font-size:var(--fs-sm)}

.totals{
  margin-top:var(--s-3);
  padding-top:var(--s-3);
  border-top:1px dashed var(--line);
  display:grid;
  gap:var(--s-2);
}
.totals__row{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-2)}
.totals__row--grand{
  font-size:var(--fs-h2);
  font-weight:700;
  color:var(--text);
  padding-top:var(--s-2);
  border-top:1px solid var(--line);
}

/* ---- ملاحظة العميل ---- */
.note{
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:var(--warn-bg);
  color:var(--text);
  font-size:var(--fs-sm);
  border-inline-start:3px solid var(--warn);
}

/* ---- أزرار تغيير الحالة ---- */
/* شبكة 2×2 بدل flex-wrap — يبقى الأربعة متساوين مهما طال النص،
   ولا ينزل الأخير وحده في سطر. */
.status-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
/* عدد فردي (مراحل العملاء خمس) — الأخير يأخذ السطر كاملاً بدل أن يبقى نصفه فارغاً */
.status-actions > :last-child:nth-child(odd){grid-column:1/-1}

.drawer__msg{
  display:none;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-3);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
}
.drawer__msg[data-show]{display:flex}
.drawer__msg[data-kind="ok"]{background:var(--ok-bg);color:var(--ok)}
.drawer__msg[data-kind="err"]{background:var(--danger-bg);color:var(--danger)}

/* ============================== الصورة الرمزية ============================== */
.avatar{
  width:48px;height:48px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--info-bg);
  color:var(--brand-bright);
  border:1px solid var(--line);
  font-weight:700;
  font-size:var(--fs-body);
  line-height:1;
  user-select:none;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--lg{width:72px;height:72px;font-size:var(--fs-h2)}

/* ============================== بطاقات الأخصائيين ============================== */
.sp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--s-4);
}

.sp-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sp-card:hover{border-color:var(--navy-200);box-shadow:var(--sh-card)}
[data-theme="dark"] .sp-card:hover{border-color:var(--navy-600)}

/* شريط الحالة على حافة البداية — نفس لغة بطاقات الإحصاء */
.sp-card::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:3px;
  background:var(--ok);
}
.sp-card[data-status="unavailable"]::before{background:var(--text-2);opacity:.45}

/* وميض خفيف على البطاقة المضافة للتو — يدلّ عليها بلا إزعاج */
.sp-card[data-new]{animation:sp-pop var(--t) var(--ease)}
@keyframes sp-pop{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.sp-card__head{display:flex;align-items:center;gap:var(--s-3)}
.sp-card__id{min-width:0;margin-inline-end:auto}
.sp-card__id strong{
  display:block;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sp-card__id small{
  display:block;
  color:var(--text-2);
  font-size:var(--fs-xs);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sp-card__meta{
  display:grid;
  gap:var(--s-2);
  padding-top:var(--s-3);
  border-top:1px solid var(--line-soft);
}

.sp-meta{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  min-width:0;
  font-size:var(--fs-sm);
}
.sp-meta > .icon{color:var(--text-2);opacity:.75}
.sp-meta > span,
.sp-meta > a{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* المناطق: رقائق صغيرة تلتفّ على أكثر من سطر */
.sp-regions{display:flex;flex-wrap:wrap;gap:var(--s-1);min-width:0}
.sp-regions span{
  padding:1px var(--s-2);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  color:var(--text-2);
  font-size:var(--fs-xs);
}

.sp-card__actions{
  display:flex;
  gap:var(--s-2);
  margin-top:auto;
  padding-top:var(--s-3);
  border-top:1px solid var(--line-soft);
}
.sp-card__actions .btn{flex:1;min-width:0}
.sp-card__actions .btn-icon{flex:none;width:36px;height:36px;min-height:36px;border:1px solid var(--line)}

/* واتساب: زر محايد بأيقونة خضراء — يُعرَف فوراً بلا كسر لوحة الألوان */
.btn-wa .icon{color:var(--ok)}

.sp-card--skeleton{gap:var(--s-3);min-height:236px}
.sp-card--skeleton span:first-child{height:48px;border-radius:50%;width:48px}
/* بلا هذا يرسم الهيكل العظمي شريط «متاح» أخضر لبيانات لم تصل بعد */
.sp-card--skeleton::before{display:none}

/* ============================== العملاء (CRM) ============================== */

/* لون كل مرحلة يُعرَّف مرة هنا ويُقرأ من العمود والبطاقة والشارة وزر النقل
   — فتغيير لون مرحلة سطر واحد. */
[data-stage="new"]     {--st:var(--info);   --st-bg:var(--info-bg)}
[data-stage="assigned"]{--st:var(--violet); --st-bg:var(--violet-bg)}
[data-stage="closed"]  {--st:var(--ok);     --st-bg:var(--ok-bg)}
[data-stage="waitlist"]{--st:var(--warn);   --st-bg:var(--warn-bg)}
[data-stage="lost"]    {--st:var(--danger); --st-bg:var(--danger-bg)}

.badge[data-stage]{background:var(--st-bg);color:var(--st)}

.kpi--new{--kpi-accent:var(--info)}
.kpi--wait{--kpi-accent:var(--warn)}
.kpi--bags{--kpi-accent:var(--violet)}
.kpi--rate{--kpi-accent:var(--ok)}

/* ست أعمدة لا تتسع في 1320px — نوسّع الحاوية لهذا القسم وحده */
.main:has(#view-crm[data-show]){max-width:1640px}

.board-hint{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin-bottom:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--text-2);
}

.board{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(228px,1fr);
  gap:var(--s-3);
  align-items:start;
  overflow-x:auto;
  padding-bottom:var(--s-3);
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

.col{
  position:relative;
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  scroll-snap-align:start;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* شريط لون المرحلة أعلى العمود */
.col::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:3px;
  background:var(--st);
}
/* العمود تحت البطاقة المسحوبة */
.col[data-drop]{
  border-color:var(--st);
  background:color-mix(in srgb, var(--st) 7%, var(--surface-2));
}

.col__head{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  padding:var(--s-3);
  border-bottom:1px solid var(--line);
}
.col__title{min-width:0;margin-inline-end:auto}
.col__title h2{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:var(--lh-tight);
}
.col__title h2::before{
  content:"";
  width:8px;height:8px;
  flex:none;
  border-radius:50%;
  background:var(--st);
}
.col__title small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-2)}

.col__n{
  flex:none;
  padding:1px var(--s-2);
  border-radius:var(--r-pill);
  background:var(--st-bg);
  color:var(--st);
  font-size:var(--fs-xs);
  font-weight:700;
}

.col__body{
  display:grid;
  gap:var(--s-2);
  align-content:start;
  min-height:140px;
  padding:var(--s-2);
}

.col__empty{
  padding:var(--s-5) var(--s-2);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  text-align:center;
  font-size:var(--fs-xs);
  color:var(--text-2);
}

.col__more{width:100%}

/* ---- بطاقة العميل ---- */
.ld-card{
  position:relative;
  display:grid;
  gap:6px;
  padding:var(--s-3);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  font-size:var(--fs-xs);
  cursor:grab;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.ld-card:hover{border-color:var(--navy-200);box-shadow:var(--sh-card)}
[data-theme="dark"] .ld-card:hover{border-color:var(--navy-600)}
.ld-card:active{cursor:grabbing}
.ld-card[data-dragging]{opacity:.4}
.ld-card[data-active]{border-color:var(--brand-bright);box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-bright) 25%, transparent)}
/* عميل جديد مرّ عليه يوم بلا تواصل — حافة كهرمانية تلفت النظر */
.ld-card[data-late]{border-inline-start:3px solid var(--warn)}
.ld-card[data-new]{animation:sp-pop var(--t) var(--ease)}

.ld-card__top{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.ld-card__top strong{
  min-width:0;
  margin-inline-end:auto;
  font-size:var(--fs-sm);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ld-card__top small{flex:none;color:var(--text-2)}

.ld-line{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-2)}
.ld-line .icon{width:14px;height:14px;opacity:.75}
.ld-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-line--sp{color:var(--text);font-weight:600}
.ld-line--sp .icon{color:var(--violet);opacity:1}
.ld-line--lost{color:var(--danger)}
.ld-line--lost .icon{opacity:1}

.ld-card__foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1);margin-top:2px}
.ld-card__age{margin-inline-start:auto;color:var(--text-2);white-space:nowrap}

.ld-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0 var(--s-2);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  color:var(--text-2);
  white-space:nowrap;
}
.ld-tag .icon{width:12px;height:12px}
.ld-tag--late{background:var(--warn-bg);border-color:transparent;color:var(--warn);font-weight:700}
.ld-tag--bag{background:var(--violet-bg);border-color:transparent;color:var(--violet);font-weight:600}

.ld-card--skeleton{min-height:112px;cursor:default}
.ld-card--skeleton span:first-child{width:60%;height:14px}
.ld-card--skeleton span:last-child{width:40%}

/* ---- لوحة العميل ---- */
.ld-quick{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ld-quick .btn{flex:1}
.ld-quick .btn-icon{flex:none;width:36px;height:36px;min-height:36px;border:1px solid var(--line)}

.ld-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.ld-actions .btn{flex:1}

/* أزرار النقل بين المراحل — نقطة بلون المرحلة، والحالية مصبوغة بلونها */
.stage-btn{justify-content:flex-start}
.stage-btn::before{
  content:"";
  width:8px;height:8px;
  flex:none;
  border-radius:50%;
  background:var(--st);
}
.stage-btn[data-current],
.stage-btn[data-current]:disabled{
  opacity:1;
  background:var(--st-bg);
  border-color:transparent;
  color:var(--st);
}

/* ---- السجل ---- */
.tl-add{display:grid;gap:var(--s-2);margin-bottom:var(--s-4)}
.tl-add textarea.input{min-height:64px}
.tl-add .btn{justify-self:end}

.tl{display:grid}
.tl__item{
  position:relative;
  padding-inline-start:var(--s-5);
  padding-bottom:var(--s-3);
  font-size:var(--fs-sm);
}
.tl__item::before{
  content:"";
  position:absolute;
  inset-inline-start:3px;
  top:8px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--text-2);
  box-shadow:0 0 0 3px var(--surface);
}
.tl__item::after{
  content:"";
  position:absolute;
  inset-inline-start:7px;
  top:20px;
  bottom:-2px;
  width:1px;
  background:var(--line);
}
.tl__item:last-child{padding-bottom:0}
.tl__item:last-child::after{display:none}
.tl__item[data-type="created"]::before{background:var(--brand-bright)}
.tl__item[data-type="note"]::before{background:var(--warn)}
.tl__item[data-type="assign"]::before{background:var(--violet)}
.tl__item[data-type="bag"]::before{background:var(--ok)}
.tl__item p{overflow-wrap:anywhere;white-space:pre-line}
.tl__item small{display:block;font-size:var(--fs-xs);color:var(--text-2)}

/* ============================== التحليلات ============================== */

.date-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:36px;
  padding:0 var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:600;
}

/* أثناء إعادة الحساب تبقى الأرقام القديمة باهتة — بلا قفزة ولا وميض */
#an-body{transition:opacity var(--t-fast) var(--ease)}
#view-analytics[data-busy] #an-body{opacity:.55}

.an-section{margin-bottom:var(--s-6)}

.an-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-bottom:var(--s-4);
}
.an-head__icon{
  width:40px;height:40px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--r-md);
  background:var(--info-bg);
  color:var(--brand-bright);
}
.an-head__text{margin-inline-end:auto}
.an-head__text h2{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-tight)}
.an-head__text p{font-size:var(--fs-xs);color:var(--text-2)}

/* ---- مفتاح مقسّم (الفترة، المقياس) ---- */
.seg{
  display:inline-flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--sh-sm);
}
.seg__btn{
  min-height:34px;
  padding:0 var(--s-4);
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg__btn:hover{background:var(--surface-2);color:var(--text)}
.seg__btn[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}

.an-custom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-bottom:var(--s-4);
}
.an-custom .field{margin:0;min-width:180px}

/* ---- البطاقات: البطل يميناً بارتفاع صفّين، والباقي شبكة 6 أعمدة —
   الصف الأول ثلاث بطاقات (عمودان لكل منها)، والثاني اثنتان (ثلاثة). ---- */
.an-kpis{
  display:grid;
  grid-template-columns:minmax(300px,1fr) 2fr;
  gap:var(--s-4);
}
.an-tiles{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--s-4);
}
.an-tile{grid-column:span 2}
.an-tile--wide{grid-column:span 3}

.an-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-height:200px;
  padding:var(--s-5);
  border-radius:var(--r-card);
  background:linear-gradient(135deg, var(--navy-600), var(--navy-900));
  color:#FFF;
  box-shadow:var(--sh-card);
}
/* دائرتان شفّافتان — زخرفة لا بيانات، فتبقى خافتة */
.an-hero::before,
.an-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.an-hero::before{width:220px;height:220px;inset-block-start:-90px;inset-inline-end:-60px}
.an-hero::after{width:140px;height:140px;inset-block-end:-70px;inset-inline-start:30%}

.an-hero__head{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  font-weight:600;
}
.an-hero__icon{
  width:36px;height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.14);
}
.an-hero__icon .icon{width:18px;height:18px}

.an-hero__value{
  position:relative;
  margin-top:auto;
  font-size:clamp(2.25rem, 4vw, 3.25rem);
  font-weight:700;
  line-height:1.1;
}
.an-hero__value small{font-size:.45em;font-weight:600;opacity:.85}
.an-hero__note{position:relative;font-size:var(--fs-xs);opacity:.85}

.an-tag{
  display:inline-block;
  padding:0 var(--s-2);
  border-radius:var(--r-pill);
  background:var(--violet-bg);
  color:var(--violet);
  font-size:11px;
  font-weight:700;
  line-height:20px;
  white-space:nowrap;
}
.an-tag:empty{display:none}
.an-tag--hero{margin-inline-start:auto;background:rgba(255,255,255,.16);color:#FFF}

.an-tile{
  --tone:var(--info); --tone-bg:var(--info-bg);
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
  padding:var(--s-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
}
.an-tile[data-tone="violet"]{--tone:var(--violet); --tone-bg:var(--violet-bg)}
.an-tile[data-tone="warn"]  {--tone:var(--warn);   --tone-bg:var(--warn-bg)}

.an-tile__body{min-width:0;margin-inline-end:auto}
.an-tile__value{font-size:var(--fs-num);font-weight:700;line-height:1.2}
.an-tile__label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.an-tile__note{margin-top:var(--s-1);font-size:var(--fs-xs);color:var(--text-2)}
.an-tile__icon{
  width:36px;height:36px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--r-md);
  background:var(--tone-bg);
  color:var(--tone);
}
.an-tile__icon .icon{width:18px;height:18px}
/* «تحتاج متابعة» برقمها الملوّن حين لا يكون صفراً — الحالة مع اسمها وأيقونتها لا اللون وحده */
.an-tile[data-alert] .an-tile__value{color:var(--warn)}

/* ---- بطاقة الرسم ---- */
.an-card{
  padding:var(--s-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
}
.an-card__head{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.an-card__title{flex:1 1 360px;min-width:0}
.an-card__title h2{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-2);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-tight);
}
.an-card__title h2 .icon{color:var(--brand-bright)}
.an-card__title p{margin-top:var(--s-1);font-size:var(--fs-sm);color:var(--text-2)}
.an-card__controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3)}
.an-card__controls .select{width:auto;min-width:170px;height:42px}

.an-badge{
  padding:2px var(--s-3);
  border-radius:var(--r-pill);
  background:var(--warn-bg);
  color:var(--warn);
  font-size:var(--fs-xs);
  font-weight:700;
}
.an-badge:empty{display:none}

.an-card__foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-top:var(--s-4);
  padding-top:var(--s-3);
  border-top:1px solid var(--line-soft);
}
.an-foot-note{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  max-width:80ch;
  font-size:var(--fs-xs);
  color:var(--text-2);
}
.an-foot-note .icon{margin-top:3px}

/* ---- الأعمدة ----
   عمود واحد = سلسلة واحدة، فلا مفتاح ألوان: العنوان يسمّي ما يُرسم.
   العمود ≤24px بنهاية مدوّرة 4px وقاعدة مربّعة، والشبكة خطوط شعرية صامتة. */
.dchart{
  --plot-h:260px;     /* ارتفاع منطقة الأعمدة */
  --cap:24px;         /* مساحة رقم القمّة فوق أطول عمود */
  --axis-w:40px;      /* عمود أرقام المحور */
  --bar:var(--brand-bright);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--axis-w);   /* RTL: المحور يساراً */
}
.dchart[data-measure="specialists"]{--bar:var(--violet)}

.dchart__axis{position:relative;height:var(--plot-h)}
.dchart__tick{
  position:absolute;
  inset-inline-start:var(--s-2);
  transform:translateY(50%);
  font-size:11px;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

.dchart__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.dchart__inner{position:relative;display:flex;min-width:100%;width:max-content}

.dchart__grid{
  position:absolute;
  inset-inline:0;
  top:var(--cap);
  height:calc(var(--plot-h) - var(--cap));
  pointer-events:none;
}
.dchart__line{position:absolute;inset-inline:0;height:1px;background:var(--line)}
.dchart__line--base{background:var(--text-2);opacity:.35}

.dcol{
  flex:1 0 56px;
  max-width:120px;
  display:grid;
  grid-template-rows:var(--plot-h) 84px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  border-radius:var(--r-sm);
}
.dcol__plot{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding-top:var(--cap);
}
.dcol__val{
  margin-bottom:4px;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.dcol__bar{
  width:min(var(--bar-w,24px), 60%);
  min-height:0;
  border-radius:4px 4px 0 0;
  background:var(--bar);
  transition:height var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.dcol__label{
  position:relative;
  overflow:visible;
}
/* الاسم مائل يبدأ تحت العمود وينزل يساراً — يتّسع لأسماء طويلة بلا تداخل */
.dcol__label span{
  position:absolute;
  top:10px;
  right:50%;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-xs);
  color:var(--text-2);
  transform:rotate(-35deg);
  transform-origin:right top;
}

.dcol:hover .dcol__bar,
.dcol:focus-visible .dcol__bar{filter:brightness(1.18)}
.dcol:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dcol[aria-pressed="true"] .dcol__bar{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--bar)}
.dcol[aria-pressed="true"] .dcol__label span{color:var(--text);font-weight:700}

/* كثرة الأعمدة («عرض كل الأحياء»): أرقام القمم تتزاحم، فتنتقل للتلميح */
.dchart[data-dense] .dcol{flex-basis:40px}
.dchart[data-dense] .dcol__val{visibility:hidden}

.dtip{
  position:absolute;
  z-index:5;
  min-width:150px;
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--sh-float);
  font-size:var(--fs-xs);
  color:var(--text-2);
  white-space:nowrap;
  pointer-events:none;
  transform:translate(-50%, -100%);
}
.dtip strong{display:block;font-size:var(--fs-h2);color:var(--text)}
.dtip b{color:var(--text)}

/* ---- عملاء الحي المختار ---- */
.dlist{
  margin-top:var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  animation:sp-pop var(--t) var(--ease);
}
.dlist__head{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.dlist__title{margin-inline-end:auto;min-width:0}
.dlist__title strong{display:block;font-weight:700}
.dlist__title small{display:block;font-size:var(--fs-xs);color:var(--text-2)}
.dlist__rows{max-height:320px;overflow-y:auto}
.dlist__row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  padding:var(--s-3) var(--s-4);
  border:0;
  border-bottom:1px solid var(--line-soft);
  background:none;
  color:inherit;
  font:inherit;
  font-size:var(--fs-sm);
  text-align:start;
  cursor:pointer;
}
.dlist__row:last-child{border-bottom:0}
.dlist__row:hover{background:var(--surface-2)}
.dlist__row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist__row span{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist__row small{color:var(--text-2);white-space:nowrap}

/* ============================== زوار الموقع ============================== */

/* لون السلسلة: navy-300 (لون التحليلات في الداكن) يفقد تشبّعه على الخلفية
   الداكنة فيُقرأ رمادياً — الأعمدة والأشرطة هنا navy-400 في الداكن */
.tr-view{--tr-bar:var(--navy-500)}
[data-theme="dark"] .tr-view{--tr-bar:var(--navy-400)}

#tr-body{transition:opacity var(--t-fast) var(--ease)}
#view-traffic[data-busy] #tr-body{opacity:.55}

.tr-filters{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-bottom:var(--s-5);
}
.tr-filters .an-custom{margin:0}

.tr-note{margin:var(--s-3) 0 var(--s-5)}

.tr-chart{--bar:var(--tr-bar)}
/* الأعمدة تملأ العرض — أسبوع بسبعة أعمدة لا يتكدّس في طرف الرسم */
.tr-chart .dcol{flex-basis:32px;max-width:none;cursor:default}
.tr-chart[data-dense] .dcol{flex-basis:24px}
/* القيمة فوق أعلى عمود فقط — الباقي فارغ فلا يأخذ مكاناً */
.tr-chart .dcol__val:empty{visibility:hidden}

.tr-table{margin-top:var(--s-4)}
.tr-table summary{
  width:max-content;
  cursor:pointer;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--brand-bright);
}
.tr-table__wrap{
  max-height:320px;
  overflow:auto;
  margin-top:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.tr-table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tr-table th,
.tr-table td{padding:var(--s-2) var(--s-3);text-align:start;border-bottom:1px solid var(--line-soft)}
.tr-table th{
  position:sticky;
  top:0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:var(--fs-xs);
  font-weight:700;
}
.tr-table tr:last-child td{border-bottom:0}
/* بلا .num (اتجاهه LTR فيلتصق الرقم يساراً بعيداً عن عنوان عموده) */
.tr-table .tr-num{font-variant-numeric:tabular-nums}

.tr-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4);
  margin-top:var(--s-4);
}
.tr-grid .an-card__head{margin-bottom:var(--s-3)}
.tr-sub{margin:var(--s-5) 0 var(--s-1);font-size:var(--fs-sm);font-weight:700}

/* ---- قائمة مرتّبة: الاسم والقيمة، ثم شريط رفيع بلون السلسلة ---- */
.rank__row{padding:var(--s-2) 0 var(--s-3);border-bottom:1px solid var(--line-soft)}
.rank__row:last-child{border-bottom:0}
.rank__head{display:flex;align-items:baseline;gap:var(--s-3)}
.rank__name{
  min-width:0;
  margin-inline-end:auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-sm);
  font-weight:600;
}
.rank__tag{
  display:inline-block;
  margin-inline-start:var(--s-2);
  padding:0 var(--s-2);
  border-radius:var(--r-pill);
  background:var(--muted-bg);
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
  line-height:20px;
  vertical-align:1px;
}
/* inline-flex يعزل القيمة عن النسبة: بلا عزل يلتصق الرقمان («9931%»)،
   وبعد كلمة عربية («2.2 ساعة») تنقلب علامة النسبة إلى «%26» */
.rank__val{
  flex:none;
  display:inline-flex;
  align-items:baseline;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rank__val small{direction:ltr;font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
/* القاعدة (البداية) مربّعة، ونهاية القيمة مدوّرة */
.rank__bar{
  height:6px;
  margin-top:6px;
  border-start-end-radius:3px;
  border-end-end-radius:3px;
  background:var(--surface-2);
  overflow:hidden;
}
.rank__bar span{
  display:block;
  height:100%;
  border-start-end-radius:3px;
  border-end-end-radius:3px;
  background:var(--tr-bar);
  transition:width var(--t) var(--ease);
}
.rank__sub{margin-top:var(--s-1);font-size:var(--fs-xs);color:var(--text-2)}
.rank__empty{padding:var(--s-4) 0;font-size:var(--fs-sm);color:var(--text-2)}

/* ============================== النوافذ ============================== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(11,17,28,.5);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.modal-backdrop[data-show]{opacity:1;visibility:visible}
.modal-backdrop--top{z-index:52}

.modal{
  position:fixed;
  inset:0;
  z-index:51;
  display:grid;
  place-items:center;
  padding:var(--s-4);
  /* الغلاف يمرّر النقر للخلفية؛ البطاقة وحدها تلتقطه */
  pointer-events:none;
}
.modal[hidden]{display:none}
.modal--top{z-index:53}

.modal__card{
  width:min(640px,100%);
  max-height:min(88vh,900px);
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-deep);
  pointer-events:auto;
  opacity:0;
  transform:translateY(10px) scale(.985);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.modal[data-show] .modal__card{opacity:1;transform:none}
.modal--sm .modal__card{width:min(440px,100%)}

.modal__head{
  flex:none;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
}
.modal__head h2{font-size:var(--fs-h2);font-weight:700;margin-inline-end:auto}

.modal__body{flex:1;overflow-y:auto;padding:var(--s-5);display:grid;gap:var(--s-5)}

/* نص النافذة يأخذ صنفاً صريحاً لا محدِّد عنصر (.modal__body p) — ذاك كان
   أقوى من .err و .hint فيسرق لونهما. */
.modal__text{font-size:var(--fs-sm);color:var(--text-2)}

.modal__foot{
  flex:none;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.modal__btns{display:flex;gap:var(--s-2);margin-inline-start:auto}

.modal__msg{
  display:none;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--danger);
}
.modal__msg[data-show]{display:block}

/* ============================== نموذج الأخصائي ============================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.form-grid .field{margin:0}
.field--full{grid-column:1/-1}

/* عنوان مجموعة حقول ليس له عنصر تحكّم واحد (مثل مجموعة الأزرار) */
.field__label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:600;
  margin-bottom:var(--s-2);
}

.req{color:var(--danger)}

.hint{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--s-1);line-height:1.5}

.err{display:none;font-size:var(--fs-xs);color:var(--danger);margin-top:var(--s-1);font-weight:600}
.err[data-show]{display:block}

.input[aria-invalid="true"],
.select[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

textarea.input{
  height:auto;
  min-height:88px;
  padding:var(--s-3);
  line-height:var(--lh-body);
  resize:vertical;
}

.check{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  margin-top:var(--s-2);
  font-size:var(--fs-sm);
  font-weight:400;
  color:var(--text-2);
  cursor:pointer;
}
.check input{width:16px;height:16px;flex:none;accent-color:var(--brand);cursor:pointer}

/* ---- حقل الصورة ---- */
.photo-field{display:flex;align-items:center;gap:var(--s-4)}
.photo-field__side{min-width:0}
.photo-field__actions{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}

/* ---- مفتاح الحالة (متاح / غير متاح) ---- */
.segment{
  display:flex;
  max-width:280px;
  height:44px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
  overflow:hidden;
}
.segment label{
  flex:1;
  display:grid;
  place-items:center;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text-2);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segment label:hover{color:var(--text)}
.segment input:checked + label{background:var(--brand);color:var(--on-brand)}
.segment input:focus-visible + label{outline:2px solid var(--focus);outline-offset:-2px}

/* ---- حقل المناطق (رقائق + كتابة) ---- */
.tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  min-height:44px;
  padding:6px var(--s-3);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  cursor:text;
}
.tags:focus-within{
  border-color:var(--brand-bright);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  padding:3px 6px 3px var(--s-2);
  border-radius:var(--r-pill);
  background:var(--info-bg);
  color:var(--brand-bright);
  font-size:var(--fs-xs);
  font-weight:600;
}

/* × دائرة 22px لا محرف عارٍ — الحرف وحده هدف ~8×15px يصعب إصابته باللمس */
.tag button{
  width:22px;height:22px;
  flex:none;
  display:grid;
  place-items:center;
  border:0;
  padding:0;
  border-radius:50%;
  background:none;
  color:inherit;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  opacity:.7;
  transition:opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tag button:hover,
.tag button:focus-visible{opacity:1;background:color-mix(in srgb, currentColor 20%, transparent)}

.tags__input{
  flex:1;
  min-width:140px;
  height:30px;
  border:0;
  background:none;
  outline:none;
  font-size:var(--fs-sm);
}

/* ============================== التنبيهات ============================== */
.toasts{
  position:fixed;
  inset-block-end:var(--s-5);
  inset-inline-end:var(--s-5);
  z-index:60;
  display:grid;
  gap:var(--s-2);
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--brand-bright);
  box-shadow:var(--sh-float);
  font-size:var(--fs-sm);
  font-weight:600;
  max-width:360px;
  animation:toast-in var(--t) var(--ease);
}
.toast[data-kind="ok"]{border-inline-start-color:var(--ok)}
.toast[data-kind="ok"] .icon{color:var(--ok)}
.toast[data-kind="err"]{border-inline-start-color:var(--danger)}
.toast[data-kind="err"] .icon{color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================== الاستجابة ============================== */
/* 1180 لا 1024: القائمة الجانبية تأخذ 248px، فشريط الفلاتر يضيق قبل أن
   تضيق الشاشة نفسها. */
@media (max-width:1180px){
  .toolbar__row{grid-template-columns:1fr 1fr;}
  .toolbar__row > :last-child{grid-column:1/-1}

  .an-kpis{grid-template-columns:1fr}
  .an-hero{min-height:170px}

  .tr-grid{grid-template-columns:1fr}
}

/* الشاشات الضيّقة: القائمة الجانبية تختفي وتنزلق من اليمين بزر القائمة */
@media (max-width:860px){
  .app[data-show]{display:block}

  .mobilebar{
    position:sticky;
    top:0;
    z-index:30;
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:0 var(--s-4);
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid var(--line);
  }
  .mobilebar__logo{height:30px;width:auto;object-fit:contain}

  .sidebar{
    position:fixed;
    inset-block:0;
    inset-inline-start:0;
    z-index:43;
    width:min(280px,86vw);
    height:auto;
    box-shadow:var(--sh-deep);
    transform:translateX(100%);         /* RTL: خارج الشاشة يميناً */
    /* visibility تُخرجها من ترتيب Tab وهي مغلقة — بلا هذا يتنقّل المؤشر
       بين أزرار لا تُرى. عند الإغلاق تتأخر حتى ينتهي الانزلاق، وعند الفتح
       فورية (القاعدة التالية) — وإلا بقيت hidden في أول إطار فرفضت التركيز. */
    visibility:hidden;
    transition:transform var(--t) var(--ease), visibility 0s linear var(--t);
  }
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  .sidebar[data-open]{
    transform:none;
    visibility:visible;
    transition:transform var(--t) var(--ease), visibility 0s;
  }
  .sidebar__close{display:inline-flex}

  .sidebar-backdrop{display:block;z-index:42}
}

@media (max-width:640px){
  :root{--fs-num:1.5rem}

  .main{padding:var(--s-4) var(--s-4) var(--s-7)}

  .kpis{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .kpi{padding:var(--s-3) var(--s-4)}

  .toolbar__row{grid-template-columns:1fr}

  .drawer{width:100%}
  .kv__row{grid-template-columns:92px 1fr}

  .sp-grid{grid-template-columns:1fr}

  /* التحليلات: بطاقتان في الصف، والخامسة بعرض الصف */
  .an-tiles{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .an-tile,.an-tile--wide{grid-column:span 1}
  .an-tile:last-child{grid-column:1/-1}
  .an-tile{padding:var(--s-3)}
  .an-head .seg,.an-card__controls,.an-card__controls .seg{width:100%}
  .an-card__controls .select{width:100%}
  .seg{overflow-x:auto}
  .seg__btn{flex:1;padding:0 var(--s-3)}
  .an-card{padding:var(--s-4)}
  .tr-filters,.tr-filters .seg{width:100%}
  .dchart{--plot-h:220px}
  /* عرض لا يقسم الشاشة بالضبط — نصف عمود يطلّ عند الحافة فيُفهم أنها تُسحب */
  .dcol{flex-basis:50px}
  .dlist__row{grid-template-columns:minmax(0,1fr) auto}
  .dlist__row span{display:none}

  /* اللوحة تمتد لحافتي الشاشة، وعمود واحد تقريباً في كل مرة مع إطلالة
     على التالي — تُفهم فوراً أنها تُسحب جانبياً */
  .board{
    grid-auto-columns:86%;
    scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--s-4));
    padding-inline:var(--s-4);
    scroll-padding-inline:var(--s-4);
  }

  /* النافذة تصير ورقة تصعد من الأسفل — أسهل للإبهام */
  .modal{padding:0;place-items:end center}
  .modal__card,
  .modal--sm .modal__card{
    width:100%;
    max-height:92dvh;
    border-radius:var(--r-card) var(--r-card) 0 0;
    border-inline:0;
    border-block-end:0;
  }
  .modal__head,.modal__body,.modal__foot{padding-inline:var(--s-4)}
  .modal__btns{width:100%}
  .modal__btns .btn{flex:1}

  .form-grid{grid-template-columns:1fr}
  .segment{max-width:none}

  .toasts{
    inset-inline:var(--s-4);
    inset-block-end:var(--s-4);
  }
  .toast{max-width:none}
}

/* ============================== الطباعة ============================== */
@media print{
  .sidebar,.mobilebar,.toolbar,.pager,.page-head__actions,.drawer__foot,.toasts{display:none!important}
  .app[data-show]{display:block}
  .drawer-backdrop,.modal,.modal-backdrop{display:none!important}
  .drawer{
    position:static;width:auto;transform:none;box-shadow:none;border:0;
  }
  body{background:#fff}
  .table-card,.kpi,.sp-card{box-shadow:none;border-color:#ccc}
  tbody tr{cursor:auto}

  /* قائمة الأخصائيين تُطبع عمودين — أوفر للورق */
  .sp-grid{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .sp-card{break-inside:avoid}
  .sp-card__actions{display:none!important}

  .board-hint,.col__more{display:none!important}
  .seg,.an-card__controls,#an-chart-more,.dtip{display:none!important}
  .tr-filters,.tr-table,[data-more]{display:none!important}
  .tr-grid{grid-template-columns:1fr 1fr}
  .an-hero{color:#000;background:none;border:1px solid #ccc;box-shadow:none}
  .an-tile,.an-card{box-shadow:none;break-inside:avoid}
  .board{overflow:visible;grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
  .ld-card{break-inside:avoid;box-shadow:none}
}