/* DPS Payments Console.
   Every colour, face and measure comes from tokens.css - nothing is invented
   here, so this, the ERP console and the landing page stay one product.

   The base below is shared with DPS-ERP-Console verbatim. Anything added for
   payments is at the end, under its own heading, so a change to the shared
   part stays easy to carry across. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h { font-family: var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

.noscript { max-width: 34rem; margin: var(--space-16) auto; padding: 0 var(--space-6); }

/* ── Field label / eyebrow ─────────────────────────────────────────────── */
.label {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Sign in ──────────────────────────────────────────────────────────── */
.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.signin-card {
  width: 100%;
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
}
.crest {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--dps-orange);
  color: var(--dps-white);
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h4);
  letter-spacing: 0;
  margin-bottom: var(--space-6);
}
.signin h1 { font-size: var(--text-h2); line-height: var(--leading-snug); margin-bottom: var(--space-2); }
.signin .sub { color: var(--ink-3); font-size: var(--text-sm); margin: 0 0 var(--space-8); }

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field input, .field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}
.field input:focus-visible, .field select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--dps-orange);
  box-shadow: 0 0 0 var(--ring-width) var(--color-primary-tint);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  background: var(--dps-orange);
  color: var(--dps-white);
}
.btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-quiet {
  background: transparent; color: var(--ink-2); border-color: var(--border-strong);
}
.btn-quiet:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  border: 1px solid;
}
.alert-error { background: var(--status-red-soft); border-color: var(--status-red); color: #7a0210; }
.alert-info  { background: var(--color-primary-tint); border-color: var(--dps-orange); color: var(--dps-orange-dark); }
.alert-ok    { background: var(--status-green-soft); border-color: var(--dps-green); color: var(--dps-green-dark); }

/* ── App shell ────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
  padding: 0 var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
  height: 64px;
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand .crest { width: 32px; height: 32px; margin: 0; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.brand-name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-base); }
.brand-sub { font-size: var(--text-2xs); color: var(--ink-3); letter-spacing: var(--tracking-label); text-transform: uppercase; }

.nav { display: flex; gap: var(--space-1); margin-left: auto; }
.nav button {
  background: none; border: 0; cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.nav button:hover { background: var(--bg); color: var(--ink); }
.nav button[aria-current="page"] { background: var(--color-primary-tint); color: var(--dps-orange-dark); }

.who { display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-4); border-left: 1px solid var(--border-soft); }
.who-email { font-size: var(--text-sm); color: var(--ink-2); }
.who-role { font-size: var(--text-2xs); color: var(--ink-3); }

main { padding: var(--space-8) var(--space-6) var(--space-16); }
.container { max-width: var(--container-max); margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-head h2 { font-size: var(--text-h2); }
.page-head p { margin: var(--space-1) 0 0; color: var(--ink-3); font-size: var(--text-sm); max-width: 60ch; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel + .panel { margin-top: var(--space-6); }
.panel-head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.panel-head h3 { font-size: var(--text-h3); }
.panel-body { padding: var(--space-6); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--bg);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfbf9; }
.mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: var(--text-xs); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  font-family: var(--font-heading);
  letter-spacing: .04em;
  white-space: nowrap;
}
.pill-ok    { background: var(--status-green-soft); color: var(--dps-green-dark); }
.pill-deny  { background: var(--status-red-soft);   color: #7a0210; }
.pill-warn  { background: var(--status-yellow-soft); color: #8a5a00; }
.pill-quiet { background: var(--bg); color: var(--ink-3); border: 1px solid var(--border-soft); }
.pill-brand { background: var(--color-primary-tint); color: var(--dps-orange-dark); }

.perm-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.grid-2 { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.checks { display: grid; gap: var(--space-2); max-height: 18rem; overflow-y: auto; padding-right: var(--space-2); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.check:hover { background: var(--bg); }
.check input { margin-top: 3px; accent-color: var(--dps-orange); }
.check-label { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.check-desc { font-size: var(--text-xs); color: var(--ink-3); }

.empty { padding: var(--space-12) var(--space-6); text-align: center; color: var(--ink-3); }
.empty p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filters .field { margin: 0; min-width: 9rem; }

.muted { color: var(--ink-3); font-size: var(--text-sm); }
.stack { display: grid; gap: var(--space-6); }

.retention-note {
  font-size: var(--text-xs);
  color: var(--ink-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
}

/* ── Platform dashboard ───────────────────────────────────────────────── */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(6, 1fr); } }

