/* ============================================================
   Manual Payout Run module — Payout Runs / Run Detail / Failed & Retries
   Reuses the app's existing palette (#f89c1c accent) and table/modal
   classes; only new, module-specific pieces are defined here.
   ============================================================ */

/* ---- top-level tab pills (Payout Runs / Individual Requests / Failed & Retries) ---- */
.payout-tabs.nav-tabs {
  border-bottom: none;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.payout-tabs.nav-tabs .nav-link {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  color: #58585b;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  background: #fff;
}
.payout-tabs.nav-tabs .nav-link.active {
  background: #f89c1c;
  border-color: #f89c1c;
  color: #fff;
}

/* ---- payout rule panel ---- */
.payout-rule-card {
  border-radius: 16px;
  border: 1px solid #e9ecef;
  background: #fff;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.payout-rule-card label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #58585b;
  margin-bottom: 6px;
}
/* dashboard-layout's global .form-control rule sets color:#fff !important
   for its (usually dark-background) inputs; this card has a white
   background, so it needs to override back to a dark, readable color. */
.payout-rule-card .form-control,
.payout-rule-card .form-select {
  color: #211712 !important;
}
.payout-rule-card .form-control::placeholder {
  color: #adadad;
}
.rule-toggle {
  display: inline-flex;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}
.rule-toggle button {
  border: none;
  background: #fff;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #58585b;
}
.rule-toggle button.active {
  background: #211712;
  color: #fff;
}
.generate-run-btn {
  background: #f89c1c;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.generate-run-btn:disabled {
  opacity: 0.6;
}

/* ---- run status badges ---- */
.run-status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}
.run-status-draft { background: #fff3e0; color: #b5720b; }
.run-status-exported { background: #e7f1ff; color: #006eff; }
.run-status-completed { background: #e6f7ee; color: #20a000; }
.run-status-completed_with_failures { background: #ffe9e9; color: #ff0000; }
.run-status-cancelled { background: #f1f1f1; color: #696969; }

.item-status-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}
.item-status-ready_to_pay { background: #e6f7ee; color: #20a000; }
.item-status-bank_missing { background: #fff3e0; color: #b5720b; }
.item-status-on_hold { background: #f1f1f1; color: #696969; }
.item-status-paid { background: #e6f7ee; color: #20a000; }
.item-status-failed { background: #ffe9e9; color: #ff0000; }

.name-mismatch-pill {
  color: #b5720b;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}

.link-btn {
  background: none;
  border: none;
  color: #f89c1c;
  font-weight: 700;
  font-size: 13px;
  padding: 0;
}
.link-btn:disabled {
  opacity: 0.5;
}

/* ---- run detail header ---- */
.run-detail-header {
  border-radius: 16px;
  border: 1px solid #e9ecef;
  background: #fff;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.run-detail-header h4 {
  font-family: "Lora", serif;
  font-weight: 700;
  margin-bottom: 4px;
}
.run-detail-meta {
  color: #58585b;
  font-size: 13px;
}
.run-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-outline-payout {
  border: 1px solid #211712;
  background: #fff;
  color: #211712;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
}
.btn-outline-payout:disabled {
  opacity: 0.5;
}
.btn-solid-payout {
  border: none;
  background: #f89c1c;
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
}
.btn-solid-payout:disabled {
  opacity: 0.5;
}

/* ---- item status filter chips on run detail ---- */
.item-filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.item-filter-chips button {
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #58585b;
}
.item-filter-chips button.active {
  background: #211712;
  border-color: #211712;
  color: #fff;
}
.item-filter-chips button.chip-danger.active {
  background: #ff0000;
  border-color: #ff0000;
}

.bulk-action-bar {
  background: #fff3e0;
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}
.bulk-action-bar .selected-count {
  font-weight: 700;
  color: #211712;
  font-size: 14px;
}
.bulk-action-bar .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- upload / reconcile modal ---- */
.reconcile-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px dashed #f89c1c;
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  background: #fffaf3;
  width: 100%;
}
.reconcile-dropzone .file-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff3e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.reconcile-preview-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 1rem 0;
}
@media (max-width: 767px) {
  .reconcile-preview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reconcile-preview-card {
  border-radius: 12px;
  border: 1px solid #e9ecef;
  padding: 12px;
  text-align: center;
}
.reconcile-preview-card p {
  font-size: 12px;
  color: #58585b;
  margin-bottom: 4px;
  font-weight: 600;
}
.reconcile-preview-card h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}
.reconcile-preview-card.success { background: #e6f7ee; }
.reconcile-preview-card.success h5 { color: #20a000; }
.reconcile-preview-card.failed { background: #ffe9e9; }
.reconcile-preview-card.failed h5 { color: #ff0000; }
.reconcile-preview-card.attention { background: #fff3e0; }
.reconcile-preview-card.attention h5 { color: #b5720b; }
.reconcile-preview-card.bank-missing { background: #fff3e0; }
.reconcile-preview-card.bank-missing h5 { color: #b5720b; }

.reconcile-rows-table {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 10px;
}
.reconcile-rows-table table {
  width: 100%;
  font-size: 13px;
  margin-bottom: 0;
}
.reconcile-rows-table th {
  background: #fff3e0;
  padding: 8px 10px;
  position: sticky;
  top: 0;
}
.reconcile-rows-table td {
  padding: 8px 10px;
  border-top: 1px solid #f1f1f1;
  vertical-align: middle;
}
.result-pill {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.result-pill.success { background: #e6f7ee; color: #20a000; }
.result-pill.failed { background: #ffe9e9; color: #ff0000; }
.result-pill.needs_attention { background: #fff3e0; color: #b5720b; }

.reconcile-note {
  color: #58585b;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: #f1f1f1;
  overflow: hidden;
  margin-top: 6px;
}
.progress-track > div {
  height: 100%;
  background: #f89c1c;
}