/* ==========================================================================
   Castle — طبقة الواجهة
   2026-08-15

   ملف واحد بيتحمّل بعد كل الأنماط التانية. مبيغيّرش أي HTML ولا أي منطق —
   كل اللي فيه إعادة تنسيق للعناصر الموجودة أصلًا:

     .sla-row-*      صفوف جدول التذاكر
     .badge-soft-*   بادجات الحالة
     .card           البطاقات
     .btn            الأزرار
     #sidebar-menu   القائمة الجانبية
     table.table     الجداول

   كل الألوان جاية من الرموز المعرّفة في app.blade.php، فالوضع النهاري
   والليلي بيشتغلوا من غير تكرار.

   لو حصل أي مشكلة: امسح سطر الـ <link> بتاع الملف ده من app.blade.php
   والنظام يرجع لشكله القديم فورًا — مفيش أي حاجة تانية اتغيرت.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. الأساسيات
   -------------------------------------------------------------------------- */

body {
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
}

/* الأرقام تتراص تحت بعضها في الأعمدة بدل ما كل رقم بعرض مختلف */
table.table td,
table.table th,
.badge,
[class*="badge-soft"],
.count,
.counter-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* --------------------------------------------------------------------------
   2. جدول التذاكر — شريط حالة بدل تلوين الصف

   كان الصف بيتلوّن بالكامل وبينبض (animation). مع ٣٠ صف على الشاشة مفيش حاجة
   بتبرز لأن كل حاجة بارزة، والنبض بيتعب العين بعد ساعة شغل.

   نفس المعلومة اتنقلت لشريط ٣ بكسل على حافة الصف — أوضح، وأهدى.
   -------------------------------------------------------------------------- */

/* sla-countdown.css بيستخدم نفس المحدِّد بالظبط مع !important، وبيتحمّل بعد
   الملف ده في صفحتي التذاكر. الـ html في الأول بتزوّد الوزن، فالقاعدة دي
   بتكسب مهما كان ترتيب التحميل. */
html body table.table tbody tr.sla-row-safe,
html body table.table tbody tr.sla-row-safe > td,
html body table.table tbody tr.sla-row-warning,
html body table.table tbody tr.sla-row-warning > td,
html body table.table tbody tr.sla-row-danger,
html body table.table tbody tr.sla-row-danger > td,
html body table.table tbody tr.sla-row-breached,
html body table.table tbody tr.sla-row-breached > td {
    background-color: transparent !important;
    animation: none !important;
}

/* الحافة الصحيحة في صفحة عربية هي اليمين — border-left كان بيرسم على الشمال */
html body table.table tbody tr.sla-row-safe,
html body table.table tbody tr.sla-row-warning,
html body table.table tbody tr.sla-row-danger,
html body table.table tbody tr.sla-row-breached {
    border-left: 0 !important;
    box-shadow: none;
}

html body table.table tbody tr.sla-row-safe > td:first-child,
html body table.table tbody tr.sla-row-warning > td:first-child,
html body table.table tbody tr.sla-row-danger > td:first-child,
html body table.table tbody tr.sla-row-breached > td:first-child {
    border-inline-start: 3px solid transparent !important;
}

html body table.table tbody tr.sla-row-safe > td:first-child     { border-inline-start-color: var(--ok) !important; }
html body table.table tbody tr.sla-row-warning > td:first-child   { border-inline-start-color: var(--warn) !important; }
html body table.table tbody tr.sla-row-danger > td:first-child    { border-inline-start-color: var(--danger) !important; }
html body table.table tbody tr.sla-row-breached > td:first-child  { border-inline-start-color: var(--danger) !important; }

/* المتأخر جدًا يفضل يلفت النظر — بغمسة خفيفة، من غير نبض */
html body table.table tbody tr.sla-row-breached > td {
    background-color: var(--danger-soft) !important;
}

/* --------------------------------------------------------------------------
   3. الجداول
   -------------------------------------------------------------------------- */

table.table {
    border-color: var(--border-c);
}

table.table > thead th,
table.table > thead > tr > th {
    background-color: var(--surface-2) !important;
    color: var(--text-3) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-c) !important;
    border-top: 0 !important;
    white-space: nowrap;
    padding: 10px 14px;
}

table.table > tbody > tr > td {
    border-top: 0 !important;
    border-bottom: 1px solid var(--border-c) !important;
    padding: 11px 14px;
    vertical-align: middle;
}

table.table > tbody > tr:hover > td {
    background-color: var(--surface-2) !important;
}

/* التظليل بالتناوب بيتعارض مع شريط الحالة — الأوضح هو التمرير */
table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   4. البادجات
   -------------------------------------------------------------------------- */

[class*="badge-soft-"],
.badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.5;
    letter-spacing: 0;
}

