/* ═══════════════ جرس الإشعارات وصندوقها ═══════════════
   الألوان من متغيّرات :root في _Layout — لا ألوان محلية هنا.
   ودرجات الخطورة تطابق تدرّج als-deadline.css: خطرٌ واحد بلغتين بصريتين
   يجعل المحامي يتعلّم لونين لمعنى واحد ثم يخلط بينهما. */

.als-bell { position: relative; }

.als-bell-btn {
    position: relative;
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    width: 34px;
    height: 32px;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.als-bell-btn:hover { background: var(--brass-50); border-color: var(--brass-400); color: var(--ink-800); }
.als-bell-btn[aria-expanded="true"] { background: var(--ink-800); border-color: var(--ink-800); color: var(--brass-400); }

/* العدّاد: رقم لا نقطة. «عندك إشعارات» أقلّ نفعاً من «عندك ثلاثة». */
.als-bell-count {
    position: absolute;
    top: -7px;
    inset-inline-start: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ink-600);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--white);
}

/* ⚠️ وجود إنذار **يقلب لون الجرس** لا حجم العدّاد:
   «٣ إشعارات» و«٣ إشعارات فيها ميعاد ينقضي» لا يجوز أن يبدوا سواءً. */
.als-bell-count.critical { background: var(--danger); animation: als-bell-pulse 2s ease-in-out infinite; }

@keyframes als-bell-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--white); }
    50%      { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px rgba(239,68,68,.28); }
}

@media (prefers-reduced-motion: reduce) {
    .als-bell-count.critical { animation: none; }
}

/* ── اللوحة المنسدلة ── */
.als-bell-panel {
    position: absolute;
    top: calc(100% + 10px);

    /*
       ⚠️⚠️ **جهة التثبيت هي الجهة الأقرب إلى حافة الشاشة، لا الجهة المنطقية الأولى.**
       الجرس يعيش في `.als-header-left`، أي عند حافة النافذة **اليسرى** في RTL.
       و`inset-inline-start` في RTL تساوي `right` — فكانت اللوحة تُثبَّت بحافتها
       اليمنى عند الجرس ثم تمتدّ 360px **يساراً خارج النافذة**، فيُقصّ نصفُ كل سطر
       ويظهر شريط تمرير أفقي للصفحة كلها.
       والتثبيت بـ`inset-inline-end` (= `left` في RTL) يجعلها تنفتح **نحو داخل
       الصفحة** فتبقى كاملةً مهما ضاقت النافذة.

       ⚠️ و`max-width: 100vw` وحدها **لا تُصلح هذا**: هي تحدّ العرض ولا تنقل
       الموضع — فتبقى اللوحة خارجةً وقد صارت أضيق.
    */
    inset-inline-end: 0;

    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    overflow: hidden;
}

.als-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--brass-50);
}

.als-bell-title { font-weight: 700; color: var(--ink-800); font-size: 13.5px; }

.als-bell-mark {
    background: none;
    border: none;
    color: var(--ink-600);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.als-bell-mark:hover { background: var(--white); color: var(--ink-800); }
.als-bell-mark[disabled] { opacity: .45; cursor: default; }

.als-bell-head-tools { display: flex; align-items: center; gap: 2px; }

/* مفتاح الصوت: أيقونة لا نصّ — الرأس ضيّق و«تعليم الكل كمقروء» يملؤه.
   والحالة تُقرأ من **شكل** الأيقونة (موجات / شطب) لا من لونها وحده. */
.als-bell-sound {
    background: none;
    border: none;
    color: var(--ink-600);
    font-size: 12.5px;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: var(--transition-fast);
}

.als-bell-sound:hover { background: var(--white); color: var(--ink-800); }
.als-bell-sound.muted { color: var(--gray-400); }
.als-bell-sound:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 1px; }

.als-bell-list { max-height: 380px; overflow-y: auto; }

.als-bell-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
    text-align: start;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
}

