/* Customer Service — Refunds module (.rf-*)
 *
 * Visual language deliberately inherited from Message Templates (.mt-*) and
 * Evri Claims (.ecg-*): the same teal→blue gradient, 1.5px borders, 14–18px
 * radii, soft shadow, uppercase sticky table headers, chip row with a
 * gradient active state. This is not a new screen shape — it is the house one.
 *
 * ONE MEANING PER COLOUR, and it is stricter here than elsewhere because this
 * screen is about money:
 *   red    = money at risk. Unknown state ONLY. Nothing else may use it.
 *   green  = money has gone out and was confirmed (executed).
 *   amber  = a human decision is outstanding (open).
 *   grey   = closed without money moving (declined) or informational.
 *   rust   = the channel refused; no money moved (failed).
 * No emoji anywhere.
 */

:root {
  --rf-primary: #0588b6;
  --rf-grad: linear-gradient(135deg, #03658e, #0588b6);
  --rf-ink: #0f2740;
  --rf-sub: #5b7183;
  --rf-line: #e6edf5;
  --rf-line-s: #cfdcea;
  --rf-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.rf-page { background: transparent; }
.rf-wrap { max-width: 1180px; margin: 0 auto; padding: 6px 4px 40px; }

/* ---------------- Head ---------------- */
.rf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 4px 0 16px; }
.rf-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rf-primary); }
.rf-title { font-size: 25px; font-weight: 800; color: var(--rf-ink); margin: 4px 0; line-height: 1.15; }
.rf-sub { font-size: 13.5px; color: var(--rf-sub); margin: 0; max-width: 640px; line-height: 1.5; }

