/* ============================================================
   قنوات الإشعارات في قائمة الحساب (S519) — دوائر · لوحة قسم · شارة الصورة
   ------------------------------------------------------------
   شقيق topbar-profile.css (هندسة البطاقة .mpc-*): يرسم ما يملؤه
   notifications-tiles.js من حالة notifications.js.
   الألوان: توكنز الثيم حصراً — لكل قناة متغيّر --nt-c يُشتقّ منه
   الامتلاء والحدّ والخلفية، فيتكيف مع الوضع الداكن آلياً (dark.css).
   RTL/LTR: الصفّ يتبع اتجاه الصفحة (flex عادي)، وسهم الرجوع يُقلب.
   ============================================================ */

/* ---- ألوان القنوات ---- */
.nt-tile--lowstock,
.nc-panel[data-section="lowstock"],
.nt-dot--lowstock { --nt-c: var(--danger); }
.nt-tile--chat_mention,
.nc-panel[data-section="chat_mention"],
.nt-dot--chat_mention { --nt-c: var(--info); }
/* بنفسجي المنصة: توكن أخبار/تسويق القوالب — البنفسجي الوحيد المعتمد في التوكنز */
.nt-tile--announcement,
.nc-panel[data-section="announcement"],
.nt-dot--announcement { --nt-c: var(--tag-marketing-band); }
.nt-tile--support_reply,
.nc-panel[data-section="support_reply"],
.nt-dot--support_reply { --nt-c: var(--success); }

/* ---- صفّ الدوائر تحت رأس القائمة (قبل بنود القائمة) ---- */
.nt-tiles {
    display: flex;
    justify-content: space-around;
    gap: 4px;
    padding: 2px 6px 10px;
}
.nt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    min-width: 56px;
    border-radius: 10px;
}
.nt-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.nt-tile[hidden] { display: none; }
.nt-circle {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--nt-c);
    background: color-mix(in srgb, var(--nt-c) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--nt-c) 32%, transparent);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* قناة بغير مقروء: لونها ممتلئ/مضيء — وبلا غير مقروء تبقى هادئة */
.nt-tile.has-unread .nt-circle {
    background: color-mix(in srgb, var(--nt-c) 16%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--nt-c) 55%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--nt-c) 25%, transparent);
}
.nt-tile:hover .nt-circle {
    background: color-mix(in srgb, var(--nt-c) 22%, var(--surface-solid));
    border-color: color-mix(in srgb, var(--nt-c) 65%, transparent);
}
.nt-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-light);
    background: var(--nt-c);
    border: 2px solid var(--surface-solid);
    line-height: 1;
}
.nt-count[hidden] { display: none; }
.nt-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.15;
    /* بلا nowrap: التسمية الإنجليزية («Platform news») أطول من الدائرة —
       تلتفّ لسطرين متوسّطة بدل أن ترتجز على جارتها */
    white-space: normal;
    max-width: 64px;
    text-align: center;
}
.nt-tile.has-unread .nt-label { color: var(--text-title); }

/* ---- لوحة القسم: تحلّ محلّ القائمة تماماً ----
   نفس عرض القائمة وموضعها (نفس الهندسة: inset-inline-end + 288px) — وحين
   قسمٌ مفتوح تُخفى القائمة نفسها (.nt-section-open يضبطه renderPanel) كي لا
   يظهر منها بندٌ تحت اللوحة أو خلفها، والقسم الطويل يتمرّر داخلياً بسقف
   min(70vh, 520px) فلا يخرج عن الشاشة على الجوال بالطول والأفقي. */
.nc-panel { width: 288px; max-width: calc(100vw - 2rem); }
.nc-panel.is-open { max-height: min(70vh, 520px); }
.mpc-root.nt-section-open > .mpc-menu { visibility: hidden !important; pointer-events: none; }
.nc-panel .nc-list { overflow-y: auto; min-height: 60px; }
/* العدّاد سطر واحد لا يلتفّ بجانب زرّ «تعليم الكل» */
.nc-panel .nc-sub { white-space: nowrap; }
/* المكوّن يرسم حالة واحدة في كل نسخ البطاقة (بعدد الصفحات) — النسخ داخل
   صفحات مخفية (.page-hidden) لا يجوز أن تتجاوز إخفاء والدتها ولو حملت
   is-open (كانت تعترض النقر فوق الصفحة الظاهرة كطيفٍ شفاف). */
.page-hidden .nc-panel { visibility: hidden !important; pointer-events: none !important; }
.nt-sep { height: 1px; background: var(--border-main); margin: 4px 0; }
.nc-panel[data-section] .nc-type-ic {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    color: var(--nt-c);
    background: color-mix(in srgb, var(--nt-c) 14%, var(--surface-solid));
    border: 1px solid color-mix(in srgb, var(--nt-c) 40%, transparent);
}
.nc-panel[data-section] .notification-dropdown-title { color: var(--text-title); }
.nc-back {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.nc-back:hover { background: var(--surface-hover); color: var(--text-title); }
.nc-back:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
/* سهم الرجوع يشير باتجاه القراءة: يساراً بالعربية (RTL) ويميناً بالإنجليزية */
[dir="rtl"] .nc-back svg { transform: scaleX(-1); }
.nc-mark-all {
    flex: none;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.nc-mark-all:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-main)); }
