/* ==========================================================================
   Accounting & Finance — native VGo module
   Built entirely on the VGO design tokens declared in app.css (--bg, --surface,
   --text, --primary, --gold, --sage, --ochre, --barn …). No new palette, no
   imported framework: the finance app should read as the same product as
   Workflow and CRM.
   ========================================================================== */

/* ---------- Sidebar group (third app) ---------- */
.module-nav-mark.acc { background: linear-gradient(145deg, #6B8E5A, #3F6B32); }
.acc-group .nav-btn.active { background: linear-gradient(90deg, #E4EDE7 0%, rgba(228,237,231,.35) 100%); color: #2E5A3F; }

.acc-page { padding-bottom: 40px; }

/* ---------- Page header ---------- */
.acc-head {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.acc-head-main { flex: 1; min-width: 260px; }
.acc-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; }
.acc-head .page-desc { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Cards ---------- */
.acc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(61,46,34,.04);
}
.acc-card-flush { padding: 0; overflow: hidden; }
.acc-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--border);
}
.acc-card-flush > .acc-card-head { margin: 0; }
.acc-card-title { font-size: 14.5px; font-weight: 700; flex: 1; }
.acc-card-note { font-size: 12px; color: var(--muted); font-family: var(--mono); }

/* ---------- Stat tiles ---------- */
.acc-stats {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.acc-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 17px;
}
.acc-stat-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.acc-stat-value {
  font-size: 23px; font-weight: 700; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.acc-stat-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }
.acc-pos { color: var(--sage); }
.acc-neg { color: var(--barn); }
.acc-warn { color: var(--ochre); }

/* ---------- Grid tables ---------- */
.acc-table-wrap { overflow-x: auto; }
.acc-table { min-width: 100%; }
.acc-row {
  display: grid; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.acc-row:last-child { border-bottom: 0; }
.acc-row-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); padding-top: 9px; padding-bottom: 9px;
}
.acc-row-link { cursor: pointer; transition: background .12s; }
.acc-row-link:hover { background: var(--gold-bg); }
.acc-row-total { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border-2); }
.acc-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.acc-mono { font-family: var(--mono); font-size: 12.5px; }
.acc-strong { font-weight: 700; }
.acc-sub { font-size: 12px; color: var(--muted); }
.acc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-dim { color: var(--muted); }

