/* ── Ѕвонче за известувања (NotificationBell) ─────────────────────────────
   Целото позиционирање живее тука, НЕ во inline style-ови. Причината е
   баг-от што го гонеше корисникот: панелот беше `position:absolute; top:56px;
   right:16px` БЕЗ позициониран предок. Во Radzen layout-от ниту `.rz-stack`,
   ниту `.rz-header`, ниту `.rz-layout` не се positioned (header-от е само grid
   item со z-index:2), па containing block-от беше initial containing block —
   значи „56px од темето на документот", погодена вредност што нема никаква
   врска со тоа каде реално стои ѕвончето.

   Фикс: `.ntf-bell-root { position: relative }` е новиот containing block,
   па панелот виси точно под иконата (`top: 100%`), колку и да е висок
   header-от и на кој и да е екран.

   ВАЖНО за клиповање: `.rz-layout` е `height:100dvh; overflow:hidden`, па сè
   што виси надвор од неа се сече. Затоа max-height-от на панелот е врзан за
   viewport-от (min(60vh, 480px)), а backdrop-от е `position:fixed` — fixed
   бега од overflow:hidden бидејќи ниту еден предок нема transform. */

.ntf-bell-root {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Badge ────────────────────────────────────────────────────────────────
   Порано беше ВНАТРЕ во <RadzenButton> со `margin-left:-8px; margin-top:-16px`
   — hardcoded негативни маргини што ја менуваа и ширината на копчето (значи и
   висината на header-от) и се поместуваа со секоја промена на содржината.
   Сега е sibling на копчето, absolute во горниот десен агол на root-от. */
.ntf-bell-badge.rz-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    white-space: nowrap;
    /* Прстен во бојата на header-от — badge-от се „одлепува" од иконата
       и останува читлив и кога преклопува со глифот. */
    box-shadow: 0 0 0 2px var(--rz-header-background-color, #fff);
    /* Кликот е на ѕвончето, badge-от само стои одозгора. */
    pointer-events: none;
}

/* ── Backdrop ─────────────────────────────────────────────────────────────
   Невидлив full-screen слој што го фаќа „клик надвор". Чисто Blazor решение,
   без JS document listener и без потреба од dispose. */
.ntf-bell-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
    border: 0;
}

/* ── Панел ── */
.ntf-bell-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1200;
    width: 22.5rem;
    max-width: calc(100vw - 1.5rem);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    color: var(--rz-text-color, #18181b);
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #e4e4e7);
    border-radius: 0.625rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
    outline: none;
}

.ntf-bell-panel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem 0.6rem 0.9rem;
    border-bottom: 1px solid var(--rz-base-200, #f4f4f5);
}

.ntf-bell-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
}

.ntf-bell-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    color: var(--rz-text-secondary-color, #52525b);
    cursor: pointer;
}

.ntf-bell-close:hover { background: var(--rz-base-200, #f4f4f5); }
.ntf-bell-close:focus-visible { outline: 2px solid var(--rz-primary, #4f46e5); outline-offset: 1px; }

.ntf-bell-list {
    display: flex;
    flex-direction: column;
}

/* Ставките се <button>, не <div> — клик + Enter/Space + tab-редослед бесплатно. */
.ntf-bell-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rz-base-200, #f4f4f5);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.ntf-bell-item:hover { background: var(--rz-base-100, #fafafa); }
.ntf-bell-item:focus-visible { outline: 2px solid var(--rz-primary, #4f46e5); outline-offset: -2px; }

/* Трите реда во ставката се <span> (легални деца на <button>, за разлика од
   <div>/<p>) — па мораат експлицитно да се block за да се наредат едно под друго. */
.ntf-bell-item-title { display: block; font-size: 0.88rem; font-weight: 600; }
.ntf-bell-item-body {
    display: block;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color, #52525b);
    margin-top: 0.1rem;
}
.ntf-bell-item-time {
    display: block;
    font-size: 0.72rem;
    color: var(--rz-text-disabled-color, #a1a1aa);
    margin-top: 0.15rem;
}

/* ── Празна состојба ──────────────────────────────────────────────────────
   Панелот СЕПАК се отвора кога нема ништо — инаку корисникот не знае дали
   кликот поминал. Иконата дава тежина на празниот простор. */
.ntf-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color, #52525b);
    font-size: 0.88rem;
}

.ntf-bell-empty-icon {
    font-size: 2.1rem;
    line-height: 1;
    color: var(--rz-base-400, #a1a1aa);
}

.ntf-bell-foot {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--rz-base-200, #f4f4f5);
}

/* ── Мобилен ──────────────────────────────────────────────────────────────
   Под 640px 22.5rem не влегува десно од ѕвончето. `position: fixed` го вади
   панелот од `.rz-layout{overflow:hidden}` и го растегнува преку целата
   ширина, закачен под header-от. */
@media (max-width: 640px) {
    .ntf-bell-panel {
        position: fixed;
        top: 3.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 4.5rem);
    }
}