/* ═══════════════════════════════════════════════════════════════════════════
   Penny — review UI.

   Same design language as Roger: the tokens, type scale and component shapes
   below are lifted from roger/public/css/styles.css so the two internal
   finance tools read as one system. Only the parts Penny actually renders are
   here — one table, one filter bar, one login card.

   Deliberately no dark mode. Roger has none, and a tool that looked different
   in a dark browser would stop matching the thing it is meant to match.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@300;400;500;600;700&display=swap');

:root {
  --navy: #14202E;
  --navy-deep: #0B1620;
  --navy-mid: #1F2D40;
  --navy-soft: #2A3B52;
  --gold: #B8860B;
  --gold-bright: #D4A017;
  --gold-soft: #E8C56B;
  --parchment: #F4EFE6;
  --parchment-soft: #FAF6EE;
  --paper: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --ink-muted: #7A7A7A;
  --rule: #D4CDB8;
  --rule-soft: #E8E2D2;
  --danger: #9B2C2C;
  --success: #2F5D3A;

  --serif: 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 150ms ease;
}
a:hover { border-bottom-color: var(--gold); }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }

/* ─── Masthead ─────────────────────────────────────────────────────────────── */
.masthead {
  background: var(--navy);
  color: var(--parchment);
  padding: 1rem 2rem;
  border-bottom: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.masthead-brand { display: flex; align-items: baseline; gap: 1rem; }
.masthead-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--parchment);
}
.masthead-subtitle {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-soft);
  padding-left: 1rem;
  border-left: 1px solid var(--navy-soft);
}
.masthead-user {
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.masthead-user-name { color: var(--parchment); text-transform: none; letter-spacing: 0.04em; }
.logout-btn {
  background: transparent;
  color: var(--parchment);
  border: 1px solid var(--navy-soft);
  padding: 0.35rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all 150ms ease;
}
.logout-btn:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ─── Workspace ────────────────────────────────────────────────────────────── */
.workspace { min-height: 100vh; background: var(--parchment); padding-bottom: 3rem; }
.workspace-main { max-width: 1360px; margin: 0 auto; padding: 2rem 2rem 4rem; }

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--rule);
}
.page-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.page-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.page-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 44ch;
  text-align: right;
}

/* ─── Stats ────────────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.25rem 1.5rem;
  position: relative;
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--gold);
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.stat-value {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ─── Section card ─────────────────────────────────────────────────────────── */
.section {
  background: var(--paper);
  border: 1px solid var(--rule);
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
}
.section-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
}
.section-subtitle {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
}
.section-flush { padding: 1.5rem 0 0; }
.section-flush .section-title,
.section-flush .section-subtitle { padding: 0 1.75rem; }

/* ─── Filter bar ───────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.field { display: flex; flex-direction: column; }
.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.field input, .field select {
  padding: 0.6rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--parchment-soft);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: all 150ms ease;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.btn-primary {
  padding: 0.62rem 1.5rem;
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transition: all 200ms ease;
}
.btn-primary:hover { background: var(--navy-deep); }
.btn-primary:active { transform: translateY(1px); }

/* ─── Data table ───────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.data-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
  border-top: 1px solid var(--rule);
  background: var(--parchment-soft);
  /* Columns are fixed-width now, so a long header wraps rather than forcing
     its column wider than the share it was given. */
  white-space: normal;
}
.data-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.data-table tr:hover td { background: var(--parchment-soft); }
/* td, not any .num — as `.data-table .num` this also matched the Amount header
   and beat `.data-table th` on specificity, rendering that one header a size
   larger than its neighbours. */
.data-table td.num {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table th.num { text-align: right; }
.data-table th.num a.th-sort { justify-content: flex-end; }
.cell-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}
.cell-descriptor {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  word-break: break-word;
}

/* Fixed layout so these percentages actually bind. Without it the browser
   sizes columns by content, which is what gave the company column more room
   than it needs and squeezed the descriptor — the descriptor is the longest
   string on the row and the one a reviewer reads to judge a match. */
.data-table { table-layout: fixed; }
.col-score      { width: 5%; }
.col-invoice    { width: 11%; }
.col-company    { width: 15%; }
.col-amount     { width: 9%; }
.col-deposit    { width: 9%; }
.col-descriptor { width: 28%; }
.col-status     { width: 10%; }
.col-actions    { width: 13%; }

/* ─── Sortable headers ─────────────────────────────────────────────────────── */
.data-table th a.th-sort {
  color: inherit;
  border-bottom: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  white-space: normal;
}
.data-table th a.th-sort:hover { color: var(--navy); border-bottom: none; }
.data-table th.is-sorted { color: var(--navy); background: var(--rule-soft); }
.caret { font-size: 0.6rem; color: var(--gold); }

/* The score is the reviewer's first read, so it gets the serif and the size.
   Bands match matching/payer.py: 90+ has been reliably correct, below 60 has
   been noise, and STRONG_MATCH_SCORE=75 is the line drawn between them. */
