/* ==========================================================================
   طبقة الصقل الاحترافي — تُحمَّل بعد MudBlazor لتتفوق عليه عند التعارض
   ========================================================================== */

/* --- رموز الألوان الموحَّدة لكل جدول/تبويب في النظام ---
   كانت خلفية الرأس وتظليل الـhover تتكرر بقيم قريبة لكن غير متطابقة
   حرفياً بين .mud-table العامة و.workers-table و.expiry-table (فروق
   بضع نقاط فقط بالـhex، أثرها غير محسوس لكنه غير احترافي عند المقارنة
   المباشرة). كذلك كانت كلها رمادية محايدة تماماً بلا أي صلة بلون
   الهوية (Ink/Brass في AppTheme.cs) - رمادٍ "غير مقصود" بدل رمادٍ
   "مُختار". هنا مصدر واحد: انحياز خفيف جداً نحو Ink (بيان أزرق-أخضر)
   بدل رمادٍ محايد صرف، يُستخدَم في كل جدول/تبويب بلا استثناء. */
:root {
    --tbl-head-bg: #EEF6FC;     /* رأس الجدول - أزرق قوى مخفَّف (تحديث 2026-08-18) */
    --tbl-row-hover: #E1EEF9;   /* عند مرور المؤشر - أزرق قوى واضح */
    --tbl-row-stripe: #F7FAFD;  /* التظليل المتبادل بين الصفوف - بحري سماوي فاتح */

    /* تبويبات النظام (.app-tabs، عبر مكوّن AppTabs.razor المشترك) - قالب
       واحد لكل شريط تبويبات بالنظام بلا استثناء: خلفية بيضاء، تتحول
       لأزرق قوى الأساسي عند الوقوف على التبويب - نفس أزرق الهوية الجديد
       لتناسق تام مع بقية النظام. */
    --app-tab-active-bg: #0087D1;    /* Ink - أزرق قوى الحيوي */
    --app-tab-active-hover: #E1EEF9; /* نفحة زرقاء قوى خفيفة */

    /* ظلال معاصرة موحَّدة - أرقّ من ظلال MudBlazor الافتراضية الصلبة،
       بأسلوب بطاقات المنصات الحكومية السعودية الحديثة. */
    --shadow-card: 0 1px 2px rgba(11, 37, 64, 0.05), 0 1px 3px rgba(11, 37, 64, 0.07);
    --shadow-card-hover: 0 4px 12px rgba(11, 37, 64, 0.09), 0 2px 4px rgba(11, 37, 64, 0.05);
}

/* بطاقات وأزرار: ظل أنيق موحَّد بدل الحدود القاسية أو الظلال الافتراضية */
.mud-paper, .mud-card {
    box-shadow: var(--shadow-card) !important;
}
.mud-paper[elevation="0"] { box-shadow: none !important; }

/* تأثير التمرير الطفيف على البطاقات - يعطي إحساس "حي" بلا مبالغة */
.stat-card {
    transition: box-shadow .2s ease, transform .15s ease;
}
.stat-card:hover { box-shadow: var(--shadow-card-hover); }

/* --- الخط: أرقام جدولية (tabular) ضرورية لأي جدول مالي، فتتراصف الخانات
       عمودياً بدقة بدل أن ترقص يميناً ويساراً مع كل رقم --- */
body,
.mud-typography,
.mud-input-root {
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.mud-table-cell,
.mud-input-slot input {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ==========================================================================
   الجداول
   ========================================================================== */

.mud-table-container {
    border-radius: 6px;
}

/* رأس الجدول: ثابت بصرياً، بحروف أصغر وأثقل — يفصل العناوين عن البيانات */
.mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
    background-color: var(--tbl-head-bg);
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* لا حاجة لقاعدة hover/striped منفصلة هنا: MudBlazor يرسمها بنفسه عبر
   --mud-palette-table-hover/--mud-palette-table-striped (أنظر
   AppTheme.cs TableHover/TableStriped - مضبوطتان على --tbl-row-hover/
   --tbl-row-stripe نفسيهما، فتُطابق كل جداول MudTable العادية تلقائياً
   بلا أي CSS إضافي هنا). */

.mud-table-body .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EFF2F3;
}

.mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

/* --- شريط الترقيم: كان محشوراً. نمنحه مساحة تنفّس وفاصلاً علوياً واضحاً --- */
.mud-table-pagination {
    border-top: 1px solid var(--mud-palette-divider);
    background-color: var(--tbl-row-stripe);
    padding: 6px 16px;
    min-height: 52px;
}

.mud-table-pagination .mud-table-pagination-toolbar {
    min-height: 52px;
    gap: 20px;
}

.mud-table-pagination .mud-table-pagination-caption,
.mud-table-pagination .mud-table-pagination-information {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin: 0 4px;
    white-space: nowrap;
}

.mud-table-pagination .mud-select {
    margin: 0 8px;
    min-width: 72px;
}

.mud-table-pagination .mud-table-pagination-actions {
    margin-inline-start: 8px;
    gap: 2px;
}

/* ==========================================================================
   البطاقات والأسطح
   ========================================================================== */

.mud-paper {
    border-color: var(--mud-palette-divider);
}

.mud-card {
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 1px 2px rgba(16, 34, 42, 0.04);
}

.mud-card-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #F0F3F4;
}

