/* ---- صف بررسی برندهای معرفی‌شده ------------------------------------------------
   Loaded after dashboard.css and settlements.css and leaning on both: the page frame, the summary
   tiles, the `cash-form` inputs and the status pills are all already there. What is here is the one
   shape those files have no version of, a card that has to be read in full before it is answered.

   Everything about it is built around that: the card is wide and unhurried, the four facts sit in a
   grid so none of them can be skipped by scrolling, and the two forms are stacked under the facts
   rather than beside the heading, so no button is reachable before the receipt link has been passed.
   The refusal is a text button and the approval is a filled one, because they are not two equal
   choices: one of them creates a customer and the other sends a sentence. */

.req-card {
  margin-top: 14px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff07;
}
.req-card + .req-card { margin-top: 16px; }

.req-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.req-head h3 { margin: 0; font-size: 17px; }
.req-head p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }
.req-head a { color: #9b84ff; }

.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; margin-top: 15px; }
.req-grid > div { min-width: 0; }
.req-grid span { display: block; color: #938da8; font-size: 12px; }
.req-grid b { display: block; margin: 4px 0 3px; color: #e8e3f7; font-size: 14.5px; overflow-wrap: anywhere; }
.req-grid small { display: block; color: #827c98; font-size: 11.5px; line-height: 1.9; }
.req-grid a { color: #6cd4ff; }

.req-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 11px; background: #ffffff08; color: #b5afca; font-size: 13px; line-height: 2; }
.req-note b { color: #d5cfea; }
/* The one line on the card that stops an approval. Amber and above the buttons, because it is
   information the operator needs before pressing, not a report on what went wrong afterwards. */
.req-warn { margin: 12px 0 0; padding: 9px 12px; border: 1px solid #6b5a1f; border-radius: 11px; background: #ffb84d0f; color: #e8d3a6; font-size: 12.5px; line-height: 1.9; }

.req-form { margin-top: 14px; }
/* Refusing is deliberately the quieter of the two forms: no panel behind it, and its button is a
   link rather than a filled control. Nothing here is trying to make refusing hard, only to stop the
   eye landing on it first. */
.req-form.reject { border-color: #ff6b8a33; background: #ff6b8a0a; }
.req-form.reject .text-button { color: #ff9db0; }

.req-history { display: grid; gap: 2px; }
.req-history-row {
  display: grid; grid-template-columns: minmax(200px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr);
  gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.req-history-row:last-child { border-bottom: 0; }
.req-history-row b { display: block; color: #e1ddec; font-size: 14px; }
.req-history-row small { display: block; margin-top: 3px; color: #827c98; font-size: 11.5px; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .req-grid { grid-template-columns: 1fr; }
  .req-history-row { grid-template-columns: 1fr; gap: 6px; }
}