.nc-mark-all[hidden] { display: none; }

/* ---- «كل الأخبار ↗» في ترويسة قسم الأخبار ---- */
.nc-news-all {
    flex: none;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 0;
}
.nc-news-all:hover { text-decoration: underline; }
.nc-news-all:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); border-radius: 4px; }
.nc-news-all[hidden] { display: none; }
/* على الجوال يضيق الرأس: زرّ التعليم يصير أيقونة (✓✓) بنصّ صفري —
   aria-label/title محمولة من الترميز نفسها */
@media (max-width: 600px) {
    .nc-mark-all {
        font-size: 0;
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-grid;
        place-items: center;
    }
    .nc-mark-all::before { content: '✓✓'; font-size: 12px; font-weight: 800; color: var(--primary); }
}

/* ---- «المزيد» داخل القسم ---- */
.nc-more {
    display: block;
    width: 100%;
    margin: 4px 0 2px;
    padding: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
}
.nc-more:hover { background: var(--surface-hover); }

/* ---- شارة صورة الحساب: شارات موزّعة على محيط الدائرة ----
   (جولة ٣ — قرار صاحب المنتج): كل شارة دائرة ممتلئة بلون نوعها وأيقونته
   البيضاء، مركزها على محيط دائرة الصورة، تبدأ من أعلى-يمين (الأحدث) ثم
   نزولاً مع عقارب الساعة على الجانب الأيمن. مواضع فيزيائية (left/top لا
   inset-inline) فلا تنقلب مع RTL. لا «+١»: الأنواع أربعة كلها تظهر، وحين
   تتزاحم الأربع تُصغَّر بالتدرّج (11.5px) بدل القصّ. */
.mpc-notif-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
    direction: ltr;
}
/* الشارة نفسها قابلة الإصابة (elementFromPoint/نقرها يمرّ لزرّ الحساب
   لأنها داخل .mpc-trigger) — الحاوية شفافة للمؤشر وحدها */
.nt-dot { pointer-events: auto; }
.nt-dot {
    /* الحجم ~60٪ من قطر الصورة (32px) — كبُر بطلب المالك (١٤px لا تُقرأ
       تفاصيله)، وينكمش قليلاً عند الثلاث والأربع */
    --nt-d: 19px;
    position: absolute;
    width: var(--nt-d);
    height: var(--nt-d);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--text-light);
    background: var(--nt-c);
    border: 2px solid var(--surface-solid);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--nt-c) 40%, transparent);
    transform: translate(-50%, -50%);
    transition: opacity .25s ease, transform .25s ease;
}
/* الأيقونة 46٪ لا أكثر — التعبئة بلون النوع هي الغالبة بصرياً والحدّ
   الأبيض إطار فقط (عند 13px كانت الأيقونة+الحدّ يطغيان فيبدو أبيض) */
.nt-dot svg { width: 50%; height: 50%; stroke-width: 2.6; }
/* مواضع المحيط: أعلى-يمين ← يمين ← أسفل-يمين ← أسفل (بالترتيب الزمني) —
   على مدار نصف قطره 19px (أبعد قليلاً من حافّة الصورة 16px) كي تتّسع
   الشارات الأكبر بتماسّ لا تكدّس: 50% ± 59.4%·(cos,sin) */
.nt-dot:nth-child(1) { left: 92%; top: 8%; }
.nt-dot:nth-child(2) { left: 109.4%; top: 50%; }
.nt-dot:nth-child(3) { left: 92%; top: 92%; }
.nt-dot:nth-child(4) { left: 50%; top: 109.4%; }
/* الثلاث والأربع: تصغير طفيف كي يبقى التداخل تماسّاً (وتر 45° ≈ 14.5px) */
.mpc-notif-stack.c3 .nt-dot,
.mpc-notif-stack.c4 .nt-dot { --nt-d: 17px; }
/* الظهور/الاختفاء الناعم */
.mpc-notif-stack.nt-empty .nt-dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
}
@media (prefers-reduced-motion: reduce) {
    .nt-dot { transition: none; }
}

/* ---- نبض خفيف لقناة بغير مقروء (يُعطّل مع تقليل الحركة) ---- */
@media (prefers-reduced-motion: no-preference) {
    .nt-tile.has-unread .nt-circle { animation: nt-pulse 2.4s ease-in-out infinite; }
    @keyframes nt-pulse {
        0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--nt-c) 25%, transparent); }
        50% { box-shadow: 0 2px 14px color-mix(in srgb, var(--nt-c) 45%, transparent); }
    }
}

/* ---- الجوال: الدوائر أصغر قليلاً كي يتّسع الصفّ لأربع قنوات ---- */
@media (max-width: 600px) {
    .nt-tile { min-width: 48px; }
    .nt-circle { width: 38px; height: 38px; }
    .nt-circle svg { width: 17px; height: 17px; }
    .nt-label { font-size: 9.5px; }
}