/* علم الجنسية (NationalityFlag.razor) - صورة SVG محلية بدل إيموجي
   لا يعرضه ويندوز كعلم ملوّن (انظر التعليق في NationalityFlagHelper.cs) */
.nationality-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(16, 34, 42, 0.12);
    vertical-align: middle;
    margin-inline-end: 6px;
    flex-shrink: 0;
}

/* بطاقة إحصائية: الشريط الجانبي هو ما يحمل الدلالة اللونية، لا خلفية صارخة */
.stat-card {
    border: 1px solid var(--mud-palette-divider);
    border-inline-start: 3px solid var(--stat-accent, var(--mud-palette-primary));
    border-radius: 6px;
    background: #fff;
    padding: 16px;
    height: 100%;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    display: block;
    margin-bottom: 6px;
}

.stat-card .stat-value {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--stat-accent, var(--mud-palette-text-primary));
}

.stat-card .stat-meta {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
    display: block;
}

.stat-tile {
    border-radius: 6px;
    padding: 4px 8px;
    transition: background-color 0.15s;
}

.stat-tile:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.stat-card.clickable {
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.stat-card.clickable:hover {
    box-shadow: 0 2px 8px rgba(16, 34, 42, 0.1);
    transform: translateY(-1px);
}

/* رقم قابل للنسخ بضغطتين - أنظر CopyableText.razor */
.copyable-text {
    cursor: copy;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px dashed transparent;
}

.copyable-text:hover {
    border-bottom-color: var(--mud-palette-text-secondary);
}

/* ==========================================================================
   خانات أرقام صفحة الموظفين - رقم رئيسي + سطر تفصيل، وتعمل كفلتر بالنقر
   ========================================================================== */

/* شريط تقرير واحد: كل الخانات في صف أفقي واحد تفصلها خطوط رفيعة - لا
   بطاقات منفصلة. على الشاشات الضيّقة ينزلق الشريط أفقياً بدل أن يتكسّر
   لأعمدة، فيبقى "سطر التقرير" سطراً واحداً دائماً. */
.wstat-grid {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

.wstat {
    position: relative;
    flex: 1 1 0;
    min-width: 150px;
    padding: 14px 18px;
    cursor: pointer;
    border-inline-end: 1px solid var(--mud-palette-divider);
    transition: background-color 0.15s;
}

.wstat:last-child {
    border-inline-end: none;
}

.wstat:hover {
    background: var(--tbl-row-hover);
}

/* الخانة المفعَّلة كفلتر - شريط علوي بلون الخانة + خلفية خفيفة */
.wstat.on {
    background: color-mix(in srgb, var(--c, #0087D1) 7%, transparent);
}

.wstat.on::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--c, var(--mud-palette-primary));
}

/* الأيقونة والرقم في سطر واحد - أفقي لا عمودي، ليقرأ الصف كتقرير */
.wstat-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.wstat-ic {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--c, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--c, #0087D1) 12%, transparent);
}

.wstat-ic .mud-icon-root { font-size: 1.05rem; }

.wstat-val {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums lining-nums;
}

.wstat-lbl {
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    margin-top: 7px;
    white-space: nowrap;
}

.wstat-sub {
    font-size: 0.67rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   جدول الموظفين - نفس معالجة الجدول في تصميم mmmm4 المرجعي.

   مفتاح الاتساق البصري (لماذا لا تبدو الصفوف "مكركبة"):
   ١) عرض ثابت لكل عمود، فلا يتمدّد عمود على حساب آخر من صف لآخر.
   ٢) كل خلية ذات سطرين تستخدم نفس البنية (.cell-stack) بارتفاع سطر
      موحَّد، فتقع الأسطر الأولى في خط أفقي واحد عبر كل الأعمدة، وكذلك
      الأسطر الثانية - وهذا وحده ما يصنع إحساس "الجدول المنتظم".
   ٣) كل الأرقام بأرقام جدولية (tabular-nums) فتتساوى عروض الخانات.
   ٤) السطر الثانوي (أرقام المنشأة) داخل شريط بخلفية خفيفة، فيُقرأ
      كمجموعة واحدة لا كنص سائب بأحجام مختلفة.
   ========================================================================== */

.workers-table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    background: var(--tbl-head-bg);
    white-space: nowrap;
}

.workers-table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.workers-table tbody tr:hover {
    background: var(--tbl-row-hover);
}

/* الخط العمودي الملوَّن في بداية كل صف - يرثه أول عمود من متغيّر
   --row-accent الذي يضعه RowStyleFunc على الصف (أنظر Workers.razor).
   في RTL "بداية الصف" هي الحافة اليمنى، أي مباشرةً قبل اسم العامل. */
