/* Invoices: this app's own styles, on top of the house look (style.css, unchanged). Phone first: approvers use phones
   (Rupert, 19 Oct 2026). */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.tile { border: 1px solid var(--border); border-radius: 8px; padding: 18px; background: var(--surface); cursor: pointer; }
.tile:hover { border-color: var(--red); }
.tile-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.tile-text { color: var(--grey-text); font-size: 0.92rem; line-height: 1.4; }
.tile-soon { cursor: default; opacity: 0.7; }
.tile-soon:hover { border-color: var(--border); }
.tile-soon-label { margin-top: 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

.list-controls .search { width: 100%; max-width: 480px; }
.search-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; }
.search-grid .search { max-width: none; width: 100%; }
@media (max-width: 900px) { .search-grid { grid-template-columns: 1fr 1fr; } .search-wide { grid-column: 1 / -1; } }

.panel + .panel { margin-top: 18px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-green { background: var(--ok); }
.dot-amber { background: #E0A100; }
.dot-red { background: var(--red); }
.dot-not-matched { background: transparent; border: 2px solid var(--grey-text); width: 8px; height: 8px; }
.pc-cell { white-space: nowrap; font-size: 0.85rem; }
.price-summary { margin: 4px 0 8px; }
#supplierForm, #approverForm { margin-top: 14px; }

.drop { margin-top: 12px; border: 2px dashed var(--border); border-radius: 8px; padding: 22px; text-align: center; color: var(--grey-text); }
.drop.over { border-color: var(--red); color: var(--red); }
/* A document's page uses the whole screen (Rupert, 20 Oct 2026: Eliza's prices were cut off with space spare at the edges):
   the file on the left, what was read - wider, for the lines - on the right. */
.wrap.wrap-full { max-width: none; }
.wrap-full .content { padding-left: 20px; padding-right: 20px; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.doc-view { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); object-fit: contain; }
.doc-left, .doc-right { min-width: 0; }
.doc-left a { display: inline-block; margin-top: 6px; font-size: 0.85rem; }
.unsure input, td.unsure input { border-color: #E0A100; background: var(--warn-bg); }
.field.unsure label { color: var(--warn); }

/* What was read, four to a row (invoices#31; Rupert, 21 Oct 2026: it moves the lines up). */
.read-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.read-grid .span-2 { grid-column: span 2; }
.read-grid .field-wide { grid-column: 1 / -1; }
.read-grid .due-line { padding: 9px 0; }

/* Hide the document: the form takes the whole width. */
.doc-toggle { margin-bottom: 8px; }
.doc-layout.doc-hidden { grid-template-columns: minmax(0, 1fr); }
.doc-hidden .doc-file { display: none; }

/* A card per line (invoices#31; Rupert chose option C of three mock-ups, 21 Oct 2026): every box labelled, no
   sideways scroll. The left edge is Eliza's result. */
.line-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lc { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 5px; padding: 10px 14px 2px; background: var(--surface); }
.lc-green { border-left-color: var(--ok); }
.lc-amber { border-left-color: #E0A100; }
.lc-red { border-left-color: var(--red); }
.lc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.lc-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--grey-text); margin-right: 8px; }
.lc-desc { font-weight: 600; font-size: 16px; }
.lc-side { display: flex; gap: 14px; align-items: baseline; }
.lc-more-link { font-size: 13px; color: var(--red); }
.lc-grid { display: grid; grid-template-columns: 2.2fr 1fr 0.7fr 0.8fr 1fr 1fr 0.7fr 1fr 1.1fr; gap: 0 10px; }
.lc-grid.lc-grid-dn { grid-template-columns: 2.4fr 1fr 0.7fr 0.8fr 1fr 1fr 0.7fr 1fr; }
.lc-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; }
.lc-more[hidden] { display: none; }
.lc .field { margin-bottom: 8px; min-width: 0; }
.lc .field label { font-size: 11px; margin-bottom: 2px; }
.lc .field input, .lc .field select { min-height: 36px; padding: 6px 8px; font-size: 15px; min-width: 0; }
.lc-lineTotal { border-left: 1px solid var(--border); padding-left: 10px; }
.v { white-space: nowrap; font-size: 14px; font-weight: 600; }
.v .sym { font-size: 17px; margin-right: 3px; }
.v-green { color: var(--ok); }
.v-amber { color: var(--warn); }
.v-red { color: var(--red); }
.v-na { color: var(--grey-text); font-weight: 400; }
/* "New price 15.00 on 29 Sep 2026" under a line checked against the price on its delivery day (invoices#33). */
.v-note { display: block; font-size: 13px; font-weight: 400; color: var(--grey-text); white-space: normal; text-align: right; }
.lc-total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px; padding: 10px 4px 0; font-size: 15px; }
.lc-total b { font-variant-numeric: tabular-nums; }
.lc-add { margin-top: 10px; }
/* Narrower: two rows of boxes a card, the description two wide. */
@media (max-width: 1500px) {
  .lc-grid, .lc-grid.lc-grid-dn { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lc-grid .lc-description { grid-column: span 2; }
  .lc-lineTotal { border-left: none; padding-left: 0; }
}
@media (max-width: 1200px) { .read-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.checks { margin: 10px 0 14px; display: grid; gap: 6px; }
.check { padding: 8px 12px; border-radius: 6px; border-left: 4px solid var(--border); background: var(--surface); font-size: 0.92rem; }
.check-stop { border-left-color: var(--red); background: var(--hover); }
.check-warn { border-left-color: #E0A100; background: var(--warn-bg); }
.check-info { border-left-color: var(--ok); }
.check-level { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; margin-right: 6px; }
.checks-ok { margin: 10px 0 14px; color: var(--ok); }

.compare { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

.trace-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; }
.trace-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface); line-height: 1.6; }
.trace-card-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-text); margin-bottom: 4px; }
tr.trace-bad td { background: var(--warn-bg); }
.links-line { margin: 0 0 12px; }
.due-line { padding: 8px 0; }

