/* التابات فوق شريط الفترة — `.tabs` عنصر inline-flex بلا هامش، فكان لازق فيه. */
.cch-tabs { margin-bottom: 14px; }

/* 🔴 **سبب الخسارة سطر لوحده تحت الشارة، مش جوّاها.**
   `.badge` عنصر inline-flex بعرض محتواه و`white-space: nowrap`، والسبب نص حر
   بيكتبه الموظف في أودو («لا يستجيب للاتصالات او الواتساب») — فجوّه الشارة كان
   بيخرج برّه الكارت. ومحاولة تلويته جوّاها (`overflow-wrap: anywhere`) طلّعت
   الشارة **عمود من حرف واحد** لأن الفلكس بيتقلّص لأصغر عرض ممكن.
   ⚠️ الدرس: عنصر عرضه من محتواه ماينفعش يشيل نص حر. النص الحر بياخد بلوك بيلفّ. */
.cch-reason {
  display: block; margin-top: 3px; font-size: .75rem; font-weight: 600;
  color: var(--danger); line-height: 1.5;
}

/* ── الجدول ─────────────────────────────────────────────────────────────── */
.cch-table { min-width: 720px; }
.cch-table td { vertical-align: top; }
.cch-tk { font-weight: 700; text-decoration: none; color: var(--info); }
.cch-tk:hover { text-decoration: underline; }

/* اتجاه المكالمة — صادر (إحنا كلّمنا) / وارد (العميل كلّمنا). لونين مختلفين
   عن ألوان الشركة عن قصد: الاتجاه والشركة معلومتين مختلفتين على نفس السطر. */
/* ⚠️ **القيم دي كانت آخر الملف** (اتكتبت لتاب «عملاء بدون تذكرة») و**بتغلب**
   التعريف اللي كان هنا، فاتنقلت مكانها لما التاب اتشال.
   🔴 **وفيها بق كامن اتصلّح**: كانت بتقرا `--ok-bg` و`--info-bg` — **توكنين
      مالهمش وجود** (الصح `--ok-tint`/`--info-tint`)، والتوكن المخترع بيرجّع
      فاضي — يعني الشارات كانت **بلا خلفية** من يوم ما التاب ده نزل، والقاعدة
      دي هي اللي بتغلب. وحرس جديد بيرفض أي توكن مش معرَّف. */
.cch-dir {
  display: inline-block; white-space: nowrap;
  border-radius: var(--radius-xs); padding: 1px 8px;
  font-size: .72rem; font-weight: 800; border: 1px solid var(--line);
}
.cch-dir.in  { background: var(--ok-tint);   color: var(--ok);   border-color: transparent; }
.cch-dir.out { background: var(--info-tint); color: var(--info); border-color: transparent; }

/* الشركة. ⚠️ `co-na` (غير محدّد) رمادي مش أحمر: «مش عارفين شركة الخط» حقيقة
   تانية خالص عن «فيه غلط» — نفس قاعدة «—» و«…» و`0` في باقي النظام. */