.workers-table tbody td:first-child {
    border-inline-start: 3px solid var(--row-accent, transparent);
}

.workers-table thead th:first-child {
    border-inline-start: 3px solid transparent;
}

/* (١) عروض ثابتة - تمنع تراقص الأعمدة بين الصفوف */
.workers-table .col-worker  { width: 24%; }
.workers-table .col-iqama   { width: 11%; }
.workers-table .col-exp     { width: 16%; }
.workers-table .col-status  { width: 9%; }
.workers-table .col-est     { width: 22%; }
.workers-table .col-agent   { width: 9%; }
.workers-table .col-sponsor { width: 9%; }
.workers-table .col-actions { width: 90px; text-align: end; }

/* (٢) بنية موحَّدة لكل خلية ذات سطرين */
.workers-table .cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.workers-table .cell-title {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* اسم طويل يُقصّ بثلاث نقاط بدل أن يلفّ ويُطيل الصف - على العنصر النصّي
   نفسه حصراً، لا على حاوية flex الأب. علّة مُصحَّحة هنا (رُصِدت على الجوال
   2026-08-27): overflow:hidden + white-space:nowrap على حاوية flex تحوي
   عقدة نص خام بجانب مكوّن (FollowUpBadges) تجعل خوارزمية flex تنهار على
   شاشات ضيّقة جداً فيختفي الاسم كلياً بلا أي محتوى ظاهر - min-width:0 هنا
   يسمح للنص بالانكماش الصحيح دون التأثير على المكوّن المجاور. */
.workers-table .cell-title-text,
.workers-table .cell-title > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.workers-table .cell-sub {
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workers-table .muted-cell {
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
}

/* ===== بطاقات الموظفين المشتبه فيهم (/workers/suspicious) =====
   شبكة بطاقات لا جدول: كل عامل يحمل أسباب متعدّدة + ملاحظات نصّية حرّة
   لا تُقرأ في خلية ضيّقة. عمود واحد على الجوال، عمودان على الشاشات الواسعة. */
.susp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 1100px) {
    .susp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.susp-card {
    padding: 14px 16px;
    border-inline-start: 3px solid var(--mud-palette-warning);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.susp-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* شريط السياق: المنشأة/الكفيل/الوكيل/الجوال - يلفّ على أسطر بحرّية */
/* صف الإجراءات السريعة أعلى كل بطاقة اشتباه - تعديل/تغيير ارتباط/دمج
   بلا مغادرة الصفحة. حدّ فاصل خفيف يفصلها بصرياً عن رأس البطاقة. */
.susp-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-divider);
}

.susp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.susp-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.susp-meta .mud-icon-root {
    font-size: 0.9rem;
    color: var(--mud-palette-text-disabled);
}

.susp-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 4px;
}

.susp-reasons ul {
    margin: 0;
    padding-inline-start: 18px;
}

.susp-reasons li {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--mud-palette-warning-darken);
}

.susp-notes {
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    padding: 8px 10px;
}

.susp-note {
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 2px 0;
}

.susp-note + .susp-note {
    border-top: 1px dashed var(--mud-palette-divider);
}

.susp-ref {
    font-size: 0.68rem;
    color: var(--mud-palette-text-disabled);
}

/* سبب الاشتباه في شاشة /data-review - نصّ قد يجمع أسباباً عدّة بفاصل " | "،
   فيُسمح له باللفّ على أسطر بخلاف بقية خلايا الجدول التي تُقصّ بنقاط. */
.review-table .review-note {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    white-space: normal;
    max-width: 60ch;
}

/* السطر الثانوي تحت اسم الكفيل عند عرض المدينة/العنوان الوطني - أيقونة
   موقع صغيرة باهتة + النص، بنفس ارتفاع باقي أسطر cell-sub. */
.workers-table .locality-sub {
    display: flex;
    align-items: center;
    gap: 3px;
}

