/* ============================================================================
   customer-dashboard.css — نظام تصميم بوابة دعم العميل (Support Portal)
   ----------------------------------------------------------------------------
   الهوية: Glass — بطاقات شبه شفافة، حواف ناعمة، لون أساسي أزرق مدعوم.
   الجديد هنا إن الهوية دي بقى ليها **وجهان**:

     • Dark Glass  (data-theme="dark")  — نفس القيم الأصلية بالحرف، مفيش
       تغيير في هوية الوضع الليلي.
     • Light Glass (data-theme="light") — نفس اللغة البصرية بالظبط (زجاج،
       حواف، تدرّجات، نفس الأزرق) لكن على أرضية فاتحة، بتباين مقروء.

   قاعدة صارمة: **مفيش لون ثابت (hex/rgba) خارج كتلة الـTokens دي.**
   أي لون في باقي الملف لازم يكون var(--…) — ده اللي بيخلي تبديل الثيم
   يشتغل فعليًا بدل ما يفضل في عناصر محتفظة بلون الوضع التاني.

   الملف مكمّل لـ /assets/js/admin/admin-style.css مش بديل ليه، وكل تعديل
   هنا مقصور على body.customer-shell عشان صفحات الإدارة ما تتأثرش.
   ========================================================================== */

/* ==================== 1) Tokens ==================== */

/* ---------- 1.a مقاييس مشتركة بين الثيمين ---------- */
:root {
    /* سلم المسافات */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.75rem;

    /* الحواف */
    --r-sm: .5rem;
    --r-md: .75rem;
    --r-lg: 1.1rem;
    --r-xl: 1.35rem;
    --r-pill: 99px;

    /* سلم الخطوط */
    --fs-xs: .72rem;
    --fs-sm: .82rem;
    --fs-base: .92rem;
    --fs-md: 1.05rem;
    --fs-lg: 1.3rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.15rem;

    /* التخطيط */
    --sidebar-w: 290px;
    --sidebar-w-collapsed: 74px;
    --customer-nav-h: 56px;
    --content-max: 1420px;

    /* الحركة */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .16s;
    --dur: .22s;
}

/* ---------- 1.b الوضع الليلي (Dark Glass — الهوية الأصلية) ---------- */
:root,
:root[data-theme='dark'] {
    color-scheme: dark;

    --color-primary: #00234A;
    --color-primary-variant: #0077CC;
    --color-accent: #0077CC;
    --color-accent-2: #4DA3FF;
    --color-accent-soft: #8FC7FF;
    --color-accent-hover: #0066AA;
    --color-accent-dark: #0066AA;

    --color-background: #060B14;
    --color-surface: #0D1622;
    --color-surface-2: #121F30;
    --color-muted: #101B2C;

    --color-text: #F3F6FB;
    --color-text-secondary: #94A6C2;
    --color-text-3: #5A6A82;

    --color-success: #22C58B;
    --color-warning: #F5A623;
    --color-danger: #FF6B6B;
    --color-whatsapp: #25D366;
    --color-purple: #B45FE0;

    --color-border: rgba(255, 255, 255, .09);
    --color-border-strong: rgba(255, 255, 255, .16);
    --color-nav-text: #FFFFFF;
    --color-nav-text-dim: rgba(255, 255, 255, .62);
    --color-nav-border: rgba(255, 255, 255, .1);
    --nav-hover-bg: rgba(255, 255, 255, .1);
    --nav-hover-strong: rgba(255, 255, 255, .18);
    --nav-field-bg: rgba(255, 255, 255, .1);
    --nav-field-border: rgba(255, 255, 255, .16);

    /* القائمة الجانبية */
    --color-sidebar-bg: #050912;
    --color-sidebar-text: rgba(255, 255, 255, .8);
    --color-sidebar-text-active: #FFFFFF;
    --color-sidebar-hover: rgba(255, 255, 255, .06);
    --color-sidebar-active-bg: rgba(0, 119, 204, .18);
    --color-sidebar-active: #0077CC;
    --color-sidebar-border: rgba(255, 255, 255, .1);

    /* أسطح الزجاج ودرجات الرفع */
    --glass-bg: rgba(255, 255, 255, .04);
    --surface-subtle: rgba(255, 255, 255, .025);
    --surface-subtle-2: rgba(255, 255, 255, .03);
    --surface-raised: rgba(255, 255, 255, .06);
    --hover-bg: rgba(255, 255, 255, .05);
    --track-bg: rgba(255, 255, 255, .08);
    --star-inactive: rgba(255, 255, 255, .18);
    --glass-blur: 18px;

    /* خلفية الصفحة */
    --page-glow-1: rgba(0, 119, 204, .20);
    --page-glow-2: rgba(77, 163, 255, .10);
    --dot-color: rgba(255, 255, 255, .045);
    --dot-opacity: .6;

    /* درجات التلوين الخفيف (خلفيات الشارات والتنبيهات) */
    --tint-accent: rgba(77, 163, 255, .14);
    --tint-accent-border: rgba(77, 163, 255, .25);
    --tint-accent-border-strong: rgba(77, 163, 255, .38);
    --tint-success: rgba(34, 197, 139, .16);
    --tint-success-border: rgba(34, 197, 139, .35);
    --tint-warning: rgba(245, 166, 35, .16);
    --tint-warning-border: rgba(245, 166, 35, .4);
    --tint-danger: rgba(255, 107, 107, .14);
    --tint-neutral: rgba(148, 166, 194, .14);
    --tint-whatsapp: rgba(37, 211, 102, .14);
    --tint-purple: rgba(180, 95, 224, .14);

    /* ألوان النص فوق التلوين الخفيف */
    --on-accent: #6EB4FF;
    --on-accent-soft: #8FC7FF;
    --on-success: #22C58B;
    --on-warning: #F5A623;
    --on-danger: #FF6B6B;
    --on-neutral: #94A6C2;
    --on-whatsapp: #25D366;
    --on-purple: #B45FE0;

    /* المدخلات والنوافذ */
    --input-bg: #0F1A2A;
    --input-text: var(--color-text);
    --modal-overlay: rgba(3, 7, 15, .75);
    --focus-ring: rgba(0, 119, 204, .35);

    /* شريط انتحال الحساب */
    --count-bg: #E03B3B;
    --count-text: #FFFFFF;

    --impersonation-bg: #4A3A00;
    --impersonation-text: #FFD98A;

    /* الظلال */
    --shadow: 0 30px 80px -25px rgba(0, 8, 25, .7);
    --shadow-sm: 0 10px 24px -12px rgba(0, 8, 25, .6);
    --shadow-lg: 0 25px 60px -20px rgba(0, 8, 25, .75);
    --shadow-glow: 0 0 50px -12px rgba(0, 119, 204, .5);

    --gradient-text: linear-gradient(90deg, #8FC7FF, #4DA3FF, #B9DCFF);
}

/* ---------- 1.c الوضع النهاري (Light Glass — نفس اللغة، أرضية فاتحة) ---------- */
:root[data-theme='light'] {
    color-scheme: light;

    --color-primary: #00234A;
    --color-primary-variant: #0077CC;
    --color-accent: #0077CC;
    --color-accent-2: #0A6FBF;
    --color-accent-soft: #0B5FA5;
    --color-accent-hover: #005A9E;
    --color-accent-dark: #004E88;

    --color-background: #F1F5FA;
    --color-surface: #FFFFFF;
    --color-surface-2: #F7FAFD;
    --color-muted: #EDF2F8;

    --color-text: #0F1B2D;
    --color-text-secondary: #52627A;
    --color-text-3: #7C8CA3;

    --color-success: #0F7A52;
    --color-warning: #9A6608;
    --color-danger: #C0342F;
    --color-whatsapp: #12833D;
    --color-purple: #7A3AA8;

    --color-border: rgba(15, 27, 45, .11);
    --color-border-strong: rgba(15, 27, 45, .2);
    --color-nav-text: #FFFFFF;
    --color-nav-text-dim: rgba(255, 255, 255, .68);
    --color-nav-border: rgba(255, 255, 255, .12);
    --nav-hover-bg: rgba(255, 255, 255, .12);
    --nav-hover-strong: rgba(255, 255, 255, .2);
    --nav-field-bg: rgba(255, 255, 255, .12);
    --nav-field-border: rgba(255, 255, 255, .2);

    /* قائمة جانبية فاتحة تحت شريط علوي كحلي — نمط شائع وواضح */
    --color-sidebar-bg: #FFFFFF;
    --color-sidebar-text: #47576F;
    --color-sidebar-text-active: #00234A;
    --color-sidebar-hover: rgba(15, 27, 45, .05);
    --color-sidebar-active-bg: rgba(0, 119, 204, .1);
    --color-sidebar-active: #0077CC;
    --color-sidebar-border: rgba(15, 27, 45, .1);

    /* الزجاج على أرضية فاتحة = أبيض شبه معتم فوق الخلفية */
    --glass-bg: rgba(255, 255, 255, .74);
    --surface-subtle: rgba(255, 255, 255, .55);
    --surface-subtle-2: rgba(15, 27, 45, .022);
    --surface-raised: rgba(15, 27, 45, .05);
    --hover-bg: rgba(15, 27, 45, .045);
    --track-bg: rgba(15, 27, 45, .1);
    --star-inactive: rgba(15, 27, 45, .18);
    --glass-blur: 14px;

    --page-glow-1: rgba(0, 119, 204, .1);
    --page-glow-2: rgba(77, 163, 255, .09);
    --dot-color: rgba(15, 27, 45, .05);
    --dot-opacity: .5;

    --tint-accent: rgba(0, 119, 204, .1);
    --tint-accent-border: rgba(0, 119, 204, .24);
    --tint-accent-border-strong: rgba(0, 119, 204, .4);
    --tint-success: rgba(15, 122, 82, .12);
    --tint-success-border: rgba(15, 122, 82, .3);
    --tint-warning: rgba(154, 102, 8, .13);
    --tint-warning-border: rgba(154, 102, 8, .38);
    --tint-danger: rgba(192, 52, 47, .11);
    --tint-neutral: rgba(82, 98, 122, .12);
    --tint-whatsapp: rgba(18, 131, 61, .12);
    --tint-purple: rgba(122, 58, 168, .12);

    --on-accent: #0B5FA5;
    --on-accent-soft: #0A5390;
    --on-success: #0B6544;
    --on-warning: #7D5307;
    --on-danger: #A72B27;
    --on-neutral: #52627A;
    --on-whatsapp: #0E6B32;
    --on-purple: #66308D;

    --input-bg: #FFFFFF;
    --input-text: var(--color-text);
    --modal-overlay: rgba(15, 27, 45, .45);
    --focus-ring: rgba(0, 119, 204, .28);

    --count-bg: #C0342F;
    --count-text: #FFFFFF;

    --impersonation-bg: #FFF4D6;
    --impersonation-text: #6B4E00;

    --shadow: 0 24px 60px -28px rgba(15, 27, 45, .35);
    --shadow-sm: 0 8px 20px -14px rgba(15, 27, 45, .3);
    --shadow-lg: 0 22px 50px -24px rgba(15, 27, 45, .34);
    --shadow-glow: 0 0 40px -14px rgba(0, 119, 204, .35);

    --gradient-text: linear-gradient(90deg, #0B5FA5, #0077CC, #2E8FD8);
}

/* انتقال الثيم: نغيّر الألوان بنعومة، مع احترام تفضيل تقليل الحركة.
   theme-manager.js بيحط .no-transition لحظة التحميل فمفيش وميض أول مرة. */
body.customer-shell:not(.no-transition),
body.customer-shell:not(.no-transition) .sidebar,
body.customer-shell:not(.no-transition) .admin-nav {
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* ==================== 2) الخلفية والهيكل ==================== */
body.customer-shell {
    position: relative;
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.customer-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60rem 40rem at 90% -10%, var(--page-glow-1), transparent 60%),
        radial-gradient(50rem 35rem at -10% 30%, var(--tint-accent), transparent 55%),
        var(--color-background);
}

body.customer-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(60rem 60rem at 70% 0%, black, transparent 70%);
    -webkit-mask-image: radial-gradient(60rem 60rem at 70% 0%, black, transparent 70%);
    opacity: .6;
}