.stat {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.stat-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
/* Semantic, and separate from the brand accent — a number is not "on brand"
   or "off brand", it is fine or it is not. Green stays reserved for positive
   status exactly as the guideline requires. */
.stat-value.good { color: var(--dps-green-dark); }
.stat-value.warn { color: #8a5a00; }
.stat-value.bad  { color: var(--status-red); }
.stat-hint { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }

td.num, .num { font-variant-numeric: tabular-nums; }

/* ── Payments ─────────────────────────────────────────────────────────────
   Everything below is specific to this console. The base above is shared
   with DPS-ERP-Console. */

/* Money is set in the heading face and tabular, so a column of amounts lines
   up on the decimal point and two figures of different length are comparable
   at a glance rather than by reading them. */
.amount {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amount-lg { font-size: 1.9rem; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: var(--tracking-tight); }
/* A refunded amount is money leaving. Grey rather than red: it is a normal
   thing that happens, not an error, and colouring it like one would make a
   routine refund read as a problem. */
.amount-out { color: var(--ink-3); }
.amount-out::before { content: "−"; margin-right: 1px; }

td.amount-cell { text-align: right; white-space: nowrap; }
th.amount-head { text-align: right; }

/* Status pills. Mapped once, here, so the same state never appears in two
   colours on two screens. Green only for money actually received, per the
   brand guideline that keeps it for positive status alone. */
.pill-initiated { background: var(--bg); color: var(--ink-3); border: 1px solid var(--border-soft); }
.pill-pending   { background: var(--status-yellow-soft); color: #8a5a00; }
.pill-succeeded { background: var(--status-green-soft); color: var(--dps-green-dark); }
.pill-failed    { background: var(--status-red-soft); color: #7a0210; }
.pill-partially_refunded { background: var(--color-primary-tint); color: var(--dps-orange-dark); }
.pill-refunded  { background: var(--color-primary-tint); color: var(--dps-orange-dark); }

/* ── Copyable identifiers ──────────────────────────────────────────────
   A payment id is the thing somebody reads out on the phone to a parent, or
   pastes into a support ticket. Selecting a truncated id from a table cell by
   hand is where transcription errors come from, so every id is a button that
   copies the whole value. */
.idcopy {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: var(--text-xs);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  cursor: pointer;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.idcopy:hover { background: var(--bg); border-color: var(--border-soft); }
.idcopy .tick { color: var(--dps-green-dark); font-weight: var(--fw-bold); }

.row-link { cursor: pointer; }
.row-link:hover { background: var(--color-primary-tint) !important; }

/* ── Detail header ────────────────────────────────────────────────────── */
.detail-head {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: flex-start; justify-content: space-between;
  padding: var(--space-6);
}
.detail-figures { display: flex; gap: var(--space-10); flex-wrap: wrap; }
.figure .label { display: block; margin-bottom: var(--space-1); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── Ledger timeline ──────────────────────────────────────────────────────
   A list rather than a table, because the ledger is a story in order and the
   eye should follow the line down it. The rail makes the sequence visible
   without a column of numbers restating it. */
.ledger { list-style: none; margin: 0; padding: var(--space-6); display: grid; gap: 0; }
.entry {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-8);
  border-left: 2px solid var(--border-soft);
}
.entry:last-child { border-left-color: transparent; padding-bottom: 0; }
.entry::before {
  content: "";
  position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--border-strong);
}
.entry.is-credit::before { border-color: var(--dps-green); background: var(--dps-green); }
.entry.is-debit::before  { border-color: var(--dps-orange); background: var(--dps-orange); }
.entry-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.entry-title { font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.entry-meta { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }
.entry-actor { font-size: var(--text-xs); color: var(--ink-2); margin-top: var(--space-1); }

/* ── Flagged ──────────────────────────────────────────────────────────────
   A provider reporting a different amount is never reconciled automatically,
   so when one exists it has to be impossible to miss on the dashboard. */
.flag-banner {
  border: 1px solid var(--status-yellow);
  background: var(--status-yellow-soft);
  color: #6b4600;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex; gap: var(--space-4); align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.flag-banner strong { font-family: var(--font-heading); }

/* ── Forms in a panel ─────────────────────────────────────────────────── */
.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .field { margin: 0; }
.form-wide { grid-column: 1 / -1; }

/* The amount input. Minor units are what the API takes, but nobody thinks in
   paise, so the field takes rupees and the conversion happens in one place
   with the live echo underneath showing exactly what will be sent. */
.amount-input { font-family: var(--font-heading); font-size: var(--text-h3); font-variant-numeric: tabular-nums; }
.amount-echo { font-size: var(--text-xs); color: var(--ink-3); min-height: 1.2em; }
.amount-echo.bad { color: var(--status-red); }

.hint { font-size: var(--text-xs); color: var(--ink-3); }

.modal-back {
  position: fixed; inset: 0; background: rgba(35, 31, 32, .45);
  display: grid; place-items: center; padding: var(--space-6); z-index: 50;
}
.modal {
  background: var(--panel); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 30rem;
}
.modal-head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { font-size: var(--text-h3); }
.modal-body { padding: var(--space-6); }
.modal-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-soft); display: flex; gap: var(--space-3); justify-content: flex-end; }

.breadcrumb { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.breadcrumb:hover { color: var(--dps-orange-dark); }