/* ============================================================
   payments.css — GymBI by Statvo
   PURPOSE: Styles for the payments module — controls row,
   revenue summary cards, payment list rows, and receipt preview.
   ============================================================ */

/* ------------------------------------------------------------
   TOP CONTROLS ROW
   Record button + revenue summary side by side on desktop,
   stacked on mobile.
   ------------------------------------------------------------ */
.payments-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   REVENUE SUMMARY BAR
   Three KPI values (month / year / all time) in a glass card.
   Only visible to owner role.
   ------------------------------------------------------------ */
.revenue-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-5);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.revenue-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.revenue-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.revenue-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Thin vertical divider between revenue items */
.revenue-divider {
  width: 1px;
  height: 32px;
  background: var(--glass-border);
  flex-shrink: 0;
}

/* On mobile: stack revenue items or scroll */
@media (max-width: 640px) {
  .payments-controls { flex-direction: column; align-items: stretch; }
  .revenue-summary {
    justify-content: space-around;
    padding: var(--sp-3);
  }
  .revenue-value { font-size: var(--text-md); }
}

/* ------------------------------------------------------------
   PAYMENT ROW
   Card-based list item — inherits .card .card-sm from glass.css
   ------------------------------------------------------------ */
.payment-row {
  cursor: default;
  transition: background var(--transition-fast);
}
.payment-row:hover {
  background: var(--glass-3);
}

/* ------------------------------------------------------------
   RECEIPT PREVIEW BOX
   Scrollable white card preview inside the modal.
   ------------------------------------------------------------ */
.receipt-preview-box {
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-0);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  border: 1px solid var(--glass-border);
}

/* On light mode, receipt preview bg stays white-ish */
[data-theme="light"] .receipt-preview-box {
  background: #F0F4FB;
}

/* Mobile: receipt preview box shorter so buttons are visible */
@media (max-width: 600px) {
  .receipt-preview-box { max-height: 45vh; }
}