body.customer-shell .admin-main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
    width: 100%;
    box-sizing: border-box;
}

/* تنقّل ثابت على الشاشات الكبيرة: القائمة الجانبية مش درج، دايماً ظاهرة،
   والمحتوى بيتزحزح جنبها. تحت 1100px بيرجع سلوك الدرج الأصلي كما هو. */
/* زر الطي يظهر على الشاشات الكبيرة فقط (على الموبايل القائمة درج أصلاً) */
body.customer-shell #sidebarCollapseBtn { display: none; }

@media (min-width: 1100px) {
    /* --sidebar-current هو العرض الفعّال: بيتبدّل بين الموسّع والمطوي،
       وكل ما يعتمد على عرض القائمة (المحتوى، المساعد العائم) بيقرأ منه
       بدل ما يكرّر الحساب. */
    body.customer-shell { --sidebar-current: var(--sidebar-w); }
    html[data-sidebar='collapsed'] body.customer-shell { --sidebar-current: var(--sidebar-w-collapsed); }

    body.customer-shell .sidebar {
        right: 0;
        top: var(--customer-nav-h);
        height: calc(100dvh - var(--customer-nav-h));
        width: var(--sidebar-current);
        box-shadow: none;
        z-index: 900;
        transition: width var(--dur) var(--ease);
        overflow: visible;               /* التلميحات تخرج خارج حدود القائمة */
    }

    body.customer-shell .sidebar-close,
    body.customer-shell #menuToggle,
    body.customer-shell #mobileMenuToggle { display: none !important; }

    body.customer-shell #sidebarCollapseBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        border-radius: var(--r-sm);
        border: 1px solid var(--color-sidebar-border);
        background: transparent;
        color: var(--color-sidebar-text);
        cursor: pointer;
        transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }

    body.customer-shell #sidebarCollapseBtn:hover {
        background: var(--color-sidebar-hover);
        color: var(--color-sidebar-text-active);
    }

    body.customer-shell #sidebarCollapseBtn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* السهم بيلف حسب الحالة فيوضّح اتجاه الإجراء */
    body.customer-shell #sidebarCollapseBtn svg { transition: transform var(--dur) var(--ease); }
    html[data-sidebar='collapsed'] body.customer-shell #sidebarCollapseBtn svg { transform: rotate(180deg); }

    body.customer-shell .sidebar-overlay { display: none !important; }

    body.customer-shell .admin-main {
        /* width:auto + margin-left:0 معًا، والاتنين ضروريين:
             • width:100% (من القاعدة العامة) بيخلي العنصر أعرض من المساحة
               الباقية جنب القائمة، فيطلع تمرير أفقي على الصفحات اللي مش
               flex في <body>.
             • لكن width:auto وحده ما بيكفيش: margin:0 auto الموروث بيلغي
               تمدّد الـflex item (auto margins تعطّل stretch)، فالعنصر
               بيتقلّص لعرض محتواه ويتوسّط.
           بتصفير الهامش الأيسر بيرجع التمدّد في flex، وبيتحسب العرض من
           المساحة الباقية في التخطيط العادي. */
        width: auto;
        margin-left: 0;
        margin-right: var(--sidebar-current);
        max-width: calc(var(--content-max) - var(--sidebar-current));
        transition: margin-right var(--dur) var(--ease), max-width var(--dur) var(--ease);
    }

    /* المساعد العائم (robot.css) مثبّت أسفل يمين الشاشة، وهو المكان اللي
       بقت تحتله القائمة الثابتة. نزحزحه جنبها بدل ما يتغطى تحتها. */
    body.customer-shell .robot-container {
        right: calc(var(--sidebar-current) + 30px);
        transition: right var(--dur) var(--ease);
    }

    /* ---------- الوضع المطوي: أيقونات فقط ---------- */
    html[data-sidebar='collapsed'] body.customer-shell .sidebar-header .sidebar-title { display: none; }
    html[data-sidebar='collapsed'] body.customer-shell .sidebar-header { justify-content: center; padding-inline: 0; }

    html[data-sidebar='collapsed'] body.customer-shell .sidebar-item {
        justify-content: center;
        padding-inline: 0;
        position: relative;
    }

    html[data-sidebar='collapsed'] body.customer-shell .sidebar-item > span:not(.nav-count) {
        /* الاسم يختفي بصريًا لكن يفضل متاح لقارئ الشاشة */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* العدّاد يتحوّل لنقطة صغيرة على ركن الأيقونة */
    html[data-sidebar='collapsed'] body.customer-shell .sidebar-item .nav-count {
        position: absolute;
        top: .45rem;
        left: 1.05rem;
        margin: 0;
        min-width: .95rem;
        height: .95rem;
        padding: 0 .2rem;
        font-size: .58rem;
        border: 2px solid var(--color-sidebar-bg);
    }

    /* تلميح باسم القسم عند المرور على الأيقونة */
    html[data-sidebar='collapsed'] body.customer-shell .sidebar-item::after {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        right: calc(100% + .6rem);
        transform: translateY(-50%) translateX(.35rem);
        background: var(--color-surface-2);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--r-sm);
        padding: .35rem .65rem;
        font-size: var(--fs-sm);
        font-weight: 700;
        white-space: nowrap;
        box-shadow: var(--shadow-sm);
        opacity: 0;
        pointer-events: none;
        z-index: 950;
        transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    }

    html[data-sidebar='collapsed'] body.customer-shell .sidebar-item:hover::after,
    html[data-sidebar='collapsed'] body.customer-shell .sidebar-item:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    html[data-sidebar='collapsed'] body.customer-shell .sidebar-footer { padding-inline: 0; }
}

