/* ==========================================================================
   Inbox
   One pile of everything that has come in — emailed, snapped on a phone, or
   uploaded — each item openable as the document it actually is.

   Lifted out of inbox.html on 29 Jul 2026 so the personal side (the tax
   checklist's paperwork, on the payslips page) runs the SAME code instead of a
   second copy. The engine is src/js/inbox.js; this file is only the look.

   Two layouts:
     the two-pane page  — document left, list in a locked panel right (inbox.html)
     .inbox--stack      — list then document, stacked, for use inside a page
   Catalogued in preview/index.html (#inbox).
   ========================================================================== */

/* ----- the list ----------------------------------------------------------
   One row per thing that arrived: who it is from, what it cost, when. The
   status says whether it has been tied to anything yet, because that is the
   whole point of the pile. Rows behave like the invoice list — click to open,
   the open one wears the standard 1px yellow ring. */

.inbox-filters {
  display: flex;
  gap: var(--space-2);
  margin: 20px 0 var(--space-1);
  flex-wrap: wrap;
}

.inbox-filter {
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 7px 15px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.inbox-filter.is-on {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

.inbox-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.inbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 14px var(--space-4);
  transition: border-color .15s ease, background .15s ease;
}

.inbox-row:hover { background: var(--color-bg-subtle-light); }
.inbox-row:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* The open one wears the app's selection ring: 1px yellow, never a fill (GLOBAL). */
.inbox-row.is-open { border-color: var(--color-hilite-strong); }

.inbox-row__body { flex: 1; min-width: 0; }
.inbox-row__name { display: block; font-size: var(--text-base); color: var(--color-text); }
.inbox-row__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.inbox-row__end { flex: none; text-align: right; }
.inbox-row__amt {
  flex: none;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.inbox-row__state {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  text-align: right;
}

/* ----- the document ------------------------------------------------------
   Whatever arrived, rendered at full size: a till receipt, a supplier invoice,
   a PDF. Same card as the invoice document so paperwork reads like every other
   record in Bullet. */

.inbox-doc {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 40px 44px;
}

.inbox-doc__src {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 26px;
}
.inbox-doc__src svg { width: 15px; height: 15px; flex: none; }

.inbox-doc__h { font-size: var(--text-heading); margin: 0 0 2px; }
.inbox-doc__sh { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 26px; }

.inbox-doc__rows { display: flex; flex-direction: column; gap: 9px; font-size: var(--text-sm); }
.inbox-doc__row { display: flex; justify-content: space-between; gap: 20px; }
.inbox-doc__row span:last-child { font-variant-numeric: tabular-nums; }
.inbox-doc__rule { border-top: 1px dashed var(--color-border-strong); margin: 6px 0; }
.inbox-doc__total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.inbox-doc__total span:last-child { font-variant-numeric: tabular-nums; }

/* What we read off it. OCR is not a promise that it is right — say where the
   figures came from so nobody assumes we checked them (Peter's copy register). */
.inbox-read {
  margin-top: 26px;
  padding-top: 20px;
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.inbox-read strong {
  color: var(--color-text);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}

.inbox-actions { display: flex; gap: 10px; margin-top: var(--space-6); flex-wrap: wrap; }

/* ----- the original file, as it arrived ----------------------------------
   Our reading sits above; this is the thing itself. On its own card so it reads
   as a separate object — the document, not our version of it. */

.inbox-orig {
  margin-top: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.inbox-orig__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px;
  border-bottom: var(--border-width) solid var(--color-border);
}
.inbox-orig__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-orig__open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.inbox-orig__open:hover { color: var(--color-text); }
.inbox-orig__open svg { width: 15px; height: 15px; }

/* The page sits on a grey ground, the way a document viewer shows paper. */
.inbox-orig__page {
  padding: var(--space-6);
  background: var(--color-bg-subtle);
  display: flex;
  justify-content: center;
}
.inbox-orig__page img {
  max-width: 100%;
  width: 340px;
  height: auto;
  display: block;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  border-radius: 2px;
}

.inbox-empty { color: var(--color-text-muted); font-size: var(--text-sm); padding: 20px 0; }

/* ----- stacked layout ----------------------------------------------------
   The inbox living INSIDE a page rather than being the page: list first, then
   the open document beneath it. Used on the personal payslips page, where the
   pile is one section among several. */

.inbox--stack { display: flex; flex-direction: column; }
.inbox--stack .inbox-filters { margin-top: 0; }
.inbox--stack .inbox-doc { padding: var(--space-8); }
.inbox--stack .inbox-docwrap { margin-top: var(--space-6); }

@media (max-width: 900px) {
  .inbox-doc { padding: var(--space-6) 20px; }
}

/* ── The list as a LEFT, anchored column (Peter, 20 Aug 2026) ──────────────
   It used to sit on the right and scroll with the page. It is the thing you
   navigate from, so it moves left, holds its own scroll, and stays put while
   the document beside it changes. */
.inbox-group {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 2px 6px;
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.inbox-group:first-child { padding-top: 2px; }

/* The search sits ON the pill row, folded to a magnifier beside the last pill
   (Peter, 20 Aug). Same collapsible component as bank-transactions and
   invoice-home — copied, not reinvented. */
/* ONE wrapping row. display:contents dissolves the pills' own container so the
   pills AND the magnifier are siblings in the same flex wrap — otherwise the
   pills wrap among themselves and the search lands on a line of its own,
   nowhere near the last pill. */
.inbox-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inbox-filterrow > .inbox-filters { display: contents; }
.search-field--collapsible {
  display: flex; align-items: center; overflow: hidden;
  border-radius: var(--radius-md); flex: 0 0 auto;
  min-width: 0; max-width: 36px; height: 36px;
  transition: max-width .45s cubic-bezier(0.34,1.32,0.64,1);
  position: relative; cursor: pointer;
}
.search-field--collapsible .input { width: 100%; height: 36px; padding-right: 40px; opacity: 1; transition: opacity .2s ease .12s; }
.search-field--collapsible.is-collapsed { max-width: 36px; }
.search-field--collapsible.is-collapsed .input { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.search-field--collapsible.is-open { max-width: 320px; }   /* px so the width animates */
.search-field--collapsible > svg { position: absolute; right: 10px; width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .search-field--collapsible { transition: none; } }

/* The floating arrow — only ever visible when the list actually overflows.
   Positioned against the panel (its sticky position is already a containing
   block, so no extra position:relative — that would clobber the sticky). */
.tin-scroll {
  position: absolute;
  right: 14px;
  bottom: 76px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.18);
  cursor: pointer;
  color: var(--color-text);
}
.tin-scroll:hover { border-color: var(--color-border-strong); }
.tin-scroll svg { width: 16px; height: 16px; }

/* THE HEAD HOLDS STILL, ONLY THE LIST SCROLLS (Peter, 20 Aug 2026: "anchor
   everything below 15 items so that they scroll, not the inbox and the pills").
   The first attempt scrolled the whole panel, which took the title, the search
   and the filter pills away with it — the controls you navigate WITH have to
   stay put. So the panel is a fixed-height column and the <ul> is the only
   thing that moves.

   Scoped with a modifier: .inv-tasks is shared with the invoice detail pages,
   which must not gain a scroll box. */
@media (min-width: 901px) {
  .inv-tasks--pinned {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;               /* the panel itself never scrolls */
  }
  /* everything above the list stays where it is */
  .inv-tasks--pinned > .inv-tasks__head,
  .inv-tasks--pinned > .tin-search,
  .inv-tasks--pinned > .inbox-filters,
  .inv-tasks--pinned > .inbox-count,
  .inv-tasks--pinned > #tin-sync { flex: none; }

  .inv-tasks--pinned > .inbox-list {
    flex: 1 1 auto;
    min-height: 0;                  /* without this a flex child refuses to shrink */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}