.badge-soft-success  { color: var(--ok) !important;     background-color: var(--ok-soft) !important; }
.badge-soft-warning  { color: var(--warn) !important;   background-color: var(--warn-soft) !important; }
.badge-soft-danger   { color: var(--danger) !important; background-color: var(--danger-soft) !important; }
.badge-soft-info     { color: var(--info) !important;   background-color: var(--info-soft) !important; }
.badge-soft-primary  { color: var(--primary-color) !important; background-color: var(--accent-soft) !important; }
.badge-soft-secondary{ color: var(--text-2) !important; background-color: var(--surface-3) !important; }

.badge.bg-success  { background-color: var(--ok) !important;     color: var(--on-accent) !important; }
.badge.bg-warning  { background-color: var(--warn) !important;   color: var(--on-accent) !important; }
.badge.bg-danger   { background-color: var(--danger) !important; color: var(--on-accent) !important; }
.badge.bg-info     { background-color: var(--info) !important;   color: var(--on-accent) !important; }
.badge.bg-primary  { background-color: var(--primary-color) !important; color: var(--on-accent) !important; }
.badge.bg-secondary{ background-color: var(--surface-3) !important; color: var(--text-2) !important; }

/* --------------------------------------------------------------------------
   4b. الأولوية وحالة التذكرة

   .priority كان أخضر مصمت ثابت و.urgent أحمر مصمت — لونين قويين بيتكرروا في
   كل صف فبيسحبوا الانتباه من اللي فعلًا محتاج انتباه. وحالات .ticket-* كانت
   بألوان ثابتة مبتتغيرش مع الوضع الليلي فبعضها كان بيختفي على الخلفية الغامقة.
   -------------------------------------------------------------------------- */

/* الأولوية: كل قيمة بلونها، عشان العين تفرز الجدول من غير ما تقرا.
   العاجل وحماية المستهلك أحمر مصمت لأنهم اللي بيوقفوا الشغل، والباقي
   بدرجات أهدى. */
.priority {
    background: var(--surface-3) !important;
    color: var(--text-2) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-size: 12px;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.priority::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    opacity: .85;
}

/* كل أولوية لون مستقل تمامًا — العين تفرزها من غير ما تقرا.
   الألوان دي خاصة بالأولوية بس، ومش بتتغير مع الوضع الليلي/النهاري في
   الدرجة (بيتظبط السطوع بس) عشان الموظف يحفظ اللون. */

/* عادي — رمادي باهت، عشان الأغلبية ميزاحموش اللي مهم */
span.priority.priority-normal {
    background: var(--surface-3) !important;
    color: var(--text-3) !important;
}
span.priority.priority-normal::before { display: none; }

/* عاجل — أحمر */
span.priority.priority-urgent {
    background: #DC2626 !important;
    color: #fff !important;
}

/* حماية المستهلك — بنفسجي غامق: بلاغ رسمي، نوع تاني خالص من الضغط */
span.priority.priority-consumer_protection {
    background: #7C2D91 !important;
    color: #fff !important;
}

/* تكرار عطل — برتقالي */
span.priority.priority-repeat {
    background: #EA580C !important;
    color: #fff !important;
}

/* تخطي ٤٨ ساعة — أصفر كهرماني */
span.priority.priority-two_days_ago {
    background: #CA8A04 !important;
    color: #fff !important;
}

/* سوشيال ميديا — أزرق: سمعة مش عطل */
span.priority.priority-social_media {
    background: #2563EB !important;
    color: #fff !important;
}

/* الكلاس القديم لسه على العاجل وتكرار العطل وتخطي ٤٨؛ الكلاسات اللي فوق
   أدق منه فبتغلبه، وده بيمسك أي قيمة جديدة تتضاف بعدين */
