/* ============================================================================
   call.city — نظام تصميم عصري موحّد (واجهة عربية RTL)
   قواعد المشروع المطبّقة هنا:
     1. خط واحد للمشروع كله              (--font)
     2. نمط جدول واحد                    (.table)
     3. نظام مكوّنات/أزرار/ألوان واحد
     4. نوافذ غير حاجبة                  (.modal / .toast — لا alert() إطلاقاً)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* خلفيات (وضع فاتح) */
  --bg: #eef1f7;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
             radial-gradient(900px 500px at -10% 10%, rgba(139, 92, 246, 0.07), transparent 55%),
             #eef1f7;
  --surface: #ffffff;
  --surface-2: #f3f5fa;
  --surface-3: #e6eaf2;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.16);

  /* نص */
  --text: #1b2333;
  --text-dim: #5a6478;
  --text-faint: #8b95a8;

  /* لون أساسي + تدرّج */
  --primary: #5b5ef0;
  --primary-2: #7c3aed;
  --accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  --primary-soft: rgba(99, 102, 241, 0.12);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.13);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.14);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.12);

  /* مقياس المسافات */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
  --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--bg-grad); background-attachment: fixed; }
a { color: var(--primary-2); text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── التخطيط: رأس علوي + محتوى ────────────────────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.header {
  display: flex; align-items: center; gap: var(--s5);
  color: #fff;
  background: linear-gradient(180deg, #212c4d 0%, #121a30 100%);
  border-bottom: 1px solid rgba(0,0,0,.55);
  /* بروز ثلاثي الأبعاد على خلفية داكنة */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
              inset 0 -1px 0 rgba(0,0,0,.45),
              0 3px 8px rgba(0,0,0,.30);
  padding: 5px var(--s6);
  position: sticky; top: 0; z-index: 50;
}
@media (max-width: 900px) { .header { padding: 5px var(--s4); gap: var(--s4); } }
.brand {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 800; font-size: 16px;
  flex: 0 0 auto;
}
.brand .logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-grad);
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255,255,255,.35);
  color: #fff; font-weight: 900; font-size: 14px;
}
.brand .logo svg { width: 17px; height: 17px; }

