/* Expenses: the counter's receipt scanning and cash vouchers, and the admin's
   spending list, category breakdown and reimbursements. Sorts after
   65_log_book — expenses are read against the day's takings — and before
   70_print, so none of it reaches a thermal receipt.

   Runs inside body.admin on both sides, so the --a-* tokens, a-btn, a-stat,
   a-panel, a-pill and a-table all apply; this only adds what is new, and the
   form reuses the order form's so-card / so-grid / so-status layout wholesale. */

/* ── Source-of-funds pills ────────────────────────── */
/* Counter cash is the only source the day's count subtracts, and reimbursable
   is the only one that owes somebody, so those two are the ones that carry a
   colour of their own. GCash and a bank transfer are the same answer to the
   shop: money that never touched the drawer. */
.a-pill--fund-cash          { background: var(--a-soft); color: var(--a-accent-d); }
.a-pill--fund-gcash,
.a-pill--fund-bank_transfer { background: #EEF1FA; color: #3B4A7A; }
.a-pill--fund-reimbursable  { background: var(--a-warn-bg); color: var(--a-warn); }
/* The fund is cash, so it keeps the drawer's family — outlined rather than
   filled, because it is the pile that belongs to no day. */
.a-pill--fund-petty_cash    { background: transparent; color: var(--a-accent-d);
                              box-shadow: inset 0 0 0 1px var(--a-accent); }

/* A bill nobody has paid. The loudest state on the list: no money has moved and
   somebody still has to act, which is not true of any of the sources above. */
.a-pill--unpaid { background: var(--a-bad-bg); color: var(--a-bad); font-weight: 700; }

/* Operating is what nearly every category is, so it stays the quiet one and
   capital is the word that has to be spotted at a glance down the column. */
.a-pill--kind-operating { background: #EEF1F0; color: var(--a-muted); }
.a-pill--kind-capital   { background: #EEF1FA; color: #3B4A7A; font-weight: 700; }
.a-pill--kind-financing,
.a-pill--kind-interest  { background: #FBF1E4; color: #7A4F1B; font-weight: 700; }

/* Pending reads as something outstanding; paid back reads as settled. */
.a-pill--owed-pending { background: var(--a-bad-bg); color: var(--a-bad); }
.a-pill--owed-paid    { background: var(--a-soft); color: var(--a-accent-d); }

/* ── The counter's list ───────────────────────────── */
/* The expense row reuses .c-order, which puts the money on the right. On the
   orders list .c-order is the card and .c-order__main the link inside it; here
   the whole card is the link, so the card itself is what has to say it is not
   underlined text. */
.ex-row { color: inherit; text-decoration: none; }
.ex-row:hover { border-color: var(--a-accent); }

/* The pills sit under the amount rather than beside it, so a long payee never
   pushes them off. */
.ex-row__pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.ex-list .c-order__meta { text-wrap: pretty; }

/* The banner that says somebody is out of pocket. The whole notice is the link,
   since the list it leads to is the only reason to read it — so it keeps the
   notice's own white-on-brown rather than an anchor's colour. */
.ex-owed-banner { text-decoration: none; margin-bottom: 16px; }
.ex-owed-banner:hover { text-decoration: underline; }
/* Stacked banners keep one gap between them, not both their margins — .c-notice
   is a flex box, so adjacent margins don't collapse on their own. */
.ex-owed-banner + .ex-owed-banner { margin-top: 0; }

/* A page with buttons beside the title, which .c-head lays out but does not
   group: without this each button becomes its own flex child and they split to
   opposite ends of the row. */
.c-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── The form ─────────────────────────────────────── */
/* Hidden until the money came out of someone's own pocket. Set apart from the
   radios above it, so it reads as a consequence of the choice rather than as
   another question. */
.ex-owed {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--a-warn-bg);
  border: 1px solid #F0DDBA;
}
.ex-owed .c-hint { margin-top: 6px; }
.ex-form .so-card__title small { display: block; font-size: 13px; font-weight: 400; color: var(--a-muted); margin-top: 3px; }

/* One question where the columns keep three, so the answers are stacked rather
   than squeezed into a segmented row: five of them, each carrying what it means
   for the money, on a phone held in one hand. */
.ex-payers { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.ex-payers__option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--a-line); border-radius: 10px;
  cursor: pointer;
}
.ex-payers__option:has(input:checked) { border-color: var(--a-accent); background: var(--a-soft); }
/* A bill nobody has paid is the one answer where no money has moved, and it
   switches off everything below it — so it reads as the exception it is. */
.ex-payers__option--unpaid:has(input:checked) { border-color: var(--a-bad); background: var(--a-bad-bg); }
.ex-payers__option input { margin-top: 3px; flex-shrink: 0; width: 20px; height: 20px; }
.ex-payers__option strong { display: block; font-size: 15.5px; }
.ex-payers__option small { display: block; font-size: 13px; color: var(--a-muted); }

/* The envelope, collapsed to the sentence it is right nearly every time. */
.ex-envelope { margin-top: 2px; }
.ex-envelope__summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 4px; font-size: 14px; color: var(--a-muted);
}
.ex-envelope__change {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--a-accent-d); text-decoration: underline;
}

