/* hrai — مركز الإشعارات (hrai-notify.js). الجرس في الهيدر واللوحة في body (برا الـinvert) فتاخذ ألوان الحساب للفاتح والداكن */
.nc, .nc-panel { --nc-ink: var(--acc-text, #111); --nc-mute: var(--acc-muted, #888); --nc-line: var(--acc-border, #ececec); --nc-card: var(--acc-surface, #fff); --nc-soft: var(--acc-surface-2, #f4f4f4); --nc-soft2: var(--acc-surface-3, #f7f7f7); font-family: 'Tajawal', sans-serif; }
.nc { position: relative; display: inline-flex; margin-inline-end: 4px; }
.nc-trigger { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--nc-ink); cursor: pointer; transition: background .2s; }
.nc-trigger:hover, .nc-open .nc-trigger { background: rgba(17, 17, 17, .06); }
html[data-theme="dark"] .nc-trigger:hover, html[data-theme="dark"] .nc-open .nc-trigger { background: rgba(255, 255, 255, .08); }
.nc-trigger:focus-visible { outline: 2px solid var(--nc-ink); outline-offset: 2px; }
.nc-bell { display: grid; transform-origin: 50% 10%; }
.nc-badge { position: absolute; top: 3px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--nc-card); overflow: hidden; }
.nc-roll { position: relative; display: inline-grid; overflow: hidden; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nc-rv { grid-area: 1 / 1; }

.nc-panel { position: fixed; z-index: 1600; width: 380px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 90px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--nc-card); color: var(--nc-ink); box-shadow: 0 0 0 1px var(--nc-line), 0 22px 56px -14px rgba(0, 0, 0, .26); transform-origin: var(--ox, 50%) 0; outline: none; overflow: hidden; }
.nc-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 10px; }
.nc-hgroup { flex: 1; min-width: 0; }
.nc-heading { display: flex; align-items: center; gap: 8px; }
.nc-heading h2 { margin: 0; font-size: 16px; font-weight: 900; }
.nc-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--nc-soft); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.nc-summary { position: relative; display: grid; margin: 3px 0 0; font-size: 12.5px; color: var(--nc-mute); }
.nc-summary > * { grid-area: 1 / 1; }
.nc-sw { display: inline-block; }
.nc-close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--nc-mute); cursor: pointer; }
.nc-close:hover { background: var(--nc-soft); color: var(--nc-ink); }
.nc-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
.nc-seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--nc-soft); }
.nc-seg button { position: relative; z-index: 1; height: 28px; padding: 0 13px; border: 0; background: none; border-radius: 999px; color: var(--nc-mute); font: 700 12.5px 'Tajawal', sans-serif; cursor: pointer; transition: color .25s; }
.nc-seg button[aria-pressed="true"] { color: var(--nc-ink); }
.nc-seg-hl { position: absolute; left: 0; top: 3px; height: 28px; border-radius: 999px; background: var(--nc-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .15); }
.nc-markall-slot { margin-inline-start: auto; display: flex; }
.nc-markall { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--nc-ink); font: 700 12.5px 'Tajawal', sans-serif; cursor: pointer; }
.nc-markall:hover { background: var(--nc-soft); }
.nc-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px; border-top: 1px solid var(--nc-line); }
.nc-row { overflow: hidden; }
.nc-item { margin: 6px 0; border-radius: 13px; transition: background .2s; }
.nc-item:hover, .nc-item.nc-expanded { background: var(--nc-soft2); }
.nc-main { display: flex; align-items: flex-start; gap: 11px; padding: 10px; }
.nc-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--nc-soft); color: var(--nc-ink); }
.nc-icon.nc-success { background: rgba(22, 163, 74, .1); color: #16a34a; }
.nc-icon.nc-warning { background: rgba(217, 119, 6, .12); color: #d97706; }
.nc-toggle { flex: 1; min-width: 0; display: grid; gap: 2px; border: 0; background: none; padding: 0; text-align: start; color: inherit; font-family: inherit; cursor: pointer; }
.nc-toggle:focus-visible { outline: 2px solid var(--nc-ink); outline-offset: 4px; border-radius: 6px; }
.nc-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nc-title strong { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-read .nc-title strong { font-weight: 600; color: var(--nc-mute); }
.nc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.nc-preview { font-size: 12.5px; color: var(--nc-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-time { flex: none; font-size: 11.5px; color: var(--nc-mute); padding-top: 2px; white-space: nowrap; }
.nc-details { overflow: hidden; padding: 0 10px 0 57px; }
html[dir="rtl"] .nc-details, .nc-panel[dir="rtl"] .nc-details { padding: 0 57px 0 10px; }
.nc-details p { margin: 0 0 10px; font-size: 13px; line-height: 1.8; color: var(--nc-ink); }
.nc-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; }
.nc-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--nc-card); box-shadow: inset 0 0 0 1px var(--nc-line); color: var(--nc-ink); font: 700 12px 'Tajawal', sans-serif; cursor: pointer; overflow: hidden; white-space: nowrap; }
.nc-act:hover { background: var(--nc-soft); }
.nc-act-icon { display: grid; place-items: center; }
.nc-act-txt { position: relative; display: inline-grid; }
.nc-act-txt > * { grid-area: 1 / 1; white-space: nowrap; }
.nc-empty-frame { overflow: hidden; }
.nc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 34px 16px; color: var(--nc-mute); }
.nc-empty svg { color: #16a34a; margin-bottom: 6px; }
.nc-empty strong { position: relative; display: grid; font-size: 14px; color: var(--nc-ink); }
.nc-empty strong > *, .nc-empty p > * { grid-area: 1 / 1; }
.nc-empty p { position: relative; display: grid; margin: 0; font-size: 12.5px; }
.nc-empty button { margin-top: 10px; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--nc-soft); color: var(--nc-ink); font: 700 12.5px 'Tajawal', sans-serif; cursor: pointer; }
.nc-footer-slot { flex: none; }
.nc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow: hidden; padding: 10px 16px; border-top: 1px solid var(--nc-line); font-size: 12.5px; color: var(--nc-mute); }
.nc-footer span { display: inline-flex; gap: 4px; }
.nc-footer button { height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--nc-ink); font: 700 12.5px 'Tajawal', sans-serif; cursor: pointer; }
.nc-footer button:hover { background: var(--nc-soft); }
.nc-more { display: block; padding: 11px 16px; border-top: 1px solid var(--nc-line); font-size: 12.5px; font-weight: 700; color: var(--nc-ink); text-decoration: none; text-align: center; }
.nc-more:hover { background: var(--nc-soft2); }
.nc-panel button:focus-visible, .nc-more:focus-visible { outline: 2px solid var(--nc-ink); outline-offset: 2px; }
@media (max-width: 480px) { .nc-panel { width: calc(100vw - 24px); } .nc-details, html[dir="rtl"] .nc-details, .nc-panel[dir="rtl"] .nc-details { padding: 0 10px; } }
/* صفحة الإشعارات: نفس اللوحة داخل الصفحة */
.nc-panel.nc-inline { position: static; width: 100%; max-width: 680px; max-height: none; box-shadow: 0 0 0 1px var(--nc-line); border-radius: 18px; }
.nc-panel.nc-inline .nc-list { overflow: visible; }
.nc-act.nc-open { background: var(--nc-ink); color: var(--nc-card); box-shadow: none; text-decoration: none; font-weight: 700; }
.nc-act.nc-open:hover { opacity: .88; background: var(--nc-ink); }