.priority.urgent:not([class*="priority-"]) {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

/* --- حالة البلاغ ---

   الاستهداف بـ [data-status] مش بالكلاس، لأن الكلاس كان ticket-{الحالة}
   والحالات المخزّنة بالعربي فيها مسافة ("في الورشة") فكانت بتتكسر لكلاسين
   ومستحيل تتلوّن. والوزن span.status[data-status] بيكفي عشان يغلب قاعدة
   .card span:not(.badge) اللي في القالب.

   اللون هنا خلفية خفيفة + نص غامق — نوع مختلف عن الأولوية (خلفية مصمتة)،
   عشان العمودين ميتلخبطوش مع بعض.
*/
.status {
    font-weight: 500 !important;
    font-size: 12px;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    background: var(--surface-3);
    display: inline-block;
    white-space: nowrap;
}

/* كل حالة لون مستقل بذاته — الموظف يفرز العمود بالعين من غير ما يقرا.

   الألوان مصمتة وثابتة في الوضعين (مش من الرموز)، عشان الموظف يحفظ إن
   "الأصفر ده معناه انتظار قطع" ويفضل نفس اللون في أي شاشة وأي وضع. */

/* --- خلصت --- */
span.status[data-status="complete"] { background: #15803D !important; color: #fff !important; } /* مكتمل — أخضر */
span.status[data-status="done"]     { background: #0D9488 !important; color: #fff !important; } /* تم التنفيذ — تركواز */

/* --- شغّالة --- */
span.status[data-status="open"]       { background: #2563EB !important; color: #fff !important; } /* مفتوح — أزرق */
span.status[data-status="in_process"] { background: #4F46E5 !important; color: #fff !important; } /* قيد التنفيذ — بنفسجي مزرق */
span.status[data-status="pending"]    { background: #7C3AED !important; color: #fff !important; } /* قيد الموافقة — بنفسجي */
span.status[data-status="follow_up"]  { background: #0891B2 !important; color: #fff !important; } /* متابعة — سماوي */
span.status[data-status="في الورشة"]  { background: #475569 !important; color: #fff !important; } /* في الورشة — رمادي مزرق */

/* --- قطع الغيار --- */
span.status[data-status="need_parts"]                   { background: #B45309 !important; color: #fff !important; } /* يحتاج قطع — بني */
span.status[data-status="waiting_for_parts"]            { background: #CA8A04 !important; color: #fff !important; } /* انتظار قطع — أصفر */
span.status[data-status="parts_out_for_delivery"]       { background: #0284C7 !important; color: #fff !important; } /* القطع في الطريق — أزرق فاتح */
span.status[data-status="parts_ready_for_installation"] { background: #65A30D !important; color: #fff !important; } /* جاهزة للتركيب — أخضر فاتح */
span.status[data-status="parts_out_of_stock"]           { background: #9F1239 !important; color: #fff !important; } /* غير متوفرة — عنّابي */

/* --- انتظار --- */
span.status[data-status="waiting"]        { background: #A16207 !important; color: #fff !important; } /* انتظار — كهرماني غامق */
span.status[data-status="waiting_client"] { background: #C2410C !important; color: #fff !important; } /* انتظار العميل — برتقالي محروق */
span.status[data-status="لا يرد"]         { background: #78716C !important; color: #fff !important; } /* لا يرد — رمادي دافي */

/* --- سحب واستبدال --- */
span.status[data-status="سحب"]        { background: #7E22CE !important; color: #fff !important; } /* سحب — بنفسجي غامق */
span.status[data-status="تحتاج سحب"]  { background: #A21CAF !important; color: #fff !important; } /* تحتاج سحب — فوشيا */
span.status[data-status="استبدال"]    { background: #DB2777 !important; color: #fff !important; } /* استبدال — وردي */
span.status[data-status="رد قيمة"]    { background: #57534E !important; color: #fff !important; } /* رد قيمة — رمادي غامق */

/* --- مشاكل وإلغاء --- */
span.status[data-status="voc"]            { background: #DC2626 !important; color: #fff !important; } /* شكوى VOC — أحمر */
span.status[data-status="cancel_request"] { background: #EA580C !important; color: #fff !important; } /* طلب إلغاء — برتقالي */
span.status[data-status="cancel"]         { background: #44403C !important; color: #fff !important; } /* ملغي — فحمي */

/* الكلاسات القديمة لسه شغالة في الشاشات اللي لسه مضفناش فيها data-status */
.ticket-open       { color: var(--warn) !important; }
.ticket-in_process { color: var(--info) !important; }
.ticket-complete   { color: var(--ok) !important; }
.ticket-cancel     { color: var(--text-3) !important; }

.ticket-number {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
}

/* --------------------------------------------------------------------------
   4c. تحديد البلاغات
   -------------------------------------------------------------------------- */

.tickets-selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
}

.tickets-selection__count {
    font-size: 14px;
    color: var(--primary-color);
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.tickets-selection__count b { font-variant-numeric: tabular-nums; }

/* مساحة لمس أكبر للـ checkbox، وتوسيط في عموده */
table.table .checkItem,
table.table #checkAll {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--primary-color);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   4d. ملاحظات التذكرة

   زرار "حفظ" الملاحظة كان بيخرج برّه حدود عموده — العمود بينتهي والزرار
   لسه ماشي تحته — فأول ملاحظة في القايمة كانت بتترسم فوق الزرار والكلام
   يدخل في بعضه. سبب الخروج إن محرّر النص بيقلب الـ textarea لعنصر تاني
   والارتفاع المحجوز مبيتحدّثش.

   الحل: العمود يحتوي أبناءه فعلًا، والملاحظات تبتدي بعد مسافة واضحة.
*/
.tab-content-holder .form-group.col-lg-12 {
    display: flow-root;   /* يضم الهوامش جوّه العمود */
    padding-bottom: 8px;
}

.tab-content-holder .form-group.col-lg-12 .save-ticket {
    margin-top: 12px !important;
    margin-bottom: 4px;
    float: none;
    display: inline-flex;
}

/* محرّر النص بيغيّر ارتفاعه بعد ما الصفحة تترسم، فعمود الزرار بيفضل بارتفاعه
   القديم والزرار بيطلع بره حدوده. عمود الملاحظات بياخد مسافة تكفي الزرار
   عشان أول ملاحظة متطلعش فوقه. */
.tab-content-holder .row > .col-12:has(.log.note) {
    margin-top: 56px;
    clear: both;
}

/* احتياطي للمتصفحات اللي لسه مش داعمة :has() */
.tab-content-holder .form-group.col-lg-12 + .col-12 {
    margin-top: 56px;
    clear: both;
}

/* الملاحظة: النص سطر كامل، والتاريخ والاسم تحته — بدل ما التلاتة يتزاحموا
   في صف واحد فيتداخلوا مع بعض على الشاشات الضيقة */
.log.note {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 15px !important;
    border-bottom: 1px solid var(--border-c) !important;
}

.log.note .log_note_content {
    width: 100%;
    margin-bottom: 2px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.log.note p {
    font-size: 12px !important;
    color: var(--text-3) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* التاريخ والاسم جنب بعض في سطر واحد */
.log.note p + p { margin-inline-start: 16px !important; }
.log.note p br { display: none; }

/* أزرار التحصيلات: بتفضل جنب بعض ومتتكدسش في عرض العمود */
.collection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.collection-actions .btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   5. البطاقات
   -------------------------------------------------------------------------- */

.card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-c) !important;
    padding: 14px 16px;
}

.card-body { padding: 16px; }

.page-title-box {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-c);
}

.page-title-box h4 {
    font-size: 19px !important;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   5b. كروت الرئيسية

   تركيب الكارت هو: عنوان صغير خافت، الرقم، أيقونة، وسطر مقارنة تحت. الترتيب
   ده صح — اللي كان ناقص هو إن الرقم ياخد وزنه الحقيقي وإن الأيقونة تهدى
   بدل ما تنافس الرقم على الانتباه.
   -------------------------------------------------------------------------- */

/* كل كروت الصف بنفس الارتفاع حتى لو النص جواها مختلف الطول */
.row > [class*="col-"] > .card,
.row > [class*="col-"] > a > .card {
    height: 100%;
    margin-bottom: 0;
}

.row > [class*="col-"] {
    margin-bottom: 16px;
}

.card-custom .card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
}

/* العنوان */
.card-custom .text-muted.small:first-child,
.card-custom .card-body > div:first-child .text-muted.small {
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.5;
}

/* الرقم */
.card-custom h3 {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
    margin: 4px 0 0 !important;
    font-variant-numeric: tabular-nums;
}

/* الأيقونة: مربّع ملوّن خفيف بدل أيقونة عارية بحجم مضاعف */
.card-custom .dynamic-icon,
.card-custom .card-body i.fa-2x {
    font-size: 15px !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-soft);
    flex: none;
}

/* سطر المقارنة تحت */
.card-custom .mt-3 {
    margin-top: auto !important;
    padding-top: 10px;
    font-size: 12px;
}

.card-custom.hover-effect {
    transition: border-color .15s ease, transform .15s ease;
}
.card-custom.hover-effect:hover {
    border-color: var(--border-strong) !important;
    transform: translateY(-1px);
}

a:hover .card-custom { text-decoration: none; }

/* ==========================================================================
   الشاشة الرئيسية

   الترتيب بيجاوب على "أعمل إيه دلوقتي؟": المتأخر فوق، الشغل الجاري تحته،
   والأرقام التاريخية في الآخر.
   ========================================================================== */

.dash-layout-switch {
    display: flex;
    justify-content: flex-start;
    padding: 14px 24px 0;
}

.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border-c);
}
.dash-head h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.02em;
}
.dash-head p {
    margin: 3px 0 0;
    color: var(--text-3);
    font-size: 13px;
}
.dash-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dash-section { margin-bottom: 30px; }

.dash-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.dash-section__head h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-section__head h2 i { color: var(--text-3); font-size: 13px; }

.dash-link {
    margin-inline-start: auto;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
}
.dash-link:hover { color: var(--accent-hover); text-decoration: none; }

.dash-chip {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 11px;
    border-radius: 999px;
}
.dash-chip--ok { background: var(--ok-soft); color: var(--ok); }
.dash-chip--danger { background: var(--danger-soft); color: var(--danger); }
.dash-chip--mute { background: var(--surface-3); color: var(--text-3); margin-inline-start: auto; }

/* حالة البلاغ في جدول آخر التذاكر — نفس لغة الألوان بتاعة الحالة في الجداول،
   بس متميّزة عن الأولوية جنبها: الحالة بادج مصمت خفيف، الأولوية بنقطة. */
.dash-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.dash-status--ok     { background: var(--ok-soft);     color: var(--ok); }
.dash-status--warn   { background: var(--warn-soft);   color: var(--warn); }
.dash-status--danger { background: var(--danger-soft); color: var(--danger); }
.dash-status--info   { background: var(--info-soft);   color: var(--info); }

/* ---------- بلاطات "محتاج تدخّل" ---------- */

.dash-alerts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 12px;
}

.alert-tile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border-radius: var(--r-md);
    background: var(--card-bg);
    border: 1px solid var(--border-c);
    text-decoration: none !important;
    transition: border-color .15s ease, transform .15s ease;
}
.alert-tile:hover { transform: translateY(-1px); border-color: var(--border-strong); }

.alert-tile__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 15px;
    flex: none;
}
.alert-tile__body { display: flex; flex-direction: column; min-width: 0; }
.alert-tile__value {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}
.alert-tile__label {
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alert-tile__hint { font-size: 11px; color: var(--text-3); }

.alert-tile--danger .alert-tile__icon { background: var(--danger-soft); color: var(--danger); }
.alert-tile--danger .alert-tile__value { color: var(--danger); }
.alert-tile--warn .alert-tile__icon { background: var(--warn-soft); color: var(--warn); }
.alert-tile--warn .alert-tile__value { color: var(--warn); }

/* صفر معناه مفيش شغل — البلاطة بتهدى بدل ما تفضل صارخة */
.alert-tile--quiet .alert-tile__icon { background: var(--surface-3); color: var(--text-3); }
.alert-tile--quiet .alert-tile__value { color: var(--text-3); }

/* ---------- لوحة الالتزام ---------- */

.sla-panel {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 26px;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-c);
    border-radius: var(--r-md);
    padding: 22px;
}

.sla-dial { display: grid; place-items: center; }
.sla-dial__ring {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ok) 0 var(--pct), var(--surface-3) var(--pct) 100%);
}
/* الرقم والعنوان لازم يقعدوا في نص الدائرة بالظبط. الـ flex مع
   justify-content:center بيوزّع المجموعة كلها حوالين المنتصف، والـ line-height
   المضبوط بيمنع المسافة الزيادة اللي كانت بتزحلق الرقم لفوق. */
.sla-dial__hole {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    line-height: 1;
}
.sla-dial__hole b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.sla-dial__hole small {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-3);
    margin: 0;
}

.sla-bars { display: flex; flex-direction: column; gap: 15px; }
.sla-bar { display: flex; align-items: center; gap: 13px; font-size: 13px; }
.sla-bar__name { width: 104px; flex: none; color: var(--text-2); }
.sla-bar__track {
    flex: 1;
    height: 9px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.sla-bar__fill { display: block; height: 100%; border-radius: 999px; }
.sla-bar__fill--ok { background: var(--ok); }
.sla-bar__fill--warn { background: var(--warn); }
.sla-bar__fill--danger { background: var(--danger); }
.sla-bar__val {
    width: 58px;
    text-align: start;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sla-bar__val--ok { color: var(--ok); }
.sla-bar__val--warn { color: var(--warn); }
.sla-bar__val--danger { color: var(--danger); }

/* ---------- كروت المجموعات ---------- */

.dash-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 14px;
}

.group-card {
    background: var(--card-bg);
    border: 1px solid var(--border-c);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.group-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-c);
    text-decoration: none !important;
    color: var(--text-color) !important;
}
.group-card__head:hover .group-card__go { transform: translateX(-3px); opacity: 1; }

.group-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--primary-color);
    display: grid;
    place-items: center;
    font-size: 13px;
    flex: none;
}
.group-card__title { font-weight: 600; font-size: 14px; }
.group-card__go {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--text-3);
    opacity: .6;
    transition: transform .15s ease, opacity .15s ease;
}

.group-card__total {
    padding: 15px 16px 12px;
    display: flex;
    align-items: baseline;
    gap: 9px;
    border-bottom: 1px solid var(--border-c);
}
.group-card__total b {
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.group-card__total span { font-size: 12px; color: var(--text-3); }

.group-card__list { list-style: none; margin: 0; padding: 6px; }
.group-card__list li + li { margin-top: 1px; }
.group-card__list a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    text-decoration: none !important;
    color: var(--text-2) !important;
    font-size: 13px;
}
.group-card__list a:hover { background: var(--surface-2); color: var(--text-color) !important; }

.group-card__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-card__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}
.group-card__value.is-on { color: var(--text-color); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }
.dot--info { background: var(--info); }
.dot--mute { background: var(--border-strong); }

/* ---------- الجدول واللوحة ---------- */

.dash-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-c);
    border-radius: var(--r-md);
    overflow: hidden;
}

/* ---------- الأرقام الإجمالية ---------- */

.dash-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
}
.total-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-c);
    border-radius: var(--r-md);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.total-tile__label { font-size: 12px; color: var(--text-3); }
.total-tile__value {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.total-tile__value--ok { color: var(--ok); }
.total-tile__value--warn { color: var(--warn); }
.total-tile__value--info { color: var(--info); }
.total-tile__value--mute { color: var(--text-3); }

@media (max-width: 767px) {
    .sla-panel { grid-template-columns: 1fr; }
    .dash-head { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   6. الأزرار
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--r-sm) !important;
    font-weight: 500;
    font-size: 14px;
    padding: 9px 16px;
    border-width: 1px;
    box-shadow: none !important;
}

.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn-success { background-color: var(--ok) !important;     border-color: var(--ok) !important;     color: var(--on-accent) !important; }
.btn-danger  { background-color: var(--danger) !important; border-color: var(--danger) !important; color: var(--on-accent) !important; }
.btn-warning { background-color: var(--warn) !important;   border-color: var(--warn) !important;   color: var(--on-accent) !important; }
.btn-info    { background-color: var(--info) !important;   border-color: var(--info) !important;   color: var(--on-accent) !important; }

.btn-secondary,
.btn-light {
    background-color: var(--card-bg) !important;
    border-color: var(--border-c) !important;
    color: var(--text-2) !important;
}
.btn-secondary:hover,
.btn-light:hover {
    color: var(--text-color) !important;
    border-color: var(--border-strong) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: var(--on-accent) !important;
}

.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. حقول الإدخال
   -------------------------------------------------------------------------- */

.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-color) !important;
}

.form-control::placeholder { color: var(--text-3) !important; }

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

label {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 5px;
}

/* قائمة البحث المنسدلة */
.select2-dropdown {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--shadow-md) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-soft) !important;
    color: var(--primary-color) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-color) !important;
}

