/* ============================================================
   Cards WiFi Zone — Premium SaaS Theme (Light + Dark)
   مستوحى من Stripe / Vercel / Linear / Cloudflare / Notion.
   كل الألوان من محرّك التوكنز (theme-tokens.css) المشتقّ من بذرتي العلامة
   في config/theme.php. القواعد محايدة للوضع: التبديل يقلب قيم التوكنز فقط.
   نظام 8pt + زوايا موحّدة + ظلال ناعمة + تحويم سلس. متوافق RTL.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   خطوط طباعة الكروت (DejaVu) — نفس خطوط dompdf المضمّنة، مُحمّلة في المتصفح
   لتطابق معاينة الكارت مع مخرجات الطباعة الفعلية تماماً (WYSIWYG).
   ════════════════════════════════════════════════════════════ */
@font-face { font-family: 'DejaVu Sans'; src: url('/fonts/dejavu/DejaVuSans.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DejaVu Sans'; src: url('/fonts/dejavu/DejaVuSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DejaVu Sans Mono'; src: url('/fonts/dejavu/DejaVuSansMono.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DejaVu Sans Mono'; src: url('/fonts/dejavu/DejaVuSansMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
/* Almarai (OFL) — خط الكارت الاجتماعي في المعاينة، نفس ملفات الطباعة (print/cards.blade.php). */
@font-face { font-family: 'Almarai'; src: url('/fonts/almarai/Almarai-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('/fonts/almarai/Almarai-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ════════════════════════════════════════════════════════════
   1) القاعدة — خلفية التطبيق
   ════════════════════════════════════════════════════════════ */
body,
.fi-body {
    background-color: var(--cwz-bg) !important;
    /* توهّج خافت جداً من لوني العلامة في الزوايا (إحساس شبكة/منتج) */
    background-image:
        radial-gradient(1200px 700px at 100% -8%, color-mix(in oklch, var(--cwz-primary) 7%, transparent), transparent 62%),
        radial-gradient(900px 600px at -6% 110%, color-mix(in oklch, var(--cwz-accent-2) 6%, transparent), transparent 60%);
    background-attachment: fixed;
    color: var(--cwz-ink);
}
.fi-main {
    background: transparent !important;
}
.fi-page {
    color: var(--cwz-ink);
}

/* ════════════════════════════════════════════════════════════
   2) القائمة الجانبية — ريل أيقونات + Flyout (Icon Rail)
   نحيفة افتراضياً (أيقونات)، تتوسّع overlay عند التحويم أو التثبيت.
   ════════════════════════════════════════════════════════════ */
.fi-sidebar {
    background-color: var(--cwz-surface) !important;
    background-image: linear-gradient(180deg, var(--cwz-surface-top) 0%, var(--cwz-surface) 38%) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-inline-end: 1px solid var(--cwz-border-soft);
}

/* رأس القائمة: لوجو + اسم + زر تثبيت (الاسم والزر يظهران عند التوسّع) */
.fi-sidebar-header {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--cwz-border-soft);
    padding-block: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.fi-logo { color: var(--cwz-ink-strong) !important; flex: none; }
/* لوجو الموقع (صورة مربّعة) — منع سحقه أفقياً: حاويته لا تتقلّص، والصورة تحافظ على نسبتها
   وتتمركز داخل حاويتها (فتتحاذى مع عمود الأيقونات تحتها في الريل). */
.fi-sidebar-header-logo-ctn,
.fi-sidebar-header-logo-ctn > a { flex: none; display: flex; align-items: center; justify-content: center; }
.fi-sidebar-header-logo-ctn img {
    width: auto !important;
    height: 2.25rem !important;
    max-width: none !important;
    margin: 0 !important;        /* إزالة هامش Filament الافتراضي الذي كان يزيح اللوجو عن المنتصف */
    object-fit: contain;
}
.fi-sidebar-header .cwz-brand-name {
    color: var(--cwz-ink-strong);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
}

/* زر التثبيت (يُحقن عبر render hook؛ يتعامل معه sidebar-rail.js) */
.cwz-rail-pin {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-sm);
    color: var(--cwz-ink-faint);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, transform .2s ease;
}
.cwz-rail-pin:hover { background: var(--cwz-hover); color: var(--cwz-ink-strong); }
.cwz-rail-pin svg { width: 1.05rem; height: 1.05rem; }
html.cwz-rail-pinned .cwz-rail-pin { color: var(--cwz-primary); transform: rotate(45deg); }

.fi-sidebar-nav {
    /* نُبقي الحشو 8px: هامش .fi-sidebar-nav-groups السالب (-8px) من Filament يقابله،
       فتصير صفوف التحديد/الهوفر كاملة العرض (حافة لحافة) دون تجاوز. */
    padding-inline: var(--space-2);
    padding-block: var(--space-2);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
}
.fi-sidebar-nav::-webkit-scrollbar { display: none; }
.fi-sidebar-nav-groups { gap: var(--space-2); }
.fi-sidebar-group { margin-block: 0; }

/* عنوان القسم الرئيسي — أبرز وأكبر من العناصر الفرعية (تسلسل هرمي واضح) + قابل للنقر (أكورديون) */
.fi-sidebar-group-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    border-radius: 0;
    padding-inline: var(--space-3);
    padding-block: 0.4rem;
    transition: background-color 0.14s ease;
}
.fi-sidebar-group-btn:hover { background-color: var(--cwz-hover-strong); }
/* تغيّر لون أيقونة القسم بالهوفر (مثل لوحة التحكم تماماً) */
.fi-sidebar-group-btn:hover > svg.fi-icon { color: var(--cwz-ink-strong) !important; }
.fi-sidebar-group-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cwz-ink-strong) !important;
    white-space: nowrap;
    flex: 1 1 auto;
    min-inline-size: 0;
}
/* أيقونة القسم الرئيسي — بارزة بلون العلامة (هوية القسم) */
.fi-sidebar-group-btn > svg.fi-icon {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--cwz-primary) !important;
}
/* سهم الطيّ (زرّ يطبعه Filament في رأس المجموعة) — خافت وصغير */
.fi-sidebar-group-btn .fi-icon-btn {
    color: var(--cwz-ink-faint) !important;
    flex: none;
}

.fi-sidebar-item-btn {
    border-radius: 0;
    padding-inline: var(--space-3);
    padding-block: 0.45rem;
    transition: background-color 0.16s ease, color 0.16s ease;
}
.fi-sidebar-item { margin-block: 2px; }
/* عناصر فرعية — موحّدة الشكل: أصغر وأخفّ من عنوان القسم، بلا أيقونات، مُزاحة تحته */
.fi-sidebar-item-label { color: var(--cwz-ink-dim) !important; font-weight: 500; font-size: 0.85rem; white-space: nowrap; }
.fi-sidebar-item-icon { color: var(--cwz-ink-faint) !important; flex: none; width: 1.15rem; height: 1.15rem; }
/* إزاحة العناصر الفرعية: نُزيح نصّها (بحشو الزرّ) لا الصفّ، فيبقى تحديد الهوفر كامل العرض.
   (الوضع الموسّع فقط؛ تُلغى في الريل أدناه) */
.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item-btn { padding-inline-start: var(--space-5); }
/* منطقة العناصر الفرعية: خلفية غائرة خفيفة تميّزها عن عنوان القسم الرئيسي */
.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-group-items { background-color: var(--cwz-sunken); }
/* إلغاء خط/نقاط مؤشّر العناصر المجمّعة الافتراضي من Filament أمام العناصر الفرعية */
.fi-sidebar [class*="fi-sidebar-item-grouped-border-part"] { display: none !important; }

/* لوحة التحكم (عنصر علوي بلا قسم) = مستوى رئيسي مثل الأقسام: نفس حجم/لون الأيقونة وخط
   العنوان، وبلا إزاحة فيتحاذى مع عناوين الأقسام (مجموعته data-group-label فارغ). */
.fi-sidebar-group[data-group-label=""] .fi-sidebar-group-items { padding-inline-start: 0; }
.fi-sidebar-group[data-group-label=""] .fi-sidebar-item-btn { padding-inline: var(--space-3); }
.fi-sidebar-group[data-group-label=""] .fi-sidebar-item-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cwz-ink-strong) !important;
}
.fi-sidebar-group[data-group-label=""] .fi-sidebar-item-icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--cwz-primary) !important;
}
.fi-sidebar-item-btn:hover { background-color: var(--cwz-hover-strong); }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: var(--cwz-ink-strong) !important; }
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: var(--cwz-ink-strong) !important; }

/* العنصر النشط: خلفية العلامة الخفيفة + شريط جانبي مضيء + أيقونة بلون العلامة */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active {
    position: relative;
    background-color: var(--cwz-primary-soft);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--cwz-ink-strong) !important; font-weight: 700; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--cwz-primary) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.fi-sidebar-item-btn.fi-active::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0;
    background-color: var(--cwz-primary);
    box-shadow: 0 0 10px 0 var(--cwz-primary-ring);
}

/* القسم الرئيسي النشط (الأب لصفحة فرعية مفتوحة) — تمييز بخلفية خفيفة بلون العلامة +
   شريط جانبي مضيء (يظهر قُصاد أيقونة القسم في الريل المطوي ليُعرَف القسم الحالي بنظرة). */
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn {
    position: relative;
    background-color: color-mix(in srgb, var(--cwz-primary) 9%, transparent);
}
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn:hover {
    background-color: color-mix(in srgb, var(--cwz-primary) 15%, transparent);
}
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background-color: var(--cwz-primary);
    box-shadow: 0 0 10px 0 var(--cwz-primary-ring);
}
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--cwz-ink-strong) !important;
}

