/* =========================================================================
   Notification bell (Components/Notifications/NotificationBell.razor)
   -------------------------------------------------------------------------
   Colours, radii, shadows and fonts come from the HEIFIT tokens (heifit-tokens.css), which
   must therefore be loaded before this file.

   All selectors are scoped under .notification-bell on purpose: `.badge` and
   `.notification-item` are generic names that would otherwise leak into (and
   fight with) Bootstrap's global `.badge` rule.
   ========================================================================= */

.notification-bell {
    position: relative;
    display: inline-block;
}

/* Matches the geometry of MainLayout's .sidebar-toggle so the header keeps a
   single icon-button rhythm. 44x44 = the repository touch-target minimum. */
.notification-bell .bell-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.notification-bell .bell-button:hover {
    background-color: var(--surface-300);
}

.notification-bell .bell-button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Unread counter - danger circle pinned to the top-right of the bell. */
.notification-bell .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background-color: var(--danger-solid);
    color: var(--on-danger-solid);
    font-family: var(--font-sans);
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    line-height: 1;
}

.notification-bell .notification-dropdown {
    position: absolute;
    right: 0;
    top: calc(44px + 4px);
    z-index: 1000;
    box-sizing: border-box;
    width: 320px;
    max-width: calc(100vw - 32px);
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    background-color: var(--surface-200);
    box-shadow: var(--shadow-md);
}

/* The rows are <button> elements, so the browser defaults (centred text,
   grey fill, border) have to be reset back to a plain list row. */
.notification-bell .notification-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--surface-300);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
}

.notification-bell .notification-item.unread {
    background-color: var(--notice-bg);
}

.notification-bell .notification-item:hover {
    background-color: var(--surface-300);
}

.notification-bell .notification-item:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: calc(2px * -1);
}

.notification-bell .notification-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 0.875rem; /* 14px */
}

.notification-bell .notification-item__body {
    display: block;
    color: var(--ink);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
}

.notification-bell .notification-item small {
    display: block;
    margin-top: 4px;
    color: var(--ink-muted);
    font-size: 0.75rem; /* 12px */
}

.notification-bell .no-notifications {
    margin: 0;
    padding: 16px;
    color: var(--ink-muted);
    font: 400 0.9375rem/1.6 var(--font-sans);
    text-align: center;
}

.notification-bell .mark-all-read {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--ink);
    font: 600 0.875rem/1.2 var(--font-sans);
    cursor: pointer;
}

.notification-bell .mark-all-read:hover {
    background-color: var(--surface-300);
}

.notification-bell .mark-all-read:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: calc(2px * -1);
}

/* Narrow screens: the bell sits mid-header, so a 320px panel anchored to its right edge
   overflows off the left of the viewport. Anchor the panel to the viewport instead, just
   below the 3.5rem header (MainLayout.razor.css .top-row), with a 16px gutter on each side. */
@media (max-width: 640px) {
    .notification-bell .notification-dropdown {
        position: fixed;
        top: calc(3.5rem + 4px);
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 3.5rem - 24px);
    }
}