/* ── Notification bell — topbar widget ──────────────────────── */

.ipmp-notif-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ipmp-notif-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ipmp-text);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}

.ipmp-notif-bell-btn:hover,
.ipmp-notif-wrap.open .ipmp-notif-bell-btn {
    background: var(--ipmp-surface-2);
    border-color: var(--ipmp-border);
}

/* Badge — цвят по тема */
:root,
:root[data-theme="light"] {
    --ipmp-notif-badge-bg:    var(--ipmp-accent);
    --ipmp-notif-badge-color: #ffffff;
    --ipmp-notif-badge-ring:  var(--ipmp-bg);
}
:root[data-theme="cream"] {
    --ipmp-notif-badge-bg:    var(--ipmp-accent);
    --ipmp-notif-badge-color: #ffffff;
    --ipmp-notif-badge-ring:  var(--ipmp-bg);
}
:root[data-theme="crimson"] {
    --ipmp-notif-badge-bg:    #ffffff;
    --ipmp-notif-badge-color: #841c37;
    --ipmp-notif-badge-ring:  #841c37;
}
:root[data-theme="dark"] {
    --ipmp-notif-badge-bg:    #0d6efd;
    --ipmp-notif-badge-color: #ffffff;
    --ipmp-notif-badge-ring:  var(--ipmp-bg);
}
    :root[data-theme="brown"] {
        --ipmp-notif-badge-bg: #c9a07a;
        --ipmp-notif-badge-color: #16100f;
        --ipmp-notif-badge-ring: var(--ipmp-bg);
    }

.ipmp-notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 14px;
    padding: 2px 3px;
    border-radius: 8px;
    background: var(--ipmp-notif-badge-bg);
    color: var(--ipmp-notif-badge-color);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    border: 1.5px solid var(--ipmp-notif-badge-ring);
}

/* ── Dropdown ────────────────────────────────────────────────── */
.ipmp-notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 16px);
    background: var(--ipmp-surface);
    border: 1px solid var(--ipmp-border);
    border-radius: 12px;
    box-shadow: var(--ipmp-shadow-lg);
    z-index: 1050;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ipmp-notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--ipmp-border);
    flex-shrink: 0;
}

.ipmp-notif-dropdown-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ipmp-text);
}

.ipmp-notif-mark-all-btn {
    font-size: .75rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--ipmp-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1;
}

.ipmp-notif-mark-all-btn:hover { color: var(--ipmp-accent-strong); }

/* List */
.ipmp-notif-list {
    overflow-y: auto;
    max-height: 380px;
    flex: 1;
}

/* Empty / loading */
.ipmp-notif-empty,
.ipmp-notif-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--ipmp-muted);
    font-size: .8125rem;
    text-align: center;
}

/* Dropdown item */
.ipmp-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ipmp-border);
    cursor: pointer;
    transition: background .12s;
    position: relative;
    text-decoration: none;
    color: var(--ipmp-text);
}

.ipmp-notif-item:last-child { border-bottom: none; }

.ipmp-notif-item:hover { background: color-mix(in srgb, var(--ipmp-surface-2) 20%, var(--ipmp-border)); }

.ipmp-notif-item--unread { background: var(--ipmp-accent-soft); }
.ipmp-notif-item--unread:hover { background: color-mix(in srgb, var(--ipmp-accent-soft) 85%, var(--ipmp-surface-2)); }

/* Icon column */
.ipmp-notif-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    background: var(--ipmp-surface-2);
    color: var(--ipmp-muted);
}