/* ════════════════════════════════════════════════════════════
   سلوك الريل + الـ Flyout (سطح المكتب فقط ≥1024px)
   على الموبايل تبقى قائمة Filament المنزلقة (drawer) كاملة.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* القائمة ثابتة بعرض الريل، خارج التدفّق → تتوسّع overlay دون زحزحة المحتوى */
    .fi-sidebar {
        position: fixed !important;
        inset-block-start: 0 !important;
        inset-block-end: 0 !important;
        inset-inline-start: 0 !important;
        width: var(--cwz-rail-w) !important;
        height: 100dvh !important;
        z-index: 40 !important;
        overflow: hidden !important;
        box-shadow: 1px 0 30px -22px rgb(0 0 0 / 0.9);
        transition: width 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
    }
    /* الغلاف في التدفّق يطوي، فيحجز المحتوى عرض الريل فقط */
    .fi-layout > div:has(> .fi-sidebar) { width: 0 !important; flex: none !important; min-width: 0 !important; }
    .fi-main-ctn { margin-inline-start: var(--cwz-rail-w) !important; transition: margin-inline-start 0.18s ease; }
    .fi-topbar-ctn { margin-inline-start: var(--cwz-rail-w) !important; transition: margin-inline-start 0.18s ease; }
    .fi-topbar-start .fi-logo { display: none !important; }

    /* إخفاء النصوص في وضع الريل (تظهر عند التوسّع) */
    .fi-sidebar .cwz-brand-name,
    .fi-sidebar .cwz-rail-pin,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label {
        opacity: 0;
        transition: opacity 0.12s ease;
        pointer-events: none;
    }
    .fi-sidebar-header { justify-content: center; }
    /* في الريل: نُخرج اسم العلامة وزر التثبيت من التدفّق فيتمركز اللوجو فوق عمود الأيقونات */
    .fi-sidebar .cwz-brand-name,
    .fi-sidebar .cwz-rail-pin { display: none; }

    /* التوسّع: تحويم أو تركيز (وصول بالكيبورد) أو تثبيت */
    .fi-sidebar:hover,
    .fi-sidebar:focus-within,
    html.cwz-rail-pinned .fi-sidebar {
        width: var(--cwz-rail-expanded) !important;
        box-shadow: var(--shadow-lg);
    }
    .fi-sidebar:hover .cwz-brand-name,
    .fi-sidebar:hover .cwz-rail-pin,
    .fi-sidebar:hover .fi-sidebar-item-label,
    .fi-sidebar:hover .fi-sidebar-group-label,
    .fi-sidebar:focus-within .cwz-brand-name,
    .fi-sidebar:focus-within .cwz-rail-pin,
    .fi-sidebar:focus-within .fi-sidebar-item-label,
    .fi-sidebar:focus-within .fi-sidebar-group-label,
    html.cwz-rail-pinned .cwz-brand-name,
    html.cwz-rail-pinned .cwz-rail-pin,
    html.cwz-rail-pinned .fi-sidebar-item-label,
    html.cwz-rail-pinned .fi-sidebar-group-label {
        opacity: 1;
        pointer-events: auto;
    }
    .fi-sidebar:hover .fi-sidebar-header,
    .fi-sidebar:focus-within .fi-sidebar-header,
    html.cwz-rail-pinned .fi-sidebar-header { justify-content: flex-start; }
    /* استعادة اسم العلامة وزر التثبيت في التدفّق عند التوسّع */
    .fi-sidebar:hover .cwz-brand-name,
    .fi-sidebar:focus-within .cwz-brand-name,
    html.cwz-rail-pinned .cwz-brand-name { display: block; }
    .fi-sidebar:hover .cwz-rail-pin,
    .fi-sidebar:focus-within .cwz-rail-pin,
    html.cwz-rail-pinned .cwz-rail-pin { display: inline-flex; }

    /* التثبيت يزيح المحتوى (لا overlay) ويُخفّف الظل */
    html.cwz-rail-pinned .fi-main-ctn,
    html.cwz-rail-pinned .fi-topbar-ctn { margin-inline-start: var(--cwz-rail-expanded) !important; }
    html.cwz-rail-pinned .fi-sidebar { box-shadow: 1px 0 30px -22px rgb(0 0 0 / 0.9); }
}

/* ── الريل المطوي: أيقونات الأقسام الرئيسية + الداشبورد، بإيقاع موحّد ──
   في حالة الريل النقيّة فقط (غير مثبّت + بلا تحويم/تركيز): نُظهر أيقونة كل قسم رئيسي
   (في رأسه) متمركزةً، ونُخفي نصّه وسهمه وصفوف عناصره الفرعية (بلا أيقونات). الداشبورد
   (مجموعة بلا عنوان: data-group-label فارغ) يظهر بأيقونته. عند التحويم/التثبيت يتوسّع
   لأكورديون كامل تلقائياً (الانتقاء يستثني hover/focus/pinned). */
@media (min-width: 1024px) {
    /* رأس القسم + لوحة التحكم: أيقونة متمركزة بلا حشو جانبي */
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group-btn,
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-btn {
        justify-content: center;
        padding-inline: 0;
    }
    /* إخفاء نص القسم وسهمه ونص لوحة التحكم في الريل (تبقى الأيقونة فقط متمركزة) */
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group-label,
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group-btn .fi-icon-btn,
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-label {
        display: none;
    }
    /* صفوف العناصر الفرعية للأقسام الحقيقية مخفية في الريل (بلا أيقونات)؛ الداشبورد يبقى */
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-group-items {
        display: none !important;
    }
    /* إيقاع رأسي موحّد + إلغاء إزاحة الفرعية */
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-nav-groups {
        gap: var(--space-1);
    }
    html:not(.cwz-rail-pinned) .fi-sidebar:not(:hover):not(:focus-within) .fi-sidebar-group-items {
        padding-inline-start: 0;
    }
}

/* ════════════════════════════════════════════════════════════
   2-ب) بنية القائمة: عمود مرن (الرأس + التنقّل). كتلة الحساب انتقلت للهيدر.
   ════════════════════════════════════════════════════════════ */
.fi-sidebar { display: flex; flex-direction: column; }
.fi-sidebar-nav { flex: 1 1 auto; min-height: 0; }

/* ── شارات العدّ على عناصر القائمة ── */
@media (min-width: 1024px) {
    /* في الريل: نقطة صغيرة على ركن الأيقونة (الرقم يظهر عند التوسّع) */
    .fi-sidebar-item-btn { position: relative; }
    .fi-sidebar-item-badge-ctn {
        position: absolute;
        inset-block-start: 0.3rem;
        inset-inline-start: 0.6rem;
        z-index: 1;
    }
    .fi-sidebar-item-badge-ctn .fi-badge {
        min-width: 0 !important;
        width: 0.5rem;
        height: 0.5rem;
        padding: 0 !important;
        border-radius: 9999px;
        font-size: 0 !important;        /* يخفي الرقم دون display:none */
        overflow: hidden;
        box-shadow: 0 0 0 2px var(--cwz-surface);
    }

    /* عند التوسّع: رقم عادي inline في نهاية الصف */
    .fi-sidebar:hover .fi-sidebar-item-badge-ctn,
    .fi-sidebar:focus-within .fi-sidebar-item-badge-ctn,
    html.cwz-rail-pinned .fi-sidebar-item-badge-ctn {
        position: static;
        inset: auto;
    }
    .fi-sidebar:hover .fi-sidebar-item-badge-ctn .fi-badge,
    .fi-sidebar:focus-within .fi-sidebar-item-badge-ctn .fi-badge,
    html.cwz-rail-pinned .fi-sidebar-item-badge-ctn .fi-badge {
        min-width: 1.25rem !important;
        width: auto;
        height: auto;
        padding: 0 0.45rem !important;
        border-radius: var(--radius-pill);
        font-size: 0.7rem !important;
        overflow: visible;
        box-shadow: none;
    }
}

/* ════════════════════════════════════════════════════════════
   3) الهيدر العلوي — سطح شفّاف، بحث pill
   ════════════════════════════════════════════════════════════ */
.fi-topbar {
    background-color: color-mix(in srgb, var(--cwz-surface) 82%, transparent) !important;
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--cwz-border-soft);
    box-shadow: 0 8px 28px -20px rgb(0 0 0 / 0.7);
}
.fi-topbar .fi-input-wrp {
    border-radius: var(--radius-pill);
    background-color: var(--cwz-surface-2);
    box-shadow: inset 0 0 0 1px var(--cwz-border);
}
/* هيدر أنظف: إخفاء البحث الشامل الثابت */
.fi-topbar .fi-global-search-ctn { display: none !important; }

/* ── أدوات الهيدر: لغة + حساب — أزرار متناسقة ── */
/* مبدّل اللغة: حبّة أنيقة — كرة أرضية + كود اللغة، بإطار وخلفية سطح، موحّدة الارتفاع مع الأفاتار */
.language-switch-trigger {
    width: auto !important;
    height: 2.1rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 0.7rem !important;
    border-radius: var(--radius-pill) !important;
    background: var(--cwz-surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--cwz-border) !important;
    color: var(--cwz-ink-dim) !important;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.language-switch-trigger:hover {
    background: var(--cwz-hover-strong) !important;
    box-shadow: inset 0 0 0 1px var(--cwz-ink-dim) !important;
    color: var(--cwz-ink-strong) !important;
}
/* تطبيع span كود اللغة القادم من الحزمة (يحمل text-md من Tailwind) */
.language-switch-trigger > span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
}
.language-switch-trigger::before {
    content: '';
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c3 3.5 3 14.5 0 18'/%3E%3Cpath d='M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c3 3.5 3 14.5 0 18'/%3E%3Cpath d='M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* قائمة الحساب (أفاتار) في الهيدر */
.fi-topbar .fi-user-menu .fi-avatar { width: 2.1rem; height: 2.1rem; }

/* ── قائمة اللغة المنسدلة — اللغتان معاً، النشطة مميّزة + علم لكل لغة ──
   (view مخصّص: resources/views/vendor/language-switch/switch.blade.php) */
.fls-dropdown-width.fi-dropdown-panel { min-width: 12rem; }
.fls-dropdown-width .fls-lang-item {
    gap: 0.6rem;
    color: var(--cwz-ink) !important;
}
/* هوفر/تركيز للّغة القابلة للتبديل فقط (بدل رمادي Tailwind الخام) */
.fls-dropdown-width button.fls-lang-item:hover,
.fls-dropdown-width button.fls-lang-item:focus {
    background: var(--cwz-hover-strong) !important;
}
.fls-dropdown-width .fls-lang-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cwz-ink) !important;
}
/* علم الدولة */
.fls-dropdown-width .fls-flag {
    flex: none;
    width: 1.7rem;
    height: 1.2rem;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--cwz-border), 0 1px 2px rgb(0 0 0 / 0.18);
}
/* شارة الكود (لغة بلا علم في الخريطة) — بلون العلامة */
.fls-dropdown-width .fls-code {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    color: var(--brand-primary);
}
/* اللغة النشطة — خلفية بلون العلامة + اسم بارز + علامة ✓ */
.fls-dropdown-width .fls-lang-item-active {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
    cursor: default;
}
.fls-dropdown-width .fls-lang-item-active .fls-lang-name {
    color: var(--brand-primary) !important;
    font-weight: 700;
}
.fls-dropdown-width .fls-check {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--brand-primary);
}

/* ════════════════════════════════════════════════════════════
   4) البطاقات / الأقسام / الجداول / المودالات
   ════════════════════════════════════════════════════════════ */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fieldset,
.fi-modal-window,
.fi-dropdown-panel {
    background-color: var(--cwz-card) !important;
    border: 1px solid var(--cwz-border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius-card) !important;
}
.fi-section:hover,
.fi-wi-stats-overview-stat:hover {
    border-color: color-mix(in oklch, var(--cwz-primary) 45%, var(--cwz-border)) !important;
    box-shadow: 0 12px 32px -16px color-mix(in oklch, var(--cwz-primary) 35%, transparent) !important;
}
.fi-section-content-ctn { background: transparent !important; }

/* الجداول — هيدر بلون العلامة الأساسي الصلد + نص/أيقونات بيضاء (نفس درجة رأس جدول المتصلين) */
.fi-ta-table thead th { background: var(--cwz-primary-600) !important; }
.fi-ta-header-cell,
.fi-ta-header-cell .fi-ta-header-cell-label,
.fi-ta-header-cell svg { color: var(--cwz-on-primary) !important; }
/* محاذاة fi-align-center تسري على حاوية flex الداخلية أيضاً — بدونها أعمدة View المخصّصة تبقى على البداية. */
.fi-ta-cell.fi-align-center > .fi-ta-col { justify-content: center; }
.fi-ta-row { transition: background-color 0.14s ease; }
.fi-ta-row:hover { background-color: var(--cwz-hover-2) !important; }
.fi-ta-table tbody tr:not(:last-child) .fi-ta-cell {
    border-bottom: 1px solid var(--cwz-border-soft);
}

/* ════════════════════════════════════════════════════════════
   5) الحقول والنماذج
   ════════════════════════════════════════════════════════════ */
.fi-input,
.fi-select-input,
.fi-textarea,
.fi-input-wrp {
    background-color: var(--cwz-surface-2) !important;
    border-radius: var(--radius-sm);
}
.fi-input-wrp { box-shadow: inset 0 0 0 1px var(--cwz-border); }
.fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1px var(--cwz-primary), 0 0 0 3px var(--cwz-primary-ring);
}

/* ════════════════════════════════════════════════════════════
   6) الأزرار — الأساسي بلون العلامة (يُولّده Filament من البذرة)
   ════════════════════════════════════════════════════════════ */
