/**
 * Notification Bell Widget Styles
 * Self-contained styles for the in-app notification bell
 */

/* Container */
.notification-bell-wrapper {
  position: relative;
  display: inline-block;
}

/* Bell Button */
.notification-bell-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-bell-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.notification-bell-btn:active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Bell Icon */
.notification-bell-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #374151; /* gray-700 */
}

/* Unread Badge */
.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ef4444; /* red-500 */
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  min-width: 1.125rem;
  text-align: center;
}

.notification-badge.hidden {
  display: none;
}

/* Dropdown Panel */
.notification-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 22rem;
  max-width: 90vw;
  background: white;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  max-height: 28rem;
  display: flex;
  flex-direction: column;
}

.notification-dropdown.hidden {
  display: none;
}

/* Dropdown Header */
.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.notification-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827; /* gray-900 */
  margin: 0;
}

.mark-all-read-btn {
  background: transparent;
  border: none;
  color: #3b82f6; /* blue-500 */
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.mark-all-read-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

/* Loading State */
.notification-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.notification-loading.hidden {
  display: none;
}

/* Notifications List */
.notification-list {
  overflow-y: auto;
  max-height: 22rem;
  flex: 1;
}

.notification-list.hidden {
  display: none;
}

/* Notification Item */
.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f3f4f6; /* gray-100 */
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

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

.notification-item:hover {
  background-color: #f9fafb; /* gray-50 */
}

.notification-item-unread {
  background-color: #eff6ff; /* blue-50 */
}

.notification-item-unread:hover {
  background-color: #dbeafe; /* blue-100 */
}

/* Unread Indicator Dot */
.notification-unread-dot {
  position: absolute;
  left: 0.5rem;
  top: 1.125rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #3b82f6; /* blue-500 */
  border-radius: 9999px;
}

/* Notification Content */
.notification-item-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-left: 1rem; /* Space for unread dot */
}

.notification-item-text {
  flex: 1;
}

.notification-item-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827; /* gray-900 */
  margin: 0 0 0.25rem 0;
  line-height: 1.25;
}

.notification-item-message {
  font-size: 0.8125rem;
  color: #6b7280; /* gray-500 */
  margin: 0 0 0.375rem 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-item-time {
  font-size: 0.75rem;
  color: #9ca3af; /* gray-400 */
  margin: 0;
}

/* Empty State */
.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: #9ca3af; /* gray-400 */
}

.notification-empty.hidden {
  display: none;
}

.notification-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  stroke-width: 1.5;
}

.notification-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Error State */
.notification-error {
  padding: 2rem 1rem;
  text-align: center;
  color: #ef4444; /* red-500 */
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .notification-dropdown {
    width: calc(100vw - 2rem);
    right: 1rem;
  }
}