.topbar-notifications { position: relative; }
.topbar-notification-badge {
  align-items: center;
  background: var(--vida-danger);
  border: var(--vida-border-width-2) var(--vida-border-style-solid) var(--vida-surface);
  border-radius: var(--vida-radius-pill);
  color: var(--vida-on-brand);
  display: flex;
  font-size: var(--vida-font-size-indicator);
  height: var(--vida-space-4);
  justify-content: center;
  min-width: var(--vida-space-4);
  position: absolute;
  right: calc(var(--vida-space-1) * -1);
  top: calc(var(--vida-space-1) * -1);
}
.notification-quick-panel {
  background: var(--vida-surface);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-border);
  border-radius: var(--vida-radius-card);
  box-shadow: var(--vida-shadow);
  max-height: min(70vh, 32rem);
  overflow: auto;
  padding: var(--vida-space-4);
  position: absolute;
  right: var(--vida-space-9);
  top: calc(var(--vida-header-height) - var(--vida-space-2));
  width: min(24rem, calc(100vw - var(--vida-space-8)));
  z-index: var(--vida-z-sidebar);
}
.notification-quick-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: var(--vida-space-3); }
.notification-quick-heading span, .notification-quick-list small { color: var(--vida-muted); font-size: var(--vida-font-size-caption); }
.notification-quick-list { display: grid; margin-bottom: var(--vida-space-3); }
.notification-quick-list a { border-bottom: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-border); display: grid; padding: var(--vida-space-3); text-decoration: none; }
.notification-quick-list a.unread { background: var(--vida-surface); border-left: var(--vida-border-width-2) var(--vida-border-style-solid) var(--vida-primary); }
.notification-page { display: grid; gap: var(--vida-space-4); }
.notification-filters {
  align-items: end;
  background: var(--vida-surface);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-border);
  border-radius: var(--vida-radius-card);
  display: grid;
  gap: var(--vida-space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  padding: var(--vida-space-3);
}
.notification-filters label { margin: 0; }
.notification-action { align-items: center; display: inline-flex; gap: var(--vida-space-2); }
.notification-action .ui-icon { height: var(--vida-space-4); width: var(--vida-space-4); }
.notification-center-list { display: grid; gap: var(--vida-space-3); }
.notification-card {
  align-items: center;
  background: var(--vida-surface);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-border);
  border-radius: var(--vida-radius-card);
  display: grid;
  gap: var(--vida-space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--vida-space-4);
}
.notification-card.unread { background: var(--vida-surface); border-left: var(--vida-border-width-2) var(--vida-border-style-solid) var(--vida-primary); }
.notification-card.is-priority { border-left: var(--vida-border-width-4) var(--vida-border-style-solid) var(--vida-warning); }
.notification-card-state { background: var(--vida-subtle); border-radius: var(--vida-radius-circle); height: var(--vida-space-2); width: var(--vida-space-2); }
.notification-card.unread .notification-card-state { background: var(--vida-primary); }
.notification-card-content { min-width: 0; }
.notification-card-content h2 { font-size: var(--vida-font-size-heading-3); margin: var(--vida-space-2) 0; }
.notification-card-content p { color: var(--vida-text-secondary); margin: 0; }
.notification-card-meta { align-items: center; color: var(--vida-muted); display: flex; flex-wrap: wrap; font-size: var(--vida-font-size-caption); gap: var(--vida-space-2); }
@media (max-width: 1200px) {
  .notification-quick-panel { right: var(--vida-space-4); }
}
@media (max-width: 640px) {
  .notification-filters { grid-template-columns: 1fr; }
  .notification-card { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .notification-card form { grid-column: 2; }
}