/* --------------------------------------------------------------------------
   8. القائمة الجانبية
   -------------------------------------------------------------------------- */

.vertical-menu,
body[data-sidebar="dark"] .vertical-menu {
    background-color: var(--sidebar-bg) !important;
    border-inline-start: 1px solid var(--border-c);
}

#sidebar-menu ul li a {
    color: var(--text-2) !important;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    margin: 1px 8px;
    position: relative;
}

#sidebar-menu ul li a i {
    color: var(--text-3) !important;
    font-size: 15px;
    min-width: 22px;
}

#sidebar-menu ul li a:hover {
    background-color: var(--surface-3) !important;
    color: var(--text-color) !important;
}
#sidebar-menu ul li a:hover i { color: var(--text-color) !important; }

#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active {
    background-color: var(--accent-soft) !important;
    color: var(--primary-color) !important;
    font-weight: 500;
}
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i { color: var(--primary-color) !important; }

/* الشريط الصغير اللي بيوضّح الصفحة الحالية */
#sidebar-menu ul li.mm-active > a::before,
#sidebar-menu ul li a.active::before {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 3px;
    background-color: var(--primary-color);
}

#sidebar-menu ul li ul.sub-menu li a {
    font-size: 13px;
    padding: 7px 44px 7px 16px;
}

