/* 3 Fish Studios — dark, cinematic theme (matches the NYC CRM / hub aesthetic):
   near-black layered surfaces, teal accent, atmospheric glows + filmic grain. */
:root {
  --paper: #08080a;            /* deep, faintly-warm near-black */
  --surface: #101013;          /* cards resting on the base */
  --surface-2: #17171b;        /* raised / hover */
  --surface-3: #1f1f24;        /* inputs / popovers / active */
  --ink: #f5f3ef;              /* warm off-white (3Fish wordmark tone) */
  --muted: #a6a39c;
  --faint: #74726c;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.05);
  --line-strong: rgba(255,255,255,.16);

  --sidebar: #0b0b0d;
  --sidebar-ink: #c9c6bf;
  --sidebar-muted: #84817a;

  /* The three fish — the brand's signature glowing colors. */
  --fish-gold: #f6ad3c;
  --fish-blue: #4aa8ff;
  --fish-coral: #ff6b5e;

  /* Lead accent = the blue fish (gold is retired from the UI, kept only in the mark). */
  --accent: #4aa8ff;
  --accent-strong: #6cb8ff;    /* solid-button hover */
  --accent-press: #9bccff;     /* light blue text on dark / soft backgrounds */
  --accent-soft: rgba(74,168,255,.13);
  --accent-line: rgba(74,168,255,.32);
  --accent-contrast: #04233f;  /* dark text on a blue button */

  /* Green — income / success / approved / ✓ */
  --green: #3ddc97;
  --green-press: #88eec4;
  --green-soft: rgba(61,220,151,.13);
  --green-line: rgba(61,220,151,.32);
  --green-contrast: #042a1e;

  --warn: #facc15;             /* yellow — needs attention / review (a clean lemon, not the brand gold) */
  --warn-press: #fde047;
  --warn-bg: rgba(250,204,21,.11);
  --warn-line: rgba(250,204,21,.30);
  --warn-soft: rgba(250,204,21,.10);
  --warn-contrast: #2e2606;
  --flag: #ff6b5e;             /* coral fish — flags / negatives */
  --flag-bg: rgba(255,107,94,.11);
  --flag-line: rgba(255,107,94,.30);

  --blue: #9bccff; --blue-bg: rgba(74,168,255,.12); --blue-line: rgba(74,168,255,.30);
  --indigo: #9bccff; --indigo-bg: rgba(74,168,255,.12); --indigo-line: rgba(74,168,255,.30);
  --violet: #f0a3b8; --violet-bg: rgba(240,120,150,.12); --violet-line: rgba(240,120,150,.28);

  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lift: 0 12px 40px rgba(0,0,0,.55);
  --font: "Geist", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { color-scheme: dark; }
body {
  margin: 0; color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  /* Ambient bioluminescent light over the dark — blue above, green to the
     right, coral lower-left (gold lives only in the mark). */
  background:
    radial-gradient(54% 42% at 50% -8%, rgba(74,168,255,.07), transparent 70%),
    radial-gradient(46% 42% at 100% 32%, rgba(61,220,151,.05), transparent 72%),
    radial-gradient(46% 44% at -5% 90%, rgba(255,107,94,.05), transparent 72%),
    var(--paper);
  background-attachment: fixed;
}
h1, h2, .brand-name, .stat-v, .next-due b { font-family: var(--display); }
@keyframes tf-flow { to { background-position: 300% center; } }
@keyframes tf-dotglow {
  0%,100% { box-shadow: 0 0 6px rgba(74,168,255,.5); }
  50%     { box-shadow: 0 0 16px rgba(74,168,255,.85), 0 0 7px rgba(61,220,151,.6); }
}
/* Barely-there filmic grain so the UI doesn't read as flat digital black. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*::selection { background: var(--accent); color: var(--accent-contrast); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 9999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; }

h1 { font-size: 1.35rem; font-weight: 660; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1.02rem; font-weight: 620; letter-spacing: -.01em; margin: 0 0 .35rem; }
.lede { color: var(--muted); margin: .3rem 0 0; font-size: .92rem; }
.muted { color: var(--muted); font-size: .88rem; margin: 0 0 .9rem; }

.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* ── sidebar ── */
.sidebar {
  background: var(--sidebar); color: var(--sidebar-ink); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 1.1rem .85rem;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: .7rem; padding: .35rem .4rem 1.1rem; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  /* Three glowing fish, abstracted into colored light over a dark tile. */
  background:
    radial-gradient(circle at 32% 26%, var(--fish-gold), transparent 56%),
    radial-gradient(circle at 76% 42%, var(--fish-blue), transparent 56%),
    radial-gradient(circle at 50% 84%, var(--fish-coral), transparent 56%),
    #0d0d10;
  color: #fff; font-weight: 700; letter-spacing: -.02em;
  display: grid; place-items: center; font-size: .95rem;
  /* Soft multi-color bloom — the bioluminescent halo. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
    0 0 28px rgba(74,168,255,.45), 0 0 50px rgba(61,220,151,.22), 0 0 40px rgba(255,107,94,.22);
}
.brand-name { color: #fff; font-weight: 620; font-size: .95rem; letter-spacing: -.01em; }
.brand-sub { color: var(--sidebar-muted); font-size: .76rem; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: .4rem; }
.nav-item {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  background: none; border: 0; color: var(--sidebar-ink); cursor: pointer;
  padding: .6rem .65rem; border-radius: var(--r-sm); font-size: .9rem; font-family: inherit;
  text-align: left; transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: var(--accent-soft); color: #fff; }
.nav-item.active .ic { stroke: var(--accent); opacity: 1; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

.sidebar-foot { margin-top: auto; color: var(--sidebar-muted); font-size: .76rem; padding: .6rem .5rem 0; display: flex; align-items: center; gap: .5rem; }
.sidebar-foot b { color: var(--sidebar-ink); font-weight: 600; }
.foot-status { display: flex; align-items: center; gap: .5rem; }
.foot-meta { display: flex; flex-direction: column; line-height: 1.25; }
.foot-enc { color: var(--sidebar-ink); font-weight: 560; }
.foot-clock { font-size: .68rem; color: var(--sidebar-muted); font-variant-numeric: tabular-nums; }
/* "Encrypted" indicator — a tiny rainbow that flows + blooms (all colors, alive). */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(90deg,#ff6b5e,#3ddc97,#4aa8ff,#a78bfa,#ff6b5e);
  background-size: 300% 100%;
  animation: tf-flow 5s linear infinite, tf-dotglow 2.6s ease-in-out infinite; }

/* batch-upload progress (fixed, persists across tabs) */
.upload-progress { position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 60;
  width: min(440px, 90vw); background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .35rem; }
.upload-progress[hidden] { display: none; }
.up-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.up-fill { height: 100%; width: 0%; border-radius: 99px; background: var(--accent); transition: width .25s ease; }
.up-label { font-size: .82rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.up-file { color: var(--muted); }
.up-note { font-size: .7rem; color: var(--muted); }

/* ── main ── */
.main { padding: 1.6rem 2rem 3rem; max-width: 1280px; }
.view { display: none; animation: fade .2s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.head-actions { display: flex; gap: .5rem; }

/* ── stats ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem 1rem; box-shadow: var(--shadow-sm); }
.stat:has(#ovIncome) { box-shadow: 0 0 30px rgba(61,220,151,.11); border-color: rgba(61,220,151,.20); }
.stat:has(#ovNet) { box-shadow: 0 0 34px rgba(74,168,255,.13); border-color: rgba(120,160,255,.20); }
.stat-k { display: block; color: var(--faint); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-v { display: block; margin-top: .3rem; font-size: 1.5rem; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat.warn .stat-v { color: var(--warn); }

/* ── toolbar ── */
.toolbar {
  display: flex; gap: .7rem; align-items: end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .8rem .9rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem;
}
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.field.grow { flex: 1 1 180px; }
.toggle { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink); cursor: pointer; padding-bottom: .45rem; user-select: none; }
.toggle input { accent-color: var(--accent); width: 16px; height: 16px; }

select, input[type=text], input[type=search], input[type=date], input[type=number] {
  font: inherit; color: var(--ink); padding: .5rem .6rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-3); min-width: 8.5rem; transition: border .15s, box-shadow .15s;
}
.toolbar select, .toolbar input { background: var(--surface-2); }
select:hover, input:hover { border-color: var(--line-strong); }
select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--faint); }

