/* =====================================================================
   CASH ADVANCE

   The pad this replaces is a pre-printed booklet: heavy-ruled boxes, a
   black band across the top of each section, and a red serial number in the
   corner. People have filled it in for years with the sheet in front of them,
   and the fastest way to make the screen usable is to keep their place in it —
   same sections, same order, same names.

   So the screen borrows the pad's STRUCTURE and not its appearance. The
   section band and the corner serial are here; the ruled-box skeuomorphism is
   not, because on a data-entry screen a fake printed border is decoration that
   costs contrast. The facsimile belongs on /ca-print.html, where it is
   functional — that sheet has to be recognisable as the form it replaces.

   Green throughout: #0E8A6C is the Cash Advance's own colour, already chosen
   for its card on the form chooser (PORTAL_FORMS in public/js/app.js). Reusing
   it is what makes these screens READ as the CA rather than as the PRF screens
   in a different hat, and one accent used in three places — band rule, serial,
   selected tick — keeps it from taking over the page.
   ===================================================================== */
:root {
  --ca: #0E8A6C;
  --ca-deep: #08503F;
  --ca-tint: #F1F9F6;
  --ca-rule: #C9DCD6;
}

/* ---------------------------------------------------------------------
   The section band. THE signature element of these screens.

   On the pad, "REQUEST DETAILS" / "DETAILS OF USE" / "RELEASING DETAILS" sit
   in a full-width bar with a rule under them, and that bar is what the eye
   uses to find its place. Same job here: it is not a heading with decoration,
   it is a divider that happens to be labelled.
   --------------------------------------------------------------------- */
.ca-band {
  display: flex; align-items: baseline; gap: 12px;
  margin: 30px 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ca);
}
.ca-band:first-of-type { margin-top: 0; }
.ca-band-name {
  font-family: 'Tektur', monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ca-deep);
}
.ca-band-note { font-size: 12px; color: var(--gray); margin-left: auto; text-align: right; }

/* ---------------------------------------------------------------------
   The corner serial.

   Two numbers exist and neither replaces the other: the system's own CA No.,
   and the red number printed on the paper sheet. Tektur because a serial is a
   machine-set number, and it is the one place on this page where a monospaced
   face says something true rather than merely looking technical.
   --------------------------------------------------------------------- */
.ca-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.ca-head-copy h2 { margin-bottom: 4px; }
.ca-serial {
  flex-shrink: 0; text-align: right;
  border: 1px dashed var(--ca-rule); border-radius: 10px;
  background: var(--ca-tint);
  padding: 10px 16px; min-width: 168px;
}
.ca-serial.is-issued { border-style: solid; }
.ca-serial-label {
  font-family: 'Tektur', monospace; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); display: block;
}
.ca-serial-value {
  font-family: 'Tektur', monospace; font-size: 19px; font-weight: 500;
  color: var(--ca-deep); display: block; margin-top: 2px; letter-spacing: 0.02em;
}
.ca-serial-hint { font-size: 11px; color: var(--gray); display: block; margin-top: 3px; }

/* Its own grid, deliberately not .form-grid: that class is declared twice in
   style.css with different gaps, and the winner depends on source order. */
