/* ==========================================================================
   Notifications Page
   - Base styles are in profile_modal.css (global notification classes)
   - This file adds page-specific overrides
   ========================================================================== */

.notifications-page {
  padding-bottom: var(--spacing-section-gap);
}

.notifications-page .notifications-header-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 var(--spacing-2);
}

.notifications-page .mark-all-read-btn {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-3);
}

.notifications-page .mark-all-read-btn:active {
  opacity: var(--opacity-pressed);
}

.notifications-page .delete-all-btn {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-3);
}

.notifications-page .delete-all-btn:active {
  opacity: var(--opacity-pressed);
}

/* Page-specific: notification-btn (different class from modal's notification-action-btn) */
.notifications-page .notification-btn {
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.notifications-page .notification-btn:active {
  opacity: var(--opacity-pressed);
}

.notifications-page .notification-btn.accept {
  background: var(--color-fill-dark);
  color: var(--color-bg-white);
}

.notifications-page .notification-btn.decline {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.notifications-page .notification-indicator {
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-fill-dark);
  flex-shrink: 0;
  margin-top: var(--spacing-card-content);
}

.notifications-page .notification-event-details {
  margin-top: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-primary);
  border-radius: var(--radius-base);
}

.notifications-page .notification-event-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.notifications-page .notification-status {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-green);
}

.notifications-page .notification-status.declined {
  color: var(--color-text-secondary);
}

.notifications-page .notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  text-align: center;
}

.notifications-page .notifications-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-section);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

.notifications-page .notifications-empty-text {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-tight);
}