/*
 * Notifications — the member's notices (specs/004-app-health-checks FR-030). Red for an
 * app going down, green for recovered and resolved; unread rows are bold with a pink dot.
 */

.notifications {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.notifications__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.notifications__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.notifications__header-actions form {
  margin: 0;
}

.notifications__header .notifications__read-all,
.notifications__header .notifications__clear-all {
  width: auto;
}

.notifications__header .notifications__clear-all {
  gap: var(--space-1);
}

.notifications__header .notifications__clear-all:hover {
  color: var(--color-red);
}

/* What's left on the page decides: Clear all and the empty state swap once the last
   notice is cleared in place; Mark all as read goes with the last unread one. */
.notifications:has(.notification) .notifications__empty,
.notifications:not(:has(.notification)) .notifications__clear-all-form,
.notifications:not(:has(.notification--unread)) .notifications__read-all-form {
  display: none;
}

.notifications__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.notifications__list + turbo-frame {
  display: block;
  margin-top: var(--space-2);
}

.notifications__loading {
  font-size: var(--text-md);
  color: var(--color-comment);
}

.notifications__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-comment);
}

.notifications__empty-icon {
  color: var(--color-purple);
}

/* ---- One notice ---- */

/* The × sits over the row's top-right corner; the row keeps room for it. */
.notification {
  position: relative;
}

.notification__form {
  margin: 0;
}

.notification__clear-form {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  margin: 0;
}

.notification .notification__clear {
  width: 32px;
  min-height: 32px;
  height: 32px;
  color: var(--color-comment);
  background-color: transparent;
}

.notification .notification__clear:hover {
  color: var(--color-foreground);
  background-color: var(--color-card-raised);
}

.notification .notification__clear:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

.notification__open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) calc(var(--space-3) + 32px + var(--space-2)) var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-foreground);
  text-align: left;
  background-color: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-comfortable);
  cursor: pointer;
}

.notification__open:hover {
  background-color: var(--color-card-raised);
}

.notification__open:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

.notification__icon {
  display: inline-flex;
  color: var(--color-green);
}

.notification--alarm .notification__icon {
  color: var(--color-red);
}

.notification__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.notification__message {
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.notification--unread .notification__message {
  font-weight: var(--weight-semibold);
}

.notification__time {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

/* ---- A server invitation: answered on the row (specs/005 FR-029) ---- */

.notification__open--static {
  cursor: default;
}

.notification__open--static:hover {
  background-color: var(--color-card);
}

.notification__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) 0;
}

.notification__actions .btn {
  width: auto;
}

.notification__status {
  font-size: var(--text-sm);
  color: var(--color-comment);
}