/* Inbox.css — §15.2 inbox panel refinements (roadmap #25, light pass).
 *
 * The base inbox layout/structure lives in App.css (the §15 / Slice 6
 * block). This sheet is a TOKENIZED polish layer on top of it: it does
 * NOT re-lay-out the panel, it sharpens the unread/read distinction,
 * adds the per-row "mark read" affordance + the unread dot, and gives
 * the empty/loading states real copy and spacing.
 *
 * Cascade note: Inbox.jsx is imported by App.jsx (line 6) BEFORE the
 * App.css import (line 30), so under ESM depth-first evaluation this
 * sheet is injected FIRST and App.css wins on equal specificity. Any
 * rule here that must override an App.css value is therefore written
 * one notch more specific (e.g. `.inbox-list .inbox-row.unread`).
 * New classes that App.css doesn't define need no such guard.
 */

/* ===== Unread vs. read distinction ===== */

/* A clear left accent bar + warmer tint on unread; read rows sit calm. */
.inbox-list .inbox-row {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--motion-fast) var(--ease-out);
}
.inbox-list .inbox-row.unread {
  background: var(--color-warning-bg-soft, var(--c-warning-bg-soft));
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.inbox-list .inbox-row.read .inbox-summary {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}
.inbox-list .inbox-row.unread .inbox-summary {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* The dot is a NEW affordance: a filled accent dot for unread, hidden
 * (but space-reserved) for read so summaries stay column-aligned. */
.inbox-unread-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.inbox-row.read .inbox-unread-dot {
  background: transparent;
}

/* ===== Per-row "mark read" affordance ===== */

/* The row is a flex Link followed by this button; pin the button to the
 * right edge, revealed on row hover/focus and always visible on touch. */
.inbox-row {
  display: flex;
  align-items: center;
}
.inbox-row .inbox-row-link {
  flex: 1 1 auto;
  min-width: 0;
}
.inbox-row-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: var(--space-5);
  padding: 0;
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.inbox-row:hover .inbox-row-dismiss,
.inbox-row:focus-within .inbox-row-dismiss,
.inbox-row-dismiss:focus-visible {
  opacity: 1;
}
.inbox-row-dismiss:hover {
  color: var(--color-success-fg);
  background: var(--color-success-bg);
  border-color: var(--color-success-bg);
}
.inbox-row-dismiss:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}
/* Coarse pointers (touch) have no hover; keep the affordance discoverable. */
@media (hover: none) {
  .inbox-row-dismiss { opacity: 1; }
}

/* ===== Mark-all-read button ===== */
.inbox-mark-all {
  margin-left: auto;
}

/* ===== Empty / loading states ===== */
.inbox-state {
  padding: var(--space-9) var(--space-7);
  text-align: center;
}
.inbox-empty {
  padding: var(--space-11) var(--space-7);
  text-align: center;
}
.inbox-empty-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.inbox-empty .muted {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* #28 Part 3 — actionable contribute-request row: the requester's
   who/why/use-case detail plus an Accept/Decline pair. */
.inbox-row-action { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.inbox-row-action .inbox-row-main { display: flex; align-items: center; gap: 8px; }
.inbox-request-detail { margin-left: 18px; font-size: var(--text-sm); }
.inbox-request-detail p { margin: 2px 0; color: var(--color-text-muted); }
.inbox-request-detail strong { color: var(--color-text); }
.inbox-request-actions { display: flex; gap: 8px; margin-left: 18px; }
.inbox-request-outcome { margin: 0 0 0 18px; }