.cch-co {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.cch-co.co-aa { background: var(--ok-tint); color: var(--ok); }
.cch-co.co-cs { background: var(--info-tint); color: var(--info); }
.cch-co.co-na { background: var(--card-2); color: var(--muted); }

/* ── لوحة التفاصيل تحت الصف ─────────────────────────────────────────────── */
.cch-empty { padding: 13px 15px; color: var(--muted); font-size: .85rem; }
.cch-empty.big {
  text-align: center; padding: 26px; font-size: .95rem; font-weight: 600;
  background: var(--card-2); border-radius: var(--radius-sm);
}
.cch-live { margin: 8px 4px 0; }

/* ══════════════ تاب «البحث السريع»: بروفايل العميل + عملاء جدد ══════════════ */

.cch-phone { margin-inline-start: 8px; font-weight: 800; color: var(--primary); }
.cch-pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.cch-pcard {
  background: var(--card-2); border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.cch-pcard.co-aa { border-top-color: var(--ok); }
.cch-pcard.co-cs { border-top-color: var(--info); }
.cch-pcard > .cch-co { margin-bottom: 11px; }
.cch-pcard > p { margin: -5px 0 10px; }
.cch-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.cch-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cch-lbl { font-size: .72rem; color: var(--muted); font-weight: 600; }
.cch-val { font-size: .88rem; font-weight: 600; overflow-wrap: break-word; }
.cch-big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; text-align: start; }

/* حالة المكالمة: رد / قصيرة / السبب. ⚠️ تلات ألوان لتلات حقائق — «قصيرة» صفراء
   لأنها تستاهل مراجعة، مش خضرا (اتردّت) ولا حمرا (مردّش). */
.cch-st {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.cch-st.ok { background: var(--ok-tint); color: var(--ok); }
.cch-st.short { background: var(--warn-tint); color: var(--warn); }
.cch-st.bad { background: var(--danger-tint); color: var(--danger); }
/* 🔴 **الصادر فيه تمن حالات مش تلاتة** — «ألغى الموظف» و«مشغول» و«مغلق» كل
   واحدة قرار مختلف في المراجعة، فكل واحدة ليها لونها.
   ⚠️ **و«ألغى الموظف» أحمر زي «لم يرد»**: الاتنين مكالمة ضاعت، بس السبب مختلف —
      واللون بيقول «فيه مشكلة» والنص تحته بيقول مين سبّبها. */
.cch-st.cancel { background: var(--danger-tint); color: var(--danger); }
.cch-st.busy { background: var(--info-tint); color: var(--info); }
.cch-st.off { background: var(--card-2); color: var(--muted); }
.cch-st.partial { background: var(--accent-tint); color: var(--accent); }
.cch-st.quick { background: var(--warn-tint); color: var(--warn); }

/* تفصيلة العدّاد تحته */
.cch-brk { display: block; margin-top: 5px; font-size: .72rem; color: var(--muted); }
.cch-brk b { font-weight: 800; color: var(--ink); }

/* مشغّل التسجيل + سرعات القراءة */
.cch-rec { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cch-spd { display: inline-flex; gap: 3px; }
.cch-spd button {
  border: 1px solid var(--line-strong); background: var(--card-2); color: var(--muted);
  border-radius: var(--radius-xs); padding: 3px 9px; font: inherit; font-size: .7rem;
  font-weight: 700; cursor: pointer; direction: ltr;
}
.cch-spd button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.cch-calls { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line-strong); }
.cch-call {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 6px 10px; font-size: .82rem;
}
/* رقم العميل على السطر نفسه — نفس المكالمات بتتعرض بأكتر من تجميع، فالسطر
   لازم يتقرا لوحده. مكتوم عن اسم الموظف عشان مايزاحمش اللي العين بتدوّر عليه. */
.cch-call-n {
  background: var(--card-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 1px 7px; font-size: .74rem; font-weight: 700;
}
.cch-call-t { color: var(--muted); font-weight: 600; min-width: 116px; }
.cch-call-a { flex: 1 1 130px; min-width: 0; font-weight: 600; }
.cch-dur { background: var(--card-2); color: var(--muted); border-radius: var(--radius-xs); padding: 1px 8px; font-size: .74rem; font-weight: 700; }

/* وضع مكالمة العميل الجديد (v42) — خانة جوّه جدول، فمفيش خلفية ولا بردر
   (زي `.cch-call`) — دول كانوا هيعملوا كارت جوّه صف. */
.cch-noans { color: var(--danger); font-weight: 600; }
.cch-play {
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  background: var(--primary-tint); color: var(--primary);
  border-radius: 999px; padding: 3px 13px; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
}
.cch-play:hover { filter: brightness(1.05); }
.cch-audio { height: 32px; max-width: 100%; vertical-align: middle; }
.cch-chip {
  display: inline-block; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 2px 9px; margin: 2px; font-size: .76rem; color: var(--muted);
}
/* شريحة تحذير: «فيه أرقام أكتر». لون التحذير من التوكنز — لا hex ولا كلاس عام */
.cch-chip.warn { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); font-weight: 700; }

/* ── تذاكر أودو جوّه كارت الشركة (v34: لستة مش تذكرة واحدة) ───────────────── */
.cch-keys { margin: 0 0 10px; font-size: .82rem; }
.cch-keys b { font-weight: 700; margin-inline-end: 4px; }
.cch-tks { display: flex; flex-direction: column; gap: 8px; }
.cch-tk-row {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 8px 10px;
}
.cch-tk-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cch-tkmeta { margin-top: 4px; font-size: .76rem; color: var(--muted); }
.cch-pnum { font-weight: 700; color: var(--ink); }
.cch-pb-n {
  margin-inline-start: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 1px 8px; font-size: .74rem; font-weight: 700; color: var(--muted);
}

@media (max-width: 620px) {
  .cch-pgrid { grid-template-columns: 1fr; }
}

/* ══════════════ تخطيط v47: أقسام الكارت ══════════════ */

/* قسم جوّه الكارت (تذاكر · سجل رقم) — الخط المتقطّع بيفصلهم من غير كارت جوّه
   كارت. نفس شكل `.seclbl` عند مينا. */
.cch-sec {
  margin-top: 13px; padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}
.cch-sec > .cch-lbl { display: block; margin-bottom: 8px; font-weight: 700; }

/* أرقام التذكرة — حبّة لكل رقم. ⚠️ **مش زرار**: سجل المكالمات بيتعرض مرة واحدة
   تحت رقمه في القسم اللي بعده، فحبّة بتفتح لستة هنا كانت هتعرض نفس المكالمة
   مرتين على نفس الشاشة (البق اللي اتصلّح 2026-08-27). */
.cch-tk-ph { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* إحصائية التذكرة — سطر واحد جوّه إطار خفيف عشان مايتخلطش بميتاداتا التذكرة */
.cch-tk-st {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-xs); font-size: .74rem;
}

/* سجل مكالمات رقم */
.cch-nlog + .cch-nlog { margin-top: 11px; }
.cch-nlog-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 7px;
}

/* فاصل «مكالمات الأرقام الأخرى» — خطين على الجنبين زي مينا.
   ⚠️ **لونه تحذيري مش عادي**: القسم ده بيقول «دي مكالمات رقم **تاني**»، ومن
      غير تمييز بتتقرا كأنها مكالمات الرقم اللي المستخدم بحث بيه. */
.cch-othersec {
  display: flex; align-items: center; gap: 10px;
  margin: 15px 0 9px; color: var(--warn);
  font-size: .8rem; font-weight: 700;
}
.cch-othersec::before, .cch-othersec::after {
  content: ""; flex: 1; height: 1px; background: var(--warn-tint);
}

/* الرقم الأساسي في سطر الأرقام */
.cch-chip.is-main { background: var(--primary-tint); color: var(--primary); }


/* ══════════════ تاب «المكالمات الصادرة» ══════════════ */

.obc-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.obc-head h3 { margin: 0; font-size: 1.05rem; }
.obc-count {
  background: var(--primary-tint); color: var(--primary);
  border-radius: 999px; padding: 2px 13px; font-size: .8rem; font-weight: 700;
}
/* 🔴 **زرار مش شارة**: الرقم ده بيفتح فلتر «غير مصنّف» بدوسة — العدد اللي مش
   داخل في أي تصنيف لازم يتقال **ويتوصل له**، مش يتقال وخلاص. */
.obc-unk {
  border: 1px solid var(--warn); background: var(--warn-tint); color: var(--warn);
  border-radius: 999px; padding: 3px 13px; font: inherit; font-size: .76rem;
  font-weight: 700; cursor: pointer;
}
.obc-unk:hover { filter: brightness(1.08); }

/* شريط الفلاتر */
.obc-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0;
}
.obc-f { display: flex; align-items: center; gap: 7px; }
.obc-f > span { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
/* ⚠️ **العرض صريح**: `styles.css` فيه قاعدة عامة `select { width: 100% }`، فأي
   خانة مانحددّلهاش عرض بتاخد عرض حاويتها كلها (بق فلاتر «التعاقدات» بالحرف). */
.obc-f select { width: auto; min-width: 130px; }

/* الجدول
   🔴 **الخانات في النص** زي صفحته بالظبط. الافتراضي في RTL محاذاة يمين، وعلى
      شاشة أعرض من `min-width` المتصفّح بيوزّع الزيادة على الأعمدة — فالمحتوى
      بيلزق في حرف كل خانة وتبان فجوة في النص، والجدول يتقرا «محشور على
      الجنبين». التوسيط بيخلّي الزيادة تتقسم على الجنبين. */
.obc-table { min-width: 1080px; }
.obc-table th, .obc-table td { text-align: center; vertical-align: middle; }

/* خانة الرقم: الرقم فوق والأزرار تحته — نفس ترتيب صفحته */
.cch-num { white-space: nowrap; }
.cch-numbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cch-numbox > .ltr { font-weight: 700; }
.cch-acts { display: inline-flex; gap: 6px; }

/* ── بطاقة الهوفر ────────────────────────────────────────────────────────
   🔴 **`position: fixed` مش `absolute`.** حاوية الجدول عندها
      `overflow-x: auto`، والعنصر المطلق جوّاها **بيتقصّ** — والبطاقة أطول من
      الصف بكتير. والثابت بيخرج من القصّ لأن حاويته هي النافذة.
   ⚠️ **و`app.js` هو اللي بيحسب المكان** (`top`/`left` من مستطيل الحبّة):
      CSS مايقدرش يعرف مكان العنصر، فالهوفر بـCSS وحده كان هيرسم البطاقة في
      ركن الشاشة.
   ⚠️ **و`[hidden]` صريحة**: `display: block` في القاعدة الأساسية بتغلب قاعدة
      المتصفّح — نفس مصيدة `.toast{display:flex}`، وخامس ظهور ليها. */
.cch-hov { position: relative; display: inline-block; }
.cch-pop {
  display: block; position: fixed; z-index: 60; width: 290px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  padding: 12px 14px; text-align: right; white-space: normal; font-size: .8rem;
  line-height: 1.7;
}
.cch-pop[hidden] { display: none; }
.cch-pophead {
  border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 8px;
  font-size: .92rem;
}
.cch-poprow { display: flex; gap: 8px; align-items: baseline; }
.cch-poprow > span { color: var(--muted); font-weight: 600; white-space: nowrap; }
/* ⚠️ **`min-width: 0` مع الكسر**: اسم عميل أو طلب طويل بلا مسافات بيفرد
   البطاقة برّه الشاشة — والعرض ثابت عشان الشكل مايرقصش من صف لصف. */
.cch-poprow > b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.obc-popwhy { color: var(--danger); font-weight: 700; margin-bottom: 9px; }
.obc-poptk {
  border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 7px;
}
.cch-popodoo {
  display: inline-block; margin-top: 9px; font-weight: 700; color: var(--info);
  text-decoration: none;
}
.cch-popodoo:hover { text-decoration: underline; }
/* البطاقة مالهاش معنى على الورق */
@media print { .cch-pop { display: none !important; } }
/* سبب الحالة تحتها — سطر صغير، مش جوّه الشارة (الشارة عرضها من محتواها) */
.obc-why { margin-top: 3px; font-size: .7rem; color: var(--muted); line-height: 1.5; }

/* مصدر المكالمة */
.obc-line {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: var(--card-2); color: var(--muted);
}
.obc-line.co-aa { background: var(--ok-tint); color: var(--ok); }
.obc-line.co-cs { background: var(--info-tint); color: var(--info); }
/* ⚠️ **«غير مصنّف» بلونه هو** — مش رمادي زي «مانعرفش» العادي: ده **نقص محدَّد**
   في `named_numbers` عند الكول سنتر، وله إجراء. */
.obc-line.is-unk { background: var(--warn-tint); color: var(--warn); }

/* حالة التعارض */
.obc-cf {
  display: inline-block; padding: 2px 11px; border-radius: var(--radius-xs);
  font-size: .76rem; font-weight: 700; white-space: nowrap; cursor: help;
}
.obc-cf.is-co { background: var(--danger-tint); color: var(--danger); }
.obc-cf.is-code { background: var(--warn-tint); color: var(--warn); }

/* التذاكر المكررة */
.obc-dup {
  border: 0; background: var(--warn-tint); color: var(--warn);
  border-radius: var(--radius-xs); padding: 2px 11px; font: inherit;
  font-size: .78rem; font-weight: 700; cursor: pointer;
}
.obc-dup:hover { filter: brightness(1.08); }
/* 🔴 **`[hidden]` صريحة**: `display: flex` بتغلب قاعدة المتصفّح، فمن غير السطر
   ده اللستة بتفضل مفتوحة والزرار يبان معطّل — نفس مصيدة `.toast{display:flex}`
   الموثّقة في CLAUDE.md، ورابع ظهور ليها في الملف ده. */
.obc-dupbox { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.obc-dupbox[hidden] { display: none; }
.obc-dupline {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 4px 9px;
}

/* حاوية الجدول — التمرير جوّاها مش على الصفحة كلها */
.cch-tablewrap { overflow-x: auto; }

/* ══════════════ تاب «المكالمات الواردة» ══════════════
   ⚠️ **بيشارك `obc-line` و`obc-dup*` مع «الصادرة» عن قصد** — نفس الشارة ونفس
      زرار التذاكر المكررة، ونسختين بيفرقوا مع الوقت. اللي هنا هو **اللي يخصّه
      وحده**: حالة المكالمة الأربعة، ولستة «مين كان في دوامه». */
.ibc-table { min-width: 1080px; }
.ibc-table th, .ibc-table td { text-align: center; vertical-align: middle; }

/* حالة المكالمة */
.ibc-st {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.ibc-st.is-ans { background: var(--ok-tint); color: var(--ok); }
.ibc-st.is-short { background: var(--warn-tint); color: var(--warn); }
/* ⚠️ **«فائتة» بلون تاني غير «لم يتم الرد»**: الأولى العميل قفل بنفسه (مافيش
   حد يتحاسب)، والتانية رنّ وماحدّش ردّ — لونين مختلفين لأن القرار مختلف. */
.ibc-st.is-miss { background: var(--warn-tint); color: var(--warn); }
.ibc-st.is-noans { background: var(--danger-tint); color: var(--danger); }
.ibc-why { margin-top: 3px; font-size: .7rem; color: var(--muted); line-height: 1.5; }

/* «مين كان في دوامه» */
.ibc-shbtn {
  display: inline-block; margin-top: 6px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--ink); border-radius: var(--radius-xs);
  padding: 3px 11px; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
}
.ibc-shbtn:hover { filter: brightness(1.08); }
.ibc-arw { font-size: .7rem; }
/* 🔴 **`[hidden]` صريحة**: `display: flex` بتغلب قاعدة المتصفّح، فمن غير السطر
   ده اللستة بتفضل مفتوحة والزرار يبان معطّل — سادس ظهور لمصيدة `.toast`. */
.ibc-shbox { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.ibc-shbox[hidden] { display: none; }
.ibc-shline {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 4px 9px; font-size: .76rem;
  text-align: right;
}
/* ⚠️ **«مافيش دوام مسجّل» رمادية مش حمرا** — دي «مانعرفش» مش «حد قصّر». */
.ibc-shnote { margin-top: 3px; font-size: .7rem; color: var(--muted); }

/* حالة الموظف في اللستة */
.ibc-acc {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.ibc-acc.is-resp { background: var(--danger-tint); color: var(--danger); }
.ibc-acc.is-busy { background: var(--warn-tint); color: var(--warn); }
.ibc-acc.is-ansd { background: var(--ok-tint); color: var(--ok); }
.ibc-acc.is-noreach { background: var(--card-2); color: var(--muted); }
.ibc-acc.is-onshift { background: var(--info-tint); color: var(--info); }