.fi-btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.fi-btn:active { transform: translateY(1px); }
.fi-btn.fi-color-primary {
    box-shadow: 0 6px 18px -8px var(--cwz-primary-ring);
}

/* ════════════════════════════════════════════════════════════
   7) البادجات — pill بخلفية شفافة من لون الحالة
   ════════════════════════════════════════════════════════════ */
.fi-badge { border-radius: var(--radius-pill); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   8) العناوين
   ════════════════════════════════════════════════════════════ */
.fi-header-heading { color: var(--cwz-ink-strong) !important; font-weight: 700; }
.fi-breadcrumbs-item-label { color: var(--cwz-ink-dim) !important; }
.fi-breadcrumbs-item-label:hover { color: var(--cwz-ink) !important; }

/* ════════════════════════════════════════════════════════════
   9) شريط التمرير الناعم
   ════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--cwz-border);
    border-radius: var(--radius-pill);
    border: 2px solid var(--cwz-bg);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--cwz-border), var(--cwz-ink-faint) 40%); }

/* ════════════════════════════════════════════════════════════
   10) لوحة حالة الراوترات (Status Panel widget)
   ════════════════════════════════════════════════════════════ */
.cwz-status-summary {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--cwz-success-soft);
    color: var(--cwz-success);
}
.cwz-status-empty { padding: 1.5rem 0; text-align: center; font-size: 0.85rem; color: var(--cwz-ink-dim); }
.cwz-status-list { display: flex; flex-direction: column; gap: 2px; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.cwz-status-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.6rem 0.25rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.14s ease;
}
.cwz-status-row:not(:last-child) { border-bottom: 1px solid var(--cwz-border-soft); }
.cwz-status-row:hover { background-color: var(--cwz-hover-2); }
.cwz-status-dot {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
}
.cwz-status-dot.is-online {
    background-color: var(--cwz-success);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cwz-success) 22%, transparent);
}
.cwz-status-dot.is-offline {
    background-color: var(--cwz-ink-faint);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cwz-ink-faint) 22%, transparent);
}
.cwz-status-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--cwz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwz-status-meta { flex: none; font-size: 0.78rem; color: var(--cwz-ink-dim); }

/* ════════════════════════════════════════════════════════════
   11) جدول معاملات المحفظة (Wallet page)
   ════════════════════════════════════════════════════════════ */
.cwz-tx-empty { padding: 2rem 0; text-align: center; font-size: 0.9rem; color: var(--cwz-ink-dim); }
.cwz-tx-wrap { overflow-x: auto; }
.cwz-tx-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cwz-tx-table th {
    text-align: start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cwz-ink-faint);
    padding: 0 0.75rem 0.6rem;
    border-bottom: 1px solid var(--cwz-border);
    white-space: nowrap;
}
.cwz-tx-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--cwz-border-soft); color: var(--cwz-ink); vertical-align: middle; }
.cwz-tx-table tbody tr { transition: background-color 0.14s ease; }
.cwz-tx-table tbody tr:hover { background-color: var(--cwz-hover-2); }
.cwz-tx-date { color: var(--cwz-ink-dim); white-space: nowrap; }
.cwz-tx-note { color: var(--cwz-ink-dim); }
.cwz-tx-amount-col { text-align: start; }
.cwz-tx-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cwz-tx-amount.is-in { color: var(--cwz-success); }
.cwz-tx-amount.is-out { color: var(--cwz-danger); }
.cwz-tx-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 0.18rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.cwz-tx-badge.is-in { background-color: var(--cwz-success-soft); color: var(--cwz-success); }
.cwz-tx-badge.is-out { background-color: var(--cwz-danger-soft); color: var(--cwz-danger); }

/* ════════════════════════════════════════════════════════════
   12) reduced motion
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .fi-sidebar,
    .fi-main-ctn,
    .fi-topbar-ctn,
    .fi-sidebar .cwz-brand-name,
    .fi-sidebar .cwz-rail-pin,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label,
    .cwz-account-meta,
    .fi-sidebar-item-btn,
    .fi-btn,
    .fi-ta-row,
    .fi-section,
    .cwz-status-row,
    .cwz-tx-table tbody tr { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   13) لوحة التحكم — شبكة «دفق مقسّم» متجاوبة مع تثبيت الريل وكل الشاشات
   ════════════════════════════════════════════════════════════
   الشبكة تستعلم عن العرض الفعلي للحاوية (container queries) بدل عرض الـ viewport،
   فتتكيّف تلقائياً سواء كان الريل الجانبي مثبّتاً (يزيح المحتوى) أو منطوياً، وعلى
   أي مقاس شاشة. القاعدة الأساسية (media queries) احتياطٌ للمتصفحات بلا دعم. */
.cwz-dash {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);           /* تنفّس أوسع بين البطاقات (أناقة لوحة التحكم) */
    align-items: start;            /* كل بطاقة بارتفاع محتواها (يلغي الفراغ الرأسي) */
}
.cwz-cell { display: flex; flex-direction: column; min-width: 0; }
.cwz-cell > * { width: 100%; }

/* احتياط (viewport) للمتصفحات بلا container queries */
@media (min-width: 768px) {
    .cwz-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cwz-cell--full { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
    .cwz-dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .cwz-cell--full { grid-column: 1 / -1; }
    .cwz-cell--wide { grid-column: span 7; }
    .cwz-cell--side { grid-column: span 5; }
}

/* التحسين الفعلي: تقود الأعمدةَ العرضُ الفعلي للحاوية (يتجاوب مع تثبيت الريل + أي شاشة) */
@supports (container-type: inline-size) {
    .cwz-dash-ctn { container-type: inline-size; container-name: cwz-dash; }

    /* تصفير القالب المعتمد على الـ viewport — قواعد @container أدناه تتولّى الأمر */
    .cwz-dash { grid-template-columns: 1fr; }
    .cwz-cell--full,
    .cwz-cell--wide,
    .cwz-cell--side { grid-column: auto; }

    @container cwz-dash (min-width: 48rem) {
        .cwz-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .cwz-cell--full { grid-column: 1 / -1; }
    }
    @container cwz-dash (min-width: 72rem) {
        .cwz-dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .cwz-cell--full { grid-column: 1 / -1; }
        .cwz-cell--wide { grid-column: span 7; }
        .cwz-cell--side { grid-column: span 5; }
    }
}

/* مخطّط لوحة التحكم: توسيط رأسي للرسم داخل قسمه (يملأ الفراغ بدل تكدّسه أعلى) */
.cwz-cell .fi-wi-chart .fi-wi-chart-canvas-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── أناقة وتنفّس (محصور بلوحة التحكم) ──────────────────────────────
   حواف أنعم + حشو داخلي أوسع + عناوين أوضح + فواصل خفيفة — مظهر أهدأ
   يستفيد من العرض الكامل دون تغيير توزيع الخلايا. كل القيم من التوكنز. */
.cwz-dash .fi-section {
    border-radius: var(--radius-card);
}
.cwz-dash .fi-section-content-ctn,
.cwz-dash .fi-section-content {
    padding: var(--space-5) var(--space-6);   /* تنفّس أفقي أكبر يناسب العرض الواسع */
}
.cwz-dash .fi-section-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--cwz-border-soft);   /* فاصل خفيف بين الرأس والمحتوى */
}
.cwz-dash .fi-section-header-heading {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--cwz-ink-strong);
}
.cwz-dash .fi-section-header-description {
    margin-top: 2px;
}

/* ── بلوك مراقبة النظام: بطاقات مقاييس منظّمة (تلغي الفراغ وتوحّد التوزيع) ── */
.cwz-mon-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--space-3);
}
.cwz-mon-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--cwz-surface-2);
    box-shadow: inset 0 0 0 1px var(--cwz-border);
}
.cwz-mon-metric__value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cwz-ink-strong);
    font-variant-numeric: tabular-nums;
}
.cwz-mon-metric__label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--cwz-ink-dim);
}
.cwz-mon-metric__label svg { width: 0.95rem; height: 0.95rem; flex: none; }
.cwz-mon-metric--danger {
    background: color-mix(in oklab, var(--danger-500) 9%, var(--cwz-surface-2));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-500) 40%, transparent);
}
.cwz-mon-metric--danger .cwz-mon-metric__value,
.cwz-mon-metric--danger .cwz-mon-metric__label { color: var(--danger-500); }
.cwz-mon-note { margin-top: var(--space-3); }

/* Shield مورد vendor: بريدكرمبه لا يمرّ على تعديل موارد المشروع, فنخفي «القائمة» الأخيرة
   عبر CSS — على صفحة القائمة فقط كي لا نخفي «إنشاء/تعديل» في صفحاته الأخرى. */
.fi-resource-shield-roles.fi-resource-list-records-page .fi-breadcrumbs-item:last-child { display: none !important; }

/* ندفة حالة الراوتر في عمود الاسم: المتصل تلفّ باستمرار (خضراء)، وغير المتصل ثابتة (حمراء). */
.cwz-router-online .fi-icon {
    animation: cwz-snow-spin 4s linear infinite;
    transform-origin: 50% 50%;
}
.cwz-router-offline .fi-icon { opacity: 0.9; }
@keyframes cwz-snow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .cwz-router-online .fi-icon { animation: none; }
}

/* عمود «متصل»: ندفة الحالة (خضراء تلفّ متصل/حمراء غير متصل) + عدد الكروت المتصلة الآن. */
.cwz-online { display: inline-flex; align-items: center; gap: 6px; }
.cwz-online-ic { width: 1.15rem; height: 1.15rem; flex: none; }
.cwz-online-count { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cwz-online.is-online .cwz-online-ic {
    color: var(--cwz-success);
    animation: cwz-snow-spin 4s linear infinite;
    transform-origin: 50% 50%;
}
.cwz-online.is-online .cwz-online-count { color: var(--cwz-ink); }
.cwz-online.is-offline .cwz-online-ic { color: var(--cwz-danger); }
.cwz-online.is-offline .cwz-online-count { color: var(--cwz-ink-faint); }
@media (prefers-reduced-motion: reduce) {
    .cwz-online.is-online .cwz-online-ic { animation: none; }
}


/* ── تفصيل الحسابات: بطاقات عدّ صغيرة ── */
.cwz-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}
.cwz-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--cwz-surface-2);
    box-shadow: inset 0 0 0 1px var(--cwz-border);
}
.cwz-mini-stat__icon { width: 1.4rem; height: 1.4rem; color: var(--cwz-primary); margin-bottom: 4px; }
.cwz-mini-stat__value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--cwz-ink-strong);
    font-variant-numeric: tabular-nums;
}
.cwz-mini-stat__label { font-size: 0.8rem; font-weight: 500; color: var(--cwz-ink-dim); }

/* ── جداول الترتيب (أعلى الحسابات/الباقات) ── */
.cwz-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-inline-end: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--cwz-primary-soft);
    color: var(--cwz-primary);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cwz-rank-name { font-weight: 600; color: var(--cwz-ink); }
.cwz-num-col { text-align: center; font-variant-numeric: tabular-nums; color: var(--cwz-ink-dim); }
.cwz-tx-table th.cwz-num-col { text-align: center; }

/* ── رابط «عرض الكل» داخل اللوحات ── */
.cwz-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-3);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cwz-primary);
    transition: color 0.14s ease;
}
.cwz-panel-link:hover { color: var(--cwz-primary-strong); text-decoration: underline; }