/* ── card / table ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card.pad { padding: 1.25rem 1.35rem; }
.table-card { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left; padding: .7rem .85rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); font-weight: 600; white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1;
}
tbody td { padding: .35rem .55rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }
td:first-child { padding-left: .85rem; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.num { text-align: right; }
td.amount { font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }

tr.flag-uncat { background: rgba(255,107,94,.045); }
tr.flag-uncat:hover { background: rgba(255,107,94,.08); }
tr.flag-lowconf { background: rgba(248,113,113,.05); }
tr.flag-lowconf:hover { background: rgba(248,113,113,.09); }

.cell-input { width: 100%; min-width: 7rem; border: 1px solid transparent; background: transparent; padding: .34rem .4rem; border-radius: var(--r-sm); font: inherit; color: var(--ink); transition: border .12s, background .12s; }
.cell-input:hover { border-color: var(--line); background: var(--surface-3); }
.cell-input:focus { outline: none; border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 3px var(--accent-soft); }
td select.cell-input { min-width: 9.5rem; }
td .pct { width: 4.2rem; min-width: 0; text-align: right; }

.badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.badge { font-size: .68rem; padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.badge.uncat { background: var(--flag-bg); border-color: var(--flag-line); color: var(--flag); }
.badge.low { background: var(--flag-bg); border-color: var(--flag-line); color: var(--flag); }
.badge.recpt { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-press); }
.badge.purpose { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue); }
.badge.conf { font-variant-numeric: tabular-nums; }
.badge.recurring { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue); margin-left: .4rem; vertical-align: 1px; }
.badge.suggest { background: var(--indigo-bg); border-color: var(--indigo-line); color: var(--indigo); }
.vendor { display: inline; }

.cell-input.suggested { border-color: var(--indigo-line); background: var(--indigo-bg); }
.rowactions { white-space: nowrap; text-align: right; }
.approve { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green-press); cursor: pointer; border-radius: 6px; padding: .15rem .4rem; font-size: .95rem; line-height: 1; margin-right: .25rem; }
.approve:hover { background: var(--green); color: var(--green-contrast); }

.stat.clickable { cursor: pointer; transition: border .12s, box-shadow .12s; }
.stat.clickable:hover { border-color: var(--warn-line); box-shadow: var(--shadow); }
.stat.draw .stat-v { color: var(--green-press); font-size: 1.12rem; }
.stat.draw.clickable:hover { border-color: var(--green-line); box-shadow: var(--shadow); }
.stat .stat-arrow { opacity: .5; font-size: .8em; }
.stat .stat-sub { display: block; margin-top: .25rem; font-size: .68rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.btn.soft { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-press); }
.btn.soft:hover { background: rgba(74,168,255,.2); }
.btn.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-press); }
.btn.warn:hover { background: rgba(250,204,21,.2); }
.btn:disabled { opacity: .55; cursor: default; }

.notice { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); border-radius: var(--r-md); padding: .8rem 1rem; font-size: .85rem; line-height: 1.55; margin-bottom: 1.1rem; max-width: 860px; }
.notice b { color: #fcd34d; }

/* tighter table so all columns fit without horizontal scroll (fixed layout +
   explicit column widths below keep the vendor column from collapsing) */