.workers-table .locality-icon {
    font-size: 0.85rem;
    width: 0.85rem;
    height: 0.85rem;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

/* (٣) الأرقام السميكة: الإقامة والتاريخ الميلادي */
.workers-table .num-strong {
    font-weight: 600;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.workers-table .exp-main {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.workers-table .exp-hijri {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* (٤) أرقام المنشأة كمجموعة واحدة داخل شريط خفيف */
.workers-table .est-numbers {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 5px;
    background: #F2F6F7;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.workers-table .est-numbers .num-sep {
    margin: 0 6px;
    opacity: 0.55;
}

.worker-main-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.worker-main-cell .type-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mud-palette-action-default-hover);
}

/* أزرار الإجراءات: العين وزر النقاط الثلاث.
   المشكلة التي كانت تُنزِل العين عن مستوى النقاط: MudTooltip يلفّ الزر في
   عنصر inline يُحاذى بخط الأساس (baseline) لا بالمنتصف، وارتفاع الزرّين
   مختلف فيبدو أحدهما هابطاً. الحل: إجبار كل الأغلفة على inline-flex
   بمحاذاة وسطية وارتفاع موحَّد - فيستويان تماماً مهما اختلف محتواهما. */
.worker-action-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.worker-action-icons > *,
.worker-action-icons .act-wrap,
.worker-action-icons .mud-menu {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.worker-action-icons .mud-button-root.mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.worker-action-icons .mud-icon-root {
    font-size: 1.15rem;
}

/* ==========================================================================
   جدول الوثائق وتواريخ الصلاحية (ExpiryTable) - نفس لغة جدول العمال
   ========================================================================== */

.expiry-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: #fff;
}

.expiry-table {
    width: 100%;
    border-collapse: collapse;
}

.expiry-table thead th {
    text-align: start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    background: var(--tbl-head-bg);
    padding: 10px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.expiry-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    vertical-align: middle;
    white-space: nowrap;
}

.expiry-table tbody tr:last-child td {
    border-bottom: none;
}

.expiry-table tbody tr:hover {
    background: var(--tbl-row-hover);
}

/* الخط العمودي الملوَّن في بداية الصف - نفس فكرة جدول العمال */
.expiry-table tbody td:first-child {
    border-inline-start: 3px solid var(--row-accent, transparent);
}

.expiry-table thead th:first-child {
    border-inline-start: 3px solid transparent;
}

.expiry-table .doc-name {
    font-weight: 600;
    font-size: 0.82rem;
}

.expiry-table .num-strong {
    font-weight: 600;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums lining-nums;
}

.expiry-table .exp-hijri {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.expiry-table .muted-cell {
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
}

/* ==========================================================================
   القائمة الجانبية
   ========================================================================== */

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.nav-section {
    display: block;
    padding: 14px 16px 6px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

.mud-nav-link {
    font-size: 0.8125rem;
    padding-top: 8px;
    padding-bottom: 8px;
}

.mud-nav-link.active {
    background-color: rgba(14, 76, 92, 0.08) !important;
    font-weight: 600;
}

/* زر الخروج داخل قائمة الحساب */
.mud-menu-logout {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-error);
    text-align: start;
}

.mud-menu-logout:hover {
    background-color: rgba(179, 38, 30, 0.06);
}

/* ==========================================================================
   الشرائح (Chips) — لغة حالة موحّدة عبر النظام
   ========================================================================== */

.mud-chip.mud-chip-size-small {
    height: 22px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ==========================================================================
   التبويبات
   ========================================================================== */

.mud-tabs-toolbar {
    border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--tbl-row-stripe);
}

/* سحب لمسي أفقي على الجوال - شكوى مستخدم فعلية (2026-08-27): لا يمكن
   سحب التبويبات جانبياً على الجوال. السبب الفعلي (تحقّقتُ من CSS مكتبة
   MudBlazor 8.15 نفسها لا تخميناً): .mud-tabs-tabbar-content تحمل
   overflow:hidden بينما الشريط الداخلي .mud-tabs-tabbar-wrapper أعرض من
   الحاوية (width:max-content) - فالتنقّل الوحيد المتاح هو سهما JS
   الصغيران عند طرفَي الشريط، بلا أي دعم سحب لمسي أصلاً. الإصلاح أدناه
   يسمح بالتمرير اللمسي الأصلي بجانب السهمين (لا بديلاً عنهما) - **يحتاج
   اختباراً فعلياً على جهاز حقيقي** فلا أملك متصفحاً هنا للتحقق البصري. */
.mud-tabs-tabbar-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
}

.mud-tabs-tabbar-content::-webkit-scrollbar {
    display: none;
}

/* التبويب النشط: نفس نفحة Ink الخفيفة المستخدَمة في .wstat.on (خانات
   إحصاء جدول العمال القابلة للفلترة) - وسم بصري إضافي فوق الخط السفلي
   الذي يرسمه MudBlazor بنفسه من Color="Color.Primary"، بدل الاكتفاء
   بخط رفيع وحده يسهل تفويته. */
.mud-tab-active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    border-radius: 6px 6px 0 0;
}

/* غير النشط: تلميح خفيف عند المرور بدل الرمادي الافتراضي المحايد كلياً */
.mud-tab:not(.mud-tab-active):hover {
    background-color: var(--tbl-row-hover);
}

.mud-tab {
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: auto;
    padding: 0 18px;
    text-transform: none;
}

/* تبويبات النظام - كل شريط تبويبات بلا استثناء (عبر مكوّن AppTabs.razor
   المشترك، class="app-tabs" على <MudTabs>): خلفية بيضاء، والتبويب الذي
   تقف عليه حالياً وحده يتحول لأخضر بدل خلفية Ink الداكن الافتراضية.

   ⚠ عطل سابق مُصحَّح هنا: MudBlazor نفسه (Color="Color.Primary" +
   ApplyEffectsToContainer="true") يضع كلاس .mud-tabs-tabbar-primary على
   الشريط الحاوي، وهو يلوّن خلفيته Ink الداكن ونصّه أبيض (لون تباين تلقائي)
   يُورَّث لكل تبويب بداخله. نسخة سابقة هنا كانت تكتفي بتبييض خلفية كل
   تبويب بلا تحديد لونها - فبقي النص الموروَّث أبيض على خلفية بيضاء
   (تبويبات غير نشطة تختفي كلياً). كل قاعدة تحت تحدِّد الخلفية واللون معاً
   صراحةً بلا اعتماد على أي وراثة. */
.app-tabs .mud-tabs-toolbar {
    background-color: #fff !important;
}

.app-tabs .mud-tab {
    background-color: #fff !important;
    color: var(--mud-palette-text-primary) !important;
}

.app-tabs .mud-tab .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

.app-tabs .mud-tab-active {
    background-color: var(--app-tab-active-bg) !important;
    color: #fff !important;
    border-radius: 6px 6px 0 0;
}

.app-tabs .mud-tab-active .mud-icon-root {
    color: #fff !important;
}

.app-tabs .mud-tab-slider {
    background-color: var(--app-tab-active-bg) !important;
}

.app-tabs .mud-tab:not(.mud-tab-active):hover {
    background-color: var(--app-tab-active-hover) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* ==========================================================================
   عنوان الصفحة
   ========================================================================== */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.page-head .page-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   إمكانية الوصول والاستجابة
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

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

@media (max-width: 600px) {
    .mud-table-pagination .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding-block: 8px;
    }
}

/* ==========================================================================
   شريط مراحل تتبّع الخدمة (ServiceStageStepper.razor)
   ========================================================================== */

.svc-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 8px;
    flex-wrap: wrap;
}