/* ═══ النمط الموحّد: تصميم مضغوط بعرض كامل (مشتق من الفروع، يُعمَّم تدريجياً) ═══
   النطاق قائمة موارد عبر :is(...) — أضِف مورداً جديداً بإضافة صنفه للقائمة في مكان واحد.
   كل مورد يكمّل النمط بـ getMaxContentWidth(Full) + getBreadcrumbs + فورم بطاقتين في صفحاته. */

/* التسلسل البصري الاحترافي: أرضية رمادية هادئة ← بطاقات بيضاء ← حقول بيضاء بحدود واضحة.
   مجموعة «المكان الجغرافي» بلا خلفية (بطلب المستخدم) — يجمعها حدّ ناعم فقط. */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-fieldset {
    background-color: transparent !important;
    border: 1px solid var(--cwz-border-soft) !important;
}

/* تقليص الحشوة الرأسية الكبيرة وفجوة الهيدر/المحتوى (كانت 32px + 32px) */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-page-header-main-ctn {
    padding-block: 0.5rem 1rem;
    row-gap: 0.625rem;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-header { gap: 0.375rem; position: relative; }
/* حاوية البريدكرمب تمتد كامل عرض الهيدر (الأزرار تُرفع خارج التدفق فيأخذ الشريط العرض كاملاً) */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-header > div:first-child { flex: 1; }
/* أزرار الهيدر (الحذف في صفحة التعديل) تُدمج داخل الطرف الأيسر من شريط البريدكرمب نفسه
   بدل أن تتعلّق منفصلة على يسار الشريط (تظهر كخلية شاذّة) — absolute فوق طرف الشريط، متمركزة عمودياً */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-header-actions-ctn {
    position: absolute;
    inset-inline-end: 0.85rem;
    /* يُمركَز نسبةً للشريط لا للهيدر: الهيدر أطول من الشريط بمقدار margin-bottom الشريط (0.25rem)
       فنرفع الزر بنصف ذلك ليتساوى الهامش أعلاه وأسفله داخل الشريط */
    top: calc(50% - 0.125rem);
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}
/* زر الحذف داخل الشريط أصغر قليلاً ليتنفّس بهامش متماثل أعلى/أسفل الشريط */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-header-actions-ctn .fi-btn {
    padding-block: 0.3rem;
    font-size: 0.8rem;
}

/* هوامش حواف الصفحة أقل (كانت 32px على الجانبين) */
.fi-main:has(.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page)) { padding-inline: 1rem; }

/* مسافة أصغر بين بطاقتي الفورم (شبكة الأعمدة العليا فقط — كانت 24px) */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) form > .fi-sc.fi-grid,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-sc-component > .fi-sc.fi-grid { gap: 0.75rem; }

/* البريدكرمب: شريط بعرض الشاشة كاملاً أول الصفحة تحت الهيدر مباشرة (أيقونة بيت + مسار تفصيلي) */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs {
    display: flex;
    width: 100%;
    margin-bottom: 0.25rem;
    /* متّسع أكبر على الطرف المقابل للمسار (inline-end) يحتضن زر الحذف المُدمج (absolute) دون تداخل */
    padding-block: 0.7rem;
    padding-inline: 0.85rem 5.5rem;
    border-radius: var(--radius-sm);
    background: var(--cwz-surface);
    /* ظل واضح يرفع الشريط عن أرضية الصفحة */
    box-shadow: inset 0 0 0 1px var(--cwz-border),
        0 3px 10px -2px color-mix(in srgb, var(--cwz-ink-strong) 18%, transparent);
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs-list::before {
    content: '';
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    background-color: var(--cwz-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z'/%3E%3Cpath d='M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H6.625a1.875 1.875 0 0 1-1.875-1.875v-6.198c.03-.028.061-.056.091-.086L12 5.432Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z'/%3E%3Cpath d='M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H6.625a1.875 1.875 0 0 1-1.875-1.875v-6.198c.03-.028.061-.056.091-.086L12 5.432Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs-item-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cwz-ink-dim);
    transition: color 0.14s ease;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) a.fi-breadcrumbs-item-label:hover { color: var(--cwz-primary); }
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: var(--cwz-ink-strong); }
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs-item-separator { width: 0.85rem; height: 0.85rem; color: var(--cwz-ink-faint); }

