/* مركز الطلبات — v3: هوية "لوحة تذاكر" (رف أيقونات + لوحة تفاصيل جانبية). */
:root {
--accent: #4B5694;
--accent-2: #7288AE;
--green: #1DB876;
--red: #C0392B;
--accent-contrast: #FFFFFF;
--accent-soft: color-mix(in oklch, var(--accent) 12%, #FFFFFF);
--accent-line: color-mix(in oklch, var(--accent) 32%, #FFFFFF);
--accent-deep: color-mix(in oklch, var(--accent) 85%, #000);
--bg: #F6F4EF;
--surface: #FFFFFF;
--surface-2: #EEEBE2;
--surface-sunken: #E5E1D4;
--border: #E5E1D6;
--border-strong: #D3CDBC;
--text: #111844;
--text-2: #4B5694;
/* كان #7288AE: تباينه 3.6 على الأبيض و3.0 على --surface-2 (تلميحات «لا توجد
بيانات»، عدد الطلبات، تسميات «من تاريخ»). هذا 5.6 على الأبيض و4.7 على
--surface-2 ويبقى أخفت من --text-2 بوضوح. الداكن له قيمته أدناه. */
--text-3: #56688A;
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 18px;
--radius-pill: 999px;
--row-h: 60px;
--pad-x: 20px;
--fs-base: 14px;
--fs-sm: 13.5px;
--fs-xs: 12px;
--shadow-sm: 0 1px 2px rgba(20,20,40,.05), 0 1px 1px rgba(20,20,40,.04);
--shadow-md: 0 6px 20px rgba(30,25,70,.1), 0 2px 6px rgba(30,25,70,.06);
--shadow-lg: 0 22px 56px rgba(30,25,70,.2), 0 6px 16px rgba(30,25,70,.08);
--shadow-accent: 0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent);
/* درجات الخريطة صريحة لا مشتقّة بـcolor-mix من --surface: المزج داخل
خاصية fill في SVG لم يُعِد الحساب عند تبديل الثيم، فبقيت الخريطة فاتحة
فوق خلفية داكنة. قيمتان مستقلتان لكل وضع تتبدّلان بثبات. */
--map-0: #EEEBE2;
--map-1: #DDE0EE; --map-2: #B9C0DC; --map-3: #8E99C4; --map-4: #6A76AC; --map-5: #4B5694;
--font: 'Beiruti', 'IBM Plex Sans Arabic', system-ui, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
--ease: cubic-bezier(.32,.72,.34,1);
--ease-bounce: cubic-bezier(.34,1.56,.64,1);
}
[data-density="compact"] { --row-h: 48px; --pad-x: 14px; --fs-base: 13px; --fs-sm: 12.5px; --fs-xs: 11px; }
[data-theme="dark"] {
--bg: #0E1220; --surface: #171C2E; --surface-2: #1F2540; --surface-sunken: #262C4A;
--border: #2A3050; --border-strong: #3A4270;
/* --text-3 كان #7C82A6: تباينه 4.0 فقط على --surface-2 (تلميحات «لا توجد
بيانات»، وقت المحادثة المختارة، وسم «ملخّص»). #8C92B6 يبلغ 4.9 ويبقى
أخفت من --text-2 بوضوح فلا يضيع التدرّج بين المستويين. */
--text: #EDEFF7; --text-2: #A9AFCB; --text-3: #8C92B6;
/* الأحمر نصًّا: --red نفسه (#C0392B) تباينه 3.1 على الأسطح الداكنة، ويبقى
خلفيةً للأزرار الخطرة كما هو. --red-ink للنص والحدود الرفيعة فقط، ولا
يُعرَّف في الفاتح — فتقع الأنماط السطرية على var(--red) بديلًا هناك. */
--red-ink: #FF9D92;
/* عناصر المتصفح الأصلية (مربعات الاختيار، أيقونة التقويم في حقول التاريخ،
قوائم select المنسدلة، حلقة التركيز الافتراضية) تتبع هذه الخاصية لا
ألوان الصفحة: بدونها بقيت مربعات الجدول بيضاء وأيقونة التقويم سوداء. */
color-scheme: dark;
--map-0: #232942;
--map-1: #2E3760; --map-2: #3D4A82; --map-3: #4F5EA5; --map-4: #6674C0; --map-5: #8590DA;
/* ثلاثي اللون المميّز كان مخلوطًا بـ#FFFFFF في الوضعين، فبقي فاتحًا في
الداكن: 25 قاعدة تستعمل `--accent-soft` خلفيةً و24 تستعمل
`--accent-deep` نصًّا. أوضح أثره: المحادثة المختارة في الصندوق نصٌّ
أبيض على خلفية بيضاء (تباين 1.05).
**القيم الفعلية وقت التشغيل يكتبها `app.jsx`** نمطًا سطريًا على
لأنها مشتقّة من لون يختاره المستخدم — والنمط السطري يتفوّق على ما هنا.
هذه النسخة احتياط لِما قبل تحميل السكربت، وتُبقي القيمتين متطابقتين. */
--accent-soft: color-mix(in oklch, var(--accent) 22%, #0E1220);
--accent-line: color-mix(in oklch, var(--accent) 38%, #0E1220);
--accent-deep: #A9B6FF;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-weight: 300; font-size: var(--fs-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
::selection { background: var(--accent-line); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -.02em; }
.tabnum { font-variant-numeric: tabular-nums; }
/* شعار الريال قبل الرقم دومًا (دليل ساما) — الفراغ بينهما بالحرف لا بهامش
ثابت، فيبقى متناسبًا مع حجم الخط في كل مكان يظهر فيه (تفاصيل الطلب،
ملف العميل، لوحة العملاء). */
.riyal-amt { display: inline-flex; align-items: baseline; gap: .18em; }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }
.scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
#root { height: 100%; }
/* ── Shell: rail always pinned left regardless of text direction ────────── */
.shell { height: 100%; display: flex; direction: ltr; overflow: hidden; }
/* grid بعدد صفوف ثابت (3) كان يكسر عند 4 أبناء معًا (accessbar + toolbar) —
يتوزّع طلب إذن ينتظر قرارك + شريط الفلاتر يأخذ صف الـ1fr المرن بدل main،
فيتمدد فارغًا وتنزل الطاولة تحته في صف auto ضيّق. flex يحل العدد المتغيّر. */
.mainarea { direction: rtl; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* .shell يفرض ltr ليبقى الشريط يسارًا، فلا ترث المنطقة الرئيسية اتجاه الصفحة —
بدون هذا تبقى الواجهة الإنجليزية معكوسة كلها (الأعمدة والفلاتر والعدّادات). */
html[dir="ltr"] .mainarea { direction: ltr; }
/* ── الواجهة الإنجليزية (ltr): مرآة القواعد المكتوبة بإحداثيات فيزيائية ────
جُمعت هنا لا بتحويل القواعد الأصلية إلى خصائص منطقية: التحويل يغيّر مظهر
العربية في مواضع كانت تعتمد يسار/يمين حرفيًا (وبعضها مقصود)، والمطلوب أن
تبقى العربية كما هي بكسلًا بكسلًا. الانتقاء بـhtml[dir] لا [dir] وحده، وإلا
طابقت أي حقل dir="ltr" (بريد، جوال) داخل الصفحة العربية. */
/* اللوحة الجانبية تنزلق من جهة نهاية السطر: يسارًا بالعربية، يمينًا بالإنجليزية */
html[dir="ltr"] .drawer { left: auto; right: 0; transform: translateX(105%); }
html[dir="ltr"] .drawer.show { transform: translateX(0); }
/* سهم القائمة المنسدلة في نهاية الحقل، والحشوة الواسعة تتبعه كي لا يركب النص فوقه */
html[dir="ltr"] .td-select { background-position: right 12px center; }
/* حشوات غير متناظرة (جهة الصورة/النقطة أضيق) — تُعكس لتبقى على الجهة نفسها منطقيًا */
html[dir="ltr"] .statusBadge { padding: 4px 9px 4px 11px; }
html[dir="ltr"] .tagchip { padding: 0 11px 0 6px; }
html[dir="ltr"] .assign-trigger { padding: 0 10px 0 8px; }
html[dir="ltr"] .permcustom { padding: 4px 44px 14px 4px; }
/* سهم «انتقل» في بطاقات المؤشرات يشير لنهاية السطر ويدخل منها */
html[dir="ltr"] .kpi-go { transform: scaleX(-1) translateX(4px); }
html[dir="ltr"] button.kpi:hover .kpi-go, html[dir="ltr"] button.kpi:focus-visible .kpi-go { transform: scaleX(-1); }
/* منتقي المدة fixed بلا إحداثيات فيأخذ موضعه الساكن من بداية الحاوية: بالعربية
يمتدّ من طرف الزر الأيمن نحو اليسار، وبالإنجليزية كان يمتدّ يمينًا من زرٍّ في
آخر الشريط فيخرج نصفه من الشاشة. justify-content يحاذي موضعه الساكن لنهاية الزر.
(الجوال يثبّته بـleft/right صريحين فلا يتأثر.) */
html[dir="ltr"] .assign:has(> .daterange-menu) { justify-content: flex-end; }
/* قواعد الجوال اللاحقة لها تحديد أقل من html[dir] أعلاه، فتُكرَّر مرآتها هنا */
@media (max-width: 768px) {
html[dir="ltr"] .permcustom { padding: 2px 0 12px; }
html[dir="ltr"] .mainarea .dr-months .td-select { padding: 0 28px 0 10px; background-position: right 9px center; }
}
/* ── Rail ─────────────────────────────────────────────────────────────── */
/* الأزرار مجموعها 702 بكسل، وشاشة 1366×768 تعطي نحو 660 للمنطقة المرئية —
فبلا تمرير يُقصّ زرّا «الإعدادات» و«الحساب» بلا أي طريقة للوصول إليهما.
المسافات تتقلّص أولًا، ثم يُمرَّر الشريط إن لم يكفِ ذلك. */
.rail { width: 72px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.rail::-webkit-scrollbar { width: 0; height: 0; }
.rail > * { flex-shrink: 0; }
.rail-logo { width: 40px; height: 40px; border-radius: 12px; background: #144681; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; box-shadow: var(--shadow-accent); margin-bottom: 6px; overflow: hidden; }
.rail-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 5px; box-sizing: border-box; }
.brand-logo { height: 34px; width: auto; border-radius: 6px; flex-shrink: 0; background: #fff; padding: 2px 6px; box-sizing: content-box; }
[data-theme="dark"] .bg-watermark { opacity: .10; filter: blur(2px) invert(1); }
.toastwrap { position: fixed; bottom: 20px; inset-inline-start: 90px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-lg); animation: toastIn .3s cubic-bezier(.34,1.56,.64,1); }
.toast svg { width: 16px; height: 16px; color: var(--green); }
.toast.error svg { color: #FF8A7A; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
/* العلامة المائية: كانت blur(6px) وopacity .05 — أي فرق نحو 10 درجات عن لون
الخلفية، لا يكاد يُرى. خُفّض التمويه ورُفعت الشفافية فصار الفرق نحو 25
درجة (أوضح 2.5 مرة) مع بقائها خلفية لا تزاحم المحتوى. البطاقات والجداول
تقف على سطح معتم، فوضوحها لا يمسّ قراءة أي نص. */
/* داخل main.scroll لا الصفحة كلها: بانر «طلب إذن ينتظر قرارك» يدفع main
للأسفل، وكانت العلامة (fixed على الشاشة كاملة) تبقى في مكانها فتتراكب
مع أول صفوف الجدول بدل الفراغ فوقه. absolute هنا يتبع صندوق main نفسه. */
.bg-watermark { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url('assets/company-watermark.png'); background-repeat: no-repeat; background-position: center; background-size: min(74%, 960px); filter: blur(2px); opacity: .11; }
.shell { position: relative; z-index: 1; }
.rail-divider { width: 32px; height: 1px; background: var(--border); margin: 4px 0; }
.rail-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; background: transparent; color: var(--text-3); display: grid; place-items: center; transition: all .15s var(--ease-bounce); position: relative; }
.rail-btn:hover { background: var(--surface-2); color: var(--text-2); }
.rail-btn.active { background: var(--text); color: #fff; box-shadow: var(--shadow-md); }
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn .rail-badge { position: absolute; top: 3px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }
/* ── أيقونات الشريط الجانبي في الوضع الداكن ──────────────────────────────
في الفاتح: الزر النشط خلفيته var(--text) الداكنة وأيقونته بيضاء — واضح.
في الداكن كان --text يصبح شبه أبيض، فتصير خلفية بيضاء وأيقونة بيضاء
فتختفي الأيقونة. وبقية الأيقونات كانت --text-3 القريب من لون الخلفية.
لذلك للداكن ألوان مستقلة، والفاتح يبقى كما هو. */
[data-theme="dark"] .rail-btn { color: #B4BCE0; }
[data-theme="dark"] .rail-btn:hover { background: var(--surface-2); color: #FFFFFF; }
[data-theme="dark"] .rail-btn.active {
background: var(--accent); /* لون الهوية ثابتًا لا لون النص */
color: #FFFFFF;
box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .rail-btn.active:hover { background: var(--accent); color: #FFFFFF; }
[data-theme="dark"] .rail-btn .rail-badge { border-color: var(--surface); }
/* نص فقاعة الملاحظة الداخلية: خلطه بالأسود للتباين على خلفية فاتحة في
الوضع الفاتح — نفس المنطق ينقلب في الداكن فيُخلط بالأبيض، كما --accent-deep. */
[data-theme="dark"] .msg.internal .bubble { color: color-mix(in oklch, var(--accent-2) 40%, #fff); }
.rail-spacer { flex: 1 0 8px; }
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* بعد التعريفات أعلاه لا قبلها: التخصيص متساوٍ فالأخير يفوز. */
@media (max-height: 800px) {
.rail { gap: 4px; padding: 9px 0; }
.rail-btn { width: 40px; height: 40px; border-radius: 11px; }
.rail-btn svg { width: 18px; height: 18px; }
.rail-logo { width: 36px; height: 36px; margin-bottom: 0; }
.rail-divider { margin: 0; }
.rail-bottom { gap: 4px; }
}
/* ── Top bar ──────────────────────────────────────────────────────────────*/
.topbar { display: flex; align-items: center; gap: 16px; padding: 0 22px; height: 66px; background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.18; }
.brand-name { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--text-3); font-weight: 500; }
.topbar-spacer { flex: 1; }
.btn { appearance: none; border: 1.5px solid var(--border-strong); cursor: pointer; background: var(--surface); color: var(--text); display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: background .14s, transform .15s var(--ease-bounce), box-shadow .15s; }
.btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; }
/* الزر الأساسي على لون الهوية نفسه: أبيض على --accent-2 كان 3.6 فبدا «طلب جديد»
و«تسجيل الدخول» معطّلين. --accent 6.9. الداكن له قاعدته أسفل الملف. */
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, #000); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: color-mix(in oklch, var(--red) 88%, #000); }
.btn-sm { height: 34px; padding: 0 12px; font-size: var(--fs-xs); }
/* زر معطَّل يبدو معطَّلًا (فاتح وداكن): «طبّق» و«تأكيد ومنح» و«حفظ» المعطّلة كانت بلون
المفعّلة تمامًا، فيضغطها المدير ولا يحدث شيء. */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }
.btn-primary:disabled:hover, .btn-primary[disabled]:hover { background: var(--accent); }
.btn-danger:disabled:hover, .btn-danger[disabled]:hover { background: var(--red); }
.btn-ghost:disabled:hover, .btn-ghost[disabled]:hover { background: transparent; }
.icon-btn { appearance: none; border: 0; cursor: pointer; background: transparent; width: 38px; height: 38px; border-radius: var(--radius-sm); color: var(--text-2); display: grid; place-items: center; position: relative; transition: background .14s, color .14s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .badge-dot { position: absolute; top: 6px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid transparent; min-width: 240px; transition: border-color .14s; }
.search:focus-within { border-color: var(--accent-line); background: var(--surface); }
.search svg { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.search input { border: 0; background: transparent; outline: none; width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--surface-sunken); color: var(--text-2); }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.accent { background: var(--accent-soft); color: var(--accent-deep); }
/* ── Toolbar ──────────────────────────────────────────────────────────────*/
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.toolbar::-webkit-scrollbar { display: none; }
.toolbar > * { flex-shrink: 0; }
.deptTabs { display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; }
.deptTab { appearance: none; border: 0; cursor: pointer; background: transparent; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; transition: all .15s; }
.deptTab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.deptTab .count { font-size: 11px; font-weight: 700; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-2); }
.deptTab.active .count { background: var(--accent); color: #fff; }
.toolbar-divider { width: 1px; height: 26px; background: var(--border); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { appearance: none; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; transition: all .14s; }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
/* الخلفية تنقلب مع الوضع (var(--text) داكنة في الفاتح، فاتحة في الداكن)
عمدًا لتبقى أعلى تباين ممكن مع الصفحة في كلا الوضعين — لكن النص كان
أبيض ثابتًا، فينمحي فوق الخلفية الفاتحة في الداكن. var(--bg) يتبعها. */
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.chip.overdue { border-color: var(--red); color: var(--red); }
.chip.overdue.active { background: var(--red); border-color: var(--red); color: #fff; }
.toolbar-spacer { flex: 1; }
.kpi { display: flex; flex-direction: column; gap: 1px; padding: 6px 14px; border-radius: var(--radius-sm); background: var(--surface-2); min-width: 78px; }
.main { overflow: auto; position: relative; flex: 1; min-height: 0; }
/* ── Status / dept chips ──────────────────────────────────────────────────*/
.statusBadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1.5px solid; }
.statusBadge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.deptTag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.deptTag .sq { width: 7px; height: 7px; border-radius: 2px; }
.followFlag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-2); }
.followFlag svg { width: 13px; height: 13px; }
.pri { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pri.high { background: var(--red); }
.pri.normal { background: var(--accent-2); }
.pri.low { background: var(--green); }
/* ── Table view ───────────────────────────────────────────────────────────*/
.table-wrap { padding: 16px 22px 40px; }
table.reqtable { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.reqtable thead th { text-align: start; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .03em; padding: 0 16px 4px; white-space: nowrap; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.reqtable tbody tr { background: var(--surface); cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s var(--ease-bounce); }
.reqtable tbody tr:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* أثناء التمرير السريع، صفوف كثيرة تمر تحت مؤشر الفأرة الثابت وتفعّل :hover
واحدًا تلو الآخر (ظل + transform)، فيتكدّس العمل على المتصفح. نمنع التفاعل
مؤقتًا فقط أثناء التمرير (راجع mainRef في app.jsx). */
.main.is-scrolling .reqtable tbody tr,
.main.is-scrolling .card { pointer-events: none; }
.reqtable tbody tr.sel { box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }
.reqtable td { padding: 0 16px; height: var(--row-h); vertical-align: middle; font-size: var(--fs-sm); }
.reqtable tbody tr td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.reqtable tbody tr td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cell-customer { display: flex; align-items: center; gap: 11px; }
.cell-customer .nm { font-weight: 600; }
.cell-customer .co { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }
.cell-subject { max-width: 280px; }
.cell-subject .sub { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-assignee { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cell-ref { color: var(--text-3); font-size: var(--fs-xs); }
.cell-meta { color: var(--text-2); white-space: nowrap; }
.unassigned { color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.unassigned .avatar { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--surface-sunken) 3px, var(--surface-sunken) 6px); }
/* ── Kanban ───────────────────────────────────────────────────────────────*/
.board { display: flex; gap: 16px; padding: 18px 22px 40px; align-items: flex-start; min-height: 100%; }
.board-col { flex: 1; min-width: 236px; max-width: 360px; display: flex; flex-direction: column; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border); }
/* خلفية صلبة + z-index إلزاميان لأي عنصر sticky يعلو محتوى قابلًا للتمرير —
بدونهما تشف البطاقات الشفافة تحته وهي تمرّ خلفه أثناء التمرير، فيبدو
العنوان متداخلًا مع البيانات بدل ثابت فوقها (راجع .reqtable thead th
لنفس النمط الصحيح المستخدم هناك). */
.col-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 11px; position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.col-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.col-head .ttl { font-weight: 700; font-size: var(--fs-sm); }
.col-head .count { margin-inline-start: auto; font-size: 11px; font-weight: 700; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.col-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 10px 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .16s, transform .16s var(--ease-bounce); display: flex; flex-direction: column; gap: 9px; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card[draggable="true"] { cursor: grab; }
.card[draggable="true"]:active { cursor: grabbing; }
.board-col.dragover { border-color: var(--accent); background: var(--accent-soft); }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-md); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-sub { font-weight: 600; font-size: var(--fs-sm); line-height: 1.4; }
.card-customer { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-xs); }
.card-foot { display: flex; align-items: center; gap: 8px; }
.card-foot .spacer { flex: 1; }
.col-empty { padding: 14px; text-align: center; color: var(--text-3); font-size: var(--fs-xs); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); }
/* ── Inbox (ticket-list style) ───────────────────────────────────────────*/
.inbox { display: grid; grid-template-columns: 290px minmax(420px,1fr) 300px; height: 100%; }
@media (max-width: 1180px) { .inbox { grid-template-columns: 260px minmax(360px,1fr) 0; } .inbox > :last-child { display: none; } }
.teamview { display: grid; grid-template-columns: minmax(240px,290px) 1fr; height: 100%; }
/* ── Stats dashboard ─────────────────────────────────────────────────────*/
.stats { padding: 20px 22px 40px; display: flex; flex-direction: column; gap: 18px; height: 100%; }
/* الأبناء لا ينكمشون: على الجوال تصير .deptTabs حاوية تمرير أفقي فحدّها
الأدنى صفر، وكانت تُعصر إلى شريط 6px لا تُضغط تبويباته حين تطول القائمة. */
.stats > * { flex-shrink: 0; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
.statcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); }
.sc-lbl { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.sc-val { font-size: 27px; font-weight: 700; letter-spacing: -.01em; }
.statcard.flag .sc-val { color: var(--accent-2); }
.statpanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.statpanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.barrow { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.bar-lbl { width: 92px; flex-shrink: 0; color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .4s var(--ease-bounce); }
.bar-val { width: 26px; text-align: end; font-weight: 700; color: var(--text); }
.bulkbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); flex-wrap: wrap; }
.bulkcount { font-weight: 700; font-size: var(--fs-sm); color: var(--accent-deep); }
.rowchk { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
.reqtable tbody tr td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.notifmenu { width: 320px; max-height: 400px; }
.notifitem { align-items: flex-start; gap: 10px; }
.notifdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.notifdot.overdue { background: var(--red); }
.notifdot.follow { background: var(--accent-2); }
.notifdot.unassigned { background: var(--text-3); }
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.report-title { font-size: 18px; font-weight: 700; }
.report-sub { font-size: var(--fs-xs); margin-top: 3px; }
.report-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media print {
.rail, .topbar, .toolbar, .twk-panel, .drawer, .scrim, .report-actions { display: none !important; }
body, .shell, .mainarea, .main, .stats { background: #fff !important; height: auto !important; overflow: visible !important; }
.stats { padding: 0 6px; }
.statpanels { grid-template-columns: repeat(3,1fr); }
/* ألوان أشرطة التوزيع وشارات الحالة تُطبع — المتصفح يُسقط الخلفيات افتراضيًا */
.stats { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.statgrid, .statpanel, .agentperf-table tr { break-inside: avoid; }
.agentperf-table thead { display: table-header-group; }
/* الطباعة من الوضع الداكن: الخلفية تُفرض بيضاء أعلاه لكن النص يبقى فاتحًا
(تباين يكاد ينعدم). المتغيرات على body تتفوّق على الموروثة من . */
[data-theme="dark"] body {
--bg: #F6F4EF; --surface: #FFFFFF; --surface-2: #EEEBE2; --surface-sunken: #E5E1D4;
--border: #E5E1D6; --border-strong: #D3CDBC;
--text: #111844; --text-2: #4B5694; --text-3: #7288AE;
--accent-soft: color-mix(in oklch, var(--accent) 12%, #FFFFFF);
--accent-line: color-mix(in oklch, var(--accent) 32%, #FFFFFF);
--accent-deep: color-mix(in oklch, var(--accent) 85%, #000);
color-scheme: light;
}
[data-theme="dark"] .statcard, [data-theme="dark"] .statpanel { background: #fff !important; border-color: var(--border) !important; box-shadow: none !important; }
}
/* ── wave3:pdf-export — النسخة التي تُصوَّر إلى PDF (buildReportPdf في views.jsx) ──
تُضاف تحت خارج الشاشة بعرض ثابت قريب من A4، فيخرج التقرير بنفس
التخطيط من الآيفون والحاسوب. فاتحة دائمًا ولو كان المستخدم على الداكن:
المتغيرات الفاتحة تُكتب عليها سطريًا، وما يلي يُبطل قواعد الداكن والزجاج
الموجَّهة للعناصر مباشرة ([data-theme] يرفع الأولوية فوقها). */
.pdf-render { position: fixed; top: 0; left: -12000px; width: 760px; z-index: -1; pointer-events: none;
background: #fff; color: var(--text); font-family: var(--font); font-weight: 300; font-size: var(--fs-base);
color-scheme: light; -webkit-font-smoothing: antialiased; }
.pdf-render *, .pdf-render *::before, .pdf-render *::after { animation: none !important; transition: none !important; }
.pdf-render .stats { height: auto; overflow: visible; padding: 0; gap: 14px; background: #fff; }
.pdf-render .report-actions { display: none !important; }
.pdf-render .report-head { flex-wrap: nowrap; align-items: center; padding: 4px 0 12px; border-bottom: 2px solid var(--accent); background: #fff; }
.pdf-render .pdf-logo { height: 46px; width: auto; flex: none; margin-inline-start: auto; }
.pdf-render .statpanels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pdf-render .agentperf-scroll { overflow: visible; }
.pdf-render .agentperf-table th { white-space: normal; }
[data-theme] .pdf-render .statcard, [data-theme] .pdf-render .statpanel {
background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--border); }
[data-theme] .pdf-render .offtag { color: var(--red); background: color-mix(in oklch, var(--red) 12%, #fff);
border-color: color-mix(in oklch, var(--red) 28%, #fff); }
[data-theme] .pdf-render .unavailtag { color: #9A5B00; background: color-mix(in oklch, #E0A100 16%, #fff);
border-color: color-mix(in oklch, #E0A100 38%, #fff); }
.inbox-list { border-inline-end: 1px solid var(--border); overflow: auto; background: var(--surface); display: flex; flex-direction: column; }
.inbox-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.inbox-list-head b { font-size: 14.5px; font-weight: 700; }
.sortsel { border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-sm); height: 32px; padding: 0 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.inbox-item { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px 18px; border-bottom: 1px solid var(--border); position: relative; transition: background .13s; }
.inbox-item:hover { background: var(--surface-2); }
.inbox-item.sel { background: var(--accent-soft); }
.inbox-item.sel::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent); }
.it-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: #fff; margin-top: 1px; }
.it-ic svg { width: 15px; height: 15px; }
.it-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox-item.unread .it-customer { font-weight: 700; }
.it-top { display: flex; align-items: center; gap: 9px; }
.it-customer { font-weight: 600; font-size: var(--fs-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.it-sub { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-unreadbadge { position: absolute; top: 13px; inset-inline-end: 16px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
/* شفافة لا ملوّنة بـ--bg: اللون واحد (الصفحة تحته بالخلفية نفسها) فلا فرق
بصري، لكن الطلاء المعتم كان يغطي العلامة المائية داخل اللوحة ويكشفها
حولها — فيبدو الشعار مقصوصًا عند حافة اللوحة. */
.thread { display: flex; flex-direction: column; min-width: 0; background: transparent; }
.thread-empty { display: grid; place-items: center; height: 100%; color: var(--text-3); }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.thread-head .back { }
.thread-head .ttl { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 60px; }
.thread-head .ttl .ref { color: var(--text-3); font-weight: 500; margin-inline-end: 6px; }
.thread-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.thread-head .closebtn { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
/* ── Conversation ─────────────────────────────────────────────────────────*/
.conv { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 74%; }
.msg.agent { align-self: flex-start; align-items: flex-start; }
.msg.customer { align-self: flex-end; align-items: flex-end; }
.msg.system { align-self: center; max-width: 100%; }
.msg-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); padding: 0 4px; }
.msg-meta b { color: var(--accent-deep); font-weight: 600; }
.bubble { padding: 10px 13px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.6; box-shadow: var(--shadow-sm); }
.msg.agent .bubble { background: var(--accent-soft); border: 1px solid var(--accent-line); border-start-start-radius: 4px; }
.msg.customer .bubble { background: var(--surface); border: 1px solid var(--border); border-start-end-radius: 4px; }
.msg.system .bubble { background: transparent; box-shadow: none; border: 1px dashed var(--border-strong); color: var(--text-3); font-size: var(--fs-xs); padding: 6px 12px; border-radius: var(--radius-pill); text-align: center; }
.msg.internal { align-self: stretch; align-items: stretch; max-width: 100%; }
.msg.internal .bubble { background: color-mix(in oklch, var(--accent-2) 10%, var(--bg)); border: 1px dashed color-mix(in oklch, var(--accent-2) 45%, var(--bg)); color: color-mix(in oklch, var(--accent-2) 65%, #000); }
.internalbadge { color: var(--accent-2) !important; }
.composer { border-top: 1px solid var(--border); padding: 12px 18px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.composer-note { border-top: 1px solid var(--border); padding: 14px 18px; background: var(--surface); font-size: var(--fs-sm); text-align: center; }
.composer.internal { background: color-mix(in oklch, var(--accent-2) 6%, var(--surface)); }
.composer-chiprow { display: flex; align-items: center; gap: 8px; }
.composer-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.composer-chip .dot-ic { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.modeToggle { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: all .13s; }
.modeToggle .dot-ic { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.modeToggle.on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.modeToggle.internalOpt.on { background: color-mix(in oklch, var(--accent-2) 15%, var(--bg)); color: var(--accent-2); border-color: color-mix(in oklch, var(--accent-2) 40%, var(--bg)); }
.composer-row { display: flex; align-items: flex-end; gap: 10px; }
.composer textarea { flex: 1; resize: none; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: var(--fs-sm); background: var(--surface-2); color: var(--text); outline: none; min-height: 42px; max-height: 120px; line-height: 1.5; transition: border-color .14s; }
.composer textarea:focus { border-color: var(--accent); background: var(--surface); }
/* #111844 حرفيًا لا var(--text): تلك تنقلب فاتحة في الداكن (هي لون النص
المقروء)، فتمحو أيقونة الإرسال البيضاء فوقها. هذا الزر يريد كتلة داكنة
ثابتة في الوضعين لا لونًا يتبع الوضع. */
.composer-send { width: 40px; height: 40px; border-radius: 11px; border: 0; cursor: pointer; background: #111844; color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .14s, transform .15s var(--ease-bounce); }
/* خلفية زر الإرسال لا نصّه — تبقى داكنة في الوضعين (النص أبيض فوقها) */
.composer-send:hover { background: color-mix(in oklch, var(--accent) 85%, #000); transform: translateY(-1px); }
.composer-send svg { width: 17px; height: 17px; }
/* ── Drawer ───────────────────────────────────────────────────────────────*/
.scrim { position: fixed; inset: 0; background: rgba(20,15,45,.35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); backdrop-filter: blur(2px); }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 420px; max-width: 92vw; background: var(--surface); z-index: 41; box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform .32s var(--ease-bounce); display: flex; flex-direction: column; }
.drawer.show { transform: translateX(0); }
/* ── Ticket details panel (shared: drawer + inbox right rail) ───────────── */
.detail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.detail-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px; }
.detail-customer { display: flex; align-items: center; gap: 12px; }
.dc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-name { font-weight: 700; font-size: var(--fs-base); }
.dc-co { font-size: var(--fs-xs); color: var(--text-2); }
.detail-body { flex: 1; overflow: auto; min-height: 0; background: var(--surface); }
.slaBadge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--green); }
.slaBadge.overdue { color: var(--red); }
.historynote { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 16px 18px 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-xs); font-weight: 600; }
.csatrow { display: flex; align-items: center; gap: 4px; }
.csatstar { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--border-strong); width: 26px; height: 26px; display: grid; place-items: center; transition: color .12s, transform .12s; }
.csatstar svg { width: 19px; height: 19px; }
.csatstar.on { color: var(--accent-2); }
.csatstar:hover { transform: scale(1.12); }
.cannedrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.cannedrow::-webkit-scrollbar { display: none; }
.cannedchip { flex-shrink: 0; max-width: 240px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .13s; }
.cannedchip:hover { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-soft); }
.wabtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--green) 14%, var(--bg)); color: color-mix(in oklch, var(--green) 65%, #000); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.wabtn:hover { background: color-mix(in oklch, var(--green) 22%, var(--bg)); }
.wabtn-icon { color: var(--green); border-color: color-mix(in oklch, var(--green) 40%, var(--bg)); }
.wabtn-icon:hover { background: color-mix(in oklch, var(--green) 12%, var(--bg)); }
/* نص .wabtn مخلوط بالأسود للتباين على الخلفية الفاتحة — ينقلب بالأبيض
في الداكن الآن أن الخلفية صارت تتبع الوضع (var(--bg) أعلاه). */
[data-theme="dark"] .wabtn { color: color-mix(in oklch, var(--green) 45%, #fff); }
.conv-channelnote { display: flex; align-items: center; gap: 7px; align-self: center; font-size: 11px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px; margin-bottom: 4px; }
.chbadge { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; }
.translog { display: flex; flex-direction: column; gap: 8px; }
.transrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); padding: 9px 11px; background: var(--surface-2); border-radius: var(--radius-sm); }
.transfrom { color: var(--text-2); font-weight: 600; }
.transrow svg { color: var(--text-3); flex-shrink: 0; }
.transto { font-weight: 700; color: var(--accent-deep); }
/* تسميتا «من» و«إلى» — خافتتان كي لا تزاحما اسمي القسمين */
/* ── شاشة سجل أذونات التدخل ─────────────────────────────────────────────── */
.acclog { display: flex; flex-direction: column; gap: 10px; }
.accrow { display: flex; gap: 14px; align-items: flex-start; padding: 13px 15px;
border-radius: var(--radius-sm); background: var(--surface-2);
border-inline-start: 3px solid var(--border-strong); }
.accrow.pending { border-inline-start-color: var(--red); }
.accrow.granted { border-inline-start-color: var(--green); }
.accrow.denied { border-inline-start-color: var(--text-3); opacity: .75; }
.accrow.revoked { border-inline-start-color: var(--amber); opacity: .82; }
.accmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.accline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: var(--fs-sm); }
.accline b { font-weight: 700; }
.acccust { font-weight: 600; color: var(--accent-deep); }
.accmeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs);
align-items: center; }
.accmeta span { display: inline-flex; align-items: center; gap: 4px; }
.accmeta svg { width: 12px; height: 12px; flex: none; }
.accreason { font-size: var(--fs-xs); line-height: 1.7; color: var(--text-2);
background: var(--surface); border-radius: var(--radius-sm); padding: 7px 10px;
border: 1px solid var(--border); }
.accside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.accbadge { font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px;
border-radius: 999px; white-space: nowrap; }
.accbadge.pending { background: color-mix(in oklch, var(--red) 14%, #fff); color: #9c2f2f; }
.accbadge.granted { background: color-mix(in oklch, var(--green) 16%, #fff);
color: color-mix(in oklch, var(--green) 65%, #000); }
.accbadge.denied { background: var(--surface-sunken); color: var(--text-3); }
.accbadge.revoked { background: color-mix(in oklch, var(--amber) 15%, #fff); color: #8a5417; }
[data-theme="dark"] .accbadge.pending { background: color-mix(in oklch, var(--red) 26%, #0E1220); color: #FFB4B4; }
[data-theme="dark"] .accbadge.granted { background: color-mix(in oklch, var(--green) 26%, #0E1220); color: #9EE6BC; }
[data-theme="dark"] .accbadge.revoked { background: color-mix(in oklch, var(--amber) 25%, #0E1220); color: #FFD19A; }
/* عدّاد طلبات الإذن على جرس التنبيهات */
.icon-btn { position: relative; }
.badge-count { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 17px;
height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff;
font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
box-shadow: 0 0 0 2px var(--surface); }
.icon-btn.hasAccess { color: var(--red); }
/* شريط تنبيه بارز فوق الشاشة حين تنتظر طلبات قرارك */
.accessbar { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
background: color-mix(in oklch, var(--red) 10%, #fff);
border-bottom: 1px solid color-mix(in oklch, var(--red) 28%, #fff);
font-size: var(--fs-sm); font-weight: 600; color: #9c2f2f; }
.accessbar svg { width: 16px; height: 16px; flex: none; }
.accessbar .btn { margin-inline-start: auto; }
[data-theme="dark"] .accessbar { background: color-mix(in oklch, var(--red) 22%, #0E1220);
border-bottom-color: #6d2b2b; color: #FFB4B4; }
/* وسم «مُدوَّن»: محايد، لا يوحي بإرسال عبر قناة خارجية */
.chbadge.logged { background: var(--surface-2); color: var(--text-3);
border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 4px; }
.chbadge.logged svg { flex: none; }
/* شريط حفظ الصلاحيات الفردية */
.permfoot { display: flex; align-items: center; gap: 8px; margin-top: 12px;
padding-top: 12px; border-top: 1px solid var(--border); }
.permfoot .btn:disabled { cursor: default; }
.permdirty { margin-top: 8px; font-size: var(--fs-xs); color: #b46a12; font-weight: 500; }
[data-theme="dark"] .permdirty { color: #F0B45E; }
/* ── قفل العهدة وطلبات الإذن ─────────────────────────────────────────────── */
.lockbar { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
background: color-mix(in oklch, var(--amber, #d98324) 10%, #fff);
border-bottom: 1px solid color-mix(in oklch, var(--amber, #d98324) 30%, #fff);
font-size: var(--fs-sm); }
.lockbar svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: #b46a12; }
.lockbar.pending { background: var(--accent-soft); border-bottom-color: var(--accent-line); }
.lockbar.pending svg { color: var(--accent-deep); }
.lockask { display: flex; gap: 6px; margin-top: 8px; }
.lockask .input { flex: 1; height: 32px; }
[data-theme="dark"] .lockbar { background: color-mix(in oklch, #d98324 20%, #0E1220);
border-bottom-color: #6b4a15; color: var(--text); }
[data-theme="dark"] .lockbar svg { color: #F0B45E; }
[data-theme="dark"] .lockbar.pending { background: color-mix(in oklch, var(--accent) 24%, #0E1220);
border-bottom-color: var(--accent); }
.accessitem { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 11px; font-size: var(--fs-xs); border-radius: var(--radius-sm);
background: var(--surface-2); margin: 4px 6px; }
.accessbtns { display: flex; gap: 6px; flex-shrink: 0; }
/* طلبات الحسابات: اتصال · واتساب · بريد — قبل القرار لا بعده */
.accreq-contact { display: flex; gap: 4px; }
.accreq-contact .icon-btn { width: 30px; height: 30px; color: var(--text-2); }
.accreq-contact .icon-btn svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
.accrow.accreq { flex-direction: column; }
.accrow.accreq .accside { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
}
/* تنبيه العميل المتكرر في نموذج الطلب الجديد */
.dupnote { display: flex; gap: 10px; padding: 11px 13px; margin-bottom: 14px;
border-radius: var(--radius-sm); background: var(--accent-soft);
border: 1px solid var(--accent-line); font-size: var(--fs-xs); line-height: 1.7; }
.dupnote svg { width: 16px; height: 16px; color: var(--accent-deep); flex-shrink: 0; margin-top: 2px; }
.dupnote-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; color: var(--text-2); }
[data-theme="dark"] .dupnote { background: color-mix(in oklch, var(--accent) 22%, #0E1220);
border-color: var(--accent); color: var(--text); }
[data-theme="dark"] .dupnote-list { color: var(--text-2); }
/* قائمة ترشيح العملاء في شريط الفلاتر */
.custsel { height: 32px; padding: 0 10px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
max-width: 190px; }
.custsel:hover { border-color: var(--border-strong); }
.custsel:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.translbl { color: var(--text-3); font-weight: 500; flex-shrink: 0; }
.transby { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
color: var(--text-2); flex-shrink: 0; margin-inline-start: auto; }
.transby .avatar { width: 20px; height: 20px; font-size: 9px; }
.transtime { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.transdot { opacity: .5; }
[data-theme="dark"] .transfrom { color: var(--text-2); }
[data-theme="dark"] .transrow svg { color: #8E96C0; }
.transtime { margin-inline-start: auto; font-size: 11px; }
.transrow-lg { flex-wrap: nowrap; overflow-x: auto; }
.transrow-lg:hover { background: var(--surface-sunken); }
.permlist { display: flex; flex-direction: column; gap: 10px; }
.permrow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.permrow:last-child { border-bottom: 0; }
.permname { font-weight: 600; font-size: var(--fs-sm); min-width: 90px; }
.permname-click { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.permname-click:hover { color: var(--accent-deep); }
select.permdept { width: 150px; flex: 0 0 auto; min-width: 150px; }
.permchecklist { display: flex; flex-direction: column; gap: 8px; }
.permcheck { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.permcheck svg { flex-shrink: 0; color: var(--text-3); }
.permcheck.on { color: var(--text); }
.permcheck.on svg { color: var(--green); }
.permrowwrap { border-bottom: 1px solid var(--border); padding: 4px 0; }
.permrowwrap:last-child { border-bottom: 0; }
.permrowwrap .permrow { border-bottom: 0; padding: 10px 4px; flex-wrap: wrap; }
.permcustom { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 14px 44px; animation: pop .18s var(--ease-bounce); }
.permcustomrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); font-weight: 500; padding: 6px 10px; border-radius: var(--radius-sm); transition: background .12s; }
.permcustomrow:hover { background: var(--surface-2); }
.overridetag { font-size: 10px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.overdueText { color: var(--red); font-weight: 700; }
.okText { color: var(--green); font-weight: 700; }
.timerbox { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.timerbox-head { display: flex; align-items: center; justify-content: space-between; }
.durrow { display: flex; gap: 10px; }
.durrow label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.durrow input { height: 38px; text-align: center; }
.timerrun { display: flex; flex-direction: column; gap: 8px; }
.timerval { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: var(--accent-deep); }
.timerval.over { color: var(--red); font-size: 15px; }
.timerval.stopped { color: var(--text-3); }
.bar-fill.over { background: var(--red) !important; }
.permrowwrap .permrow:hover { background: var(--surface-2); border-radius: var(--radius-sm); }
.deptswitchrow { display: flex; flex-direction: column; gap: 8px; }
.quickTransferBtn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: var(--radius-sm); border: 1.5px dashed var(--accent-line); background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: all .14s; }
.quickTransferBtn:hover { background: var(--accent); color: #fff; border-style: solid; }
.td-panel { padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.td-block { display: flex; flex-direction: column; gap: 12px; }
.td-block-title { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.td-row { display: flex; flex-direction: column; gap: 6px; }
.td-row label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.td-select { appearance: none; width: 100%; height: 40px; padding: 0 34px 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 500; outline: none; cursor: pointer; transition: border-color .14s;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: left 12px center; }
[dir="ltr"] .td-select, .mainarea .td-select { background-position: left 12px center; }
.td-select:focus { border-color: var(--accent); }
.td-static { display: flex; align-items: center; min-height: 40px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text); line-height: 1.5; }
.td-seg { display: flex; gap: 6px; }
.td-seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: all .14s; }
.td-seg button .dot { width: 7px; height: 7px; border-radius: 50%; }
.td-seg button.on { color: var(--text); border-width: 2px; }
.tagsrow { display: flex; flex-wrap: wrap; gap: 7px; }
.tagchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-xs); font-weight: 600; }
.tagchip .txx { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-deep); opacity: .6; }
.attrlist { display: flex; flex-direction: column; gap: 10px; }
.attr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.attr-row span:first-child { color: var(--text-3); font-weight: 500; font-size: var(--fs-xs); }
.attr-row span:last-child { font-weight: 600; text-align: end; }
.followbox { display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.follow-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.follow-q { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.follow-q svg { width: 16px; height: 16px; color: var(--text-2); }
.toggle { position: relative; width: 42px; height: 24px; border: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .18s; }
.toggle[data-on="1"] { background: var(--accent); }
.toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-bounce); }
.toggle[data-on="1"] i { transform: translateX(-18px); }
[dir="ltr"] .toggle[data-on="1"] i { transform: translateX(18px); }
.follow-date { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.follow-date input { font: inherit; font-size: var(--fs-sm); padding: 7px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); }
/* ── Modal ────────────────────────────────────────────────────────────────*/
/* visibility مع التلاشي: النوافذ الدائمة التركيب (الاستيراد، الطلب الجديد، الحساب)
كانت شفافة فقط، فحقولها تبقى في ترتيب Tab وشجرة القارئ الصوتي وهي مخفية. التأخير
يُبقي التلاشي عند الإغلاق ثم يُخفيها كليًا. */
.modal-scrim { position: fixed; inset: 0; background: rgba(20,15,45,.42); z-index: 50; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; backdrop-filter: blur(3px); }
/* عمود الشبكة بعرض الشاشة لا بعرض النافذة: كل نافذة تحمل عرضًا ثابتًا سطريًا
(استيراد 720px)، وعمود auto يتمدد له فلا يحدّه max-width:100% — فكانت
نافذة الاستيراد على جوال 390px بعرض 720 ونصفها وأزرارها خارج الشاشة. */
.modal-scrim { grid-template-columns: minmax(0, 1fr); }
.modal-scrim.show { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .2s, visibility 0s; }
.modal { width: 560px; max-width: 100%; max-height: 86vh; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; transform: scale(.94) translateY(10px); transition: transform .25s var(--ease-bounce); }
.modal-scrim.show .modal { transform: none; }
.modal-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 14px; }
.modal-head .mh-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-accent); }
.modal-head .mh-icon svg { width: 21px; height: 21px; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-desc { font-size: var(--fs-sm); color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.modal-body { padding: 18px 22px; overflow: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); }
/* ── نافذة الإغلاق: تحذير القفل + تقييم سرعة العميل ───────────────────── */
.closewarn { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px;
border-radius: var(--radius-sm); background: color-mix(in oklch, #d98324 14%, var(--surface));
color: var(--text); font-size: var(--fs-xs); line-height: 1.6; font-weight: 500; }
.closewarn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #b8701c; }
[data-theme="dark"] .closewarn { background: color-mix(in oklch, #d98324 20%, #0E1220); }
[data-theme="dark"] .closewarn svg { color: #F0B45E; }
.speedrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.speedbtn { display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 3px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text-2); cursor: pointer; transition: all .14s; }
.speedbtn b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
/* الوصف يُلفّ في مساحة ضيقة، فحجم صغير وارتفاع سطر مضغوط ومنع القصّ */
.speedbtn span { font-size: 9.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.speedbtn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.speedbtn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.speedbtn.on b { color: var(--accent-deep); }
/* عرض التقييم بعد الإغلاق — في لوحة التفاصيل وملف العميل */
.speedtag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
font-size: var(--fs-xs); color: var(--accent-deep); background: var(--accent-soft);
border-radius: 999px; padding: 3px 10px; }
.custnote { margin-top: 6px; padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--border);
font-size: var(--fs-xs); line-height: 1.7; color: var(--text); white-space: pre-wrap; }
.import-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.import-table th { text-align: start; font-size: 11px; color: var(--text-3); font-weight: 700; padding: 0 10px 8px; }
.import-table td { padding: 9px 10px; border-top: 1px solid var(--border); }
.import-table tr:first-child td { border-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.formfield { display: flex; flex-direction: column; gap: 6px; }
.formfield > label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.formfield > label .req { color: var(--red); font-weight: 700; }
/* سطر يشرح النجمة: النجمة وحدها لا تُفهم إلا بعد رفض الحفظ */
.reqhint { grid-column: 1/-1; font-size: 11.5px; margin: -2px 0 2px; }
.reqhint .req { color: var(--red); font-weight: 700; }
.input { font: inherit; font-size: var(--fs-sm); color: var(--text); height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface); outline: none; transition: border-color .14s; width: 100%; }
textarea.input { height: auto; min-height: 76px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.invalid { border-color: var(--red); }
.deptchoice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deptcard { appearance: none; cursor: pointer; text-align: start; border: 2px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 13px 14px; display: flex; align-items: center; gap: 11px; transition: all .15s; }
.deptcard:hover { border-color: var(--border-strong); background: var(--surface-2); }
.deptcard.on { border-color: var(--accent); background: var(--accent-soft); }
.deptcard .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.deptcard .tx { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.deptcard .tx b { font-size: var(--fs-sm); font-weight: 700; }
.deptcard .tx span { font-size: var(--fs-xs); color: var(--text-3); }
.deptcard .tick { margin-inline-start: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; }
.deptcard.on .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.deptcard.on .tick svg { width: 13px; height: 13px; }
.deptcard:not(.on) .tick svg { display: none; }
.seg { display: flex; gap: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.seg button { appearance: none; border: 0; cursor: pointer; background: var(--surface); color: var(--text-2); padding: 9px 14px; font: inherit; font-size: var(--fs-xs); font-weight: 600; border-inline-start: 1px solid var(--border); }
.seg button:first-child { border-inline-start: 0; }
.seg button.on { background: var(--accent); color: #fff; }
.assignrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { appearance: none; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; transition: all .14s; }
.pick:hover { border-color: var(--border-strong); }
.pick.on { color: var(--text); border-width: 2px; }
.form-toast { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--green) 14%, var(--bg)); border: 1.5px solid color-mix(in oklch, var(--green) 40%, var(--bg)); color: color-mix(in oklch, var(--green) 70%, #000); font-size: var(--fs-sm); font-weight: 600; }
[data-theme="dark"] .form-toast { color: color-mix(in oklch, var(--green) 45%, #fff); }
.form-toast svg { width: 17px; height: 17px; flex-shrink: 0; }
.empty { display: grid; place-items: center; padding: 80px 20px; text-align: center; }
.empty-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
.empty-icon { width: 56px; height: 56px; border-radius: var(--radius); background: var(--accent-soft); display: grid; place-items: center; color: var(--accent-deep); }
.empty-icon svg { width: 26px; height: 26px; }
.empty-title { font-weight: 700; font-size: 15px; }
.empty-desc { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.pop { animation: pop .25s var(--ease-bounce); }
.assign { position: relative; display: inline-flex; }
.assign-trigger { appearance: none; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 8px 0 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); transition: all .12s; }
.assign-trigger:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.assign-trigger .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-trigger .chev { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
.assign-trigger.empty { color: var(--accent-deep); border-color: var(--accent-line); border-style: dashed; background: var(--accent-soft); }
.assign-trigger.empty svg { color: inherit; }
.assign-trigger .lead { width: 14px; height: 14px; flex-shrink: 0; }
.assign-backdrop { position: fixed; inset: 0; z-index: 59; }
.assign-menu { position: fixed; z-index: 60; width: 244px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 1px; animation: pop .14s var(--ease-bounce); max-height: 340px; overflow: auto; }
.assign-grouplbl { font-size: 10.5px; font-weight: 700; color: var(--text-3); letter-spacing: .03em; padding: 9px 8px 4px; display: flex; align-items: center; gap: 6px; }
.assign-grouplbl .sq { width: 7px; height: 7px; border-radius: 2px; }
.assign-opt { appearance: none; border: 0; background: transparent; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 9px; text-align: start; padding: 8px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
.assign-opt:hover { background: var(--surface-2); }
.assign-opt.on { background: var(--accent-soft); }
/* الأيقونة الأمامية لم يكن لها حجم محدّد، فكانت تتمدد إلى حجم ضخم وتزاحم
النص حتى يلتفّ على عدة أسطر. */
.assign-opt > svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.assign-opt { white-space: nowrap; }
.assign-opt .nm { overflow: hidden; text-overflow: ellipsis; }
.assign-opt .check { margin-inline-start: auto; color: var(--accent); display: flex; }
.assign-opt .check svg { width: 16px; height: 16px; }
.assign-opt.clear > svg { opacity: 1; }
.assign-divider { height: 1px; background: var(--border); margin: 5px 4px; }
.assign-opt.clear { color: var(--red); }
*,*::before,*::after{transition-timing-function:cubic-bezier(.32,.72,.34,1)}
.mainarea > main.main{animation:viewFade .32s cubic-bezier(.32,.72,.34,1)}
@keyframes viewFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card,.reqtable tbody tr,.inbox-item{animation:riseIn .32s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rail-btn,.deptTab,.chip,.btn,.icon-btn,.pick,.tagchip,.assign-trigger{transition:all .18s cubic-bezier(.32,.72,.34,1)}
.rail-btn:active,.btn:active,.icon-btn:active{transform:scale(.94)}
.statcard,.statpanel{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.statcard:hover,.statpanel:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.modal{transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .22s}
.drawer{transition:transform .4s cubic-bezier(.32,.72,.34,1)}
/* flex مع margin:auto لا grid يتوسّط: نموذج طلب الحساب أطول من شاشة جوال
أو حاسوب قصير، والتوسيط بـplace-items يقصّ أعلى البطاقة بلا تمرير يصله. */
.loginwrap{position:fixed;inset:0;display:flex;overflow-y:auto;background:var(--bg);z-index:100;padding:24px 0}
.loginwrap > :not(.bg-watermark){margin:auto}
/* البطاقة مثبّتة من أعلاها لا موسّطة: طولها يتغيّر بين اللوحات، والتوسيط كان
يحرّكها كلها (والشعار معها) صعودًا ونزولًا في كل إطار من الانتقال. */
/* align-self:flex-start: بدونها تمتدّ البطاقة (stretch) بطول الشاشة لا بطول
محتواها، فيُقصّ زر «إرسال الطلب» على حاسوب 768px ولا يصله التمرير. */
.loginwrap > .loginbox{margin:clamp(12px, calc(50vh - 290px), 20vh) auto 24px;align-self:flex-start}
.loginbox{position:relative;z-index:1;width:380px;max-width:92vw;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px 28px;display:flex;flex-direction:column;align-items:center;gap:6px}
.login-logo{height:52px;width:auto;border-radius:8px;margin-bottom:10px}
/* ── شاشة الاستيراد: ربط الأعمدة والمدة ─────────────────────────────────── */
/* ── حقل كلمة المرور: إظهار ما يُكتب + توليد + نسخ ──────────────────────── */
.passrow{display:flex;align-items:center;gap:6px}
.passrow .input{flex:1;min-width:0}
.passrow .icon-btn{flex:none;width:32px;height:32px}
.passreveal{display:flex;align-items:center;gap:8px}
.passreveal b{font-size:var(--fs-base);letter-spacing:.04em;
background:var(--accent-soft);border:1px solid var(--accent-line);
border-radius:var(--radius-sm);padding:3px 9px;user-select:all}
.passnote{font-size:var(--fs-xs);color:var(--text-3);line-height:1.6;
margin-top:6px;padding:7px 10px;border-radius:var(--radius-sm);
background:color-mix(in oklch, var(--accent) 7%, var(--bg));
border:1px solid var(--accent-line)}
.headerchk{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);
color:var(--text-2);cursor:pointer;margin:8px 0 2px}
.headerchk input{width:15px;height:15px;accent-color:var(--accent);flex:none}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.mapgrid .formfield label{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:4px;display:block}
.importrange{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.importrange .formfield label{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:4px;display:block}
.importrange .input{width:100%;height:34px;text-align:start}
.importrange-hint{grid-column:1/-1;font-size:var(--fs-xs);line-height:1.6}
.importrange .dr-presets{grid-column:1/-1}
/* زر بمظهر نص: موضوع الطلب واسم العميل في الجدول يصلهما Tab ويُفتحان بـEnter */
.linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:start;
cursor:pointer;display:block;max-width:100%;letter-spacing:inherit}
.cell-subject .linklike.sub{width:100%}
.linklike:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* اسم العميل قابل للنقر لفتح ملفه */
.nm-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.nm-link:hover{color:var(--accent-deep);text-decoration-color:var(--accent)}
/* ── منتقي مدة سحب البيانات ─────────────────────────────────────────────── */
.daterange-menu{width:310px;padding:10px;max-height:none}
.dr-field{padding:6px 8px 8px}
.dr-field label{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-bottom:4px}
.dr-field .input{width:100%;height:32px;text-align:start}
.dr-hint{font-size:var(--fs-xs);margin-top:5px;line-height:1.5}
.dr-months{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
.dr-months .td-select{flex:1;min-width:0}
.dr-presets{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px 4px}
.dr-presets .btn{flex:1 1 46%}
.btn.on{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft)}
.report-range{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px}
.bootspin{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--border-strong);border-top-color:var(--accent);animation:bootspin .7s linear infinite;position:relative;z-index:1}
@keyframes bootspin{to{transform:rotate(360deg)}}
/* ── الشاشة الرئيسية: نظرة العملاء ──────────────────────────────────────── */
.home{padding:20px 22px 32px;display:flex;flex-direction:column;gap:16px;height:100%;overflow:auto}
.home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.home-title h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.02em}
.home-sub{font-size:var(--fs-xs);margin-top:4px}
.home-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.home-select{appearance:none;font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);
background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);
padding:8px 14px;cursor:pointer}
.home-select:hover{border-color:var(--accent-line);color:var(--text)}
.oppchip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:600;
color:var(--accent-deep);background:var(--accent-soft);border:1px solid var(--accent-line);
border-radius:var(--radius-pill);padding:7px 13px}
.oppchip svg{width:14px;height:14px}
.oppchip b{font-variant-numeric:tabular-nums}
.oppchip em{font-style:normal;font-size:10.5px;font-weight:600;opacity:.75;
font-variant-numeric:tabular-nums;padding-inline-start:2px}
.homegrid{display:grid;gap:14px;grid-template-columns:1.05fr 1fr 1.55fr;
grid-template-areas:
"total goal map"
"total forecast map"
"calls status map"
"top freq map";}
.hc-total{grid-area:total}.hc-goal{grid-area:goal}.hc-forecast{grid-area:forecast}
.hc-calls{grid-area:calls}.hc-status{grid-area:status}.hc-csat{grid-area:top}
.hc-priority{grid-area:freq}.hc-map{grid-area:map}
@media (max-width:1180px){
.homegrid{grid-template-columns:1fr 1fr;
grid-template-areas:"total goal" "total forecast" "map map" "calls status" "top freq";}
}
@media (max-width:720px){
.homegrid{grid-template-columns:1fr;
grid-template-areas:"total" "goal" "forecast" "map" "status" "freq" "top" "calls";}
}
.hcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:15px 17px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);
min-width:0;transition:transform .2s var(--ease-bounce),box-shadow .2s}
.hcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.hc-f{font-size:11.5px;line-height:1.5;margin-top:auto}
.bignum{font-size:52px;font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--text)}
@media (max-width:1180px){.bignum{font-size:42px}}
/* المدد نصّ لا رقم مفرد: «9س 22د» بعرض أربعة أضعاف «57»، فالحجم نفسه يطغى
على البطاقة. مقاس أصغر لها وحدها، وبقية الأرقام كما هي. */
.bignum.bignum-dur{font-size:30px;letter-spacing:-.02em}
@media (max-width:1180px){.bignum.bignum-dur{font-size:26px}}
/* رقم بإشارة داخل نص عربي: «-» و«+» محايدتان في خوارزمية الاتجاه الثنائي،
فتأخذان اتجاه الفقرة (RTL) وتُدفعان إلى أقصى اليمين بعد علامة النسبة —
فيُرسم «-7.1%» على الشاشة «7.1%-»، إشارةٌ منفصلة عن رقمها تُقرأ شرطةً
لا سالبًا. العزل يجعل «الإشارة+الرقم+%» وحدة LTR واحدة لا تتفكّك. */
.signed{direction:ltr;unicode-bidi:isolate}
.delta-chip{display:inline-flex;align-items:center;gap:5px;width:fit-content;
font-size:var(--fs-xs);font-weight:700;padding:4px 10px;border-radius:var(--radius-pill);
font-variant-numeric:tabular-nums}
.delta-chip svg{width:13px;height:13px}
.delta-chip.up{color:#0d7a4f;background:color-mix(in oklch,var(--green) 14%,var(--surface))}
.delta-chip.down{color:var(--red);background:color-mix(in oklch,var(--red) 12%,var(--surface))}
.delta-chip.flat{color:var(--text-3);background:color-mix(in oklch,var(--text-3) 12%,var(--surface))}
[data-theme="dark"] .delta-chip.up{color:#5fe0aa}
[data-theme="dark"] .delta-chip.down{color:#ff9d92}
.spark{width:100%;height:46px;overflow:visible}
.spark-area{fill:color-mix(in oklch,var(--accent) 12%,transparent);stroke:none}
.spark-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
vector-effect:non-scaling-stroke}
.spark-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.nodata{display:flex;align-items:center;gap:11px;padding:14px 12px;border-radius:var(--radius-sm);
background:var(--surface-2);border:1px dashed var(--border-strong);min-height:74px}
.nodata svg{width:20px;height:20px;color:var(--text-3);flex:none}
.nodata-t{font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.nodata-h{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:2px}
[data-theme="light"] .nodata-h{color:color-mix(in oklch, var(--text-3) 85%, #000)}
.goalbox{display:flex;align-items:center;gap:14px}
.gauge{width:112px;height:68px;flex:none}
.gauge-bg{fill:none;stroke:var(--surface-sunken);stroke-width:11;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;
transition:stroke-dasharray .5s var(--ease)}
.goal-c{display:flex;flex-direction:column;gap:2px}
.goal-c b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.goal-c span{font-size:var(--fs-xs)}
.fc-row{display:flex;align-items:center;gap:10px}
.fc-row svg{width:20px;height:20px;color:var(--green)}
.fc-row b{font-size:32px;font-weight:700;letter-spacing:-.03em}
.segbar{display:flex;height:11px;border-radius:999px;overflow:hidden;background:var(--surface-2);gap:2px}
.segbar .seg-empty{flex:1;background:var(--surface-sunken)}
.segbar > div{transition:width .45s var(--ease)}
.seg-active{background:var(--accent)}
.seg-fresh{background:var(--accent-2)}
.seg-risk{background:#E08A2E}
/* سرعة الاستجابة: أخضر ← برتقالي ← أحمر. الترتيب معنويّ لا زخرفي —
الأخضر «خلال ساعة» والأحمر «تأخّر»، فيُقرأ الشريط بلا رجوع للمفتاح. */
.seg-ok{background:var(--green)}
.seg-warn{background:#E08A2E}
.seg-bad{background:var(--red)}
/* ألوان الأولوية: تطابق شارة الأولوية (Pri) في الجدول واللوحة، فلا يظهر
«عادي» بلون هنا ولون مختلف هناك. */
.seg-high{background:var(--red)}
.seg-normal{background:var(--accent-2)}
.seg-low{background:var(--green)}
/* تنبيه الطلبات غير المستلمة — يظهر فقط حين يوجد ما يستحق التصرّف */
.respalert{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:8px 10px;
border-radius:var(--radius-sm);font-size:11.5px;line-height:1.6;font-weight:500;
background:color-mix(in oklch,var(--red) 10%,var(--surface));color:var(--text)}
.respalert svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--red)}
.respalert b{font-variant-numeric:tabular-nums}
[data-theme="dark"] .respalert{background:color-mix(in oklch,var(--red) 20%,#0E1220)}
[data-theme="dark"] .respalert svg{color:#FF9D92}
.seglegend{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.segitem{display:flex;flex-direction:column;gap:3px;font-size:11.5px;cursor:help}
.segitem-h{display:flex;align-items:center;gap:5px;color:var(--text-3);font-weight:600;white-space:nowrap}
.segitem b{font-size:15px;font-weight:700}
.segdot{width:7px;height:7px;border-radius:50%;flex:none}
.rankrow{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);min-width:0}
.rank-badge{width:23px;height:23px;border-radius:7px;background:var(--accent-soft);color:var(--accent-deep);
display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.rank-lbl{font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
flex:0 1 auto;min-width:0;max-width:130px}
.rank-track{flex:1;min-width:24px;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.rank-track i{display:block;height:100%;border-radius:999px;background:var(--accent);
transition:width .45s var(--ease-bounce)}
.rank-val{margin-inline-start:auto;font-weight:700;white-space:nowrap;display:flex;align-items:baseline;gap:3px}
.rank-val em{font-style:normal;font-size:9.5px;color:var(--text-3);font-weight:600}
.rank-sub{color:var(--text-3);flex:none}
/* البطاقة تُجبَر طويلة لأنها تمتد أربعة صفوف في homegrid (راجع hc-map)،
لكن الخريطة وحدها تحسب ارتفاعها من عرضها (height:auto) فتتوقف عند
ارتفاعها الطبيعي وتترك الباقي فراغًا أسفل البطاقة. flex:1 هنا يمدّد
الشبكة لتملأ الطول الموروث، وstretch+height:100% أدناه يمدّان الخريطة
والقائمة معها بدل أن يبقيا في زاوية والبطاقة الطويلة فارغة حولهما. */
.regionmap-grid{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:stretch;min-height:0;flex:1}
@media (max-width:900px){.regionmap-grid{grid-template-columns:1fr}}
.mapwrap{position:relative;min-width:0;display:flex;flex-direction:column}
.samap{width:100%;flex:1;min-height:0;display:block;overflow:visible}
.samap .reg{fill:var(--map-0);stroke:var(--surface);stroke-width:1.6;stroke-linejoin:round;
fill-rule:evenodd;cursor:pointer;transition:fill .2s,filter .2s}
.samap .reg.step-1{fill:var(--map-1)}
.samap .reg.step-2{fill:var(--map-2)}
.samap .reg.step-3{fill:var(--map-3)}
.samap .reg.step-4{fill:var(--map-4)}
.samap .reg.step-5{fill:var(--map-5)}
.samap .reg:hover{filter:brightness(1.08)}
.samap .reg.on{stroke:var(--accent-deep);stroke-width:2.6}
.samap .regdot{fill:var(--surface);opacity:.85;pointer-events:none}
.maptip{position:absolute;top:8px;inset-inline-start:8px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
padding:7px 11px;display:flex;flex-direction:column;gap:1px;pointer-events:none}
.maptip b{font-size:var(--fs-xs);font-weight:700}
.maptip span{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.maplegend{display:flex;align-items:flex-start;gap:3px;font-size:10.5px;color:var(--text-3);margin-top:6px}
/* كل درجة فوق حدّها الأعلى: الرقم محاذٍ لنهاية المربّع لا لوسطه، فيُقرأ
«حتى هذا العدد» لا «هذا العدد». والأرقام جدولية فلا يرقص العرض. */
.maplegend .lg-cell{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.maplegend .lg-cell em{font-style:normal;font-variant-numeric:tabular-nums;font-size:9.5px;line-height:1}
.maplegend .lg-unit{align-self:center;margin-inline-start:5px;font-weight:600}
.maplegend .lg{width:22px;height:9px;border-radius:2px}
.maplegend .lg.step-0{background:var(--map-0);border:1px solid var(--border)}
.maplegend .lg.step-1{background:var(--map-1)}
.maplegend .lg.step-2{background:var(--map-2)}
.maplegend .lg.step-3{background:var(--map-3)}
.maplegend .lg.step-4{background:var(--map-4)}
.maplegend .lg.step-5{background:var(--map-5)}
.mapcredit{font-size:9.5px;margin-top:3px}
.maprank{display:flex;flex-direction:column;gap:10px;min-width:0;justify-content:center}
.map-note{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5;color:var(--text-2)}
.map-note svg{width:13px;height:13px;color:var(--green);flex:none}
.kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{appearance:none;text-align:start;font:inherit;background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px;
box-shadow:var(--shadow-sm);color:inherit}
button.kpi{cursor:pointer}
button.kpi:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.kpi-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep);
display:grid;place-items:center;flex:none}
.kpi-ic svg{width:19px;height:19px}
.kpi-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-b em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3);font-weight:600}
.kpi-b b{font-size:23px;font-weight:700;letter-spacing:-.02em}
.kpi.warn .kpi-ic{background:color-mix(in oklch,#E08A2E 16%,var(--surface));color:#B96C10}
[data-theme="dark"] .kpi.warn .kpi-ic{color:#F0A94E}
.kpi-go{width:15px;height:15px;color:var(--text-3);margin-inline-start:auto;flex:none;
opacity:0;transform:translateX(4px);transition:opacity .18s,transform .18s}
button.kpi:hover .kpi-go,button.kpi:focus-visible .kpi-go{opacity:1;transform:none}
/* قائمة العملاء خلف بطاقة المؤشر */
.kpilist{display:flex;flex-direction:column;gap:6px;max-height:min(60vh,460px);overflow:auto}
.kpilist-row{appearance:none;border:1px solid transparent;background:transparent;cursor:pointer;
font:inherit;color:inherit;text-align:start;display:flex;align-items:center;gap:11px;
padding:9px 10px;border-radius:var(--radius-sm);width:100%;min-width:0}
.kpilist-row:hover{background:var(--surface-2);border-color:var(--border)}
.kl-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.kl-main b{font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-main em{font-style:normal;font-size:11.5px;color:var(--text-3);letter-spacing:-.02em}
.kl-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none}
.kl-meta i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--text-2);
background:var(--surface-2);border-radius:var(--radius-pill);padding:3px 9px;white-space:nowrap}
.kl-meta .kl-amt{color:var(--accent-deep);background:var(--accent-soft)}
/* سبب ظهور الصف: يقول ما يُفعل، فيبقى ظاهرًا على الشاشات الضيقة */
.kl-meta .kl-why{color:#b8701c;background:color-mix(in oklch,#d98324 14%,var(--surface))}
[data-theme="dark"] .kl-meta .kl-why{color:#F0B45E;background:color-mix(in oklch,#d98324 22%,#0E1220)}
.kl-when{font-size:10.5px;flex:none;white-space:nowrap;min-width:52px;text-align:end}
@media (max-width:620px){.kl-meta i:not(.kl-amt):not(.kl-why){display:none}.kl-when{display:none}}
/* ── بوابة دورة التواصل ─────────────────────────────────────────────────── */
.claimgate{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--radius-sm);
background:var(--accent-soft);border:1px solid var(--accent-line);margin-bottom:14px}
.claimgate > svg{width:20px;height:20px;color:var(--accent-deep);flex:none}
.cg-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cg-text b{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.cg-text span{font-size:11.5px;color:var(--text-2);line-height:1.5}
.claimgate .btn{flex:none}
.claimgate.open{background:color-mix(in oklch,var(--green) 10%,var(--surface));
border-color:color-mix(in oklch,var(--green) 32%,var(--surface))}
.claimgate.open > svg{color:#0d7a4f}
.claimgate.other{background:var(--surface-2);border-color:var(--border-strong)}
.claimgate.other > svg{color:var(--text-3)}
.claimgate.closed{background:var(--surface-2);border-color:var(--border-strong)}
.claimgate.closed > svg{color:var(--text-3)}
.claimgate.closed.locked{border-style:dashed}
[data-theme="dark"] .claimgate.open > svg{color:#5fe0aa}
/* تفاصيل مقفلة قبل التولّي */
.lockednote{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;
border-radius:var(--radius-sm);background:var(--surface-2);
border:1px dashed var(--border-strong);margin:0 0 14px;max-width:420px}
.lockednote > svg{width:19px;height:19px;color:var(--text-3);flex:none;margin-top:1px}
.lockednote b{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.lockednote span{display:block;font-size:11.5px;color:var(--text-3);line-height:1.6;margin-top:3px}
/* ── حسابات معطَّلة في شاشة الصلاحيات ───────────────────────────────────── */
.perm-sep{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
margin:16px 0 2px;padding-top:12px;border-top:1px dashed var(--border-strong)}
.perm-sep > span{font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.perm-sep em{font-style:normal;font-size:11px}
.permrowwrap.off{opacity:.62}
.permrowwrap.off:hover{opacity:.85}
.offtag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);
color:var(--red);background:color-mix(in oklch,var(--red) 12%,var(--surface));
border:1px solid color-mix(in oklch,var(--red) 28%,var(--surface));white-space:nowrap;flex:none}
[data-theme="dark"] .offtag{color:#FF9D92;background:#3A2230;border-color:#5A3040}
.permrowwrap.off .td-seg button[disabled],.permrowwrap.off .btn[disabled],
.permrowwrap.off .td-select[disabled]{cursor:not-allowed}
.login-title{font-size:19px;font-weight:700}
.login-sub{font-size:var(--fs-sm);margin-bottom:18px;text-align:center}
.loginform{width:100%;display:flex;flex-direction:column;gap:14px}
.login-err{font-size:var(--fs-xs);font-weight:600;color:var(--red);text-align:center}
.login-hint{font-size:11px;text-align:center;margin-top:16px;line-height:1.6}
/* ── شاشة الدخول: لوحات تنزلق داخل بطاقة واحدة ───────────────────────────
راجع AuthStage في shared.jsx. اللوحتان (المغادرة والداخلة) في خلية شبكة
واحدة فوق بعض، والبطاقة يُحرَّك ارتفاعها بينهما من جافاسكربت.
--auth-dir: اتجاه «الأمام» — يسار في العربية، يمين في الإنجليزية، مثل
.toggle أعلاه. */
/* الوهج بقعتان تُزاحان بـtransform (على كرت الشاشة) — كان background-position
يعيد رسم خلفية البطاقة كاملة في كل إطار. البطاقة تقصّ ما يخرج منهما. */
.loginbox{overflow:hidden;overflow:clip}
.loginbox::before,.loginbox::after{content:'';position:absolute;top:-110px;left:11%;width:78%;height:220px;border-radius:50%;
pointer-events:none;z-index:-1;transition:transform .8s var(--ease),opacity .6s var(--ease)}
/* وهج خافت أعلى البطاقة ينتقل مع عمق اللوحة — إشارة مكانية ثانية بجانب
الانزلاق، ويصير أخضر في لوحتي التأكيد. */
.loginbox::before{background:radial-gradient(closest-side,var(--accent-soft),transparent)}
.loginbox::after{background:radial-gradient(closest-side,color-mix(in oklch,var(--green) 16%,transparent),transparent);opacity:0}
.loginbox[data-depth="1"]::before{transform:translateX(-36%)}
[dir="ltr"] .loginbox[data-depth="1"]::before{transform:translateX(36%)}
.loginbox[data-depth="2"]::before{opacity:0}
.loginbox[data-depth="2"]::after{opacity:1}
.authstage{--auth-dir:-1;width:calc(100% + 20px);margin-inline:-10px;padding-inline:10px;display:grid;transition:height .46s var(--ease)}
[dir="ltr"] .authstage{--auth-dir:1}
/* clip لا hidden وحدها: hidden تجعل الحاوية قابلة للتمرير برمجيًا، وتركيز حقل
في منتصف انزلاقه كان يزيحها أفقيًا. */
.authstage.swapping{overflow:hidden;overflow:clip}
.authpanel{grid-area:1/1;align-self:start;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.authpanel.in{animation:authIn .5s var(--ease) backwards}
.authpanel.in.back{animation-name:authInBack}
.authpanel.first{animation:none}
/* لوحة عادت قبل أن تغادر كليًا: AuthStage يكملها من شكلها الحالي، فلا تعيد
عناصرها الظهور من الصفر. */
.authpanel.reenter .rise{animation:none}
/* الشفافية تسبق الإزاحة: كانت اللوحتان تظهران معًا بنحو 80% لحظة، نصّان
فوق بعض، والمغادرة شبه معتمة حين يقصّها حدّ البطاقة المنكمشة. */
.authpanel.out{pointer-events:none;animation:authOut .3s cubic-bezier(.5,0,.75,0) forwards,authFadeOut .16s linear forwards}
.authpanel.in:not(.first){animation-delay:70ms}
@keyframes authFadeOut{to{opacity:0}}
.authpanel.out.back{animation-name:authOutBack,authFadeOut}
/* بلا filter:blur — كان يعيد رسم اللوحتين كاملتين في كل إطار (7 أضعاف وقت
الرسم في القياس)، والشفافية والإزاحة وحدهما تعملان على كرت الشاشة. */
@keyframes authIn{from{opacity:0;transform:translateX(calc(var(--auth-dir) * 40px)) scale(.985)}}
@keyframes authInBack{from{opacity:0;transform:translateX(calc(var(--auth-dir) * -40px)) scale(.985)}}
@keyframes authOut{to{opacity:0;transform:translateX(calc(var(--auth-dir) * -32px)) scale(.985)}}
@keyframes authOutBack{to{opacity:0;transform:translateX(calc(var(--auth-dir) * 32px)) scale(.985)}}
/* تتابع العناصر: backwards لا both — بعد انتهاء الحركة يعود للأزرار
:hover و:active حقّهما في transform. */
.authpanel.in .rise{animation:authRise .48s var(--ease) backwards;animation-delay:calc(var(--i,0) * 38ms + 70ms)}
.authpanel.first .rise{animation-delay:calc(var(--i,0) * 38ms + 150ms)}
@keyframes authRise{from{opacity:0;transform:translateY(10px)}}
/* لم يكن للروابط لون: لون المتصفح الافتراضي أزرق فاقع لا يُقرأ في الداكن. */
.login-link{color:var(--accent-deep);font-weight:600;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:5px;border-radius:6px}
.login-link:hover{text-decoration:underline;text-underline-offset:3px}
.login-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.login-link-arr{width:13px;height:13px;transform:scaleX(-1)}
[dir="ltr"] .login-link-arr{transform:none}
.auth-or{width:100%;display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:11px;font-weight:600;color:var(--text-2)}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-alt{appearance:none;cursor:pointer;width:100%;display:flex;align-items:center;gap:11px;text-align:start;font:inherit;color:var(--text);
padding:10px 12px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--surface-2);
transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.auth-alt:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.auth-alt:active{transform:scale(.98)}
.auth-alt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-alt-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface);color:var(--accent-deep);box-shadow:inset 0 0 0 1px var(--border)}
.auth-alt-ic svg{width:19px;height:19px}
.auth-alt-tx{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.35}
.auth-alt-tx b{font-size:var(--fs-sm);font-weight:700}
.auth-alt-tx span{font-size:11.5px;color:var(--text-2)}
.auth-alt-arr{width:17px;height:17px;margin-inline-start:auto;flex:none;color:var(--accent-deep);transition:transform .25s var(--ease-bounce)}
.auth-alt:hover .auth-alt-arr{transform:translateX(-4px)}
[dir="ltr"] .auth-alt-arr{transform:scaleX(-1)}
[dir="ltr"] .auth-alt:hover .auth-alt-arr{transform:scaleX(-1) translateX(-4px)}
.auth-fieldhint{font-size:11px;margin-top:-1px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.field-err{font-size:11px;font-weight:600;color:var(--red)}
/* عنوان لوحة التأكيد h2 يأخذ التركيز ليُقرأ لقارئ الشاشة — بلا إطار تركيز
بالفأرة، وبإطار واضح للوحة المفاتيح. */
.auth-status{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
h2.login-title{margin:0;border-radius:6px}
h2.login-title:focus{outline:none}
h2.login-title:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.auth-deptset{border:0;padding:0;margin:0;min-width:0}
.auth-deptset > legend{padding:0;margin-bottom:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:5px}
.auth-deptset > legend .req{color:var(--red);font-weight:700}
/* الحقل و@النطاق كتلة واحدة: إطار واحد يلتفّ حولهما، والتركيز يُضيء الكتلة. */
.auth-emailrow{display:flex;align-items:stretch;width:100%;border-radius:var(--radius-sm)}
.auth-emailrow .input{flex:1;min-width:0;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}
.auth-emaildomain{display:flex;align-items:center;flex:none;padding:0 10px;white-space:nowrap;font-size:var(--fs-xs);font-weight:500;color:var(--text-2);
background:var(--surface-2);border:1.5px solid var(--border-strong);border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm);
transition:border-color .14s}
.auth-emailrow:focus-within .auth-emaildomain{border-color:var(--accent)}
.auth-emailrow:focus-within{box-shadow:0 0 0 3px var(--accent-soft)}
.auth-emailrow .input:focus{box-shadow:none}
.auth-emailrow.invalid .input,.auth-emailrow.invalid .auth-emaildomain{border-color:var(--red)}
.loginform textarea.auth-note{min-height:62px}
.auth-depts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-dept{appearance:none;cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);height:40px;padding:0 10px;
display:flex;align-items:center;gap:8px;border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);background:var(--surface);
transition:border-color .15s,background .15s,color .15s}
.auth-dept:hover{border-color:var(--accent-line)}
.auth-depts.invalid .auth-dept{border-color:var(--red)}
.auth-dept .dot{width:9px;height:9px;border-radius:3px;flex:none;background:oklch(.6 .09 var(--hue))}
.auth-dept .tick{margin-inline-start:auto;width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--border-strong);transition:background .2s,border-color .2s}
.auth-dept .tick svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s var(--ease-bounce)}
.auth-dept.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.auth-dept.on .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.auth-dept.on .tick svg{opacity:1;transform:none}
/* تركيز لوحة المفاتيح على الراديو المخفي يظهر على البطاقة كلها — كان هالة
بلون خلفية البطاقة المختارة نفسه فلا يُرى. */
.auth-dept:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.auth-badge{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:2px 0 8px;color:var(--accent-deep);background:var(--accent-soft)}
.auth-badge > svg{width:26px;height:26px}
.auth-badge::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-line);animation:authRing 1.8s var(--ease) .45s 2 both}
@keyframes authRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
.auth-badge.ok{color:var(--green);background:color-mix(in oklch,var(--green) 14%,var(--surface))}
.auth-badge.ok::after{border-color:color-mix(in oklch,var(--green) 45%,transparent)}
.auth-badge > svg.auth-check{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* الدائرة ثم علامة الصح ترسمان نفسيهما — 145 محيط الدائرة r=23، و32 طول
المسار تقريبًا. */
.auth-check circle{stroke-width:2.4;opacity:.4;stroke-dasharray:145;stroke-dashoffset:145;animation:authDraw .6s var(--ease) .15s forwards}
.auth-check path{stroke-dasharray:32;stroke-dashoffset:32;animation:authDraw .42s var(--ease) .6s forwards}
@keyframes authDraw{to{stroke-dashoffset:0}}
.auth-summary{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 0 2px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}
.auth-summary-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.auth-summary-tx b{font-size:var(--fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* البريد يُعرض داخل لا span — بلا القصّ كان الطويل منه يغطّي وسم القسم أو الصورة. */
.auth-summary-tx span,.auth-summary-tx bdi{display:block;align-self:flex-start;max-width:100%;font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-steps{list-style:none;margin:12px 0 14px;padding:0;width:100%;display:flex;flex-direction:column}
.auth-steps li{position:relative;display:flex;gap:11px;align-items:flex-start;padding-bottom:12px}
.auth-steps li:last-child{padding-bottom:0}
.auth-steps li:not(:last-child)::before{content:'';position:absolute;inset-inline-start:13px;top:30px;bottom:3px;width:2px;border-radius:2px;background:var(--border)}
.auth-steps li.done::before{background:color-mix(in oklch,var(--green) 55%,var(--border))}
.auth-steps .st-ic{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface-2);color:var(--text-3);border:1.5px solid var(--border)}
.auth-steps .st-ic svg{width:14px;height:14px}
.auth-steps li.done .st-ic{background:color-mix(in oklch,var(--green) 72%,#000);border-color:transparent;color:#fff}
.auth-steps li.now .st-ic{position:relative;background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
/* النبض حلقة تكبر وتخفت (transform/opacity) لا box-shadow متحرّك — ذاك يعيد
الرسم بلا توقف ما دامت اللوحة ظاهرة. */
.auth-steps li.now .st-ic::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent-line);animation:authPulse 2.2s var(--ease) 1s infinite}
@keyframes authPulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.6);opacity:0}}
.auth-steps .st-tx{display:flex;flex-direction:column;gap:1px;line-height:1.4;padding-top:3px;text-align:start;min-width:0}
.auth-steps .st-tx b{font-size:var(--fs-sm);font-weight:700}
.auth-steps .st-tx span{font-size:11.5px;color:var(--text-2)}
.auth-wide{width:100%}
@media (max-width: 480px){
.loginwrap{padding:12px 0}
.loginbox{padding:26px 18px}
/* على الجوال نموذج الطلب أطول من الشاشة أصلًا: فراغ علوي كبير يدفعه لأسفل
بلا فائدة، فالتثبيت العلوي أقرب لحافة الشاشة. */
.loginwrap > .loginbox{margin-top:clamp(12px, calc(50vh - 340px), 10vh)}
.auth-emaildomain{padding:0 8px;font-size:11.5px}
}
/* من طلب من نظامه تقليل الحركة: اللوحات تتبدّل فورًا (AuthStage لا يُبقي
المغادرة أصلًا) وكل حركة داخل الشاشة تنتهي لحظيًا — تبقى نتيجتها لا
مسارها، فعلامة الصح مرسومة كاملة. */
@media (prefers-reduced-motion: reduce){
.loginbox,.loginbox *,.loginbox *::before,.loginbox *::after{animation-duration:.01ms!important;animation-delay:0s!important;
animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ══ الجوال (≤768px) ══════════════════════════════════════════════════════
الموقع مبني لشاشة مكتب: شريط الأيقونات 72px مع بريد أصغر أعمدته 620px
يعني 692px حدًّا أدنى، والجوال 390px — فكان يفيض أفقيًا فلا يُقرأ ولا
يُضغط. كل ما دون هذا السطر داخل الاستعلام وحده، فشاشة المكتب كما هي.
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */
/* الإخفاء خارج الاستعلام يُخرج الزر من الشبكة تمامًا، فلا يُحتسب عمودًا
رابعًا في .inbox ولا ثالثًا في .teamview على المكتب. */
.mobile-back { display: none; }
@media (max-width: 768px) {
/* ── الهيكل: الشريط الجانبي يصير تنقّلًا سفليًا يصله الإبهام ─────────── */
.shell { flex-direction: column; }
.mainarea { order: 1; min-height: 0; }
.rail {
order: 2; width: auto; flex-direction: row; justify-content: space-around;
border-right: 0; border-top: 1px solid var(--border);
padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
gap: 2px; overflow-x: auto; overflow-y: hidden;
}
.rail-logo, .rail-divider, .rail-spacer { display: none; }
.rail-bottom { flex-direction: row; gap: 2px; }
.rail-btn { width: 40px; height: 40px; border-radius: 11px; }
.rail-btn svg { width: 19px; height: 19px; }
/* ── الشريط العلوي ────────────────────────────────────────────────────
كان يطلب نحو 580px في شاشة 390: شعار + اسم + وصف + بحث حدّه 240px +
زر + جرس. flex بلا التفاف يضغطها كلها بدل أن يُسقط شيئًا، فتظهر
مهروسة. الشعار وحده يعرّف بالموقع، والبحث يأخذ ما بقي. */
.topbar { height: auto; min-height: 50px; padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
.brand-logo { height: 26px; }
.brand-text { display: none; }
/* البحث في صفّه: مشاركًا الصفّ الأول كان يبقى له نحو 110px فيعرض كلمة
مقصوصة لا تفيد. سطر كامل يجعله صندوق بحث حقيقيًا، والصف الأول يبقى
للشعار والزر والجرس. */
.search { order: 9; flex: 1 0 100%; min-width: 0; height: 34px; padding: 0 10px; gap: 6px; }
/* شريط الفلاتر: أزراره ممنوعة من الانكماش (flex-shrink:0) فكان يلتف على
صفّين ويأكل الطول. صفّ واحد يُمرَّر أفقيًا أوفر وأوضح. */
.toolbar { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
scrollbar-width: none; }
.toolbar::-webkit-scrollbar { width: 0; height: 0; }
.deptTabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.deptTabs::-webkit-scrollbar { width: 0; height: 0; }
/* بقية الشاشات: حشوة 22px تأكل 44px من 390 */
.table-wrap { padding: 10px 10px 28px; }
.home { padding: 14px 12px 28px; gap: 12px; }
.thread-head { padding: 11px 12px; }
.conv { padding: 14px 12px; }
/* ليس زر «توزيع»: AssignMenu يسمّي زرّه غير الموزَّع assign-trigger empty،
فكانت حشوة صندوق الحالة الفارغة تنزل عليه فيصير دائرة 96×98px تجعل صف
الجدول 333px وبطاقة الكانبان 210px. */
.empty:not(.assign-trigger) { padding: 48px 16px; }
/* ── لوحة واحدة: القائمة، ثم المحادثة وحدها بعد اختيار طلب ──────────── */
.inbox, .teamview { display: flex; flex-direction: column; }
.inbox > .inbox-list,
.teamview > .inbox-list { flex: 1; min-height: 0; width: auto; }
.inbox > .thread,
.teamview > .thread { display: none; }
.inbox.has-sel > .inbox-list,
.teamview.has-sel > .inbox-list { display: none; }
.inbox.has-sel > .thread,
.teamview.has-sel > .thread { display: flex; flex: 1; min-height: 0; }
.inbox.has-sel > .mobile-back,
.teamview.has-sel > .mobile-back {
display: flex; align-items: center; gap: 6px; flex-shrink: 0; width: 100%;
padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border);
background: var(--surface); color: var(--accent);
font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.mobile-back svg { width: 16px; height: 16px; }
/* المحادثة تأخذ ما تبقّى فيلتصق صندوق الكتابة بالأسفل. على المكتب تملؤه
الرسائل عادةً، أما على الجوال بمحادثة قصيرة فكان الصندوق يطفو في المنتصف
وتحته فراغ كبير. */
.thread > .conv { flex: 1 1 auto; min-height: 0; }
/* ── الكانبان: عمود بعرض الشاشة يُمرَّر أفقيًا بدل أعمدة مضغوطة ──────── */
.board { padding: 12px; gap: 12px; scroll-snap-type: x mandatory; }
.board-col { min-width: 82vw; max-width: 82vw; scroll-snap-align: start; }
/* ── الإحصاءات: حشوات أضيق وبطاقات أصغر ─────────────────────────────── */
.stats { padding: 14px 12px 28px; gap: 14px; }
.statgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.statcard { padding: 12px 13px; }
.statpanel { padding: 14px 13px; }
/* ── الجدول: كل صف يُقرأ رأسيًا بدل أعمدة تفيض خارج الشاشة ───────────── */
.reqtable thead { display: none; }
.reqtable, .reqtable tbody, .reqtable tr, .reqtable td { display: block; width: auto; }
.reqtable tbody tr { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); }
.reqtable td { height: auto; padding: 3px 0; }
/* ── الأدراج والنوافذ: ملء الشاشة لا صندوق صغير داخل صندوق ──────────── */
.drawer { width: 100%; max-width: 100%; }
.modal-scrim { padding: 0; place-items: end stretch; }
/* dvh بعد vh: في سفاري الجوال 92vh تحسب ما خلف شريط العنوان والأزرار،
فيختبئ ذيل النافذة (زر الحفظ) تحتها. المتصفح الأقدم يأخذ vh. */
.modal { width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-body .input { min-width: 0; }
.modal-head { padding: 16px 15px 13px; }
/* التنبيهات كانت تبدأ بعد 90px حيث كان الشريط الجانبي — وهو الآن أسفل
الشاشة، فتقع فوق أزرار التنقّل وتحجبها. */
.toastwrap { inset-inline-start: 12px; inset-inline-end: 12px;
bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
/* ── الكتابة: مساحة للإبهام، و16px تمنع iOS من تكبير الصفحة عند النقر ── */
.composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.composer textarea, .input, input, select, textarea { font-size: 16px; }
/* ══ مقاسات الجوال ═══════════════════════════════════════════════════════
ما فوق يمنع الفيضان؛ لكن الشاشات بقيت بمقاسات المكتب نفسها بكسل CSS:
أرقام 27–52px، بطاقات بحشوات المكتب، وقوائم مثبّتة بمواضع الشريط
الجانبي — فتبدو «كبيرة» على الجوال. كل قاعدة هنا تستبدل قاعدة سابقة
(هنا أو فوق)، لذا مكانها آخر الاستعلام: التخصيص متساوٍ فالأخير يفوز. */
/* ── الإطار الثابت: شريط الإذن، الشريط العلوي، التنقّل ─────────────────
زر «طلب جديد» بارتفاع 40px وظل ملوّن كان أثقل ما في كل شاشة جوال،
والإطار الثابت (شريط الإذن + الشريط العلوي) يأكل 148px قبل أي بيانات. */
.accessbar { padding: 6px 12px; gap: 8px; }
/* ظل الزر الأساسي (0 8px 20px) هالةٌ تكاد تعادل الزر نفسه على شاشة صغيرة */
.btn-primary { box-shadow: var(--shadow-sm); }
.topbar { padding-block: 5px; row-gap: 6px; }
.topbar .btn-primary { height: 34px; padding: 0 12px; }
/* 9 أزرار للموظف × 42px = 378px أعرض من 360، فكانت صورة الحساب مقصوصة. */
.rail { gap: 0; padding-inline: 2px; }
.rail-bottom { gap: 0; }
.rail-btn { width: 38px; }
/* قائمة الحساب موضعها سطريًا (left:64 bottom:8) من الشريط الجانبي؛ هنا الشريط
أسفل الشاشة فكانت تغطي أزرار التنقّل بعيدًا عن صورة الحساب في أقصى اليمين. */
.rail .assign-menu { left: auto !important; right: 8px !important;
bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
/* التنبيهات: عمود 244px مثبّت يمينًا (سطريًا top:62 right:22) والجرس في
أقصى اليسار، فتنفتح بعيدًا عنه وتلتف الأسماء على 3 أسطر. عرض الشاشة
ويبدأ تحت صفّ الجرس — والصف ينزل بارتفاع شريط الإذن حين يظهر. */
.assign-menu.notifmenu { top: 48px !important; left: 8px !important; right: 8px !important;
width: auto; max-height: min(70vh, 560px); }
.mainarea:has(> .accessbar) .assign-menu.notifmenu { top: 95px !important; }
.notifmenu .accessitem { margin: 4px 0; }
.notifmenu .assign-opt { white-space: normal; }
/* التنبيهات أعلى الشاشة لا فوق التنقّل: الدرج يملأ الشاشة وصندوق كتابته
في أسفلها، فكان التنبيه يغطي الحقل لحظة الكتابة ويحجب النقر عليه. */
.toastwrap { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; pointer-events: none; }
.toast { padding: 9px 12px; font-size: var(--fs-xs); }
/* ── منتقي المدة: fixed بلا موضع، فكان يقع عند موضعه داخل شريط فلاتر
يُمرَّر أفقيًا بعرض 1500px — على بعد 1250px يسار الشاشة، لا يُرى أبدًا. */
.assign-menu.daterange-menu { position: fixed; top: auto; left: 10px; right: 10px; width: auto;
bottom: calc(62px + env(safe-area-inset-bottom, 0px));
max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto; }
/* السهم يُرسم يسارًا في RTL والحشوة 34px يمينًا — بخط 16px يركب النص فوق السهم */
.mainarea .dr-months .td-select { padding: 0 10px 0 28px; background-position: left 9px center; }
/* ── الرئيسية ───────────────────────────────────────────────────────────── */
.home-head { gap: 10px; }
.home-title h1 { font-size: 21px; }
.home-tools { gap: 6px; }
.home-tools .seg button { padding: 7px 10px; }
.home-select, .oppchip { padding-block: 6px; }
.hcard { padding: 13px 14px; }
/* 52/42px تساوي 4% من عرض المكتب لكنها 11% من عرض الجوال */
.bignum { font-size: 34px; }
.bignum.bignum-dur { font-size: 22px; }
.fc-row b { font-size: 26px; }
.goal-c b { font-size: 22px; }
/* .kpi القديمة (flex-direction: column) لم تُلغَ، وعمود واحد بعرض الشاشة:
4 بطاقات فوق بعض برمز ثم عنوان ثم رقم = برج 658px. شبكة 2×2 أفقية. */
.kpirow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { flex-direction: row; padding: 10px 12px; gap: 10px; min-width: 0; }
.kpi-ic { width: 32px; height: 32px; border-radius: 10px; }
.kpi-ic svg { width: 16px; height: 16px; }
.kpi-b b { font-size: 19px; }
.kpi-go { display: none; }
/* ── الجدول: بطاقة من 3 أسطر بدل 8 خلايا كل منها سطر كامل ────────────────
العميل والوقت · الموضوع · الشارات. الخلايا بترتيبها في views.jsx:
1 تحديد، 2 عميل، موضوع، قسم، حالة، مسؤول، متابعة، وقت. */
.reqtable tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.reqtable td { padding: 0; }
.reqtable td:nth-child(1) { order: 1; }
.reqtable td:nth-child(2) { order: 2; flex: 1 1 0; min-width: 0; }
.reqtable td.cell-meta { order: 3; font-size: var(--fs-xs); }
.reqtable td.cell-subject { order: 4; flex: 1 1 100%; max-width: none; min-width: 0; }
.reqtable td:nth-child(n+4):not(.cell-meta) { order: 5; }
/* «—» في خانة المتابعة سطر لا يقول شيئًا. صنف على الخانة نفسها لا
:has() — ذاك كان يُعاد تقييمه على كل خانة في الجدول مع كل إعادة
حساب نمط (إبطال :has() في Blink ليس محصورًا بشجرته). */
.reqtable td.col-follow.is-empty { display: none; }
/* ── الصندوق والدرج ─────────────────────────────────────────────────────── */
/* الشارة الحمراء كانت فوق وقت الرسالة (نفس الزاوية) */
.it-unreadbadge { top: auto; bottom: 14px; }
/* 4–5 أزرار تشارك العنوان سطره فلا يبقى من الموضوع حرف واحد عند 360px:
العنوان يأخذ سطره والأزرار تنزل تحته. */
.thread-head { flex-wrap: wrap; row-gap: 6px; }
.thread-head .ttl { min-width: 62%; }
.thread-head-actions { margin-inline-start: auto; gap: 4px; }
.thread-head-actions .btn-sm { padding: 0 10px; }
/* شريط الفلاتر لا يفيد وأنت داخل محادثة واحدة، وكان يقتطع 58px منها */
.mainarea:has(.inbox.has-sel) > .toolbar { display: none; }
.composer { gap: 8px; }
/* سطر واحد يتّسع حين الكتابة (Composer يمدّه سطريًا). 44 لا 42: خط 16px
× 1.5 مع الحشوة والإطار يحتاج 44 في border-box وإلا قُصّ السطر. */
.composer:has(> .composer-chiprow) textarea { height: 44px; min-height: 44px; padding-block: 8px; }
/* النص الإرشادي سطران: الثاني كان يطلّ مقصوصًا من أسفل الصندوق */
.composer:has(> .composer-chiprow) textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «من: اسمك» يكرّر المستخدم الحالي */
.composer-chip { display: none; }
.td-panel { padding: 14px 12px; gap: 16px; }
.detail-head { padding: 12px 12px 10px; }
/* ── شاشات التقارير والإدارة (.stats) ─────────────────────────────────── */
/* التبويبات لا تنكمش ولا تلتف: كانت «أُنشئ حسابها» و«أذونات التدخل» على
سطرين فيصير الشريط 54px؛ الزائد يُمرَّر داخل .deptTabs. */
.deptTabs { gap: 2px; }
.deptTab { flex-shrink: 0; white-space: nowrap; padding: 8px 10px; gap: 6px; }
.report-head { gap: 10px; }
/* البحث في سطره: بجانب العنوان كان نصف عرض فيُقصّ نصّه. لا لكل الأدوات:
قائمة «كل الموظفين» الصغيرة تتسع بجانب العنوان، وسطر لها وحدها هدر. */
.report-actions { gap: 8px; }
.report-actions:has(> .search) { flex: 1 1 100%; }
.seg { max-width: 100%; }
.seg button { padding-inline: 11px; }
/* بطاقات الأرقام: رقم 27px وحشوة المكتب لعدد من خانة واحدة. الثلاث
(التحويلات، طلبات الحسابات) صف واحد بدل 2+1، والخمس (التدقيق) 3+2 بدل
2+2+1 — عناوينها كلمة أو كلمتان. الأربع والست تبقى عمودين: عناوين
التقرير طويلة («إجمالي الطلبات المستقبلة») وتحتها سطر فرعي. */
.statgrid { gap: 8px; }
.statgrid:has(> .statcard:nth-child(3):last-child),
.statgrid:has(> .statcard:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.statcard { padding: 10px 11px; gap: 2px; }
.sc-val { font-size: 21px; }
/* صفوف السجلات: صندوقان محشوّان داخل بعض يضيّقان النص */
.statpanel:has(> .acclog) { padding: 8px; }
.accrow { padding: 11px 12px; gap: 10px; }
.accmeta { gap: 3px 12px; }
.accrow.accreq .accside { gap: 6px; }
.accrow.accreq .accreq-contact { margin-inline-start: auto; }
/* السلة والأذونات: الأزرار (نحو 180px ثابتة) بجانب النص كانت تعصره إلى 45px
فيُكتب الموضوع كلمة في كل سطر. الأزرار تنزل سطرًا تحته. ليس .accreq:
ذاك عمود أصلًا، وflex-basis فيه يصير ارتفاعًا. */
.accrow:not(.accreq) { flex-wrap: wrap; row-gap: 8px; }
.accrow:not(.accreq) > .accmain { flex: 1 1 200px; }
.accrow:not(.accreq) > .accside { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap;
align-items: center; justify-content: space-between; }
/* سطر التدقيق لا ينكمش (flex-shrink:0 عام)، فالسطر الطويل ببريد كان يخرج
من يسار الشاشة. */
.transrow:not(.transrow-lg) > .translbl { flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; }
/* التحويلات: 10 عناصر في سطر لا يلتف كانت تدفع «حوّلها» والتاريخ خارج
الصف. !important لأن عرض الاسم الأدنى 130px سطري. */
.transrow-lg { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
.transrow-lg .permname { flex: 1 1 100%; min-width: 0 !important; }
.transrow-lg .transby { margin-inline-start: 0; }
/* ── الصلاحيات: الاسم وزر التعطيل · الدور بعرض السطر · القسم والصلاحيات ──
كان الصف 4 أسطر متعرّجة: القائمة بعرضها الثابت 150px، أزرار الدور 31–45px،
وزر التعطيل وحيدًا في سطر. !important للهامش السطري على .td-seg. */
.permrow, .permrowwrap .permrow { gap: 8px; padding: 10px 2px; }
.permrow .permname { flex: 1 1 auto; min-width: 0; }
.permrow .td-seg { order: 4; flex: 1 1 100%; margin-inline-start: 0 !important; }
.permrow .td-seg button { height: 34px; }
.permrow select.permdept { order: 5; flex: 1 1 130px; width: auto; min-width: 0; height: 36px; }
.permrow > .btn-sm { order: 6; }
/* زر التوفّر (btn-sm أيضًا) كان يدفع «صلاحيات فردية» لسطر رابع عند 360px: مكانه سطر الاسم */
.permrow > .avail-btn { order: 1; }
.permrow > .icon-btn { order: 2; }
/* إزاحة 44px من اليسار صُمّمت لمحاذاة صورة الموظف على المكتب */
.permcustom { padding: 2px 0 12px; }
.permcustomrow { padding: 6px 4px; }
/* «حفظ الصلاحيات» كان يفيض 45px خارج صفّه */
.permfoot { flex-wrap: wrap; }
/* ── النوافذ ────────────────────────────────────────────────────────────── */
/* العرض السطري (420–720px) يغلب width:100% أعلاه، فعلى شاشة 480–768px
تبقى النافذة السفلية ملتصقة بطرف بدل ملء العرض. */
.modal-scrim > .modal { width: 100% !important; }
.modal-head { gap: 10px; }
.modal-head .mh-icon { width: 34px; height: 34px; border-radius: 10px; }
.modal-head .mh-icon svg { width: 18px; height: 18px; }
.modal-body { padding: 14px 15px; }
.modal-foot { padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px)); }
/* «مصدر الطلب» 3 أزرار في نصف عرض (157px) فكان كلٌّ منها سطرين بارتفاع
50px. سطر كامل لها وحدها — قبلها 8 حقول نصفية فلا يترك فراغًا في الشبكة. */
.form-grid > .formfield:has(> .seg > button:nth-child(3)) { grid-column: 1 / -1; }
.form-grid > .formfield > .seg { width: auto; }
.form-grid > .formfield > .seg > button { flex: 1 1 0; }
}
/* ── المزامنة التلقائية مع Google Sheets — نافذة الاستيراد ─────────────────
البطاقة أعلى النافذة تقول إن الشيت يُسحب وحده الآن (أو توقّف بخطأ) قبل أن
يستورد أحدٌ يدويًا ما سيُسحب على أي حال. القسم ٤ أسفلها يحفظ الإعداد.
على الجوال (بطاقة سفلية بعرض 390px): الأزرار تلتفّ وتتمدّد بدل أن تفيض —
`.btn` لا يلتفّ نصّه (nowrap) فزرٌّ بجوار المنتقي كان يدفع الصفحة أفقيًا. */
.syncard{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px 14px;border-radius:var(--radius-sm);
border:1.5px solid color-mix(in oklch, var(--green) 38%, var(--border));background:color-mix(in oklch, var(--green) 7%, var(--surface))}
.syncard.is-err{border-color:color-mix(in oklch, var(--red) 42%, var(--border));background:color-mix(in oklch, var(--red) 6%, var(--surface))}
.syncard-head{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:700}
.syncard-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--green);
box-shadow:0 0 0 3px color-mix(in oklch, var(--green) 22%, transparent)}
.syncard-dot.err{background:var(--red);box-shadow:0 0 0 3px color-mix(in oklch, var(--red) 20%, transparent)}
/* الفواصل «·» من CSS لا من النص: عناصر الملخّص اختيارية (المدة، «حتى»)،
فنقطة مكتوبة في JSX كانت تبقى معلّقة أو مكرّرة حين يغيب أحدها. */
.syncard-meta,.syncsetup-sum{display:flex;flex-wrap:wrap;row-gap:2px;font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.syncard-meta>span+span::before,.syncsetup-sum>span+span::before{content:"·";margin:0 7px;color:var(--text-3)}
.syncard-err{font-size:var(--fs-xs);font-weight:600;line-height:1.6;color:var(--red);overflow-wrap:anywhere}
.syncard-actions{display:flex;flex-wrap:wrap;gap:6px}
.syncard-stop{color:var(--red)}
.syncnote{padding:8px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600;line-height:1.6;overflow-wrap:anywhere}
.syncnote.ok{color:color-mix(in oklch, var(--green) 70%, #000);background:color-mix(in oklch, var(--green) 12%, var(--surface))}
[data-theme="dark"] .syncnote.ok{color:color-mix(in oklch, var(--green) 45%, #fff)}
.syncnote.err{color:var(--red);background:color-mix(in oklch, var(--red) 10%, var(--surface))}
.syncspin{animation:syncspin .8s linear infinite}
@keyframes syncspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.syncspin{animation:none}}
.syncsetup{margin-top:22px;padding-top:16px;border-top:1.5px dashed var(--border-strong)}
.syncsetup-desc{margin:4px 0 6px;font-size:var(--fs-xs);line-height:1.6}
.syncsetup-sum{margin-bottom:10px}
.syncsetup-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.syncsetup-row .formfield{flex:1 1 180px;min-width:0}
.syncsetup-row .formfield label{display:block;margin-bottom:4px;font-size:var(--fs-xs);color:var(--text-3)}
.syncsetup-row .btn{flex:0 0 auto}
.syncsetup-hint{margin-top:8px;font-size:var(--fs-xs);line-height:1.6;color:var(--text-3)}
.syncsetup .syncnote{margin-top:10px}
@media (max-width:768px){
.syncsetup-row .btn{flex:1 1 100%;justify-content:center}
.syncard-actions .btn{flex:1 1 auto;justify-content:center}
}
/* ══ wave2:detail — لوحة الطلب وصندوق المحادثات ══════════════════════════ */
/* الرقم بجوار الاسم مع زر نسخ: على اللابتوب tel: لا يفتح شيئًا غالبًا */
.dc-phone { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.dc-phone .dc-copy { width: 28px; height: 28px; }
.dc-phone .dc-copy svg { width: 14px; height: 14px; }
/* زر واتساب باسمه، و× اللوحة مفصولة بخط عن أزرار الطلب — كانت «إغلاق»
و× «إغلاق» متجاورتين بستّة بكسلات */
.wabtn-icon { text-decoration: none; }
.wabtn-icon .wabtn-lbl { font-weight: 600; }
.thread-head-actions .panelclose { margin-inline-start: 9px; }
/* الدرج 420px: أزرار الاتصال بأسمائها لا تُبقي للموضوع حرفًا. للعنوان حدّ أدنى،
وما لا يتّسع من الأزرار ينزل سطرًا تحته بدل أن يقصّه إلى «ا…». */
.drawer .thread-head { flex-wrap: wrap; row-gap: 8px; }
.drawer .thread-head .ttl { min-width: 45%; }
.drawer .thread-head-actions { margin-inline-start: auto; }
.thread-head-actions .panelclose::before { content: ''; position: absolute; inset-inline-start: -8px; top: 22%; bottom: 22%; width: 1px; background: var(--border); }
/* أسباب «لم يتم البيع» الجاهزة */
.lostchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cannedchip.on { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-soft); }
/* «جديد» بدل الشارة الحمراء «1» — ليست رسالة غير مقروءة */
.it-newpill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-inline: 6px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.inbox-more { display: flex; justify-content: center; padding: 12px; }
/* زر «التفاصيل» وشريط إغلاقها: لا حاجة لهما حيث العمود الثالث ظاهر */
.detailsbtn, .details-closebar { display: none; }
.detailsbtn.on { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-soft); }
@media (max-width: 1180px) {
.inbox { position: relative; }
.detailsbtn { display: inline-flex; }
/* يعلو المحادثة والقائمة كاملًا؛ التخصيص (0,3,0) يغلب إخفاء .inbox > :last-child،
و!important للموضع لأن غلاف اللوحة يحمل position: relative سطريًا. */
/* لوحة جانبية فوق طرف المحادثة لا فوق القائمة: القائمة تبقى صالحة للتنقّل
(واختيار طلب آخر يُغلق اللوحة). على الجوال تملأ الشاشة — أدناه. */
.inbox.show-details > :last-child { display: block; position: absolute !important; inset-block: 0; inset-inline-end: 0; width: min(340px, 100%);
z-index: 5; overflow: auto; box-shadow: var(--shadow-lg); }
.inbox.show-details .details-closebar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
position: sticky; top: 0; z-index: 1; padding-block: 8px; padding-inline: 18px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.details-closebar b { font-size: 14.5px; font-weight: 700; }
}
@media (max-width: 768px) {
/* أهداف لمس ≥40px في رأس الطلب، ومسافة تمنع الضغطة الخاطئة */
.thread-head .btn, .thread-head .icon-btn { height: 40px; min-width: 40px; }
.thread-head-actions { gap: 8px; }
.thread-head-actions .panelclose { margin-inline-start: 12px; }
.thread-head-actions .panelclose::before { inset-inline-start: -10px; }
.dc-phone .dc-copy { width: 36px; height: 36px; }
.inbox.show-details > :last-child { inset: 0; width: auto; box-shadow: none; border-inline-start: 0 !important; }
/* iOS يكبّر الصفحة عند التركيز على حقل خطّه أقل من 16px. قاعدة
input, select { font-size:16px } أعلاه تخسر أمام هذه الأصناف (تخصيص أعلى). */
.search input, .td-select, .follow-date input, .sortsel, .custsel, .home-select, .lockask .input { font-size: 16px; }
.lockask .input { height: 36px; }
}
/* ── wave2:notify ── (الجرس ومحادثة الفريق) ───────────────────────────── */
/* نص بند الجرس: كان الموضوع الطويل يخرج عن عرض القائمة (320px) لأن
.assign-opt لا يلتف — العنوان سطر واحد بنقاط، والتفاصيل سطران بحدّ أقصى. */
.notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-sub { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notifdot.mine { background: var(--accent); }
.notifdot.orphaned { background: #D9822B; }
/* بند متأخر من أي نوع: حلقة حمراء حول لون نوعه. */
.notifdot.late:not(.overdue) { box-shadow: 0 0 0 2px color-mix(in oklch, var(--red) 55%, transparent); }
/* تواصل الموظفين: نقطة غير مقروء + معاينة آخر رسالة + تلميح الإرسال. */
.team-unreaddot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.inbox-item.unread .it-sub.team-preview { color: var(--text); font-weight: 500; }
.composer-hint { font-size: 11px; color: var(--text-3); margin-top: -4px; }
@media (max-width: 768px) {
.notif-title { white-space: normal; }
/* لا Ctrl على الجوال — التلميح لا معنى له هناك. */
.composer-hint { display: none; }
}
/* ── wave2:admin ── (الإحصائيات والسجل والصلاحيات والإعدادات) ──────────── */
/* بطاقة/صف يفتح الجدول مُرشَّحًا: مؤشّر اليد وحلقة تركيز للوحة المفاتيح. */
.statcard.sc-click, .ap-click { cursor: pointer; }
.statcard.sc-click:focus-visible, .ap-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stats-basis { max-width: 760px; line-height: 1.6; }
/* جدول أداء الموظفين: جدول حقيقي بأعمدة رقمية متراصفة، ويمرّر أفقيًا وحده
على الشاشات الضيقة بدل أن يوسّع الصفحة. */
.agentperf { margin-bottom: 14px; }
.agentperf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agentperf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.agentperf-table th { text-align: start; font-size: 11px; font-weight: 700; color: var(--text-3); padding: 6px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.agentperf-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.agentperf-table tbody tr:last-child td { border-bottom: 0; }
.agentperf-table tbody tr.ap-click:hover td { background: var(--surface-2); }
.agentperf-table tr.off td { color: var(--text-3); }
.ap-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
/* «غير متاح»: كهرماني لا أحمر — ليس خطأ ولا تعطيلًا، غياب مؤقّت. */
.unavailtag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; flex: none;
color: #9A5B00; background: color-mix(in oklch, #E0A100 16%, var(--surface)); border: 1px solid color-mix(in oklch, #E0A100 38%, var(--surface)); }
[data-theme="dark"] .unavailtag { color: #FFC266; background: #3A3020; border-color: #5A4A28; }
.assign-opt .unavailtag { margin-inline-start: 4px; }
.avail-btn { gap: 6px; white-space: nowrap; }
.avail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.avail-dot.off { background: #E0A100; }
.avail-btn.is-off { color: #9A5B00; }
[data-theme="dark"] .avail-btn.is-off { color: #FFC266; }
/* سجل التدقيق */
.audit-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 4px 0 12px; }
.audit-dates label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.audit-dates .input { height: 34px; min-width: 150px; }
.audit-ref { flex: none; }
.audit-more { display: flex; justify-content: center; margin-top: 12px; }
.audit-tabs .audit-tabcount { display: none; }
.sla-prio-row .durrow { margin-top: 4px; }
@media (max-width: 768px) {
/* بطاقات أنواع السجل كانت تدفع أول سطر إلى منتصف الشاشة؛ على الجوال
تصير أعدادًا على التبويبات نفسها. */
.audit-stats { display: none; }
.audit-tabs .audit-tabcount { display: grid; }
.audit-tabs { overflow-x: auto; flex-wrap: nowrap; }
.audit-tabs .deptTab { flex: none; padding: 8px 10px; }
.audit-dates label { flex: 1 1 140px; }
.audit-dates .input { min-width: 0; width: 100%; font-size: 16px; }
.permrow .avail-btn { height: 36px; }
}
@media print {
.agentperf-scroll { overflow: visible; }
.audit-more, .avail-btn { display: none !important; }
}
/* ── wave2:supervisor — الجدول والفلاتر والتوزيع والاستيراد ───────────────── */
/* «عرض 150 من N» أسفل الجدول، والحارس الذي يطلب الدفعة التالية قبل بلوغ آخرها. */
.tablemore { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
padding: 14px 8px 4px; font-size: var(--fs-xs); font-weight: 600; }
.tablemore-sentinel { flex-basis: 100%; height: 1px; }
.col-more { align-self: center; margin-top: 2px; }
/* قائمة «إسناد الكل» أعرض لتتسع للاسم والعبء وحالة التوفّر */
.bulkbar .bulkassign { max-width: 100%; }
/* تحذير القسم في نافذة الاستيراد */
.importdeptwarn { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600;
line-height: 1.5; color: color-mix(in oklch, var(--amber, #d98324) 75%, #000); }
[data-theme="dark"] .importdeptwarn { color: color-mix(in oklch, var(--amber, #d98324) 60%, #fff); }
.importdeptwarn svg { width: 14px; height: 14px; flex: none; }
/* معاينة التوزيع */
.distnote { margin-bottom: 12px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600;
background: var(--accent-soft); color: var(--accent-deep); }
.distagents { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.distagent { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.distagent b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distplus { font-weight: 700; color: var(--green); margin-inline-start: auto; }
.distlist { max-height: 220px; overflow: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; }
.distrow { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: var(--fs-xs); border-bottom: 1px solid var(--border); }
.distrow:last-child { border-bottom: 0; }
.distcust { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.distmove { flex: none; white-space: nowrap; }
/* شريط التنقّل على الجوال: زر «المزيد» وورقته مخفيّان على المكتب تمامًا —
الرف الجانبي هناك كما هو بلا أي تغيير. */
.rail-more, .moresheet-wrap { display: none; }
@media (max-width: 768px) {
/* الشاشات الثانوية تنتقل إلى الورقة؛ (0,2,0) تغلب .rail-btn و.rail-bottom */
.rail .rail-sec { display: none; }
.rail .rail-more { display: grid; }
/* ستة أزرار على الأكثر الآن — مساحة للإبهام بدل 38px المضغوطة */
.rail > .rail-btn { width: 48px; height: 44px; }
.moresheet-wrap { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(20,15,45,.38);
animation: moresheetfade .16s ease-out; }
/* الورقة ابنة .shell ذات direction:ltr (خارج .mainarea) فانعكس ترتيبها بالعربية */
html[dir="rtl"] .moresheet-wrap { direction: rtl; }
.moresheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; max-height: 85dvh; overflow-y: auto;
background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)); animation: moresheetup .2s var(--ease, ease-out); }
.moresheet-grip { width: 38px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 2px auto 10px; }
.moresheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.moresheet-item { appearance: none; border: 0; background: transparent; color: var(--text-2); font: inherit; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--radius-sm);
font-size: var(--fs-xs); font-weight: 600; text-align: center; line-height: 1.3; }
.moresheet-item:active { background: var(--surface-2); }
.moresheet-item.active { background: var(--accent-soft); color: var(--accent-deep); }
.moresheet-ic { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2);
display: grid; place-items: center; }
.moresheet-ic svg { width: 20px; height: 20px; }
.moresheet-ic .rail-badge { position: absolute; top: 3px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
background: var(--red); border: 2px solid var(--surface); }
.moresheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--border); }
.moresheet-me { appearance: none; border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); min-width: 0; margin-inline-end: auto; }
.moresheet-me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moresheet-out { color: var(--red); }
.distnow { flex-shrink: 0; }
.distrow { flex-wrap: wrap; }
}
@keyframes moresheetup { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes moresheetfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moresheet, .moresheet-wrap { animation: none; } }
@media print { .tablemore, .moresheet-wrap { display: none !important; } }
/* ══ واجهة زجاجية ═══════════════════════════════════════════════════════
طلب صاحب النظام: البطاقات البيضاء شفافة مضبّبة في كل الشاشات. الزجاج لا
يُرى على خلفية سادة، فخلف منطقة المحتوى (.main) بقع لونية ناعمة من ألوان
الهوية — شفافة في معظمها فتبقى العلامة المائية ظاهرة من خلالها. داخل
@supports: متصفح بلا backdrop-filter يبقي الأسطح المصمتة بدل شفافية بلا
تضبيب تُضعف تباين النص. الشريطان العلوي والجانبي يبقيان مصمتين: لا شيء يمرّ
خلفهما، فالشفافية فيهما لون باهت لا زجاج. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.main {
background:
radial-gradient(38% 34% at 12% 18%, color-mix(in srgb, #7C8FC7 24%, transparent), transparent 70%),
radial-gradient(34% 30% at 88% 42%, color-mix(in srgb, #D9A441 22%, transparent), transparent 70%),
radial-gradient(40% 36% at 42% 92%, color-mix(in srgb, #3FA88A 16%, transparent), transparent 70%);
background-attachment: local;
}
/* البطاقات: الرئيسية، الإحصائيات، اللوحة، صفوف الجدول، قوائم المحادثات */
.hcard, .kpirow .kpi, .statcard, .statpanel, .card,
.reqtable tbody tr td, .inbox-list {
background: color-mix(in srgb, var(--surface) 40%, transparent);
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
}
.hcard, .kpirow .kpi, .statcard, .statpanel, .card {
border-color: color-mix(in oklch, #FFFFFF 70%, transparent);
box-shadow: 0 8px 28px rgba(20, 28, 60, .08), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.hcard:hover, .kpirow .kpi:hover, .statcard:hover, .statpanel:hover, .card:hover {
box-shadow: 0 12px 34px rgba(20, 28, 60, .13), inset 0 1px 0 rgba(255, 255, 255, .75);
}
/* الصف: الخلفية على الخلايا (التضبيب لا يُطبَّق على tr نفسه في كروم) */
.reqtable tbody tr { background: transparent; }
.reqtable tbody tr td { border-block: 1px solid color-mix(in oklch, #FFFFFF 70%, transparent); }
.reqtable tbody tr td:first-child { border-inline-start: 1px solid color-mix(in oklch, #FFFFFF 70%, transparent); }
.reqtable tbody tr td:last-child { border-inline-end: 1px solid color-mix(in oklch, #FFFFFF 70%, transparent); }
/* رأس الجدول ورأس العمود لاصقان: تضبيب أثقل حتى لا تتداخل الصفوف المارّة
خلفهما مع العناوين (راجع تعليق .col-head) */
.reqtable thead th, .col-head {
background: color-mix(in srgb, var(--bg) 72%, transparent);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.board-col {
background: color-mix(in srgb, var(--surface-2) 45%, transparent);
border-color: color-mix(in oklch, #FFFFFF 60%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.col-head { background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
.board-col.dragover { background: color-mix(in oklch, var(--accent-soft) 70%, transparent); }
/* لوحة تفاصيل المحادثة على المكتب — خلفيتها سطرية في views.jsx فتحتاج !important.
تحت 1180px تُعرض فوق المحادثة، فتبقى مصمتة هناك للقراءة. */
@media (min-width: 1181px) {
.inbox > :last-child, .inbox > :last-child.drawer {
background: color-mix(in srgb, var(--surface) 40%, transparent) !important;
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
}
}
[data-theme="dark"] .hcard, [data-theme="dark"] .kpirow .kpi, [data-theme="dark"] .statcard,
[data-theme="dark"] .statpanel, [data-theme="dark"] .card,
[data-theme="dark"] .reqtable tbody tr td, [data-theme="dark"] .inbox-list {
background: color-mix(in oklch, var(--surface) 55%, transparent);
border-color: rgba(255, 255, 255, .09);
}
[data-theme="dark"] .hcard, [data-theme="dark"] .kpirow .kpi, [data-theme="dark"] .statcard,
[data-theme="dark"] .statpanel, [data-theme="dark"] .card {
box-shadow: 0 8px 28px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}
[data-theme="dark"] .board-col { background: color-mix(in oklch, var(--surface-2) 50%, transparent); border-color: rgba(255, 255, 255, .08); }
/* الجوال: تضبيب عشرات الأسطح أثناء التمرير مكلف — نصف القطر يكفي */
@media (max-width: 768px) {
/* الصف هنا بطاقة flex (لا table-row)، فالزجاج على الصف كله لا على خلايا
متفرقة كانت تظهر رقعًا منفصلة داخل البطاقة */
.reqtable tbody tr {
background: color-mix(in srgb, var(--surface) 40%, transparent);
border: 1px solid color-mix(in oklch, #FFFFFF 70%, transparent);
}
.reqtable tbody tr td, .reqtable tbody tr td:first-child, .reqtable tbody tr td:last-child {
background: transparent; border: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="dark"] .reqtable tbody tr { background: color-mix(in oklch, var(--surface) 55%, transparent); border-color: rgba(255, 255, 255, .09); }
.hcard, .kpirow .kpi, .statcard, .statpanel, .card,
.reqtable tbody tr, .inbox-list, .board-col {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
}
/* ── wave3:agent-table ── (شارة الانتظار وترتيب الجدول وأهداف اللمس على الجوال) */
/* الترتيب فوق الجدول لا في شريط الفلاتر: ذاك يُمرَّر أفقيًا على الجوال فيختفي
آخره، وهو تفضيل للجدول وحده لا فلتر لكل الشاشات. */
.tablesort { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 4px; }
/* الشارة بجوار الحالة لا تحتها: سطر ثانٍ كان يرفع ارتفاع الصف عن --row-h */
.reqtable td.cell-status { white-space: nowrap; }
.tablewait { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-inline-start: 6px; vertical-align: middle;
border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
font-size: 11px; font-weight: 500; white-space: nowrap; }
.tablewait.warn { color: #9A5B00; background: color-mix(in srgb, #E0A100 14%, var(--surface)); border-color: color-mix(in srgb, #E0A100 38%, var(--surface)); }
.tablewait.late { color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--surface)); border-color: color-mix(in srgb, var(--red) 35%, var(--surface)); }
[data-theme="dark"] .tablewait.warn { color: #FFC266; }
@media (max-width: 768px) {
/* البطاقة ضيقة: الحالة والشارة تلتفّان بدل أن تدفعا البطاقة أفقيًا */
.reqtable td.cell-status { white-space: normal; }
.tablesort .sortsel { height: 40px; }
/* ── أهداف اللمس ≥40px ─────────────────────────────────────────────────
الإصبع أعرض من مؤشر الفأرة؛ أزرار 28–34px تُخطئها النقرة فتفتح ما بجوارها.
حيث يُكبّر الحجم الفعلي كثافة الشاشة (بطاقة الجدول، زر «طلب جديد» الذي
صُغّر عمدًا) نوسّع منطقة النقر بـ::after شفافة بلا تغيير في الشكل. */
/* مربع التحديد 17px: الـlabel يوسّع النقر إلى 40px، والهامش السالب يُبقي
مكانه في البطاقة كما هو. z-index: وإلا غطّاه اسم العميل المجاور. */
/* الهامش السالب = (40 − 24)/2: المربع مع هامشه الافتراضي (3–4px) كان يشغل 24px */
.rowchk-hit { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -8px; position: relative; z-index: 1; vertical-align: middle; cursor: pointer; }
.rowchk-hit > .rowchk { margin: 0; }
.reqtable .assign-trigger { position: relative; }
.reqtable .assign-trigger::after { content: ''; position: absolute; inset: -6px -2px; }
/* شريط الفلاتر والشريط العلوي */
.toolbar .chip, .toolbar .custsel, .toolbar .btn-sm { height: 40px; }
.toolbar .deptTab { min-height: 40px; }
.topbar .icon-btn { width: 40px; height: 40px; }
.topbar .btn-primary { position: relative; }
.topbar .btn-primary::after { content: ''; position: absolute; inset: -4px -1px; }
.mobile-back { min-height: 40px; }
/* الرئيسية والتقارير ونافذة الاستيراد */
.seg button { min-height: 40px; }
.home-select { min-height: 40px; }
/* رأس الطلب ولوحته */
.dc-phone .dc-copy { width: 40px; height: 40px; }
.wabtn, .cannedchip, .modeToggle { height: 40px; }
.td-seg button, .quickTransferBtn { height: 40px; }
.toggle::after { content: ''; position: absolute; inset: -8px -2px; }
/* النوافذ و«عرض المزيد» */
.modal .btn, .modal .btn-sm, .modal .pick, .modal select.input, .modal input.input { height: 40px; }
.modal .icon-btn { width: 40px; height: 40px; }
.tablemore .btn-sm, .inbox-more .btn-sm, .col-more { height: 40px; }
}
/* ── wave3:dark-mode ── تدقيق الوضع الداكن بعد موجتين من الواجهة الجديدة ──────
كل قاعدة هنا تحت [data-theme="dark"] body: الفاتح لا يتغيّر بكسلًا واحدًا،
وbody يُخرج نسخة PDF (تُلحق بـ خارج body وتبقى فاتحة دائمًا) من
نطاقها. الأرقام بين القوسين تباين مقيس في المتصفح (WCAG AA: 4.5 للنص،
3 للأيقونات والنص الكبير). */
[data-theme] .pdf-render { --red-ink: var(--red); }
/* الزر الأساسي: أبيض على --accent-2 الخام كان 3.6. نغمّقه نحو الخلفية بدل
تبديل لونه — يبقى نفس الأزرق الرمادي الذي يعرفه المستخدم (5.7). */
[data-theme="dark"] body .btn-primary,
[data-theme="dark"] body .thread-head .closebtn {
background: color-mix(in oklch, var(--accent-2) 70%, #0E1220);
border-color: color-mix(in oklch, var(--accent-2) 70%, #0E1220);
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
[data-theme="dark"] body .btn-primary:hover,
[data-theme="dark"] body .thread-head .closebtn:hover { background: color-mix(in oklch, var(--accent-2) 60%, #0E1220); }
/* الشريحة المختارة: كانت خلفيتها --text (شبه بيضاء) — أوضح بقعة فاتحة في
الشاشة كلها وتتكرر في كل صفحة فيها فلاتر. لون الهوية كالرف والتبويب. */
[data-theme="dark"] body .chip.active { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
/* أعداد الشرائح عليها opacity: .55 سطريًا (3.3؛ وداخل «متأخرة» 1.7) */
[data-theme="dark"] body .chip .tabnum { opacity: .85 !important; }
/* شارة الحالة: ألوانها سطرية من RC.statusColor (خلفية بإضاءة 96%) فكانت
حبوبًا بيضاء في كل صف. StatusBadge يمرّر درجة اللون وتشبّعه متغيّرين،
فنعيد بناء الثلاثي بإضاءة داكنة — !important لأن السطري يتفوّق. */
[data-theme="dark"] body .statusBadge[style*="--sb-h"] {
background: oklch(0.30 var(--sb-c) var(--sb-h)) !important;
border-color: oklch(0.44 calc(var(--sb-c) + 0.01) var(--sb-h)) !important;
color: oklch(0.88 calc(var(--sb-c) + 0.02) var(--sb-h)) !important;
}
/* نص الحالة في لوحة الطلب: إضاءة 42% سطريًا = نص داكن على حقل داكن */
[data-theme="dark"] body .td-select[style*="--sb-h"],
[data-theme="dark"] body .tagchip[style*="--sb-h"] { color: oklch(0.86 calc(var(--sb-c) + 0.03) var(--sb-h)) !important; }
/* الأحمر نصًّا (3.1 ← 6.4) */
[data-theme="dark"] body .chip.overdue { color: var(--red-ink); border-color: color-mix(in oklch, var(--red) 70%, var(--red-ink)); }
[data-theme="dark"] body .chip.overdue.active { background: var(--red); color: #FFFFFF; border-color: var(--red); }
[data-theme="dark"] body .overdueText,
[data-theme="dark"] body .slaBadge.overdue,
[data-theme="dark"] body .timerval.over,
[data-theme="dark"] body .formfield > label .req,
[data-theme="dark"] body .reqhint .req,
[data-theme="dark"] body .auth-deptset > legend .req,
[data-theme="dark"] body .assign-opt.clear,
[data-theme="dark"] body .login-err,
[data-theme="dark"] body .field-err,
[data-theme="dark"] body .syncard-err,
[data-theme="dark"] body .syncard-stop,
[data-theme="dark"] body .syncnote.err,
[data-theme="dark"] body .moresheet-out,
[data-theme="dark"] body .tablewait.late { color: var(--red-ink); }
[data-theme="dark"] body .moresheet-out { border-color: color-mix(in oklch, var(--red) 55%, transparent); }
/* لون الهوية الخام نصًّا أو أيقونةً (2.5) ← --accent-deep المشتق منه للداكن */
[data-theme="dark"] body .has-sel > .mobile-back,
[data-theme="dark"] body .assign-opt .check { color: var(--accent-deep); }
/* زر الإرسال كان #111844 ثابتًا: كحلي على كحلي لا يُرى أنه زر */
[data-theme="dark"] body .composer-send { background: var(--accent); color: #FFFFFF; }
[data-theme="dark"] body .composer-send:hover { background: color-mix(in oklch, var(--accent) 80%, #FFFFFF); }
/* بطاقة القسم في «طلب جديد»: