/* ---------- Request Edit / Request Delete (history cards) ---------- */
.txn-request-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.btn-request { flex: 1; padding: 9px; font-size: 12.5px; }
.btn-request-delete { color: var(--coral); }

.req-field-checklist { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.req-field-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; font-size: 14px; color: var(--text-primary);
  border-bottom: 1px solid var(--surface-border);
  cursor: pointer;
}
.req-field-check:last-child { border-bottom: none; }
.req-field-check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Department dashboard fade swap ---------- */
#dashboard-default-view,
#dashboard-department-view {
  transition: opacity 220ms ease;
  opacity: 1;
}
#dashboard-default-view.dash-fading,
#dashboard-department-view.dash-fading {
  opacity: 0;
}


/* ---------- Auto-synced indicator (duplicate-prevention) ---------- */
.badge-synced {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
}

/* ---------- Transaction list: keep +/- sign glued to its amount ----------
   .txn-top lays out purpose + amount side by side with no flex-shrink/
   white-space rules, so a long purpose could squeeze the amount span
   until it wrapped and split the sign from the number. Let the purpose
   wrap on its own (it has the width to spare) and pin the amount to a
   fixed, non-wrapping column instead. */
.txn-top { align-items: flex-start; }
.txn-purpose { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.txn-amount { flex-shrink: 0; white-space: nowrap; }

/* ---------- GCash Reconciliation results ---------- */
/* .gcash-results-scroll no longer scrolls itself — the modal frame (.sheet)
   is the single scroll container now (see transactions.php for why: a
   second nested scroll area was fighting the outer one and causing the
   scrollbar-drag lag). Theme .sheet's own scrollbar instead, but only when
   it's holding this content, so every other modal in the app keeps its
   default (invisible/native) scrollbar look. */
.sheet:has(.gcash-results-scroll) {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sheet:has(.gcash-results-scroll)::-webkit-scrollbar { width: 6px; }
.sheet:has(.gcash-results-scroll)::-webkit-scrollbar-track { background: transparent; }
.sheet:has(.gcash-results-scroll)::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.sheet:has(.gcash-results-scroll)::-webkit-scrollbar-thumb:hover { background: #db2777; }

/* .glass-card's backdrop-filter blur is heavy to repaint, and this list can
   stack 20+ of them — that's what was making the visible content lag behind
   the scrollbar while dragging. Swap it for a plain solid background here,
   which looks basically the same but is far cheaper to render while scrolling. */
.gcash-results-scroll .glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-strong);
  transition: none;
}

.gcash-result-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label  amount"
    "meta   meta";
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}
.gcash-result-row .gcash-result-label {
  grid-area: label;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}
.gcash-result-row .gcash-result-amount {
  grid-area: amount;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gcash-result-row .gcash-result-amount.is-minus { color: var(--coral); }
.gcash-result-row .gcash-result-amount.is-plus { color: var(--emerald); }
.gcash-result-row .gcash-result-meta {
  grid-area: meta;
  color: var(--text-muted);
  font-size: 12px;
  white-space: normal;
  word-break: break-word;
}
.gcash-result-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-border);
  color: var(--coral);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 420px) {
  /* Keep header + sub-header (label + meta) directly adjacent; the amount
     drops to its own line, right-aligned, below both — never wedged
     between them, and the +/− sign never separates from its number. */
  .gcash-result-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "meta"
      "amount";
  }
  .gcash-result-row .gcash-result-amount {
    justify-self: end;
  }
}