.appr { margin-bottom: 14px; }
.appr-step { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.appr-comment { margin-top: 4px; padding: 6px 10px; background: var(--cream); border-radius: 4px; white-space: pre-wrap; }
.appr-actions { margin-top: 10px; }
.st-warn { color: var(--warn); }
.appr-actions textarea, .appr-actions select { width: 100%; margin: 4px 0 8px; }
.appr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.appr-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--surface); cursor: pointer; line-height: 1.6; }
.appr-card:hover { border-color: var(--red); }
.appr-card-top { display: flex; justify-content: space-between; gap: 10px; }
.appr-amount { font-weight: 700; white-space: nowrap; }

/* At a glance (invoices#35): delivered, received at Great North Road, Net and Gross - four boxes, two a row on a phone,
   each saying in words whether it is good, with a coloured edge as well. */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.gl { border: 1px solid var(--border); border-left-width: 6px; border-radius: 8px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.gl-good { border-left-color: var(--ok); background: var(--ok-bg); }
.gl-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.gl-bad { border-left-color: var(--red); background: rgba(184, 39, 44, 0.10); }
.gl-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-text); }
.gl-value { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
.gl-good .gl-value { color: var(--ok); }
.gl-warn .gl-value { color: var(--warn); }
.gl-bad .gl-value { color: var(--red); }
.gl-detail { display: block; font-size: 0.85rem; color: var(--grey-text); margin-top: 2px; overflow-wrap: anywhere; }
.appr-card .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.appr-card .gl { padding: 8px 10px; }
.appr-card .gl-value { font-size: 1rem; }
.appr-card .gl-detail { display: none; }
/* The approver's buttons stay at the foot of the screen while they scroll (invoices#35). */
.decide-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); }
.decide-bar .btn { flex: 1; min-height: 48px; font-size: 1rem; }
body.has-decide-bar { padding-bottom: 84px; }
.doc-open { display: block; width: 100%; min-height: 48px; margin: 0 0 14px; }

/* Copied from holiday-sickness public/css/hs.css (20 Oct 2026), with public/js/colfilter.js: a filter under every heading,
   and a click on a heading sorts (invoices#8; Rupert, 19 Oct 2026: as elsewhere). */
/* A filter under every column heading (public/js/colfilter.js, holiday-sickness#23). */
.data-table .cf-row th { position: static; padding: 4px 6px 8px; text-transform: none; letter-spacing: 0; }
.cf-ctl { width: 100%; min-width: 72px; height: 30px; padding: 2px 6px; font-family: inherit; font-size: 13px; color: var(--dark); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.cf-ctl.cf-on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cf-bar { display: flex; gap: 14px; align-items: center; margin: 0 0 8px; font-size: 14px; color: var(--grey-text); }
.cf-bar[hidden] { display: none; }
.cf-bar button { padding: 0; font: inherit; color: var(--red); text-decoration: underline; background: none; border: none; cursor: pointer; }
.data-table tr.cf-hidden { display: none !important; }
/* Click a heading to sort (holiday-sickness#54): an arrow shows the column and the way. */
.data-table th.cf-sort { cursor: pointer; user-select: none; }
.data-table th.cf-sort:hover, .data-table th.cf-sort:focus-visible { color: var(--dark); }
.data-table th.cf-sort::after { content: "\2195"; display: inline-block; margin-left: 4px; opacity: 0.35; }
.data-table th.cf-sort[aria-sort="ascending"]::after { content: "\25B2"; opacity: 1; color: var(--red); }
.data-table th.cf-sort[aria-sort="descending"]::after { content: "\25BC"; opacity: 1; color: var(--red); }

@media (max-width: 900px) {
  .trace-cards { grid-template-columns: minmax(0, 1fr); }
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-view { height: 60vh; }
}

@media (max-width: 900px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
  .appr-cards { grid-template-columns: minmax(0, 1fr); }
  .appr-actions .btn-row .btn { flex: 1; min-height: 48px; }
  .read-grid, .lc-grid, .lc-grid.lc-grid-dn, .lc-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-grid .span-2 { grid-column: 1 / -1; }
  .v { white-space: normal; }
  .tiles { grid-template-columns: 1fr; }
  .data-table th, .data-table td { padding: 6px 8px; font-size: 0.85rem; }
}