.ipmp-notif-item--info    .ipmp-notif-icon { background: #e0f0ff; color: #0060c0; }
.ipmp-notif-item--success .ipmp-notif-icon { background: #e0f5e8; color: #1a7a3c; }
.ipmp-notif-item--warning .ipmp-notif-icon { background: #fff5d6; color: #8a6000; }
.ipmp-notif-item--danger  .ipmp-notif-icon { background: #fde8e8; color: #b91c1c; }

:root[data-theme="dark"] .ipmp-notif-item--info    .ipmp-notif-icon { background: #1a2c4a; color: #5caef9; }
:root[data-theme="dark"] .ipmp-notif-item--success .ipmp-notif-icon { background: #1a3325; color: #5fb075; }
:root[data-theme="dark"] .ipmp-notif-item--warning .ipmp-notif-icon { background: #2d2510; color: #d9ae6a; }
:root[data-theme="dark"] .ipmp-notif-item--danger  .ipmp-notif-icon { background: #3a1515; color: #f87171; }

:root[data-theme="brown"] .ipmp-notif-item--info    .ipmp-notif-icon { background: #1a2530; color: #8ebad9; }
:root[data-theme="brown"] .ipmp-notif-item--success .ipmp-notif-icon { background: #192518; color: #8fb17c; }
:root[data-theme="brown"] .ipmp-notif-item--warning .ipmp-notif-icon { background: #2e2010; color: #d9ae6a; }
:root[data-theme="brown"] .ipmp-notif-item--danger  .ipmp-notif-icon { background: #2e1515; color: #e07070; }

/* Text content */
.ipmp-notif-content { flex: 1; min-width: 0; }

.ipmp-notif-title {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ipmp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.ipmp-notif-item--unread .ipmp-notif-title { font-weight: 600; }

.ipmp-notif-body {
    font-size: .75rem;
    color: var(--ipmp-muted);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

.ipmp-notif-time {
    font-size: .6875rem;
    color: var(--ipmp-muted-2);
    margin-top: 3px;
}

/* Unread dot */
.ipmp-notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ipmp-accent);
    margin-top: 6px;
}

/* Footer */
.ipmp-notif-dropdown-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--ipmp-border);
    text-align: center;
    flex-shrink: 0;
}

.ipmp-notif-dropdown-footer a {
    font-size: .8125rem;
    color: var(--ipmp-accent);
    text-decoration: none;
}

.ipmp-notif-dropdown-footer a:hover {
    color: var(--ipmp-accent-strong);
    text-decoration: underline;
}

/* ── Crimson theme overrides (chrome) ───────────────────────── */
:root[data-theme="crimson"] .ipmp-notif-bell-btn {
    color: var(--ipmp-chrome-text);
}

:root[data-theme="crimson"] .ipmp-notif-bell-btn:hover,
:root[data-theme="crimson"] .ipmp-notif-wrap.open .ipmp-notif-bell-btn {
    background: var(--ipmp-chrome-hover);
    border-color: var(--ipmp-chrome-border);
}

:root[data-theme="crimson"] .ipmp-notif-badge {
    border-color: var(--ipmp-chrome-bg);
}

/* ── Full notifications page ────────────────────────────────── */

/*
  Offset breakdown (desktop):
    topbar 56 + container-top 24 + title-row ~54 + stats ~104 + filter ~70
    + pagination ~50 + container-bottom 24 + footer ~44  ≈ 426px
  Оставяме min-height 180px за малки екрани.
*/
.ipmp-notif-page-results {
    overflow-y: auto;
    max-height: calc(100vh - var(--ipmp-topbar-h) - 370px);
    min-height: 180px;
}

.ipmp-notif-page-list {
    display: flex;
    flex-direction: column;
}

.ipmp-notif-page-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ipmp-border);
    cursor: pointer;
    transition: background .12s;
    position: relative;
}

.ipmp-notif-page-item:last-child { border-bottom: none; }

.ipmp-notif-page-item:hover { background: color-mix(in srgb, var(--ipmp-surface-2) 20%, var(--ipmp-border)); }

.ipmp-notif-page-item--unread { background: var(--ipmp-accent-soft); }
.ipmp-notif-page-item--unread:hover { filter: brightness(.97); }

/* Icon */
.ipmp-notif-page-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ipmp-surface-2);
    color: var(--ipmp-muted);
    margin-top: 1px;
}

.ipmp-notif-page-item--info    .ipmp-notif-page-icon { background: #e0f0ff; color: #0060c0; }
.ipmp-notif-page-item--success .ipmp-notif-page-icon { background: #e0f5e8; color: #1a7a3c; }
.ipmp-notif-page-item--warning .ipmp-notif-page-icon { background: #fff5d6; color: #8a6000; }
.ipmp-notif-page-item--danger  .ipmp-notif-page-icon { background: #fde8e8; color: #b91c1c; }

:root[data-theme="dark"] .ipmp-notif-page-item--info    .ipmp-notif-page-icon,
:root[data-theme="brown"] .ipmp-notif-page-item--info   .ipmp-notif-page-icon { background: #1a2c4a; color: #5caef9; }
:root[data-theme="dark"] .ipmp-notif-page-item--success .ipmp-notif-page-icon,
:root[data-theme="brown"] .ipmp-notif-page-item--success .ipmp-notif-page-icon { background: #1a3325; color: #5fb075; }
:root[data-theme="dark"] .ipmp-notif-page-item--warning .ipmp-notif-page-icon,
:root[data-theme="brown"] .ipmp-notif-page-item--warning .ipmp-notif-page-icon { background: #2d2510; color: #d9ae6a; }
:root[data-theme="dark"] .ipmp-notif-page-item--danger  .ipmp-notif-page-icon,
:root[data-theme="brown"] .ipmp-notif-page-item--danger  .ipmp-notif-page-icon { background: #3a1515; color: #f87171; }

.ipmp-notif-page-content { flex: 1; min-width: 0; }

.ipmp-notif-page-title {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ipmp-text);
    line-height: 1.4;
}

.ipmp-notif-page-item--unread .ipmp-notif-page-title { font-weight: 600; }

.ipmp-notif-page-body {
    font-size: .8125rem;
    color: var(--ipmp-muted);
    margin-top: 3px;
    line-height: 1.5;
}

.ipmp-notif-page-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--ipmp-muted-2);
    margin-top: 4px;
}

.ipmp-notif-page-new-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ipmp-accent);
    color: var(--ipmp-on-accent);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.ipmp-notif-page-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ipmp-accent);
    margin-top: 5px;
    align-self: flex-start;
}

.ipmp-notif-page-arrow {
    flex-shrink: 0;
    color: var(--ipmp-muted);
    align-self: center;
}