/* من يفضّل تقليل الحركة: التبديل فوري بدون انتقالات */
@media (prefers-reduced-motion: reduce) {
    body.customer-shell .sidebar,
    body.customer-shell .admin-main,
    body.customer-shell .robot-container,
    body.customer-shell .sidebar-item::after,
    body.customer-shell #sidebarCollapseBtn svg { transition: none !important; }
}


/* ==================== 2.a الثيم على العناصر المشتركة ====================
   admin-style.css بيثبّت ألوان فاتحة على القائمة الجانبية والشريط العلوي
   (color:white، rgba(255,255,255,…)) لأنها مصمّمة لخلفية كحلية دايمًا.
   في الوضع النهاري ده بيدّي نص أبيض على أبيض. فبنعيد اشتقاقها من الـtokens
   هنا، داخل body.customer-shell فقط، فصفحات الإدارة ما تتأثرش. */
body.customer-shell .sidebar {
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    border-left: 1px solid var(--color-sidebar-border);
}

body.customer-shell .sidebar-header {
    border-bottom: 1px solid var(--color-sidebar-border);
    color: var(--color-sidebar-text-active);
}

body.customer-shell .sidebar-close { color: var(--color-sidebar-text); }
body.customer-shell .sidebar-close:hover { background: var(--color-sidebar-hover); }

body.customer-shell .sidebar-item {
    color: var(--color-sidebar-text);
    border-right: 4px solid transparent;
}

body.customer-shell .sidebar-item:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
    border-right-color: var(--color-sidebar-active);
}

body.customer-shell .sidebar-item.active {
    background: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-text-active);
    border-right-color: var(--color-sidebar-active);
}

body.customer-shell .sidebar-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* الفاصل أسفل القائمة (تسجيل الخروج) */
body.customer-shell .sidebar-footer {
    padding: var(--sp-4);
    border-top: 1px solid var(--color-sidebar-border);
    flex-shrink: 0;
}

body.customer-shell .sidebar-item.is-danger { color: var(--color-danger); }
body.customer-shell .sidebar-item.is-danger:hover { color: var(--color-danger); }

body.customer-shell .sidebar-title { font-weight: 800; font-size: var(--fs-md); }

/* ==================== 2.b الشريط العلوي ====================
   الشريط كان position:sticky داخل #sidebar-container، والحاوية دي ارتفاعها
   = ارتفاع الشريط بالظبط. العنصر اللاصق ما بيقدرش يتحرك خارج صندوق أبوه،
   فكان بيختفي مع أول تمرير وتفضل شريحة فاضية فوق القائمة الجانبية الثابتة.
   الحل من جذره: الشريط ثابت بالنسبة للنافذة زي القائمة بالظبط، والصفحة
   بتبدأ من تحته. كده مفيش فجوة ولا حزّ بين الاتنين مهما كان موضع التمرير.

   الشريط يفضل كحليًا في الوضعين (جزء من هوية المنتج)، فنصّه أبيض دايمًا —
   بنأكّد ده هنا عشان ما يورثش لون نص الثيم الفاتح. */
body.customer-shell {
    padding-top: var(--customer-nav-h);
}

body.customer-shell .admin-nav {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-nav-border);
    padding: 0;
}

body.customer-shell .nav-container {
    max-width: none;
    padding: 0 var(--sp-4);
    min-height: 56px;
    gap: var(--sp-3);
}

body.customer-shell .nav-right,
body.customer-shell .nav-left {
    gap: var(--sp-2);
    min-width: 0;
}

body.customer-shell .nav-left { flex-shrink: 1; }

body.customer-shell .admin-nav,
body.customer-shell .admin-nav .nav-btn,
body.customer-shell .admin-nav .menu-toggle { color: var(--color-nav-text); }

body.customer-shell .admin-nav .nav-btn,
body.customer-shell .admin-nav .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

body.customer-shell .admin-nav .nav-btn:hover,
body.customer-shell .admin-nav .menu-toggle:hover { background: var(--nav-hover-bg); }

body.customer-shell .admin-nav .nav-btn:focus-visible,
body.customer-shell .admin-nav .menu-toggle:focus-visible,
body.customer-shell .portal-brand:focus-visible {
    outline: 2px solid var(--color-nav-text);
    outline-offset: 2px;
}

/* ---------- الهوية ---------- */
/* نفس ملف الشعار المستخدم في صفحة الدخول (/logo.png): شعار المنتج الحقيقي
   بخلفية شفافة. النسخة اللي كانت مستعملة هنا (assets/images/logo.png) ملف
   JPEG بخلفية فاتحة ونسبة عريضة — بيبان كمستطيل فاتح فوق شريط كحلي. */
.portal-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    border-radius: var(--r-sm);
    padding: var(--sp-1);
}

.portal-brand-logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.portal-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.portal-brand-name {
    font-weight: 800;
    font-size: var(--fs-base);
    color: var(--color-nav-text);
    white-space: nowrap;
}

.portal-brand-context {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-nav-text-dim);
    white-space: nowrap;
}

/* ---------- شارة الإشعارات ---------- */
.nav-badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--count-bg);
    color: var(--count-text);
    font-size: .62rem;
    font-weight: 800;
    border: 2px solid var(--color-primary);
    box-sizing: content-box;
}

/* ---------- حالة النظام ---------- */
body.customer-shell .system-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: var(--nav-hover-bg);
    color: var(--color-nav-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
}

body.customer-shell .system-status:hover { background: var(--nav-hover-strong); }

body.customer-shell .system-status .status-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-3);
}

body.customer-shell .status-dot.status-online      { background: var(--color-success); }
body.customer-shell .status-dot.status-degraded    { background: var(--color-warning); }
body.customer-shell .status-dot.status-down        { background: var(--color-danger); }
body.customer-shell .status-dot.status-maintenance { background: var(--color-accent); }

/* ---------- الصورة الرمزية ---------- */
body.customer-shell .nav-avatar-btn { width: 2.35rem; height: 2.35rem; }

body.customer-shell .avatar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-weight: 800;
    font-size: var(--fs-sm);
}

/* ---------- القوائم المنسدلة ---------- */
.portal-menu-wrap { position: relative; display: flex; align-items: center; }

