/* Donation Tracker — layered on style.css + bonus.css (shared shell, nav,
   .leaderboard-table). Only page-specific rules live here. Desktop first with
   a 768px breakpoint matching the existing nav, plus a 430px pass so the table
   stays usable at 390x844. */

.dt-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.dt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dt-header h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
}

.dt-sub {
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
}

.dt-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dt-controls select {
  height: 38px;
  /* style.css sets a global `input, select, textarea { width: 100% }`, so
     min-width alone cannot size these — flex-basis:auto resolves to that 100%
     and the select stretches to the row. An explicit width is required. */
  width: auto;
  min-width: 104px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

.dt-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dt-btn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.dt-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dt-btn-primary {
  background: #2e5e3f;
  border-color: #2e5e3f;
  color: #fff;
}

.dt-btn-danger {
  background: transparent;
  border-color: #bc1d1d;
  color: #e06666;
}

/* Banners + status ------------------------------------------------------- */

.dt-banner {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}

.dt-banner-info {
  background: rgba(39, 82, 150, 0.18);
  border: 1px solid rgba(39, 82, 150, 0.5);
}

.dt-banner-error {
  background: rgba(188, 29, 29, 0.15);
  border: 1px solid rgba(188, 29, 29, 0.55);
}

.dt-banner-empty {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  text-align: center;
}

.dt-loading {
  padding: 28px;
  text-align: center;
  opacity: 0.8;
}

/* Summary cards ---------------------------------------------------------- */

.dt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.dt-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Supporting summary, not the dominant element — the report is the page. */
.dt-card-value {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.92;
}

/* Quarter state bar ------------------------------------------------------ */

.dt-state-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid transparent;
}

.dt-state-current {
  background: rgba(39, 82, 150, 0.16);
  border-color: rgba(39, 82, 150, 0.45);
}

.dt-state-unpaid_closed {
  background: rgba(138, 79, 11, 0.18);
  border-color: rgba(138, 79, 11, 0.5);
}

.dt-state-paid {
  background: rgba(46, 106, 69, 0.18);
  border-color: rgba(46, 106, 69, 0.5);
}

/* Status pills ----------------------------------------------------------- */

.dt-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.dt-pill-current {
  background: rgba(39, 82, 150, 0.25);
  color: #a9c6f2;
}

.dt-pill-unpaid_closed {
  background: rgba(138, 79, 11, 0.28);
  color: #f0c07a;
}

.dt-pill-paid {
  background: rgba(46, 106, 69, 0.3);
  color: #8fd3a8;
}

.dt-drift {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #f0c07a;
}

.dt-paid-meta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.7;
}

/* Table ------------------------------------------------------------------ */

.dt-h2 {
  font-size: 16px;
  margin: 24px 0 10px;
}

.dt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dt-table {
  width: 100%;
  min-width: 720px;
}

.dt-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dt-table tfoot td {
  font-weight: 700;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.dt-recon {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}

.dt-recon.dt-recon-bad {
  color: #e06666;
  opacity: 1;
  font-weight: 600;
}

/* Modal ------------------------------------------------------------------ */

/* `hidden` must win over display:flex — otherwise the dialog paints on load. */
.dt-modal[hidden],
.dt-cards[hidden],
.dt-state-bar[hidden] {
  display: none !important;
}

.dt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.dt-modal-box {
  background: #131b2e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 440px;
}

.dt-modal-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.dt-modal-box textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  padding: 8px;
  margin-top: 6px;
}

.dt-modal-box label {
  font-size: 12px;
  opacity: 0.8;
}

.dt-modal-error {
  margin: 10px 0 0;
  color: #e06666;
  font-size: 13px;
}

.dt-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 390x844 --------------------------------------------------------------- */

@media (max-width: 430px) {
  .dt-page {
    padding: 16px 12px 48px;
  }

  .dt-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-header h1 {
    font-size: 22px;
  }

  .dt-controls {
    width: 100%;
  }

  /* Do NOT stretch: a full-width year select reads as a text field and the
     chevron drifts far from the value. Fixed, comfortable widths instead. */
  .dt-controls select#yearSelect { flex: 0 0 auto; width: auto; min-width: 104px; }
  .dt-controls select#quarterSelect { flex: 0 0 auto; width: auto; min-width: 84px; }

  .dt-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dt-card-value {
    font-size: 18px;
  }

  /* The table stays a table (columns matter for reconciliation) but scrolls
     inside its own wrapper so the page body never scrolls sideways. */
  .dt-table {
    min-width: 640px;
  }

  .dt-modal-box {
    max-width: none;
  }
}

/* --- Agency expansion (report's customer grain) ------------------------- */

.dt-agency-row { cursor: pointer; }
.dt-agency-row:hover { background: rgba(255, 255, 255, 0.04); }
.dt-agency-row:focus-visible { outline: 2px solid #2e5e3f; outline-offset: -2px; }

.dt-caret {
  display: inline-block;
  width: 14px;
  transition: transform 0.15s ease;
  opacity: 0.7;
}
.dt-agency-row[aria-expanded="true"] .dt-caret { transform: rotate(90deg); }

.dt-cust-head td,
.dt-cust-row td {
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
}
.dt-cust-head td { opacity: 0.65; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.dt-cust-row .dt-cust-name { padding-left: 26px; }
.dt-cust-addr { opacity: 0.75; }

/* Row action buttons are secondary to the numbers they sit beside: one line,
   lighter than the primary .dt-btn weight, and never wrapped to two rows. */
.dt-mark,
.dt-void {
  white-space: nowrap;
  font-weight: 500;
  font-size: 12px;
  height: 30px;
  padding: 0 12px;
}

.dt-actions-col { white-space: nowrap; }

.dt-modal-box input,
.dt-modal-box select {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  padding: 0 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.dt-eff-row { display: flex; gap: 8px; }
.dt-eff-row select { flex: 1; }
.dt-agency-note { font-size: 12px; opacity: 0.75; margin: 0 0 10px; }
/* Forward-only is a data-integrity rule, so say it where the choice is made. */
.dt-agency-warn { font-size: 12px; color: #f0c07a; margin: 2px 0 0; }
.dt-opt-mapped { opacity: 0.55; }

.dt-recon-table { min-width: 0; }
.dt-recon-table td { font-size: 13px; }
.dt-recon-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.dt-controls select#quarterSelect { min-width: 84px; }

@media (max-width: 430px) {
  .dt-controls { flex-wrap: wrap; }
  .dt-controls select { flex: 0 0 auto; }
  .dt-controls #loadBtn { flex: 1 1 100%; }
  .dt-cust-row .dt-cust-name { padding-left: 16px; }
}