/* Header toggle */
.notifications-toggle {
  padding: 0.35rem 0.55rem !important;
}

.notifications-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--tblr-border-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.notifications-toggle .icon {
  color: var(--tblr-secondary);
  transition: color 0.15s ease;
}

.notifications-toggle:hover .notifications-bell,
.notifications-dropdown.show .notifications-bell {
  background: var(--tblr-bg-surface-secondary);
}

.notifications-toggle:hover .icon,
.notifications-dropdown.show .notifications-toggle .icon {
  color: var(--tblr-body-color);
}

.notifications-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border: 2px solid var(--tblr-navbar-bg, var(--tblr-bg-surface));
  border-radius: 999px;
  background: var(--tblr-red);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 0.875rem;
  text-align: center;
}

/* Dropdown panel */
.notifications-dropdown .notifications-menu {
  width: min(24rem, calc(100vw - 1.5rem));
  padding: 0;
  margin-top: 0.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.notifications-card {
  border: 1px solid var(--tblr-border-color);
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.notifications-card .card-header {
  align-items: flex-start;
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  background: var(--tblr-bg-surface);
}

.notifications-list {
  max-height: 24rem;
  overflow-y: auto;
  background: var(--tblr-bg-surface);
}

.notifications-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 2.25rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
}

.notifications-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
}

.notifications-state-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Notification items */
.notification-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--tblr-border-color);
  background: transparent;
  text-align: left;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: var(--tblr-bg-surface-secondary);
}

.notification-item.is-unread {
  background: color-mix(in srgb, var(--tblr-primary) 5%, transparent);
}

.notification-item.is-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tblr-primary);
}

.notification-item.is-unread:hover,
.notification-item.is-unread:focus-visible {
  background: color-mix(in srgb, var(--tblr-primary) 9%, transparent);
}

.notification-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
}

.notification-icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.notification-icon--system {
  background: color-mix(in srgb, var(--tblr-azure) 14%, transparent);
  color: var(--tblr-azure);
}

.notification-icon--signal {
  background: color-mix(in srgb, var(--tblr-green) 14%, transparent);
  color: var(--tblr-green);
}

.notification-icon--trade {
  background: color-mix(in srgb, var(--tblr-orange) 14%, transparent);
  color: var(--tblr-orange);
}

.notification-icon--portfolio {
  background: color-mix(in srgb, var(--tblr-purple) 14%, transparent);
  color: var(--tblr-purple);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.notification-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tblr-body-color);
}

.notification-item.is-read .notification-title {
  font-weight: 500;
  color: var(--tblr-secondary);
}

.notification-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

.notification-message {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tblr-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-item.is-read .notification-message {
  color: var(--tblr-muted);
}

.notification-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.notification-type {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--tblr-bg-surface-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
}

.notification-link-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--tblr-primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.notification-item:hover .notification-link-hint,
.notification-item:focus-visible .notification-link-hint {
  opacity: 1;
}

.notification-link-hint .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.notification-modal-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.notification-modal-message {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tblr-body-color);
  white-space: pre-wrap;
}

#notification-detail-modal .modal-header {
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1rem;
  gap: 1rem;
}

#notification-detail-modal .modal-header .btn-close {
  margin: 0.15rem 0 0;
}

#notification-detail-modal .modal-header > .d-flex {
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}

#notification-detail-modal .modal-title {
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  line-height: 1.4;
}

#notification-detail-modal #notification-modal-meta {
  padding-top: 0.15rem;
  line-height: 1.45;
}

#notification-detail-modal .modal-body {
  padding: 0 1.25rem 1.25rem;
}

#notification-detail-modal .modal-footer {
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 1.25rem;
}