body.customer-shell .portal-menu {
    position: absolute;
    top: calc(100% + .45rem);
    /* خصائص فيزيائية عن قصد، مش inset-inline-*.
       صف الأدوات هو آخر عنصر في شريط space-between، يعني بيقع على الحافة
       الخارجية للشاشة: يمينًا في LTR ويسارًا في RTL. القائمة لازم تُربط
       بنفس الحافة فتفتح ناحية وسط الصفحة. الخصائص المنطقية هنا بتُحلّ
       باتجاه الكتلة الحاوية مش العنصر، والاتجاه نفسه غير مضمون
       (language-manager بيضبطه من لغة المتصفح) — فالنتيجة كانت قائمة
       بتفتح لبرّه الشاشة. القاعدتان تحت صريحتان ولا تعتمدان على ذلك. */
    right: 0;
    left: auto;
    z-index: 1200;
    min-width: 13rem;
    /* بريد طويل ما ينفعش يمدّ القائمة لبره الشاشة */
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: var(--sp-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    animation: portalMenuIn var(--dur-fast) var(--ease);
}

/* في RTL صف الأدوات على اليسار، فالقائمة تُربط باليسار وتفتح يمينًا */
html[dir="rtl"] body.customer-shell .portal-menu,
body.customer-shell[dir="rtl"] .portal-menu {
    right: auto;
    left: 0;
}

@keyframes portalMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.customer-shell .portal-menu { animation: none; }
}

body.customer-shell .portal-menu-head {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-2);
}

.portal-menu-name { font-weight: 800; font-size: var(--fs-sm); color: var(--color-text); }
.portal-menu-email { font-size: var(--fs-xs); color: var(--color-text-3); word-break: break-all; }
.portal-menu-state { align-self: flex-start; margin-top: var(--sp-2); }

body.customer-shell .portal-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: none;
    border-radius: var(--r-sm);
    color: var(--color-text);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

body.customer-shell .portal-menu-item:hover { background: var(--hover-bg); }
body.customer-shell .portal-menu-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
body.customer-shell .portal-menu-item.is-danger { color: var(--color-danger); }
body.customer-shell .portal-menu-item svg { flex-shrink: 0; }

/* ==================== 2.c طبقة توافق للصفحات الأقدم ====================
   صفحات البوابة الأخرى (الباقات، المجتمع، خارطة الطريق، الأمان) مبنية على
   admin-style.css و styles.css، والاتنين مصمّمين لخلفية فاتحة دايمًا:
     • .page-header h1 و .section-title و .stat-value بيستخدموا
       var(--color-primary) كلون نص — وهو كحلي غامق في الثيمين، يعني نص
       غامق على خلفية غامقة = عنوان غير مقروء في الوضع الليلي.
     • أسطح بيضاء ثابتة (#fff) بتفضل بيضاء في الوضع الليلي.

   بدل ما نعيد كتابة كل صفحة، بنعيد اشتقاق الأنماط دي من الـtokens **داخل
   body.customer-shell فقط**، فصفحات الإدارة ما تتأثرش وما بيحصلش تكرار
   للتصميم في كل صفحة. */
body.customer-shell .page-header h1,
body.customer-shell .section-title,
body.customer-shell .modal-header h2,
body.customer-shell .stat-info .stat-value,
body.customer-shell .saas-section > h2 { color: var(--color-text); }

body.customer-shell .page-header p,
body.customer-shell .saas-section > p { color: var(--color-text-secondary); }

/* أي سطح بيتعرّف كبطاقة في الصفحات الأقدم ياخد نفس زجاج البوابة */
body.customer-shell .card,
body.customer-shell .stat-card,
body.customer-shell .admin-card,
body.customer-shell .content-card,
body.customer-shell .empty-state {
    background: var(--glass-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.customer-shell table { color: var(--color-text); }
body.customer-shell th { color: var(--color-text-secondary); }
body.customer-shell td,
body.customer-shell th { border-color: var(--color-border); }

/* حقول الإدخال في الصفحات الأقدم.
   الاستثناءات مقصودة: حقول البوابة نفسها (بحث الشريط العلوي وبحث مركز
   المساعدة) لها أرضياتها الخاصة، والقاعدة العامة دي أقوى منها في التخصيص
   فكانت هتلوّنها غلط. */
body.customer-shell input:not([type="checkbox"]):not([type="radio"]):not(.portal-search-input):not(.help-search-input),
body.customer-shell select,
body.customer-shell textarea {
    background: var(--input-bg, var(--color-surface));
    color: var(--color-text);
    border-color: var(--color-border);
}

body.customer-shell input::placeholder,
body.customer-shell textarea::placeholder { color: var(--color-text-3); }

/* ==================== 3) الترويسة ==================== */
.page-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

.page-topbar h1 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
}

.page-topbar .page-subtitle {
    margin: var(--sp-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    line-height: 1.6;
    max-width: 58ch;
}

.page-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-accent-soft);
    background: var(--tint-accent);
    border: 1px solid var(--tint-accent-border);
    padding: .3rem .85rem;
    border-radius: var(--r-pill);
    margin-bottom: .6rem;
}

.eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-2);
    box-shadow: 0 0 8px var(--color-accent-2);
}

.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==================== 4) البطاقات ==================== */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--r-lg);
}

.panel {
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.panel-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.panel-title svg { color: var(--color-accent-2); flex-shrink: 0; }

.panel-subtitle {
    margin: .15rem 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    line-height: 1.6;
}

/* تُستخدم على <a> و<button> معاً، فلازم تلغي شكل الزر الافتراضي للمتصفح */
.panel-link {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--on-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

.panel-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.panel-link:hover { color: var(--color-accent); text-decoration: underline; }

/* ==================== 5) بطاقات المؤشرات ==================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.kpi {
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: border-color .2s ease, transform .2s ease;
    text-align: right;
}

.kpi.is-clickable { cursor: pointer; }
.kpi.is-clickable:hover,
.kpi.is-clickable:focus-visible {
    border-color: var(--tint-accent-border-strong);
    transform: translateY(-2px);
    outline: none;
}

.kpi-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}

.kpi-label svg { width: 15px; height: 15px; flex-shrink: 0; }

.kpi-value {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.kpi-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-3);
    line-height: 1.5;
}

.kpi--accent  .kpi-value { color: var(--color-accent-soft); }
.kpi--info    .kpi-value { color: var(--on-accent); }
.kpi--warning .kpi-value { color: var(--color-warning); }
.kpi--success .kpi-value { color: var(--color-success); }
.kpi--danger  .kpi-value { color: var(--color-danger); }

/* ==================== 6) الشارات والحالات ==================== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.status-open        { background: var(--tint-accent); color: var(--on-accent); }
.status-in-progress { background: var(--tint-warning); color: var(--on-warning); }
.status-resolved    { background: var(--tint-success); color: var(--on-success); }
.status-confirmed   { background: var(--tint-success); color: var(--on-success); }
.status-rejected    { background: var(--tint-danger); color: var(--on-danger); }
.status-neutral     { background: var(--tint-neutral); color: var(--on-neutral); }

/* نبرات حالة الخدمة — تُشتق من service-status-model.js فمصدر التسمية واللون واحد */
.status-tone-success { background: var(--tint-success); color: var(--on-success); }
.status-tone-warning { background: var(--tint-warning); color: var(--on-warning); }
.status-tone-danger  { background: var(--tint-danger);  color: var(--on-danger); }
.status-tone-accent  { background: var(--tint-accent);  color: var(--on-accent); }

/* زر البلاغ وحالته بعد الإرسال */
.report-service-btn { margin-inline-start: var(--sp-2); }

.report-done {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--on-success);
    white-space: nowrap;
}

body.customer-shell .btn-sm {
    padding: .3rem .7rem;
    font-size: var(--fs-xs);
}

body.customer-shell .btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-accent);
    box-shadow: none;
}

body.customer-shell .btn-ghost:hover {
    background: var(--tint-accent);
    border-color: var(--color-accent);
}

/* حالات بلاغات المكافآت (يستخدمها rewards-dashboard.js عبر .status-badge) */
.status-pending     { background: var(--tint-warning); color: var(--on-warning); }
.status-approved    { background: var(--tint-success); color: var(--on-success); }

body.customer-shell .status-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

/* رسالة "لا توجد بيانات" المستخدمة في وحدات قديمة (rewards-dashboard) */
.empty-state {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.7;
    margin: 0;
}

