/* ── Finance Dashboard ──────────────────────────────────────────────────────── */
#finance-view {
  padding: 24px;
  min-height: 100%;
  box-sizing: border-box;
}
.fin-wrap { max-width: none; }
.fin-wrap-wide { max-width: none; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.fin-page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.fin-hdr-left { display: flex; flex-direction: column; gap: 3px; }
.fin-hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fin-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
/* min-height reserves a line so switching to a view with no sync meta (Payments,
   Templates) doesn't collapse the header and shift the page up. */
.fin-meta { font-size: 11px; color: var(--text4); min-height: 16px; }
.fin-stale-txt { color: #f59e0b; }
.fin-stale-banner {
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  color: #f59e0b;
  margin-bottom: 16px;
}

/* ── Overview cards ──────────────────────────────────────────────────────── */
.fin-overview-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  .fin-overview-strip { grid-template-columns: repeat(2, 1fr); }
}
.fin-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.fin-card-warn {
  border: 2px solid rgba(245,158,11,.80);
  background-color: var(--bg3);
  background-image: linear-gradient(rgba(245,158,11,.20), rgba(245,158,11,.20));
  box-shadow: 0 2px 14px rgba(245,158,11,.25), 0 1px 4px rgba(0,0,0,.18);
}
.fin-card-warn .fin-card-label { color: rgba(251,191,36,.75); }
.fin-card-warn .fin-card-value { color: #fbbf24; }
.fin-card-warn .fin-card-sub   { color: rgba(251,191,36,.80); }
.fin-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text4);
  margin-bottom: 6px;
}
.fin-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.fin-card-sub { font-size: 11px; color: var(--text4); margin-top: 4px; }