/* عنوان الصفحة مخفي بصرياً فقط (sr-only) — البريدكرمب وحده يحمله للعين،
   ويبقى في الـ DOM لقارئات الشاشة (ملاحظة مراجعة Codex الوصولية) */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-header-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* فوتر بطاقة التحكّم الجانبية: خلفية غائرة + أزرار متراصّة عمودياً بعرض كامل */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-section-footer {
    background: var(--cwz-sunken);
    border-top: 1px solid var(--cwz-border-soft);
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-section-footer .fi-ac {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-section-footer .fi-btn,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-sc-actions .fi-btn { width: 100%; justify-content: center; }

/* حقول الإدخال: خلفية بيضاء (سطح البطاقة) + حدود ظاهرة بوضوح
   (القاعدة العامة تلوّن .fi-input الداخلي بـ surface-2 — نتجاوزها هنا للغلاف والداخل معاً) */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-input-wrp,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-input,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-select-input,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-textarea {
    /* !important لتجاوز القاعدة العامة (surface-2 !important) أعلاه */
    background: var(--cwz-card) !important;
    border-radius: var(--radius-sm) !important;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-input-wrp {
    /* بوردر حقيقي (لا ظل داخلي): الظل الداخلي كانت خلفية الحقل الأبيض تغطّيه
       لأن خلفيات الأبناء تُرسم فوق ظل الأب — البوردر خارج صندوق المحتوى فلا يُغطّى.
       لونه مشتق من أزرق العلامة (40%) ليتناغم مع هوية الموقع */
    border: 1px solid color-mix(in srgb, var(--cwz-primary) 40%, var(--cwz-border)) !important;
    box-shadow: none !important;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-input-wrp:focus-within {
    border-color: var(--cwz-primary) !important;
    box-shadow: 0 0 0 2px var(--cwz-primary-ring) !important;
}

/* القوائم المنسدلة للحقول: لوحة بأرضية رمادية فاتحة وحدود العلامة وظل عميق وريديس 5px */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-dropdown-panel {
    background: var(--cwz-bg) !important;
    border: 1px solid color-mix(in srgb, var(--cwz-primary) 40%, var(--cwz-border)) !important;
    border-radius: var(--radius-sm) !important;
    /* ظل خارجي محيط: هالة من كل الجهات + ظل ساقط منتشر يفصل اللوحة عمّا خلفها */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cwz-ink-strong) 5%, transparent),
        0 4px 10px color-mix(in srgb, var(--cwz-ink-strong) 16%, transparent),
        0 16px 36px -4px color-mix(in srgb, var(--cwz-ink-strong) 32%, transparent) !important;
}
/* حقل البحث داخل القائمة: شريط أبيض يتمايز على الأرضية الرمادية + فاصل سفلي */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-select-input-search-ctn {
    background: var(--cwz-card);
    border-bottom: 1px solid var(--cwz-border);
    padding: 0.3rem 0.5rem;
}
/* الخيارات: حشوة أريح + تحويم أبيض يتمايز على الرمادي + الخيار المحدد بأزرق العلامة الناعم */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-dropdown-list { padding: 0.3rem; }
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-dropdown-list-item {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-dropdown-list-item:hover {
    background: var(--cwz-card);
    box-shadow: inset 0 0 0 1px var(--cwz-border);
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-dropdown-list-item[aria-selected="true"] {
    background: var(--cwz-primary-soft);
    color: var(--cwz-primary);
    font-weight: 600;
}

/* ريديس موحّد 5px للبلوكات (البطاقات/لوحة المكان/البريدكرمب) مع زوايا الفوتر الداخلية */
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-section,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-fieldset,
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-breadcrumbs {
    border-radius: var(--radius-sm) !important;
}
.fi-page:is(.fi-resource-sites, .fi-resource-users, .fi-resource-routers, .fi-resource-packages, .fi-resource-card-designs, .fi-resource-cards, .fi-resource-card-batches, .fi-resource-active-sessions, .fi-resource-locations, .fi-resource-router-enroll-tokens, .fi-resource-shield-roles, .cwz-unified-page) .fi-section-footer {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   جدول الراوترات — أعمدة مُدمجة مجمّعة + شريط ملخّص علوي
   ════════════════════════════════════════════════════════════ */

/* عمود «الأداء»: صفّ حبّات (مستخدمون/معالج) فوق سطر المرور الباهت. */
.cwz-perf { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cwz-perf-row { display: flex; align-items: center; gap: 6px; }
.cwz-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cwz-pill-ic { width: 0.85rem; height: 0.85rem; flex: none; }
.cwz-pill.is-success { background: var(--cwz-success-soft); color: var(--cwz-success); border-color: color-mix(in oklch, var(--cwz-success) 30%, transparent); }
.cwz-pill.is-warning { background: var(--cwz-warning-soft); color: var(--cwz-warning); border-color: color-mix(in oklch, var(--cwz-warning) 30%, transparent); }
.cwz-pill.is-danger  { background: var(--cwz-danger-soft);  color: var(--cwz-danger);  border-color: color-mix(in oklch, var(--cwz-danger) 30%, transparent); }
.cwz-pill.is-muted   { background: var(--cwz-surface-2);    color: var(--cwz-ink-dim); border-color: var(--cwz-border); }
.cwz-perf-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: var(--cwz-ink-faint);
    font-variant-numeric: tabular-nums;
}
.cwz-perf-sub-ic { width: 0.8rem; height: 0.8rem; flex: none; }

/* شريط الاستهلاك (مُعاد استخدامه في ملخّص الكارت): مسار + تعبئة ملوّنة + نسبة. */
/* النسبة محايدة (الشريط يحمل ترميز اللون)؛ الأحمر للتنبيه الحرِج (≥90 بالمئة) فقط. */
.cwz-usage-pct { font-size: 0.78rem; font-weight: 700; color: var(--cwz-ink-dim); font-variant-numeric: tabular-nums; }
.cwz-usage-pct.is-danger { color: var(--cwz-danger); }
/* مسار الشريط بارز عن الخلفية: خلفية غائرة + حلقة حدّ داخلية 1px تُظهر إطاره بوضوح. */
.cwz-usage-track { width: 100%; height: 8px; border-radius: var(--radius-pill); background: var(--cwz-sunken); box-shadow: inset 0 0 0 1px var(--cwz-border); overflow: hidden; }
.cwz-usage-fill { height: 100%; border-radius: var(--radius-pill); transition: width .3s ease; }
.cwz-usage-fill.is-success { background: var(--cwz-success); }
.cwz-usage-fill.is-warning { background: var(--cwz-warning); }
.cwz-usage-fill.is-danger  { background: var(--cwz-danger); }

/* عدّاد الكروت المتصلة أعلى الجدول: نقطة حيّة نابضة + رقم بارز محايد + وصف باهت. */
.cwz-online-count { display: inline-flex; align-items: baseline; gap: 9px; }
.cwz-online-count-dot {
    width: 9px; height: 9px; flex: none; align-self: center;
    border-radius: 50%;
    background: var(--cwz-success);
    animation: cwz-live-pulse 1.6s ease-in-out infinite;
}
.cwz-online-count-num { font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--cwz-ink-strong); font-variant-numeric: tabular-nums; }
.cwz-online-count-label { font-size: 0.9rem; font-weight: 500; color: var(--cwz-ink-dim); }
@media (prefers-reduced-motion: reduce) { .cwz-online-count-dot { animation: none; } }

/* عمود «متصل منذ»: كبسولة واحدة هادئة (يوم/ساعة/دقيقة/ثانية) + نقطة «مباشر» نابضة.
   تتبع اتجاه الصفحة؛ كل شريحة <bdi> معزولة فيظهر «الرقم+الوحدة» صحيحاً دون فرض اتجاه. */
.cwz-uptime { display: inline-flex; align-items: center; gap: 7px; unicode-bidi: isolate; }
.cwz-uptime-live {
    width: 8px; height: 8px; flex: none;
    border-radius: 50%;
    background: var(--cwz-success);
    animation: cwz-live-pulse 1.6s ease-in-out infinite;
}
.cwz-uptime-days { color: var(--cwz-ink-dim); font-weight: 600; font-size: 0.86rem; }
.cwz-uptime-clock { font-family: ui-monospace, "SFMono-Regular", monospace; font-weight: 700; font-size: 0.95rem; color: var(--cwz-success); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
@keyframes cwz-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--cwz-success) 45%, transparent); }
    70%      { box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .cwz-uptime-live { animation: none; }
}
.cwz-uptime-empty { color: var(--cwz-ink-faint); }

/* أيقونة «متصل» في عمود كود الكارت: ندفة تلفّ باستمرار (نفس دوران الراوترات). */
.cwz-live-code svg { animation: cwz-snow-spin 4s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
    .cwz-live-code svg { animation: none; }
}

/* أيقونة حالة الاتصال قبل كود الكارت في جدول الكروت: ندفة خضراء تلفّ = متصل الآن
   (نفس ندفة الراوترات وصفحة الجلسات)، وندفة رمادية ثابتة = غير متصل.
   الكود داخل <bdi dir=ltr> فيظهر صحيحاً في الواجهة العربية. */
.cwz-code-live { display: inline-flex; align-items: center; gap: 7px; unicode-bidi: isolate; }
.cwz-code-ic { width: 1rem; height: 1rem; flex: none; }
.cwz-code-live.is-online .cwz-code-ic {
    color: var(--cwz-success);
    animation: cwz-snow-spin 4s linear infinite;
    transform-origin: 50% 50%;
}
.cwz-code-live.is-offline .cwz-code-ic { color: var(--cwz-ink-faint); }
@media (prefers-reduced-motion: reduce) {
    .cwz-code-live.is-online .cwz-code-ic { animation: none; }
}
/* رقم الدفعة مدموج تحت الكود: أحادي المسافة وباهت فلا ينافس الكود. */
.cwz-code-batch { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 0.72rem; color: var(--cwz-ink-faint); letter-spacing: 0.02em; }

/* ════════════════════════════════════════════════════════════
   جدول الكروت — تلميع بنفس لغة جدول الراوترات: رأس بأيقونات + فواصل
   عمودية + تناوب zebra + تحويم بلمسة العلامة + كثافة صفوف أهدأ.
   (مقيّد بصفحة المورد كي لا يمسّ باقي الجداول)
   ════════════════════════════════════════════════════════════ */

/* الرأس: العناوين تبدأ من بداية السطر (لا توسيط عام) — نُلغي التوسيط الذي تفرضه
   قاعدة tr:has(.cwz-th) العامة، ونُبقيه لعمودَي الحالة والأجهزة المتصلة فقط. */
.fi-resource-cards thead th { text-align: start !important; }
.fi-resource-cards thead .cwz-th,
.fi-resource-cards thead .fi-ta-header-cell-label { justify-content: flex-start !important; }
.fi-resource-cards thead th.fi-ta-header-cell-status,
.fi-resource-cards thead th.fi-ta-header-cell-active-sessions { text-align: center !important; }
.fi-resource-cards thead th.fi-ta-header-cell-status .cwz-th,
.fi-resource-cards thead th.fi-ta-header-cell-active-sessions .cwz-th { justify-content: center !important; }
/* حجم/وزن العنوان + حشو موحّد + فاصل سفلي أدكن + تدوير طرفَي الرأس. */
.fi-resource-cards .fi-ta-header-cell {
    padding: 0.62rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.fi-resource-cards thead th { border-bottom: 2px solid var(--cwz-primary-700) !important; }
.fi-resource-cards .fi-ta-header-cell:first-child { border-start-start-radius: var(--radius-sm); }
.fi-resource-cards .fi-ta-header-cell:last-child { border-start-end-radius: var(--radius-sm); }

/* الصفوف: حشو أهدأ + فواصل عمودية خفيفة + تناوب لونيّ + تحويم بلمسة العلامة. */
.fi-resource-cards .fi-ta-cell { padding: 0.5rem 0.7rem; }
.fi-resource-cards .fi-ta-cell:not(:last-child) { border-inline-end: 1px solid var(--cwz-border); }
.fi-resource-cards .fi-ta-header-cell:not(:last-child) { border-inline-end: 1px solid rgba(255, 255, 255, 0.18); }
.fi-resource-cards tbody tr:not(:last-child) .fi-ta-cell { border-bottom: 1px solid var(--cwz-border); }
.fi-resource-cards tbody .cwz-card-row:nth-child(even) .fi-ta-cell {
    background: color-mix(in oklch, var(--cwz-primary) 3.5%, var(--cwz-card));
}
.fi-resource-cards .cwz-card-row:hover .fi-ta-cell,
.fi-resource-cards .cwz-card-row:hover { background: color-mix(in oklch, var(--cwz-primary) 8%, var(--cwz-card)) !important; }
/* كتلة النص ذات الوصف (الكود + رقم الدفعة): بلا حشو داخلي زائد فيقصر ارتفاع الصف. */
.fi-resource-cards .fi-ta-text-has-descriptions {
    gap: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* شارات موحّدة الحجم (الحالة + الأجهزة المتصلة). */
.fi-resource-cards .fi-badge { font-size: 0.74rem; font-weight: 600; }
/* الكود أوضح من باقي النصوص (هو مفتاح الصف). */
.fi-resource-cards .cwz-code-live { font-size: 0.86rem; color: var(--cwz-ink-strong); }

/* عمود التواريخ المدمج: سطران «بدأ»/«ينتهي» بعنوان باهت ثابت العرض ثم التاريخ. */
.cwz-dates { display: flex; flex-direction: column; gap: 3px; }
.cwz-dates-line { display: inline-flex; align-items: baseline; gap: 6px; }
.cwz-dates-label { min-width: 3.1rem; font-size: 0.72rem; font-weight: 600; color: var(--cwz-ink-faint); }
.cwz-dates-val { font-size: 0.8rem; color: var(--cwz-ink-dim); font-variant-numeric: tabular-nums; }
.cwz-dates-val.is-expired { color: var(--cwz-danger); font-weight: 600; }
.cwz-dates-empty { color: var(--cwz-ink-faint); }

/* عمود تاريخ (نمط المنافس): تاريخ ISO مضغوط معزول (dir=ltr) بتوقيت الدولة. */
.cwz-dt { font-variant-numeric: tabular-nums; color: var(--cwz-ink-dim); font-size: 0.82rem; }
.cwz-dt-empty { color: var(--cwz-ink-faint); }

/* بادج الصلاحية (مُعاد استخدامه في ملخّص الكارت): المتبقي ملوّن حسب القرب + تاريخ الانتهاء. */
.cwz-validity-rem {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: var(--radius-pill);
    font-size: 0.76rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.cwz-validity-ic { width: 0.82rem; height: 0.82rem; flex: none; }
.cwz-validity-rem.is-success { background: var(--cwz-success-soft); color: var(--cwz-success); border-color: color-mix(in oklch, var(--cwz-success) 28%, transparent); }
.cwz-validity-rem.is-warning { background: var(--cwz-warning-soft); color: var(--cwz-warning); border-color: color-mix(in oklch, var(--cwz-warning) 28%, transparent); }
.cwz-validity-rem.is-danger  { background: var(--cwz-danger-soft);  color: var(--cwz-danger);  border-color: color-mix(in oklch, var(--cwz-danger) 28%, transparent); }
.cwz-validity-rem.is-muted   { background: var(--cwz-surface-2); color: var(--cwz-ink-faint); border-color: var(--cwz-border-soft); }
.cwz-validity-date { font-size: 0.74rem; color: var(--cwz-ink-dim); font-variant-numeric: tabular-nums; }

/* استهلاك الجلسة الحالية + السعر: أرقام معزولة (dir=ltr) بخط جدولي. */
.cwz-cur { font-variant-numeric: tabular-nums; color: var(--cwz-ink-dim); }
.cwz-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cwz-ink); }

/* صفوف جدول المتصلين: خطوط أكبر + كثافة مريحة + محاذاة رأسية + تلوين خفيف حسب قرب الانتهاء. */
tr.cwz-session-row > * { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; vertical-align: middle !important; font-size: 0.92rem !important; }
/* صف الجلسة الواحدة: حشو رأسي أقل + ملخّص كارت أكثر إحكاماً (ارتفاع أقصر) —
   عمود الجلسات فيه سطران فقط، فلا داعي لطول عمود الملخّص. */
tr.cwz-single-session > * { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
tr.cwz-single-session .cwz-cardsum { gap: 3px; margin-top: 2px; }
tr.cwz-single-session .cwz-cardsum-metric { gap: 2px; }
tr.cwz-single-session .cwz-cardsum-divider { margin: 0; }
/* تخطيط متناوب هادئ (zebra) بدل تلوين الحالة — إشارة القرب من الانتهاء تبقى في بادج «الصلاحية». */
tr.cwz-session-row:nth-of-type(even) > * { background: var(--cwz-sunken); }
tr.cwz-row-expired { opacity: 0.72; }

/* رؤوس أعمدة جدول المتصلين: أيقونة دلالية + العنوان. */
.cwz-th { display: inline-flex; align-items: center; gap: 6px; }
.cwz-th-ic { width: 1.05rem; height: 1.05rem; flex: none; }

/* رأس الجدول كله باللون الأساسي (بنفسجي) + نص وأيقونات فاتحة — يستهدف جدولنا فقط عبر :has. */
tr:has(.cwz-th) > * { background: var(--cwz-primary-600) !important; color: #fff !important; }
tr:has(.cwz-th) .cwz-th-ic { color: rgba(255, 255, 255, 0.92) !important; }
tr:has(.cwz-th) .fi-ta-header-cell-label,
tr:has(.cwz-th) a { color: #fff !important; }

/* نصوص أوضح (غير باهتة) في جسم جدول المتصلين: الكود واسم الراوتر. */
tr.cwz-session-row .fi-ta-text { color: var(--cwz-ink-strong) !important; }

/* فواصل عمودية خفيفة بين أعمدة جدول المتصلين — الجسم بلون حدّ خفيف، الرأس بأبيض شفّاف. */
tr.cwz-session-row > *:not(:last-child) { border-inline-end: 1px solid var(--cwz-border-soft) !important; }
tr:has(.cwz-th) > *:not(:last-child) { border-inline-end: 1px solid rgba(255, 255, 255, 0.15) !important; }

/* توسيط رؤوس ومحتوى الأعمدة — تناسق مع الفواصل + قراءة أوضح. */
tr:has(.cwz-th) > *, tr.cwz-session-row > * { text-align: center !important; }
tr:has(.cwz-th) .cwz-th, tr:has(.cwz-th) .fi-ta-header-cell-label { justify-content: center !important; }
tr.cwz-session-row .fi-ta-col { justify-content: center !important; align-items: center !important; }

/* عمود «كود الكارت» مستثنى: كل محتواه ورأسه من البداية (يمين في RTL) لا المنتصف. */
tr:has(.cwz-th) > th.cwz-card-head, tr.cwz-session-row > td.cwz-card-cell { text-align: start !important; }
tr:has(.cwz-th) th.cwz-card-head .cwz-th, tr:has(.cwz-th) th.cwz-card-head .fi-ta-header-cell-label { justify-content: flex-start !important; }
tr.cwz-session-row td.cwz-card-cell .fi-ta-col { justify-content: flex-start !important; align-items: flex-start !important; }

/* تمييز الصف عند المرور بلون العلامة الخفيف — يطغى على تناوب الـ zebra. */
tr.cwz-session-row:hover > * { background: color-mix(in srgb, var(--cwz-primary-500) 12%, transparent) !important; }

/* عمود «الجلسات النشطة»: قائمة صفوف نظيفة داخل خلية الكارت — لا صناديق متداخلة.
   كل جلسة صفّان (رئيسي + حقائق)، والجلسات تُفصل بخط شعري أفقي لا حدود صندوق. */
.cwz-sess-list { display: flex; flex-direction: column; width: 100%; align-items: stretch; }
.cwz-sess-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 6px;
    text-align: start;
    border-radius: 8px;
    transition: background .15s ease;
}
/* خط شعري بين الجلسات المتتالية فقط (لا حول الصف الأول) — فصل بلا تكديس صناديق. */
.cwz-sess-row + .cwz-sess-row { border-block-start: 1px solid var(--cwz-border-soft); border-radius: 0; }
.cwz-sess-row:hover { background: color-mix(in srgb, var(--cwz-primary-500) 7%, transparent); }

/* السطر الرئيسي: اسم الراوتر (يمين) + المدّة الحيّة وزر الفصل (يُدفعان لليسار). */
.cwz-sess-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cwz-sess-router { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cwz-sess-router-ic { width: 1rem; height: 1rem; flex: none; }
.cwz-sess-router-ic.is-online { color: var(--cwz-success); }
.cwz-sess-router-ic.is-offline { color: var(--cwz-ink-faint); }
.cwz-sess-router-name { font-weight: 650; font-size: 0.875rem; color: var(--cwz-ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «متصل منذ»: حبّة حيّة خفيفة (خلفية نجاح شفّافة + نقطة نابضة) والرقم محايد للقراءة —
   الأخضر يبقى للخلفية والنبضة فقط لتفادي تكدّس الأخضر. */
.cwz-sess-uptime {
    display: inline-flex; align-items: center; gap: 6px;
    margin-inline-start: auto; white-space: nowrap;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--cwz-success-soft);
}
.cwz-sess-uptime .cwz-uptime-live { width: 7px; height: 7px; }
.cwz-sess-uptime .cwz-uptime-clock { color: var(--cwz-ink); font-size: 0.77rem; font-weight: 600; letter-spacing: 0; }

/* سطر الحقائق: MAC / IP / تحميل⁄رفع / بداية — محاذاة تحت اسم الراوتر، يلتفّ عند الضيق. */
.cwz-sess-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 15px; padding-inline-start: calc(1rem + 6px); }
.cwz-sess-fact { display: inline-flex; align-items: center; gap: 5px; color: var(--cwz-ink-dim); font-size: 0.76rem; }
.cwz-sess-fact-ic { width: 0.85rem; height: 0.85rem; flex: none; color: var(--cwz-ink-faint); }
.cwz-sess-mono { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 0.75rem; color: var(--cwz-ink-dim); font-variant-numeric: tabular-nums; }
/* التحميل⁄الرفع أبرز حقائق الجلسة — أثقل وملوّن دلالياً (تنزيل أخضر، رفع سماوي). */
.cwz-sess-traffic { gap: 12px; font-variant-numeric: tabular-nums; }
.cwz-sess-down { color: var(--cwz-download); font-weight: 700; }
.cwz-sess-up { color: var(--cwz-upload); font-weight: 700; }
/* زر فصل الجلسة الواحدة: أيقونة دائرية هادئة، تظهر بوضوح عند التحويم/التركيز. */
.cwz-sess-kick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    color: var(--cwz-ink-faint);
    transition: color .15s ease, background .15s ease;
}
.cwz-sess-row:hover .cwz-sess-kick { color: var(--cwz-danger); }
.cwz-sess-kick:hover { background: var(--cwz-danger-soft); color: var(--cwz-danger); }
.cwz-sess-kick:focus-visible { outline: 2px solid var(--cwz-danger); outline-offset: 1px; color: var(--cwz-danger); }
.cwz-sess-kick-ic { width: 1rem; height: 1rem; }

/* عمود «الفصل» (فصل الكارت كله): هادئ حتى تحويم الصف، ثم أحمر — تناسق مع أزرار فصل الجلسة. */
.cwz-kick-card { color: var(--cwz-ink-faint) !important; transition: color .15s ease, background .15s ease; }
tr.cwz-session-row:hover .cwz-kick-card { color: var(--cwz-danger) !important; }
.cwz-kick-card:hover { background: var(--cwz-danger-soft) !important; color: var(--cwz-danger) !important; }

/* بادج «الجلسات النشطة» وشريحتا الباقة/المالك (مُستخدمة في ملخّص الكارت المدمج).
   النص محايد (ink) والإشارة تُحمَل بالخلفية والنقطة — يضمن التباين في الوضعين. */
.cwz-sess-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--cwz-success-soft);
    color: var(--cwz-ink-dim);
    font-size: 0.73rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cwz-sess-count-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cwz-success); }
/* تجاوز حد الجلسات المتزامنة للباقة — تنبيه أحمر (مشاركة كارت). */
.cwz-sess-count.is-over { background: var(--cwz-danger-soft); color: var(--cwz-ink-strong); font-weight: 700; }
.cwz-sess-count.is-over .cwz-sess-count-dot { background: var(--cwz-danger); }
.cwz-sess-pkg { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--cwz-ink-dim); }
.cwz-sess-pkg-ic { width: 0.8rem; height: 0.8rem; flex: none; color: var(--cwz-ink-faint); }

/* عمود «كود الكارت» المدمج: ملخّص الكارت = هوية (جلسات/باقة/مالك) + استهلاك + صلاحية. */
.cwz-cardsum { display: flex; flex-direction: column; gap: 4px; align-items: stretch; margin-top: 3px; width: 100%; max-width: 340px; }
/* سطر الهوية: البادج + الباقة + المالك على سطر واحد ملتفّ (توفير ارتفاع). */
.cwz-cardsum-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* فاصل شعري بين الهوية والمقاييس. */
.cwz-cardsum-divider { height: 1px; background: var(--cwz-border-soft); margin: 1px 0; }
.cwz-cardsum-metric { display: flex; flex-direction: column; gap: 3px; }
/* سطر مقياس: التسمية (بعرض موحّد) ثم القيمة، متجمّعان على البداية. */
.cwz-cardsum-line { display: flex; align-items: baseline; gap: 8px; }
.cwz-cardsum-label { flex: none; min-width: 3.4rem; font-size: 0.72rem; font-weight: 600; color: var(--cwz-ink-faint); }
.cwz-cardsum-usage-val { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--cwz-ink-strong); font-variant-numeric: tabular-nums; }
.cwz-cardsum-sep { color: var(--cwz-ink-faint); font-weight: 400; }
.cwz-cardsum-muted { color: var(--cwz-ink-dim); font-weight: 600; }
.cwz-cardsum-unlimited { display: inline-flex; align-items: center; gap: 3px; }
.cwz-cardsum-inf-ic { width: 0.9rem; height: 0.9rem; flex: none; }
.cwz-cardsum-valid { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* تفصيل الاستهلاك: تحميل/رفع على البداية + المتبقّي على النهاية. */
.cwz-cardsum-usage-detail { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.75rem; }
.cwz-cardsum-remaining { display: inline-flex; align-items: baseline; gap: 4px; color: var(--cwz-ink-dim); font-variant-numeric: tabular-nums; }
.cwz-cardsum-remaining bdi { font-weight: 700; color: var(--cwz-ink-strong); }
/* المتبقّي صفر عند النفاد — تنبيه أحمر. */
.cwz-cardsum-remaining.is-danger, .cwz-cardsum-remaining.is-danger bdi { color: var(--cwz-danger); }
/* بادج «نُفدت» بدل النسبة عند التجاوز. */
.cwz-usage-exhausted { display: inline-flex; align-items: center; gap: 3px; }
.cwz-usage-exhausted-ic { width: 0.85rem; height: 0.85rem; flex: none; }
/* فوتر التفاصيل المدمجة: السعر · وقت الكارت · تاريخ البداية (مُوحّدة كانت أعمدة مستقلّة). */
.cwz-cardsum-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; margin-top: 3px; font-size: 0.72rem; color: var(--cwz-ink-dim); }
.cwz-cardsum-x { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.cwz-cardsum-x-ic { width: 0.8rem; height: 0.8rem; flex: none; color: var(--cwz-ink-faint); }

/* زر إجراء مخفي — فصل الجلسة الواحدة يُستدعى برمجياً من شرائح الجلسات (mountTableAction). */
.cwz-hidden-trigger { display: none !important; }

/* عمود «الزمن»: آخر نبضة بارزة + زمن التشغيل باهتاً تحته. */
.cwz-act { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.cwz-act-main { font-size: 0.84rem; font-weight: 500; color: var(--cwz-ink); }
.cwz-act-muted { color: var(--cwz-ink-faint); }
.cwz-act-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: var(--cwz-ink-faint);
}
.cwz-act-sub-ic { width: 0.78rem; height: 0.78rem; flex: none; }

/* عمود «الشبكة»: عنوان NAS بارز + SSID باهتاً تحته، كلٌّ بأيقونته. */
.cwz-net { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.cwz-net-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: var(--cwz-ink);
    font-variant-numeric: tabular-nums;
}
.cwz-net-ic { width: 0.95rem; height: 0.95rem; flex: none; color: var(--cwz-ink-dim); }
.cwz-net-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--cwz-ink-faint);
}
.cwz-net-sub-ic { width: 0.8rem; height: 0.8rem; flex: none; }