.priority-high   { background: var(--tint-danger); color: var(--on-danger); }
.priority-medium { background: var(--tint-warning); color: var(--on-warning); }
.priority-low    { background: var(--tint-neutral); color: var(--on-neutral); }

.cat-whatsapp     { background: var(--tint-whatsapp); color: var(--on-whatsapp); }
.cat-tickets      { background: var(--tint-accent); color: var(--color-accent-2); }
.cat-subscription { background: var(--tint-purple); color: var(--on-purple); }
.cat-login        { background: var(--tint-danger); color: var(--on-danger); }
.cat-other        { background: var(--tint-neutral); color: var(--on-neutral); }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    border-radius: var(--r-pill);
    font-size: .65rem;
    font-weight: 700;
}

.sla-ok   { background: var(--tint-success); color: var(--on-success); }
.sla-warn { background: var(--tint-warning); color: var(--on-warning); }
.sla-info { background: var(--tint-accent); color: var(--on-accent-soft); }

/* ==================== 7) حالات التحميل / الفراغ / الخطأ ==================== */
.state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    color: var(--color-text-secondary);
}

.state-block svg { opacity: .45; }
.state-title { margin: 0; font-weight: 700; color: var(--color-text); font-size: var(--fs-base); }
.state-text  { margin: 0; font-size: var(--fs-sm); line-height: 1.7; max-width: 44ch; }
.state-block--error .state-title { color: var(--color-danger); }
.state-block--compact { padding: var(--sp-4) var(--sp-3); }

.skeleton {
    background: linear-gradient(90deg,
        var(--glass-bg) 25%,
        var(--color-border) 37%,
        var(--glass-bg) 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.35s ease infinite;
    border-radius: var(--r-sm);
}

.skeleton-line { height: .75rem; margin-bottom: var(--sp-2); }
.skeleton-line:last-child { margin-bottom: 0; width: 60%; }
.skeleton-card { height: 5.5rem; border-radius: var(--r-lg); }

@keyframes skeletonShimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ==================== 8) التنبيهات داخل الصفحة ==================== */
.alert-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface-subtle-2);
    border: 1px solid var(--color-border);
    border-right: 3px solid var(--color-text-3);
}

.alert-item--info    { border-right-color: var(--color-accent-2); }
.alert-item--warning { border-right-color: var(--color-warning); }
.alert-item--danger  { border-right-color: var(--color-danger); }
.alert-item--success { border-right-color: var(--color-success); }

.alert-icon {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-raised);
}

.alert-item--info .alert-icon    { color: var(--color-accent-2); }
.alert-item--warning .alert-icon { color: var(--color-warning); }
.alert-item--danger .alert-icon  { color: var(--color-danger); }
.alert-item--success .alert-icon { color: var(--color-success); }

.alert-body { flex: 1; min-width: 0; }
.alert-title { margin: 0 0 .15rem; font-size: var(--fs-base); font-weight: 700; color: var(--color-text); }
.alert-text  { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.65; }
.alert-action {
    flex-shrink: 0;
    align-self: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-accent-2);
    text-decoration: none;
    white-space: nowrap;
}
.alert-action:hover { text-decoration: underline; }

/* على الشاشات الضيقة الإجراء ينزل سطر لوحده تحت النص بدل ما يزاحمه ويضغطه
   في عمود ضيق. flex-basis:100% على الجسم هي اللي بتجبر الالتفاف فعلياً. */
@media (max-width: 560px) {
    .alert-item { flex-wrap: wrap; }
    .alert-body { flex-basis: 100%; }
    .alert-action {
        align-self: flex-start;
        margin-right: 2.65rem;
        margin-top: var(--sp-1);
    }
}

/* ==================== 9) صفوف البيانات ==================== */
.data-rows { display: flex; flex-direction: column; }

.data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.data-row:last-child { border-bottom: none; }
.data-row:first-child { padding-top: 0; }

.data-row-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    font-weight: 600;
    min-width: 0;
}

/* القيمة ممكن تكون عدة شارات (مثل أهداف SLA الثلاثة)، فلازم تلتف على
   الشاشات الضيقة بدل ما تدفع عرض الصفحة. */
.data-row-value {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

/* ملاحظة الصف: <div> وليس <p> لأنها قد تحتوي عنصر block (مثل شريط الحصة). */
.data-row-note {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-3);
    line-height: 1.6;
}

/* شريط تقدّم بسيط (الحصص، النقاط) */
.meter {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--track-bg);
    overflow: hidden;
    width: 100%;
}

.meter-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
    transition: width .4s ease;
}

.meter-fill--warning { background: linear-gradient(90deg, var(--color-warning), var(--color-warning)); }
.meter-fill--danger  { background: linear-gradient(90deg, var(--color-danger), var(--color-danger)); }

/* ==================== 10) شبكة الأقسام ==================== */
.split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--sp-5);
    align-items: start;
}

.split-grid > .panel { margin-bottom: 0; }

/* ==================== 11) التذاكر ==================== */
.tickets-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: var(--sp-5);
    align-items: start;
}

@media (max-width: 992px) {
    .tickets-layout { grid-template-columns: 1fr; }
    .tickets-layout .ticket-details-panel { min-height: 0; }
}

.tickets-list-panel,
.ticket-details-panel {
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100dvh - 15rem);
    min-height: 26rem;
}

.tickets-list-head {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.tickets-list-scroll { overflow-y: auto; flex: 1; padding: var(--sp-2); }
.ticket-details-scroll { overflow-y: auto; flex: 1; padding: var(--sp-5); }

.ticket-card {
    position: relative;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: var(--surface-subtle);
    text-align: right;
    width: 100%;
    display: block;
    font: inherit;
    color: inherit;
}

.ticket-card:hover { background: var(--hover-bg); border-color: var(--tint-accent-border); }
.ticket-card:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }

.ticket-card.selected {
    background: var(--tint-accent);
    border-color: var(--color-accent-2);
    box-shadow: 0 0 0 1px var(--tint-accent-border) inset;
}

.ticket-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-2);
    gap: var(--sp-2);
}

.ticket-num { color: var(--color-text-secondary); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ticket-title {
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 var(--sp-2);
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-badges-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }

.ticket-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    gap: var(--sp-2);
}

.ticket-sla-hint {
    font-size: var(--fs-xs);
    color: var(--color-accent-soft);
    margin-top: .35rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* علامة "محتاج ردّك" — أهم إشارة للعميل في القائمة */
.ticket-card.needs-reply { border-color: var(--tint-warning-border); }
.ticket-card.needs-reply::before {
    content: "";
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-warning);
    box-shadow: 0 0 8px var(--color-warning);
}

.ticket-detail-head {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.ticket-detail-title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.4;
    font-weight: 800;
}

.ticket-detail-meta {
    display: flex;
    gap: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
}

.detail-section { margin-bottom: var(--sp-5); }

.detail-section-title {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--sp-2);
    font-weight: 700;
}

.detail-body { line-height: 1.75; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ==================== 12) الردود ==================== */
.reply-item {
    padding: var(--sp-4);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    background: var(--color-muted);
    border-right: 3px solid var(--color-success);
}

.reply-item--staff { border-right-color: var(--color-accent); background: var(--tint-accent); }

.reply-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}

.reply-author { font-size: var(--fs-sm); font-weight: 700; }
.reply-time { font-size: var(--fs-xs); color: var(--color-text-secondary); }
.reply-text { margin: 0; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-base); }

.replies-scroll { max-height: 20rem; overflow-y: auto; margin-bottom: var(--sp-4); padding-left: var(--sp-2); }

/* ==================== 13) المرفقات ==================== */
.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(88px, 100%), 1fr));
    gap: var(--sp-3);
}

.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: border-color .2s ease;
}

.attachment-item:hover { border-color: var(--tint-accent-border-strong); }
.attachment-item img { width: 100%; height: 56px; object-fit: cover; border-radius: .35rem; }
.att-name {
    font-size: .65rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-icon {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    border-radius: .35rem;
    color: var(--color-accent-2);
}

/* منطقة اختيار الملفات */
.file-drop {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    background: var(--surface-subtle);
}

.file-drop:hover { border-color: var(--color-accent-2); background: var(--tint-accent); }
.file-chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .25rem .6rem;
    border-radius: var(--r-pill);
    background: var(--tint-accent);
    color: var(--color-accent-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    max-width: 100%;
}

.file-chip button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: .7;
}