.svc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.svc-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    background: #fff;
    border: 2px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    transition: background-color .2s, border-color .2s, color .2s;
}

.svc-step-done .svc-step-circle {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.svc-step-current .svc-step-circle {
    background: #fff;
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.svc-step-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.svc-step-current .svc-step-label,
.svc-step-done .svc-step-label {
    color: var(--mud-palette-text-primary);
}

.svc-step-line {
    flex: 1 1 40px;
    min-width: 24px;
    height: 2px;
    background: var(--mud-palette-lines-default);
    margin: 0 4px;
    margin-bottom: 22px;
    transition: background-color .2s;
}

.svc-step-line-done {
    background: var(--mud-palette-primary);
}

.svc-stepper-cancelled {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
}

/* ==========================================================================
   منتقي فئات التخصيص (AllocationCategoryPicker.razor) - بطاقات قابلة
   للنقر بدل خانات اختيار عادية، كل فئة بلونها الخاص (--cat-color مُمرَّر
   inline لكل بطاقة من AllocationCategoryInfo.ColorHex).
   ========================================================================== */

.alloc-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.alloc-picker-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    user-select: none;
}

.alloc-picker-card:hover {
    border-color: color-mix(in srgb, var(--cat-color) 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--cat-color) 4%, #fff);
}

.alloc-picker-card.selected {
    border-color: var(--cat-color);
    background: color-mix(in srgb, var(--cat-color) 8%, #fff);
    box-shadow: 0 0 0 1px var(--cat-color);
}

.alloc-picker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--cat-color) 14%, #fff);
    color: var(--cat-color);
}

