/* ---- R5: Invoices (js/inv-*.js). Quiet Glass tokens only (quiet-glass.css); no new colours.
   Status words always sit in a pill with the word; nothing reads "overdue" and nothing is red:
   "Ready to pay" is ink, "Due today" and "Check before paying" are amber, "Paid" is green. */

.main.inv { max-width: 1120px; margin: 0 auto; padding-bottom: 64px; min-width: 0; width: 100%; }
#inv-page { grid-template-columns: minmax(0, 1fr); } /* the filters and tabs scroll inside; the page never does */

/* ---- head: the title, where to forward, one main action ---- */
.inv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 22px; }
.inv-title { margin: 0; font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.inv-sub { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-meta); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.inv-address { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.inv-address:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.inv-head-acts { display: flex; align-items: center; gap: 10px; }
.inv-head-acts .btn svg, .inv-sheet-btns .btn svg, .inv-first .btn svg { width: 18px; height: 18px; margin-right: 8px; }
.inv-gear { width: 44px; height: 44px; border-radius: 999px; }
.inv-gear svg { width: 22px; height: 22px; }

/* ---- the four numbers ---- */
.inv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.inv-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: 16px 18px; border: 0; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--elevation); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 120ms ease-out; }
.inv-stat:active { transform: scale(0.98); }
.inv-stat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inv-stat-num { font-size: 2.1875rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.inv-stat-label { font-size: 15px; font-weight: 600; }
.inv-stat-sub { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.inv-stat.is-zero .inv-stat-num { color: var(--muted); }
.inv-stat-check:not(.is-zero) .inv-stat-num { color: var(--sky); }
.inv-stat-week:not(.is-zero) .inv-stat-num { color: var(--amber); }
.inv-stat-paid:not(.is-zero) .inv-stat-num { color: var(--ok); }

/* ---- List | Calendar and the filters ---- */
.inv-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.inv-seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.inv-seg-btn svg { width: 18px; height: 18px; }
.inv-seg-btn.on { background: var(--primary); color: var(--on-primary); }
.inv-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-filter { height: 40px; min-width: 140px; max-width: 220px; font-size: 14px; border-radius: 999px; padding-left: 14px; }
.inv-filter.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* ---- tabs and rows ---- */
.inv-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 4px; scrollbar-width: none; }
.inv-tabs::-webkit-scrollbar { display: none; }
.inv-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.inv-tab.on { color: var(--text); border-bottom-color: var(--primary); }
.inv-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
.inv-tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 12px; }
.inv-total { margin: 8px 2px 10px; min-height: 20px; color: var(--muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.inv-rows { display: flex; flex-direction: column; gap: 8px; }
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-radius: var(--r-row); background: var(--glass); box-shadow: var(--elevation); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 120ms ease-out, background-color 120ms; }
.inv-row:hover { background: color-mix(in srgb, var(--primary) 4%, var(--glass)); }
.inv-row:active { transform: scale(0.99); }
.inv-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inv-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-row-title { font-size: var(--fs-item); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row-meta { color: var(--muted); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.inv-row-amount { font-size: var(--fs-item); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-row-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inv-row.tone-ok { opacity: 0.86; }
.inv-none { margin: 12px 2px; color: var(--muted); }

/* ---- the status words ---- */
.inv-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.inv-pill.tone-ok { background: var(--ok-soft); box-shadow: none; color: var(--ok); }
.inv-pill.tone-soon, .inv-pill.flag-bank, .inv-pill.flag-dup { background: var(--amber-soft); box-shadow: none; color: var(--amber); }
.inv-pill.tone-ready { background: var(--primary); box-shadow: none; color: var(--on-primary); }
.inv-pill.tone-check { background: color-mix(in srgb, var(--sky) 16%, transparent); box-shadow: none; color: var(--sky); }
.inv-pill.tone-quiet { color: var(--muted); }
:root[data-theme="light"] .inv-pill.tone-check { color: #1a5bb0; }

/* ---- calendar ---- */
.inv-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.inv-cal-title { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.inv-cal-nav { display: flex; align-items: center; gap: 6px; }
.inv-cal-nav .icon-btn { width: 44px; height: 44px; border-radius: 999px; }
.inv-cal-prev svg { transform: rotate(180deg); }
.inv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.inv-cal-dow { padding: 0 6px 4px; color: var(--muted); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.inv-cal-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.inv-cal-day.has { background: var(--glass); box-shadow: var(--elevation); }
.inv-cal-day.all-paid { opacity: 0.7; }
.inv-cal-day.on { box-shadow: inset 0 0 0 2px var(--primary); }
.inv-cal-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inv-cal-num { font-size: 14px; font-weight: 600; }
.inv-cal-day.is-today .inv-cal-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin: -3px 0 0 -5px; border-radius: 999px; background: var(--primary); color: var(--on-primary); }
.inv-cal-dots { display: flex; gap: 4px; }
.inv-cal-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.inv-cal-dots i.tone-soon { background: var(--amber); }
.inv-cal-dots i.tone-ready { background: var(--primary); }
.inv-cal-dots i.tone-ok { background: var(--ok); }
.inv-cal-dots i.tone-check { background: var(--sky); }
.inv-cal-sum { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.inv-cal-count { color: var(--muted); font-size: 12px; }
.inv-cal-pad { min-height: 1px; }
.inv-cal-list { margin-top: 18px; }
.inv-cal-list-head { margin: 10px 2px 2px; color: var(--muted); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- uploads in flight, dropping, first run, skeleton ---- */
.inv-uploads { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.inv-upload-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--r-row); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: 15px; }
.inv-upload-row svg { width: 20px; height: 20px; flex: none; }
.inv-upload-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--primary); transition: width 200ms; }
#inv-page { position: relative; }
#inv-page.is-dropping::after { content: "Drop to upload"; position: fixed; inset: 12px; z-index: 30; display: grid; place-items: center; border: 2px dashed var(--primary); border-radius: var(--r-sheet); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--text); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; pointer-events: none; }
.inv-first { padding: 24px; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--elevation); }
.inv-first-title { margin: 0 0 10px; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.inv-first-steps { margin: 0 0 18px; padding-left: 22px; color: var(--muted); line-height: 1.6; }
.inv-first-steps li + li { margin-top: 6px; }
.inv-skel { display: flex; flex-direction: column; gap: 8px; }
.inv-skel-row { height: 64px; border-radius: var(--r-row); background: var(--raised); animation: inv-shimmer 1.2s ease-in-out infinite; }
@keyframes inv-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.inv-empty { padding: 24px; text-align: center; color: var(--muted); }

/* ---- the sheet ---- */
dialog.inv-sheet { width: min(720px, calc(100vw - 32px)); }
.inv-sheet-inner { display: flex; flex-direction: column; gap: 14px; }
.inv-sheet-head { align-items: flex-start; }
.inv-sheet-title, dialog.panel .panel-head h2.inv-sheet-title, #inv-sheet .panel-head h2.inv-sheet-title { margin: 0; font-size: 1.8125rem; line-height: 1.17; font-weight: 500; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.inv-sheet-big { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-sheet-amount { font-size: 2.1875rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inv-sheet-meta { margin: -6px 0 0; color: var(--muted); font-size: var(--fs-meta); }
.inv-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-row); background: var(--amber-soft); color: var(--text); }
.inv-note > svg { flex: none; width: 22px; height: 22px; color: var(--amber); }
.inv-note.is-done { background: var(--ok-soft); }
.inv-note.is-done > svg { color: var(--ok); }
.inv-note-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 15px; }
.inv-note-text b { font-size: 16px; }
.inv-note-text .btn { align-self: flex-start; margin-top: 4px; }
.inv-note-links { display: flex; flex-direction: column; align-items: flex-start; }
.inv-note-links .link-btn { min-height: 36px; padding: 0; text-align: left; }
.inv-bank-cmp { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 4px 0 0; font-size: 14px; }
.inv-bank-cmp dt { color: var(--muted); }
.inv-bank-cmp dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.inv-intake, .inv-read-by { margin: 0; color: var(--muted); font-size: var(--fs-meta); }
.inv-form { display: flex; flex-direction: column; gap: 12px; }
.inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.inv-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.inv-field.wide { grid-column: 1 / -1; }
.inv-field input, .inv-field select, .inv-field textarea { width: 100%; }
.inv-was { color: var(--amber); font-size: 13px; overflow-wrap: anywhere; }
.inv-hint { color: var(--muted); font-size: 13px; line-height: 1.45; }
.inv-bank { border-radius: var(--r-row); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
.inv-bank > summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.inv-bank[open] { padding-bottom: 14px; }
.inv-sheet-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-sheet-btns .inv-delete { margin-left: auto; }
.inv-delete svg { width: 18px; height: 18px; margin-right: 6px; }
.inv-facts .link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.inv-facts .link-btn svg { width: 16px; height: 16px; }
.inv-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 15px; }
.inv-dl dt { color: var(--muted); }
.inv-dl dd { margin: 0; overflow-wrap: anywhere; }
.inv-paid { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.inv-paid-line { margin: 0; font-size: var(--fs-item); font-weight: 600; color: var(--ok); }
.inv-paid-note { margin: -6px 0 0; color: var(--muted); }
.inv-pay-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-row); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.inv-files { display: flex; flex-direction: column; gap: 8px; }
.inv-files:empty { display: none; }
.inv-files-head { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.inv-file { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--r-row); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.inv-file > svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.inv-file-words { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inv-file-words b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-file-words small { color: var(--muted); font-size: 13px; }
.inv-email-line { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

/* ---- the small sheets: export, settings ---- */
dialog.inv-small-sheet { width: min(560px, calc(100vw - 32px)); }
dialog.inv-small-sheet .panel-inner { display: flex; flex-direction: column; gap: 14px; }
.inv-set { display: flex; flex-direction: column; gap: 12px; }
.inv-set + .inv-set { padding-top: 14px; border-top: 1px solid var(--line); }
.inv-set-head { margin: 0; color: var(--muted); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.inv-set .muted { margin: 0; font-size: var(--fs-meta); }
.inv-hook, .inv-token-shown { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-row); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.inv-token-shown[hidden] { display: none; }
.inv-hook-label { color: var(--muted); font-size: 13px; }
.inv-hook-url, .inv-token { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.inv-token-line { margin: 0; font-size: 14px; }
.inv-set .btn { align-self: flex-start; }

/* ---- phone ---- */
@media (max-width: 760px) {
  .main.inv { padding-bottom: calc(var(--tabbar-h, 84px) + 96px); }
  .inv-head { align-items: stretch; flex-direction: column; margin-bottom: 16px; }
  .inv-head-acts { justify-content: flex-end; order: -1; position: absolute; top: 0; right: 0; }
  .inv-head-words { padding-right: 104px; }
  .inv-head { position: relative; }
  /* the main action in thumb reach, just above the floating tab bar. The head skips the entrance
     animation here: its transform (fill: both) would pin the fixed button to the head, not the screen. */
  .page-in > .main.inv > .inv-head { animation: none; }
  .inv-upload-btn { position: fixed; left: 14px; right: 14px; bottom: calc(var(--tabbar-h, 84px) + 12px); z-index: 20; height: 56px; border-radius: 999px; box-shadow: var(--elevation); }
  .inv-export-btn { width: 44px; padding: 0; justify-content: center; font-size: 0; border-radius: 999px; }
  .inv-export-btn svg { margin: 0; }
  .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inv-stat { min-height: 88px; padding: 12px 14px; }
  .inv-stat-num { font-size: 1.75rem; }
  .inv-controls { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .inv-seg { align-self: flex-start; }
  .inv-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
  .inv-filter { min-width: 0; flex: none; max-width: 70vw; }
  .inv-row { align-items: flex-start; padding: 12px 14px; }
  .inv-row-pills { max-width: 46vw; }
  .inv-cal-grid { gap: 3px; }
  .inv-cal-dow { padding: 0 2px 4px; font-size: 11px; letter-spacing: 0.06em; text-align: center; }
  .inv-cal-day { min-height: 52px; padding: 5px 4px; align-items: center; border-radius: 10px; }
  .inv-cal-day.is-today .inv-cal-num { margin: -2px 0 0; }
  .inv-cal-sum, .inv-cal-count { display: none; }
  .inv-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-sheet-amount { font-size: 1.875rem; }
  .inv-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .inv-dl dd { margin-bottom: 8px; }
  dialog.inv-sheet, dialog.inv-small-sheet { width: 100vw; max-width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .inv-skel-row { animation: none; } }