/* مؤشّر المكالمات الحية — مدفوع إلى أقصى الطرف (يسار في RTL) من الشريط العلوي */
.live-calls {
  margin-inline-start: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  color: rgba(255,255,255,.85); text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-weight: 800; font-size: 13px; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: all .14s ease; white-space: nowrap;
}
.live-calls:hover { background: rgba(255,255,255,.16); color: #fff; }
.live-calls .lc-ic { display: grid; place-items: center; }
.live-calls .lc-ic svg { width: 18px; height: 18px; opacity: .9; }
.live-calls .lc-count { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
/* توجد مكالمات نشطة → أخضر نابض */
.live-calls.active {
  color: #fff; background: rgba(34,197,94,.20); border-color: rgba(34,197,94,.60);
}
.live-calls.active .lc-ic { color: #4ade80; animation: lc-pulse 1.4s ease-in-out infinite; }
.live-calls.active .lc-count { color: #4ade80; }
/* AMI غير متاح */
.live-calls.unavailable { opacity: .55; }
@keyframes lc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* شريط تنقّل أفقي: كل مجموعة زرّ يفتح قائمة منسدلة */
.nav { display: flex; flex-direction: row; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.nav-group { position: relative; }
.nav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px var(--s3);
  color: rgba(255,255,255,.82);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all .13s ease; white-space: nowrap;
}
.nav-btn { gap: 4px; }
.nav-btn-ic { display: grid; place-items: center; }
.nav-btn-ic svg { width: 19px; height: 19px; opacity: .9; }
.nav-btn > svg { width: 13px; height: 13px; opacity: .65; transition: transform .18s ease; }
/* زرّ بارز (3D) عند المرور أو الفتح على خلفية داكنة */
.nav-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-group.open .nav-btn {
  color: #fff;
  background: rgba(0,0,0,.30);
  border-color: rgba(0,0,0,.45);
  /* مضغوط للأسفل ليبدو متّصلاً بالقائمة المنسدلة */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.nav-group.open .nav-btn > svg { transform: rotate(180deg); }
/* تمييز المجموعة التي تحوي الصفحة النشطة (خط أبيض + شريط سفلي) */
.nav-group:has(a.active) .nav-btn { color: #fff; box-shadow: inset 0 -2px 0 var(--primary-2); }

/* القائمة المنسدلة ملتصقة بالشريط (تنزل من حافته السفلية) بخلفية داكنة */
.nav-menu {
  position: absolute; top: calc(100% + 5px); inset-inline-start: 0;
  display: none; flex-direction: column; gap: 2px;
  min-width: 210px; padding: var(--s2);
  background: linear-gradient(180deg, #1c2745, #131b32);
  border: 1px solid rgba(0,0,0,.55); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.45);
  z-index: 60;
}
.nav-group.open .nav-menu { display: flex; }
.nav-menu a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3);
  color: rgba(255,255,255,.82);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 13.5px;
  transition: all .15s ease; white-space: nowrap;
}
.nav-menu a svg { width: 19px; height: 19px; flex: 0 0 19px; opacity: .85; }
.nav-menu a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-menu a.active { background: rgba(99,102,241,.28); color: #fff; }
.nav-menu a.active svg { opacity: 1; color: #a78bfa; }

/* صف عنصر القائمة: الرابط + نجمة التثبيت */
.nav-item { display: flex; align-items: center; gap: 2px; }
.nav-item > a { flex: 1; min-width: 0; }
.pin-star {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; border-radius: 7px;
  color: rgba(255,255,255,.45); cursor: pointer; transition: all .13s ease;
}
.pin-star svg { width: 16px; height: 16px; fill: none; }
.pin-star:hover { background: rgba(255,255,255,.12); color: var(--warning); }
.pin-star.pinned { color: #f0a417; }
.pin-star.pinned svg { fill: currentColor; }

/* الاختصارات المثبّتة مباشرة على الشريط العلوي */
.nav-pins { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-pins::before {
  content: ''; flex: none; width: 1px; height: 22px; margin-inline: 4px;
  background: rgba(255,255,255,.18);
}
.nav-pin-wrap { position: relative; display: flex; align-items: center; cursor: grab; }
.nav-pin-wrap.dragging { opacity: .45; cursor: grabbing; }
.nav-pin-wrap.dragging .nav-pin { border-color: var(--primary-2); }
.nav-pin {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  white-space: nowrap;
}
.nav-pin svg { width: 15px; height: 15px; opacity: .85; }
.nav-pin:hover { color: #fff; background: rgba(255,255,255,.14); }
.nav-pin.active { color: #fff; border-color: var(--primary-2); }

/* قائمة كليك-يمين السياقية (داكنة، غير حاجبة) */
.ctx-menu {
  position: fixed; z-index: 1200;
  min-width: 180px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, #1c2745, #131b32);
  border: 1px solid rgba(0,0,0,.55); border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.5);
  animation: pop .12s ease;
}
.ctx-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px var(--s3); text-align: start;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.85); font-family: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: all .12s ease; white-space: nowrap;
}
.ctx-item svg { width: 16px; height: 16px; opacity: .85; }
.ctx-item:hover { background: rgba(255,255,255,.10); color: #fff; }
.ctx-item.disabled { opacity: .4; cursor: default; }
.ctx-item.disabled:hover { background: transparent; color: rgba(255,255,255,.85); }
.ctx-item.mv-r svg { transform: rotate(-90deg); }
.ctx-item.mv-l svg { transform: rotate(90deg); }
.ctx-sep { height: 1px; margin: 4px 6px; background: rgba(255,255,255,.12); }

/* تأثير بصري انعكاسي واضح عند النقر (ripple) + ضغطة خفيفة */
.nav-btn, .nav-pin, .nav-menu a, .ctx-item { position: relative; overflow: hidden; }
.nav-btn:active, .nav-pin:active, .ctx-item:active { transform: translateY(1px) scale(.96); }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(255,252,240,1) 0%,
    rgba(255,215,120,.95) 30%,
    rgba(240,164,23,.6) 60%,
    rgba(217,119,6,.2) 78%,
    transparent 85%);
  box-shadow: 0 0 16px rgba(255,196,75,.95);
  transform: scale(0);
  animation: ripple .6s cubic-bezier(.25,.8,.3,1) forwards;
}
@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  35% { opacity: 1; }
  100% { transform: scale(2.7); opacity: 0; }
}

.content { flex: 1; min-width: 0; padding: var(--s4) var(--s5); }
@media (max-width: 900px) { .content { padding: var(--s3) var(--s4); } }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap;
}
.topbar h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.topbar .sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.topbar .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ─── البطاقات + بلاطات الإحصاء ─────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, #f2f9ff 0%, #d8ecfb 100%);
  border: 1px solid #b9dcf4;
  border-radius: var(--radius);
  padding: var(--s5);
  margin-bottom: var(--s4);
  /* بطاقة بارزة ثلاثية الأبعاد */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(15,23,42,.07), 0 8px 18px rgba(15,23,42,.06);
}
.card > h3 { margin: 0 0 var(--s4); font-size: 16px; font-weight: 700; }
.grid { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr !important; } }

/* ── حاويات لوحة التحكم: رأس موحّد (أيقونة + عنوان + مؤشّر مباشر) وجسم أنيق ── */
.dash-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dash-panel-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: linear-gradient(180deg, #f7f9ff 0%, #eaf0fb 100%);
  border-bottom: 1px solid var(--border);
}
.dash-panel-head .dp-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 3px 8px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.dash-panel-head .dp-ic svg { width: 17px; height: 17px; }
.dash-panel-head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.dp-live {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--success);
}
.dp-live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  animation: dp-pulse 1.6s ease-out infinite;
}
@keyframes dp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(5,150,105,.45); }
  70% { box-shadow: 0 0 0 7px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
.dash-panel-body { padding: var(--s4); flex: 1; min-height: 0; }
.dash-panel-body > .empty { padding: var(--s5) 0; }

/* ── مقاييس موارد النظام: CPU / RAM / Disk كأشرطة تقدّم ملوّنة ── */
.res-meters { display: flex; flex-direction: column; gap: var(--s3); }
.res-meter {
  padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.res-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.res-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; color: var(--text); }
.res-label svg { width: 16px; height: 16px; opacity: .75; }
.res-pct { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.res-pct.green { color: var(--success); }
.res-pct.amber { color: var(--warning); }
.res-pct.red   { color: var(--danger); }
.res-bar { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,23,42,.12); }
.res-fill { height: 100%; border-radius: 999px; transition: width .45s ease; }
.res-fill.green { background: linear-gradient(90deg, #34d399, #059669); }
.res-fill.amber { background: linear-gradient(90deg, #fbbf24, #d97706); }
.res-fill.red   { background: linear-gradient(90deg, #f87171, #dc2626); }
.res-detail { margin-top: 6px; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.res-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); text-align: center; }

/* ── حاوية المكالمات النشطة: تثبيت أعمدة الجدول داخل الحاوية (تمرير داخلي) ── */
.calls-panel .dash-panel-body { padding: 0; display: flex; flex-direction: column; }
.calls-panel .table-wrap { max-height: 360px; border: none; border-radius: 0; box-shadow: none; }
.calls-panel .table-wrap table.table thead th { top: 0; } /* الرأس sticky داخل الجسم المتمرّر */

/* ── حبّة ثلاثية الأبعاد ملوّنة للمدة و PDD ── */
.pill3d {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-weight: 800; font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: #fff; line-height: 1.5; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.20), 0 2px 5px rgba(15,23,42,.28);
}
.pill3d.green { background: linear-gradient(180deg, #34d399 0%, #059669 100%); }
.pill3d.amber { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }
.pill3d.red   { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }

/* ─── واجهة العملاء والموردين الموحّدة (حاويتان + فاصل قابل للسحب) ─── */
/* صفحة العملاء والموردين: بلا عنوان علوي، والحاويتان تملآن كامل ارتفاع الشاشة. */
body:has(.parties-grid, .st-layout) .topbar { display: none; }
/* ارتفاع مقيّد بحجم الشاشة: تصبح الحاوية بارتفاع الشاشة، ويصبح التمرير داخلها
   (شريط سحب داخل الجدول عند كثرة الصفوف) بدل تمرير الصفحة كلها. */
body:has(.parties-grid, .st-layout) .app { height: 100vh; overflow: hidden; }
/* بلا حشو: الحاويات تلتصق بحواف الواجهة (أعلى/أسفل/جانبَين). */
body:has(.parties-grid, .st-layout) .content { display: flex; flex-direction: column; padding: 7px; min-height: 0; }
body:has(.parties-grid, .st-layout) #view { flex: 1; min-width: 0; min-height: 0; display: flex; }

/* الحاويتان جنباً إلى جنب بعرض متساوٍ افتراضياً؛ السحب يغيّر النسبة. */
/* min-width:0 + overflow:hidden يمنعان الجدول العريض من تمديد الشبكة خارج الشاشة،
   فتتقلّص الحاويتان لتناسب العرض المتاح وينزلق كل جدول داخل حاويته. */
.parties-grid {
  flex: 1; min-width: 0; min-height: 0; overflow: hidden; margin-bottom: 0;
  display: flex; align-items: stretch; gap: 0;
}
/* min-width:0 يمنع الجدول العريض من تمديد الحاوية فينزلق داخلها بدل كسر التخطيط. */
/* حاوية محايدة عامة بإطار (برواز) من جميع الجهات يحيط بالترويسة والجدول معاً. */
.party-panel {
  flex: 1 1 50%; min-width: 0; margin-bottom: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: #e8f7ec; /* خلفية خضراء خفيفة بين إطار الحاوية وإطار الجدول */
  border: 2px solid #38bdf8; /* برواز سماوي حول كل حاوية */
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--s2); /* مسافة أصغر بين الجدول (المكتبة) وإطار الحاوية */
}
/* برواز أسود حول جدول البيانات (المكتبة) داخل الحاوية. */
.party-panel .table-wrap { border: 2px solid #000; box-shadow: none; border-radius: var(--radius); background: var(--surface); }

/* الجدول التفاعلي (فرز/نقل/تضييق الأعمدة، LTR) يملأ الحاوية. */
.party-itable { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.party-itable .tbl-search-wrap, .party-itable .colpanel { min-width: 0; }
/* شريط الأدوات شفاف = ترويسة الحاوية: عنوان + زرّا (تحديد / إدارة الأعمدة) أيقونتان صغيرتان. */
.party-itable .tabletools {
  background: transparent; border: 0; box-shadow: none;
  padding: 0 0 6px; min-height: 0; gap: 10px; flex: 0 0 auto;
}
/* أزرار أيقونية زرقاء (تحديث + فلترة + إدارة الأعمدة) في ترويسة الحاوية. */
.party-itable .tabletools .btn.icon {
  padding: 6px; color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 1px rgba(37,99,235,.3), 0 2px 5px rgba(37,99,235,.32);
}
.party-itable .tabletools .btn.icon:hover { color: #fff; border-color: transparent; }
.party-itable .tabletools .btn.icon svg { width: 16px; height: 16px; }
/* مربع البحث: مساحة تنفّس على جانبيه ضمن الشريط */
.party-itable .tabletools .tbl-search-wrap { margin-inline-start: 4px; }
.party-itable .tabletools .tbl-search { width: 220px; }
/* حاوية تستضيف جدولاً تفاعلياً يُستبدل ديناميكياً (master-detail: Dst). */
.party-itable-holder { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.party-itable-holder > .loading, .party-itable-holder > .empty { margin: auto; }
/* العنوان إلى اليمين والأيقونات إلى اليسار. */
.party-tt-title { font-size: 12.5px; font-weight: 800; color: var(--text); order: 2; margin-inline-start: auto; white-space: nowrap; }
/* المكتبة (الجدول) داخل إطار أسود وتملأ بقية الارتفاع. */
.party-itable .table-wrap.sticky {
  flex: 1; min-height: 0; max-height: none;
  border: 2px solid #000; border-radius: var(--radius); background: var(--surface);
}
.party-itable .tabletools + .table-wrap { border-top: 2px solid #000; border-radius: var(--radius); }
/* شريط سفلي صغير مثبّت أسفل الحاوية (متّصل بإطار الجدول): عدّاد قاعدة البيانات أقصى اليمين. */
.party-itable .tablefoot {
  flex: 0 0 auto; margin-top: 4px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 3px 10px; min-height: 24px;
  border: 2px solid #000; border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #eef1f8);
}
.tablefoot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; padding: 2px 6px; }
.tablefoot-count {
  font-size: 12px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* تصغير ارتفاع الصف في المكتبة (جداول الحاويات). */
.party-itable .table-wrap.sticky table.table tbody td { padding-top: 4px; padding-bottom: 4px; }
.party-itable .table-wrap.sticky table.table thead th { padding-top: 6px; padding-bottom: 6px; }
/* رأس الأعمدة بخلفية رمادية غامقة ونص أبيض. */
.party-itable .table-wrap.sticky thead th,
.party-itable .table-wrap.sticky table.table thead th {
  background: #4b5563; background-image: none; color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.party-itable .table-wrap.sticky table.table thead th .colh-title span { color: #fff; }

/* تضييق العمود يقصّ البيانات (قصّ بالنقاط، بلا التفاف): تخطيط جدول ثابت يحترم العرض المحدّد. */
/* width:auto + min-width:100%: يملأ الحاوية إن قلّت الأعمدة، ويتجاوزها فيظهر شريط
   تمرير أفقي مثبّت أسفل الحاوية إن زادت الأعمدة (بعرضها الافتراضي). */
/* تخطيط ثابت بعرض 100%: تتوزّع الأعمدة على عرض الحاوية (عمودا التحديد/# ثابتان صغيران
   والبقية بالتساوي) فتتطابق محاذاة الرأس مع الجسم. min-width يُضبط من JS بحسب عدد الأعمدة
   ليتجاوز الجدول الحاوية عند كثرتها فيظهر شريط تمرير أفقي مثبّت أسفلها. */
.party-itable .table-wrap.sticky table.table { table-layout: fixed; width: 100%; }
/* تضييق العمود يقصّ البيانات قصّاً عادياً (clip) بلا نقاط «…». */
.party-itable .table-wrap.sticky table.table tbody td { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.party-itable .table-wrap.sticky table.table thead th .colh-title { max-width: 100%; min-width: 0; overflow: hidden; }
.party-itable .table-wrap.sticky table.table thead th .colh-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* عمودا التحديد و# بعرض ثابت صغير حتى لا يأخذا حصّة متساوية كبيرة. */
.party-itable .table-wrap.sticky table.table th:nth-child(1), .party-itable .table-wrap.sticky table.table td:nth-child(1) { width: 40px; }
.party-itable .table-wrap.sticky table.table th:nth-child(2), .party-itable .table-wrap.sticky table.table td:nth-child(2) { width: 46px; }
/* رأس عمودَي meta (التحديد و#): خلفية داكنة موحّدة والمحتوى في المنتصف — كانت قاعدة
   th.num تحاذي «#» لليمين فيبدو داخل العمود المجاور، ويظهر الرأس أبيض. */
.party-itable .table-wrap.sticky table.table thead th:nth-child(1),
.party-itable .table-wrap.sticky table.table thead th:nth-child(2) {
  background: #4b5563; color: #fff; text-align: center;
}
/* خلفية بيضاء خلف الحاويتين (الصفحة كلها على هذا المسار، شاملةً عنصر html). */
html:has(.parties-grid, .st-layout) { background: #fff; }
body:has(.parties-grid, .st-layout), body:has(.parties-grid, .st-layout) .app, body:has(.parties-grid, .st-layout) .content { background: #fff; }

/* مربعات اختيار بصور من image/checkbox (فارغ افتراضياً، وصح أخضر عند التحديد) — لكل الجداول. */
/* checkbox_v.png سبرايت 22×42 بخليّتين: الأعلى «محدَّد ✓»، الأسفل «فارغ».
   نعرض الخليّة المناسبة عبر background-position مع تحجيم السبرايت لخليّتَي 20×20. */
table.table input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 20px; height: 20px; cursor: pointer;
  border: 0; background-color: transparent; box-shadow: none; border-radius: 0;
  background-image: url("/img/checkbox/checkbox_v.png");
  background-repeat: no-repeat;
  background-size: 20px 40px;
  background-position: center bottom; /* غير محدَّد: الخليّة السفلى (فارغة) */
  vertical-align: middle;
}
table.table input[type="checkbox"]:checked {
  background-position: center top; /* محدَّد: الخليّة العليا (✓) */
}

/* تظليل خفيف للصفوف الزوجية (الصف الثاني أغمق قليلاً). */
.party-panel table.table tbody tr:nth-child(even) { background: #eef1f6; }
/* تظليل أزرق فاتح عند المرور بالموس وعند تحديد الصف. */
.party-panel table.table tbody tr:hover { background: #e6f0fe; }
.party-panel table.table tbody tr.selected,
.party-panel table.table tbody tr:nth-child(even).selected { background: #d3e4fd; }
.party-panel table.table tbody tr.selected:hover { background: #c2d8fb; }

/* حدود مرئية بين رؤوس الأعمدة. */
.party-panel table.table thead th { border-inline-end: 1px solid var(--border-strong); }
.party-panel table.table thead th:last-child { border-inline-end: none; }
.party-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.party-title { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
/* زر إضافة مصغّر في رأس الحاوية. */
.party-add { font-size: 11px; padding: 4px 9px; gap: 4px; }
.party-add svg { width: 13px; height: 13px; }
/* الترويسة (العنوان+الزر) ثابتة، والجدول يأخذ بقية الارتفاع وينزلق داخله. */
.party-panel .table-wrap { flex: 1; min-height: 0; }

/* مقبض السحب بين الحاويتين. */
/* فاصل بلا مسافة: العرض الصافي = 0 (هامش سالب) فتتلاصق الحاويتان، ويبقى قابلاً للسحب. */
.split-handle {
  flex: 0 0 10px; align-self: stretch; margin-inline: 0; z-index: 6;
  cursor: col-resize; position: relative;
}
.split-handle::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 54px; border-radius: 3px;
  background: #b3b9b4; box-shadow: none;
  opacity: 1; transition: height .15s, background .15s;
}
.split-handle:hover::before, .split-handle.dragging::before { height: 80px; background: #8f968f; }

@media (max-width: 1100px) {
  /* عند التكدّس عمودياً نعيد الارتفاع الطبيعي ونُخفي الفاصل. */
  body:has(.parties-grid, .st-layout) #view, .parties-grid { display: block; }
  .party-panel { flex: none; min-height: 320px; margin-bottom: var(--s4); }
  .split-handle { display: none; }
}

/* عنصر قائمة السياق الخطر (حذف). */
.ctx-item.danger { color: #ffb4b4; }
.ctx-item.danger:hover { background: rgba(220,38,38,.35); color: #fff; }

.stat {
  background: linear-gradient(180deg, #f2f9ff 0%, #d8ecfb 100%);
  border: 1px solid #b9dcf4;
  border-radius: var(--radius);
  padding: var(--s5);
  display: flex; align-items: center; gap: var(--s4);
  /* بطاقة بارزة ثلاثية الأبعاد */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(15,23,42,.07), 0 8px 18px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 8px rgba(15,23,42,.1), 0 12px 24px rgba(15,23,42,.09); }
.stat .ico {
  width: 48px; height: 48px; border-radius: 13px; flex: 0 0 48px;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-2);
}
.stat .ico svg { width: 24px; height: 24px; }
.stat .ico.green { background: var(--success-soft); color: var(--success); }
.stat .ico.amber { background: var(--warning-soft); color: var(--warning); }
.stat .ico.red { background: var(--danger-soft); color: var(--danger); }
.stat .meta { min-width: 0; }
.stat .label { color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.stat .value { font-size: 26px; font-weight: 800; margin-top: 2px; letter-spacing: -0.01em; }
.stat .value.pos { color: var(--success); }
.stat .value.neg { color: var(--danger); }

/* Compact single-row stat cards (e.g. CDR summary). */
.stats-row { display: flex; gap: 6px; margin-bottom: var(--s4); overflow-x: auto; }
.stats-row .stat { flex: 1 0 0; min-width: 88px; padding: 6px 9px; gap: 7px; }
.stats-row .stat:hover { transform: none; }
.stats-row .stat .ico { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; }
.stats-row .stat .ico svg { width: 14px; height: 14px; }
.stats-row .stat .label { font-size: 10.5px; }
.stats-row .stat .value { font-size: 15px; margin-top: 0; }

/* بطاقات مصغّرة في نفس صف عنوان الصفحة */
.topbar .actions:has(.stats-row.inline) { flex: 1 1 auto; min-width: 0; }
.stats-row.inline { flex: 1; min-width: 0; margin: 0; gap: 5px; }
.stats-row.inline .stat { min-width: 60px; padding: 4px 8px; gap: 5px; }
.stats-row.inline .stat .ico { width: 18px; height: 18px; flex-basis: 18px; border-radius: 5px; }
.stats-row.inline .stat .ico svg { width: 11px; height: 11px; }
.stats-row.inline .stat .label { font-size: 10px; white-space: nowrap; }
.stats-row.inline .stat .value { font-size: 14px; }

/* نافذة إحصائيات الرقم — بطاقات وخط مصغّرة */
.num-stats-top { flex-wrap: wrap; }
.num-stats-top .stat { flex: 1 1 calc(20% - 5px); min-width: 78px; }
.num-stats-top .stat .label { font-size: 9.5px; }
.num-stats-top .stat .value { font-size: 13px; }
.num-stats .card { padding: 6px 7px; border-radius: var(--radius-sm); }
.num-stats .card .label { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.num-stats .card .btn.sm { padding: 2px 7px; font-size: 10.5px; }
.num-stats .card .badge { font-size: 9.5px; }
.num-stats .party-tt-title { font-size: 12px; }
/* سجل المكالمات: جدول تفاعلي قابل لسحب حواف الأعمدة (يُحفظ العرض)، بتخطيط ثابت
   حتى لا يتغيّر التخطيط عند ظهور شريط التشغيل داخل الخليّة. */
.num-stats .party-itable table { table-layout: fixed; width: 100%; }
.num-stats .party-itable th, .num-stats .party-itable td { font-size: 11px; padding: 3px 6px; }
.num-stats .party-itable td { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.num-stats .party-itable audio { width: 100%; max-width: 100%; height: 28px; }

/* ─── الجدول الموحّد (نمط واحد للمشروع كله) ─────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 2px solid #000; /* برواز أسود موحّد لكل الجداول */
  border-radius: var(--radius);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
/* كل الجداول باتجاه إنجليزي (LTR) — تصميم موحّد. */
table.table { width: 100%; border-collapse: collapse; font-size: 12px; direction: ltr; }
table.table thead th {
  text-align: start;
  padding: 8px var(--s4);
  /* رأس أعمدة رمادي غامق موحّد */
  background: #4b5563;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  color: #fff;
  font-weight: 800; font-size: 11.5px; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-strong);
  border-inline-end: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.table thead th:last-child { border-inline-end: none; }
/* حقل الفلترة مدموج داخل رأس العمود نفسه — بلون رمادي */
.colh-title { display: inline-flex; align-items: center; justify-content: center; }
table.table thead th .fcol {
  display: block; width: 100%; margin-top: 6px;
  padding: 4px 7px; font-size: 12px; font-weight: 600;
  color: var(--text); background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 6px;
}
table.table thead th .fcol::placeholder { color: var(--text-faint); }
table.table thead th .fcol:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
table.table thead th .fcol-empty { height: 28px; margin-top: 6px; }

/* فلتر التاريخ: حقل + زر أيقونة تقويم */
.fcol-datewrap { position: relative; margin-top: 6px; }
.fcol-datewrap .fcol { margin-top: 0; padding-inline-end: 26px; cursor: pointer; }
.fcol-cal {
  position: absolute; inset-inline-end: 3px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 5px;
  color: var(--primary); cursor: pointer;
}
.fcol-cal svg { width: 15px; height: 15px; }
.fcol-cal:hover { background: var(--primary-soft); }

/* نافذة منتقي نطاق التاريخ/الوقت (غير حاجبة، داكنة) */
.dtp {
  position: fixed; z-index: 1300; direction: ltr;
  background: #2b3a55; color: #e8eefc;
  border: 1px solid rgba(0,0,0,.5); border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  padding: 10px; font-size: 13px;
}
.dtp-cols { display: flex; gap: 14px; }
.dtp-col { width: 232px; }
.dtp-h { text-align: center; font-weight: 700; padding: 4px; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 6px; }
.dtp-inrow { display: flex; align-items: center; background: #fff; border-radius: 5px; margin-bottom: 6px; }
.dtp-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 6px 8px; color: #1b2333; font-size: 12.5px; }
.dtp-x { border: 0; background: transparent; color: #999; cursor: pointer; padding: 0 8px; font-size: 15px; }
.dtp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dtp-mv { border: 0; background: rgba(255,255,255,.08); color: #e8eefc; width: 26px; height: 24px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.dtp-mv:hover { background: rgba(255,255,255,.18); }
.dtp-mtitle { font-weight: 700; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-wd { margin-bottom: 2px; }
.dtp-wdc { text-align: center; font-size: 11px; color: #9fb0d0; padding: 2px 0; }
.dtp-day {
  border: 0; background: transparent; color: #e8eefc; height: 26px;
  border-radius: 5px; cursor: pointer; font-size: 12px;
}
.dtp-day:hover { background: rgba(255,255,255,.14); }
.dtp-day.other { color: #5e6e8c; }
.dtp-day.we { color: #f2a45c; }
.dtp-day.sel { background: #e8442a; color: #fff; font-weight: 700; }
.dtp-times { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; }
.dtp-colon { font-weight: 700; }
.dtp-tcol { display: flex; flex-direction: column; align-items: center; }
.dtp-tb { border: 0; background: transparent; color: #cdd8ef; cursor: pointer; height: 15px; line-height: 1; font-size: 10px; }
.dtp-tb:hover { color: #fff; }
.dtp-t { width: 42px; text-align: center; border: 0; border-radius: 4px; padding: 5px 0; background: #fff; color: #1b2333; font-size: 13px; }
.dtp-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.dtp-accept { background: #36b37e; color: #fff; border: 0; padding: 8px 20px; border-radius: 5px; font-weight: 700; cursor: pointer; }
.dtp-accept:hover { background: #2fa372; }
table.table tbody td {
  padding: 5px var(--s4); /* صفوف مدمجة موحّدة */
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center; /* توسيط بيانات الخلايا (الأرقام/الإجراءات تُبقى محاذاتها أدناه) */
  color: #0b1020; font-weight: 800; /* قيم مضخّمة: أسود أغمق وسُمك أعلى لوضوح أقوى */
}
table.table tbody tr { transition: background .12s ease; cursor: pointer; }
table.table tbody tr:hover { background: #e6f0fe; }
table.table tbody tr:last-child td { border-bottom: none; }
/* الصف المحدّد بالنقر — تظليل أزرق */
table.table tbody tr.selected { background: #d3e4fd; }
table.table tbody tr.selected:hover { background: #c2d8fb; }
table.table td.num, table.table th.num { text-align: end; font-variant-numeric: tabular-nums; }
table.table td.actions, table.table th.actions { text-align: end; white-space: nowrap; }
table.table td.sel, table.table th.sel { width: 1%; text-align: center; }

/* ── Advanced CDR table: toolbar, sticky header, per-column filters, columns panel ── */
/* شريط أدوات الجدول (toolbar) ملتصق بأعلى الجدول كوحدة واحدة */
.tabletools {
  display: flex; align-items: center; gap: 6px; margin-bottom: 0;
  position: relative; flex-wrap: wrap;
  /* ارتفاع الصف مساوٍ لصف بيانات واحد (≈46px): حشو رأسي 8px + عناصر 30px */
  padding: 8px var(--s2); min-height: 46px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(180deg, #ffffff, #eef1f8);
  border: 1px solid var(--border-strong); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(15,23,42,.06);
}
/* الجدول الذي يلي الشريط: بلا حدّ علوي وبزوايا سفلية فقط — يندمج مع الشريط */
.tabletools + .table-wrap {
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.tabletools .input { padding: 5px 10px; font-size: 13px; height: 30px; }
.tabletools select.input { min-width: 130px; max-width: 210px; cursor: pointer; }
.tbl-search-wrap { position: relative; display: flex; align-items: center; }
.tbl-search-wrap svg {
  position: absolute; inset-inline-start: 9px; width: 15px; height: 15px;
  color: var(--text-faint); pointer-events: none;
}
.tbl-search { width: 190px; padding-inline-start: 30px !important; }
/* في الشريط المختصر (حاويات Dst الضيّقة) يتقلّص مربّع البحث ليناسب المساحة */
.tabletools.simple .tbl-search-wrap { flex: 1 1 90px; min-width: 70px; }
.tabletools.simple .tbl-search { width: 100%; }
.btn.icon { padding: 6px; line-height: 0; }
.btn.icon svg { width: 18px; height: 18px; }
.btn.icon.active { background: var(--primary-soft); color: var(--primary-2); border-color: var(--primary-2); }
.colwrap { position: relative; }
.colpanel {
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: 4px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; min-width: 180px; max-height: 320px; overflow: auto;
}
.colpanel .colitem { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.colpanel .colitem:hover { background: var(--surface-2); }
.table-wrap.sticky { max-height: calc(100vh - 170px); overflow: auto; }
.table-wrap.sticky thead th { position: sticky; top: 0; z-index: 3; background: #4b5563; }
.table-wrap.sticky thead tr.filterrow th { top: 38px; z-index: 2; }
tr.filterrow th { padding: 4px 6px; }
tr.filterrow .fcol { width: 100%; padding: 4px 6px; font-size: 12px; }

/* 3D columns + glossy "mirror" separators + sort/resize/drag affordances */
.table-wrap.sticky table.table thead th {
  background: #4b5563; color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
.table-wrap.sticky table.table thead th .colh-title span { color: #fff; }
.table-wrap.sticky table.table th, .table-wrap.sticky table.table td {
  position: relative;
  border-inline-end: 1px solid var(--border-strong); /* visible divider between columns */
}
/* رأس الأعمدة يبقى ثابتاً عند التمرير الرأسي: نعيد position:sticky بأولوية أعلى من
   قاعدة position:relative أعلاه (التي كانت تُلغي الثبات فتنزل الأعمدة مع الصفوف). */
.table-wrap.sticky table.table thead th { position: sticky; top: 0; z-index: 3; }
.table-wrap.sticky table.table thead tr.filterrow th { top: 38px; z-index: 2; }
/* centered column header names */
.table-wrap.sticky table.table thead th.colh { text-align: center; }
/* glossy vertical separator (mirror sheen) between columns */
.table-wrap.sticky table.table th::after, .table-wrap.sticky table.table td::after {
  content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(15,23,42,.10) 50%, transparent);
  pointer-events: none;
}
/* subtle 3D shading down each body column */
.table-wrap.sticky table.table tbody td {
  background-image: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.03));
}
.table-wrap.sticky table.table th.colh { cursor: pointer; user-select: none; white-space: nowrap; }
.table-wrap.sticky table.table th.colh[draggable="true"]:active { opacity: .6; }
.col-resizer {
  position: absolute; top: 0; inset-inline-end: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 4;
}
/* خلية «حرارية» موحّدة (نظام التصميم): تظليل ناعم بلون القرب من العتبة — اللون inline hsl. */
.heat-cell {
  display: inline-block; min-width: 26px; padding: 2px 10px; border-radius: 7px;
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.empty { padding: var(--s7); text-align: center; color: var(--text-dim); }

/* ─── الأزرار (نظام واحد) ───────────────────────────────────────────────── */
/* ─── أزرار بتصميم 3D عصري (بارزة بتدرّج وبريق علوي وظل، تُرفع عند المرور وتُضغط عند النقر) ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  padding: 9px var(--s4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #e8ecf5 100%); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(15,23,42,.10), 0 2px 5px rgba(15,23,42,.09);
  transition: transform .12s ease, box-shadow .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.btn:hover { border-color: var(--text-faint); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 7px rgba(15,23,42,.16), 0 7px 15px rgba(15,23,42,.10); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(15,23,42,.17); }
.btn.primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(37,99,235,.40), 0 7px 16px rgba(37,99,235,.30);
}
.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(37,99,235,.48), 0 11px 22px rgba(37,99,235,.34); }
.btn.primary:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.22); }
.btn.danger { background: linear-gradient(180deg, #ffffff 0%, #fde9e9 100%); color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.ghost { background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%); border-color: var(--border); color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); border-color: var(--text-faint); }
/* أيقونة تشغيل خضراء عندما يوجد تسجيل صوتي (سجل المكالمات) */
.btn.icon.play-on { color: var(--success); border-color: var(--success); }
.btn.icon.play-on:hover { background: var(--success); color: #fff; border-color: transparent; }
/* أيقونة تشغيل باهتة رمادية عندما لا يوجد تسجيل — غير قابلة للنقر */
.btn.icon.play-off {
  color: var(--text-faint); border-color: transparent; background: transparent;
  opacity: .4; cursor: default; pointer-events: none;
}
.btn.sm { padding: 5px var(--s3); font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ─── الشارات ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-dim);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.on, .badge.allow { background: var(--success-soft); color: var(--success); }
.badge.off { background: rgba(148, 163, 184, 0.14); color: var(--text-dim); }
.badge.block { background: var(--danger-soft); color: var(--danger); }
/* حالة CHANUNAVAIL في سجل المكالمات: خلفية حمراء صريحة وخط أبيض */
.badge.err { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.info { background: var(--primary-soft); color: var(--primary-2); }

/* ─── النماذج ───────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--s4); }
.field > label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; font-family: var(--font); font-size: 13.5px;
  padding: 10px var(--s3);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
select.input { cursor: pointer; }
.row { display: flex; gap: var(--s3); }
.row .field { flex: 1; min-width: 0; }

/* نموذج مدمج: مربعات وخطوط أصغر (يُستخدم في نافذة المورّد بثلاثة حقول في الصف). */
.form-compact .field { margin-bottom: var(--s3); }
.form-compact .field > label { font-size: 11px; margin-bottom: 4px; line-height: 1.35; }
.form-compact .input, .form-compact select.input { font-size: 12px; padding: 6px 8px; }

/* لافتة خطأ داخل النافذة (تظهر قبل الإغلاق، مثل: الرمز مستخدم مسبقاً). */
.form-err {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: var(--s4); font-size: 13px; font-weight: 700;
}
.check { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }

/* ─── نافذة عائمة مستقلّة غير حاجبة (لا طبقة تغطّي الصفحة) ──────────────────
   لا توجد خلفية حاجبة: تبقى بقية الواجهة قابلة للاستخدام بالكامل، ويمكن فتح
   أكثر من نافذة وسحبها بحرّية من شريط العنوان. */
.window {
  position: fixed; z-index: 1000;
  width: 560px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: pop .16s cubic-bezier(.2, .9, .3, 1.2);
  max-height: 86vh; display: flex; flex-direction: column;
  transition: opacity .12s ease, transform .12s ease;
}
.window:focus { outline: none; }
.window header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.window header.drag { cursor: move; user-select: none; }
.window header.drag::before {
  /* مقبض سحب صغير للدلالة على إمكانية التحريك */
  content: '⠿'; color: var(--text-faint); font-size: 15px; margin-inline-end: 10px; letter-spacing: -2px;
}
.window header h3 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; }
.window .body { padding: var(--s5); overflow-y: auto; }
.window footer {
  display: flex; justify-content: flex-start; gap: var(--s2);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--border);
}
.window .x {
  background: var(--surface-2); border: none; color: var(--text-dim);
  width: 32px; height: 32px; border-radius: 9px; font-size: 18px; cursor: pointer; flex: none;
}
.window .x:hover { background: var(--danger-soft); color: var(--danger); }

/* ─── التنبيهات (غير حاجبة) ─────────────────────────────────────────────── */
.toast-layer {
  position: fixed; inset-inline-start: var(--s5); bottom: var(--s5); z-index: 1100;
  display: flex; flex-direction: column; gap: var(--s2);
}
.toast {
  min-width: 240px; max-width: 400px;
  padding: 12px var(--s4); border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-inline-start: 3px solid var(--primary);
  box-shadow: var(--shadow); font-weight: 600;
  animation: slide .2s ease;
}
.toast.success { border-inline-start-color: var(--success); }
.toast.error { border-inline-start-color: var(--danger); }
.toast.warn { border-inline-start-color: var(--warning); }

.muted { color: var(--text-dim); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.tools { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
@keyframes slide { from { opacity: 0; transform: translateX(-20px); } }

.loading { padding: var(--s7); text-align: center; color: var(--text-dim); }
.loading::after {
  content: ''; display: inline-block; width: 22px; height: 22px; margin-inline-start: 10px;
  border: 3px solid var(--surface-3); border-top-color: var(--primary);
  border-radius: 50%; vertical-align: middle; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── الإحصاءات: حاويتان (Statistics + Number) ───────────────────────────── */
.st-layout { display: flex; flex-direction: column; gap: var(--s4); }
.st-panel {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.st-grow { flex: 1; min-height: 0; }
.st-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: 12px 18px; min-height: 56px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #eef1f8);
}
.st-title { font-weight: 800; font-size: 19px; color: var(--text); letter-spacing: -0.01em; }
/* عناصر التحكم في رأس الحاوية: عرض الصفوف + التنقّل + العدّاد */
/* ─── مكوّن الترقيم الموحّد (عصري) ─────────────────────────────────────────── */
/* قائمة حالات المطابقة (بصمة IVR) — مسطّحة، مع تظليل الصف عند التمرير/الاختيار */
.ivr-disp-menu {
  position: fixed; z-index: 100000; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 4px; max-height: 240px; overflow: auto;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.ivr-disp-menu .ivr-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--text); user-select: none;
}
.ivr-disp-menu .ivr-opt:hover { background: #eef2fb; }
.ivr-disp-menu .ivr-opt.sel { background: #dbe7fd; font-weight: 700; }

.pager { display: inline-flex; align-items: center; gap: 5px; }
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; cursor: pointer; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #eef1f8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,42,.08);
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.pager-btn:hover:not(:disabled) { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; border-color: transparent; }
.pager-btn:active:not(:disabled) { transform: translateY(1px); }
.pager-btn:disabled { opacity: .38; cursor: default; }
.pager-btn svg { width: 15px; height: 15px; }
.pager-page {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: #fff;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.05);
}
.pager-inp {
  width: 34px; border: 0; outline: none; text-align: center; background: transparent;
  font-size: 12.5px; font-weight: 800; color: var(--text); -moz-appearance: textfield;
}
.pager-inp::-webkit-inner-spin-button, .pager-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pager-sep { color: var(--text-dim); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pager-size {
  height: 28px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 6px;
  font-size: 12px; background: #fff; cursor: pointer; color: var(--text);
}
.pager-total { color: var(--text-dim); font-size: 11px; margin-inline-start: 2px; white-space: nowrap; }

.st-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: var(--s4); }
.st-actions select.input { width: auto; min-width: 0; height: 32px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.st-actions .muted { font-size: 12.5px; white-space: nowrap; }
.st-actions .btn.icon { padding: 7px 10px; font-size: 15px; line-height: 1; }

/* ─── حقل الترميزات: قائمة منسدلة بمربعات اختيار + رقم الأولوية ────────────── */
.codec-dd { position: relative; }
.codec-dd-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; cursor: pointer; text-align: start;
}
.codec-dd-trigger.open { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.codec-dd-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.codec-dd-chev { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.codec-dd-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 0;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 5px;
  max-height: 264px; overflow: auto;
}
/* اللوحة الطافية: تخرج من جسم النافذة لتظهر فوقها دون قصّ (الموضع يُحسب بالـ JS). */
.codec-dd-panel.floating { position: fixed; inset: auto; z-index: 100000; }
.codec-opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; font-size: 13.5px; font-weight: 600;
}
.codec-opt:hover { background: var(--surface-2); }
.codec-opt input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.codec-opt .codec-name { flex: 1; }
.codec-prio {
  min-width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--accent-grad); border-radius: 50%;
}

/* ─── محاذاة بيانات كل الجداول في منتصف الخلية (أفقياً وعمودياً) ─────────── */
table.table thead th,
table.table tbody td { text-align: center; vertical-align: middle; }
table.table td.num, table.table th.num,
table.table td.actions, table.table th.actions { text-align: center; }
/* مجموعة أزرار الإجراءات تتوسّط الخلية أيضاً */
table.table td.actions > div { justify-content: center !important; }
.st-body { padding: var(--s4); }
.st-body .stats-row { margin: 0; flex-wrap: wrap; gap: var(--s2); overflow: visible; }
.st-body .stats-row .stat { flex: 1 1 120px; min-width: 110px; }
/* حاوية جدول Number: شريط الأدوات + الجدول (LTR، تمرير داخلي) */
.st-tablewrap { padding: var(--s3) var(--s4) var(--s4); min-height: 0; }
.st-tablewrap .tabletools { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* صفحة الإحصاءات تملأ كامل ارتفاع الواجهة. */
.st-layout { flex: 1; min-width: 0; min-height: 0; margin-bottom: 0; }
.st-tablewrap { flex: 1; display: flex; flex-direction: column; }
.st-tablewrap > div { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.st-tablewrap .table-wrap.sticky { max-height: none; flex: 1; min-height: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   نمط الحاويات (Screenshot_6): شبكة فاتحة مسطّحة، حدود رمادية رفيعة، رأس رمادي
   متدرّج بفواصل أعمدة، خط صغير غير ثقيل، لكنة خضراء للأزرار — يتغلّب على ما سبق.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --g-green: #6f9d3c; --g-green2: #8fbe57; --g-line: #cdd3ce; --g-line2: #e2e6e2; }

/* الحاوية: خلفية بيضاء وإطار رمادي رفيع بلا زوايا كبيرة ولا حشو. */
.party-panel {
  background: #fff; border: 1px solid var(--g-line);
  border-radius: 2px; box-shadow: none; padding: 0;
}
.party-panel .table-wrap { border: 0; }

/* شريط الأدوات (رأس الحاوية): شريط فاتح بحدّ سفليّ. */
.party-itable .tabletools {
  background: #f2f5ef; border: 0; border-bottom: 1px solid var(--g-line);
  box-shadow: none; padding: 4px 6px; min-height: 0; gap: 7px; border-radius: 0;
}
/* أزرار أيقونية خضراء (تحديث/فلترة/أعمدة). */
.party-itable .tabletools .btn.icon {
  padding: 4px; color: #fff; border: 1px solid #5f8c34; border-radius: 3px;
  background: linear-gradient(180deg, var(--g-green2) 0%, var(--g-green) 100%);
  box-shadow: none;
}
.party-itable .tabletools .btn.icon:hover { filter: brightness(1.06); color: #fff; border-color: #5f8c34; }
.party-itable .tabletools .btn.icon svg { width: 14px; height: 14px; }
/* حقول الشريط: مربّع بحث/قوائم منسدلة فاتحة صغيرة. */
.party-itable .tabletools .input,
.party-itable .tabletools select.input,
.party-itable .tabletools .tbl-search {
  height: 24px; font-size: 12px; border: 1px solid var(--g-line);
  background: #fff; border-radius: 3px; color: #333;
}
.party-tt-title { font-size: 12px; font-weight: 600; color: #4a5158; }

/* إطار الجدول: بلا برواز أسود (نعتمد على خطوط الخلايا وإطار الحاوية). */
.party-itable .table-wrap.sticky { border: 0; border-radius: 0; background: #fff; }
.party-itable .tabletools + .table-wrap { border-top: 0; border-radius: 0; }

/* رأس الأعمدة: تدرّج رمادي فاتح، نص رمادي داكن صغير غير ثقيل، فواصل أعمدة رفيعة. */
.party-itable .table-wrap.sticky table.table thead th,
.party-itable .table-wrap.sticky thead th {
  background: linear-gradient(180deg, #fafbfa 0%, #e7ebe6 100%);
  background-image: linear-gradient(180deg, #fafbfa 0%, #e7ebe6 100%);
  color: #2b3138; font-weight: 700; font-size: 10px; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  /* كل خليّة رأس = مكعّب: حدود واضحة من كل الجهات + بروز ثلاثي الأبعاد (إضاءة علوية وظلّ). */
  border: 1px solid #c2c8c2;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.85), inset -1px -1px 0 rgba(0,0,0,.06);
  text-transform: none; padding: 4px 6px;
}
.party-itable .table-wrap.sticky table.table thead th .colh-title span { color: #2b3138; }
/* رأس عمودَي التحديد/# بنفس نمط الرأس الفضّي. */
.party-itable .table-wrap.sticky table.table thead th:nth-child(1),
.party-itable .table-wrap.sticky table.table thead th:nth-child(2) {
  background: linear-gradient(180deg, #fafbfa 0%, #e7ebe6 100%); color: #2b3138;
}

/* خلايا الجسم: نص صغير معتدل، بلا خطوط رأسية بين الأعمدة — فقط فواصل صفوف أفقية. */
.party-itable .table-wrap.sticky table.table tbody td {
  color: #0b0f14; font-weight: 700; font-size: 10.5px;
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid var(--g-line2);
  border-inline-end: 0;
  padding: 3px 6px;
}
/* إطار خارجي للجدول (يمين/يسار/أسفل) — الجسم بلا خطوط بين الأعمدة. */
.party-itable .table-wrap.sticky {
  border-inline-start: 1px solid var(--g-line); border-inline-end: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
}
.party-panel table.table tbody tr:nth-child(even) { background: #e8eaec; }
.party-panel table.table tbody tr:hover { background: #e1ecfb; }
.party-panel table.table tbody tr.selected,
.party-panel table.table tbody tr:nth-child(even).selected { background: #cfe2fb; }
.party-panel table.table tbody tr.selected:hover { background: #bcd6f8; }
/* إلغاء التظليل ثلاثي الأبعاد والفواصل اللامعة القديمة. */
.party-itable .table-wrap.sticky table.table tbody td { background-image: none; }
.party-itable .table-wrap.sticky table.table th::after,
.party-itable .table-wrap.sticky table.table td::after { display: none; }

/* الشريط السفلي (عدّاد قاعدة البيانات): شريط فاتح رفيع متّصل بالحاوية. */
.party-itable .tablefoot {
  margin-top: 0; border: 0; border-top: 1px solid var(--g-line);
  border-radius: 0; background: #f2f5ef; min-height: 22px; padding: 2px 8px;
}
.tablefoot-count { font-size: 11.5px; font-weight: 600; color: #55606a; }

/* زر × لمسح مربع البحث (يظهر عند وجود نص). */
.tbl-search { padding-inline-end: 22px !important; }
.tbl-search-wrap .tbl-search-x {
  position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; padding: 0; line-height: 1; font-size: 12px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #b9beb8; color: #fff; cursor: pointer; transition: background .12s;
}
.tbl-search-wrap .tbl-search-x:hover { background: #7e857d; }

/* قوائم منسدلة أصغر بتصميم 3D عصري: تدرّج مرتفع، ظلّ ناعم، وسهم أخضر مخصّص. */
.party-itable .tabletools select.input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 26px; line-height: 24px; min-width: 120px; max-width: 210px;
  padding: 0 22px 0 9px; padding-inline: 9px 22px; font-size: 11px; font-weight: 600; color: #2f353c;
  border: 1px solid #aeb5ae; border-radius: 6px; cursor: pointer; vertical-align: middle;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 10 10'><path d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%236f9d3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg, #ffffff 0%, #eef1ec 55%, #e3e7e1 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 6px center, center;
  background-size: 11px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(15,23,42,.16);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.party-itable .tabletools select.input:hover { border-color: #6f9d3c; }
.party-itable .tabletools select.input:focus {
  outline: none; border-color: #6f9d3c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 2px rgba(111,157,60,.28), 0 1px 2px rgba(15,23,42,.16);
}
.party-itable .tabletools select.input:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.15); }

/* خلفية خفيفة خلف القيمة فقط (حبّة) في عمودَي المدّة (Billsec / Min) — لا على كامل الخليّة. */
.party-itable .table-wrap.sticky table.table tbody td.durcol > span {
  display: inline-block; background: #e7f1e7; padding: 1px 10px; border-radius: 9px;
}