.alloc-picker-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.alloc-picker-label {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alloc-picker-meta {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.alloc-picker-check {
    flex-shrink: 0;
    color: var(--cat-color);
    opacity: .55;
}

.alloc-picker-card.selected .alloc-picker-check {
    opacity: 1;
}

/* ==========================================================================
   صفحات تتبّع حالة الخدمة/التأشيرة (ServiceCaseTrackingPage/VisaCaseTrackingPage)
   وصفحات القوائم (ServicesTrackingPage/VisasTrackingPage) - يتَّم استخدام
   .stat-card العام أعلاه لبطاقات الأرقام؛ هذه القسم لعناصر مخصَّصة لهذه
   الصفحات فقط (شريط تقدُّم البند، جدول البنود بتنسيق أوضح، ملخَّص السداد).
   ========================================================================== */

/* شريط تقدّم بند فرعي واحد (بند خدمة/تأشيرة): يعرض النسبة المدفوعة بصرياً
   بدل تركها كأرقام مجرّدة يصعب استيعابها بلمحة سريعة. */
.case-item-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.case-item-progress-bar {
    height: 6px;
    background: var(--mud-palette-lines-default);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.case-item-progress-fill {
    height: 100%;
    background: #059669;
    border-radius: 3px;
    transition: width .2s ease-out;
}

.case-item-progress-fill.partial { background: #E65100; }
.case-item-progress-fill.zero { background: transparent; }

.case-item-progress-text {
    font-size: .6875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* بطاقة معلومة صغيرة أعلى صفحة الحالة (المهنة، تاريخ الإنشاء، عدد البنود...) */
.case-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    margin-bottom: 16px;
}

.case-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.case-meta-label {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.case-meta-value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* شارة صغيرة قابلة للتلوين لتصنيف حالة السداد على صف في القائمة */
.pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: var(--pay-badge-bg, var(--mud-palette-action-default-hover));
    color: var(--pay-badge-fg, var(--mud-palette-text-primary));
    white-space: nowrap;
}

.pay-badge.paid { --pay-badge-bg: #E8F5E9; --pay-badge-fg: #1B5E20; }
.pay-badge.partial { --pay-badge-bg: #FFF3E0; --pay-badge-fg: #E65100; }
.pay-badge.unpaid { --pay-badge-bg: #FFEBEE; --pay-badge-fg: #B71C1C; }

/* ==========================================================================
   شارات دورة حياة السند (VouchersListPage + طباعة السند + أرشيف كل عامل/وكيل)
   - مُعتمَد رسمياً / قيد المراجعة / ملغى - ثلاث حالات بألوان دلالية.
   ========================================================================== */
.voucher-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--vb-bg, var(--mud-palette-action-default-hover));
    color: var(--vb-fg, var(--mud-palette-text-primary));
    border: 1px solid var(--vb-border, transparent);
    white-space: nowrap;
}

.voucher-badge.confirmed { --vb-bg: #E8F5E9; --vb-fg: #1B5E20; --vb-border: #A5D6A7; }
.voucher-badge.pending   { --vb-bg: #FFF3E0; --vb-fg: #E65100; --vb-border: #FFB74D; }
.voucher-badge.voided    { --vb-bg: #FFEBEE; --vb-fg: #B71C1C; --vb-border: #EF9A9A; }

/* ==========================================================================
   رؤوس الجداول الثابتة (Sticky Headers) - عامٌّ لكل MudTable في النظام.
   السلوك: عند تمرير الصفحة (أو تمرير حاوية الجدول)، رأس الجدول يبقى
   ملتصقاً بأعلى الشاشة/الحاوية بينما تتحرك الصفوف تحته - نفس فكرة تجميد
   الصف الأول في إكسل. لا حاجة لخاصية إضافية على كل MudTable - CSS يطبَّق
   تلقائياً على كل جدول لأنه يستهدف طبقة MudBlazor الداخلية.

   قرار مقصود: نضع الالتصاق على <th> نفسها لا على <thead>، لأن MudTable
   يرندر <thead> بتموضع default (لا يقبل sticky بموثوقية)، بينما <th>
   نفسها تعمل بشكل تام. الخلفية إلزامية وإلا تظهر الصفوف خلف الرأس
   الشفاف عند التمرير.
   ========================================================================== */

.mud-table thead .mud-table-cell,
.mud-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    /* حدّ سفلي واضح يفصل الرأس عن الصفوف بصرياً وقت التمرير */
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}

/* تمرير أكثر سلاسة على أجهزة اللمس (خلف الشاشة الرئيسية) */
html { scroll-behavior: smooth; }

/* ==========================================================================
   تفضيلات المستخدم (ThemePicker.razor) - متغيّر خط عام + شارات الاختيار
   ========================================================================== */

/* تجاوز الخط الافتراضي عبر متغيّر CSS - UserPreferencesService.SetFontAsync
   يضبطه على body مباشرة، فتنتقل كل نصوص MudBlazor لخط المستخدم المختار.
   !important ضرورية لأن MudBlazor يُدرج font-family صراحة في CSS كثير. */
body[style*="--app-font-family"] {
    font-family: var(--app-font-family) !important;
}
body[style*="--app-font-family"] .mud-typography,
body[style*="--app-font-family"] .mud-input,
body[style*="--app-font-family"] .mud-button-root,
body[style*="--app-font-family"] .mud-select,
body[style*="--app-font-family"] .mud-nav-link,
body[style*="--app-font-family"] .mud-menu-item,
body[style*="--app-font-family"] .mud-table {
    font-family: var(--app-font-family) !important;
}

/* شبكة عيّنات الثيمات - بطاقة صغيرة لكل ثيم بلونها الأساسي كنقطة كبيرة
   يمنى، اسم الثيم يمين النقطة، وأيقونة صحّ لو كانت مختارة حالياً. */
.theme-swatches {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-swatch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: start;
    width: 100%;
    transition: background-color .12s ease, border-color .12s ease;
    font-family: inherit;
    font-size: .875rem;
}

.theme-swatch:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.theme-swatch.active {
    border-color: color-mix(in srgb, var(--sw) 40%, transparent);
    background-color: color-mix(in srgb, var(--sw) 8%, transparent);
}

.theme-swatch-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sw);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.theme-swatch-name {
    flex: 1 1 auto;
}

/* خيار خط واحد في القائمة - كل زر يُعرَض بخطّه فعلياً حتى يرى المستخدم
   كيف سيبدو النص قبل الاختيار. */
.font-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: start;
    width: 100%;
    margin-top: 2px;
    transition: background-color .12s ease, border-color .12s ease;
    font-size: .9rem;
}

.font-choice:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.font-choice.active {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    font-weight: 600;
}

/* ==========================================================================
   شبكة أشهر خطة الدفع (PaymentPlanHeatmap.razor) - ١٢ مربع لكل سنة بأسلوب
   متتبّعي عادات GitHub. الألوان مربوطة بمتغيّرات الثيم (نجاح/تحذير/خطأ/
   أساسي) فتتكيَّف تلقائياً مع أي ثيم يختاره المستخدم.
   ========================================================================== */

.pp-heatmap {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px 16px;
}

.pp-heatmap-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pp-heatmap-year {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    min-width: 130px;
}

.pp-year-gregorian {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.pp-year-hijri {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pp-heatmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.pp-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.08);
}

/* ===== الشبكة نفسها - مصفوفة ٤×٣ (٤ أعمدة لكل ربع سنة، ٣ صفوف للسنة) ===== */
.pp-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    max-width: 560px;   /* لا نمدد المربّعات لعرض الصفحة كاملة - تبقى مرتّبة ومقروءة */
}

@media (max-width: 500px) {
    .pp-heatmap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pp-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 5px 3px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--pp-cell-bg, var(--mud-palette-action-default-hover));
    color: var(--pp-cell-fg, var(--mud-palette-text-primary));
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: default;
    line-height: 1.15;
    overflow: hidden;
}

.pp-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.pp-cell-num {
    font-size: .65rem;
    font-weight: 700;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.pp-cell-name {
    font-size: .72rem;
    font-weight: 600;
    margin-top: 1px;
}

.pp-cell-hijri {
    font-size: .6rem;
    opacity: .7;
    margin-top: 1px;
}

.pp-cell-amount {
    font-size: .6rem;
    font-weight: 700;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.35);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ===== حالات المربّعات - الألوان مأخوذة من متغيّرات الثيم مباشرة ===== */

.pp-full, .pp-swatch.pp-full {
    --pp-cell-bg: color-mix(in srgb, var(--mud-palette-success) 78%, white);
    --pp-cell-fg: #ffffff;
}

.pp-partial, .pp-swatch.pp-partial {
    --pp-cell-bg: color-mix(in srgb, var(--mud-palette-warning) 78%, white);
    --pp-cell-fg: #3d2200;
}

.pp-overdue, .pp-swatch.pp-overdue {
    --pp-cell-bg: color-mix(in srgb, var(--mud-palette-error) 78%, white);
    --pp-cell-fg: #ffffff;
}

.pp-future, .pp-swatch.pp-future {
    --pp-cell-bg: color-mix(in srgb, var(--mud-palette-primary) 22%, white);
    --pp-cell-fg: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.pp-empty, .pp-swatch.pp-empty {
    --pp-cell-bg: var(--mud-palette-action-default-hover);
    --pp-cell-fg: var(--mud-palette-text-disabled);
    border-color: var(--mud-palette-divider);
    opacity: .6;
}

/* ==========================================================================
   حقل التاريخ الثلاثي (DateTriplet.razor) - يوم/شهر/سنة مكتوبة مباشرة
   ========================================================================== */
.date-triplet {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-triplet-label {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.date-triplet-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    padding: 4px 8px;
    transition: border-color .15s ease;
}

.date-triplet-inputs:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.dt-input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 4px 2px;
    -moz-appearance: textfield;
}

.dt-input::-webkit-inner-spin-button,
.dt-input::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}

.dt-day, .dt-month { width: 42px; }
.dt-year { width: 62px; }

.dt-sep {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* ===== تلميح تغيير عدد صفوف الجدول (اختصار Ctrl) =====
   يظهر أسفل منتصف الشاشة لحظة واحدة ثم يختفي - تأكيد بصري خاطف بلا
   إشغال مساحة دائمة ولا مقاطعة العمل. ألوانه من متغيّرات الثيم فيتبع
   أي ثيم يختاره المستخدم. */
.table-pagesize-hint {
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    z-index: 2400;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: var(--mud-palette-dark, #262b32);
    color: var(--mud-palette-dark-text, #fff);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

.table-pagesize-hint.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .table-pagesize-hint { transition: none; }
}

/* ==========================================================================
   ترقية جودة العرض - لوحة التحكم وصفحة الموظفين
   ==========================================================================
   لا تُعدَّل أي قاعدة سابقة - طبقات فوقها تعزِّز التفاعل البصري بلا كسر
   أي شيء موجود. الألوان الدلالية الست تُشتَقّ من متغيّرات الثيم النشط،
   فتتغيَّر تلقائياً مع الثيم والوضع الداكن.
   ========================================================================== */

:root {
    --tone-critical:      var(--mud-palette-error);
    --tone-critical-soft: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    --tone-warning:       var(--mud-palette-warning);
    --tone-warning-soft:  color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    --tone-positive:      var(--mud-palette-success);
    --tone-positive-soft: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    --tone-info:          var(--mud-palette-info);
    --tone-info-soft:     color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
    --tone-brand:         var(--mud-palette-primary);
    --tone-brand-soft:    color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --tone-neutral:       var(--mud-palette-text-secondary);
    --tone-neutral-soft:  color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent);

    --card-radius: 12px;
    --pill-radius: 999px;
}

/* ----- بطاقة إحصائية "برو" ----- */
.stat-card-pro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
    height: 100%;
}

.stat-card-pro::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--stat-tone, var(--tone-brand));
    opacity: .85;
}

.stat-card-pro:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: color-mix(in srgb, var(--stat-tone, var(--tone-brand)) 35%, var(--mud-palette-divider));
}

.stat-card-pro.clickable { cursor: pointer; }
.stat-card-pro.clickable:focus-visible {
    outline: 2px solid var(--stat-tone, var(--tone-brand));
    outline-offset: 2px;
}

.stat-card-pro .stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stat-card-pro .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--stat-tone-soft, var(--tone-brand-soft));
    color: var(--stat-tone, var(--tone-brand));
    transition: transform .2s ease;
}
.stat-card-pro:hover .stat-icon {
    transform: scale(1.06) rotate(-2deg);
}
.stat-card-pro .stat-icon .mud-icon-root {
    font-size: 1.35rem;
}

