/* Notification popup (Pages/NotificationPopup.razor).

   All prefixed .np-, which no other stylesheet in wwwroot/css claims — index.html loads every
   sheet globally with no isolation, so an unprefixed .np-item would reach every other page.

   The bell button that opens this is NOT here: it lives in Layout/MainLayout2.razor.css with the
   rest of the top bar, because its position is one link in that bar's right-hand offset chain
   and those numbers only work as a set. */

.np-body {
    /* Capped so a long backlog scrolls inside the modal instead of pushing its footer off the
       bottom of the screen. */
    max-height: 60vh;
    min-width: 320px;
    max-width: 560px;
    overflow-y: auto;
    padding: 4px 2px;
}

.np-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.np-item {
    border: 1px solid #e3e9f0;
    border-left: 3px solid #e3e9f0;
    border-radius: 4px;
    padding: 9px 12px;
    background: #fff;
}

/* Unread as it was when the popup opened. Left border plus a tint rather than bold text, so a
   long message stays readable. */
.np-item.unread {
    border-left-color: #007BFF;
    background: #f5faff;
}

.np-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.np-item-title {
    font-size: 13px;
    font-weight: bold;
    color: #222;
    min-width: 0;
    overflow-wrap: anywhere;
}

.np-item-date {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.np-item-message {
    font-size: 12px;
    line-height: 1.55;
    color: #444;
    /* Server text, so it may arrive with newlines in it; keep them without collapsing runs of
       spaces into nothing. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.np-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    font-size: 13px;
    color: #888;
}

.np-empty-icon {
    width: 32px;
    height: 32px;
    fill: #c9d4e0;
}

@media (max-width: 700px) {
    .np-body {
        min-width: 0;
        /* The bar wraps to two lines below this width and the modal is nearly full-screen, so
           give the list more of the height. */
        max-height: 55vh;
    }
}