:root {
  --ink: #12151c;
  --muted: #5b6270;
  --faint: #8b93a1;
  --line: #dfe3ea;
  --bg: #f5f6f9;
  --panel: #ffffff;
  --accent: #0f4a88;
  --accent-soft: #eaf1fa;
  --ok: #17693f;
  --ok-soft: #e7f4ec;
  --warn: #8a5300;
  --warn-soft: #fdf3e2;
  --err: #a11d2b;
  --err-soft: #fdecee;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 24px 20px 80px; }

header.masthead {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
header.masthead .wrap { padding: 0 20px; display: flex; align-items: center; gap: 16px; }
header.masthead .logo { height: 30px; width: auto; display: block; flex: none; }
header.masthead h1 {
  font-size: 15px; margin: 0; letter-spacing: -.01em; font-weight: 600;
  padding-left: 16px; border-left: 1px solid var(--line); color: var(--muted);
}
header.masthead .ref { margin-left: auto; font-weight: 600; color: var(--accent); }
header.masthead .sub { color: var(--muted); font-size: 12.5px; }

@media (max-width: 620px) {
  header.masthead .wrap { flex-wrap: wrap; gap: 10px; }
  header.masthead h1 { padding-left: 0; border-left: 0; width: 100%; order: 3; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.panel > h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin: 0; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.panel > h2 .step {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; margin-right: 8px; vertical-align: -4px;
}
.panel .body { padding: 18px; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
label .req { color: var(--err); }

input[type=text], input[type=email], input[type=date], input[type=number],
select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[readonly] { background: var(--bg); color: var(--muted); }

/* A money field shows its dollar sign like every other amount does. It cannot go INSIDE
   the value - these are <input type=number>, and a "$" there stops the browser parsing it
   - so it is drawn in the padding and the input is indented to clear it. */
.money-input { position: relative; display: block; }
.money-input > .sign {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; line-height: 1;
}
.money-input > input { padding-left: 23px; }
textarea { resize: vertical; min-height: 60px; }
.hint { font-size: 11.5px; color: var(--faint); margin-top: 4px; }

button {
  font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--faint); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: #0c3d72; }
button.danger { color: var(--err); border-color: #f0c4c9; }
button.ghost { background: transparent; border-style: dashed; color: var(--muted); }
button.small { padding: 5px 10px; font-size: 12px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions .spacer { margin-left: auto; }

/* --- expense lines ------------------------------------------------------------------ */
.line {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; background: #fff;
}
.line > .head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--bg);
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
}
.line > .head .badge {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.line > .head .amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.line > .fields { padding: 12px; display: grid; gap: 12px;
  grid-template-columns: 130px 150px 1fr; }
.line .full { grid-column: 1 / -1; }
.line .amounts { display: grid; gap: 12px; grid-template-columns: 1fr 1.4fr 1fr; align-items: end; }
/* A GST box the form filled in. Read-only and visibly so, otherwise it looks like a
   field you forgot to complete. */
.line .amounts input.derived { background: #f1f3f5; color: #495057; cursor: not-allowed; }
.line .amounts .gst-how { font-weight: 400; margin-left: 4px; }

/* --- receipts ------------------------------------------------------------------------ */
.drop {
  border: 1.5px dashed var(--line); border-radius: 6px; padding: 12px;
  text-align: center; color: var(--muted); font-size: 12.5px; cursor: pointer;
  background: #fcfcfd;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.drop.missing { border-color: #f0c4c9; background: var(--err-soft); color: var(--err); }
.files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.files li {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--ok-soft); color: var(--ok); border: 1px solid #c5e3d1;
  border-radius: 20px; padding: 3px 5px 3px 11px; max-width: 100%;
}
.files li a { color: inherit; text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.files li a:hover { text-decoration: underline; }
.files li button {
  border: none; background: transparent; color: var(--ok); padding: 0 4px;
  font-size: 15px; line-height: 1; cursor: pointer;
}

/* --- totals -------------------------------------------------------------------------- */
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.totals div { background: #fff; padding: 14px 16px; }
.totals .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.totals .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }
.totals .strong { background: var(--accent-soft); }
.totals .strong .v { color: var(--accent); }

/* --- claim line table (approver view) ------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.lines { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lines th, table.lines td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.lines thead th {
  background: var(--bg); color: var(--accent); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
table.lines tbody tr:last-child td { border-bottom: 0; }
table.lines tbody tr:hover { background: #fbfcfd; }
table.lines .num { width: 1%; text-align: center; color: var(--muted); font-weight: 700; }
table.lines .money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lines .strong { font-weight: 700; }
table.lines .muted { color: var(--muted); }
table.lines .nowrap { white-space: nowrap; }
table.lines .detail { min-width: 220px; }
table.lines tfoot td {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; border-top: 1px solid var(--line); border-bottom: 0;
}
a.chip, span.chip {
  display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
  font-size: 11.5px; padding: 2px 9px; border-radius: 20px;
  background: var(--ok-soft); color: var(--ok); border: 1px solid #c5e3d1;
  text-decoration: none; margin: 1px 2px 1px 0;
}
a.chip:hover { background: #d6ecdf; }
span.warnchip { background: var(--err-soft); color: var(--err); border-color: #f0c4c9; }

/* --- messages ------------------------------------------------------------------------ */
.msg { border-radius: 6px; padding: 11px 14px; margin-bottom: 12px; font-size: 13px; }
.msg ul { margin: 6px 0 0; padding-left: 18px; }
.msg.err { background: var(--err-soft); color: var(--err); border: 1px solid #f0c4c9; }
.msg.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #f0dcb4; }
.msg.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #c5e3d1; }
.msg.info { background: var(--accent-soft); color: var(--accent); border: 1px solid #c9dcf1; }
.msg b { font-weight: 700; }

.callout {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 11px 14px; font-size: 12.5px; color: #123c6b; border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
}

/* A reminder that this category needs a document the receipt is not. Amber rather than the
   usual blue, because it is a condition of being paid, not background guidance. */
.callout.warn {
  background: var(--warn-soft); border-left-color: var(--warn); color: #6b4a12;
}
.callout.extra-doc { margin: 2px 0 14px; }
.callout.extra-doc div { margin-top: 3px; }

/* --- approver: the paperwork check ---------------------------------------------------- */
/* Deliberately the loudest thing on the page. It is the one control the app cannot perform
   itself, and it sits directly above the approve button so it is read at the decision. */
.panel.danger-panel { border-color: #f0c4c9; }
.panel.danger-panel > h2 { color: var(--err); background: var(--err-soft);
                           border-bottom-color: #f0c4c9; }
.paperwork-item { border-left: 3px solid var(--warn); background: var(--warn-soft);
                  padding: 11px 14px; border-radius: 0 6px 6px 0; margin-bottom: 12px;
                  font-size: 13px; color: #6b4a12; }
.paperwork-item .need { margin: 6px 0 8px; font-weight: 600; }
.paperwork-item .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.paperwork-verdict { border-left: 3px solid var(--err); background: var(--err-soft);
                     padding: 11px 14px; border-radius: 0 6px 6px 0; font-size: 13px;
                     color: #7a1f2b; }
.paperwork-verdict div { margin-top: 4px; }

/* --- signature ----------------------------------------------------------------------- */
.sigwrap { max-width: 460px; }
.sigpad {
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  width: 100%; height: 150px; touch-action: none; cursor: crosshair; display: block;
}
.sigpad.signed { border-color: var(--ok); }
.sigbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sigbar .note { font-size: 11.5px; color: var(--faint); margin-left: auto; }

.routing { font-size: 12.5px; color: var(--muted); }
.routing code { background: var(--bg); padding: 2px 6px; border-radius: 4px;
  font-size: 12px; color: var(--ink); }

.status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.status-draft { background: var(--bg); color: var(--muted); }
.status-pending_approval { background: var(--warn-soft); color: var(--warn); }
.status-approved, .status-sent { background: var(--ok-soft); color: var(--ok); }
.status-rejected, .status-send_failed { background: var(--err-soft); color: var(--err); }
.status-cancelled, .status-voided { background: var(--bg); color: var(--faint);
                                    text-decoration: line-through; }

.spinner {
  width: 14px; height: 14px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

embed.pdfview { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 6px; }

@media (max-width: 860px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .line > .fields { grid-template-columns: 1fr; }
  .line .amounts { grid-template-columns: 1fr 1fr; }
  .line .amounts select { grid-column: 1 / -1; }
  .totals { grid-template-columns: 1fr; }
}

/* --- masthead nav --------------------------------------------------------------------- */
header.masthead .navlink {
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
}
header.masthead .navlink:hover { background: var(--accent-soft); }
header.masthead .navuser {
  color: var(--muted); font-size: 12.5px; padding-left: 10px;
  border-left: 1px solid var(--line); white-space: nowrap;
}
header.masthead .ref { margin-left: auto; }