/* CDA request form and the admin review page. */

/* The button that starts the whole thing. Big and green because it is the last
   step of a closing and the agent should not have to hunt for it. */
.cda-request-btn {
  width: 100%; justify-content: center; gap: 8px;
  background: var(--green); border-color: var(--green); color: #fff;
  font-weight: 700; font-size: 14.5px; padding: 12px 16px;
}
.cda-request-btn:hover { background: #047857; border-color: #047857; }
.cda-request-btn svg { width: 18px; height: 18px; }
.cda-hook { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 2px; }

/* ---- The request form ---- */

.cda-step { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.cda-step > h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 10px;
}
.cda-kind { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cda-kind label { display: flex; gap: 7px; align-items: center; font-weight: 600; cursor: pointer; }
.cda-kind input { width: auto; }

/* Old beside new on a revision. Grid children default to min-width:auto, so a
   long address would push the New column off the edge without min-width:0. */
.cda-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
.cda-cols > * { min-width: 0; overflow-wrap: anywhere; }
.cda-colhead {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.cda-old input, .cda-old select { background: #f8fafc; color: var(--muted); }

.cda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cda-grid .full { grid-column: 1 / -1; }
.cda-grid > * { min-width: 0; }

/* A field the parser filled in, so the agent can see what came off the
   statement and what they typed themselves. */
.cda-parsed > label::after {
  content: 'from the statement'; margin-left: 6px; font-weight: 600;
  color: var(--green); text-transform: none; letter-spacing: 0; font-size: 10.5px;
}
.cda-blank > label::after {
  content: 'not found, check it'; margin-left: 6px; font-weight: 600;
  color: var(--amber); text-transform: none; letter-spacing: 0; font-size: 10.5px;
}

.cda-warn {
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px;
}
.cda-warn b { display: block; margin-bottom: 2px; }
.cda-err { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.cda-ok { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }

/* System-filled figures the user cannot change. */
.cda-sums { background: #f8fafc; border-radius: 8px; padding: 12px 14px; }
.cda-sums .row { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; }
.cda-sums .row span:first-child { flex: 1; color: var(--muted); min-width: 0; }
.cda-sums .row b { font-variant-numeric: tabular-nums; }
.cda-sums .row.total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 8px; }
.cda-sums .row.bad b { color: var(--red); }

/* Picking a document: upload, or take one already on the lead. */
.cda-doc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cda-doc select { flex: 1; min-width: 150px; }
.cda-doc .btn { flex: none; }
.cda-picked {
  display: flex; gap: 6px; align-items: center; font-size: 12.5px;
  color: var(--green); font-weight: 600; margin-top: 5px;
}
.cda-picked svg { width: 14px; height: 14px; }

/* ---- The admin page ---- */

.cda-cards { display: flex; flex-direction: column; gap: 14px; }
.cda-card .card-head { gap: 10px; flex-wrap: wrap; }
.cda-card .card-head h3 { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.cda-card .who { color: var(--muted); font-size: 12.5px; }

/* The reconciliation failure the spec asks to be shown on the card. It is the
   difference between paying the right number and paying a made-up one, so it
   is a red band across the card rather than a quiet asterisk. */
.cda-mismatch {
  background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b;
  border-radius: 8px; padding: 11px 13px; margin-bottom: 12px; font-size: 13px;
}
.cda-mismatch b { display: block; margin-bottom: 3px; }

.cda-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.cda-facts > div { min-width: 0; }
.cda-facts dt {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.cda-facts dd { font-size: 13.5px; overflow-wrap: anywhere; }

.cda-diff { color: var(--amber); font-weight: 600; }
.cda-diff s { color: var(--muted); font-weight: 400; margin-right: 5px; }

.cda-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cda-file {
  display: flex; gap: 9px; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
}
.cda-file .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.cda-file .kind { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.cda-viewer { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.cda-viewer iframe { width: 100%; height: 68vh; border: 0; display: block; background: #fff; }
.cda-viewer img { width: 100%; display: block; }

.cda-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.cda-actions .spacer { flex: 1; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.green:hover { background: #047857; border-color: #047857; }

.cda-history { font-size: 12px; color: var(--muted); margin-top: 10px; }
.cda-history div { padding: 2px 0; }

@media (max-width: 700px) {
  .cda-grid, .cda-cols { grid-template-columns: 1fr; }
}