/* mobile-dashboard-v1 — W-26-3 — Parent dashboard mobile-first styles. */
/*
 * Planning: .archon/queued-builds/WAVE-26-mobile-responsiveness-mvp.md
 *
 * Targets the markup rendered by:
 *   - src/views/dashboard/children-list.ejs         (W9   — child list + add)
 *   - src/views/dashboard/child-edit.ejs            (W9.5 — child detail edit)
 *   - src/views/dashboard/child-contributions.ejs   (W18  — contribution audit)
 *   - src/views/auth/login.ejs + signup.ejs         (W5/W6 — auth surfaces)
 *
 * Class taxonomy (shared across the dashboard subdomain):
 *   .dashboard                    — <section> wrapper
 *   .dashboard__header            — page-level heading area
 *   .dashboard__banner            — success / error flash
 *   .dashboard__add-form          — "add a child" form
 *   .dashboard__child-list        — grid of child cards
 *   .dashboard__contrib-list      — flat list of contribution rows
 *   .dashboard__theme-swatch      — per-child theme-colour chip
 *   .btn / .btn--primary / .btn--secondary / .btn--danger / .btn--link
 *   .auth / .auth--login / .auth--signup
 *   .form-field                   — wrapper rendered by components/forms/*
 *
 * WHY mobile-first: parents add / refund / inspect from their phone first.
 * Cards stack into a single column on 320px; tablet (≥640px) flips into a
 * 2-up grid; desktop (≥960px) takes a 3-up grid for the child list.
 *
 * WHY no raw hex / rgba: ANTI-RAW-VALUE proof-gate. Every colour comes
 * from public/css/tokens.css via var(--color-*).
 *
 * GOTCHA: the .btn class is shared with the public contribute form (W26.4)
 * and the admin queue (future wave). Keep the rules generic — anything
 * dashboard-specific belongs under .dashboard__... selectors so the
 * button primitive stays portable.
 */

/* ---------- Page-level layout ---------- */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.dashboard__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard__header h2,
.dashboard__header h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.dashboard__lead {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--line-height-loose);
}

.dashboard__back {
  margin: 0;
  font-size: var(--font-size-sm);
}

.dashboard__empty {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- Flash banners ---------- */
.dashboard__banner {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
}

.dashboard__banner--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.dashboard__banner--error {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ---------- Forms ----------
   WHY flex-column on the add-form: on mobile the child-name field and the
   submit button stack full-width; the field provides natural visual weight,
   the button is wide enough to hit with a thumb. The form-field partials
   render their own label + input, so this wrapper only deals with spacing
   between sibling fields. */
.dashboard__add-form,
.dashboard__edit-form,
.dashboard__delete-form,
.dashboard__refund-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dashboard__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---------- Child cards ----------
   WHY auto-fit grid with minmax: the parent may have 1 child or 10. A grid
   with `repeat(auto-fit, minmax(16rem, 1fr))` fills as many columns as fit
   the viewport, falling back to one column on phones. No media queries
   needed at the layout layer. */
.dashboard__child-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.dashboard__child {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dashboard__child-name {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  word-break: break-word;
}

.dashboard__child-slug,
.dashboard__child-meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.dashboard__child-slug code,
.dashboard__child-meta code {
  word-break: break-all;
}

.dashboard__theme-swatch {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  /* WHY no background-color here: the actual hex is stamped per-child via
     `data-theme-color` on the EJS markup. Future inline-style work or
     CSS-Houdini will hydrate it; the chip stays neutral until then so
     this sheet keeps zero raw colours. */
}

.dashboard__child-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ---------- Contribution audit list ----------
   WHY a vertical card list (not a real <table>): on 320px viewports a
   <table> with 6 columns either wraps unreadably or scrolls horizontally.
   Each row is a card with the amount + status as the headline and the
   contributor + message + timestamp + tx id as supporting metadata. */
.dashboard__contrib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dashboard__contrib {
  padding: var(--space-4);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dashboard__contrib--succeeded { border-inline-start: 4px solid var(--color-success); }
.dashboard__contrib--pending   { border-inline-start: 4px solid var(--color-warning); }
.dashboard__contrib--failed    { border-inline-start: 4px solid var(--color-danger); }
.dashboard__contrib--refunded  { border-inline-start: 4px solid var(--color-border-strong); }
.dashboard__contrib--cancelled { border-inline-start: 4px solid var(--color-border-strong); }

.dashboard__contrib-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.dashboard__contrib-amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.dashboard__contrib-status {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard__contrib-name {
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.dashboard__contrib-date,
.dashboard__contrib-tx,
.dashboard__contrib-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  word-break: break-all;
}

.dashboard__contrib-message {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-style: italic;
  line-height: var(--line-height-base);
}

.dashboard__refund-form {
  /* WHY margin-block-start (not gap on the parent): the refund form sits
     INSIDE the .dashboard__contrib card and shouldn't inherit the card
     padding wrapper styles. Reset border + background here. */
  margin-block-start: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  flex-direction: row;
  flex-wrap: wrap;
}

.dashboard__refund-btn { min-width: 6rem; }

/* ---------- Button primitive ----------
   WHY min-height pinned to --touch-target-min: Lighthouse mobile-usability
   gate (W26 DoD ≥ 90) requires every interactive target to clear 44px on
   mobile. Vertical padding alone would not guarantee this when the text is
   set in a small size. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  /* WHY width 100% on mobile, auto on tablet+: a thumb-friendly full-width
     button is the default; tablet+ override below relaxes it. */
  width: 100%;
}

.btn--primary {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}
.btn--primary:hover { background-color: var(--color-brand-dark); border-color: var(--color-brand-dark); }

.btn--secondary {
  background-color: var(--color-bg);
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.btn--secondary:hover { background-color: var(--color-brand-light); }

.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
}

.btn--link {
  background: none;
  border: 0;
  color: var(--color-brand);
  text-decoration: underline;
  width: auto;
  min-height: var(--touch-target-min);
}

/* ---------- Form-field partial ----------
   WHY scoped here (not in reset.css): .form-field is rendered by the
   components/forms/*.ejs partials and carries the wrapper + label +
   error-message structure. The reset only handles bare input/select/
   textarea elements. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-field--error input,
.form-field--error textarea,
.form-field--error select {
  border-color: var(--color-danger);
}

.form-field__error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

.form-field--checkbox {
  /* WHY flex-direction: row on a checkbox row (vs. column for text fields):
     the label sits to the right of the input and reads as a single line.
     align-items: flex-start so a long wrapping label doesn't centre on the
     box. */
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-field--checkbox input[type="checkbox"] {
  width: auto;
  min-height: 1.25rem;
  margin-top: 0.25rem;
}

/* ---------- Auth surfaces (login / signup / password-reset) ---------- */
.auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5);
  max-width: 28rem;
  margin-inline: auto;
}

.auth__lead { margin: 0; color: var(--color-text-muted); }

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.auth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth__alt {
  margin: 0;
  font-size: var(--font-size-sm);
  text-align: center;
  color: var(--color-text-muted);
}

.auth__banner {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.auth__banner--success { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.auth__banner--error   { background-color: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.auth__banner--info    { background-color: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand-dark); }

/* ---------- Tablet + desktop overrides ---------- */
@media (min-width: 640px) {
  .dashboard__child-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .btn { width: auto; }
  .dashboard__add-form,
  .dashboard__refund-form {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .dashboard__refund-form { align-items: center; }
  .dashboard__actions { flex-direction: row; }
}

@media (min-width: 960px) {
  .dashboard__child-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}