/* شريط الملخّص العلوي: أرقام حيّة مفصولة بفواصل رفيعة. */
.cwz-tbl-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--cwz-border-soft);
}
.cwz-sum-item { display: inline-flex; align-items: center; gap: 6px; }
.cwz-sum-ic { width: 1rem; height: 1rem; color: var(--cwz-ink-dim); flex: none; }
.cwz-sum-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cwz-ink-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.cwz-sum-label { font-size: 0.82rem; color: var(--cwz-ink-dim); font-weight: 500; }
.cwz-sum-sep { width: 1px; align-self: stretch; min-height: 1.1rem; background: var(--cwz-border); }
.cwz-sum-dot { width: 0.55rem; height: 0.55rem; border-radius: var(--radius-pill); flex: none; }
.cwz-sum-dot.is-online  { background: var(--cwz-success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--cwz-success) 22%, transparent); }
.cwz-sum-dot.is-offline { background: var(--cwz-ink-faint); }
/* «تحتاج انتباه» يتلوّن تحذيرياً حين يوجد راوتر محمّل. */
.cwz-sum-ic.is-attention { color: var(--cwz-warning); }
.cwz-sum-num.is-attention { color: var(--cwz-warning); }

/* ════════════════════════════════════════════════════════════
   جدول الراوترات — تكبير المحتوى + رأس مميّز + فلاتر وألوان أنظف
   (مقيّد بصفحة المورد كي لا يمسّ باقي الجداول)
   ════════════════════════════════════════════════════════════ */

