/* Supplier invoices.

   Almost every colour here is an existing theme-aware custom property
   (--charcoal-soft, --glass-border, --bone, --muted, --sand, --concrete all
   redefine themselves under body.light-theme already), so those rules need no
   counterpart. The exceptions are noted where they appear: flat accents
   (--amber and its tints, #E05A4A and its tints) are the same in both themes by
   design, and the two colours that would be unreadable on a light background —
   the teal working state and the green agreement tick — get explicit
   body.light-theme overrides. */

/* ---------- The module panel ---------- */

.invoices-wrap { padding: 0 1.5rem 2rem; }

.invoices-bar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem;
}

.inv-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: .55rem; cursor: pointer;
}

.inv-row-main { min-width: 0; }

.inv-row-supplier {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .95rem;
  color: var(--bone);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.inv-row-meta {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem;
  font-size: .72rem; color: var(--muted);
}

/* Amber, flat in both themes — the same treatment as .inv-warnings-title, so a
   draft (or rejected) invoice reads as "still needs attention" at a glance
   rather than blending into the muted meta row beside it. */
.inv-row-status {
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
  color: var(--amber);
}

.inv-row-total {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .95rem;
  color: var(--bone); white-space: nowrap; flex: 0 0 auto;
}

/* ---------- The upload sheet ---------- */

.inv-card { max-width: 720px; }

.inv-pick { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }

.inv-label {
  font-family: 'Archivo', sans-serif; font-size: .62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}

.inv-file {
  width: 100%; font-family: 'Archivo', sans-serif; font-size: .85rem;
  color: var(--bone); background: var(--glass-white);
  border: 1px solid var(--glass-border); border-radius: 10px; padding: .7rem;
  cursor: pointer;
}

.inv-hint { font-size: .75rem; color: var(--muted); line-height: 1.5; }

.inv-status { font-size: .8rem; min-height: 1.2rem; line-height: 1.5; margin-bottom: .8rem; }
.inv-status-done { color: var(--muted); }

/* Flat accent — #E05A4A is the app's error colour in both themes. */
.inv-status-error { color: #E05A4A; }

/* --teal-bright reads well on charcoal but only ~2.6:1 on white, so light
   theme drops to the deeper --teal. */
.inv-status-working { color: var(--teal-bright); }
body.light-theme .inv-status-working { color: var(--teal); }

/* ---------- Warnings ---------- */

/* Amber tints, flat in both themes — the same treatment index.html already
   uses for body.light-theme .disc-user. */
.inv-warnings {
  background: rgba(232,162,61,0.10);
  border: 1px solid rgba(232,162,61,0.30);
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.2rem;
}

.inv-warnings-title {
  font-family: 'Archivo', sans-serif; font-size: .62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--amber); margin-bottom: .5rem;
}

.inv-warning {
  font-size: .82rem; line-height: 1.55; color: var(--sand);
  padding: .2rem 0;
}

/* Calm, persistent reminder in the draft — not tied to any one warning, always
   shown while a draft is open. A left rule rather than .inv-warnings' full box
   border, so it reads as one quiet line of guidance rather than another alert. */
.inv-check-hint {
  font-size: .8rem; line-height: 1.55; color: var(--sand);
  background: rgba(232,162,61,0.08);
  border-left: 2px solid var(--amber);
  border-radius: 0 8px 8px 0;
  padding: .6rem .9rem; margin-bottom: 1.2rem;
}

/* ---------- Header fields ---------- */

.inv-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem; margin-bottom: 1.4rem;
}

.inv-field { display: flex; flex-direction: column; gap: .3rem; }

/* ---------- Lines ---------- */

.inv-lines-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; margin-bottom: .6rem;
}

.inv-lines-title {
  font-family: 'Archivo', sans-serif; font-size: .62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}

/* var(--amber) is flat in both themes. */
.inv-add-line {
  background: transparent; border: 1px solid var(--glass-border);
  border-radius: 8px; color: var(--amber);
  font-family: 'Archivo', sans-serif; font-size: .75rem; font-weight: 600;
  padding: .35rem .7rem; cursor: pointer;
}
.inv-add-line:hover { border-color: rgba(232,162,61,0.45); }

.inv-line {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .7rem; margin-bottom: .5rem;
}

/* Qty, unit, unit price, line total, remove button. Unit price gets more width
   than its neighbours — it is the figure that flows into cost-of-goods, while
   the line total (and the invoice total elsewhere) is the one that only looks
   reassuring. See .inv-line-price below for the matching weight. */
.inv-line-nums {
  display: grid; grid-template-columns: .8fr .7fr 1.3fr .9fr auto;
  gap: .4rem; align-items: center;
}

.inv-line-price { font-weight: 700; }