#grid { table-layout: fixed; }
thead th, tbody td { padding-left: .45rem; padding-right: .45rem; }
td:first-child, th:first-child { padding-left: .6rem; }
.cbcol { width: 30px; text-align: center; }
.cbcol input { accent-color: var(--accent); width: 15px; height: 15px; }
.actcol { width: 34px; text-align: center; }
#grid th:nth-child(2), #grid td:nth-child(2) { width: 92px; white-space: nowrap; }
#grid th:nth-child(3), #grid td:nth-child(3) { width: 150px; }
#grid th:nth-child(4), #grid td:nth-child(4) { width: 84px; }
#grid th:nth-child(5), #grid td:nth-child(5) { width: 13%; }
#grid th:nth-child(6), #grid td:nth-child(6) { width: 16%; }
#grid th:nth-child(7), #grid td:nth-child(7) { width: 142px; }
#grid th:nth-child(8), #grid td:nth-child(8) { width: 66px; }
#grid th:nth-child(9), #grid td:nth-child(9) { width: 170px; }
#grid td .cell-input, #grid td select.cell-input { min-width: 0; width: 100%; }
/* Project select: ellipsis (not a hard clip into the native arrow) for long names. */
#grid td select.cell-input { text-overflow: ellipsis; }
#grid td .pct { width: 100%; min-width: 0; text-align: center; padding-left: .2rem; padding-right: .2rem; }
.pct::-webkit-inner-spin-button, .pct::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pct { -moz-appearance: textfield; appearance: textfield; }
.vendor { overflow-wrap: anywhere; }
#grid td:nth-child(9) .badges { max-width: 170px; }
.badge.ready { background: var(--green-soft); border-color: var(--green-line); color: var(--green-press); }
.badge.proof { cursor: pointer; }
.badge.proof.stmt { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue); }
tr.sel { background: rgba(74,168,255,.08) !important; }
tr.sel td { border-color: var(--accent-line); }

.kebab { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.2rem; line-height: 1; border-radius: 6px; padding: .1rem .35rem; }
.kebab:hover { background: var(--surface-2); color: var(--ink); }

.cell-combo { width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: .34rem .4rem; font: inherit; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: .4rem; align-items: center; }
.cell-combo:hover { border-color: var(--line); background: var(--surface-3); }
.cell-combo.ph { color: var(--faint); }
.cell-combo .caret { color: var(--faint); font-size: .7rem; }

/* bulk action bar */
.bulkbar { display: flex; align-items: center; gap: .6rem; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: .55rem .8rem; margin-bottom: .8rem; box-shadow: var(--shadow); flex-wrap: wrap; }
.bulkbar[hidden] { display: none; }
.bulk-count { font-weight: 600; font-size: .88rem; margin-right: .3rem; }
.bulkbar .mini { padding: .35rem .5rem; min-width: 0; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .85rem; }
.bulkbar .mini::placeholder { color: var(--faint); }
.btn.sm { padding: .35rem .7rem; font-size: .85rem; }
.btn.danger { background: var(--flag); color: #2a0d0c; }
.btn.danger:hover { background: #fca5a5; }
.btn.export-warn { background: var(--flag-bg); border-color: var(--flag-line); color: #ff9d94; box-shadow: 0 0 18px rgba(255,107,94,.12); }
.btn.export-warn:hover { background: rgba(255,107,94,.18); border-color: rgba(255,107,94,.42); }

/* shared popover / menus */
.popover { position: absolute; z-index: 70; background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-lift); padding: .35rem; min-width: 200px; max-width: 320px; }
.popover[hidden] { display: none; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu-input { margin: .15rem .15rem .3rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 7px; font: inherit; background: var(--surface); color: var(--ink); }
.menu-list { display: flex; flex-direction: column; max-height: 240px; overflow: auto; }
.menu-item { text-align: left; background: none; border: 0; padding: .45rem .55rem; border-radius: 7px; cursor: pointer; font: inherit; color: var(--ink); }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--flag); }
.menu-item.danger:hover { background: var(--flag-bg); }
.menu-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: .35rem .55rem .1rem; }

.badge.home { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-press); }
.attach-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .55rem; }
.attach-list .btn { text-align: left; }
.muted2 { color: var(--faint); }
#memGrid td { padding: .45rem .6rem; }
#memGrid td select.cell-input { min-width: 11rem; }

#incGrid td { padding: .5rem .6rem; }
.toggle2 { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .85rem; }
.toggle2 input { accent-color: var(--accent); width: 15px; height: 15px; }
tr.excluded td { color: var(--faint); }
tr.excluded .amount { text-decoration: line-through; }
.badge.excl { background: var(--violet-bg); border-color: var(--violet-line); color: var(--violet); }
.inckind { font-size: .82rem; padding: .28rem .45rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink); max-width: 230px; }
tr.excluded .inckind { color: var(--faint); }

