/* Taxbot design system — nautical, professional. Brand from the Channel Charters
   compass logo: deep navy + aqua accent on warm sand. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --navy:#123445; --navy-700:#0e2734; --aqua:#1f93ab; --aqua-deep:#157387;
  --aqua-soft:#e7f2f5; --sand:#f4f1e9; --surface:#ffffff; --ink:#1b2a32;
  --muted:#69797f; --line:#e4e1d7; --good:#1f8a4c; --good-soft:#e8f5ee;
  --bad:#c0392b; --bad-soft:#fbeceb; --warn:#fff6e0; --warn-line:#f0d98a;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(18,52,69,.06), 0 6px 20px rgba(18,52,69,.07);
  --maxw:1040px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--ink);
  background:var(--sand); line-height:1.5; font-size:15px;
}
h1,h2,h3,.brand-name { font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--navy); }
h1 { font-size:1.6rem; font-weight:800; letter-spacing:-.01em; margin:.2rem 0 1rem; }
h2 { font-size:1.15rem; font-weight:700; margin:1.6rem 0 .7rem; }
a { color:var(--aqua-deep); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- top bar ---- */
header.topbar {
  background:var(--navy); color:#fff; position:sticky; top:0; z-index:10;
  box-shadow:0 2px 14px rgba(0,0,0,.12);
}
.topbar .inner {
  max-width:var(--maxw); margin:0 auto; padding:.9rem 1.1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:.7rem; color:#fff; }
.brand img { height:72px; width:72px; border-radius:50%; background:#fff; padding:3px; }
.brand-name { color:#fff; font-weight:800; font-size:1.05rem; line-height:1; }
.brand-sub { color:#9fc4cf; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.topbar nav { display:flex; gap:.2rem; flex-wrap:wrap; margin-left:auto; align-items:center; }
.topbar nav a {
  color:#dceaee; padding:.4rem .7rem; border-radius:8px; font-size:.9rem; font-weight:500;
}
.topbar nav a:hover { background:rgba(255,255,255,.1); text-decoration:none; }
.topbar nav a.nav-gear { font-size:1.35rem; padding:.25rem .5rem; line-height:1; }
.entity-pill {
  background:var(--aqua); color:#fff; padding:.35rem .75rem; border-radius:999px;
  font-weight:600; font-size:.85rem; display:inline-flex; gap:.4rem; align-items:center;
}
.entity-pill a { color:#eaf7fa; font-size:.78rem; }

/* ---- layout ---- */
main { max-width:var(--maxw); margin:1.6rem auto; padding:0 1.1rem 3rem; }
.hint { color:var(--muted); font-size:.88rem; }
.muted { color:var(--muted); }

/* ---- flash + banners ---- */
.flash { list-style:none; padding:.7rem 1rem; margin:0 0 1rem; background:var(--aqua-soft);
  border:1px solid #bfe0e7; border-radius:var(--radius-sm); color:var(--navy); }
.banner {
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:var(--radius-sm);
  background:var(--warn); border:1px solid var(--warn-line); margin-bottom:1.2rem; font-size:.94rem;
}
.banner .ico { font-size:1.2rem; }
.banner a.btn { margin-left:auto; }

/* ---- cards ---- */
.cards { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.2rem 1.3rem; display:flex; flex-direction:column;
}
.entity-card { transition:transform .12s ease, box-shadow .12s ease; }
.entity-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(18,52,69,.14); text-decoration:none; }
.entity-card .top { display:flex; align-items:center; gap:.9rem; margin-bottom:.5rem; }
.avatar {
  width:64px; height:64px; border-radius:16px; display:grid; place-items:center; flex:none;
  font-family:'Plus Jakarta Sans'; font-weight:800; color:#fff; font-size:1.7rem;
  background:linear-gradient(135deg,var(--aqua),var(--navy));
}
.entity-card .ename { font-weight:700; font-size:1.4rem; line-height:1.15; color:var(--navy); }
.entity-card .emeta { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:.6rem; }
.entity-card .ekind { font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.entity-card .eabn { font-size:.74rem; color:var(--muted); letter-spacing:.04em; white-space:nowrap; }
.entity-card .stats { display:flex; gap:1.2rem; margin-top:.3rem; }
.entity-card .stat .v { font-family:'Plus Jakarta Sans'; font-weight:700; font-size:1.05rem; }
.entity-card .stat .v.in { color:var(--good); }
.entity-card .stat .v.out { color:var(--bad); }
.entity-card .stat .l { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.entity-card .flags { margin-top:.8rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.chip { font-size:.74rem; padding:.2rem .55rem; border-radius:999px; background:var(--aqua-soft);
  color:var(--aqua-deep); font-weight:600; }
.chip.alert { background:var(--warn); color:#8a6d12; }

/* ---- stat tiles ---- */
.tiles { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-bottom:1.4rem; }
.tiles-3 { grid-template-columns:repeat(3,1fr); margin-bottom:1rem; }
@media (max-width:560px) { .tiles-3 { grid-template-columns:1fr 1fr; } }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow); }
.tile .l { font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.tile .v { font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.5rem; margin-top:.25rem; }
.tile .v.in { color:var(--good); } .tile .v.out { color:var(--bad); }
.tile .hint { display:block; margin-top:.3rem; font-size:.72rem; line-height:1.25; }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; font-size:.92rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th, td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); }
thead th { background:#fbfaf6; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:700; }
tbody tr:last-child td { border-bottom:none; }
tr.income td:first-child { box-shadow:inset 3px 0 0 var(--good); }
tr.expense td:first-child { box-shadow:inset 3px 0 0 var(--bad); }
.amt-in { color:var(--good); font-weight:600; } .amt-out { color:var(--bad); font-weight:600; }
tr.review { background:#fffaf0; }
/* personal-expenses: spend-by-category bars + review flag */
table.catbars td { border-bottom:1px solid var(--line); vertical-align:middle; }
table.catbars .catname { white-space:nowrap; font-weight:600; }
table.catbars .barcell { width:60%; }
table.catbars .bar { display:block; height:.7rem; min-width:2px; border-radius:4px;
  background:var(--aqua, #2b8aa6); }
.pe-table .cat-form select.flag { border-color:var(--bad); background:var(--bad-soft); }
.pe-table td { font-size:.88rem; }
.cat-filter-wrap { margin-left:auto; display:inline-flex; gap:.4rem; align-items:center; }
.cat-filter-wrap select { font-size:.85rem; }
/* charts */
.chart-toolbar { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.4rem 0 1rem; }
.chart-toolbar button { cursor:pointer; }
.chart-toolbar .sep { width:1px; height:1.1rem; background:var(--line); margin:0 .4rem; }
.chart-toolbar .chart-hint { margin-left:auto; }
.chart-wrap { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start; margin-bottom:1.4rem; }
#chart-area { flex:1 1 380px; min-width:300px; }
.chart-legend { flex:0 1 240px; display:flex; flex-direction:column; gap:.3rem; }
#filter-tags .chip { margin-right:.3rem; }
#filter-tags .chip a { cursor:pointer; margin-left:.2rem; font-weight:700; }
.manage-cats { margin:-.6rem 0 1.2rem; }
.manage-cats summary { cursor:pointer; }
.cat-manage { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0; }
.cat-manage .chip a.cat-remove { cursor:pointer; margin-left:.35rem; font-weight:700; color:var(--bad); }
/* bars */
.cbar { display:grid; grid-template-columns:minmax(120px,28%) 1fr auto; gap:.6rem; align-items:center;
  padding:.18rem .3rem; border-radius:6px; cursor:pointer; }
.cbar:hover { background:var(--surface); }
.cbar-name { font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbar-track { background:#eef1f0; border-radius:5px; height:.8rem; overflow:hidden; }
.cbar-fill { display:block; height:100%; border-radius:5px; min-width:2px; }
.cbar-amt { font-variant-numeric:tabular-nums; font-size:.85rem; }
/* donut */
.donut { width:100%; max-width:440px; }
.donut .seg { cursor:pointer; transition:opacity .12s; }
.donut .seg:hover { opacity:.8; }
.donut-c { font-family:'Plus Jakarta Sans'; font-weight:800; font-size:18px; fill:var(--ink,#123); }
.donut-l { font-size:11px; fill:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.chart-legend .leg { cursor:pointer; font-size:.85rem; display:flex; align-items:center; gap:.4rem;
  padding:.15rem .3rem; border-radius:5px; }
.chart-legend .leg:hover { background:var(--surface); }
.chart-legend .swatch { width:.8rem; height:.8rem; border-radius:3px; flex:none; }
/* trend */
.dash-charts { display:flex; flex-wrap:wrap; gap:1.6rem; align-items:flex-start; margin-bottom:1rem; }
.dash-block { display:flex; flex-direction:column; gap:.4rem; }
.dash-block.grow { flex:1 1 340px; min-width:300px; }
.dash-block #dash-donut { max-width:240px; }
#dash-net { width:100%; }
#dash-trend { margin-bottom:1rem; }
.trend { width:100%; }
.trend .tbar { transition:opacity .12s; } .trend .tbar:hover { opacity:.8; }
.trend .tlbl { font-size:10px; fill:var(--muted); }
/* refund matching */
.refund-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.7rem .9rem; margin-bottom:.7rem; box-shadow:var(--shadow); }
.refund-head { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.5rem; }
.refund-cands { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.refund-cands .chip.good { background:var(--good); color:#fff; }
td.miss { background:var(--bad-soft); color:var(--bad); font-style:italic; }
td.miss::after { content:' (missing)'; font-size:.72rem; }
input.missing, select.missing { border-color:var(--bad); background:var(--bad-soft); }
/* Camera capture is for phones/tablets only. A device WITH a mouse/trackpad
   (hover + fine pointer) — i.e. any laptop/desktop, incl. Windows touch laptops —
   has no usable rear camera, so hide it there and show the file picker instead.
   Pure CSS so it works on a plain refresh (no app restart) and doesn't rely on
   user-agent sniffing. The `.no-touch` rules below are a JS fallback. */
.desktop-only { display:none; }
@media (hover: hover) and (pointer: fine) {
  .camera-only { display:none !important; }
  .desktop-only { display:inline; }
}
.no-touch .camera-only { display:none !important; }
.no-touch .desktop-only { display:inline; }

/* ---- camera / file pickers ---- */
.stack .camera-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.6rem 1rem; border:2px dashed var(--aqua); border-radius:var(--radius);
  background:var(--aqua-soft); color:var(--navy); cursor:pointer; text-align:center;
  font-weight:600; width:100%;
}
.camera-tile .cam-ico { font-size:2.8rem; line-height:1; }
.camera-tile:active { background:#d6e9ee; }
.stack .filebtn, label.filebtn {
  display:inline-flex; align-items:center; gap:.5rem; width:auto; cursor:pointer;
  padding:.55rem .9rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--navy); font-weight:600; font-size:.9rem;
}
.filebtn:hover { border-color:var(--aqua); }
.filebtn .fb-ico { font-size:1.2rem; }
.chosen { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--muted); }
.chosen img { height:56px; width:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* ---- buttons + forms ---- */
.btn, button { font:inherit; font-weight:600; padding:.55rem .95rem; border:none; border-radius:9px;
  background:var(--aqua-deep); color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.btn:hover, button:hover { background:var(--navy); text-decoration:none; }
.btn.secondary, button.secondary { background:#eef1f0; color:var(--navy); }
.btn.ghost, button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn.good, button.good { background:var(--good); }
.btn.sm, button.sm { padding:.32rem .6rem; font-size:.82rem; border-radius:7px; }
input, select, textarea {
  font:inherit; padding:.55rem .6rem; border:1px solid var(--line); border-radius:9px;
  background:#fff; color:var(--ink); width:100%;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--aqua-soft); border-color:var(--aqua); }
form.stack { display:flex; flex-direction:column; gap:.8rem; max-width:480px; }
.row2 { display:flex; gap:.8rem; } .row2 > label { flex:1; }
form.stack label { display:flex; flex-direction:column; gap:.25rem; font-size:.86rem; font-weight:600; color:var(--navy); }
form.inline { display:inline; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 1.2rem; }

/* ---- accounts page: import bar + two-column split ---- */
.import-bar { display:flex; gap:.9rem; align-items:flex-end; flex-wrap:wrap; margin:.4rem 0 .3rem; }
.import-bar label { display:flex; flex-direction:column; gap:.2rem; font-weight:600; color:var(--navy); }
.import-bar input, .import-bar select { width:auto; max-width:280px; }
.split { display:flex; gap:1.6rem; align-items:flex-start; }
.split .col { flex:1 1 0; min-width:0; }
.split .col h2 { margin-top:.4rem; }
.split .col h3 { font-size:1rem; color:var(--navy); margin:1.2rem 0 .5rem; }
@media (max-width:860px) { .split { flex-direction:column; } }

/* ---- panels (bank reconcile) ---- */
.bankline { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem 1rem; margin:.7rem 0; box-shadow:var(--shadow); }
.bankhead { display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; }
.bankhead .amt { font-family:'Plus Jakarta Sans'; font-weight:700; }
.bankhead .amt.credit { color:var(--good); } .bankhead .amt.debit { color:var(--bad); }
.bankhead .desc { color:var(--muted); font-size:.9rem; }
.suggest { margin:.5rem 0; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.suggest button { background:var(--good); }
.guessbox { margin-top:.6rem; padding:.7rem .9rem; background:var(--aqua-soft); border-radius:9px;
  border:1px solid #bfe0e7; }
.guessbox .conf { font-size:.8rem; color:var(--muted); }
form.inline-stack { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin:.5rem 0; }
form.inline-stack input, form.inline-stack select { width:auto; }
details summary { cursor:pointer; color:var(--aqua-deep); font-size:.88rem; margin-top:.4rem; }
.itemrow td { padding:.3rem; }
.lineitems input { width:100%; }
footer.foot { max-width:var(--maxw); margin:0 auto; padding:1rem 1.1rem 2rem; color:var(--muted); font-size:.8rem; }

/* ---- dashboard range selector ---- */
.rangebar { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:.2rem 0 1rem; }
.chip-range {
  padding:.35rem .8rem; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--navy); font-weight:600; font-size:.85rem;
}
.chip-range:hover { text-decoration:none; border-color:var(--aqua); }
.chip-range.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.rangebar .hint { margin-left:.4rem; }

/* clickable stat tiles */
a.tile.click { text-decoration:none; transition:box-shadow .12s, transform .12s; }
a.tile.click:hover { box-shadow:0 4px 18px rgba(18,52,69,.14); transform:translateY(-1px); }

/* invoice paid status */
.pill-paid { color:var(--good); font-weight:700; }
tr.paid-row td { background:var(--good-soft); }

/* ---- clickable transaction rows ---- */
tr.rowlink { cursor:pointer; }
tr.rowlink:hover td { background:var(--aqua-soft); }
tr.rowlink select { width:auto; min-width:8rem; }

/* ---- receipt thumbnails ---- */
.rcpt-thumb { display:inline-block; line-height:0; }
.rcpt-thumb img {
  height:40px; width:40px; object-fit:cover; border-radius:7px;
  border:1px solid var(--line); background:#fff;
}
.rcpt-thumb:hover img { outline:2px solid var(--aqua); }
.rcpt-thumb.pdf { font-size:1.4rem; line-height:1; }

/* ---- edit modal ---- */
dialog.txn-modal {
  border:none; border-radius:var(--radius); padding:1.2rem 1.3rem 1.4rem;
  box-shadow:var(--shadow); width:min(520px, 94vw); color:var(--ink);
  background:var(--surface);
}
dialog.txn-modal::backdrop { background:rgba(18,52,69,.45); }
dialog.txn-modal .modal-hint { margin-bottom:.6rem; font-weight:600; color:var(--navy); }
dialog.txn-modal form.stack { max-width:none; }