/* ── MM-RMT Dashboard styles ──────────────────────────────────────────────── */

/* Middleman config card row */
.mm-middleman-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.mm-middleman-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mm-middleman-info {
  flex: 1;
  min-width: 0;
}
.mm-middleman-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-middleman-mode {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.mm-badge-auto  { color: var(--green); font-weight: 600; }
.mm-badge-manual { color: var(--yellow, #F5A623); font-weight: 600; }

/* Transaction table */
.mm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mm-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.mm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.mm-table tr:last-child td { border-bottom: none; }
.mm-table tr:hover td { background: var(--surface2); }

/* Status badges */
.mm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.mm-status-pending_payment     { background: rgba(245,166,35,.15);  color: #F5A623; }
.mm-status-payment_confirmed   { background: rgba(46,204,113,.15);  color: #2ECC71; }
.mm-status-pending_disbursement{ background: rgba(245,166,35,.15);  color: #F5A623; }
.mm-status-disbursed           { background: rgba(46,204,113,.15);  color: #2ECC71; }
.mm-status-completed           { background: rgba(88,101,242,.15);  color: #5865F2; }
.mm-status-disputed            { background: rgba(255,68,68,.15);   color: #FF4444; }
.mm-status-expired             { background: rgba(136,136,136,.15); color: #888;    }
.mm-status-cancelled           { background: rgba(136,136,136,.15); color: #888;    }

/* Action button in table */
.mm-action-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.mm-disburse-btn {
  background: var(--accent, #5865F2);
  color: #fff;
}
.mm-dispute-row td { background: rgba(255,68,68,.05); }

/* Mode toggle */
.mm-mode-toggle {
  display: flex;
  gap: 6px;
}
.mm-mode-btn,
.mm-manual-type-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
}
.mm-mode-btn.active,
.mm-manual-type-btn.active {
  background: var(--accent, #5865F2);
  color: #fff;
  border-color: transparent;
}

/* Config sub-panels */
.mm-panel {
  background: var(--bg2, var(--surface2));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
}
.mm-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* TX detail modal */
.mm-detail-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.mm-detail-label {
  color: var(--muted);
  min-width: 130px;
  flex-shrink: 0;
}
.mm-detail-value { font-weight: 500; }

/* Webhook URL box */
.mm-webhook-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: monospace;
}
.mm-webhook-box span { flex: 1; word-break: break-all; }