/* ==================== 14) الخط الزمني ==================== */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: relative;
    padding-right: var(--sp-2);
}

.activity-item { display: flex; gap: var(--sp-3); align-items: flex-start; }

.activity-icon {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-accent);
    color: var(--color-accent-2);
}

.activity-text { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.5; }
.activity-time { font-size: var(--fs-xs); color: var(--color-text-3); margin-top: .1rem; }

/* ==================== 15) التقييم ==================== */
.star-rating { display: flex; gap: .25rem; direction: ltr; justify-content: flex-end; }

.star {
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--star-inactive);
    transition: color .15s ease, transform .15s ease;
    background: none;
    border: none;
    padding: 0;
}

.star:hover { transform: scale(1.12); }
.star.active { color: var(--on-warning); }
.star:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; border-radius: .2rem; }

.rating-submitted {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
}

/* ==================== 16) الشارات ==================== */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: var(--sp-4);
}

.badge-card {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    position: relative;
    transition: transform .2s ease, border-color .2s ease;
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
}

.badge-card.locked { opacity: .45; filter: grayscale(1); }
.badge-card.earned { border-color: var(--tint-success-border); box-shadow: 0 0 0 1px var(--tint-success) inset; }
.badge-card.earned:hover { transform: translateY(-3px); }
.badge-icon { font-size: 2.25rem; line-height: 1; margin-bottom: var(--sp-3); }
.badge-card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); font-weight: 800; }
.badge-card p { margin: 0; font-size: var(--fs-xs); color: var(--color-text-secondary); line-height: 1.6; }

.badge-earned-date {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--color-success);
    font-weight: 700;
}

.badge-locked-tag { position: absolute; top: var(--sp-3); left: var(--sp-3); font-size: .85rem; }

/* ==================== 17) النماذج ==================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--sp-4);
}

.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field.is-full { grid-column: 1 / -1; }

.form-field label {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
}

.form-field .field-hint { font-size: var(--fs-xs); color: var(--color-text-3); line-height: 1.6; margin: 0; }
.form-field .field-error { font-size: var(--fs-xs); color: var(--color-danger); line-height: 1.6; margin: 0; }

body.customer-shell .form-control,
body.customer-shell .filter-select,
body.customer-shell .search-input {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border);
    background: var(--input-bg);
    color: var(--input-text);
    font-family: inherit;
    font-size: var(--fs-base);
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.customer-shell .form-control:focus,
body.customer-shell .filter-select:focus,
body.customer-shell .search-input:focus {
    outline: none;
    border-color: var(--color-accent-2);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

body.customer-shell .form-control:disabled { opacity: .55; cursor: not-allowed; }
body.customer-shell textarea.form-control { min-height: 6.5rem; resize: vertical; line-height: 1.7; }

.form-actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    flex-wrap: wrap;
}

.form-actions .btn { min-width: 8rem; }

@media (max-width: 480px) {
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }
}

/* شريط أدوات البحث والتصفية */
.toolbar {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}

.toolbar .search-input { flex: 1 1 12rem; min-width: 0; }
.toolbar .filter-select { flex: 0 0 auto; width: auto; min-width: 9rem; }

/* ==================== 18) الأزرار ==================== */
body.customer-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: inherit;
}

body.customer-shell .btn:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
body.customer-shell .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
body.customer-shell .btn svg { flex-shrink: 0; }

.btn-block { width: 100%; }

/* ==================== 19) النوافذ المنبثقة ==================== */
body.customer-shell .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    overflow-y: auto;
}

body.customer-shell .modal.active { display: flex; }

body.customer-shell .modal-content {
    background: var(--color-surface);
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    width: 100%;
    max-width: 34rem;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    margin: auto;
}

body.customer-shell .modal-content h2 { margin: 0; font-size: var(--fs-md); font-weight: 800; }

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}

.modal-close:hover { color: var(--color-text); }

@media (max-width: 480px) {
    body.customer-shell .modal-content { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
}

/* ==================== 20) الأقسام ==================== */
.tab-content { display: none; }
.tab-content.active { display: block; animation: sectionFade .25s ease-in-out; }

@keyframes sectionFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tab-content.active { animation: none; }
    .skeleton { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ==================== 21) شريط الحساب المنتحَل ==================== */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: .65rem 1.25rem;
    background: var(--impersonation-bg);
    border-bottom: 1px solid var(--color-warning);
    font-size: var(--fs-sm);
    color: var(--impersonation-text);
    flex-wrap: wrap;
}

.impersonation-banner button {
    background: var(--color-warning);
    color: var(--impersonation-bg);
    border: none;
    border-radius: var(--r-sm);
    padding: .4rem .9rem;
    font-size: var(--fs-xs);
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

/* ==================== 22) شارة العدّاد في القائمة ==================== */
.sidebar-item .nav-count {
    margin-right: auto;
    background: var(--count-bg);
    color: var(--count-text);
    border-radius: var(--r-pill);
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    font-size: .68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ==================== 22b) شريط التنقّل العلوي على الشاشات الضيقة ====================
   صف أدوات الشريط العلوي (الحالة + الوضع الليلي + الإشعارات + النقاط + اللغة
   + الحساب) كان بيتخطى عرض الشاشة على 390px فيسبب تمرير أفقي للصفحة كلها.
   الحل: نسمح للصف يتقلّص ويخفي أقل العناصر أهمية أولاً — بطاقة "النظام شغال"
   (المعلومة نفسها معروضة بتفصيل أوضح في قسم "حالة النظام" داخل اللوحة).
   كل ده مقصور على body.customer-shell فصفحات الإدارة زي ما هي. */
body.customer-shell .nav-container { flex-wrap: nowrap; }
body.customer-shell .nav-left { min-width: 0; }
body.customer-shell .nav-right { min-width: 0; flex-shrink: 1; }

@media (max-width: 900px) {
    /* المعلومة نفسها معروضة بتفصيل أوضح في قسم "حالة النظام" داخل اللوحة */
    body.customer-shell .system-status { display: none; }
}

/* اسم المنتج بيزاحم صف الأزرار تحت 520px، والشعار وحده كافٍ للتعريف */
@media (max-width: 520px) {
    body.customer-shell .portal-brand-text { display: none; }
}

@media (max-width: 480px) {
    body.customer-shell .nav-container { padding: 0 var(--sp-2); gap: var(--sp-1); }
    body.customer-shell .admin-nav .nav-btn,
    body.customer-shell .admin-nav .menu-toggle { width: 2.1rem; height: 2.1rem; }
}

@media (max-width: 360px) {
    /* آخر ما يُخفى: مبدّل اللغة متاح برضه من "إعدادات الحساب" */
    body.customer-shell #languageToggleBtn { display: none; }
}

/* ==================== 23) تحسينات الشاشات الصغيرة ==================== */
@media (max-width: 768px) {
    body.customer-shell .admin-main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
    .page-topbar h1 { font-size: 1.45rem; }
    .kpi { padding: var(--sp-3) var(--sp-4); }
    .kpi-value { font-size: 1.7rem; }
    .panel { padding: var(--sp-4); }
    .tickets-list-panel,
    .ticket-details-panel { max-height: none; min-height: 0; }
    .tickets-list-scroll { max-height: 24rem; }
    .ticket-details-scroll { padding: var(--sp-4); }
}

@media (max-width: 420px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .kpi-value { font-size: 1.45rem; }
    .kpi-label { font-size: var(--fs-xs); }
    .badges-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==================== 24) أدوات مساعدة ==================== */
/* السمة hidden لازم تغلب على أي display بنحدده بعدها (مثل .form-field
   اللي بتاخد display:flex). من غير السطر ده، عنصر عليه hidden يفضل ظاهر —
   وهو بالظبط اللي كان بيخلي حقل المرفقات يبان رغم إطفائه من لوحة الإدارة. */
[hidden] { display: none !important; }

.u-hidden { display: none !important; }
.u-muted { color: var(--color-text-secondary); }
.u-mono { font-variant-numeric: tabular-nums; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.u-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================== 25) البحث الشامل ====================
   حقل واحد يعيش في الشريط العلوي، فيوصل من أي صفحة في البوابة.
   على الشاشات الضيقة بيتحوّل لأيقونة تفتح طبقة بحث تحت الشريط، فالشريط
   ما بيزدحمش ولا بيطلع منه أي تمرير أفقي. */
.portal-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--nav-field-bg);
    border: 1px solid var(--nav-field-border);
    border-radius: var(--r-pill);
    padding: 0 var(--sp-3);
    width: clamp(10rem, 26vw, 22rem);
    min-width: 0;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.portal-search:focus-within {
    border-color: var(--color-nav-text);
    box-shadow: 0 0 0 3px var(--nav-hover-bg);
}

