/* 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:.6rem 1.1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:.6rem; color:#fff; }
.brand img { height:38px; width:38px; 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; }
.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:.7rem; margin-bottom:.9rem; }
.avatar {
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  font-family:'Plus Jakarta Sans'; font-weight:800; color:#fff; font-size:1.2rem;
  background:linear-gradient(135deg,var(--aqua),var(--navy));
}
.entity-card .ename { font-weight:700; font-size:1.15rem; color:var(--navy); }
.entity-card .ekind { font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.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; }
.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); }

/* ---- 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; }
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); }
.no-touch .camera-only { display:none; }

/* ---- 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; }
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; }

/* ---- 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; }