/* overview */
.ov-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.ov-tax { grid-column: 1 / -1; max-width: 660px; }
.ov-tax.pad { padding: 1rem 1.15rem; }
.info-i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); font-size: 11px; font-style: italic; font-weight: 600; cursor: help; position: relative; }
.info-i:hover, .info-i:focus-visible { color: var(--ink); border-color: var(--accent-line); }
.info-i .tip { display: none; position: absolute; top: 145%; left: 0; width: 300px; background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 8px; padding: .6rem .7rem; font-size: .74rem; font-style: normal; font-weight: 400; color: var(--muted); line-height: 1.55; box-shadow: var(--shadow-lift); z-index: 30; text-align: left; }
.info-i:hover .tip, .info-i:focus-within .tip { display: block; }
.ov-tax-headl { display: flex; align-items: center; gap: .4rem; }
.ov-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ov-table th { text-align: left; padding: .5rem .6rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); border-bottom: 1px solid var(--line); }
.ov-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.ov-table tr:last-child td { border-bottom: 0; }
.ov-table .num { text-align: right; }
.ov-table .neg { color: var(--flag); }
.ov-table tr.ov-total td { font-weight: 660; border-top: 2px solid var(--line-strong); }
.needs { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.need-item { font-size: .9rem; color: var(--flag); }
.need-item::before { content: "•"; margin-right: .45rem; color: var(--flag); }
.need-ok { color: var(--green-press); font-weight: 560; }
/* income → green; net profit → the hero: animated multi-colour gradient + glow */
#ovIncome, #incBizTotal { color: var(--green-press); }
#ovNet {
  background: linear-gradient(90deg, #4aa8ff, #3ddc97, #facc15, #ff6b5e, #a78bfa, #4aa8ff);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: tf-flow 7s linear infinite;
  filter: drop-shadow(0 0 12px rgba(74,168,255,.4)) drop-shadow(0 0 22px rgba(61,220,151,.18));
}
#ovNet.loss {
  background: linear-gradient(90deg, #ff6b5e, #ff9d94, #ff6b5e); background-size: 200% 100%;
  filter: drop-shadow(0 0 12px rgba(255,107,94,.45));
}
.tax-dates { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.tax-dates li { display: flex; flex-direction: column; gap: .1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .38rem .6rem; font-variant-numeric: tabular-nums; min-width: 88px; font-size: .82rem; }
.tax-dates li b { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tax-dates li.is-next { border-color: var(--line-strong); background: var(--surface-3); }
.tax-dates li.is-next b { color: var(--ink); }
.tax-dates li.paid { opacity: .62; }
.tax-dates li.paid span { text-decoration: line-through; }
.cal-added { font-size: .64rem; color: var(--accent-press); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: .05rem .35rem; align-self: flex-start; }
.paidbtn { margin-top: .15rem; align-self: flex-start; font-size: .66rem; padding: .12rem .4rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.paidbtn:hover { border-color: var(--accent-line); color: var(--accent-press); }
.tax-dates li.paid .paidbtn { color: var(--accent-press); border-color: var(--accent-line); background: var(--accent-soft); }
.ov-tax-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; }
.ov-tax-head h2 { margin: 0; }
.next-due { display: flex; flex-direction: row; align-items: baseline; gap: .55rem; flex-wrap: wrap; padding: .5rem .75rem; margin: 0 0 .6rem;
  border: 1px solid rgba(165,180,252,.3); background: var(--surface-2); border-radius: var(--r-sm);
  box-shadow: 0 0 24px rgba(165,180,252,.1); }
.next-due.soon { border-color: var(--warn-line); box-shadow: 0 0 24px rgba(250,204,21,.13); }
.next-due.urgent { border-color: var(--flag-line); box-shadow: 0 0 24px rgba(255,107,94,.15); }
.next-due b { font-size: .98rem; font-variant-numeric: tabular-nums; }
.next-due .nd-when { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #c7d0fc; font-weight: 600; }
.next-due.soon .nd-when { color: var(--warn); }
.next-due.urgent .nd-when { color: var(--flag); }
.next-due .nd-sub { font-size: .76rem; color: var(--faint); }

/* "Set aside $X for taxes" — the reserve estimate, the headline of this card. */
.set-aside { padding: .7rem .85rem; margin: 0 0 .65rem; border-radius: var(--r-sm);
  border: 1px solid var(--green-line); background: var(--green-soft);
  box-shadow: 0 0 26px rgba(61,220,151,.12); }
.set-aside .sa-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.set-aside .sa-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--green-press); font-weight: 600; }
.set-aside .sa-amt { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--green-press);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(61,220,151,.35); }
.set-aside .sa-sub { margin-top: .25rem; font-size: .74rem; color: var(--muted); }
.set-aside .sa-paid { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--green-line); font-size: .78rem; color: var(--muted); }
.set-aside .sa-paid b { color: var(--green-press); }
.health { display: flex; flex-direction: column; gap: .65rem; }
.health-item { display: flex; flex-direction: column; gap: .3rem; }
.health-warn { font-size: .86rem; color: var(--warn); }
.health-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.health-chip { font: inherit; font-size: .72rem; color: var(--muted); cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px;
  padding: .18rem .55rem; transition: border-color .12s, color .12s; }
.health-chip:hover { color: var(--ink); border-color: var(--warn-line); }
.health-chip .hc-act { color: var(--warn); font-weight: 600; }