.portal-search-icon { color: var(--color-nav-text-dim); flex-shrink: 0; }

body.customer-shell .portal-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: .5rem 0;
    color: var(--color-nav-text);
    font-family: inherit;
    font-size: var(--fs-sm);
}

body.customer-shell .portal-search-input::placeholder { color: var(--color-nav-text-dim); }
body.customer-shell .portal-search-input::-webkit-search-cancel-button { display: none; }

.portal-search-kbd {
    flex-shrink: 0;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-nav-text-dim);
    border: 1px solid var(--nav-field-border);
    border-radius: .35rem;
    padding: .05rem .4rem;
    background: transparent;
}

/* زر الإغلاق والأيقونة البديلة يخصّان الشاشات الضيقة فقط.
   التخصيص هنا لازم يطابق قاعدة .nav-btn العامة وإلا هتغلبه وتظهر الأيقونة
   جنب مربع البحث على الديسكتوب. */
body.customer-shell .admin-nav .portal-search-close,
body.customer-shell .admin-nav .portal-search-trigger { display: none; }

.portal-search-results {
    position: absolute;
    top: calc(100% + .5rem);
    inset-inline: 0;
    z-index: 1200;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    max-height: min(24rem, 70vh);
    overflow-y: auto;
    padding: var(--sp-2);
    color: var(--color-text);
}

.search-group-label {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--color-text-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-1);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-sm);
}

.search-result:hover,
.search-result.is-active { background: var(--hover-bg); }
.search-result:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.search-result-title { font-weight: 700; }
.search-result-meta { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--color-text-3); }

/* ---------- الشاشات الضيقة: البحث كطبقة ---------- */
@media (max-width: 900px) {
    .portal-search-kbd { display: none; }
    .portal-search { width: auto; }
}

@media (max-width: 768px) {
    body.customer-shell .admin-nav .portal-search-trigger { display: inline-flex; }

    .portal-search {
        position: fixed;
        top: var(--customer-nav-h);
        inset-inline: 0;
        width: auto;
        border-radius: 0;
        border-inline: none;
        background: var(--color-primary);
        border-bottom: 1px solid var(--color-nav-border);
        padding: var(--sp-2) var(--sp-4);
        z-index: 1100;
        display: none;
    }

    .portal-search.is-open { display: flex; }
    body.customer-shell .admin-nav .portal-search-close { display: inline-flex; }

    .portal-search-close {
        background: none;
        border: none;
        color: var(--color-nav-text);
        cursor: pointer;
        padding: var(--sp-1);
        border-radius: var(--r-sm);
        flex-shrink: 0;
    }

    .portal-search-close:hover { background: var(--nav-hover-bg); }

    .portal-search-results {
        top: calc(100% + 1px);
        inset-inline: 0;
        border-radius: 0 0 var(--r-md) var(--r-md);
        max-height: 60vh;
    }
}

/* ==================== 25b) نافذة تفاصيل الإشعار ==================== */
body.customer-shell .modal-content.modal-sm { max-width: 32rem; }

.notif-modal-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-width: 0;
}

.notif-modal-message {
    margin: 0 0 var(--sp-4);
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    line-height: 1.75;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.notif-modal-meta {
    display: grid;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--surface-raised);
}

.notif-modal-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.notif-modal-meta dt {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-text-3);
}

.notif-modal-meta dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text);
    text-align: end;
}

.modal-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.modal-actions .btn { flex: 1 1 auto; justify-content: center; }

/* ==================== 26) بطاقة حالة الحساب ==================== */
.health-card {
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    border-inline-start: 4px solid var(--color-success);
}

.health-card[data-status='attention'] { border-inline-start-color: var(--color-warning); }
.health-card[data-status='critical']  { border-inline-start-color: var(--color-danger); }

.health-head { display: flex; align-items: flex-start; gap: var(--sp-4); }

.health-icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-success);
    color: var(--on-success);
}

.health-card[data-status='attention'] .health-icon { background: var(--tint-warning); color: var(--on-warning); }
.health-card[data-status='critical'] .health-icon  { background: var(--tint-danger);  color: var(--on-danger); }

.health-headline { margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); line-height: 1.35; }
.health-subline  { margin: .2rem 0 0; font-size: var(--fs-base); color: var(--color-text-secondary); line-height: 1.6; }
.health-card .alert-list:not(:empty) { margin-top: var(--sp-4); }

/* ==================== 27) بطاقات الإجراءات ==================== */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.action-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    text-align: right;
    text-decoration: none;
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    cursor: pointer;
    font-family: inherit;
    color: var(--color-text);
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.action-card:hover { border-color: var(--tint-accent-border-strong); transform: translateY(-2px); }
.action-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.action-icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-accent);
    color: var(--on-accent);
}

.action-icon--info    { background: var(--tint-accent);   color: var(--on-accent); }
.action-icon--success { background: var(--tint-success);  color: var(--on-success); }
.action-icon--purple  { background: var(--tint-purple);   color: var(--on-purple); }
.action-icon--warning { background: var(--tint-warning);  color: var(--on-warning); }

.action-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.action-title { font-weight: 800; font-size: var(--fs-base); }
.action-text  { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.5; }

/* ==================== 28) تبويبات المجموعات ==================== */
.view-tabs {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--sp-3);
}

.view-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    padding: .45rem .9rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.view-tab:hover { background: var(--hover-bg); color: var(--color-text); }
.view-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.view-tab[aria-selected='true'] {
    background: var(--tint-accent);
    color: var(--on-accent);
    border-color: var(--tint-accent-border);
}

.view-tab-count {
    font-size: var(--fs-xs);
    font-weight: 800;
    background: var(--surface-raised);
    border-radius: var(--r-pill);
    padding: .05rem .4rem;
    min-width: 1.3rem;
    text-align: center;
}

.view-tab[aria-selected='true'] .view-tab-count { background: var(--tint-accent-border); }

/* ==================== 29) شرائح التصفية ==================== */
.filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-pill);
    padding: .35rem .8rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.filter-chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.filter-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.filter-chip[aria-pressed='true'] { background: var(--tint-accent); color: var(--on-accent); border-color: var(--tint-accent-border); }
.filter-chip-count { font-size: var(--fs-xs); opacity: .75; }

/* ==================== 30) عناصر الإشعارات ==================== */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-4) var(--sp-2);
    font-family: inherit;
    color: var(--color-text);
    cursor: default;
    transition: background var(--dur-fast) var(--ease);
}

.notif-item:last-child { border-bottom: none; }
.notif-item.is-actionable { cursor: pointer; }
.notif-item.is-actionable:hover { background: var(--hover-bg); }
.notif-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.notif-item.is-unread { background: var(--tint-accent); }
.notif-item.is-unread:hover { background: var(--tint-accent-border); }

.notif-icon {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-neutral);
    color: var(--on-neutral);
}

.notif-icon--accent   { background: var(--tint-accent);   color: var(--on-accent); }
.notif-icon--success  { background: var(--tint-success);  color: var(--on-success); }
.notif-icon--warning  { background: var(--tint-warning);  color: var(--on-warning); }
.notif-icon--danger   { background: var(--tint-danger);   color: var(--on-danger); }
.notif-icon--purple   { background: var(--tint-purple);   color: var(--on-purple); }
.notif-icon--whatsapp { background: var(--tint-whatsapp); color: var(--on-whatsapp); }
.notif-icon--neutral  { background: var(--tint-neutral);  color: var(--on-neutral); }

