/**
 * Sober AF -- Giving admin tab styles.
 *
 * Loaded by SAF_Giving_Admin_Tab::maybe_enqueue_assets() on the
 * /saf-admin/ SPA shell. Owns ONLY giving-tab-specific overrides; the
 * shared dashboard skin lives in sober-af-dashboard/assets/saf-dashboard-base.css.
 *
 * Phase 13 (S43):
 *  - Status badge variants (ok / warn / danger / unknown) used by
 *    the backfill health tile and the existing tax-deductible badge.
 *  - Health-card accent variants applied to <li class="saf-dash-card">.
 */

/* ---------------------------------------------------------------------
 * Status badge variants. Used as <span class="saf-dash-badge saf-dash-badge--ok">.
 * These mirror the WordPress admin "good/warn/error" palette so they read
 * the same as native WP notices.
 * ------------------------------------------------------------------ */
.saf-dash-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f0f0f1;
  color: #1d2327;
}
.saf-dash-badge--ok {
  background: #dcefe1;
  color: #00614a;
}
.saf-dash-badge--warn {
  background: #fdf3d3;
  color: #6a4500;
}
.saf-dash-badge--danger {
  background: #fbe4e4;
  color: #8a1f11;
}
.saf-dash-badge--unknown {
  background: #eaeaea;
  color: #4f4f4f;
}

/* ---------------------------------------------------------------------
 * Health-card accent variants. Applied to <li class="saf-dash-card">.
 * Adds a 4px left border in the status color without changing the
 * shared layout of the card. Falls back gracefully on browsers that
 * don't honor :is() / nested selectors.
 * ------------------------------------------------------------------ */
.saf-dash-card--health {
  position: relative;
  padding-left: 16px;
  border-left: 4px solid #c3c4c7;
}
.saf-dash-card--health-ok {
  border-left-color: #00a32a;
}
.saf-dash-card--health-warn {
  border-left-color: #dba617;
}
.saf-dash-card--health-danger {
  border-left-color: #d63638;
}
.saf-dash-card--health-unknown {
  border-left-color: #c3c4c7;
}

/* Backfill-tile inner meta line under the value: "Stamped N, errors X" */
.saf-dash-card__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: #50575e;
}
.saf-dash-card__meta strong {
  font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Refunds subtab: date-range filter row + pager (Phase 13b / S43-A).
 * Hydrated by admin-tab.js into [data-saf-giving-refunds-filters]
 * and [data-saf-giving-refunds-pager] respectively.
 * ------------------------------------------------------------------ */
.saf-dash-filter-row {
  margin: 12px 0;
}
.saf-dash-filter-row__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.saf-dash-filter-row__field {
  display: inline-flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: #50575e;
  gap: 4px;
}
.saf-dash-filter-row__field input[type="date"] {
  padding: 4px 8px;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
  min-width: 160px;
  font-size: 0.92rem;
}

.saf-dash-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}
.saf-dash-pager__label {
  font-size: 0.85rem;
  color: #50575e;
}
.saf-dash-pager button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ghost-button variant for secondary actions (Reset, prev/next). */
.saf-dash-button--ghost {
  background: transparent;
  color: #2271b1;
  border: 1px solid #c3c4c7;
}
.saf-dash-button--ghost:hover:not([disabled]) {
  background: #f6f7f7;
}

/* ---------------------------------------------------------------------
 * Phase 13e (S43-E): mobile-card tables.
 *
 * On narrow viewports (<=480px), each table row inside the Giving
 * admin tab becomes a card. Headers hide; each cell renders as a
 * label/value pair via ::before content: attr(data-label).
 *
 * Scoped to .saf-dash-giving so other dashboard tabs that still want
 * horizontal-scroll tables are unaffected.
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .saf-dash-giving .saf-dash-table {
    display: block;
    width: 100%;
    /* Override saf-dashboard-base.css min-width:480px which would
       force horizontal scroll inside the card layout. */
    min-width: 0;
  }
  .saf-dash-giving .saf-dash-table-wrap {
    overflow-x: visible;
  }
  .saf-dash-giving .saf-dash-table thead {
    display: none;
  }
  .saf-dash-giving .saf-dash-table tbody,
  .saf-dash-giving .saf-dash-table tr {
    display: block;
    width: 100%;
  }
  .saf-dash-giving .saf-dash-table tr {
    border: 1px solid #dcdcde;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 12px;
    background: #fff;
  }
  .saf-dash-giving .saf-dash-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px dashed #f0f0f1;
    font-size: 0.95rem;
  }
  .saf-dash-giving .saf-dash-table td:first-child {
    border-top: 0;
  }
  .saf-dash-giving .saf-dash-table td::before {
    content: attr(data-label) ":";
    flex: 0 0 auto;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #50575e;
    font-weight: 600;
  }
  /* Cells without data-label (defensive) collapse the ::before. */
  .saf-dash-giving .saf-dash-table td:not([data-label])::before {
    content: "";
    display: none;
  }
}

/* ---------------------------------------------------------------------
 * SOB-55: Donation-tiers editor (Tiers subtab). Hydrated by
 * admin-tab.js into [data-saf-giving-tiers]. Mirrors the dashboard
 * drawer spacing; safe-DOM rows of $<number>/<suffix> + Remove.
 * ------------------------------------------------------------------ */
.saf-dash-giving__tier-group {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #fff;
}
.saf-dash-giving__tier-group .saf-dash-subhead {
  margin-top: 0;
}
.saf-dash-giving__tier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.saf-dash-giving__tier-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.saf-dash-giving__tier-prefix {
  font-weight: 600;
  color: #50575e;
}
.saf-dash-giving__tier-suffix {
  color: #50575e;
  font-size: 0.9rem;
}
.saf-dash-giving__tier-input {
  width: 100px;
  padding: 4px 8px;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
  font-size: 0.95rem;
}
.saf-dash-giving__tier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

/* Tile header row: title + badge on the same line, value below */
.saf-dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.saf-dash-card__header .saf-dash-card__label {
  font-size: 0.78rem;
  color: #50575e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}