/* =====================================================================
   PETTY CASH VOUCHER

   The smallest pad in the drawer and the one with the longest tail. The
   voucher itself is four fields and a list; what makes it a module is
   everything after the cash moves — paid, acknowledged, back with treasury —
   and each of those is a different person saying a different thing.

   So the SIGNATURE of these screens is the chain of custody: a rail that shows
   where the paper is, who has it, and who is expected to act next. Not a
   status badge, because "acknowledged" alone answers none of those.

   Amber throughout: #A8641B is the PCV's own colour, chosen for its card on the
   form chooser (PORTAL_FORMS in public/js/app.js) before this module existed.
   The fourth instrument gets the fourth accent, and nobody has to be told which
   form they are looking at.
   ===================================================================== */
:root {
  --pcv: #A8641B;
  --pcv-deep: #6E3F0C;
  --pcv-tint: #FDF7F0;
  --pcv-rule: #EBD9C4;
}

.pcv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.pcv-layout > .card { margin-bottom: 0; }
.pcv-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }

.pcv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.pcv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
@media screen and (max-width: 720px) {
  .pcv-grid, .pcv-grid-3 { grid-template-columns: 1fr; }
}

.pcv-band {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 24px 0 14px; padding-bottom: 7px; border-bottom: 2px solid var(--pcv);
}
.pcv-band:first-child { margin-top: 0; }
.pcv-band-name {
  font-family: 'Tektur', monospace; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pcv-deep);
}
.pcv-band-note { font-size: 11.5px; color: var(--gray); text-align: right; }

.pcv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pcv-serial {
  flex: none; text-align: right; border: 1px dashed var(--pcv-rule); border-radius: 10px;
  background: var(--pcv-tint); padding: 10px 14px;
}
.pcv-serial-label {
  font-family: 'Tektur', monospace; font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); display: block;
}
.pcv-serial-value {
  font-family: 'Tektur', monospace; font-size: 17px; font-weight: 500;
  color: var(--pcv-deep); display: block; margin-top: 2px;
}
.pcv-serial-hint { font-size: 10.5px; color: var(--gray); display: block; margin-top: 2px; }

/* --- the particulars, as a table because that is what the pad has --- */
.pcv-lines { width: 100%; border-collapse: separate; border-spacing: 0; }
.pcv-lines thead th {
  font-family: 'Tektur', monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); font-weight: 500;
  text-align: left; padding: 0 8px 8px 0; border-bottom: 1px solid var(--pcv-rule);
}
.pcv-lines thead th.num { text-align: right; }
.pcv-lines td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); }
.pcv-lines td:last-child { padding-right: 0; }
.pcv-lines input {
  width: 100%; border: 1px solid transparent; border-radius: 7px;
  padding: 7px 9px; font-family: inherit; font-size: 13px; background: transparent; color: var(--ink);
}
.pcv-lines input:hover { border-color: var(--border); }
.pcv-lines input:focus { border-color: var(--pcv); outline: none; background: var(--surface); }
.pcv-lines input.num { text-align: right; font-variant-numeric: tabular-nums; }
.pcv-line-drop {
  border: none; background: none; cursor: pointer; color: var(--gray);
  font-size: 17px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.pcv-line-drop:hover { color: var(--danger); background: rgba(196,68,59,0.08); }

.pcv-add {
  margin-top: 12px; border: 1px dashed var(--pcv-rule); border-radius: 9px;
  background: transparent; color: var(--pcv-deep); cursor: pointer;
  padding: 9px 14px; font-family: inherit; font-size: 12.5px; font-weight: 500;
}
.pcv-add:hover { border-color: var(--pcv); background: var(--pcv-tint); }

/* The total. One figure, and it is the whole of what the voucher pays. */
.pcv-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--pcv);
}
.pcv-total-cap {
  font-family: 'Tektur', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray);
}
.pcv-total-fig {
  font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 600;
  color: var(--pcv-deep); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   THE SIGNATURE: the chain of custody.

   Where the paper is, who has it, and who acts next. A status badge answers
   none of those, and this form's whole difficulty is that the cash and the
   paper move at different times through five pairs of hands.
   --------------------------------------------------------------------- */
.pcv-chain { list-style: none; margin: 0; padding: 0; }
.pcv-step { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pcv-step:last-child { border-bottom: none; }
.pcv-step-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--pcv-rule); color: var(--pcv-deep);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.pcv-step.is-done .pcv-step-mark { background: var(--pcv); border-color: var(--pcv); color: #fff; }
/* Where it is RIGHT NOW. The one step somebody has to act on. */
.pcv-step.is-here .pcv-step-mark {
  border-color: var(--pcv); color: var(--pcv); box-shadow: 0 0 0 3px rgba(168,100,27,0.16);
}
.pcv-step.is-here .pcv-step-name { color: var(--pcv-deep); font-weight: 600; }
.pcv-step.is-todo .pcv-step-name, .pcv-step.is-todo .pcv-step-who { color: var(--gray); }
.pcv-step-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pcv-step-who { font-size: 11.5px; color: var(--gray); line-height: 1.45; margin-top: 1px; }

/* ---------------------------------------------------------------------
   The cash count on the Acknowledgement Receipt.

   The pad's own ladder, in the pad's order, and it reads as a ladder: the
   denomination, the count, the product. The running total is set against the
   amount being acknowledged, because the entire purpose of counting is to find
   out whether the two agree.
   --------------------------------------------------------------------- */
.pcv-count { border: 1px solid var(--pcv-rule); border-radius: 12px; background: var(--pcv-tint); padding: 14px 16px; }
.pcv-count-row {
  display: grid; grid-template-columns: 62px 84px 1fr; align-items: center;
  gap: 0 10px; padding: 3px 0;
}
.pcv-count-face {
  font-size: 12.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums;
}
.pcv-count-row input {
  width: 100%; border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  padding: 5px 8px; font-family: inherit; font-size: 12.5px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pcv-count-row input:focus { border-color: var(--pcv); outline: none; }
.pcv-count-eq { font-size: 12.5px; color: var(--gray); font-variant-numeric: tabular-nums; }
.pcv-count-eq.has-value { color: var(--ink); }

.pcv-count-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pcv-rule);
}
.pcv-count-total-cap { font-size: 12px; color: var(--gray); }
.pcv-count-total-fig {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pcv-deep);
}
/* Balances or it does not, said in words as well as colour — this is the one
   figure somebody is holding banknotes against. */
.pcv-count-says { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; }
.pcv-count-says.is-ok { color: var(--ca, #0E8A6C); }
.pcv-count-says.is-off { color: var(--danger); }

.pcv-receipt-no {
  font-family: 'Tektur', monospace; font-size: 12.5px; color: var(--pcv-deep);
}

@media (max-width: 980px) {
  .pcv-layout { grid-template-columns: minmax(0, 1fr); }
  .pcv-rail { position: static; }
}
@media (max-width: 640px) {
  .pcv-total-fig { font-size: 22px; }
  .pcv-head { flex-direction: column; }
  .pcv-serial { text-align: left; align-self: stretch; }
}

/* Over the ceiling. The figure itself turns, because that is what somebody
   watching the total climb is actually looking at — and the sentence beside it
   says what to do instead, since "no" without a way forward is not an answer. */
.pcv-total-fig.is-over { color: var(--danger); }
.pcv-total-note {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--danger);
  text-align: right; line-height: 1.4; max-width: 34ch; margin-left: auto;
}
.pcv-total-note:empty { display: none; }