/* 1) تكبير محتوى الخلايا قليلاً لراحة القراءة في الجلسات الطويلة. */
.fi-resource-routers .fi-ta-cell .fi-ta-text-item { font-size: 0.95rem; }
.fi-resource-routers .fi-ta-cell .fi-ta-text-description { font-size: 0.82rem; }
/* اسم الراوتر: فونت أصغر + ندفة الحالة محاذية لسطر الاسم تماماً (توسيط عمودي). */
.fi-resource-routers .fi-ta-cell-name .fi-ta-text-item {
    font-size: 0.75rem;
    align-items: center;
    gap: 0.4rem;
}
.fi-resource-routers .fi-ta-cell-name .fi-ta-text-item .fi-icon {
    width: 1.45em;
    height: 1.45em;
    flex: none;
    vertical-align: middle;
}
.fi-resource-routers .cwz-pill { font-size: 0.84rem; }
.fi-resource-routers .cwz-pill-ic { width: 0.92rem; height: 0.92rem; }
.fi-resource-routers .cwz-act-main { font-size: 0.94rem; }
.fi-resource-routers .cwz-perf-sub,
.fi-resource-routers .cwz-act-sub { font-size: 0.82rem; }
/* صفوف بحشو مريح (تنفّس) + إزالة padding الداخلي 16px لكتلة النص ذات الوصف. */
.fi-resource-routers .fi-ta-cell { padding: 0.62rem 0.7rem; }
.fi-resource-routers .cwz-net,
.fi-resource-routers .cwz-act,
.fi-resource-routers .cwz-perf { gap: 1px; }
.fi-resource-routers .fi-ta-text-has-descriptions {
    gap: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* حدود عمودية بين أعمدة الجدول (رأساً وجسماً) — لون خفيف متناسق + بادنج موحّد. */
.fi-resource-routers .fi-ta-header-cell { padding: 0.62rem 0.7rem; }
.fi-resource-routers .fi-ta-cell:not(:last-child) {
    border-inline-end: 1px solid var(--cwz-border);
}
/* فواصل الهيدر بأبيض شفّاف لتظهر على الخلفية الأساسية الصلدة. */
.fi-resource-routers .fi-ta-header-cell:not(:last-child) {
    border-inline-end: 1px solid rgba(255, 255, 255, 0.18);
}

/* 2) رأس الجدول: اللون الأساسي الصلد على كل الأعمدة (بما فيها عمودا التحديد والإجراءات
   اللذان ليسا fi-ta-header-cell) + فاصل سفلي أدكن موحّد عبر كامل عرض الرأس. */
.fi-resource-routers thead th {
    background: var(--cwz-primary-600) !important;
    border-bottom: 2px solid var(--cwz-primary-700) !important;
}
/* نص العناوين نفسه: أبيض وأثقل (فوق الخلفية الأساسية). */
.fi-resource-routers .fi-ta-header-cell {
    color: var(--cwz-on-primary) !important;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.fi-resource-routers .fi-ta-header-cell:first-child { border-start-start-radius: var(--radius-sm); }
.fi-resource-routers .fi-ta-header-cell:last-child { border-start-end-radius: var(--radius-sm); }

/* 3) الصفوف: تناوب لونيّ خفيف (zebra) لتتبّع أسهل + فواصل أنعم + تحويم بلمسة العلامة أوضح. */
.fi-resource-routers tbody tr:not(:last-child) .fi-ta-cell { border-bottom: 1px solid var(--cwz-border); }
.fi-resource-routers tbody .fi-ta-row:nth-child(even) .fi-ta-cell {
    background: color-mix(in oklch, var(--cwz-primary) 3.5%, var(--cwz-card));
}
.fi-resource-routers .fi-ta-row:hover .fi-ta-cell,
.fi-resource-routers .fi-ta-row:hover { background: color-mix(in oklch, var(--cwz-primary) 8%, var(--cwz-card)) !important; }

/* ── فصل بلوك الجدول عن بلوك الفلاتر ──
   إلغاء الكارت الخارجي الموحّد، وتغليف كل قسم (الرأس: ملخّص+فلاتر / المحتوى: الجدول) بكارته
   المستقلّة مع مسافة واضحة بينهما. */
.fi-resource-routers .fi-ta-ctn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.fi-resource-routers .fi-ta-header-ctn {
    background: var(--cwz-card);
    border: 1px solid var(--cwz-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

/* 4) لوح الفلاتر داخل بلوك الرأس: سطح شفّاف (الكارت يوفّر الحدّ)، مفصول عن الملخّص بحدّه العلوي. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-above-content-ctn {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--space-4);
    margin-bottom: 0;
}
/* إلغاء شريط أدوات الجدول (مدير الأعمدة ▐▐▐) — لا حاجة له بعد نقل البحث للفلاتر. */
.fi-resource-routers .fi-ta-header-toolbar { display: none; }
/* إخفاء عنوان «التصفيات» فوق الحقول (المستخدم يريد الحقول مباشرة). */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-header { display: none; }
/* زرّا «بحث» و«مسح» كعنصر ضمن نفس صف الفلاتر (لا تذييل منفصل): يصطفّان بعد آخر فلتر
   محاذَيين لأسفل الحقول. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-2);
    margin-top: 0;
    align-self: end;
}
/* الزرّان: خطّ أصغر + وزن متوسط + حركة تحويم لطيفة موحّدة. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn {
    font-size: 0.78rem;
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
/* زر «بحث» (الإجراء الرئيسي): أزرق ملكي صلد + نص أبيض (تباين على خلفية داكنة) + ظلّ لونيّ. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn:not(.fi-color-danger),
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn:not(.fi-color-danger):hover {
    background: var(--cwz-primary) !important;
    color: #ffffff !important;
}
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn:not(.fi-color-danger) {
    box-shadow: 0 2px 6px -1px color-mix(in oklch, var(--cwz-primary) 45%, transparent);
}
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn:not(.fi-color-danger):hover {
    box-shadow: 0 5px 12px -2px color-mix(in oklch, var(--cwz-primary) 55%, transparent);
    transform: translateY(-1px);
    filter: brightness(1.06);
}
/* زر «إعادة ضبط الفلاتر»: سماوي صلد (لون مختلف) + نص داكن (تباين على خلفية فاتحة) + ظلّ لونيّ. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger,
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger:hover {
    background: var(--cwz-info) !important;
    color: #0b1220 !important;
    box-shadow: 0 2px 6px -1px color-mix(in oklch, var(--cwz-info) 45%, transparent);
}
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger:hover {
    box-shadow: 0 5px 12px -2px color-mix(in oklch, var(--cwz-info) 55%, transparent);
    transform: translateY(-1px);
    filter: brightness(1.06);
}
/* زر إعادة الضبط يظهر فقط عند تنفيذ فلتر (حين تُصيَّر مؤشرات الفلاتر النشطة داخل نفس الحاوية). */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger { display: none; }
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-ctn:has(.fi-ta-filter-indicators) .fi-ta-filters-actions-ctn .fi-btn.fi-color-danger { display: inline-flex; }

/* 4-ب) تخطيط الحقول: البحث أوّلاً ثم الفلاتر ثم زر «بحث» — كلها عناصر في صف واحد (flex-wrap)،
   وما يفيض عن عرض الصف ينزل صفّاً تالياً طبيعياً. نرفع الـ flex للأب ونُذيب الشبكة بـ
   display:contents فتصبح حقول الفلاتر وحاوية الأزرار عناصر مباشرة في نفس التدفق. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: end;
}
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters > .fi-grid {
    display: contents;
}
/* كل الفلاتر: عرض حسب المحتوى (لا تُمدَّد)، بحدّ أدنى مريح للاستخدام. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters > .fi-grid > .fi-grid-col {
    flex: 0 0 auto;
    width: auto;
    min-width: 12rem;
}
/* حقل البحث (أول عنصر): أوسع من الفلتر لأنه يستقبل نصّاً حرّاً أطول. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters > .fi-grid > .fi-grid-col[wire\:key$='tableFiltersForm.search'] {
    min-width: 20rem;
}
/* المالك والفرع أوسع قليلاً لأن أسماء الملّاك والكافيهات أطول. */
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters > .fi-grid > .fi-grid-col[wire\:key$='tableFiltersForm.owner_id'],
:is(.fi-resource-routers, .fi-resource-cards) .fi-ta-filters > .fi-grid > .fi-grid-col[wire\:key$='tableFiltersForm.site_id'] {
    min-width: 15rem;
}

/* 2-ب) أيقونات دلالية أمام كل عنوان في الهيدر (mask-image بلون النص) + محاذاة موحّدة مع محتوى العمود. */
.fi-resource-routers .fi-ta-header-cell-name::before,
.fi-resource-routers .fi-ta-header-cell-online::before,
.fi-resource-routers .fi-ta-header-cell-network::before,
.fi-resource-routers .fi-ta-header-cell-performance::before,
.fi-resource-routers .fi-ta-header-cell-activity::before,
.fi-resource-routers .fi-ta-header-cell-created-at::before {
    content: '';
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    margin-inline-end: 0.4rem;
    vertical-align: -0.16em;
    background-color: currentColor;
    opacity: 0.75;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.fi-resource-routers .fi-ta-header-cell-name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.676 6.941A12.964 12.964 0 0 1 10 3c3.657 0 6.963 1.511 9.324 3.941a.75.75 0 0 1-.008 1.053l-.353.354a.75.75 0 0 1-1.069-.008C15.894 6.28 13.097 5 10 5 6.903 5 4.106 6.28 2.106 8.34a.75.75 0 0 1-1.069.008l-.353-.354a.75.75 0 0 1-.008-1.053Zm2.825 2.833A8.976 8.976 0 0 1 10 7a8.976 8.976 0 0 1 6.499 2.774.75.75 0 0 1-.011 1.049l-.354.354a.75.75 0 0 1-1.072-.012A6.978 6.978 0 0 0 10 9c-1.99 0-3.786.83-5.061 2.165a.75.75 0 0 1-1.073.012l-.354-.354a.75.75 0 0 1-.01-1.05Zm2.82 2.84A4.989 4.989 0 0 1 10 11c1.456 0 2.767.623 3.68 1.614a.75.75 0 0 1-.022 1.039l-.354.354a.75.75 0 0 1-1.085-.026A2.99 2.99 0 0 0 10 13c-.88 0-1.67.377-2.22.981a.75.75 0 0 1-1.084.026l-.354-.354a.75.75 0 0 1-.021-1.039Zm2.795 2.752a1.248 1.248 0 0 1 1.768 0 .75.75 0 0 1 0 1.06l-.354.354a.75.75 0 0 1-1.06 0l-.354-.353a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.676 6.941A12.964 12.964 0 0 1 10 3c3.657 0 6.963 1.511 9.324 3.941a.75.75 0 0 1-.008 1.053l-.353.354a.75.75 0 0 1-1.069-.008C15.894 6.28 13.097 5 10 5 6.903 5 4.106 6.28 2.106 8.34a.75.75 0 0 1-1.069.008l-.353-.354a.75.75 0 0 1-.008-1.053Zm2.825 2.833A8.976 8.976 0 0 1 10 7a8.976 8.976 0 0 1 6.499 2.774.75.75 0 0 1-.011 1.049l-.354.354a.75.75 0 0 1-1.072-.012A6.978 6.978 0 0 0 10 9c-1.99 0-3.786.83-5.061 2.165a.75.75 0 0 1-1.073.012l-.354-.354a.75.75 0 0 1-.01-1.05Zm2.82 2.84A4.989 4.989 0 0 1 10 11c1.456 0 2.767.623 3.68 1.614a.75.75 0 0 1-.022 1.039l-.354.354a.75.75 0 0 1-1.085-.026A2.99 2.99 0 0 0 10 13c-.88 0-1.67.377-2.22.981a.75.75 0 0 1-1.084.026l-.354-.354a.75.75 0 0 1-.021-1.039Zm2.795 2.752a1.248 1.248 0 0 1 1.768 0 .75.75 0 0 1 0 1.06l-.354.354a.75.75 0 0 1-1.06 0l-.354-.353a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E"); }
.fi-resource-routers .fi-ta-header-cell-online::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z'/%3E%3C/svg%3E"); }
.fi-resource-routers .fi-ta-header-cell-network::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.555 5.412a8.028 8.028 0 0 0-3.503-2.81 14.899 14.899 0 0 1 1.663 4.472 8.547 8.547 0 0 0 1.84-1.662ZM13.326 7.825a13.43 13.43 0 0 0-2.413-5.773 8.087 8.087 0 0 0-1.826 0 13.43 13.43 0 0 0-2.413 5.773A8.473 8.473 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675ZM6.514 9.376A9.98 9.98 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 0 1-.351 3.759A13.54 13.54 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 0 1-.352-3.758ZM5.285 7.074a14.9 14.9 0 0 1 1.663-4.471 8.028 8.028 0 0 0-3.503 2.81c.529.638 1.149 1.199 1.84 1.66ZM17.334 6.798a7.973 7.973 0 0 1 .614 4.115 13.47 13.47 0 0 1-3.178 1.72 15.093 15.093 0 0 0 .174-3.939 10.043 10.043 0 0 0 2.39-1.896ZM2.666 6.798a10.042 10.042 0 0 0 2.39 1.896 15.196 15.196 0 0 0 .174 3.94 13.472 13.472 0 0 1-3.178-1.72 7.973 7.973 0 0 1 .615-4.115ZM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 0 1-1.72 3.178 8.099 8.099 0 0 1-1.826 0 13.47 13.47 0 0 1-1.72-3.178c.855.151 1.735.23 2.633.23ZM14.357 14.357a14.912 14.912 0 0 1-1.305 3.04 8.027 8.027 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305ZM6.948 17.397a8.027 8.027 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 0 0 1.305 3.04Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.555 5.412a8.028 8.028 0 0 0-3.503-2.81 14.899 14.899 0 0 1 1.663 4.472 8.547 8.547 0 0 0 1.84-1.662ZM13.326 7.825a13.43 13.43 0 0 0-2.413-5.773 8.087 8.087 0 0 0-1.826 0 13.43 13.43 0 0 0-2.413 5.773A8.473 8.473 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675ZM6.514 9.376A9.98 9.98 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 0 1-.351 3.759A13.54 13.54 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 0 1-.352-3.758ZM5.285 7.074a14.9 14.9 0 0 1 1.663-4.471 8.028 8.028 0 0 0-3.503 2.81c.529.638 1.149 1.199 1.84 1.66ZM17.334 6.798a7.973 7.973 0 0 1 .614 4.115 13.47 13.47 0 0 1-3.178 1.72 15.093 15.093 0 0 0 .174-3.939 10.043 10.043 0 0 0 2.39-1.896ZM2.666 6.798a10.042 10.042 0 0 0 2.39 1.896 15.196 15.196 0 0 0 .174 3.94 13.472 13.472 0 0 1-3.178-1.72 7.973 7.973 0 0 1 .615-4.115ZM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 0 1-1.72 3.178 8.099 8.099 0 0 1-1.826 0 13.47 13.47 0 0 1-1.72-3.178c.855.151 1.735.23 2.633.23ZM14.357 14.357a14.912 14.912 0 0 1-1.305 3.04 8.027 8.027 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305ZM6.948 17.397a8.027 8.027 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 0 0 1.305 3.04Z'/%3E%3C/svg%3E"); }
.fi-resource-routers .fi-ta-header-cell-performance::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z'/%3E%3C/svg%3E"); }
.fi-resource-routers .fi-ta-header-cell-activity::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z'/%3E%3C/svg%3E"); }
.fi-resource-routers .fi-ta-header-cell-created-at::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.75 3a.75.75 0 0 0-.75.75V4.5h-.5A2.75 2.75 0 0 0 1.75 7.25v8A2.75 2.75 0 0 0 4.5 18h11a2.75 2.75 0 0 0 2.75-2.75v-8A2.75 2.75 0 0 0 15.5 4.5H15v-.75a.75.75 0 0 0-1.5 0V4.5h-7v-.75A.75.75 0 0 0 5.75 3ZM4.5 6h11c.69 0 1.25.56 1.25 1.25V8H3.25v-.75C3.25 6.56 3.81 6 4.5 6ZM3.25 9.5h13.5v5.75c0 .69-.56 1.25-1.25 1.25h-11c-.69 0-1.25-.56-1.25-1.25V9.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.75 3a.75.75 0 0 0-.75.75V4.5h-.5A2.75 2.75 0 0 0 1.75 7.25v8A2.75 2.75 0 0 0 4.5 18h11a2.75 2.75 0 0 0 2.75-2.75v-8A2.75 2.75 0 0 0 15.5 4.5H15v-.75a.75.75 0 0 0-1.5 0V4.5h-7v-.75A.75.75 0 0 0 5.75 3ZM4.5 6h11c.69 0 1.25.56 1.25 1.25V8H3.25v-.75C3.25 6.56 3.81 6 4.5 6ZM3.25 9.5h13.5v5.75c0 .69-.56 1.25-1.25 1.25h-11c-.69 0-1.25-.56-1.25-1.25V9.5Z'/%3E%3C/svg%3E"); }

/* 5) بلوك الجدول: كارت مستقلّ بمسافة واضحة تفصله عن بلوك الرأس (الملخّص + الفلاتر). */
.fi-resource-routers .fi-ta-content-ctn {
    margin-top: var(--space-5);
    background: var(--cwz-card);
    border: 1px solid var(--cwz-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ============================================================
   فلاتر «المتصلون الآن» على صف واحد (محصور بـ :has على عدّاد المتصلين،
   فلا يمسّ صفحات أخرى تشارك كلاسات فلاتر Filament مثل الراوترات).
   ============================================================ */
.fi-ta:has(.cwz-online-count) .fi-ta-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}
/* إخفاء عنوان «التصفيات» — الحقول موسومة بنفسها، فيتحرّر الصف. */
.fi-ta:has(.cwz-online-count) .fi-ta-filters-header { display: none; }
/* شبكة الحقول تأخذ العرض المتاح، والأزرار بجانبها في نهاية الصف. */
.fi-ta:has(.cwz-online-count) .fi-ta-filters > .fi-sc { flex: 1 1 460px; min-width: 0; }
.fi-ta:has(.cwz-online-count) .fi-ta-filters-actions-ctn { flex: 0 0 auto; align-self: flex-end; margin-block: 0; }

/* ============================================================
   نصوص أوضح قليلاً في جدول المتصلين — رفع الباهت (faint) درجة إلى (dim)،
   ورفع بيانات ثانوية من (dim) إلى (ink) لتظهر بوضوح دون طمس الهرمية.
   ============================================================ */
tr.cwz-session-row .cwz-cardsum-label,
tr.cwz-session-row .cwz-sess-fact-ic,
tr.cwz-session-row .cwz-sess-pkg-ic,
tr.cwz-session-row .cwz-cardsum-x-ic,
tr.cwz-session-row .cwz-sess-router-ic.is-offline { color: var(--cwz-ink-dim); }
tr.cwz-session-row .cwz-sess-fact,
tr.cwz-session-row .cwz-sess-mono,
tr.cwz-session-row .cwz-cardsum-x,
tr.cwz-session-row .cwz-cardsum-remaining,
tr.cwz-session-row .cwz-cardsum-muted { color: var(--cwz-ink); }

/* ============================================================
   عمود الاستهلاك في جدول الكروت — شريط بصري «المستهلَك / المساحة»
   يعيد استخدام cwz-usage-track/fill/pct. + بوب أب تفاصيل المتصلين.
   ============================================================ */
.cwz-cardusage { display: flex; flex-direction: column; gap: 5px; min-width: 150px; max-width: 230px; }
.cwz-cardusage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cwz-cardusage-val { font-size: 0.8rem; font-weight: 600; color: var(--cwz-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cwz-cardusage-sep { color: var(--cwz-ink-faint); font-weight: 400; }
.cwz-cardusage-unl { font-size: 0.72rem; font-weight: 600; color: var(--cwz-ink-dim); }

/* بوب أب تفاصيل المتصلين: نفس شرائح الجلسات بمسافة مريحة داخل المودال. */
.cwz-sess-list-modal { gap: 10px; }
.cwz-modal-empty { padding: 1.5rem 1rem; text-align: center; color: var(--cwz-ink-dim); font-size: 0.9rem; }

/* ════════════════════════════════════════════════════════════
   فورم تصميم الكارت — عمود المعاينة: كارت كبير بنسبة الطباعة + ورقة A4 مصغّرة بجانبها ملخص المقاسات
   ════════════════════════════════════════════════════════════ */
.cwz-design-preview { display: flex; flex-direction: column; gap: 0.75rem; }

/* مسرح الكارت: خلفية مربّعات خفيفة تُبرز حدود الكارت الأبيض في الوضعين؛ الكارت لا ينضغط (يُصغَّر بـ zoom من preview). */
.cwz-card-stage {
    display: flex; justify-content: center; padding: 1rem 0.75rem; border-radius: 12px; overflow: hidden;
    background:
        linear-gradient(45deg, var(--cwz-sunken) 25%, transparent 25%, transparent 75%, var(--cwz-sunken) 75%),
        linear-gradient(45deg, var(--cwz-sunken) 25%, transparent 25%, transparent 75%, var(--cwz-sunken) 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px;
    box-shadow: inset 0 0 0 1px var(--cwz-border);
}

/* صف الورقة + الملخص: لوحة غائرة واحدة، تلتفّ تحت بعضها على الشاشات الضيقة. */
.cwz-card-stage__card { flex: none; }
.cwz-design-preview__sheet-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem;
    padding: 0.875rem; border-radius: 12px; background: var(--cwz-sunken); box-shadow: inset 0 0 0 1px var(--cwz-border-soft);
}
.cwz-design-preview__facts { flex: 1 1 9rem; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.cwz-design-preview__facts > div {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.75rem;
    border-radius: 10px; background: var(--cwz-surface); box-shadow: inset 0 0 0 1px var(--cwz-border-soft);
}
.cwz-design-preview__facts dt { font-size: 0.75rem; color: var(--cwz-ink-dim); }
.cwz-design-preview__facts dd { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--cwz-ink-strong); font-variant-numeric: tabular-nums; }
.cwz-design-preview__facts dd span { font-weight: 500; color: var(--cwz-ink-dim); }

/* ورقة A4 مصغّرة: المقاسات والمسافات بالبكسل من sheet.blade.php (نفس هندسة الطباعة) —
   كل خلية نسخة مصغّرة من الكارت تملؤها تماماً. */
.cwz-sheet {
    flex: none; display: grid; box-sizing: border-box; overflow: hidden; background: var(--cwz-paper); border-radius: 4px;
    box-shadow: 0 0 0 1px var(--cwz-border), 0 8px 20px -10px rgb(15 23 42 / 0.45);
}
/* direction:ltr ليبدأ التصغير من الزاوية اليسرى للخلية مهما كان اتجاه الواجهة. */
.cwz-sheet__mini { min-width: 0; min-height: 0; direction: ltr; }

/* أزرار «عدد الكروت في صفحة A4»: العدد كبير وتحته الشبكة (أعمدة × صفوف) — كل الخيارات ظاهرة بلا قائمة منسدلة. */
.cwz-grid-picker .fi-fo-toggle-buttons-btn-ctn > .fi-btn { width: 100%; }
.cwz-grid-opt { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 0.15rem 0; }
.cwz-grid-opt strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cwz-grid-opt small { font-size: 0.7rem; font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; }