/* --------------------------------------------------------------------------
   9. الشريط العلوي
   -------------------------------------------------------------------------- */

#page-topbar,
.navbar-header {
    background-color: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--border-c);
    box-shadow: none !important;
}

.app-search .form-control {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-sm) !important;
}

.dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 6px;
}
.dropdown-item {
    color: var(--text-2) !important;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: 14px;
}
.dropdown-item:hover {
    background-color: var(--surface-3) !important;
    color: var(--text-color) !important;
}

/* --------------------------------------------------------------------------
   10. التنبيهات والنوافذ
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: 14px;
    padding: 12px 16px;
}
.alert-success { background-color: var(--ok-soft) !important;     color: var(--ok) !important;     border-color: var(--ok) !important; }
.alert-warning { background-color: var(--warn-soft) !important;   color: var(--warn) !important;   border-color: var(--warn) !important; }
.alert-danger  { background-color: var(--danger-soft) !important; color: var(--danger) !important; border-color: var(--danger) !important; }
.alert-info    { background-color: var(--info-soft) !important;   color: var(--info) !important;   border-color: var(--info) !important; }

.modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-md) !important;
}
.modal-header,
.modal-footer { border-color: var(--border-c) !important; }

/* --------------------------------------------------------------------------
   11. الترقيم وأدوات الجداول
   -------------------------------------------------------------------------- */

