/* Payments to review: the styles for payment-review-queue.js.
 *
 * EVERY selector in this file begins with .payment-review-, and this file declares no
 * element selector, no id selector and no :root variable of its own. It therefore
 * cannot collide with styles.css, which styles bare `table`, `th`, `td`, `button` and
 * short class names like .pill, .card, .panel and .table-wrap. Dropping this file into
 * index.html alongside styles.css changes nothing that is already on the page, and
 * removing it again leaves an unstyled but still readable table.
 *
 * It DOES read styles.css's custom properties (--ink, --muted, --line, --panel, --blue,
 * --green, --amber, --amber-bg, --red, --radius, --shadow) so the tab looks like the
 * rest of the dashboard. Each one has a fallback in the var() call, so the module also
 * renders correctly on a page that does not load styles.css at all, which is exactly
 * what the standalone preview does.
 */

.payment-review-panel {
  background: var(--panel, #ffffff);
  color: var(--ink, #1f2933);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, .08));
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.payment-review-panel h2 {
  font-size: 1.05rem;
  margin: 0 0 .25rem;
}

/* The banner is the first thing read and it is deliberately loud. It states what this
   screen cannot do, so nobody has to infer it from the absence of buttons. */
.payment-review-banner {
  margin: .4rem 0 .9rem;
  padding: .55rem .7rem;
  font-size: .85rem;
  color: #6b4a06;
  background: var(--amber-bg, #fdf3e3);
  border: 1px solid #f0d9ad;
  border-left: 4px solid var(--amber, #b9770e);
  border-radius: 8px;
}

/* ---------- filters ---------- */
.payment-review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
}

.payment-review-filter {
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #1f2933);
}

.payment-review-filter:hover { border-color: var(--blue, #3a6ea5); }

.payment-review-filter:focus-visible {
  outline: 2px solid var(--blue, #3a6ea5);
  outline-offset: 2px;
}

.payment-review-filter-on {
  background: var(--blue, #3a6ea5);
  border-color: var(--blue, #3a6ea5);
  color: #ffffff;
}

.payment-review-count {
  font-variant-numeric: tabular-nums;
  opacity: .8;
  margin-left: .25rem;
}

.payment-review-status {
  color: var(--muted, #6b7280);
  font-size: .82rem;
  margin: .2rem 0 .7rem;
}

/* ---------- table ---------- */
.payment-review-table-wrap { overflow-x: auto; }

.payment-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}

.payment-review-table caption {
  caption-side: top;
  text-align: left;
  color: var(--muted, #6b7280);
  font-size: .8rem;
  padding-bottom: .5rem;
}

.payment-review-table th,
.payment-review-table td {
  text-align: left;
  padding: .45rem .55rem;
  border-bottom: 1px solid var(--line, #e5e7eb);
  vertical-align: top;
}

.payment-review-table th {
  color: var(--muted, #6b7280);
  font-weight: 600;
}

.payment-review-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.payment-review-pill {
  display: inline-block;
  font-size: .72rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line, #e5e7eb);
  white-space: nowrap;
}

.payment-review-tone-good  { color: var(--green, #2e8b57); border-color: #bfe3cd; background: #f0f9f3; }
.payment-review-tone-warn  { color: var(--amber, #b9770e); border-color: #f0d9ad; background: var(--amber-bg, #fdf3e3); }
.payment-review-tone-info  { color: var(--blue, #3a6ea5);  border-color: #c7d9ea; background: #f2f7fc; }
.payment-review-tone-quiet { color: var(--muted, #6b7280); background: #fafbfc; }

.payment-review-toggle {
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  padding: .25rem .6rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: transparent;
  color: var(--ink, #1f2933);
  white-space: nowrap;
}

.payment-review-toggle:focus-visible {
  outline: 2px solid var(--blue, #3a6ea5);
  outline-offset: 2px;
}

/* ---------- detail row ---------- */
.payment-review-detail-row > td {
  background: #fafbfc;
  border-left: 3px solid var(--blue, #3a6ea5);
}

.payment-review-detail-line {
  margin: 0 0 .5rem;
  font-size: .84rem;
  max-width: 78ch;
}

.payment-review-detail-line:last-child { margin-bottom: 0; }

.payment-review-allocations {
  margin: 0 0 .6rem;
  padding-left: 1.1rem;
  font-size: .84rem;
}

.payment-review-source {
  color: var(--muted, #6b7280);
  font-size: .78rem;
}

/* ---------- empty and error ---------- */
.payment-review-empty {
  color: var(--muted, #6b7280);
  font-size: .87rem;
  padding: .8rem 0;
  max-width: 78ch;
}

.payment-review-error {
  padding: .7rem .8rem;
  border: 1px solid var(--red, #c0504d);
  border-left: 4px solid var(--red, #c0504d);
  border-radius: 8px;
  background: #fdf5f5;
  color: #7a2521;
  font-size: .87rem;
  max-width: 78ch;
}

/* ---------- accessibility ---------- */
.payment-review-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden detail rows must stay hidden even though the table sets display on cells. */
.payment-review-detail-row[hidden] { display: none; }

@media (max-width: 720px) {
  .payment-review-panel { padding: .9rem .8rem; }
  .payment-review-table { font-size: .82rem; }
}