/* ---------------- KPI strip ---------------- */
.rf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rf-kpi {
  background: #fff; border: 1.5px solid var(--rf-line); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--rf-shadow); cursor: pointer; text-align: left; transition: .15s;
}
.rf-kpi:hover { border-color: var(--rf-primary); transform: translateY(-1px); }
.rf-kpi.on { border-color: transparent; background: var(--rf-grad); }
.rf-kpi.on .rf-kpi-n, .rf-kpi.on .rf-kpi-l, .rf-kpi.on .rf-kpi-x { color: #fff; }
.rf-kpi-n { font-size: 24px; font-weight: 900; color: var(--rf-ink); line-height: 1.1; }
.rf-kpi-l { font-size: 11.5px; font-weight: 800; color: var(--rf-sub); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.rf-kpi-x { font-size: 11.5px; color: #90a3b6; margin-top: 4px; }
/* The ONE alarming tile. Only ever unknown state. */
.rf-kpi.alarm { border-color: #dc2626; background: #fff6f6; }
.rf-kpi.alarm .rf-kpi-n { color: #991b1b; }
.rf-kpi.alarm .rf-kpi-l { color: #b91c1c; }
.rf-kpi.alarm.on { background: #991b1b; border-color: #991b1b; }

/* ---------------- Readiness ---------------- */
.rf-ready { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; color: var(--rf-sub); }
.rf-ready b { color: var(--rf-ink); }
.rf-rchip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rf-line-s); background: #fff; border-radius: 999px; padding: 4px 11px; font-weight: 700; font-size: 11.5px; }
.rf-rchip .dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.rf-rchip.ok { border-color: #cdebd7; color: #166534; background: #f4fdf7; }
.rf-rchip.ok .dot { background: #16a34a; }
.rf-rchip.no { border-color: #e6dfc9; color: #92400e; background: #fffbf3; }
.rf-rchip.no .dot { background: #d97706; }

/* ---------------- Toolbar + chips ---------------- */
.rf-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff;
  border: 1.5px solid var(--rf-line); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--rf-shadow); margin-bottom: 12px;
}
.rf-search { flex: 1 1 220px; min-width: 180px; }
.rf-search input, .rf-date {
  width: 100%; height: 40px; border: 1.5px solid var(--rf-line-s); border-radius: 10px;
  padding: 0 12px; font-size: 13.5px; color: var(--rf-ink); background: #fbfdff; font-family: inherit;
}
.rf-date { width: auto; }
.rf-search input:focus, .rf-date:focus { outline: none; border-color: var(--rf-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .14); }
.rf-dates { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--rf-sub); }

.rf-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rf-chip {
  border: 1.5px solid var(--rf-line-s); background: #fff; color: #3f5f79; font-size: 12.5px;
  font-weight: 700; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.rf-chip:hover { border-color: var(--rf-primary); color: var(--rf-primary); }
.rf-chip.active { background: var(--rf-grad); border-color: transparent; color: #fff; }
.rf-chip .rf-chip-n { font-size: 11px; opacity: .8; font-weight: 800; }
.rf-chip img { width: 15px; height: 15px; object-fit: contain; border-radius: 3px; }
.rf-chips-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #90a3b6; margin-right: 2px; }

/* ---------------- Table ---------------- */
.rf-tablewrap { overflow-x: auto; border: 1.5px solid var(--rf-line); border-radius: 14px; background: #fff; box-shadow: var(--rf-shadow); -webkit-overflow-scrolling: touch; }
.rf-table { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 12.8px; }
.rf-table th {
  text-align: left; padding: 9px 12px; background: #f5f8fc; color: var(--rf-ink); font-weight: 800;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1.5px solid var(--rf-line);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.rf-table td { padding: 9px 12px; border-bottom: 1px solid var(--rf-line); color: var(--rf-ink); white-space: nowrap; }
.rf-table tbody tr { cursor: pointer; }
.rf-table tbody tr:hover td { background: #f3f9fc; }
.rf-table tbody tr:last-child td { border-bottom: 0; }
/* Unknown state is the one row treatment that shouts. */
.rf-table tr.unknown td { background: #fff6f6; }
.rf-table tr.unknown:hover td { background: #ffeded; }
.rf-table tr.unknown td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.rf-chan { display: inline-flex; align-items: center; gap: 7px; }
.rf-chan img { width: 17px; height: 17px; object-fit: contain; border-radius: 3px; }
.rf-ref { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.rf-amt { font-weight: 800; text-align: right; }
.rf-amt.est { font-weight: 600; color: #90a3b6; }
.rf-muted { color: #90a3b6; }
.rf-src { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef5fb; color: #2d6b8f; border: 1px solid #dcecf6; }
.rf-src.manual { background: #f4f1fb; color: #6b52a6; border-color: #e6dff6; }

.rf-st { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rf-st.open { background: #fef3c7; color: #92400e; }
.rf-st.approved { background: #e0f2fe; color: #075985; }
.rf-st.executed { background: #dcfce7; color: #166534; }
.rf-st.failed { background: #ffece5; color: #9a3412; }
.rf-st.unknown_state { background: #dc2626; color: #fff; }
.rf-st.declined { background: #f1f5f9; color: #475569; }

/* ---------------- States ---------------- */
.rf-empty { text-align: center; padding: 52px 20px; background: #fff; border: 1.5px dashed var(--rf-line-s); border-radius: 18px; color: var(--rf-sub); }
.rf-empty h3 { margin: 0 0 4px; color: var(--rf-ink); font-size: 17px; }
.rf-empty p { margin: 0 0 14px; font-size: 13.5px; }
.rf-skeleton { display: grid; gap: 8px; }
.rf-sk-row { height: 42px; border-radius: 10px; background: var(--rms-skel-fill); background-size: 400% 100%; animation: rms-shimmer var(--t-shimmer) var(--e-in-out) infinite; }
.rf-err { background: #fff5f5; border: 1.5px solid #f3c9c9; color: #b3401f; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.rf-note { font-size: 11.5px; color: #90a3b6; margin-top: 10px; line-height: 1.5; }
.rf-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rf-btn {
  appearance: none; border: 1.5px solid var(--rf-line-s); background: #fff; color: #21506f;
  font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 11px; cursor: pointer;
  transition: .15s; box-shadow: none; margin: 0;
}
.rf-btn:hover:not(:disabled) { border-color: var(--rf-primary); color: var(--rf-primary); }
.rf-btn:disabled { opacity: .45; cursor: default; }

/* ---------------- Detail drawer ---------------- */
.rf-modal { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rf-modal-bg { position: absolute; inset: 0; background: rgba(13, 32, 51, .48); backdrop-filter: blur(2px); }
.rf-modal-shell {
  position: relative; background: #fff; border-radius: 18px; width: min(760px, 100%); max-height: 92vh;
  overflow: hidden; box-shadow: 0 30px 70px rgba(9, 26, 43, .35); display: flex; flex-direction: column;
}
.rf-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1.5px solid var(--rf-line); }
.rf-modal-head h3 { margin: 0; font-size: 16px; color: var(--rf-ink); display: flex; align-items: center; gap: 9px; }
.rf-modal-body { padding: 16px 18px 20px; overflow: auto; min-height: 0; }
.rf-x { border: none; background: transparent; font-size: 21px; line-height: 1; color: #8aa0b4; cursor: pointer; padding: 2px 6px; border-radius: 8px; box-shadow: none; margin: 0; }
.rf-x:hover { background: #eef4fa; color: var(--rf-ink); }
.rf-dl { display: grid; grid-template-columns: 132px 1fr; gap: 5px 12px; font-size: 12.8px; margin-bottom: 14px; }
.rf-dl dt { color: #8298ab; }
.rf-dl dd { margin: 0; font-weight: 700; color: var(--rf-ink); overflow-wrap: anywhere; }
.rf-sec { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #90a3b6; margin: 16px 0 7px; }

/* ---------------- Mobile (the platform's existing gate) ---------------- */
@media (max-width: 1180px) {
  .rf-wrap { padding: 4px 2px 30px; }
  .rf-title { font-size: 21px; }
  .rf-kpis { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .rf-kpi-n { font-size: 20px; }
  .rf-toolbar { padding: 10px; gap: 8px; }
  .rf-dates { width: 100%; }
  .rf-date { flex: 1; min-width: 0; }
  .rf-dl { grid-template-columns: 1fr; gap: 2px; }
  .rf-dl dt { margin-top: 7px; }
  .rf-modal { padding: 0; align-items: flex-end; }
  .rf-modal-shell { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
}

/* ---------------- Dark ---------------- */
html[data-theme="dark"] .rf-kpi,
html[data-theme="dark"] .rf-toolbar,
html[data-theme="dark"] .rf-tablewrap,
html[data-theme="dark"] .rf-modal-shell { background: #141d2f; border-color: #243049; }
html[data-theme="dark"] .rf-title, html[data-theme="dark"] .rf-kpi-n,
html[data-theme="dark"] .rf-table td, html[data-theme="dark"] .rf-dl dd { color: #e6edf6; }
html[data-theme="dark"] .rf-table th { background: #1a2438; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .rf-table td { border-color: #243049; }
html[data-theme="dark"] .rf-table tbody tr:hover td { background: #1d2941; }
html[data-theme="dark"] .rf-table tr.unknown td { background: #2a1a1a; }
html[data-theme="dark"] .rf-chip, html[data-theme="dark"] .rf-btn,
html[data-theme="dark"] .rf-rchip { background: #1d2941; border-color: #2a3650; color: #b8c6d8; }
html[data-theme="dark"] .rf-search input, html[data-theme="dark"] .rf-date { background: #1a2438; border-color: #2a3650; color: #e6edf6; }
html[data-theme="dark"] .rf-empty { background: #141d2f; border-color: #2a3650; }
html[data-theme="dark"] .rf-kpi.alarm { background: #2a1a1a; }