/* Notifications (card #425): the admin banner and the inbox rows.
   Design: design_card425.pen, "#425 Notifications inbox · banner in flow". */

/* Each kind of notification brings its own colors. */
.notification--warning { --tint: #fff4d6; --edge: #f0c14b; --stripe: #e0a100; --ink: #9a6a00; --body: #5c4a12; }
.notification--error   { --tint: #fdecec; --edge: #f2b8b8; --stripe: #d64545; --ink: #b42c2c; --body: #6e2323; }
.notification--info    { --tint: #e8f1fa; --edge: #b9d3ec; --stripe: #2b6aa3; --ink: #2b6aa3; --body: #234a6e; }
.notification--success { --tint: #e6f1ea; --edge: #a8d3b8; --stripe: #2e7d52; --ink: #2e7d52; --body: #1f5e3c; }

/* Buttons shared by the banner and the rows. */
.notification-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.notification-actions .btn { gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.notification-actions .btn-ghost { color: #5c6b6a; }
.notification-actions .notification-button--open { background: #fff; border-color: #d6d1c4; color: #15302e; }

/* The admin banner: a full-width bar under the nav, in the page flow. */
.notification-banner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: var(--tint);
  border-bottom: 1px solid var(--edge);
}
.notification-banner__body { display: flex; gap: 0.625rem; flex: 1; min-width: 0; }
.notification-banner__icon { width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; color: var(--ink); }
.notification-banner__text { min-width: 0; }
.notification-banner__text h3 { font-size: 0.875rem; font-weight: 700; color: #15302e; }
.notification-banner__text p { font-size: 0.8125rem; color: var(--body); }
.notification-banner__actions { padding-left: 1.75rem; }
.notification-banner__actions .btn { min-height: 2.25rem; height: 2.25rem; }
.notification-actions__grow { flex: 1; }
.notification-actions__grow .btn { width: 100%; }

@media (min-width: 768px) {
  .notification-banner { flex-direction: row; align-items: center; gap: 0.875rem; padding: 0.75rem 1.5rem; }
  .notification-banner__body { align-items: center; gap: 0.875rem; }
  .notification-banner__icon { width: 1.25rem; height: 1.25rem; margin-top: 0; }
  .notification-banner__actions { padding-left: 0; gap: 0.5rem; }
  .notification-banner__actions .btn { min-height: 2rem; height: 2rem; }
  .notification-actions__grow { flex: none; }
}

/* The DSP banner keeps its solid green DaisyUI alert; it just sits in the page flow. */
.notification-banner-slot { padding-top: 0.5rem; margin-bottom: 0.5rem; }

/* The inbox. */
.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: #5c6b6a;
}
.notification-toolbar__button { gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #5c6b6a; }
.notification-toolbar__wide { display: none; }

.notification-list { display: flex; flex-direction: column; gap: 0.625rem; }

.notification-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem;
  background: #fff;
  border: 1px solid #e4e0d6;
  border-radius: 0.625rem;
}
.notification-row--unread { border: 0; border-left: 4px solid var(--stripe); }
.notification-row__head { display: flex; gap: 0.625rem; flex: 1; min-width: 0; }

.notification-kind {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 9999px;
  background: var(--tint);
  color: var(--ink);
}
.notification-kind__icon { width: 1rem; height: 1rem; }

.notification-row__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.notification-row__title { display: flex; align-items: center; gap: 0.5rem; }
.notification-row__title h3 { font-size: 0.9375rem; font-weight: 500; color: #33474f; }
.notification-row--unread .notification-row__title h3 { font-weight: 700; color: #15302e; }
.notification-new {
  display: none;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background: var(--tint);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
}
.notification-row__message { font-size: 0.8125rem; color: #5c6b6a; white-space: pre-line; overflow-wrap: anywhere; }
.notification-row__image { max-width: 15rem; border-radius: 0.5rem; }
.notification-row__meta { font-size: 0.75rem; color: #8a9594; }
.notification-row--unread .notification-row__meta { color: var(--ink); }
.notification-row .notification-actions .btn { min-height: 2.25rem; height: 2.25rem; }
.notification-actions__wide-label { display: none; }

@media (min-width: 768px) {
  .notification-toolbar__wide { display: inline; }

  .notification-row { flex-direction: row; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; }
  .notification-row__head { align-items: center; gap: 0.875rem; }
  .notification-kind { width: 2.25rem; height: 2.25rem; }
  .notification-kind__icon { width: 1.125rem; height: 1.125rem; }
  .notification-new { display: inline-block; }
  .notification-row__new-label { display: none; }
  .notification-row--unread .notification-row__meta { color: #8a9594; }
  .notification-row .notification-actions { flex: none; width: 23.25rem; justify-content: flex-end; }
  .notification-row .notification-actions .btn { min-height: 2rem; height: 2rem; }
  .notification-actions__wide-label { display: inline; }
}