.notification-center {
  --notification-panel-width: min(430px, 100vw);
  width: var(--notification-panel-width) !important;
}

.notification-toolbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  overflow-x: auto;
}

.notification-center-body {
  min-height: 14rem;
  overflow-y: auto;
}

.notification-status {
  display: grid;
  min-height: 12rem;
  padding: 2rem;
  place-content: center;
  text-align: center;
  color: var(--tblr-secondary, #64748b);
}

.notification-item {
  display: flex !important;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem !important;
  border-left: 3px solid transparent !important;
  text-align: left;
}

.notification-item.is-unread {
  background: rgba(6, 182, 212, .07);
}

.notification-item.needs-action {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .08);
}

.notification-item--danger { border-left-color: #dc2626 !important; }
.notification-item--warning { border-left-color: #d97706 !important; }
.notification-item--info { border-left-color: #0891b2 !important; }
.notification-item--secondary { border-left-color: #94a3b8 !important; opacity: .82; }

.notification-item__marker {
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  margin-top: .35rem;
  border-radius: 50%;
  background: #94a3b8;
}

.notification-item--danger .notification-item__marker { background: #dc2626; }
.notification-item--warning .notification-item__marker { background: #d97706; }
.notification-item--info .notification-item__marker { background: #0891b2; }

.notification-item__content {
  display: grid;
  min-width: 0;
  gap: .25rem;
}

.notification-item__title {
  color: var(--tblr-body-color, #1e293b);
  font-weight: 600;
}

.notification-item__body {
  color: var(--tblr-secondary, #64748b);
  font-size: .875rem;
  line-height: 1.45;
}

.notification-item__meta {
  color: var(--tblr-muted, #94a3b8);
  font-size: .75rem;
  text-transform: capitalize;
}

@media (max-width: 359px) {
  .notification-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .notification-toolbar .btn-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}