/* Pay yourself (owner draws) */
.ps-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.ps-now { border: 1px solid var(--green-line); box-shadow: 0 0 28px rgba(61,220,151,.10); }
.ps-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--green-press); font-weight: 600; }
.ps-amt { font-family: var(--display); font-size: 2.4rem; font-weight: 600; color: var(--green-press);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(61,220,151,.4); margin: .15rem 0 .8rem; }
.ps-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.ps-seg { display: block; height: 100%; }
.ps-seg.avail { background: var(--green); } .ps-seg.tax { background: var(--warn); } .ps-seg.buf { background: var(--faint); } .ps-seg.card { background: #ff6b5e; }
.ps-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .7rem; font-size: .78rem; color: var(--muted); }
.ps-warn { margin-top: .9rem; padding: .6rem .75rem; border-radius: var(--r-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-size: .8rem; line-height: 1.5; }
.ps-warn b { color: var(--warn); }
.ps-warn a { color: var(--warn); text-decoration: underline; }

/* Gear / equipment register on the Assets page */
.gear-block { margin-top: 2.2rem; }
.gear-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gear-head h2 { font-size: 1.15rem; margin: 0; }
.gear-total b { color: var(--ink); font-weight: 600; }
.gear-block .lede { max-width: 76ch; margin-top: .35rem; }
#gearGrid { table-layout: fixed; min-width: 900px; }
#gearGrid td:first-child { white-space: normal; color: var(--ink); min-width: 0; }
#gearGrid th:nth-child(1), #gearGrid td:nth-child(1) { width: 40%; }
#gearGrid th:nth-child(2), #gearGrid td:nth-child(2) { width: 8rem; white-space: nowrap; }
#gearGrid th:nth-child(3), #gearGrid td:nth-child(3) { width: 6rem; }
#gearGrid th:nth-child(4), #gearGrid td:nth-child(4) { width: 7.2rem; }
#gearGrid th:nth-child(5), #gearGrid td:nth-child(5) { width: 14%; }
#gearGrid th:nth-child(6), #gearGrid td:nth-child(6) { width: 5rem; }
#gearGrid th:nth-child(7), #gearGrid td:nth-child(7) { width: 3rem; }
#gearGrid tbody tr.gear-row:hover > td { background: var(--accent-soft); }
.gear-open { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; cursor: pointer; padding: .12rem .45rem; margin-right: .3rem; font-size: .82rem; }
.gear-open:hover { border-color: var(--accent-line); color: var(--accent-press); }
.gear-proj { display: inline-block; padding: .08rem .5rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-press); font-size: .72rem; margin: .1rem .1rem 0 0; }
.gear-notes { font-size: .78rem; color: var(--muted); margin-top: .15rem; max-width: min(58ch, 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.gear-notes.expanded { max-width: 100%; white-space: normal; overflow: visible; }
.gear-edit { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; cursor: pointer; padding: .12rem .45rem; }
.gear-edit:hover { border-color: var(--accent-line); color: var(--accent-press); }
.gear-editor h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.gear-editor .field { display: block; margin-bottom: .9rem; }
.gear-field-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.gear-editor input, .gear-editor textarea { width: 100%; margin-top: .3rem; }
.gear-editor input[type="checkbox"], .gear-editor input[type="radio"] { width: auto; margin-top: 0; flex: 0 0 auto; }
.gear-proj-checks { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.gear-proj-check { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; cursor: pointer; }
.gear-proj-check input { width: auto; margin: 0; }
.gear-editor-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }

/* Recurring charges — collapsible card so it doesn't bury the expense list */
.recurring-block { margin-top: 1.6rem; }
.recurring-block.card { padding: 1.05rem 1.2rem 1.15rem; overflow: hidden; }
.rec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; background: none; border: 0; padding: .2rem 0; cursor: pointer; font: inherit; text-align: left; }
.table-card > .rec-head { min-height: 3.15rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.rec-title { font-size: 1.02rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.rec-chev { color: var(--muted); font-size: 1.15rem; width: 1.2rem; line-height: 1; display: inline-flex; justify-content: center; }
.rec-count { color: var(--muted); font-weight: 400; font-size: .85rem; }
.table-card > .rec-head #chargesHint { white-space: nowrap; padding-right: .1rem; }
.rec-body { margin-top: 1rem; }
.rec-head-static { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.rec-head-static h2 { font-size: 1.12rem; margin: 0; }
.rec-run { display: inline-flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: .15rem .35rem; text-align: right; }
.rec-grid { display: flex; gap: 1.35rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.rec-donut { flex: 0 0 auto; }
.rec-grid .table-wrap { flex: 1; min-width: 280px; overflow-x: auto; }
.recurring-block .lede { max-width: 100%; }
#recGrid { min-width: 620px; }
#recGrid th, #recGrid td { padding-left: .55rem; padding-right: .55rem; }
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: .5rem; }
.rec-pct { color: var(--muted); font-size: .76rem; margin-left: .3rem; }
.rec-run b { color: var(--ink); font-weight: 600; }
.rec-ess { color: var(--green); }
.badge.ess { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line); }
.ess-toggle { font: inherit; font-size: .76rem; padding: .12rem .55rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted); }
.ess-toggle:hover { border-color: var(--green-line); color: var(--green); }
.ess-toggle.on { background: var(--green-soft); border-color: var(--green-line); color: var(--green); font-weight: 600; }
.rec-actions { white-space: nowrap; }
.cadence-sel { font: inherit; font-size: .74rem; padding: .1rem .35rem; margin-right: .4rem; border-radius: 8px;
  background: var(--panel-2, transparent); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.cadence-sel:hover { border-color: var(--accent-line); color: var(--accent-press); }
.rec-excl { font: inherit; font-size: .82rem; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted); }
.rec-excl:hover { border-color: var(--warn-line); color: var(--warn); background: var(--warn-soft); }
.ps-opcosts { margin: .2rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }
.ps-opcosts b { color: var(--green); }

/* Statement-detected balance prompt (import → update business account) */
.import-balances { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.balance-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.balance-prompt .bp-text { font-size: .85rem; }
.balance-prompt b { color: var(--ink); }

/* Monthly business-spend strip (Overview) */
.ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.months-strip { display: flex; align-items: flex-end; gap: .4rem; height: 116px; margin-top: .7rem; }
.ms-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; }
.ms-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.ms-bar { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent-strong), var(--accent)); transition: height .3s ease; }
.ms-col:hover .ms-bar { background: var(--accent-press); }
.ms-lbl { font-size: .68rem; color: var(--muted); }
.ps-leg { display: inline-flex; align-items: center; gap: .35rem; }
.ps-leg .dot { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.ps-leg .dot.avail { background: var(--green); } .ps-leg .dot.tax { background: var(--warn); } .ps-leg .dot.buf { background: var(--faint); } .ps-leg .dot.card { background: #ff6b5e; }
.ps-sub-amt { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin: .1rem 0 .2rem; }
.ps-stat-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.ps-stat-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-floor-line { font-size: 1rem; line-height: 1.6; }
.ps-floor-line b { color: var(--green-press); }
.ps-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .9rem; max-width: 640px; }
.ps-record { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .3rem; }
.ps-record select, .ps-record input { padding: .5rem .6rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; }
.ps-record input[type="number"] { width: 8rem; } .ps-record input[type="text"] { flex: 1; min-width: 10rem; }
.ps-recent { margin-top: 1rem; display: flex; flex-direction: column; }
.ps-rec-row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .8rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ps-rec-label { font-size: .9rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
@media (max-width: 860px) { .ps-grid, .ps-settings { grid-template-columns: 1fr; } }

/* on-row hygiene flags (missing receipt / possible duplicate) */
.badge.flagchip { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); cursor: default; }
button.badge.flagchip { cursor: pointer; }
.badge.addrcpt { background: var(--accent-soft); color: var(--accent-press); border: 1px solid var(--accent-line); cursor: pointer; }
.badge.addrcpt.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge.gearcand, .badge.softcand { background: var(--panel-2, transparent); color: var(--muted); border: 1px dashed var(--line); cursor: pointer; }
.badge.gearcand:hover, .badge.softcand:hover { border-style: solid; border-color: var(--accent-line); color: var(--accent-press); }
tr.rowflash > td { animation: rowflash 3.2s ease-out; }
tr.rowflash > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@keyframes rowflash { 0%, 45% { background: var(--accent-soft); } 100% { background: transparent; } }
.tax-dates .paid-amt { font-size: .68rem; color: var(--green-press); font-variant-numeric: tabular-nums; margin-left: .3rem; }
.paid-pop { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; min-width: 190px; }
.paid-pop-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.paid-pop .btn { width: 100%; }
@media (max-width: 920px) { .ov-grid { grid-template-columns: 1fr; } }

/* breakdown */
.bd-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1rem; align-items: start; }
.bd-chart { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: .7rem; }
.bd-donut { flex: none; filter: drop-shadow(0 0 22px rgba(74,168,255,.14)); }
.bd-legend { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 190px; }
.bd-leg { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: .55rem; font-size: .85rem; }
.bd-dot { width: 10px; height: 10px; border-radius: 3px; }
.bd-leg-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-leg-pct { color: var(--faint); font-variant-numeric: tabular-nums; font-size: .8rem; }
.bd-leg-amt { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.bd-c-amt { fill: var(--ink); font-size: 15px; font-weight: 700; }
.bd-c-lbl { fill: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.bd-vendors { display: flex; flex-direction: column; gap: .65rem; margin-top: .7rem; }
.bd-ven { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; align-items: center; }
.bd-ven-name { font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: .4rem; overflow: hidden; }
.bd-ven-meta { display: flex; align-items: baseline; gap: .55rem; font-variant-numeric: tabular-nums; }
.bd-ven-pct { color: var(--faint); font-size: .78rem; }
.bd-ven-bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.bd-ven-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); box-shadow: 0 0 10px rgba(74,168,255,.35); }

