/* ---------------------------------------------------------------------------
 * Notifications — bell, dropdown, list, item.
 *
 * Single visual language for both admin and customer surfaces. Severity
 * colors match the existing mc-alert palette; category icons signal intent
 * (action vs alert vs info) independent of severity.
 * ------------------------------------------------------------------------- */

/* Bell ---------------------------------------------------------------------*/
.mc-notification-bell { position: relative; }

/* The count used to sit INSIDE the button (top/right: 3px), overlapping the
   bell glyph — unreadable at 2 digits and, now that the trigger is a bordered
   chip, sitting on top of that border too. It hangs off the corner instead,
   with a ring in the topbar surface colour so it reads as a marker attached
   to the chip rather than a shape drawn on it. */
.mc-notification-bell__badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-1);
    background: var(--color-error);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px var(--color-card-bg);
}

/* Unread state tints the trigger itself, so the bell still reads as "there is
   something here" at a glance without parsing the number. Driven by :has()
   off the badge's own [hidden] attribute — the same attribute notifications.js
   already toggles on the 60s refresh, so there is no second thing to keep in
   sync. */
.mc-notification-bell:has(.mc-notification-bell__badge:not([hidden])) .mc-topbar-icon-btn {
    color: var(--color-error);
}
.mc-notification-bell:has(.mc-notification-bell__badge:not([hidden])) .mc-topbar-icon-btn .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.mc-notification-bell__panel {
    width: 380px;
    max-height: 520px;
    overflow: auto;
    padding: 0;
}

.mc-notification-bell__loading,
.mc-notification-bell__empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

.mc-notification-bell__empty .material-symbols-rounded {
    display: block;
    font-size: 40px;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
}

/* Paper-airplane SVG — same motif as the full notifications page; sized
   smaller for the compact dropdown. Aspect locked via the 160×120 viewBox. */
.mc-notification-bell__empty-illust {
    display: block;
    width: 112px;
    height: auto;
    margin: 0 auto var(--space-2);
}

.mc-notification-bell__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-bg-subtle);
}

.mc-notification-bell__title {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
}

/* Bell-dropdown "Mark all read" — defers to canonical `mc-btn mc-btn-secondary
   mc-btn-sm`. Pre-polish version hardcoded `--color-primary` (a banned
   token in this palette — D71) + `--color-bg-hover` (wrong name; canonical
   is `--color-hover-bg`), both rendered to fallback gray. AND originally
   used a phantom `mc-btn-outline` class that doesn't exist in
   components.css → also fell through to gray. Class hook stays for
   notifications.js layout-positioning queries; surface comes from
   `mc-btn-secondary`. */
.mc-notification-bell__readall {
    /* No surface overrides — mc-btn-secondary owns the colors + border. */
}

.mc-notification-bell__list { padding: var(--space-1) 0; }

.mc-notification-bell__footer {
    display: flex; align-items: center; justify-content: center; gap: var(--space-1);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}
.mc-notification-bell__footer:hover { background: var(--color-bg-hover); }

/* Item ---------------------------------------------------------------------*/
.mc-notification-list { display: flex; flex-direction: column; }

.mc-notification-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background 120ms ease;
}
.mc-notification-item:hover { background: var(--color-bg-hover); }
.mc-notification-item.is-unread { background: var(--color-bg-subtle); }
.mc-notification-item.is-dismissed { opacity: 0.55; }

.mc-notification-item__icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.mc-notification-item--info    .mc-notification-item__icon { background: var(--mc-info-bg, #e0f2fe); color: var(--mc-info, #0369a1); }
.mc-notification-item--success .mc-notification-item__icon { background: var(--mc-success-bg, #dcfce7); color: var(--mc-success, #15803d); }
.mc-notification-item--warning .mc-notification-item__icon { background: var(--mc-warning-bg, #fef3c7); color: var(--mc-warning, #b45309); }
.mc-notification-item--error   .mc-notification-item__icon { background: var(--mc-error-bg, #fee2e2);   color: var(--mc-error,   #b91c1c); }

.mc-notification-item__body { min-width: 0; }

.mc-notification-item__title {
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mc-notification-item__text {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.mc-notification-item__meta {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    margin-top: var(--space-1);
    font-size: 11px;
    color: var(--color-text-muted);
}

.mc-notification-item__chip {
    display: inline-flex; align-items: center;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.mc-notification-item__chip--info   { background: #eef2ff; color: #4338ca; }
.mc-notification-item__chip--alert  { background: #fef3c7; color: #b45309; }
.mc-notification-item__chip--action { background: #dbeafe; color: #1d4ed8; }

.mc-notification-item__handled {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Inline call-to-action (e.g. "Review →") — lives at the right end of the
   meta row, sharing the row with the chip + timestamp so the item stays
   compact (one fewer line per row). Link-styled, not a filled button:
   in-row CTAs need to be discoverable but not heavy enough to compete
   with primary page actions. */
.mc-notification-item__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    margin-left: var(--space-3);
    padding: 0;
    color: var(--color-teal);
    font-size: 12px;
    font-weight: var(--weight-medium);
    line-height: 1;
    text-decoration: none;
}
.mc-notification-item__cta:hover {
    color: var(--color-teal-hover);
    text-decoration: none;
}
.mc-notification-item__cta .material-symbols-rounded {
    font-size: 14px;
    transition: transform 120ms ease;
}
.mc-notification-item__cta:hover .material-symbols-rounded {
    transform: translateX(2px);
}

.mc-notification-item__actions {
    display: flex; align-items: center; gap: var(--space-0-5);
    flex-shrink: 0;
}

.mc-notification-item__btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
}
.mc-notification-item__btn:hover { background: var(--color-bg-hover); color: var(--color-text); }
.mc-notification-item__btn .material-symbols-rounded { font-size: 18px; }

.mc-notification-item__btn--dismiss:hover {
    background: var(--mc-error-bg, #fee2e2);
    color: var(--mc-error, #b91c1c);
}

/* Compact mode (bell dropdown) — tighter rhythm, smaller actions, smaller CTA.
   The 380px panel can't carry the full-size list-page item without the title
   wrapping awkwardly; densify here, full-size on the list page. */
.mc-notification-item--compact { padding: var(--space-2) var(--space-3); }
.mc-notification-item--compact .mc-notification-item__title { font-size: var(--text-sm); line-height: 1.35; }
.mc-notification-item--compact .mc-notification-item__text { font-size: var(--text-xs); }
.mc-notification-item--compact .mc-notification-item__btn { width: 24px; height: 24px; }
.mc-notification-item--compact .mc-notification-item__btn .material-symbols-rounded { font-size: 16px; }

/* Tabs on list page --------------------------------------------------------*/
.mc-notifications-tabs {
    display: flex; align-items: center; gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}
.mc-notifications-tabs__spacer { flex: 1; }

.mc-notifications-tab {
    background: transparent;
    border: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}
.mc-notifications-tab:hover { background: var(--color-bg-hover); }
.mc-notifications-tab.is-active {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}