.page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-c) !important;
    color: var(--text-2) !important;
    border-radius: var(--r-sm) !important;
    margin: 0 2px;
}
.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-accent) !important;
}
.page-item.disabled .page-link { color: var(--text-3) !important; opacity: .6; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-c) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-color) !important;
}

/* --------------------------------------------------------------------------
   12. تفاصيل
   -------------------------------------------------------------------------- */

hr { border-color: var(--border-c) !important; }

.text-muted { color: var(--text-3) !important; }

::selection {
    background: var(--accent-soft);
    color: var(--primary-color);
}

/* الطباعة: شريط الحالة مبيظهرش على الورق، فالنص هو اللي بيوصل المعلومة */
@media print {
    body table.table tbody tr > td { background: none !important; }
}

/* ==========================================================================
   13. الموبايل

   المراكز والفنيين بيفتحوا النظام من التليفون. اللي كان بيحصل قبل كده:

     - الشريط العلوي مجموع عرضه ٧٦٣ بكسل في شاشة ٣٧٥، فمجموعة الأزرار
       التالتة (الإشعارات، تبديل الوضع، حساب المستخدم) كانت بتتزق بره
       الشاشة تمامًا — إحداثياتها بالسالب. يعني مفيش تسجيل خروج من التليفون.
     - جدول التذاكر عرضه ٦٢٦٢ بكسل بـ ٣٤ عمود. تقنيًا بيتزحلق، عمليًا لأ.
     - أزرار الفلاتر بتتكدس فوق بعضها وتاخد نص الشاشة.

   الحل هنا CSS بالكامل — مفيش أي تغيير في الـ HTML ولا في المنطق، فالشكل
   على الكمبيوتر ما اتلمسش خالص.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ---------- الشريط العلوي ---------- */

    .navbar-header {
        flex-wrap: wrap;
        padding: 6px 10px !important;
        gap: 6px;
        height: auto !important;
        min-height: 58px;
    }

    /* البحث ينزل سطر لوحده بعرض الشاشة، فالأزرار تلاقي مكانها */
    .navbar-header > div:nth-child(2) {
        order: 3;
        flex: 1 0 100%;
        padding: 0 !important;
        margin-bottom: 4px;
    }
    .navbar-header > div:nth-child(2) .app-search,
    .navbar-header > div:nth-child(2) form,
    .navbar-header > div:nth-child(2) .position-relative { width: 100% !important; }
    .navbar-header > div:nth-child(2) input { width: 100% !important; }

    .navbar-header > div:nth-child(1) { order: 1; }
    .navbar-header > div:nth-child(3) {
        order: 2;
        margin-inline-start: auto;
        display: flex !important;
        align-items: center;
    }

    /* مساحة لمس محترمة لكل زراير الهيدر */
    .navbar-header .header-item {
        min-width: 42px;
        min-height: 42px;
        padding: 0 8px !important;
    }

    /* الاسم الطويل بياخد مكان الأزرار — الأيقونة تكفي */
    .navbar-header .d-none.d-xl-inline-block,
    .navbar-header .user-name-text { display: none !important; }

    #page-topbar { position: static; }
    .main-content, .page-content { padding-top: 12px !important; }

    /* ---------- المسافات العامة ---------- */

    .page-content { padding-inline: 12px !important; }
    .container-fluid { padding-inline: 0 !important; }
    .card-body { padding: 14px !important; }
    .page-title-box { flex-wrap: wrap; gap: 10px; }
    .page-title-box h4 { font-size: 17px !important; }

    /* الزراير تبقى قابلة للضغط بإصبع */
    .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { min-height: 36px; }

    /* صفوف الأزرار فوق الجداول: شريط أفقي بدل تكديس رأسي */
    .page-content .btn-group,
    .dt-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .dt-buttons .btn { flex: none; }

    /* ---------- الحقول ---------- */

    .form-group, .form-row > [class*="col-"] { width: 100%; }
    .form-control,
    .select2-container--default .select2-selection--single {
        height: 44px !important;
        /* ١٦ بكسل يمنع iOS من عمل زوم تلقائي على الحقل */
        font-size: 16px !important;
    }
    .select2-container { width: 100% !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        max-width: none !important;
    }

    /* ---------- النوافذ ---------- */

    .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
    .modal-content { border-radius: 0 !important; min-height: 100vh; }

    /* ---------- الجداول العادية ---------- */

    .table-responsive { -webkit-overflow-scrolling: touch; }
    table.table > tbody > tr > td,
    table.table > thead th { padding: 9px 10px; font-size: 13px; }

    /* ---------- جدول التذاكر: كارت بدل صف ----------

       ٣٤ عمود مالهاش لازمة على تليفون. الأعمدة اللي بتفضل هي اللي الموظف
       بيحتاجها وهو واقف قدام العميل: الكود، الاسم، الحالة، الوقت المتبقي،
       والتليفون. الباقي موجود في صفحة التذكرة نفسها.
    */

    /* الحاوية بتلف الجدول كله (هيدر وجسم) — مش متقسّمة لجزئين */
    .dataTables_scroll {
        overflow: visible !important;
        width: 100% !important;
    }

    .dataTables_scroll > table,
    .dataTables_scroll table.dataTable {
        width: 100% !important;
        table-layout: auto !important;
        display: block;
    }

    .dataTables_scroll thead { display: none !important; }
    .dataTables_scroll tbody { display: block; width: 100%; }

    /* ترتيب الكارت مش ترتيب الأعمدة: الوقت المتبقي عمود رقم ٢ في الجدول،
       بس مكانه الطبيعي في الكارت جنب الكود. الـ grid بيسمح نعيد ترتيبهم
       من غير ما نلمس الـ HTML:

           [ الكود        الوقت المتبقي ]
           [ اسم العميل                 ]
           [ التليفون          الحالة   ]
    */
    .dataTables_scroll tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 3px 10px;
        background: var(--card-bg);
        border: 1px solid var(--border-c);
        border-radius: var(--r-md);
        margin-bottom: 10px;
        padding: 12px 14px;
        position: relative;
        text-align: start;
    }

    .dataTables_scroll tbody td {
        display: none !important;
        width: auto !important;
        max-width: none !important;
        border: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        background: none !important;
    }

    /* ٣ الكود · ٤ اسم العميل · ١٠ التليفون · ٧ الحالة · ٢ الوقت المتبقي */
    .dataTables_scroll tbody td:nth-child(3),
    .dataTables_scroll tbody td:nth-child(4),
    .dataTables_scroll tbody td:nth-child(10) {
        display: block !important;
    }

    /* الكود — أعلى اليمين */
    .dataTables_scroll tbody td:nth-child(3) {
        grid-row: 1; grid-column: 1;
        font-size: 15px;
        font-weight: 700;
    }
    /* الوقت المتبقي — أعلى الشمال، جنب الكود */
    .dataTables_scroll tbody td:nth-child(2) {
        display: block !important;
        grid-row: 1; grid-column: 2;
        justify-self: end;
    }
    /* اسم العميل — سطر كامل */
    .dataTables_scroll tbody td:nth-child(4) {
        grid-row: 2; grid-column: 1 / -1;
        font-size: 14px;
        color: var(--text-color) !important;
    }
    /* التليفون — أسفل اليمين */
    .dataTables_scroll tbody td:nth-child(10) {
        grid-row: 3; grid-column: 1;
        font-size: 13px;
        color: var(--text-3) !important;
        font-variant-numeric: tabular-nums;
    }
    /* الحالة — أسفل الشمال */
    .dataTables_scroll tbody td:nth-child(7) {
        display: block !important;
        grid-row: 3; grid-column: 2;
        justify-self: end;
    }

    /* شريط الحالة على حافة الكارت كله */
    .dataTables_scroll tbody tr.sla-row-safe    { border-inline-start: 3px solid var(--ok) !important; }
    .dataTables_scroll tbody tr.sla-row-warning { border-inline-start: 3px solid var(--warn) !important; }
    .dataTables_scroll tbody tr.sla-row-danger,
    .dataTables_scroll tbody tr.sla-row-breached { border-inline-start: 3px solid var(--danger) !important; }
    .dataTables_scroll tbody tr > td:first-child { border-inline-start: 0 !important; }

    /* الأعمدة المثبّتة بتكرّر البيانات فوق الكارت */
    .DTFC_LeftWrapper, .DTFC_RightWrapper,
    .dataTables_scrollHead, .dataTables_scrollFoot { display: none !important; }

    /* ---------- الرئيسية ---------- */

    .dash-head { flex-direction: column; align-items: stretch; }
    .dash-head__actions .btn { flex: 1; }
    .dash-alerts { grid-template-columns: 1fr 1fr; gap: 8px; }
    .alert-tile { padding: 12px; gap: 10px; }
    .alert-tile__icon { width: 34px; height: 34px; font-size: 13px; }
    .alert-tile__value { font-size: 19px; }
    .alert-tile__label { font-size: 12px; white-space: normal; }
    .alert-tile__hint { display: none; }
    .dash-groups { grid-template-columns: 1fr; }
    .sla-panel { padding: 16px; gap: 18px; }
    .sla-bar__name { width: 82px; font-size: 12px; }
    .dash-totals { grid-template-columns: 1fr 1fr; }
    .dash-layout-switch { padding: 10px 12px 0; }

    /* زرار المساعد الذكي بيغطي آخر الصفحة */
    .page-content { padding-bottom: 84px !important; }
}

/* الشاشات الصغيرة جدًا */
@media (max-width: 359.98px) {
    .dash-alerts, .dash-totals { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}