.als-bell-item:hover { background: var(--gray-50); }

/* غير المقروء له شريط جانبي وخلفية باهتة — لا وزن خط أثقل وحده:
   الفرق بين 500 و700 لا يُلتقط في مسحٍ سريع بطرف العين. */
.als-bell-item.unread { background: #F8FAFF; border-inline-start: 3px solid var(--ink-500); }
.als-bell-item.unread.warning  { border-inline-start-color: var(--warning); }
.als-bell-item.unread.critical { border-inline-start-color: var(--danger); background: #FEF7F7; }

.als-bell-icon {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-100);
    color: var(--ink-600);
    font-size: 13px;
}

.als-bell-item.warning  .als-bell-icon { background: #FEF3C7; color: #92400E; }
.als-bell-item.critical .als-bell-icon { background: #FEE2E2; color: #991B1B; }

.als-bell-body { min-width: 0; flex: 1; }

.als-bell-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 2px;
    /* لا اقتطاع لسطر العنوان: «انقضى ميعاد الاستئناف» مقتطعاً إلى «انقضى ميعاد…»
       يفقد بالضبط الكلمة التي تحدّد الخطر. */
    word-break: break-word;
}

.als-bell-item.critical .als-bell-item-title { color: #991B1B; }

.als-bell-item-text {
    font-size: 12px;
    color: var(--gray-500);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.als-bell-item-time { font-size: 11px; color: var(--gray-400); margin-top: 3px; }

.als-bell-empty { padding: 26px 14px; text-align: center; color: var(--gray-400); font-size: 13px; }
.als-bell-empty i { display: block; font-size: 26px; margin-bottom: 8px; color: var(--gray-300); }

.als-bell-foot {
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.als-bell-foot:hover { background: var(--ink-800); color: var(--white); }

/* ═══════════════ شاشة الإشعارات ═══════════════ */

.als-notify-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    margin-bottom: 10px;
}

.als-notify-row.unread { border-inline-start: 4px solid var(--ink-500); background: #F8FAFF; }
.als-notify-row.unread.warning  { border-inline-start-color: var(--warning); background: #FFFDF5; }
.als-notify-row.unread.critical { border-inline-start-color: var(--danger);  background: #FEF7F7; }

.als-notify-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-100);
    color: var(--ink-600);
    font-size: 15px;
}

.als-notify-row.warning  .als-notify-icon { background: #FEF3C7; color: #92400E; }
.als-notify-row.critical .als-notify-icon { background: #FEE2E2; color: #991B1B; }

.als-notify-main { flex: 1; min-width: 0; }

.als-notify-title { font-weight: 700; color: var(--gray-800); font-size: 14px; }
.als-notify-row.critical .als-notify-title { color: #991B1B; }

.als-notify-text { font-size: 12.5px; color: var(--gray-600); margin-top: 3px; }

.als-notify-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 11.5px; color: var(--gray-400); margin-top: 6px;
}

.als-notify-chip {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-weight: 600;
}

.als-notify-chip.warning  { background: #FEF3C7; color: #92400E; }
.als-notify-chip.critical { background: #FEE2E2; color: #991B1B; }

.als-notify-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

@media (max-width: 575.98px) {
    /*
       على الشاشة الضيّقة لا موضعَ آمن نسبةً إلى الجرس: أي إزاحة تُقاس منه تخرج من
       طرفٍ أو من الآخر بحسب عرض النافذة. فالتثبيت هنا **على النافذة نفسها**
       (`fixed` بطرفين معاً)، والارتفاع من `--header-height` لا رقماً مكتوباً
       بيدٍ ينحرف عن الهيدر بأول تعديل عليه.
    */
    .als-bell-panel {
        position: fixed;
        top: calc(var(--header-height, 62px) + 8px);
        inset-inline: 12px;
        width: auto;
        max-width: none;
    }

    .als-notify-row { flex-wrap: wrap; }
}