/* Profit per client: made / spent / net. */
.bd-client-row { display: grid; grid-template-columns: 1fr 6.5rem 6.5rem 7rem; gap: .5rem; align-items: baseline;
  padding: .5rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bd-client-row:first-child { border-top: none; }
.bd-client-row.head { padding-top: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.bd-client-row .num { text-align: right; }
.bd-client-name { font-size: .9rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-client-row .made { color: var(--green-press); }
.bd-client-row .spent { color: var(--muted); }
.bd-client-row .net { font-weight: 600; }
.bd-client-row .net.gain { color: var(--green-press); }
.bd-client-row .net.loss { color: var(--flag); }

/* Schedule C summary sheet (printable hand-off). */
.sc-sheet { max-width: 720px; }
.sc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.sc-biz { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.sc-sub { font-size: .76rem; color: var(--muted); margin-top: .15rem; }
.sc-gen { font-size: .72rem; color: var(--faint); white-space: nowrap; }
.sc-sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 600; margin: 1.1rem 0 .35rem; }
.sc-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .6rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.sc-line { font-size: .74rem; color: var(--faint); }
.sc-label { font-size: .9rem; color: var(--ink); }
.sc-amt { font-size: .92rem; color: var(--ink); text-align: right; }
.sc-row.warn .sc-label, .sc-row.warn .sc-amt { color: var(--warn); }
.sc-row.total { border-top: 1px solid var(--line); border-bottom: none; margin-top: .3rem; }
.sc-row.total .sc-label, .sc-row.total .sc-amt { color: var(--muted); font-weight: 600; }
.sc-row.net { border-top: 2px solid var(--green-line); border-bottom: none; margin-top: .3rem; }
.sc-row.net .sc-label, .sc-row.net .sc-amt { color: var(--green-press); font-weight: 700; font-size: 1.05rem; }
.sc-none { padding: .5rem 0; color: var(--faint); font-size: .85rem; }
.sc-foot { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted); line-height: 1.5; }

@media print {
  body * { visibility: hidden; }
  #schedulec, #schedulec * { visibility: visible; }
  #schedulec { position: absolute; inset: 0; margin: 0; }
  #schedulec .head-actions, #schedulec .lede { display: none; }
  body::after { display: none; }
  .sc-sheet { border: none; box-shadow: none; background: #fff; max-width: none; padding: 0; }
  .sc-sheet, .sc-sheet * { color: #000 !important; }
  .sc-row, .sc-row.total, .sc-row.net { border-color: #ccc !important; }
}
@media (max-width: 920px) { .bd-grid { grid-template-columns: 1fr; } }

/* login */
.logout { margin-left: auto; background: none; border: 1px solid var(--line-strong); color: var(--sidebar-muted); border-radius: 6px; padding: .2rem .5rem; font-size: .72rem; cursor: pointer; }
.logout:hover { color: #fff; border-color: var(--accent-line); }
.login-overlay { position: fixed; inset: 0; background: var(--paper); display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-overlay[hidden] { display: none; }
.login-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; width: 340px; max-width: 90vw; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.login-box .brand-mark { width: 46px; height: 46px; font-size: 1.1rem; }
.login-box h2 { margin: .4rem 0 0; }
.login-box .muted { margin: 0 0 .5rem; }
.login-box input { width: 100%; padding: .6rem .7rem; }
.login-box .btn { width: 100%; }
.login-error { color: var(--flag); font-size: .85rem; min-height: 1.1em; }

.linklike { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; font-weight: 560; }
.linklike:hover { text-decoration: underline; }
.rowdel { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1.05rem; line-height: 1; border-radius: 6px; padding: .15rem .35rem; }
.rowdel:hover { color: var(--flag); background: var(--flag-bg); }

/* empty */
.empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.empty[hidden] { display: none; }
.empty p { margin: .3rem 0 0; font-weight: 560; color: var(--ink); }
.empty span { font-size: .85rem; color: var(--faint); }
.empty-ic { width: 34px; height: 34px; fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── buttons ── */
.btn { font: inherit; font-weight: 560; border-radius: var(--r-sm); padding: .55rem .95rem; cursor: pointer; border: 1px solid transparent; transition: filter .12s, background .12s, border .12s, transform .04s; }
.btn:active { transform: translateY(.5px); }
.btn.primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 22px rgba(74,168,255,.32); }
.btn.primary:hover { background: var(--accent-strong); box-shadow: 0 0 28px rgba(74,168,255,.42); }
.btn.success { background: var(--green); color: var(--green-contrast); box-shadow: 0 0 22px rgba(61,220,151,.30); }
.btn.success:hover { background: var(--green-press); }
.btn.ghost { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent-line); color: var(--accent-press); }

/* ── forms ── */
.form { display: flex; flex-direction: column; gap: 1rem; max-width: 860px; }
.form .field { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checks { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .9rem; cursor: pointer; }
.chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.form .btn.primary { align-self: flex-start; }
.settings-group { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.settings-group-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
#settingsForm { max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
#settingsForm .field { min-width: 0; }
#settingsForm input, #settingsForm select { width: 100%; min-width: 0; margin-top: .2rem; }
#settingsForm .settings-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin-top: .2rem; padding-top: 1rem; }
#settingsForm .settings-group-h { grid-column: 1 / -1; }
#settingsForm .btn.primary { grid-column: 1 / -1; justify-self: start; }

/* ── ingest ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: stretch; }
.drop-card { display: flex; flex-direction: column; min-height: 292px; }
.drop-card .muted { min-height: 3.9em; }
.drop-card .btn.primary { margin-top: auto; }
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: 1.6rem 1rem;
  color: var(--muted); cursor: pointer; text-align: center; transition: border .15s, background .15s, color .15s; margin-bottom: .9rem;
  min-height: 116px;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-press); }
.drop.has-file { border-style: solid; border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-press); }
.drop-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop-name { font-size: .85rem; word-break: break-all; }

.result { margin-top: .9rem; font-size: .85rem; border-radius: var(--r-sm); padding: .75rem .85rem; background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; line-height: 1.55; }
.result:empty { display: none; }
.result.working { color: var(--muted); }
.result.error { background: var(--flag-bg); border-color: var(--flag-line); color: var(--flag); }
.result.ok { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-press); }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--accent-line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: .4rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── toast / modal ── */
.toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(2rem); background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); padding: .6rem 1.05rem; border-radius: 10px; opacity: 0; transition: all .25s; pointer-events: none; font-size: .9rem; z-index: 60; box-shadow: var(--shadow-lift); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--flag); color: #2a0d0c; border-color: transparent; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal-box { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 14px; max-width: 92vw; max-height: 92vh; overflow: auto; padding: 1rem; position: relative; box-shadow: var(--shadow-lift); }
.modal-box img, .modal-box iframe { max-width: 86vw; max-height: 82vh; border: 1px solid var(--line); border-radius: 8px; display: block; background: #fff; }
.modal-close { position: absolute; top: .35rem; right: .55rem; border: 0; background: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); line-height: 1; }
.proof-frame { width: 86vw; max-width: 880px; height: 78vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.proof-text { max-width: 86vw; max-height: 78vh; overflow: auto; white-space: pre; font: 12px/1.5 var(--mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem; }
.proof-newtab { margin-top: .7rem; }
.merge-picker { min-width: 380px; max-width: 560px; }
.merge-picker h3 { margin: 0 0 .25rem; }
.merge-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.merge-info { font-size: .9rem; }
.expense-detail { min-width: min(620px, 86vw); max-width: 720px; display: flex; flex-direction: column; gap: .9rem; }
.expense-detail-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-right: 1.5rem; }
.expense-detail-head h3 { margin: 0 0 .15rem; font-size: 1.12rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; }
.detail-row { display: flex; flex-direction: column; gap: .18rem; min-width: 0; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.detail-row b { font-size: .67rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.detail-row span { overflow-wrap: anywhere; }
.detail-actions { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* AI purpose suggestion */
.badge.spec { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); }
.sugg-card { min-width: 440px; max-width: 600px; display: flex; flex-direction: column; gap: .7rem; }
.sugg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sugg-head h3 { margin: 0; }
.badge.conf-high { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green-press); }
.badge.conf-medium { background: var(--indigo-bg); border: 1px solid var(--indigo-line); color: var(--indigo); }
.badge.conf-low { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); }
.sugg-warn { padding: .55rem .7rem; border-radius: var(--r-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-size: .85rem; line-height: 1.45; }
.sugg-guard { margin: -.1rem 0 .1rem; padding: .5rem .65rem; border-radius: var(--r-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-size: .8rem; line-height: 1.45; }
.sugg-guard b { color: var(--warn); }
.subst-tag { display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .03em; color: var(--green-press); background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 5px; padding: .02rem .3rem; vertical-align: middle; }
.sugg-field { display: flex; flex-direction: column; gap: .25rem; font-size: .76rem; color: var(--muted); flex: 1; }
.sugg-field.sm { flex: 0 0 8rem; }
.sugg-field input, .sugg-field select { padding: .45rem .55rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; }
.sugg-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.sugg-meta { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.sugg-meta b { color: var(--ink); }
.ref-chip { display: inline-block; font-size: .72rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .1rem .5rem; margin: 0 .25rem .2rem 0; }
.ref-chip.tax { color: var(--green-press); background: var(--green-soft); border: 1px solid var(--green-line); cursor: help; font-variant-numeric: tabular-nums; position: relative; outline: none; }
.ref-chip.tax .tip { display: none; position: absolute; bottom: 150%; left: 0; width: 290px; background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 8px; padding: .6rem .7rem; font-size: .74rem; color: var(--muted); line-height: 1.55; box-shadow: var(--shadow-lift); z-index: 40; text-align: left; white-space: normal; cursor: default; }
.ref-chip.tax:hover .tip, .ref-chip.tax:focus-within .tip { display: block; }
.ref-chip.tax .tip b { color: var(--green-press); }
.ref-chip.tax .tip-src { display: block; margin-top: .35rem; color: var(--faint); font-size: .68rem; }
.sugg-actions { display: flex; gap: .6rem; margin-top: .3rem; }
.sugg-note { font-size: .72rem; margin: 0; }
.rec-row { display: grid; grid-template-columns: 8rem 1fr; gap: .7rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.rec-row b { color: var(--faint); font-weight: 500; font-size: .74rem; align-self: center; text-transform: uppercase; letter-spacing: .03em; }
.rec-row span { color: var(--ink); }

@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: 1rem; padding: .6rem .9rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .nav { flex-direction: row; margin: 0; overflow-x: auto; }
  .nav-item span { display: none; }
  .sidebar-foot { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .two-col, .grid2 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  #settingsForm, #settingsForm .settings-group { grid-template-columns: 1fr; }
  .main { padding: 1.1rem 1rem 2.5rem; }
}

/* Persistent "data isn't current" banner. Deliberately not a toast: during the
   Supabase outage a 2.6s toast vanished and left a dashboard of placeholder values
   that read as real zeros. Stays until a load succeeds. */
.stale-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: .6rem 1rem; text-align: center;
  background: var(--warn-soft, #3a2a08); color: var(--warn, #f5c451);
  border-top: 1px solid var(--warn-line, #7a5a12);
  font-size: .86rem; letter-spacing: .01em;
}

/* Foreign-currency badge: the receipt's own total, shown next to the USD amount so
   the conversion gap is visible rather than silently wrong. */
.badge.fx { background: var(--panel-2, transparent); color: var(--accent-press, #8ab4f8); border: 1px solid var(--accent-line, #2b4066); }

/* Split-a-charge dialog */
.split-editor .split-row { display: grid; grid-template-columns: 7rem 1fr auto auto; gap: .5rem; align-items: center; margin-bottom: .45rem; }
.split-editor .sp-amt, .split-editor .sp-label { padding: .4rem .55rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; }
.split-editor .sp-gear { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.split-editor .sp-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: .2rem .4rem; }
.split-editor .sp-del:hover { color: var(--warn, #f5c451); }
.split-total { margin: .6rem 0; font-size: .85rem; }
.split-total.ok { color: var(--ok, #66d9a0); }

/* ── Invoices (accounts receivable) ───────────────────────────────────────── */
/* Deliberately NOT styled like the income totals: this money hasn't arrived. */
.stat-sub { display: block; font-size: .68rem; color: var(--muted); margin-top: .15rem; line-height: 1.3; }
.stat.clickable { cursor: pointer; }
.stat.clickable:hover { border-color: var(--accent-line, #2b4066); }
.inv-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
#invGrid .chip { padding: .1rem .35rem; font-size: .75rem; text-decoration: none; }
.chip.ghost { background: none; border: 1px dashed var(--line); color: var(--muted); cursor: pointer; }
.chip.ghost:hover { color: var(--fg); border-color: var(--accent-line, #2b4066); }
.inv-goto { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.inv-goto:hover { border-bottom-color: currentColor; }
/* Deposit-candidate picker */
.cand-list { max-height: 46vh; overflow-y: auto; margin: .5rem 0; display: flex; flex-direction: column; gap: .35rem; }
.cand-row { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: start; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cand-row:hover { border-color: var(--accent-line, #2b4066); }
.cand-row.dim { opacity: .55; cursor: not-allowed; }
.cand-main { font-size: .85rem; line-height: 1.4; }
.cand-tags { display: flex; gap: .25rem; align-items: center; }
.cand-warn { grid-column: 1 / -1; font-size: .75rem; color: var(--warn, #f5c451); margin-top: .3rem; }
.cand-all { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; font-size: .8rem; color: var(--muted); margin-bottom: .4rem; cursor: pointer; }
/* Row flash when jumping from an invoice to its deposit */
@keyframes flashRow { from { background: var(--accent-soft, rgba(94,234,212,.16)); } to { background: transparent; } }
tr.flash { animation: flashRow 1.6s ease-out; }