/* ---------------------------------------------------------------------------
 * 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; }

.mc-notification-bell__badge {
    position: absolute;
    top: 3px; right: 3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px 2px;
    background: var(--color-danger, #ef4444);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "lnum" 1;
    text-align: center;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 0 0 1.5px var(--color-card-bg, #fff);
}

.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: 0.04em;
}
.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);
}