/* When the money left, which is the date on the paper only until a bill turns
   up. Sits under the answer it belongs to, with Today one tap away. */
.ex-when { margin-top: 12px; }

/* A field with a small button beside it: the payee's tidy-up, the money date's
   "Today". */
.ex-inline { display: flex; align-items: center; gap: 8px; }
.ex-inline input { flex: 1 1 auto; min-width: 0; }
.ex-when__method { margin-top: 12px; margin-bottom: 0; }

/* Settling a bill answers the two questions it was filed blank on, so the
   button comes with them rather than guessing. */
.ex-settle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ex-settle .a-field { flex: 1 1 150px; margin: 0; }
.ex-settle form { display: contents; }

/* ── Details ──────────────────────────────────────── */
.ex-def { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 20px; margin: 0; }
.ex-def dt { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--a-muted); }
.ex-def dd { margin: 0; }
.ex-photo { border-radius: var(--radius-sm); border: 1px solid var(--a-line); max-width: 420px; }

/* ── Supporting documents ─────────────────────────── */
/* A row per file rather than a gallery: half of them are PDFs, and what a
   person is looking for is the name and the tap target, not the picture. */
.ex-docs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ex-docs__item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--a-line); border-radius: 10px; background: #fff;
}
.ex-docs__link {
  display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
  color: inherit; text-decoration: none;
}
.ex-docs__link:hover .ex-docs__name strong { text-decoration: underline; }
.ex-docs__thumb {
  flex-shrink: 0; width: 44px; height: 44px; object-fit: cover;
  border: 1px solid var(--a-line); border-radius: 8px; background: #fff;
}
.ex-docs__thumb--file {
  display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--a-muted); background: var(--a-soft);
}
.ex-docs__name { min-width: 0; }
.ex-docs__name strong { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.ex-docs__name small { display: block; font-size: 12px; color: var(--a-muted); }
.ex-docs__remove { flex-shrink: 0; }
/* The description sits on its own line under the file on a phone and beside it
   on a wider screen: it is a whole sentence, and sharing a row with the
   thumbnail left it two words wide. Folded away it is one button, so the row
   only claims that width once somebody has opened it. */
.ex-docs__label { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.ex-docs__label.is-open { flex: 1 1 260px; }
.ex-docs__describe { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.ex-docs__describe input[type=text] { flex: 1 1 auto; min-width: 0; margin: 0; }
.ex-docs__item { flex-wrap: wrap; }
.ex-docs__add .a-field { margin-bottom: 10px; }
.ex-docs__add input[type=file] { display: block; width: 100%; font-size: 14px; }

/* The sort sits with the filters rather than in a form of its own: it is the
   same kind of question, and the tally row is where everything that follows the
   query already lives. */
.ex-sort { align-items: center; }
.ex-sort__label { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); }

/* A table whose rows open something. The cursor and the firmer hover are the
   only affordance a row gets, so they carry the whole hint that it is a target
   — and the payee reads as the link it actually is. */
.a-table--rows tbody tr { cursor: pointer; }
.a-table--rows tbody tr:hover { background: var(--a-soft); }
.a-rowlink { color: inherit; text-decoration: none; font-weight: 700; }
.a-table--rows tbody tr:hover .a-rowlink { text-decoration: underline; }
/* Keyboard users tab straight to the payee, so the focus ring has to be on the
   row, not lost inside a cell. */
.a-rowlink:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; border-radius: 3px; }

/* ── Where the money went ─────────────────────────── */
/* One row per category, sorted by spend. The bar is decoration over a figure
   that is already written out, so it is aria-hidden and needs no scale. */
.ex-bars { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ex-bars > li + li { border-top: 1px solid var(--a-line); }
.ex-bars a {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) minmax(150px, max-content);
  align-items: center;
  gap: 16px;
  padding: 7px 18px 7px 4px;
  text-decoration: none;
  color: inherit;
}
.ex-bars a:hover { background: var(--a-soft); }
.ex-bars .is-active > a { background: var(--a-soft); font-weight: 600; }
.ex-bars__name { font-size: 14px; }
/* Only capital is marked on a bar. Operating is the answer for nearly every
   row, and a badge on all of them would say nothing. */
.ex-bars__kind {
  margin-left: 6px; padding: 1px 6px; border-radius: 99px;
  background: #EEF1FA; color: #3B4A7A; font-size: 11px; font-weight: 700;
  letter-spacing: .2px; vertical-align: 1px;
}
.ex-bars__track { height: 8px; border-radius: 99px; background: var(--a-line); overflow: hidden; }
.ex-bars__fill { display: block; height: 100%; background: var(--a-accent); border-radius: 99px; }
/* The share and the count ride beside the amount rather than under it, so a
   row is one line tall and the panel does not push the list down. */
.ex-bars__figure { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.ex-bars__figure small { order: -1; font-size: 12px; color: var(--a-muted); }
.ex-bars__figure strong { min-width: 70px; text-align: right; }

/* A group: the parent's row with a fold in front of it, and its sub-categories
   (and the "filed under Supplies itself" line) closed underneath until the
   fold is opened. Folded, the panel is one row per category the shop has
   actually spent on, not one per sub-category too. */
.ex-group__head { display: flex; align-items: stretch; }
.ex-group__head > a { flex: 1; min-width: 0; }
.ex-group__fold {
  flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
  color: var(--a-muted); font-size: 13px; cursor: pointer; user-select: none;
  transition: transform .15s;
}
label.ex-group__fold:hover { color: var(--a-accent); }
.ex-group__toggle:focus-visible + .ex-group__head .ex-group__fold { outline: 2px solid var(--a-accent); outline-offset: -4px; border-radius: 6px; }
.ex-group__toggle:checked + .ex-group__head .ex-group__fold { transform: rotate(90deg); }
.ex-group__subs { display: none; margin: 0; padding: 0 0 4px; list-style: none; }
.ex-group__toggle:checked ~ .ex-group__subs { display: block; }
.ex-bars--sub a { padding-left: 52px; }
.ex-bars--sub .ex-bars__name { color: var(--a-muted); }
.ex-bars--sub .ex-bars__fill { opacity: .55; }

/* The long tail behind "Show N more categories". */
.ex-more { border-top: 1px solid var(--a-line); }
.ex-more > summary {
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--a-accent-d);
  cursor: pointer; list-style: none;
}
.ex-more > summary::-webkit-details-marker { display: none; }
.ex-more > summary:hover { background: var(--a-soft); }
.ex-more > summary .muted { font-weight: 400; }
.ex-more[open] .ex-more__closed, .ex-more:not([open]) .ex-more__open { display: none; }
.ex-more[open] > summary { border-bottom: 1px solid var(--a-line); }

/* ── Reimbursements ───────────────────────────────── */
/* Grouped by person, because the money is handed over one person at a time and
   the figure for the envelope is what an owner is reading for. */
.ex-owed-group .a-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ex-owed-group__sum { font-size: 20px; font-weight: 700; color: var(--a-warn); white-space: nowrap; }
.ex-repay { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ex-repay p { flex: 1 1 320px; font-size: 14px; color: var(--a-muted); }

/* ── Deleting one ─────────────────────────────────── */
/* Its own panel at the foot of the page, and the button keeps an outline: the
   shared .a-btn--danger is borderless text, which at the bottom of a long
   receipt reads as a caption rather than as something to press. */
.ex-delete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ex-delete p { flex: 1 1 320px; margin: 0; font-size: 14px; color: var(--a-muted); }
.ex-delete .a-btn--danger { border-color: var(--a-bad); background: var(--a-bad-bg); }
/* What deleting does to a sealed day: a row of its own above the paragraph and
   the button, read first, in the flash's own colours rather than the muted grey. */
.ex-delete .ex-delete__sealed { flex-basis: 100%; order: -1; color: inherit; }

/* ── Phone ────────────────────────────────────────── */
@media (max-width: 640px) {
  /* The bar becomes a figure with a name; the track has nothing useful to say
     at 40 px wide. */
  .ex-bars a { grid-template-columns: 1fr max-content; }
  .ex-bars__track { display: none; }
  .ex-def { grid-template-columns: 1fr; gap: 2px 0; }
  .ex-def dd + dt { margin-top: 10px; }
}