/* VelvetCSV — App-specific styles
 * Layered on top of styles.css. Only styles unique to app.html live here.
 */

/* ── App main container ──────────────────────────────────────── */
.app-main {
  padding: var(--space-lg) 1.25rem var(--space-2xl);
}

.app-main .app-section:first-of-type { margin-top: 0; }

/* ── Upload error banner ─────────────────────────────────────── */
.upload-error {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-status-error-bg);
  color: var(--color-status-error);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

/* ── Loaded file chip ────────────────────────────────────────── */
.loaded-file {
  margin-top: var(--space-md);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.loaded-file strong { color: var(--color-text-base); font-weight: 600; }

/* ── Bank picker (manual override) ───────────────────────────── */
.bank-picker {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: 320px;
}

.bank-picker .form-input { cursor: pointer; }

/* ── Upgrade form status ─────────────────────────────────────── */
.form-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-status-green-bg);
  color: var(--color-status-green);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

/* ── Mapper field labels ─────────────────────────────────────── */
.mapper-required {
  color: var(--color-status-orange);
  font-weight: 700;
  margin-left: 2px;
}

/* ── Disabled state for download button ──────────────────────── */
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Empty state messaging ───────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}