/*
 * The notification bell and its sheet (spec 014 FR-006–FR-011).
 *
 * ITS OWN STYLESHEET, beside reminder-indicator.css rather than inside it. The
 * bell renders in the same two shells — the tenant portal's workspace topbar and
 * the shared _ModuleShell.cshtml strip every module page draws through — and
 * both layouts link both files. Keeping the two features' rules apart matches
 * the decision that keeps their markup apart: they are separate surfaces with
 * separate contracts, and a shared stylesheet would make a change to one silently
 * a change to the other.
 *
 * Tokens only, no invented colours. Both hosts define the same custom
 * properties, so the same rules resolve identically on either surface. The badge
 * uses the error token because a count is state, and status colours are reserved
 * for state.
 *
 * Direction is expressed with logical properties (inline-start / inline-end) so
 * the control mirrors correctly under dir="rtl".
 */

.notification-indicator {
    position: relative;
    display: inline-flex;
}

.notification-indicator-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600, #475467);
    background: none;
    border: 0;
    padding: 6px;
    border-radius: var(--r-md, 8px);
    cursor: pointer;
}

.notification-indicator-button:hover {
    color: var(--gray-900, #101828);
    background: var(--gray-100, #F2F4F7);
}

.notification-indicator-button:focus-visible {
    outline: 2px solid var(--brand-700, #1B6E63);
    outline-offset: 2px;
}

/* The count. Absent entirely at zero — hidden rather than shown as "0". */
.notification-badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-inline-size: 18px;
    padding: 0 5px;
    border-radius: var(--r-full, 9999px);
    background: var(--error-fg, #B42318);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.notification-badge.is-empty,
.notification-badge[hidden] {
    display: none;
}

/*
 * The panel. position:absolute is load-bearing rather than cosmetic — without it
 * the sheet is an ordinary block in the middle of the toolbar.
 */
.notification-sheet {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    inline-size: min(340px, calc(100vw - 32px));
    max-block-size: 60vh;
    overflow-y: auto;
    z-index: 1050;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, #EAECF0);
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06));
    text-align: start;
}

/* Belt and braces: the attribute alone is the browser default, and any stray
   display rule on a container would defeat it. */
.notification-sheet[hidden] {
    display: none;
}

.notification-sheet-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-block-end: 1px solid var(--border, #EAECF0);
    font-weight: 600;
    font-size: .8125rem;
    color: var(--gray-700, #344054);
}

.notification-sheet-all {
    font-size: .75rem;
    font-weight: 600;
    color: var(--brand-700, #1B6E63);
    text-decoration: none;
    white-space: nowrap;
}

.notification-sheet-all:hover {
    text-decoration: underline;
}

.notification-sheet-body {
    padding: 4px;
}

.notification-sheet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * A row is a link when the notification carries a target and a plain block when
 * it does not (FR-009). Both shapes share the padding and the stack so the list
 * reads as one column either way — a targetless entry must not look like a
 * broken link.
 */
.notification-sheet-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
    padding: 10px 12px;
    border-radius: var(--r-md, 8px);
    color: inherit;
    text-decoration: none;
}

a.notification-sheet-item:hover {
    background: var(--gray-50, #F9FAFB);
}

.notification-sheet-message {
    font-size: .875rem;
    line-height: 1.4;
}

/*
 * Unread is a weight and a dot, never a colour alone — the sheet marks
 * everything read the moment it opens, so this highlight is the only trace of
 * what was new, and it has to survive a colour-blind reader.
 */
.notification-sheet-item.is-unread .notification-sheet-message {
    font-weight: 600;
}

.notification-sheet-item.is-unread::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    inline-size: 6px;
    block-size: 6px;
    margin-block-start: 7px;
    border-radius: var(--r-full, 9999px);
    background: var(--brand-700, #1B6E63);
}

.notification-sheet-item.is-unread {
    position: relative;
    padding-inline-start: 18px;
}

.notification-sheet-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--gray-500, #667085);
}

/*
 * Three distinct states, and they must never be confused for one another.
 * "Loading" and "couldn't load" are not answers; "nothing yet" is. Rendering the
 * empty state for a failed fetch is how somebody misses a notification they were
 * just told they had (unread-watermark-contract §7).
 */
.notification-sheet-empty,
.notification-sheet-loading,
.notification-sheet-error {
    margin: 0;
    padding: 16px 12px;
    font-size: .8125rem;
    text-align: center;
}

.notification-sheet-empty,
.notification-sheet-loading {
    color: var(--gray-500, #667085);
}

.notification-sheet-error {
    color: var(--error-fg, #B42318);
}