/* ---------- Status pills ---------- */
.acc-pill {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  background: var(--primary-bg); color: var(--primary-dark);
}
.acc-pill.draft, .acc-pill.cancelled, .acc-pill.inactive, .acc-pill.reversed { background: #EFEAE1; color: var(--muted); }
.acc-pill.sent, .acc-pill.open, .acc-pill.partial { background: var(--ochre-bg); color: #8C6510; }
.acc-pill.paid, .acc-pill.posted, .acc-pill.active, .acc-pill.completed { background: var(--sage-bg); color: #3F6B32; }
.acc-pill.overdue { background: var(--barn-bg); color: #8E2F1B; }
.acc-chip {
  display: inline-block; font-size: 11.5px; border-radius: 7px;
  padding: 2px 8px; background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}

/* ---------- Tabs & filters ---------- */
.acc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.acc-tab {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px; transition: all .12s;
}
.acc-tab:hover { border-color: var(--border-2); }
.acc-tab.active { background: var(--primary); border-color: var(--primary); color: #FFF; }
.acc-tab-count {
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 1px 6px; background: var(--surface-2); color: var(--muted);
}
.acc-tab.active .acc-tab-count { background: rgba(255,255,255,.22); color: #FFF; }

.acc-toolbar {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-bottom: 14px;
}
.acc-search { flex: 1; min-width: 190px; max-width: 340px; }
.acc-summary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.acc-summary b { font-variant-numeric: tabular-nums; }

/* ---------- Empty state ---------- */
.acc-empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- Two-column detail layout ---------- */
.acc-split { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .acc-split { grid-template-columns: 1fr; } }

.acc-kv { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.acc-kv:last-child { border-bottom: 0; }
.acc-kv-label { color: var(--muted); }
.acc-kv-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.acc-totals { margin-left: auto; width: 280px; max-width: 100%; }
.acc-totals .acc-kv-grand { border-top: 2px solid var(--border-2); font-size: 15px; font-weight: 700; padding-top: 11px; }
.acc-due-box {
  background: var(--gold-bg); border-radius: 10px; padding: 11px 14px;
  display: flex; justify-content: space-between; font-weight: 700; margin-top: 10px;
}

/* ---------- Attachments ---------- */
.acc-att {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.acc-att:last-child { border-bottom: 0; }
.acc-att-ext {
  flex: none; width: 42px; text-align: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  padding: 5px 0; border-radius: 6px;
  background: var(--primary-bg); color: var(--primary-dark);
}
.acc-att-name {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-att-name:hover { color: var(--primary); text-decoration: underline; }
.acc-att-act {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; text-decoration: none; font-family: inherit;
}
.acc-att-act:hover { background: var(--gold-bg); color: var(--text); }
.acc-att-del:hover { background: var(--barn-bg); color: var(--barn); }

/* ---------- Payment adjustments & matching ---------- */
.acc-adj, .acc-match {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.acc-adj-head {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between; margin-bottom: 4px; flex-wrap: wrap;
}
.acc-adj-row {
  display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
  grid-template-columns: minmax(0, 1.1fr) 110px minmax(0, 1.2fr) 30px;
}
@media (max-width: 620px) { .acc-adj-row { grid-template-columns: 1fr 1fr; } }
.acc-adj-x {
  width: 28px; height: 28px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--surface-2); color: var(--muted); font-size: 17px; line-height: 1;
  font-family: inherit;
}
.acc-adj-x:hover { background: var(--barn-bg); color: var(--barn); }
.acc-adj-summary {
  margin-top: 10px; padding: 10px 14px;
  background: var(--surface-2); border-radius: 10px;
}
.acc-adj-summary .acc-kv { padding: 4px 0; border-bottom: 0; }
.acc-kv-sub { padding-top: 0; padding-left: 14px; border-bottom: 0; font-size: 12.5px; }

.acc-chip-match { background: var(--sage-bg); color: #3F6B32; border-color: transparent; }
.acc-link-btn {
  border: 1px dashed var(--border-2); background: none; color: var(--muted);
  border-radius: 7px; padding: 2px 9px; font-size: 12px; font-family: inherit;
  cursor: pointer;
}
.acc-link-btn:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }

/* ---------- Share bar (sales analysis) ---------- */
.acc-share {
  display: inline-block; vertical-align: middle;
  width: calc(100% - 46px); height: 7px; border-radius: 99px;
  background: var(--surface-2); overflow: hidden;
}
.acc-share > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.acc-share-pct { display: inline-block; width: 42px; text-align: right; vertical-align: middle; }

/* ---------- Timeline ---------- */
.acc-timeline { position: relative; padding-left: 16px; }
.acc-timeline-item { position: relative; padding: 0 0 14px 12px; border-left: 2px solid var(--border); }
.acc-timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.acc-timeline-item::before {
  content: ''; position: absolute; left: -6px; top: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--surface);
}
.acc-timeline-title { font-size: 13px; font-weight: 700; }
.acc-timeline-meta { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

/* ---------- Bar chart ---------- */
.acc-chart { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 8px 2px 0; }
.acc-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.acc-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.acc-chart-bar { width: 15px; border-radius: 4px 4px 0 0; min-height: 2px; }
.acc-chart-bar.in { background: var(--primary); }
.acc-chart-bar.out { background: #DCCEB9; }
.acc-chart-label { font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; color: var(--muted); }
.acc-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); align-items: center; }
.acc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* ---------- Progress bars (spending breakdown) ---------- */
.acc-bar-row { margin-bottom: 12px; }
.acc-bar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.acc-bar-track { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.acc-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; }

/* ---------- Line-item editor ---------- */
.acc-lines { margin-top: 6px; }
.acc-line {
  display: grid; grid-template-columns: minmax(0,2fr) 80px 110px 110px 34px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.acc-line-amount {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13.5px; padding-right: 4px;
}
.acc-line-del {
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  border-radius: 8px; width: 30px; height: 30px; color: var(--muted); font-size: 15px;
  line-height: 1; font-family: inherit;
}
.acc-line-del:hover { color: var(--barn); border-color: var(--barn); }
@media (max-width: 760px) {
  .acc-line { grid-template-columns: 1fr 1fr; }
  .acc-line-amount { text-align: left; }
}

/* ---------- Journal balance checker ---------- */
.acc-balance {
  border-radius: 12px; padding: 14px 16px; margin-top: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.acc-balance.ok { border-color: var(--sage); background: var(--sage-bg); }
.acc-balance.bad { border-color: var(--ochre); background: var(--ochre-bg); }
.acc-balance-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }

/* ---------- Settings: module access grouping ---------- */
.acc-module-group { margin-top: 10px; }
.acc-module-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
  display: flex; align-items: center; gap: 6px;
}
.acc-module-group-label .acc-owner-tag {
  font-size: 9.5px; letter-spacing: .03em; text-transform: none;
  background: var(--gold-bg); color: var(--primary-dark);
  border-radius: 999px; padding: 1px 7px; font-weight: 700;
}
.acc-module-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Print (invoice preview) ---------- */
.acc-print-doc { background: #FFF; color: #1F1714; padding: 40px; border-radius: 14px; border: 1px solid var(--border); }
.acc-print-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.acc-print-title { font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.acc-print-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 26px; }
.acc-print-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
@media print {
  .sidebar, .topbar, .mobile-nav, .acc-head-actions, .acc-noprint { display: none !important; }
  .acc-print-doc { border: 0; padding: 0; }
  .main, .content { padding: 0 !important; }
}

/* ============================================================
   Forms as pages (accOpenForm) — the accounting app no longer uses
   modal overlays for data entry.
   ------------------------------------------------------------ */
.acc-form-page .acc-form-card { max-width: 860px; }
.acc-form-body { display: block; }
.acc-form-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ============================================================
   Bill scan — upload a supplier document and review what was read.
   ------------------------------------------------------------ */
.billscan-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 44px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 14px;
  background: var(--sand-light, #faf8f4);
  transition: border-color .15s, background .15s;
}
.billscan-drop:hover, .billscan-drop.over { border-color: var(--gold, #C99520); background: var(--gold-bg, #fdf8ec); }
.billscan-drop-icon { font-size: 26px; opacity: .55; }
.billscan-picked { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }

.billscan-status {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border); border-left-width: 3px;
  font-size: 13px; font-weight: 600;
}
.billscan-ok   { border-left-color: #6B8E5A; background: #F3F7F1; color: #35563A; }
.billscan-warn { border-left-color: #C99520; background: #FDF6E3; color: #7A5A11; }
.billscan-bad  { border-left-color: #B0432B; background: #FDF0EE; color: #7E2F1E; }

.billscan-lines input.form-input { padding: 7px 9px; font-size: 13px; }
.billscan-totals {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px;
}
.billscan-totals > div { display: flex; gap: 18px; min-width: 300px; justify-content: space-between; }
.billscan-total-stated { font-size: 15px; padding-top: 6px; border-top: 1px solid var(--border); }

.acc-alert {
  padding: 12px 14px; margin-bottom: 16px; border-radius: 10px;
  border: 1px solid var(--border); border-left-width: 3px; font-size: 13.5px; line-height: 1.55;
}
.acc-alert-warn { border-left-color: #C99520; background: #FDF6E3; color: #7A5A11; }
.acc-alert-bad  { border-left-color: #B0432B; background: #FDF0EE; color: #7E2F1E; }

/* Small shared bits the bill-scan page relies on. */
.acc-muted { color: var(--muted); font-size: 12.5px; }
.acc-subhead { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.acc-icon-btn {
  border: 0; background: transparent; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; line-height: 1;
  color: var(--muted); font-size: 18px;
}
.acc-icon-btn:hover { background: #FDE8E8; color: #B0432B; }

/* ============================================================================
   Bank statement import and review
   ============================================================================ */

.acc-alert-ok { border-left-color: #4A7C3F; background: #F1F7EE; color: #34602B; }

/* --- mapping step --- */
.bf-file-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.bf-map-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-top: 14px;
}
.bf-map-field .form-label { display: block; margin-bottom: 4px; }
.bf-summary {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.bf-summary > div { display: flex; flex-direction: column; gap: 2px; }
.bf-summary span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.bf-summary strong { font-size: 15px; }

/* --- review queue --- */
.bf-rows { display: flex; flex-direction: column; }
.bf-row { border-bottom: 1px solid var(--border); padding: 12px 20px; }
.bf-row:last-child { border-bottom: 0; }
.bf-row-open { background: var(--surface-2, #FAFAF8); }
.bf-row-main { display: grid; grid-template-columns: 74px minmax(0, 1.5fr) 130px minmax(0, 1.5fr); gap: 14px; align-items: center; }
.bf-row-date { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.bf-row-desc { min-width: 0; }
.bf-row-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-row-action { min-width: 0; }
.bf-suggest {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; font-size: 12.5px;
}
.bf-suggest-high { background: var(--sage-bg, #F1F7EE); border-color: #CFE3C6; }
.bf-suggest-warn { background: #FDF6E3; border-color: #EBDCB4; }
.bf-suggest-text { flex: 1; min-width: 0; line-height: 1.45; }
.bf-row-links { display: flex; gap: 14px; margin: 8px 0 0 88px; }
.bf-row-panel { margin: 12px 0 4px 88px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #FFF; }
.bf-cands { display: flex; flex-direction: column; gap: 8px; }
.bf-cand {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px;
  gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.bf-cand-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- reconcile worksheet --- */
.acc-recon-bar {
  display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--card, #FFF); border: 1px solid var(--border); border-radius: 12px;
}
.acc-recon-cell { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; min-width: 118px; }
.acc-recon-cell span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.acc-recon-cell strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.acc-recon-statement .form-input { padding: 4px 8px; font-size: 15px; font-weight: 700; max-width: 130px; }
.acc-recon-op { display: flex; align-items: center; color: var(--muted); font-size: 16px; padding: 0 2px; }
.acc-recon-diff {
  margin-left: auto; display: flex; flex-direction: column; gap: 3px;
  padding: 8px 16px; border-radius: 10px; min-width: 150px;
}
.acc-recon-diff span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.acc-recon-diff strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.acc-recon-ok { background: var(--sage-bg, #F1F7EE); color: #34602B; }
.acc-recon-bad { background: #FDF6E3; color: #7A5A11; }

.acc-recon-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.acc-recon-col .acc-card-head { gap: 10px; flex-wrap: wrap; }
.acc-recon-list { max-height: 560px; overflow-y: auto; }
.acc-recon-row {
  display: grid; grid-template-columns: 22px 62px minmax(0, 1fr) auto 110px;
  gap: 10px; align-items: center; padding: 9px 20px;
  border-top: 1px solid var(--border); font-size: 13px; cursor: pointer;
}
.acc-recon-row:hover { background: var(--surface-2, #FAFAF8); }
.acc-recon-row.on { background: var(--sage-bg, #F1F7EE); }
.acc-recon-row input { width: 16px; height: 16px; cursor: pointer; }
.acc-recon-date { color: var(--muted); font-size: 12px; }
.acc-recon-desc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acc-recon-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-recon-fromfeed {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

@media (max-width: 900px) {
  .acc-recon-cols { grid-template-columns: 1fr; }
  .bf-row-main { grid-template-columns: 64px minmax(0, 1fr) 110px; }
  .bf-row-action { grid-column: 1 / -1; }
  .bf-suggest { justify-content: space-between; }
  .bf-row-links, .bf-row-panel { margin-left: 0; }
  .acc-recon-diff { margin-left: 0; width: 100%; }
}

/* ============================================================================
   Contractor invoices — the contractor's page and the approval queue
   ============================================================================ */

.ci-muted { color: var(--muted); font-size: 12.5px; }
.ci-strong { font-weight: 700; }
.ci-alert {
  padding: 12px 14px; margin: 14px 0; border-radius: 10px;
  border: 1px solid var(--border); border-left-width: 3px; font-size: 13.5px; line-height: 1.55;
}
.ci-alert-warn { border-left-color: #C99520; background: #FDF6E3; color: #7A5A11; }
.ci-alert-bad  { border-left-color: #B0432B; background: #FDF0EE; color: #7E2F1E; }
.ci-alert-ok   { border-left-color: #4A7C3F; background: #F1F7EE; color: #34602B; }
.ci-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ci-ok   { background: var(--sage-bg, #F1F7EE); color: #34602B; }
.ci-warn { background: #FDF6E3; color: #7A5A11; }
.ci-bad  { background: #FDF0EE; color: #7E2F1E; }

/* --- contractor's list --- */
.ci-rows { display: flex; flex-direction: column; }
.ci-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 150px 190px auto;
  gap: 16px; align-items: center; padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.ci-row:last-child { border-bottom: 0; }
.ci-row-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ci-row-status { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ci-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ci-row-note {
  grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
}
.ci-note-bad { background: #FDF0EE; color: #7E2F1E; }

.ci-file-strip {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}

/* --- approval: document beside the figures --- */
.ci-review { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ci-doc-frame { width: 100%; height: 640px; border: 0; display: block; background: #F4F2EE; }
.ci-lines-preview { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.ci-line-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 110px;
  gap: 12px; padding: 6px 0; font-size: 13px; align-items: baseline;
}
.ci-line-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ci-history { padding: 4px 20px 12px; }
.ci-history-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 120px) 130px 150px;
  gap: 12px; align-items: center; padding: 8px 0; font-size: 13px;
  border-top: 1px solid var(--border);
}
.ci-history-clash { background: #FDF6E3; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

/* --- the switch on the user editor --- */
.ci-switch { display: flex; gap: 10px; align-items: center; margin-top: 12px; cursor: pointer; font-size: 13.5px; }
.ci-switch input { width: 16px; height: 16px; cursor: pointer; flex: none; }

@media (max-width: 1000px) {
  .ci-review { grid-template-columns: 1fr; }
  .ci-doc-frame { height: 460px; }
}
@media (max-width: 760px) {
  .ci-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ci-row-status, .ci-row-actions { grid-column: 1 / -1; justify-content: flex-start; flex-direction: row; align-items: center; }
  .ci-history-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAID LIVE BANK FEED  (Accounting → Banking → Live feed)
   ═══════════════════════════════════════════════════════════════════════════ */

.plaid-pill {
  flex: none; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; border: 1px solid transparent;
}
.plaid-pill.is-test { background: var(--sand, #EAE0CE); color: var(--gold-dark, #7A5D31); }
.plaid-pill.is-live { background: #E4F0E0; color: #3E6B33; border-color: rgba(62,107,51,.2); }

.plaid-form { display: grid; gap: 12px; max-width: 560px; padding: 4px 0 8px; }
.plaid-hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
.plaid-hint code { font-size: 11.5px; background: var(--sand-2, rgba(234,224,206,.5)); padding: 1px 6px; border-radius: 5px; word-break: break-all; }
.plaid-actions { display: flex; gap: 8px; }

.plaid-conn {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  margin-top: 14px; background: var(--surface);
}
/* A connection needing re-auth is the one state nobody notices on their own —
   the feed just goes quiet — so it gets a colour the eye catches. */
.plaid-conn.is-warn { border-color: rgba(176,67,43,.45); background: rgba(176,67,43,.03); }

.plaid-conn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.plaid-conn-name { font-size: 15px; font-weight: 700; }
.plaid-conn-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.plaid-conn-note { font-size: 12px; color: var(--muted); margin-top: 5px; }
.plaid-conn-note.warn { color: #B0432B; font-weight: 600; }
.plaid-conn-btns { display: flex; gap: 8px; flex: none; }

.plaid-status { font-weight: 700; }
.plaid-status.ok { color: #3E6B33; }
.plaid-status.warn { color: #B0432B; }

.plaid-accts { margin-top: 14px; display: grid; gap: 10px; }
.plaid-acct {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,140px) auto;
  gap: 12px; align-items: end;
  padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg);
}
/* Grid cells default to min-width:auto, so a long official account name would
   overflow its track and paint across the next column. */
.plaid-acct > * { min-width: 0; }
.plaid-acct-id { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.plaid-acct-id strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plaid-acct-id span { font-size: 11.5px; color: var(--muted); }
.plaid-acct-map { display: flex; flex-direction: column; gap: 4px; }
.plaid-acct-map label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.plaid-acct-on { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding-bottom: 9px; }

@media (max-width: 760px) {
  .plaid-acct { grid-template-columns: 1fr 1fr; }
  .plaid-acct-id { grid-column: 1 / -1; }
  .plaid-conn-btns { width: 100%; }
  .plaid-conn-btns .btn, .plaid-conn-btns .btn-primary { flex: 1; }
}

/* ============================================================
   Contact categories (Accounting → Settings). A category and its
   sub-categories read as one block, with a hairline between blocks
   so two adjacent parents never look like a parent and a child.
   ------------------------------------------------------------ */
.acc-cat-group { padding: 8px 0; border-bottom: 1px solid var(--border); }
.acc-cat-group:last-child { border-bottom: none; padding-bottom: 0; }
.acc-cat-group .acc-kv-sub { padding-left: 14px; }