.ca-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.ca-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
@media screen and (max-width: 720px) {
  .ca-grid, .ca-grid-3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Brokerage Use Only.

   Freight references that exist on the Logistics pad and nowhere else. Inset
   rather than inline so it reads as a box borrowed from another department —
   which is what it is — and shown only for a Logistics company, decided by the
   server (GET /api/companies/industries), never by a copy of the list kept here.
   --------------------------------------------------------------------- */
.ca-inset {
  border: 1px solid var(--border); border-left: 3px solid var(--ca-rule);
  border-radius: 0 10px 10px 0; background: #FBFDFC;
  padding: 16px 18px 4px; margin: 4px 0 18px;
}
.ca-inset-title {
  font-family: 'Tektur', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   The undertaking.

   The long paragraph down the left of the pad is not boilerplate — it is what
   the requestor signs under, and it is why the form is signed at all. It keeps
   its full wording and its position, and becomes a real acceptance rather than
   a line of small print nobody was asked about.
   --------------------------------------------------------------------- */
.ca-undertaking {
  border: 1px solid var(--ca-rule); border-radius: 12px;
  background: var(--ca-tint); padding: 18px 20px;
}
.ca-undertaking-text {
  font-size: 13px; line-height: 1.7; color: var(--ink); margin-bottom: 14px;
}
.ca-accept {
  display: flex; align-items: flex-start; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--ca-rule);
  font-size: 13.5px; cursor: pointer;
}
.ca-accept input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--ca); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   The route rail — what will happen to this advance, before it is filed.

   Numbered, and here the numbers earn it: this genuinely is a sequence, and
   which number a step carries is the information ("the manager first, then the
   head"). Where a department has no manager the rail shows one step, not a
   greyed-out two — the collapse is the rule working, not a step missing.
   --------------------------------------------------------------------- */
.ca-route { display: flex; flex-direction: column; gap: 0; }
.ca-step { display: flex; gap: 12px; padding: 12px 0; }
.ca-step + .ca-step { border-top: 1px dashed var(--border); }
.ca-step-mark {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--ca-rule); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tektur', monospace; font-size: 11.5px; color: var(--ca-deep);
}
.ca-step.is-done .ca-step-mark { background: var(--ca); border-color: var(--ca); color: #fff; }
.ca-step.is-current .ca-step-mark { border-color: var(--warning); color: var(--warning); border-width: 2px; }
.ca-step.is-rejected .ca-step-mark { background: var(--danger); border-color: var(--danger); color: #fff; }
.ca-step-body { min-width: 0; }
.ca-step-role { font-size: 13.5px; font-weight: 600; color: var(--blue-deep); }
.ca-step-who { font-size: 12.5px; color: var(--gray); line-height: 1.55; margin-top: 1px; }
.ca-step-note {
  font-size: 12.5px; color: var(--ink); line-height: 1.55; margin-top: 6px;
  border-left: 2px solid var(--border); padding-left: 10px;
}
.ca-step.is-rejected .ca-step-note { border-left-color: var(--danger); }

.ca-side { display: flex; flex-direction: column; gap: 16px; }
.ca-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media screen and (max-width: 1020px) { .ca-layout { grid-template-columns: 1fr; } }

/* A figure that has to be read exactly — the amount, the outstanding balance.
   Tektur again, and for the same reason as the serial: these are digits to be
   checked against a receipt, not prose. */
.ca-figure { font-family: 'Tektur', monospace; font-size: 22px; color: var(--ca-deep); letter-spacing: 0.01em; }
.ca-figure-label {
  font-family: 'Tektur', monospace; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 4px;
}

/* Liquidation. The only place these screens speak about the CALF, so it says
   plainly where the advance stands rather than showing a status word. */
.ca-liq { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.ca-liq.is-outstanding { border-color: rgba(192,138,46,0.45); background: rgba(192,138,46,0.06); }
.ca-liq.is-clear { border-color: rgba(47,158,99,0.4); background: rgba(47,158,99,0.06); }
.ca-liq-title { font-size: 13.5px; font-weight: 600; color: var(--blue-deep); margin-bottom: 4px; }
.ca-liq-line { font-size: 12.5px; color: var(--gray); line-height: 1.6; }

.badge-released { background: rgba(14,138,108,0.14); color: var(--ca-deep); }
.badge-liquidated { background: rgba(91,150,216,0.16); color: var(--blue-deep); }

.ca-releases { width: 100%; border-collapse: collapse; font-size: 13px; }
.ca-releases th {
  font-family: 'Tektur', monospace; font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray); text-align: left;
  padding: 0 10px 8px 0; font-weight: 500;
}
.ca-releases td { padding: 9px 10px 9px 0; border-top: 1px solid var(--border); }
.ca-releases .num { text-align: right; font-family: 'Tektur', monospace; }

/* =====================================================================
   MY CASH ADVANCES — the requester's own panel on Home.

   Deliberately NOT another My Requests: no stat grid, no table. Two reasons,
   both about what a cash advance IS rather than about variety.

   First, a person holds one or two advances, not forty — a table's density
   buys nothing and its columns would bury the thing they came to read.

   Second, and the reason this panel exists at all: an advance is a DEBT
   AGAINST THE PERSON READING IT, and the fact that matters is not "approved",
   it is who signed for it and whether money is out in their name. A status
   badge in a cell answers neither.

   So each advance is a slip: the amount, the reference, then the signatures
   beneath it in the order they were given — which is the bottom of the paper
   CA form, brought onto the screen.
   ===================================================================== */
.ca-slips { display: flex; flex-direction: column; gap: 14px; }

.ca-slip {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 16px 18px;
}
/* Money is out in this person's name. The one state worth colouring, because
   it is the only one that carries an obligation. */
.ca-slip.is-outstanding { border-color: rgba(192,138,46,0.5); }

.ca-slip-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.ca-slip-amount {
  font-family: 'Tektur', monospace; font-size: 21px; color: var(--ca-deep);
  letter-spacing: 0.01em;
}
.ca-slip-no {
  font-family: 'Tektur', monospace; font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--gray); text-transform: uppercase;
}
.ca-slip-head .badge { margin-left: auto; }
.ca-slip-purpose {
  font-size: 13.5px; color: var(--ink); line-height: 1.6; margin-top: 6px;
  /* Two lines, then it stops. A purpose can run to a paragraph and the
     signatures are what this panel is for. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- the signature strip: this panel's whole point -------------------- */
.ca-sigs {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.ca-sig { display: flex; align-items: baseline; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.ca-sig-mark {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: #fff; background: var(--ca);
  align-self: center;
}
.ca-sig.is-rejected .ca-sig-mark { background: var(--danger); }
.ca-sig.is-waiting .ca-sig-mark {
  background: transparent; border: 1.5px dashed var(--warning); color: var(--warning);
}
.ca-sig-name { font-weight: 600; color: var(--blue-deep); }
.ca-sig-role { color: var(--gray); }
.ca-sig-when { color: var(--gray); margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.ca-sig-note {
  flex-basis: 100%; margin-left: 27px; font-size: 12.5px; color: var(--ink);
  border-left: 2px solid var(--border); padding-left: 10px; line-height: 1.55;
}
.ca-sig.is-rejected .ca-sig-note { border-left-color: var(--danger); }

/* What is still owed, said in words. Sits under the signatures because it is
   what happened AFTER them. */
.ca-slip-owed {
  margin-top: 12px; padding: 9px 12px; border-radius: 8px;
  background: rgba(192,138,46,0.10); color: var(--ink);
  font-size: 12.5px; line-height: 1.55;
}
.ca-slip-owed strong { font-family: 'Tektur', monospace; color: var(--ca-deep); }

.ca-slip-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

@media screen and (max-width: 620px) {
  .ca-slip-head .badge { margin-left: 0; }
  .ca-sig-when { margin-left: 0; flex-basis: 100%; }
}

/* =====================================================================
   CASH ADVANCE ROUTES — the matrix.

   A list would have been the obvious admin screen: eight configured routes,
   an Add button, a modal. It is the wrong shape for this data.

   Because an unconfigured pair is REFUSED rather than routed to whoever holds
   the role, the fact an admin needs is not which routes exist — it is which
   do not. A list of eight rows says nothing about the three hundred pairs that
   will turn somebody away. So: departments down the side, cash advance
   categories across, and the holes drawn as holes.

   The risk here is the grid itself on a site where every other admin screen is
   a table. It earns its place because coverage is the question, and coverage is
   two-dimensional.
   ===================================================================== */
.route-wrap { overflow-x: auto; padding-bottom: 4px; }

.route-matrix { border-collapse: separate; border-spacing: 0; min-width: max-content; }
.route-matrix th, .route-matrix td { border-bottom: 1px solid var(--border); }

/* The category axis. Tektur and uppercase, as every other axis label on the CA
   screens — these are keys into the data, not prose. */
.route-matrix thead th {
  font-family: 'Tektur', monospace; font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); font-weight: 500;
  text-align: left; padding: 0 12px 10px; vertical-align: bottom;
  border-bottom: 2px solid var(--ca-rule); white-space: nowrap;
}
.route-matrix thead th.route-corner { border-bottom-color: var(--border); }

/* The department axis, frozen so a wide matrix stays readable while it scrolls. */
.route-matrix th.route-dept {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  text-align: left; padding: 12px 18px 12px 0; white-space: nowrap;
  font-family: 'Work Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--blue-deep); text-transform: none; letter-spacing: 0;
  border-right: 1px solid var(--border);
}

.route-cell { padding: 8px 8px 8px 0; vertical-align: top; }

/* One cell = one rule. A button, because every cell is clickable whether it
   holds a route or a hole — filling a hole is the main job of this screen. */
.route-btn {
  display: block; width: 100%; min-width: 168px; text-align: left;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  padding: 9px 11px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.route-btn:hover { border-color: var(--ca); }
.route-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14,138,108,0.28); border-color: var(--ca); }

.route-btn.is-set { border-color: var(--ca-rule); background: var(--ca-tint); }
/* Live and broken: it looks configured on the matrix and refuses at submission.
   The one state that must not read as "done". */
.route-btn.is-broken { border-color: rgba(192,138,46,0.6); background: rgba(192,138,46,0.08); }
.route-btn.is-empty { border-style: dashed; background: transparent; }

.route-name { display: block; font-size: 13px; color: var(--ink); line-height: 1.5; }
.route-name + .route-name { margin-top: 1px; }
/* Which of the two steps this name is. Small and constant, so the eye reads the
   names and only checks the order when it needs to. */
.route-step {
  display: inline-block; width: 13px; font-family: 'Tektur', monospace;
  font-size: 9px; color: var(--ca-deep); vertical-align: 1px;
}
.route-empty { font-size: 12.5px; color: var(--gray); }
.route-problem { display: block; font-size: 11px; color: var(--warning); margin-top: 5px; line-height: 1.45; }

/* Coverage, stated rather than counted by eye. */
.route-tally { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.route-tally-n { font-family: 'Tektur', monospace; font-size: 17px; color: var(--ca-deep); }
.route-tally-label {
  font-family: 'Tektur', monospace; font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray);
}

/* ---------------------------------------------------------------------
   The editor. A side panel, not a modal: an admin fills holes in sequence,
   and a modal would hide the matrix — the one thing that tells them where the
   next hole is — every time they opened one.
   --------------------------------------------------------------------- */
.route-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(10, 15, 28, 0.13);
  padding: 26px 28px; overflow-y: auto; z-index: 60;
  transform: translateX(100%); transition: transform 0.22s ease-out;
}
.route-panel.show { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .route-panel { transition: none; } }

.route-panel-pair {
  font-family: 'Tektur', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 4px;
}
.route-panel h2 { margin-bottom: 6px; }
.route-panel-sub { font-size: 12.5px; color: var(--gray); line-height: 1.6; margin-bottom: 20px; }
.route-panel-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.route-scrim {
  position: fixed; inset: 0; background: rgba(10, 15, 28, 0.18); z-index: 59;
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.route-scrim.show { opacity: 1; pointer-events: auto; }

/* A rule this slice inherits rather than sets. Drawn filled — it IS what an
   advance would resolve to — but in outline, so an admin can tell at a glance
   which cells this industry actually decides and which it only borrows. */
.route-btn.is-inherited {
  border-color: var(--border);
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(14,138,108,0.05) 7px 14px);
}
.route-btn.is-inherited .route-name { color: var(--gray); }