.stat-card-pro .stat-badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: var(--pill-radius);
    background: var(--stat-tone-soft, var(--tone-brand-soft));
    color: var(--stat-tone, var(--tone-brand));
    white-space: nowrap;
}

.stat-card-pro .stat-num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums lining-nums;
}
.stat-card-pro .stat-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}
.stat-card-pro .stat-hint {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ----- بلاطة رقم صغيرة "برو" لشريط الأرقام السريعة ----- */
.quick-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    transition: background-color .15s ease, transform .15s ease;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.quick-tile:hover {
    background: color-mix(in srgb, var(--stat-tone, var(--tone-brand)) 8%, transparent);
    transform: translateY(-1px);
}
.quick-tile:focus-visible {
    outline: 2px solid var(--stat-tone, var(--tone-brand));
    outline-offset: 2px;
}

.quick-tile .quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--stat-tone-soft, var(--tone-brand-soft));
    color: var(--stat-tone, var(--tone-brand));
    flex-shrink: 0;
}
.quick-tile .quick-icon .mud-icon-root { font-size: 1.15rem; }
.quick-tile .quick-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mud-palette-text-primary);
}
.quick-tile .quick-lbl {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    white-space: nowrap;
}

.quick-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px;
    padding: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
}

/* ----- ترقية الأيقونة الكبيرة في ترويسة الصفحة (.page-head) ----- */
.page-title > .mud-icon-root.mud-icon-size-large {
    padding: 10px;
    border-radius: 12px;
    background: var(--tone-brand-soft);
    color: var(--tone-brand) !important;
    box-sizing: content-box;
}

