/* Finance > Refunds — reuses the Payments page chrome (finance-payments.css:
   cards, actions column, Actions dropdown) and Billing's stat grid/tabs/filter
   bar; only the 6-up stat grid and the Create Refund form are specific. */
/* Cards size to their content (Figma: narrow count cards, wider amount
   cards) and share the leftover width, instead of 6 equal fixed columns. */
.plx-fin-stat-grid.plx-fin-ref-stat-grid {
  display: flex;
  gap: var(--space-2);
}

.plx-fin-ref-stat-grid .plx-mb-stat-card {
  flex: 1 1 auto;
}

.plx-fin-ref-amount {
  font-weight: var(--weight-semibold);
}

/* Long values (e.g. "Security Deposit Refund") wrap inside their field instead
   of being cut off with an ellipsis by Billing's single-line value rule. */
.plx-fin-ref-cards .plx-fin-invoice-field-value {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Create Refund form */
.plx-fin-ref-form-grid {
  display: grid;
  gap: 0 var(--space-4);
  grid-template-columns: repeat(4, 1fr);
}

.plx-fin-ref-span-2 {
  grid-column: span 2;
}

.plx-fin-ref-upload {
  align-items: center;
  border: 1.5px dashed var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  min-height: 88px;
}

.plx-fin-ref-upload-text {
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
}

.plx-fin-ref-upload-text small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Figma: field labels are small, regular-weight and muted on this form. */
.plx-fin-ref-form-grid .plx-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* Read-only fields sit on the muted card background. */
.plx-fin-ref-form-grid .plx-input.plx-fin-ref-readonly {
  background: var(--bg-card);
}

/* Read-only status boxes holding a soft, borderless tag. */
.plx-fin-ref-static {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  height: 32px;
  padding: 0 var(--space-2);
}

.plx-fin-ref-tag {
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-2);
}

.plx-fin-ref-tag-danger {
  background: color-mix(in srgb, var(--color-danger) 14%, var(--bg-card));
  color: var(--color-danger);
}

.plx-fin-ref-tag-success {
  background: color-mix(in srgb, var(--color-success) 14%, var(--bg-card));
  color: var(--color-success);
}

/* Stay Date holds the longest value, so its column gets a little more. */
.plx-fin-ref-form-grid-booking {
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
}

.plx-fin-ref-note {
  margin-top: var(--space-4);
}

/* Figma keeps all 6 stat cards in one row on desktop; the narrow cards let
   values shrink and wrap instead of dropping to fewer columns. */
.plx-fin-ref-stat-grid .plx-mb-stat-card {
  gap: var(--space-3);
  padding: var(--space-3);
}

.plx-fin-ref-stat-grid .plx-mb-stat-value,
.plx-fin-ref-stat-grid .plx-fin-pay-stat-sub {
  white-space: nowrap;
}

.plx-fin-ref-optional {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

/* ==========================================================================
   MEDIA QUERIES — all breakpoints for this file, grouped by tier
   (0–575.98 / 576–767.98 / 768–991.98 / 992–1199.98 / 1200–1399.98 / 1400+),
   one block per range, kept together here at the bottom of the file.
   ========================================================================== */

@media (max-width: 575.98px) {
  .plx-fin-stat-grid.plx-fin-ref-stat-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .plx-fin-ref-form-grid {
    grid-template-columns: 1fr;
  }

  .plx-fin-ref-span-2 {
    grid-column: auto;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .plx-fin-stat-grid.plx-fin-ref-stat-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-fin-ref-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .plx-fin-stat-grid.plx-fin-ref-stat-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-fin-ref-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .plx-fin-stat-grid.plx-fin-ref-stat-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, 1fr);
  }
}