.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.notif-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.notif-title { font-weight: 700; font-size: var(--fs-base); }
.notif-text { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.6; }
.notif-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--color-text-3); flex-wrap: wrap; }
.notif-cta { color: var(--on-accent); font-weight: 700; }

.notif-actions { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-1); }

.notif-mark {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    color: var(--color-text-3);
    cursor: pointer;
    padding: .25rem .5rem;
    font-size: var(--fs-xs);
    font-family: inherit;
    font-weight: 700;
    white-space: nowrap;
}

.notif-mark:hover { color: var(--color-text); border-color: var(--color-border-strong); }

@media (max-width: 560px) {
    .notif-actions { flex-basis: 100%; margin-inline-start: 2.9rem; }
}

/* ==================== 31) زر الرجوع في تفاصيل التذكرة ==================== */
/* زر الرجوع: نفس الشكل في تفاصيل التذكرة وفي المقال.
   الفرق إن نسخة التذكرة تخصّ الموبايل فقط (القائمة والتفاصيل جنب بعض على
   الديسكتوب)، أما نسخة المقال فظاهرة دايمًا لأن المقال بيحلّ محلّ الصفحة. */
.back-btn,
.ticket-back-btn {
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    color: var(--on-accent);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    padding: var(--sp-3) var(--sp-4);
    width: 100%;
    text-align: right;
}

.back-btn { display: flex; }
.ticket-back-btn { display: none; }

/* على الشاشات الصغيرة القائمة والتفاصيل مش جنب بعض: اختيار تذكرة بيعرض
   التفاصيل لوحدها مع زر رجوع، بدل تمرير طويل بين الاتنين. */
@media (max-width: 992px) {
    .tickets-layout.detail-open .tickets-list-panel { display: none; }
    .tickets-layout:not(.detail-open) .ticket-details-panel { display: none; }
    .tickets-layout.detail-open .ticket-back-btn { display: flex; }
}

/* ==================== 32) شريط تقدّم الاستهلاك ==================== */
.usage-card { display: flex; flex-direction: column; gap: var(--sp-3); }

.usage-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.usage-value { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.usage-caption { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* ==================== 33) عناوين مجموعات القائمة ==================== */
.sidebar-group-label {
    padding: var(--sp-4) 1.25rem var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--color-text-3);
    text-transform: uppercase;
}

/* في الوضع المطوي العنوان بيتحول لفاصل بسيط بدل نص مقصوص */
html[data-sidebar='collapsed'] body.customer-shell .sidebar-group-label {
    font-size: 0;
    padding: var(--sp-3) 0 0;
    margin: 0 auto var(--sp-2);
    width: 1.4rem;
    border-top: 1px solid var(--color-sidebar-border);
}

/* ==================== 30) مركز المساعدة ====================
   نفس مفردات البوابة (بطاقات زجاجية، نفس الحواف والمسافات والنبرات)،
   بلا أي لون أو مقاس مكتوب خارج الـtokens. */
.help-hero {
    text-align: center;
    padding: var(--sp-7) var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-5);
    border-radius: var(--r-xl);
    border: 1px solid var(--color-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.help-hero h1 {
    margin: var(--sp-3) 0 var(--sp-2);
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.25;
}

.help-hero .page-subtitle {
    margin: 0 auto var(--sp-5);
    max-width: 34rem;
    color: var(--color-text-secondary);
}

.help-search {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-pill);
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.help-search:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.help-search-icon { color: var(--color-text-3); flex-shrink: 0; }

body.customer-shell .help-search-input {
    flex: 1;
    min-width: 0;
    padding: var(--sp-3) 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-md);
}

body.customer-shell .help-search-input::-webkit-search-cancel-button { display: none; }

.help-search-clear {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--color-text-3);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--sp-1);
    border-radius: var(--r-sm);
}

.help-search-clear:hover { color: var(--color-text); }

.help-block { margin-bottom: var(--sp-6); }
.help-more { margin-top: var(--sp-4); text-align: center; }

/* بطاقات الوصول السريع: نفس بطاقة الإجراء لكن بلا أيقونة، فالمحتوى بيتكدّس
   عموديًا بدل ما العنوان والنص يتراصّوا جنب بعض ويضيق كل واحد فيهم. */
#helpQuickAccess .action-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}

#helpQuickAccess .action-title { font-size: var(--fs-base); }
#helpQuickAccess .action-text { color: var(--color-text-secondary); line-height: 1.7; }

/* ---------- بطاقات المقالات ---------- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: var(--sp-4);
}

.article-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    text-align: start;
    padding: var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    cursor: pointer;
    font-family: inherit;
    color: var(--color-text);
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.article-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.article-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.article-card-category,
.article-category {
    display: inline-flex;
    align-self: flex-start;
    padding: .15rem .55rem;
    border-radius: var(--r-pill);
    background: var(--tint-accent);
    color: var(--on-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.article-card-title {
    font-size: var(--fs-md);
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
}

.article-card-excerpt {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.article-card-meta {
    margin-top: auto;
    font-size: var(--fs-xs);
    color: var(--color-text-3);
}

/* ---------- المقال ---------- */
.article-panel { max-width: 48rem; }

.article-title {
    margin: var(--sp-3) 0 var(--sp-2);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-text);
}

.article-meta {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--color-text-3);
}

.article-toc {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--surface-raised);
}

.article-toc-title {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--color-text-3);
}

.article-toc ul { margin: 0; padding-inline-start: var(--sp-4); }
.article-toc li { margin-bottom: var(--sp-1); }
.article-toc a { color: var(--color-accent); font-size: var(--fs-sm); font-weight: 700; }

.article-body { color: var(--color-text-secondary); font-size: var(--fs-base); line-height: 1.9; }
.article-body p { margin: 0 0 var(--sp-4); overflow-wrap: anywhere; }
.article-body .article-heading {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--color-text);
    scroll-margin-top: calc(var(--customer-nav-h) + var(--sp-4));
}
.article-body .article-list { margin: 0 0 var(--sp-4); padding-inline-start: var(--sp-5); }
.article-body .article-list li { margin-bottom: var(--sp-2); }

/* ---------- تقييم المقال ---------- */
.article-feedback {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
}

.article-feedback-q { margin: 0 0 var(--sp-3); font-weight: 800; color: var(--color-text); }
body.customer-shell .article-feedback .btn.is-chosen {
    border-color: var(--color-accent);
    background: var(--tint-accent);
    color: var(--on-accent);
}

.article-feedback-followup {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--surface-raised);
}

.article-feedback-followup p { margin: 0 0 var(--sp-3); font-weight: 700; color: var(--color-text); }
.article-feedback-thanks { margin: var(--sp-3) 0 0; color: var(--on-success); font-weight: 700; font-size: var(--fs-sm); }

/* ---------- الأسئلة الشائعة ---------- */
.faq-list { display: grid; gap: var(--sp-2); }

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--glass-bg);
    padding: var(--sp-3) var(--sp-4);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-text);
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "＋ "; color: var(--color-accent); font-weight: 800; }
.faq-item[open] summary::before { content: "－ "; }
.faq-item p { margin: var(--sp-3) 0 0; color: var(--color-text-secondary); line-height: 1.8; }

/* ---------- التصعيد للدعم ---------- */
.help-escalation {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    background: var(--surface-raised);
}

.help-escalation h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); }
.help-escalation p { margin: 0 0 var(--sp-4); color: var(--color-text-secondary); }
.help-escalation .u-row { justify-content: center; }

.chip-count {
    margin-inline-start: var(--sp-2);
    font-size: var(--fs-xs);
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.skeleton-card { height: 8.5rem; border-radius: var(--r-lg); }

@media (max-width: 768px) {
    .help-hero { padding: var(--sp-5) var(--sp-3); }
    .help-hero h1 { font-size: var(--fs-xl); }
    body.customer-shell .help-search-input { font-size: var(--fs-base); }
}