.score {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.score-hi { color: var(--success); }
.score-mid { color: var(--gold); }
.score-lo { color: var(--ink-muted); }

/* ─── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.badge-new { background: var(--rule-soft); color: var(--ink-soft); }
/* Gold rather than red: a contested row is not an error, it is two candidates
   competing. The reviewer picks one — that is the job, not a fault. */
.badge-contested { background: var(--gold); color: var(--navy); margin-top: 0.25rem; }
.badge-confirmed { background: var(--success); color: var(--parchment); }
.badge-rejected { background: var(--danger); color: var(--parchment); }

/* ─── Row actions ──────────────────────────────────────────────────────────── */
.actions { display: flex; gap: 0.4rem; }
.btn-row {
  padding: 0.3rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  transition: all 150ms ease;
}
.btn-row:hover { border-color: var(--navy); color: var(--navy); }
.btn-confirm { border-color: var(--success); color: var(--success); }
.btn-confirm:hover { background: var(--success); color: var(--parchment); border-color: var(--success); }
.btn-reject { border-color: var(--danger); color: var(--danger); }
.btn-reject:hover { background: var(--danger); color: var(--parchment); border-color: var(--danger); }

/* ─── Masthead nav ─────────────────────────────────────────────────────────── */
.masthead-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.masthead-nav > a {
  color: var(--parchment);
  border-bottom: 1px solid transparent;
  padding: 0.25rem 0;
}
.masthead-nav > a:hover,
.masthead-nav > a.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}
.masthead-nav .masthead-user {
  margin-left: 0.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--navy-soft);
}

/* ─── Rules ────────────────────────────────────────────────────────────────── */
.rule-key {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--navy);
  word-break: break-word;
}
.rule-key-big {
  font-size: 1rem;
  background: var(--parchment-soft);
  border: 1px solid var(--rule);
  padding: 0.7rem 0.9rem;
  display: block;
}
.dry {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--success);
  background: rgba(47, 93, 58, 0.06);
  font-size: 0.9rem;
}
.dry-bad {
  border-left-color: var(--danger);
  background: rgba(155, 44, 44, 0.07);
}
.dry ul { margin: 0.5rem 0 0 1.1rem; }
.dry li { margin-bottom: 0.2rem; }

/* ─── Flash ────────────────────────────────────────────────────────────────── */
.flash {
  background: rgba(47, 93, 58, 0.08);
  border-left: 3px solid var(--success);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--success);
  margin-bottom: 1.5rem;
}

/* Codes read as identifiers, so they get the mono face and a little more
   contrast than ordinary sub-text — the team scans on these. */
.cell-sub.code { color: var(--ink-soft); letter-spacing: 0.02em; }

/* ─── Alert ────────────────────────────────────────────────────────────────── */
.alert {
  background: rgba(155, 44, 44, 0.08);
  border-left: 3px solid var(--danger);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--danger);
  margin-bottom: 1.5rem;
}

/* ─── Empty state ──────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 2rem; color: var(--ink-muted); }
.empty-state h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.empty-state p { font-family: var(--serif); font-style: italic; color: var(--ink-soft); }

/* ─── Footnote ─────────────────────────────────────────────────────────────── */
.footnote {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ─── Login ────────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-soft) 100%);
  position: relative;
  overflow: hidden;
  padding: 2rem;
}
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 39px,
    rgba(20, 32, 46, 0.025) 39px, rgba(20, 32, 46, 0.025) 40px);
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 3rem 2.5rem 2.5rem;
  box-shadow: 0 1px 0 var(--rule), 0 30px 60px -30px rgba(20, 32, 46, 0.25);
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--navy);
}
.login-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 4px;
  background: var(--gold);
}
.login-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.login-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.login-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.login-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.85rem 1.5rem;
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: none;
  transition: all 200ms ease;
}
.login-btn:hover { background: var(--navy-deep); border-bottom-color: transparent; }
.login-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-muted);
  text-align: center;
}

/* ─── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .page-note { text-align: left; }
  .workspace-main { padding: 1.5rem 1rem 3rem; }
  .masthead { padding: 1rem; }
}

/* ─── Segmented filter ─────────────────────────────────────────────────────── */
/* Used on the Rules page to keep a bulk seed from burying the rules a reviewer
   taught by hand: the two tiers are the same table but not the same evidence,
   so they get separate views rather than a mixed list with a column to squint
   at. */
.seg { display: flex; border: 1px solid var(--rule); background: var(--paper); }
.seg-item {
  padding: 0.35rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-decoration: none;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.seg-item:last-child { border-right: none; }
.seg-item:hover { background: var(--parchment-soft); }
.seg-item.active { background: var(--navy); color: var(--parchment); }
.seg-count { margin-left: 0.4rem; color: var(--ink-muted); }
.seg-item.active .seg-count { color: var(--gold-soft); }

/* Referenced by the Rules page for a workflow that is built but not switched
   on — a label, not an error. */
.placeholder-badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.45rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}