/* Flat accent on hover — the app's error colour, both themes. */
.inv-line-remove {
  background: transparent; border: none; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: .4rem; cursor: pointer;
}
.inv-line-remove:hover { color: #E05A4A; }

.inv-no-lines {
  font-size: .82rem; font-style: italic; color: var(--muted);
  padding: .8rem 0;
}

/* ---------- The arithmetic ---------- */

.inv-math {
  background: var(--concrete); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .8rem 1rem; margin: 1.2rem 0 .8rem;
}

.inv-math-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; font-size: .84rem; color: var(--muted); padding: .18rem 0;
}

.inv-math-row strong {
  font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--bone);
}

/* #22C55E is the app's booked green — fine on charcoal, only ~2.2:1 on white,
   so light theme uses a deeper green at the same weight. */
.inv-math-ok, .inv-math-ok strong { color: #22C55E; }
body.light-theme .inv-math-ok, body.light-theme .inv-math-ok strong { color: #15803D; }

/* Flat accent — the app's error colour in both themes. */
.inv-math-gap, .inv-math-gap strong { color: #E05A4A; }

/* ---------- Errors and saving ---------- */

/* Flat accent, plus a flat tint of it for the half-saved case. */
.inv-err { color: #E05A4A; font-size: .82rem; line-height: 1.55; min-height: 1rem; margin-bottom: .8rem; }

.inv-err-loud {
  background: rgba(224,90,74,0.12);
  border: 1px solid rgba(224,90,74,0.40);
  border-radius: 10px; padding: .8rem 1rem; font-weight: 600;
}

.inv-save { width: 100%; padding: .7rem; font-size: .88rem; }

@media (max-width: 600px) {
  .inv-line-nums { grid-template-columns: 1fr 1fr; }
  .inv-line-remove { grid-column: 2; justify-self: end; }
}

/* ---------- The read-only detail view ----------
   Every colour below is an existing theme-aware custom property
   (--bone, --muted, --charcoal-soft, --glass-border) already redefined under
   body.light-theme elsewhere, or a reused existing class (.inv-warnings,
   .inv-math, .btn-danger, .tasks-add-btn) — nothing here introduces a new
   colour rule, so nothing here needs a new light-theme counterpart.

   In-panel now rather than a modal (see js/invoices.js openInvoiceDetail) —
   the same list/detail toggle Recipes uses on #grid/#detailView. Hidden by
   default; opening an invoice sets this to 'block' and hides #invoicesList
   and .invoices-bar alongside it, closing it reverses both. */
#invoiceDetailView { display: none; }

.inv-detail-header {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem; margin-bottom: 1.4rem;
}

.inv-detail-value {
  font-family: 'Archivo', sans-serif; font-size: .85rem; color: var(--bone);
  word-break: break-word;
}

.inv-detail-items { margin-bottom: .4rem; }

.inv-detail-item {
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: .5rem;
}

.inv-detail-item-desc {
  font-family: 'Archivo', sans-serif; font-size: .88rem; color: var(--bone);
  margin-bottom: .5rem;
}

/* Fields wrap rather than sit in fixed table columns, so four figures per line
   never force horizontal scrolling on a phone — each one just drops to its
   own line once the row runs out of width. */
.inv-detail-item-nums {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
}

.inv-detail-item-field {
  display: flex; flex-direction: column; gap: .1rem; min-width: 64px;
}

.inv-detail-item-label {
  font-family: 'Archivo', sans-serif; font-size: .6rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}

.inv-detail-item-value {
  font-family: 'Archivo', sans-serif; font-size: .85rem; color: var(--bone);
}

/* Weight-only emphasis, matching .inv-line-price on the draft screen exactly —
   the unit price is what poisons cost-of-goods if it was misread, so it gets
   the same visual weight here rather than a second, divergent treatment. */
.inv-detail-item-price { font-weight: 700; }

.inv-detail-actions {
  display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap;
}
.inv-detail-actions .tasks-add-btn { flex: 1 1 140px; }
.inv-detail-actions .btn-danger { flex: 1 1 140px; }

/* ---------- Is this invoice in the books? ----------
   The banner js/invoices.js renders on the detail view. It has to be readable
   in both states and must never be absent, because absence would read as "no,
   it is not counted" — which is the exact confusion this whole feature exists
   to end.

   HANDOFF rule 6: --amber is roughly 2:1 as text on the light theme's white,
   so the two colours used as TEXT below carry the darkened counterparts at the
   bottom of this file. */

.inv-expense-link {
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 1.2rem 0 .4rem;
  border: 1px solid var(--glass-border);
  background: var(--charcoal-soft);
}

.inv-expense-link-title {
  font-family: 'Archivo', sans-serif; font-size: .62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}

.inv-expense-link-body {
  font-size: .82rem; line-height: 1.6; color: var(--sand);
}

.inv-expense-link-ok {
  border-color: var(--st-booked-border);
  background: var(--st-booked-bg);
}
.inv-expense-link-ok .inv-expense-link-title { color: var(--st-booked); }

/* Not counted is not an error — it is a fact about money that no profit figure
   can see, and it is the one line on this screen worth stopping at. */
.inv-expense-link-warn {
  border-color: rgba(232,162,61,0.40);
  background: rgba(232,162,61,0.07);
}
.inv-expense-link-warn .inv-expense-link-title { color: var(--amber); }

.inv-expense-link-list { margin: .6rem 0 0; padding-left: 1.1rem; }
.inv-expense-link-list li { margin-bottom: .25rem; }

.inv-expense-link-action { margin-top: .9rem; }
.inv-to-expenses { width: 100%; padding: .65rem; font-size: .85rem; }

/* ---------- Documents attached to an event ---------- */

.inv-docs { margin-top: 2rem; }

.inv-docs-title {
  font-family: 'Archivo', sans-serif; font-size: .62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}

.inv-docs-sub {
  font-size: .78rem; line-height: 1.55; color: var(--muted); margin-bottom: .8rem;
}

.inv-doc-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .8rem;
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: .5rem;
}

.inv-doc-main { min-width: 0; }

.inv-doc-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .92rem;
  color: var(--bone); margin-bottom: .3rem; word-break: break-word;
}

.inv-doc-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .72rem; color: var(--muted);
}

/* A filed document with no file is worth saying out loud — otherwise it looks
   like one that can be opened and simply will not (HANDOFF rule 4). */
.inv-doc-missing {
  margin-top: .35rem; font-size: .74rem; line-height: 1.5; color: #E05A4A;
}

.inv-doc-actions { display: flex; gap: .4rem; flex: 0 0 auto; }

.inv-doc-btn {
  background: none; border: 1px solid var(--glass-border); border-radius: 999px;
  color: var(--sand); font-family: 'Archivo', sans-serif; font-size: .68rem;
  letter-spacing: 1px; text-transform: uppercase; padding: .4rem .8rem;
  cursor: pointer; white-space: nowrap;
}
.inv-doc-btn:hover { border-color: var(--amber); }
.inv-doc-btn-danger:hover { border-color: #E05A4A; color: #E05A4A; }

/* Money that is not in his books. Amber rather than red: it is a thing to
   finish, not a fault — and one tap finishes it. */
.inv-docs-sub-warn { color: var(--sand); }
.inv-docs-sub-warn strong { color: var(--amber); }

.inv-doc-row-warn {
  border-color: rgba(232, 162, 61, 0.45);
  background: rgba(232, 162, 61, 0.06);
}

.inv-doc-counted,
.inv-doc-warn,
.inv-doc-note {
  margin-top: .35rem; font-size: .74rem; line-height: 1.5;
}
.inv-doc-counted { color: var(--st-booked); }
.inv-doc-warn { color: var(--sand); }
.inv-doc-warn strong { color: var(--amber); }
.inv-doc-note { color: var(--muted); }

.inv-doc-confirm {
  margin-top: .5rem; font-size: .76rem; line-height: 1.55; color: var(--sand);
  border-left: 2px solid #E05A4A; padding-left: .6rem;
}

/* The one action on this screen that changes what an event cost. */
.inv-doc-btn-primary {
  border-color: rgba(232, 162, 61, 0.55); color: var(--amber);
  background: rgba(232, 162, 61, 0.1);
}
.inv-doc-btn-primary:hover { background: rgba(232, 162, 61, 0.18); }

/* What just happened, under the heading. Replaces two window.alert()s — a
   suppressed dialog reads as a button that does nothing. */
.inv-docs-msg {
  font-size: .78rem; line-height: 1.55; margin-bottom: .7rem;
}
.inv-docs-msg:empty { display: none; }
.inv-docs-msg-ok { color: var(--st-booked); }
.inv-docs-msg-busy { color: var(--teal-bright); }
.inv-docs-msg-bad { color: #E05A4A; }

@media (max-width: 600px) {
  .inv-doc-row { flex-direction: column; align-items: stretch; }
  .inv-doc-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* ---------- light theme (HANDOFF rule 6) ---------- */

body.light-theme .inv-expense-link-warn .inv-expense-link-title { color: #9C5C08; }
body.light-theme .inv-expense-link-ok .inv-expense-link-title { color: #15803D; }
body.light-theme .inv-doc-missing { color: #B03A2E; }
body.light-theme .inv-doc-btn-danger:hover { border-color: #B03A2E; color: #B03A2E; }

/* Raw amber is about 2:1 on white and the teal working state is worse. Flat
   fills and borders above need no counterpart; these are text. */
body.light-theme .inv-docs-sub-warn strong,
body.light-theme .inv-doc-warn strong,
body.light-theme .inv-doc-btn-primary { color: #9C5C08; }
body.light-theme .inv-doc-counted,
body.light-theme .inv-docs-msg-ok { color: #15803D; }
body.light-theme .inv-docs-msg-busy { color: var(--teal); }
body.light-theme .inv-docs-msg-bad { color: #B03A2E; }
body.light-theme .inv-doc-confirm { border-left-color: #B03A2E; }