/* ----- لوحة المساعد الذكي ----- */
.assistant-panel {
    position: relative;
    padding: 18px 20px;
    border-radius: var(--card-radius);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--tone-brand) 6%, var(--mud-palette-surface)) 0%,
            var(--mud-palette-surface) 55%);
    border: 1px solid color-mix(in srgb, var(--tone-brand) 25%, var(--mud-palette-divider));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.assistant-panel::after {
    content: "";
    position: absolute;
    inset-block-start: -60px;
    inset-inline-end: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--tone-brand) 18%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
}
.assistant-panel .assistant-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--tone-brand-soft);
    color: var(--tone-brand);
    flex-shrink: 0;
}

/* ----- صفحة الموظفين: ترقية شريط الأرقام الحالي (.wstat) ----- */
.wstat-grid {
    box-shadow: var(--shadow-card);
    border-radius: var(--card-radius);
}
.wstat {
    transition: background-color .15s ease, transform .15s ease;
}
.wstat:hover {
    transform: translateY(-1px);
}
.wstat-ic {
    transition: transform .2s ease;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--mud-palette-primary)) 20%, transparent);
}
.wstat:hover .wstat-ic {
    transform: scale(1.08);
}
.wstat.on::before {
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.row-clickable {
    cursor: pointer;
    transition: background-color .12s ease;
}
.row-clickable:hover {
    background: var(--tbl-row-hover);
}

@media (prefers-reduced-motion: reduce) {
    .stat-card-pro,
    .stat-card-pro .stat-icon,
    .quick-tile,
    .assistant-panel::after,
    .wstat,
    .wstat-ic {
        transition: none !important;
        animation: none !important;
    }
    .stat-card-pro:hover,
    .quick-tile:hover,
    .wstat:hover {
        transform: none !important;
    }
}