/* ── Delta indicators ──────────────────────────────────────────────────────── */
.fin-delta { font-size: 12px; font-weight: 600; }
.fin-delta-up   { color: #ef4444; }
.fin-delta-down { color: #10b981; }

/* ── Status badges ─────────────────────────────────────────────────────────── */
.fin-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: .02em;
}
.fin-badge-paid     { background: rgba(16,185,129,.2);  color: #10b981; }
.fin-badge-unpaid   { background: rgba(245,158,11,.2);  color: #f59e0b; }
.fin-badge-void     { background: rgba(239,68,68,.18);  color: #ef4444; }
.fin-badge-carried  { background: rgba(59,130,246,.2);  color: #60a5fa; }
.fin-badge-credited { background: rgba(6,182,212,.18);  color: #22d3ee; }
.fin-badge-nothing  { background: var(--bg4);            color: var(--text4); }
.fin-badge-posted   { background: rgba(99,102,241,.2);   color: #a5b4fc; }
.fin-badge-other    { background: var(--bg4);            color: var(--text3); }

/* ── Due date urgency badges ──────────────────────────────────────────────── */
.fin-due-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: .04em;
  vertical-align: middle;
  white-space: nowrap;
  margin-left: 4px;
}
.fin-due-soon-15  { background: rgba(245,158,11,.14); color: #f59e0b; }
.fin-due-soon-8   { background: rgba(245,158,11,.22); color: #f59e0b; }
.fin-due-soon-4   { background: rgba(239,68,68,.16);  color: #f87171; }
.fin-due-tomorrow { background: rgba(239,68,68,.22);  color: #f87171; }
.fin-due-today    { background: rgba(239,68,68,.28);  color: #ef4444; }
.fin-due-past     { background: rgba(239,68,68,.28);  color: #ef4444; }

/* ── Sections ──────────────────────────────────────────────────────────────── */
.fin-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.fin-section-hdr {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border2);
}

/* ── Monthly chart ─────────────────────────────────────────────────────────── */
.fin-chart-wrap { overflow-x: auto; }
.fin-chart { width: 100%; min-width: 360px; height: auto; display: block; }
.fin-chart-bar         { fill: var(--accent); opacity: .55; }
.fin-chart-bar-current { opacity: 1; }
.fin-chart-val { fill: var(--text3); font-size: 9px; text-anchor: middle; font-family: ui-sans-serif,system-ui,sans-serif; }
.fin-chart-lbl { fill: var(--text4); font-size: 9px; text-anchor: middle; font-family: ui-sans-serif,system-ui,sans-serif; }

/* ── Vendor list ───────────────────────────────────────────────────────────── */
.fin-vendor-list { display: flex; flex-direction: column; gap: 8px; }
.fin-vendor-row {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-vendor-hdr    { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin-vendor-name   { font-weight: 700; color: var(--text); font-size: 13px; padding-top: 2px; }
.fin-vendor-totals { display: flex; gap: 20px; flex-shrink: 0; }
.fin-vendor-month  { font-weight: 700; color: var(--text); font-size: 13px; display: flex; flex-direction: column; align-items: flex-end; }
.fin-vendor-ytd    { color: var(--text2); font-size: 12px; display: flex; flex-direction: column; align-items: flex-end; }
.fin-vendor-month em,
.fin-vendor-ytd em { font-style: normal; font-size: 10px; color: var(--text4); font-weight: 400; margin-top: 1px; }
.fin-vendor-bar-wrap { height: 3px; background: var(--bg4); border-radius: 2px; }
.fin-vendor-bar      { height: 3px; background: var(--accent); border-radius: 2px; }
.fin-vendor-clients  { display: flex; flex-direction: column; gap: 5px; }
.fin-vc-row { display: grid; grid-template-columns: 1fr auto 80px; align-items: center; gap: 8px; font-size: 11px; }
.fin-vc-name { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-vc-amt  { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fin-vc-bar-wrap { height: 3px; background: var(--bg4); border-radius: 2px; }
.fin-vc-bar      { height: 3px; background: var(--accent); opacity: .55; border-radius: 2px; }

/* ── Client cards ──────────────────────────────────────────────────────────── */
.fin-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.fin-client-card {
  background: var(--bg3);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  padding: 14px;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.fin-client-card:hover { background: var(--row-hover); transform: translateY(-1px); }
.fin-client-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-client-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-client-month { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.fin-client-bar-wrap { height: 3px; background: var(--bg4); border-radius: 2px; margin-bottom: 8px; }
.fin-client-bar  { height: 3px; border-radius: 2px; }
.fin-client-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-client-meta span { font-size: 10px; color: var(--text4); }

/* ── Invoice history ───────────────────────────────────────────────────────── */
.fin-section-table { padding: 20px 0; }
.fin-section-table .fin-section-hdr { padding: 0 20px 10px; margin-bottom: 0; }
.fin-inv-table-hdr {
  display: grid;
  grid-template-columns: 62px 1fr 120px 105px 115px 140px auto;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  border-bottom: 1px solid var(--border2);
  margin-bottom: 4px;
}
.fin-inv-list { display: flex; flex-direction: column; gap: 2px; }
.fin-inv-row  { border-radius: 6px; overflow: hidden; }
.fin-inv-main {
  display: grid;
  grid-template-columns: 62px 1fr 120px 105px 115px 140px auto;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background .1s;
  border-radius: 6px;
}
.fin-inv-main:hover { background: var(--bg3); }
.fin-inv-no-expand  { cursor: default; }
.fin-inv-no-expand:hover { background: transparent; }
.fin-inv-src-col { display: flex; align-items: center; gap: 6px; }
.fin-bulk-check  { cursor: pointer; }
.fin-bulk-bar    { display: flex; align-items: center; gap: 10px; padding: 8px 20px; margin-bottom: 4px;
                    background: var(--bg3); border-radius: 6px; font-size: 12px; color: var(--text2); }
.fin-bulk-combine-hint { font-size: 11px; color: var(--text4); font-style: italic; }
.fin-combine-inv-list  { margin: 4px 0 12px 18px; font-size: 12px; color: var(--text3); }
.fin-bulk-list   { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.fin-bulk-row    { display: grid; grid-template-columns: 1fr 80px 1fr 120px 100px; gap: 8px; align-items: center;
                    padding: 6px 0; border-bottom: 1px solid var(--border2); font-size: 12px; }
.fin-bulk-row:last-child { border-bottom: none; }
.fin-bulk-row-company { color: var(--text); font-weight: 600; }
.fin-bulk-row-inv      { color: var(--text3); }
.fin-bulk-row-tpl      { color: var(--text3); font-size: 11px; }
.fin-bulk-row-status   { color: var(--text3); font-size: 11px; }
.fin-bulk-status-ok    { color: #22c55e; }
.fin-bulk-status-err   { color: #dc2626; }
.fin-bulk-send-modal   { width: 720px; }
.fin-src-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.fin-src-pax8   { background: rgba(99,102,241,.18);  color: #818cf8; }
.fin-src-at     { background: rgba(6,182,212,.16);   color: #22d3ee; }
.fin-src-manual { background: rgba(251,146,60,.16);  color: #fb923c; }
.fin-inv-date  { font-weight: 600; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.fin-inv-sublbl { font-size: 11px; font-weight: 400; color: var(--text3); }
.fin-inv-due   { color: var(--text3); font-size: 11px; }
.fin-inv-total { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fin-inv-balance { font-variant-numeric: tabular-nums; }
.fin-inv-bal-owed  { color: #f59e0b; font-size: 12px; font-weight: 600; }
.fin-inv-bal-clear { color: var(--text4); font-size: 11px; }
.fin-inv-actions      { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 110px; }
.fin-inv-expand-lbl   { color: var(--text4); font-size: 11px; white-space: nowrap; }
.fin-view-inv-btn {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text3);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.fin-view-inv-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Line items ────────────────────────────────────────────────────────────── */
.fin-inv-items {
  border-top: 1px solid var(--border2);
  background: var(--bg2);
  padding: 12px 16px;
}
.fin-li-group { margin-bottom: 14px; }
.fin-li-group:last-child { margin-bottom: 0; }
.fin-li-group-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text4);
  margin-bottom: 6px;
}
.fin-li-hdr {
  display: grid;
  grid-template-columns: 1fr 2fr 100px 44px 85px 85px 85px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  border-bottom: 1px solid var(--border2);
  margin-bottom: 2px;
}
.fin-li-row {
  display: grid;
  grid-template-columns: 1fr 2fr 100px 44px 85px 85px 85px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text2);
  border-radius: 4px;
}
.fin-li-row:hover { background: var(--bg3); }
.fin-li-client  { font-weight: 600; color: var(--text); }
.fin-li-product { color: var(--text); }
.fin-li-vendor  { display: block; font-size: 10px; color: var(--text4); }
.fin-li-sku     { font-family: ui-monospace,monospace; font-size: 10px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; }
.fin-li-qty, .fin-li-cost, .fin-li-total, .fin-li-amtdue { font-variant-numeric: tabular-nums; }
.fin-li-empty { font-size: 11px; color: var(--text4); padding: 8px; font-style: italic; }

/* ── AT billing item expand rows ───────────────────────────────────────────── */
.fin-at-li-hdr, .fin-at-li-row { display: grid; grid-template-columns: 1fr 60px 110px 110px; gap: 8px; padding: 5px 10px; font-size: 11px; }
.fin-at-li-hdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text4); border-bottom: 1px solid var(--border1); }
.fin-at-li-row { border-bottom: 1px solid var(--border1); color: var(--text3); align-items: center; }
.fin-at-li-row:last-child { border-bottom: none; }
.fin-at-li-qty, .fin-at-li-unit, .fin-at-li-amt { font-variant-numeric: tabular-nums; text-align: right; }
.fin-at-li-amt { font-weight: 600; color: var(--text); }

/* ── States ────────────────────────────────────────────────────────────────── */
.fin-loading, .fin-error, .fin-denied, .fin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text4);
  font-size: 14px;
  gap: 10px;
  text-align: center;
}
.fin-denied-icon { font-size: 36px; }
.fin-empty-state { padding: 60px 20px; text-align: center; color: var(--text4); }
.fin-empty-icon  { font-size: 48px; margin-bottom: 12px; }
.fin-empty-state p { color: var(--text3); font-size: 13px; }

/* ── View tabs ─────────────────────────────────────────────────────────────── */
.fin-view-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.fin-view-tab {
  padding: 4px 14px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.fin-view-tab:hover { background: var(--bg4); color: var(--text); }
.fin-view-tab-active { background: var(--accent); color: #fff !important; }
#fin-sync-btn { min-width: 96px; text-align: center; }
.fin-hdr-btn-hidden { visibility: hidden; pointer-events: none; }

/* ── AT sub-navigation ─────────────────────────────────────────────────────── */
.fin-at-subnav {
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 0 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border2);
}
.fin-at-sub-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.fin-at-sub-tab:hover   { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.fin-at-sub-active      { background: var(--bg3); color: var(--text); border-color: var(--border); }
.fin-at-subnav-badge    { display: inline-flex; align-items: center; justify-content: center;
                           min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
                           background: var(--bg4); color: var(--text3); font-size: 10px; font-weight: 700; }

/* ── Toolbar (search + filter + export) ────────────────────────────────────── */
.fin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fin-search-input {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 12px;
  outline: none;
}
.fin-search-input:focus { border-color: var(--accent); }
.fin-status-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.fin-status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.fin-status-pill:hover { background: var(--bg4); color: var(--text); }
.fin-status-pill.active {
  background: rgba(14,165,233,.14);
  border-color: rgba(14,165,233,.35);
  color: #0ea5e9;
}
.fin-export-btn { white-space: nowrap; flex-shrink: 0; }
.fin-toolbar-meta { margin-bottom: 14px; }
.fin-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Sortable column headers ────────────────────────────────────────────────── */
.fin-sort-hdr {
  cursor: pointer;
  user-select: none;
  transition: color .12s;
  white-space: nowrap;
}
.fin-sort-hdr:hover { color: var(--text); }
.fin-sort-hdr.active { color: var(--accent); }
.fin-sort-neutral { color: var(--border2); font-size: 9px; }

/* ── Pagination controls ────────────────────────────────────────────────── */
.fin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.fin-pager-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.fin-pager-btn:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.fin-pager-btn:disabled {
  opacity: .35;
  cursor: default;
}
.fin-pager-info {
  font-size: 12px;
  color: var(--text3);
  font-weight: 600;
}

/* ── Invoice empty state ────────────────────────────────────────────────────── */
.fin-empty-inv {
  padding: 32px 20px;
  text-align: center;
  color: var(--text4);
  font-size: 13px;
  font-style: italic;
}

/* ── AT notice (combined view when AT not synced) ───────────────────────────── */
.fin-at-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(59,130,246,.07);
  border: 1px solid rgba(59,130,246,.20);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 20px;
}
.fin-at-notice-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.10);
  color: #3b82f6;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.fin-at-notice-btn:hover { background: rgba(59,130,246,.18); }

/* ── AT contracts table ─────────────────────────────────────────────────────── */
.fin-contract-hdr {
  display: grid;
  grid-template-columns: 2fr 1fr 110px 200px 90px;
  padding: 6px 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  border-bottom: 1px solid var(--border2);
  margin-bottom: 4px;
}
.fin-contract-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.fin-contract-row {
  display: grid;
  grid-template-columns: 2fr 1fr 110px 200px 90px;
  align-items: center;
  padding: 9px 12px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--text2);
}
.fin-contract-row:hover { background: var(--bg3); }
.fin-contract-name  { font-weight: 600; color: var(--text); }
.fin-contract-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.fin-contract-dates { font-size: 11px; color: var(--text3); }

/* ── AT billing items ──────────────────────────────────────────────────────── */
.fin-at-items-list { display: flex; flex-direction: column; gap: 12px; padding: 0 8px 8px; }
.fin-at-client-group { border: 1px solid var(--border1); border-radius: 8px; overflow: hidden; }
.fin-at-client-hdr { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,.05); }
.fin-at-client-name { font-weight: 700; font-size: 13px; color: var(--text); }
.fin-at-client-total { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.fin-at-item-hdr { display: grid; grid-template-columns: 90px 90px 1fr 110px 120px; gap: 8px; padding: 6px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text4); border-bottom: 1px solid var(--border1); background: rgba(255,255,255,.02); }
.fin-at-item-row { display: grid; grid-template-columns: 90px 90px 1fr 110px 120px; gap: 8px; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--border1); align-items: center; color: var(--text2); }
.fin-at-item-row:last-child { border-bottom: none; }
.fin-at-item-row:hover { background: rgba(255,255,255,.03); }
.fin-at-item-nb { opacity: .5; }
.fin-at-item-type { color: var(--text4); font-size: 11px; }
.fin-at-item-date { color: var(--text3); font-size: 11px; }
.fin-at-item-desc { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-at-item-amt { font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.fin-at-nb-badge { font-size: 10px; color: var(--text4); font-style: italic; }
.fin-at-nb-btn { font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border2); background: transparent; color: var(--text3); cursor: pointer; white-space: nowrap; }
.fin-at-nb-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }

/* ── AT Approve & Post summary ─────────────────────────────────────────────── */
.fin-at-approve-notice { font-size: 12px; color: var(--text4); padding: 8px 12px 4px; }
.fin-at-approve-hdr { display: grid; grid-template-columns: 1fr 150px 150px 140px; gap: 8px; padding: 6px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text4); border-bottom: 1px solid var(--border1); }
.fin-at-approve-list { display: flex; flex-direction: column; }
.fin-at-approve-row { display: grid; grid-template-columns: 1fr 150px 150px 140px; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border1); align-items: center; }
.fin-at-approve-row:last-child { border-bottom: none; }
.fin-at-approve-client { font-weight: 600; color: var(--text); }
.fin-at-approve-billable { font-weight: 700; color: #34d399; font-variant-numeric: tabular-nums; }
.fin-at-approve-billable em, .fin-at-approve-nb em { display: block; font-size: 10px; font-weight: 400; font-style: normal; color: var(--text4); }
.fin-at-approve-nb { color: var(--text3); font-variant-numeric: tabular-nums; }
.fin-at-open-btn { font-size: 11px; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--border2); background: transparent; color: var(--text2); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.fin-at-open-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }

/* ── Finance nav pill ──────────────────────────────────────────────────────── */
.fin-nav-pill {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
  color: #10b981;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.fin-nav-pill:hover {
  background: rgba(16,185,129,.20);
  border-color: rgba(16,185,129,.40);
}
body.nrt-tab-finance .fin-nav-pill {
  background: rgba(16,185,129,.24);
  border-color: rgba(16,185,129,.50);
}

/* ── Invoice date cell sub-labels ──────────────────────────────────────── */
/* .fin-inv-date flex layout defined with the grid above */
.fin-inv-client-lbl {
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-inv-source-pax8 {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent1);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── AT billing item group collapsible ─────────────────────────────────── */
.fin-at-client-hdr { cursor: pointer; user-select: none; gap: 10px; }
.fin-at-client-hdr:hover { background: rgba(255,255,255,.08); }
.fin-at-client-toggle {
  font-size: 10px;
  color: var(--text4);
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}

/* ── AT revenue by client table ────────────────────────────────────────── */
.fin-at-rev-hdr {
  display: grid;
  grid-template-columns: 1fr 130px 130px 80px;
  gap: 8px;
  padding: 6px 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  border-bottom: 1px solid var(--border1);
}
/* Accounts Receivable aging table */
.fin-ar-sub     { font-size: 11px; color: var(--text4); padding: 0 20px 10px; }
.fin-ar-empty   { font-size: 12px; color: var(--text3); padding: 0 20px 8px; font-style: italic; }
.fin-ar-scroll  { overflow-x: auto; padding: 0 20px; }
.fin-ar-table   { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 620px; }
.fin-ar-table th { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text4);
                   font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.fin-ar-table td { padding: 6px 10px; border-bottom: 1px solid var(--border2); }
.fin-ar-client  { text-align: left; color: var(--text); }
.fin-ar-amt     { text-align: right; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-ar-total   { font-weight: 700; color: var(--text); }
.fin-ar-overdue { color: var(--danger); font-weight: 600; }
.fin-ar-grand td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; padding-top: 8px; color: var(--text); }

.fin-at-rev-list { display: flex; flex-direction: column; }
.fin-at-rev-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px 80px;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--border1);
  align-items: center;
  color: var(--text2);
  transition: background .1s;
}
.fin-at-rev-row:last-child { border-bottom: none; }
.fin-at-rev-row:hover { background: var(--bg3); }
.fin-at-rev-client { font-weight: 600; color: var(--text); }
.fin-at-rev-month, .fin-at-rev-ytd { font-variant-numeric: tabular-nums; }
.fin-at-rev-inv { font-size: 11px; color: var(--text4); }

/* ── Monthly P&L table ────────────────────────────────────────────────── */
.fin-mg-hdr {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 1fr 70px;
  gap: 8px;
  padding: 6px 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  border-bottom: 1px solid var(--border1);
}
.fin-mg-list { display: flex; flex-direction: column; }
.fin-mg-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 1fr 70px;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--border1);
  align-items: center;
  color: var(--text2);
  transition: background .1s;
}
.fin-mg-row:last-child { border-bottom: none; }
.fin-mg-row:hover { background: var(--bg3); }
.fin-mg-month { font-weight: 600; color: var(--text); }
.fin-mg-at, .fin-mg-pax8, .fin-mg-margin, .fin-mg-pct { font-variant-numeric: tabular-nums; }
.fin-mg-pos { color: #4ade80; font-weight: 600; }
.fin-mg-neg { color: #f87171; font-weight: 600; }
.fin-mg-pct { color: var(--text3); }

/* ── Collapsible section headers ──────────────────────────────────────── */
.fin-hdr-collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fin-hdr-collapsible:hover { opacity: .8; }
.fin-section-chevron {
  font-size: 9px;
  color: var(--text4);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Manual invoice source badge ──────────────────────────────────────── */
.fin-inv-source-manual {
  font-size: 10px;
  font-weight: 600;
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Manual invoice edit/delete buttons in invoice row ───────────────── */
.fin-edit-inv-btn,
.fin-del-inv-btn {
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background .1s;
  color: var(--text3);
}
.fin-edit-inv-btn:hover { background: var(--bg3); color: var(--accent1); }
.fin-del-inv-btn:hover  { background: var(--bg3); color: #f87171; }

/* ── Manual invoice modal ─────────────────────────────────────────────── */
.fin-manual-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fin-manual-dialog {
  background: var(--bg2);
  border: 1px solid var(--border1);
  border-radius: 10px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.fin-manual-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
}
.fin-manual-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .1s;
}
.fin-manual-close:hover { background: var(--bg3); color: var(--text); }
.fin-manual-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fin-manual-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 6px;
}
.fin-manual-lbl:first-child { margin-top: 0; }
.fin-req { color: #f87171; }
.fin-manual-inp {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--border1);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.fin-manual-inp:focus { border-color: var(--accent1); }
select.fin-manual-inp { appearance: auto; }
.fin-manual-ta {
  resize: vertical;
  min-height: 60px;
}
.fin-manual-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fin-manual-ftr {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border1);
  flex-shrink: 0;
}

/* ── CSV import modal ─────────────────────────────────────────────────── */
.fin-csv-dialog { max-width: 580px; }
.fin-csv-drop {
  border: 2px dashed var(--border1);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--text3);
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.fin-csv-drop:hover { border-color: var(--accent1); background: rgba(var(--accent1-rgb, 99,102,241),.06); }
.fin-csv-drop-icon { font-size: 28px; margin-bottom: 6px; color: var(--text4); }
.fin-csv-link { color: var(--accent1); text-decoration: underline; cursor: pointer; }
.fin-csv-or {
  text-align: center;
  font-size: 11px;
  color: var(--text4);
  margin: 10px 0 6px;
}
.fin-csv-ta { min-height: 120px; font-family: monospace; font-size: 12px; }
.fin-csv-err {
  font-size: 12px;
  color: #f87171;
  margin-top: 4px;
}
.fin-csv-section-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text4);
  margin-bottom: 8px;
}
.fin-csv-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.fin-csv-map-row { display: flex; flex-direction: column; gap: 3px; }
.fin-csv-map-lbl { font-size: 11px; font-weight: 600; color: var(--text3); }
.fin-csv-info-bar {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.fin-csv-info-ok   { background: rgba(74,222,128,.1); color: #4ade80; }
.fin-csv-info-warn { background: rgba(251,146,60,.1);  color: #fb923c; }
.fin-csv-preview-wrap {
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border1);
  border-radius: 6px;
}
.fin-csv-preview-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fin-csv-preview-tbl th {
  position: sticky;
  top: 0;
  background: var(--bg3);
  padding: 6px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  border-bottom: 1px solid var(--border1);
}
.fin-csv-preview-tbl td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border1);
  color: var(--text2);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-csv-preview-tbl tbody tr:last-child td { border-bottom: none; }
.fin-csv-row-err td { background: rgba(248,113,113,.08); color: var(--text3); }
.fin-csv-err-cell { color: #f87171; font-size: 11px; }

/* ── PAYMENTS VIEW ─────────────────────────────────────────── */
.pay-view         { padding: 16px; }
.pay-toolbar      { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pay-view-title   { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.pay-toolbar-right { display: flex; gap: 8px; }

.pay-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.pay-left   { min-width: 0; }
.pay-right  { min-width: 0; }

/* Calendar */
.pay-cal-wrap  { background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.pay-cal-nav   { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border2); }
.pay-cal-nav-btn { padding: 2px 10px; font-size: 15px; }
.pay-cal-title { font-weight: 600; font-size: 14px; color: var(--text); }
.pay-cal-grid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border2); }
.pay-cal-dow   { background: var(--bg3); padding: 6px 4px; text-align: center; font-size: 10px; font-weight: 600; color: var(--text4); text-transform: uppercase; }
.pay-cal-cell  { background: var(--bg3); min-height: 58px; padding: 3px; vertical-align: top; }
.pay-cal-empty { background: rgba(0,0,0,.12); }
.pay-cal-day-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 11px; color: var(--text4); margin-bottom: 2px; font-weight: 500; }
.pay-cal-today .pay-cal-day-num { background: var(--accent); color: #fff; border-radius: 50%; font-weight: 700; }
.pay-dot-row   { display: flex; justify-content: space-between; align-items: center; padding: 1px 3px; border-radius: 3px; margin-bottom: 2px; }
.pay-dot-vendor { font-size: 9px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.pay-dot-amt   { font-size: 9px; color: var(--text); font-weight: 700; flex-shrink: 0; }

/* Pax8 info row */
.pay-pax8-row   { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 12px; }
.pay-pax8-label { color: var(--text4); }
.pay-pax8-val   { color: var(--text); font-weight: 600; }
.pay-pax8-sep   { color: var(--border2); }

/* Entries list */
.pay-entries-hdr  { font-size: 11px; font-weight: 600; color: var(--text4); text-transform: uppercase; letter-spacing: .06em; padding: 10px 0 6px; }
.pay-entries-list { display: flex; flex-direction: column; gap: 6px; }
.pay-entry-row    { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 10px; }
.pay-entry-color  { width: 8px; height: 30px; border-radius: 3px; flex-shrink: 0; }
.pay-entry-info   { flex: 1; min-width: 0; }
.pay-entry-vendor { font-size: 13px; font-weight: 600; color: var(--text); }
.pay-entry-recur  { font-size: 11px; color: var(--text4); margin-top: 1px; }
.pay-entry-amt    { font-size: 13px; font-weight: 700; color: var(--text); }
.pay-entry-edit-btn { font-size: 11px; padding: 3px 8px; }

/* Upcoming list */
.pay-upcoming-hdr  { font-size: 11px; font-weight: 600; color: var(--text4); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0 10px; }
.pay-upcoming-list { display: flex; flex-direction: column; gap: 8px; }
.pay-upcoming-item { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 10px 12px; }
.pay-upcoming-color  { width: 8px; height: 36px; border-radius: 3px; flex-shrink: 0; }
.pay-upcoming-info   { flex: 1; min-width: 0; }
.pay-upcoming-vendor { font-size: 13px; font-weight: 600; color: var(--text); }
.pay-upcoming-date   { font-size: 11px; color: var(--text4); margin-top: 2px; }
.pay-upcoming-amt    { font-size: 14px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.pay-upcoming-empty  { font-size: 13px; color: var(--text4); padding: 12px 0; }

/* Payment modal */
.pay-modal      { max-width: 440px; }
.pay-swatches   { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 10px; }
.pay-swatch     { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; box-sizing: border-box; transition: border-color .15s; }
.pay-swatch-active { border-color: var(--text); }
.pay-delete-btn    { color: #f87171; margin-right: auto; }
.pay-settings-hint { font-size: 12px; color: var(--text4); margin: 0 0 8px; }

/* ── Templates view ─────────────────────────────────────────────────────── */
.fin-tpl-view            { padding: 20px; display: flex; flex-direction: column; gap: 32px; }
.fin-tpl-section         { display: flex; flex-direction: column; gap: 12px; }
.fin-tpl-section-hdr     { display: flex; align-items: center; justify-content: space-between; }
.fin-tpl-section-hdr h3  { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.fin-tpl-section-actions { display: flex; align-items: center; gap: 8px; }
.fin-tpl-new-btn         { font-size: 12px; }
/* Responsive card grid rather than full-width stacked rows -- keeps each template a
   compact card (name on top, actions below) so the list doesn't stretch edge-to-edge. */
.fin-tpl-cards           { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fin-tpl-card            { display: flex; flex-direction: column; gap: 10px;
                            padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
                            background: var(--bg2); }
.fin-tpl-card-default    { border-color: var(--accent); }
.fin-tpl-card-name       { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center;
                            gap: 8px; flex-wrap: wrap; }
.fin-tpl-default-badge   { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
                            background: var(--accent); color: #fff; }
.fin-tpl-card-actions    { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.fin-tpl-action          { font-size: 11px; padding: 3px 10px; }
.fin-tpl-delete          { color: var(--red, #dc2626); }
.fin-empty-txt           { color: var(--text3); font-size: 13px; margin: 0; }
.fin-tpl-assign-row      { display: flex; align-items: center; gap: 10px; padding: 8px 0;
                            border-bottom: 1px solid var(--border2); font-size: 12px; }
.fin-tpl-assign-row:last-child { border-bottom: none; }
.fin-tpl-assign-client   { font-weight: 600; color: var(--text); min-width: 140px; }
.fin-tpl-assign-detail   { color: var(--text3); flex: 1; }
.fin-tpl-assign-new      { gap: 8px; }
.fin-tpl-assign-new .fin-send-select { width: auto; flex: 1; }

/* ── Invoice builder layout ─────────────────────────────────────────────────── */
/* Near-full-screen overlay: starts below the 56px app header (z-index 2500) so the ribbon
   is never hidden behind the top nav, and covers the left tab sidebar (z-index 600) for
   maximum canvas width. Sits below modals (z-index 1000) so Test Send still layers on top.
   A separate browser tab isn't viable -- the builder is bound to the finance module's
   in-memory state. Cancel/Save in the ribbon return to the finance tab. */
.fin-bldr-wrap         { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 650;
                         display: flex; flex-direction: column; background: var(--bg); }
.fin-bldr-breadcrumb   { padding: 12px 20px; font-size: 12px; color: var(--text3); border-bottom: 1px solid var(--border2); }

/* Global settings */
.fin-bldr-global       { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border2); }
.fin-bldr-lineitems-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
                               padding-bottom: 16px; border-bottom: 1px solid var(--border2); }
.fin-bldr-section-hdr        { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; }
.fin-bldr-subhdr             { font-size: 10px; font-weight: 700; color: var(--text4); text-transform: uppercase; margin-top: 6px; }

/* Line-item column editor: one card per column, controls stacked so nothing is squished. */
.fin-licol-list        { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fin-licol-card        { border: 1px solid var(--border2); border-radius: 7px; background: var(--bg3); padding: 8px; }
.fin-licol-card:hover  { border-color: var(--border); }
.fin-licol-top         { display: flex; align-items: center; gap: 6px; }
.fin-licol-grip        { cursor: grab; color: var(--text4); font-size: 11px; letter-spacing: -3px; }
.fin-licol-show        { display: flex; align-items: center; flex: 0 0 auto; }
.fin-licol-label       { flex: 1; min-width: 0; font-weight: 600; }
.fin-licol-del         { background: none; border: none; color: var(--text4); cursor: pointer; font-size: 17px;
                         line-height: 1; padding: 0 4px; flex: 0 0 auto; }
.fin-licol-del:hover   { color: var(--danger); }
.fin-licol-row         { display: flex; gap: 6px; margin-top: 6px; }
.fin-licol-fld         { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
                         font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text4); }
.fin-licol-fld-grow    { flex: 2; }
.fin-licol-fld-check   { flex: 0 0 auto; align-items: flex-start; }
.fin-licol-fld-check input { width: auto; box-sizing: content-box; margin: 3px 0 0; padding: 0; }
.fin-licol-fld input,
.fin-licol-fld select,
.fin-licol-fld textarea { width: 100%; max-width: none; box-sizing: border-box; font-size: 11px; text-transform: none;
                         font-weight: 400; letter-spacing: normal; padding: 4px 5px; border: 1px solid var(--border);
                         border-radius: 4px; background: var(--bg2); color: var(--text); }
.fin-licol-value       { font-family: ui-monospace, monospace; line-height: 1.4; resize: vertical; min-height: 40px; }
.fin-licol-value:focus { outline: none; border-color: var(--accent); }
.fin-licol-empty       { border: 1px dashed var(--border); border-radius: 7px; background: var(--bg2);
                         padding: 16px 12px; text-align: center; font-size: 12px; line-height: 1.5;
                         color: var(--text4); font-style: italic; }
.fin-licol-add         { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fin-licol-readd       { border-style: dashed; }
/* Column header row above the list -- labels each control (Show / Column / Width / Align)
   so the compact per-column controls are self-explanatory. Cell widths mirror the row's
   controls so the labels line up over them. */
.fin-li-col-head       { display: flex; align-items: center; gap: 6px; padding: 0 2px 3px; font-size: 10px;
                         font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text4); }
.fin-li-col-head-show  { width: 42px; flex: 0 0 auto; }
.fin-li-col-head-col   { flex: 1; min-width: 0; }
.fin-li-col-head-w     { width: 56px; flex: 0 0 auto; }
.fin-li-col-head-align { width: 68px; flex: 0 0 auto; }
.fin-li-col-list     { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.fin-li-col-row      { display: flex; align-items: center; gap: 6px; }
.fin-li-col-handle   { cursor: grab; color: var(--text4); }
.fin-li-col-label    { flex: 1; min-width: 0; }
/* Built-in column names live in a disabled input -- keep them clearly readable, not greyed. */
.fin-li-col-label:disabled { color: var(--text2); -webkit-text-fill-color: var(--text2); opacity: 1; cursor: default; }
/* Built-in column name shown as plain text (not a disabled input that reads as empty). */
.fin-li-col-name     { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text);
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-li-col-builtin  { font-size: 10px; color: var(--text4); text-transform: uppercase; white-space: nowrap; }
.fin-li-col-align    { width: 68px; flex: 0 0 auto; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px;
                        background: var(--bg3); color: var(--text); font-size: 11px; box-sizing: border-box; }
.fin-li-col-bind     { flex: 0 0 auto; max-width: 116px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px;
                        background: var(--bg3); color: var(--text); font-size: 11px; box-sizing: border-box; }
/* Row layout (label left, control right) rather than stacked -- far more compact for the
   many single-control modifiers in the inspector. Wraps when a field's content is wide
   (a placeholder-token bar, a textarea) so those still lay out sensibly. */
.fin-bldr-field        { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fin-bldr-field > label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; margin: 0; flex: 1 1 auto; }
.fin-bldr-field .fin-bldr-input { width: 120px; flex: 0 0 auto; }
.fin-bldr-field .fin-ph-bar,
.fin-bldr-field textarea,
.fin-bldr-field .fin-bldr-textarea { flex: 1 1 100%; }
.fin-bldr-input        { padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px;
                          background: var(--bg3); color: var(--text); font-size: 13px; width: 100%; box-sizing: border-box; }
.fin-bldr-radio-group  { display: flex; gap: 12px; }
.fin-bldr-radio        { font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.fin-bldr-chk          { font-size: 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; }

.fin-bldr-textarea     { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border);
                          border-radius: 5px; background: var(--bg3); color: var(--text); font-size: 12px;
                          font-family: inherit; resize: vertical; }

/* Placeholder bar */
.fin-ph-bar            { display: flex; flex-wrap: wrap; gap: 4px; }
.fin-ph-group          { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fin-ph-group-lbl      { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                          color: var(--text4); min-width: 52px; }
.fin-ph-btn            { font-size: 10px; padding: 2px 6px; border: 1px solid var(--border2);
                          border-radius: 4px; background: var(--bg3); color: var(--accent);
                          cursor: pointer; font-family: monospace; }
.fin-ph-btn:hover      { background: var(--bg4); }
/* Field picker (browse all Autotask fields) */
.fin-fieldpick          { margin: 4px 0 8px; border: 1px solid var(--border2); border-radius: 6px; background: var(--bg3); }
.fin-fieldpick-sum      { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text2); padding: 6px 10px; user-select: none; }
.fin-fieldpick-sum:hover { color: var(--text); }
.fin-fieldpick-search   { margin: 4px 8px; width: calc(100% - 16px); box-sizing: border-box; font-size: 11px; }
.fin-fieldpick-list     { max-height: 220px; overflow-y: auto; padding: 4px 8px 8px; }
.fin-fieldpick-group    { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fin-fieldpick-grouplbl { flex: 1 1 100%; font-size: 9px; font-weight: 700; text-transform: uppercase;
                          letter-spacing: .04em; color: var(--text4); }
.fin-fieldpick-empty    { font-size: 11px; color: var(--text4); font-style: italic; padding: 4px 8px 8px; }

/* Persistent draggable field palette (left panel) + drag-onto-canvas drop states */
.fin-bldr-fields        { margin-bottom: 14px; border: 1px solid var(--border2); border-radius: 7px; background: var(--bg3);
                          position: sticky; top: -16px; z-index: 3; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.fin-bldr-fields-sum    { cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                          color: var(--text3); padding: 8px 10px; user-select: none; }
.fin-bldr-fields-sum:hover { color: var(--text); }
.fin-bldr-fields-body   { max-height: 210px; overflow-y: auto; padding: 4px 10px 10px; }
.fin-field-chip         { cursor: grab; }
.fin-field-chip:active  { cursor: grabbing; }
.fin-canvas-el-dragover { outline: 2px dashed var(--accent) !important; outline-offset: 2px; }
.fin-canvas-li-dragover { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Footer */
.fin-bldr-sticky-actions { margin-top: auto; position: sticky; bottom: 0; background: var(--bg2); z-index: 2; }
.fin-bldr-footer          { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px;
                             border-top: 1px solid var(--border2); }
.fin-bldr-preview-row   { display: flex; gap: 8px; align-items: center; padding-top: 12px; flex-wrap: wrap; }
.fin-preview-select     { flex: 1; min-width: 0; }
.fin-preview-invnum     { width: 92px; flex: 0 0 auto; }
.fin-preview-load-btn   { font-size: 11px; padding: 3px 10px; }
.fin-sample-count-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); white-space: nowrap; }
.fin-sample-count-label input { width: 52px; }
.fin-bldr-margin-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.fin-bldr-margin-lbl    { font-size: 11px; color: var(--text3); display: flex; flex-direction: column; gap: 2px; }

/* Shared with email template editor preview pane */
.fin-bldr-preview-label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; margin-bottom: 8px; }

/* ── Canvas editor ───────────────────────────────────────────────────────────── */
.fin-canvas-body        { display: grid; grid-template-columns: 360px 1fr 250px; flex: 1; overflow: hidden; }
@media (max-width: 1200px) { .fin-canvas-body { grid-template-columns: 320px 1fr 230px; } }
.fin-canvas-left         { display: flex; flex-direction: column; border-right: 1px solid var(--border2);
                            overflow-y: auto; padding: 16px; }
.fin-canvas-right        { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg3);
                            display: flex; justify-content: center; align-items: flex-start; }
.fin-canvas-inspector-col { border-left: 1px solid var(--border2); overflow-y: auto; padding: 16px; }
.fin-canvas-page         { width: 816px; max-width: 100%; flex: 0 0 auto; box-sizing: border-box;
                            background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px;
                            box-shadow: 0 2px 10px rgba(0,0,0,.25); position: relative; }
.fin-canvas-page-margin  { outline: 1px dashed rgba(148,163,184,.35); outline-offset: 4px; }
.fin-canvas-page-breaks  { position: absolute; inset: 0; pointer-events: none; }
.fin-canvas-page-break   { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #f59e0b; }
.fin-canvas-zone-label   { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase;
                            margin: 14px 0 6px; display: flex; align-items: center; justify-content: space-between; }
.fin-canvas-static-note  { font-size: 10px; font-weight: 400; text-transform: none; color: var(--text4); }
.fin-canvas-static-preview { background: var(--bg3); border: 1px dashed var(--border2); border-radius: 6px;
                              padding: 10px; font-size: 11px; color: var(--text3); text-align: center; }
.fin-canvas-zone         { background: #0f172a; border: 1px solid var(--border2); border-radius: 8px;
                            position: relative; overflow: hidden; }
.fin-canvas-zone-inner   { user-select: none; }
.fin-canvas-el           { cursor: move; border: 1px solid transparent; border-radius: 3px; }
.fin-canvas-el:hover     { border-color: rgba(59,130,246,.4); }
.fin-canvas-el-selected  { border-color: #3b82f6 !important; box-shadow: 0 0 0 1px #3b82f6; }
/* Snap-to-grid overlay. The 8px step must match _FIN_GRID in js/finance.js. */
.fin-canvas-grid-on .fin-canvas-zone-inner {
  background-image: linear-gradient(to right, rgba(148,163,184,.14) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(148,163,184,.14) 1px, transparent 1px);
  background-size: 8px 8px;
}
/* Members of a shift-click multi-selection: dashed indigo outline, no resize handles. */
.fin-canvas-el-multi     { outline: 1.5px dashed #6366f1; outline-offset: 1px; box-shadow: 0 0 0 1px rgba(99,102,241,.35); }

/* Layers panel (builder left column) */
.fin-bldr-layers-section { margin-top: 14px; }
.fin-bldr-hint           { font-size: 10px; color: var(--text4); margin: 2px 0 6px; line-height: 1.4; }
.fin-layers-zone         { margin-bottom: 8px; }
.fin-layers-zone-hdr     { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
                           color: var(--text4); padding: 4px 0 2px; }
.fin-layers-empty        { font-size: 11px; color: var(--text4); font-style: italic; padding: 2px 0 4px; }
.fin-layer-row           { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid transparent;
                           border-radius: 5px; cursor: pointer; font-size: 12px; color: var(--text2); }
.fin-layer-row:hover     { background: var(--bg3); }
.fin-layer-row-sel       { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.4); color: var(--text); }
.fin-layer-row-multi     { border-color: rgba(99,102,241,.5); }
.fin-layer-grip          { color: var(--text4); cursor: grab; font-size: 11px; letter-spacing: -3px; padding-right: 2px; }
.fin-layer-label         { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-layer-lock          { background: none; border: none; cursor: pointer; font-size: 12px; line-height: 1;
                           padding: 0 2px; opacity: .5; }
.fin-layer-lock:hover    { opacity: 1; }
.fin-layer-lock-on       { opacity: 1; }
.fin-canvas-show-all-borders .fin-canvas-el { border-color: rgba(148,163,184,.5); }
.fin-pill-toggle         { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
                            border: 1px solid var(--border2); background: var(--bg3); color: var(--text3);
                            font-size: 11px; font-weight: 600; cursor: pointer; }
.fin-pill-toggle:hover   { background: var(--bg4); color: var(--text); }
.fin-pill-toggle-active  { background: var(--accent); color: #fff; border-color: var(--accent); }
.fin-canvas-inspector    { padding-top: 8px; }
.fin-insp-grid           { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fin-table-hover-btn    { display: none; position: absolute; width: 16px; height: 16px; border-radius: 3px;
                           background: #4f46e5; color: #fff; font-size: 12px; line-height: 16px; text-align: center;
                           cursor: pointer; z-index: 2; }
.fin-table-col-ctrl-row td.fin-table-col-ctrl { position: relative; height: 14px; border: none; padding: 0; }
.fin-table-col-ctrl:hover .fin-table-ins { display: flex; top: -2px; left: 50%; margin-left: -8px; }
.fin-table-col-ctrl:hover .fin-table-del { display: flex; top: -2px; right: 2px; left: auto; margin-left: 0; }
.fin-table-row-editable td, .fin-table-row-editable th { position: relative; }
.fin-table-row-editable:hover .fin-table-row-del { display: flex; }
.fin-table-row-del      { top: 2px; right: 2px; }
.fin-table-row-ins-strip td { border: none; padding: 0; height: 8px; position: relative; }
.fin-table-row-ins-strip:hover .fin-table-ins { display: flex; top: -6px; left: 50%; margin-left: -8px; }
/* Content-height (not height:100%) so the cell's own vertical-align positions the
   textarea within a taller/resized row -- height:100% would always fill the cell and
   defeat top/middle/bottom vertical alignment. The textarea grows with its content and
   wraps, so long text is never clipped; the cell's explicit height acts as a minimum. */
.fin-table-cell-inline  { display: block; width: 100%; height: auto; min-height: 1.4em; border: none; background: transparent;
                           color: inherit; font: inherit; resize: none; padding: 0; margin: 0;
                           white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; }
.fin-table-cell-inline:focus { outline: 1px solid #4f46e5; outline-offset: 1px; }
/* Active (last-clicked) cell -- shows which cell the inspector's per-cell controls target. */
.fin-table-cell-active { box-shadow: inset 0 0 0 2px #4f46e5; }
/* Cells in an Excel-style multi-cell selection (shift-click a second cell to extend). */
.fin-table-cell-range  { box-shadow: inset 0 0 0 1000px rgba(79,70,229,.16); }
.fin-table-cell-range.fin-table-cell-active { box-shadow: inset 0 0 0 1000px rgba(79,70,229,.16), inset 0 0 0 2px #4f46e5; }
/* Alignment button group in the inspector's Selected Cell section. */
.fin-align-group { display: inline-flex; gap: 2px; }
.fin-align-btn   { min-width: 26px; height: 24px; padding: 0 4px; border: 1px solid #334155; background: #1e293b;
                   color: #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1; }
.fin-align-btn:hover  { background: #334155; }
.fin-align-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
/* Sit fully inside the cell's own box rather than straddling its boundary -- a resize
   handle that protrudes past the cell overlaps the next row's insert strip / the next
   column's cell, and real mouse clicks in that shared sliver can land on either one
   inconsistently depending on exact cursor position. */
.fin-table-col-resize   { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 3; }
.fin-table-col-resize:hover { background: rgba(79,70,229,.4); }
.fin-table-row-resize   { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; cursor: row-resize; z-index: 3; }
.fin-table-row-resize:hover { background: rgba(79,70,229,.4); }

/* ── Builder right-click context menu (mirrors .tk-ctx-menu conventions) ─────── */
.fin-ctx-menu { position: fixed; z-index: 9000; background: var(--bg2); border: 1px solid var(--border);
                border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.3); min-width: 200px; padding: 4px 0;
                font-size: 13px; user-select: none; }
.fin-ctx-item { padding: 7px 14px; cursor: pointer; color: var(--text); white-space: nowrap; position: relative; }
.fin-ctx-item:hover { background: var(--bg3); }
.fin-ctx-sep { height: 1px; background: var(--border); margin: 3px 0; }
.fin-ctx-has-sub { padding-right: 26px; }
.fin-ctx-has-sub::after { content: '\25B6'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                          font-size: 9px; color: var(--text4); }
.fin-ctx-sub { display: none; position: absolute; left: 100%; top: -4px; background: var(--bg2);
               border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.3);
               min-width: 150px; padding: 4px 0; z-index: 9001; }
.fin-ctx-has-sub:hover .fin-ctx-sub { display: block; }

/* ── Floating format toolbar (Word/Excel-style bubble) ──────────────────────── */
/* Top ribbon (Excel/Word-style) -- fixed toolbar under the breadcrumb. */
.fin-bldr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px;
                    border-bottom: 1px solid var(--border2); background: var(--bg2); }
.fin-bldr-tb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-bldr-tb-sep   { width: 1px; align-self: stretch; min-height: 24px; background: var(--border); margin: 0 2px; }
.fin-bldr-tb-spacer { flex: 1 1 auto; }
.fin-ribbon-cell   { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 28px; }
.fin-ribbon-hint   { font-size: 12px; color: var(--text3); font-style: italic; }
.fin-fmt-btn { min-width: 26px; height: 26px; padding: 0 5px; border: 1px solid transparent; background: transparent;
               color: var(--text); border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1;
               display: inline-flex; align-items: center; justify-content: center; }
.fin-fmt-btn:hover  { background: var(--bg3); }
.fin-fmt-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.fin-fmt-btn:disabled { opacity: .35; cursor: default; }
.fin-fmt-btn:disabled:hover { background: transparent; }
.fin-fmt-btn-txt    { width: auto; min-width: 0; font-size: 12px; padding: 0 8px; border-color: var(--border); }
.fin-fmt-btn-danger:hover { background: rgba(220,38,38,.15); color: #f87171; }
.fin-fmt-font { height: 26px; max-width: 130px; padding: 0 4px; border: 1px solid var(--border); border-radius: 5px;
                background: var(--bg3); color: var(--text); font-size: 12px; cursor: pointer; }
.fin-fmt-sep  { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.fin-fmt-color { display: inline-flex; align-items: center; gap: 1px; cursor: pointer; }
.fin-fmt-color input[type="color"] { width: 22px; height: 24px; border: none; background: transparent; padding: 0; cursor: pointer; }
.fin-fmt-swatch-lbl { font-size: 11px; line-height: 1; color: var(--text2); }
.fin-fmt-count { font-size: 11px; font-weight: 700; color: #a5b4fc; padding: 0 4px; white-space: nowrap; }

/* ── Per-cell border popup ───────────────────────────────────────────────────── */
.fin-border-popup { position: fixed; z-index: 8950; background: var(--bg2); border: 1px solid var(--border);
                    border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.35); padding: 6px; display: flex;
                    flex-direction: column; gap: 4px; }
.fin-border-row   { display: flex; gap: 4px; }
.fin-border-btn   { flex: 1 1 0; min-width: 70px; height: 26px; padding: 0 8px; border: 1px solid var(--border);
                    background: var(--bg3); color: var(--text); border-radius: 5px; cursor: pointer; font-size: 12px;
                    white-space: nowrap; }
.fin-border-btn:hover  { background: var(--border); }
.fin-border-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.fin-border-color { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3);
                    text-transform: uppercase; font-weight: 600; padding: 2px 2px 0; }
.fin-border-color input[type="color"] { width: 28px; height: 24px; border: none; background: transparent; padding: 0; cursor: pointer; }
.fin-inline-text-edit   { width: 100%; height: 100%; border: none; background: transparent; resize: none;
                           padding: 0; margin: 0; font-family: inherit; line-height: inherit; white-space: pre-line; }
.fin-inline-text-edit:hover { outline: 1px dashed rgba(79,70,229,.5); outline-offset: 2px; }
.fin-inline-text-edit:focus { outline: 1px solid #4f46e5; outline-offset: 2px; }
.fin-insp-actions        { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 12px;
                            border-top: 1px solid var(--border2); }
.fin-bldr-num-input     { width: 56px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px;
                            background: var(--bg3); color: var(--text); font-size: 12px; }
.fin-canvas-zone-toolbar { display: flex; gap: 4px; }
.fin-canvas-add-select   { font-size: 10px; padding: 2px 8px; border: 1px solid var(--border2); border-radius: 4px;
                            background: var(--bg3); color: var(--text3); cursor: pointer; }
.fin-canvas-add-select:hover { background: var(--bg4); color: var(--text); }
.fin-canvas-handle       { position: absolute; width: 8px; height: 8px; background: #3b82f6; border: 1px solid #fff;
                            border-radius: 2px; z-index: 5; }
.fin-canvas-handle-nw    { top: -4px; left: -4px; cursor: nwse-resize; }
.fin-canvas-handle-n     { top: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.fin-canvas-handle-ne    { top: -4px; right: -4px; cursor: nesw-resize; }
.fin-canvas-handle-e     { top: 50%; right: -4px; margin-top: -4px; cursor: ew-resize; }
.fin-canvas-handle-se    { bottom: -4px; right: -4px; cursor: nwse-resize; }
.fin-canvas-handle-s     { bottom: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.fin-canvas-handle-sw    { bottom: -4px; left: -4px; cursor: nesw-resize; }
.fin-canvas-handle-w     { top: 50%; left: -4px; margin-top: -4px; cursor: ew-resize; }
.fin-canvas-zone-resize  { height: 8px; cursor: ns-resize; background: transparent; margin-bottom: 4px; }
.fin-canvas-zone-resize:hover { background: rgba(59,130,246,.2); border-radius: 4px; }
.fin-canvas-guide        { position: absolute; background: #f472b6; z-index: 10; pointer-events: none; }
.fin-canvas-guide-v      { top: 0; bottom: 0; width: 1px; }
.fin-canvas-guide-h      { left: 0; right: 0; height: 1px; }
.fin-canvas-guide-spacing { position: absolute; height: 0; border-top: 1px dashed #f472b6; z-index: 10; pointer-events: none; }
.fin-canvas-guide-spacing-v { position: absolute; width: 0; border-left: 1px dashed #f472b6; z-index: 10; pointer-events: none; }
.fin-canvas-ref-outline  { position: absolute; border: 1px dashed rgba(148,163,184,.35); pointer-events: none; z-index: 4; }

/* ── Email template editor ─────────────────────────────────────────────────── */
.fin-email-bldr-body    { display: grid; grid-template-columns: minmax(480px, 560px) 1fr; flex: 1; overflow: hidden; }
.fin-email-bldr-left    { display: flex; flex-direction: column; border-right: 1px solid var(--border2);
                           overflow-y: auto; padding: 16px; }
.fin-email-bldr-right   { display: flex; flex-direction: column; padding: 16px; overflow-y: auto; }
/* Fill the remaining column height and never shrink below a usable size -- as a flex child
   the textarea was being squished (to ~90px, and to nothing on shorter screens), which
   made the body editor look missing. */
.fin-email-body-ta      { font-family: monospace; font-size: 13px; line-height: 1.5; flex: 1 1 auto; min-height: 260px; }
#fin-email-subject      { padding: 9px 11px; font-size: 14px; }
/* Resolved-subject bar sits directly above the body preview and shares its card edge,
   so the preview's top corners are squared. Hardcoded light palette to match the
   white "email" body regardless of app theme. */
.fin-email-preview-subject       { border: 1px solid var(--border2); border-bottom: none;
                           border-radius: 8px 8px 0 0; padding: 10px 16px; background: #f8fafc;
                           color: #111827; font-family: sans-serif; font-size: 13px; font-weight: 600; }
.fin-email-preview-subject-lbl   { color: #6b7280; font-weight: 500; margin-right: 4px; }
.fin-email-preview-subject-empty { color: #9ca3af; font-weight: 400; font-style: italic; }
.fin-email-preview      { border: 1px solid var(--border2); border-radius: 0 0 8px 8px; padding: 20px 24px;
                           background: #ffffff; color: #111827; font-family: sans-serif;
                           font-size: 14px; line-height: 1.6; }
.fin-email-preview a    { color: #1e40af; }

/* WYSIWYG email body: toolbar + contenteditable editor. The editor mirrors the
   source textarea's flex sizing so it fills the column and never squishes. */
.fin-email-rte-toolbar  { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 6px; }
.fin-email-rte-spacer   { flex: 1 1 auto; }
.fin-email-rte          { flex: 1 1 auto; min-height: 260px; overflow-y: auto;
                           border: 1px solid var(--border2); border-radius: 8px; padding: 10px 12px;
                           background: var(--bg); color: var(--text); font-family: sans-serif;
                           font-size: 14px; line-height: 1.6; }
.fin-email-rte:focus    { outline: none; border-color: var(--accent); }
.fin-email-rte:empty::before { content: attr(data-placeholder); color: var(--text4); pointer-events: none; }
.fin-email-rte ul,
.fin-email-rte ol       { margin: 4px 0; padding-left: 22px; }
.fin-email-rte a        { color: var(--accent); }

/* ── Send modal ──────────────────────────────────────────────────────────── */
.fin-send-inv-btn       { font-size: 11px; padding: 3px 10px; }
.fin-sent-badge         { font-size: 10px; padding: 2px 7px; border-radius: 10px;
                           background: #dcfce7; color: #166534; font-weight: 600; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .fin-sent-badge       { background: #14532d; color: #86efac; }
}
:root[data-theme="dark"]  .fin-sent-badge { background: #14532d; color: #86efac; }
:root[data-theme="light"] .fin-sent-badge { background: #dcfce7; color: #166534; }

.fin-at-inv-toolbar     { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.fin-tpl-manage-link    { font-size: 11px; }

.fin-modal-backdrop     { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
                           display: flex; align-items: center; justify-content: center; }

/* Keyboard shortcut cheat-sheet (builder ribbon "?" button) */
.fin-shortcut-card      { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                           width: 430px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
                           box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.fin-shortcut-hdr       { display: flex; align-items: center; justify-content: space-between;
                           padding: 14px 18px; border-bottom: 1px solid var(--border2);
                           font-weight: 700; font-size: 15px; color: var(--text); }
.fin-shortcut-close     { background: none; border: none; color: var(--text3); font-size: 22px;
                           line-height: 1; cursor: pointer; padding: 0 4px; }
.fin-shortcut-close:hover { color: var(--text); }
.fin-shortcut-tbl       { width: 100%; border-collapse: collapse; }
.fin-shortcut-tbl td    { padding: 8px 18px; border-bottom: 1px solid var(--border2);
                           font-size: 13px; vertical-align: middle; }
.fin-shortcut-tbl tr:last-child td { border-bottom: none; }
.fin-sc-keys            { white-space: nowrap; }
.fin-sc-desc            { color: var(--text2); width: 100%; }
.fin-sc-or              { color: var(--text4); font-size: 11px; margin: 0 2px; }
.fin-shortcut-tbl kbd   { display: inline-block; font-family: ui-monospace, monospace; font-size: 11px;
                           background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
                           padding: 1px 6px; color: var(--text); }
.fin-shortcut-note      { padding: 12px 18px; font-size: 11px; color: var(--text4); }

/* Client detail drill-down modal (By Client card click) */
.fin-client-detail-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                           width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
                           box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.fin-client-detail-hdr  { display: flex; align-items: center; justify-content: space-between;
                           padding: 16px 20px; border-bottom: 1px solid var(--border2);
                           font-weight: 700; font-size: 16px; color: var(--text); }
.fin-client-detail-stats{ display: flex; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.fin-cd-stat            { flex: 1 1 120px; background: var(--bg3); border: 1px solid var(--border2);
                           border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.fin-cd-stat-lbl        { font-size: 11px; color: var(--text4); text-transform: uppercase; letter-spacing: .04em; }
.fin-cd-stat-val        { font-size: 18px; font-weight: 700; color: var(--text); }
.fin-cd-chart-wrap      { padding: 4px 20px 16px; }
.fin-cd-chart-lbl       { font-size: 12px; font-weight: 600; color: var(--text3); margin-bottom: 8px; }
.fin-cd-nochart         { padding: 8px 20px 20px; font-size: 12px; color: var(--text4); font-style: italic; }
.fin-client-detail-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px;
                           border-top: 1px solid var(--border2); }

/* Roomy line-items editor modal */
.fin-li-modal-card      { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                          width: 1120px; max-width: 95vw; height: 88vh; display: flex; flex-direction: column;
                          overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.fin-li-modal-hdr       { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px;
                          border-bottom: 1px solid var(--border2); font-weight: 700; font-size: 16px; color: var(--text);
                          flex: 0 0 auto; }
.fin-li-modal-body      { flex: 1 1 auto; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; overflow: hidden; }
.fin-li-modal-config    { overflow-y: auto; padding: 16px 18px; border-right: 1px solid var(--border2);
                          display: flex; flex-direction: column; gap: 8px; }
.fin-li-modal-right     { overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; }
.fin-li-modal-preview   { background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; padding: 14px;
                          overflow-x: auto; }
.fin-li-modal-fields    { display: flex; flex-wrap: wrap; gap: 4px; }
.fin-li-modal-foot      { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 12px 20px;
                          border-top: 1px solid var(--border2); }
@media (max-width: 820px) { .fin-li-modal-body { grid-template-columns: 1fr; } .fin-li-modal-config { border-right: none; border-bottom: 1px solid var(--border2); } }
.fin-send-modal         { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                           width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
                           display: flex; flex-direction: column; }
.fin-edit-items-modal   { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                           width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
                           display: flex; flex-direction: column; }
.fin-edit-items-body    { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.fin-edit-item-row      { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                           padding: 6px 10px; border: 1px solid var(--border2); border-radius: 6px;
                           background: var(--bg3); font-size: 12px; }
.fin-edit-item-desc     { color: var(--text); }
.fin-edit-item-depth    { color: var(--text3); font-size: 10px; white-space: nowrap; }
.fin-edit-item-handle    { color: var(--text3); cursor: grab; font-size: 13px; }
.fin-edit-item-indent-ctrl { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text3); }
.fin-edit-indent-btn     { padding: 1px 6px; border: 1px solid var(--border2); border-radius: 3px;
                            background: var(--bg4); color: var(--text3); cursor: pointer; font-size: 11px; }
.fin-edit-indent-btn:hover { background: var(--bg3); color: var(--text); }
.fin-edit-item-value     { width: 120px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px;
                            background: var(--bg3); color: var(--text); font-size: 11px; }
.fin-edit-items-btn      { font-size: 11px; padding: 3px 10px; }
.fin-send-modal-hdr     { display: flex; align-items: center; justify-content: space-between;
                           padding: 16px 20px; border-bottom: 1px solid var(--border2); }
.fin-send-modal-title   { font-size: 15px; font-weight: 700; color: var(--text); }
.fin-modal-close        { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text3); line-height: 1; }
.fin-send-modal-body    { padding: 14px 20px; display: flex; flex-direction: column; gap: 5px; }
.fin-send-label         { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; margin-top: 2px; }
.fin-send-check-label   { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); margin-top: 8px; cursor: pointer; }
.fin-send-check-label input { margin: 0; flex: none; }
.fin-send-from-row      { display: flex; gap: 6px; }
.fin-send-from-name     { flex: 1 1 45%; min-width: 0; }
.fin-send-from-addr     { flex: 1 1 55%; min-width: 0; width: auto; }
.fin-send-select        { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
                           background: var(--bg3); color: var(--text); font-size: 13px; width: 100%; }
.fin-send-input         { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
                           background: var(--bg3); color: var(--text); font-size: 13px; width: 100%; box-sizing: border-box; }
.fin-send-textarea      { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
                           background: var(--bg3); color: var(--text); font-size: 13px; width: 100%;
                           box-sizing: border-box; font-family: inherit; resize: vertical; }
/* Floats as an absolute dropdown anchored to the recipient row rather than sitting in the
   modal's flow -- an in-flow results list grew the modal's height as you typed, and since
   the modal is centred it visibly bounced. As an overlay it covers the fields below it and
   scrolls internally, so the modal never changes size. */
.fin-send-contact-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
                             display: flex; flex-direction: column; max-height: 220px; overflow-y: auto;
                             border: 1px solid var(--border2); border-radius: 6px; background: var(--bg2);
                             box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.fin-send-contact-results:empty { display: none; }
.fin-send-contact-row   { display: flex; gap: 12px; align-items: center; padding: 8px 12px;
                           cursor: pointer; border-bottom: 1px solid var(--border2); }
.fin-send-contact-row:last-child { border-bottom: none; }
.fin-send-contact-row:hover { background: var(--bg3); }
.fin-send-contact-name  { font-size: 13px; font-weight: 600; color: var(--text); }
.fin-send-contact-email { font-size: 12px; color: var(--text3); }
.fin-send-no-contacts   { padding: 8px 12px; font-size: 12px; color: var(--text3); }
.fin-send-chip-list     { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; margin-bottom: 4px; }
.fin-send-chip-list:empty { margin-bottom: 0; }
.fin-send-chip          { display: inline-flex; align-items: center; gap: 4px; background: var(--bg3);
                           border: 1px solid var(--border); border-radius: 20px; padding: 3px 8px 3px 10px;
                           font-size: 11px; color: var(--text2); }
.fin-chip-remove        { background: none; border: none; cursor: pointer; color: var(--text4);
                           font-size: 13px; line-height: 1; padding: 0 2px; }
.fin-chip-remove:hover  { color: #e55; }
.fin-send-recipient-row { margin-bottom: 10px; position: relative; }
.fin-extra-rows      { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.fin-extra-row       { display: flex; gap: 6px; align-items: center; }
.fin-extra-row-add   { align-self: flex-start; }
.fin-send-error         { padding: 8px 12px; background: #fef2f2; color: #dc2626; border-radius: 6px;
                           font-size: 13px; border: 1px solid #fecaca; }
.fin-send-test-banner   { margin: 0 20px; padding: 8px 12px; background: rgba(245,158,11,.14); color: #f59e0b;
                           border: 1px solid rgba(245,158,11,.35); border-radius: 6px; font-size: 12px; font-weight: 600; }
.fin-send-modal-footer  { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 20px;
                           border-top: 1px solid var(--border2); }
.fin-send-history       { padding: 16px 20px; border-top: 1px solid var(--border2); }
.fin-send-history-hdr   { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; margin-bottom: 8px; }
.fin-send-history-row   { display: flex; gap: 12px; font-size: 12px; color: var(--text); padding: 5px 0;
                           border-bottom: 1px solid var(--border2); }
.fin-send-history-row:last-child { border-bottom: none; }
.fin-send-history-by    { color: var(--text3); margin-left: auto; }

/* ── Sent invoices management view ─────────────────────────────────────── */
.fin-sent-view          { padding: 4px 2px; }
.fin-sent-view .fin-tpl-section-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-sent-search        { width: 280px; max-width: 50vw; }
.fin-sent-table-wrap    { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 10px; }
.fin-sent-table         { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fin-sent-table th      { text-align: left; padding: 9px 12px; background: var(--bg4); color: var(--text3);
                          font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
                          border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.fin-sent-table td      { padding: 9px 12px; border-bottom: 1px solid var(--border2); color: var(--text);
                          vertical-align: middle; }
.fin-sent-table tr:last-child td { border-bottom: none; }
.fin-sent-nowrap        { white-space: nowrap; }
.fin-sent-row-revoked td { color: var(--text4); }
.fin-sent-recip-extra   { color: var(--text3); font-size: 11px; }
.fin-sent-resend-tag    { font-size: 9px; padding: 1px 5px; border-radius: 8px; background: var(--bg4);
                          color: var(--text3); font-weight: 600; text-transform: uppercase; margin-left: 4px; }

.fin-sent-exp           { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.fin-sent-exp-perm      { background: #dbeafe; color: #1e40af; }
.fin-sent-exp-active    { background: #dcfce7; color: #166534; }
.fin-sent-exp-expired   { background: #fef3c7; color: #92400e; }
.fin-sent-exp-revoked   { background: #fee2e2; color: #991b1b; }
@media (prefers-color-scheme: dark) {
  .fin-sent-exp-perm    { background: #1e3a8a; color: #bfdbfe; }
  .fin-sent-exp-active  { background: #14532d; color: #86efac; }
  .fin-sent-exp-expired { background: #78350f; color: #fde68a; }
  .fin-sent-exp-revoked { background: #7f1d1d; color: #fca5a5; }
}
:root[data-theme="dark"]  .fin-sent-exp-perm    { background: #1e3a8a; color: #bfdbfe; }
:root[data-theme="dark"]  .fin-sent-exp-active  { background: #14532d; color: #86efac; }
:root[data-theme="dark"]  .fin-sent-exp-expired { background: #78350f; color: #fde68a; }
:root[data-theme="dark"]  .fin-sent-exp-revoked { background: #7f1d1d; color: #fca5a5; }
:root[data-theme="light"] .fin-sent-exp-perm    { background: #dbeafe; color: #1e40af; }
:root[data-theme="light"] .fin-sent-exp-active  { background: #dcfce7; color: #166534; }
:root[data-theme="light"] .fin-sent-exp-expired { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .fin-sent-exp-revoked { background: #fee2e2; color: #991b1b; }

.fin-sent-actions       { display: flex; gap: 4px; flex-wrap: wrap; }
.fin-sent-act           { font-size: 11px !important; padding: 3px 9px !important; text-decoration: none; }
.fin-sent-revoke        { color: #dc2626 !important; }
.fin-sent-revoke:hover  { background: rgba(220,38,38,.12) !important; }

.fin-sent-modal-card    { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                          width: 440px; max-width: 94vw; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.fin-sent-modal-body    { padding: 16px 20px 20px; }
.fin-sent-modal-sub     { font-size: 12.5px; color: var(--text3); margin: 0 0 14px; }
.fin-sent-field         { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; color: var(--text2); }
.fin-sent-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; justify-content: flex-end; }
.fin-sent-err           { color: #dc2626; font-size: 12px; margin-bottom: 10px; }