/* Zaucer CFO dashboard — dark, dense, technical-dashboard look.
   Follows the Zaucer Apps Style Guide (KitchenSync palette) ported to plain CSS:
   blue-tinted dark surfaces, cool-blue accent, JetBrains Mono numerics, 6px radius. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --radius: 6px;

  --background: #0a0c12;
  --background-secondary: #10131c;
  --surface: #13161f;
  --surface-hover: #1c1f2c;
  --surface-secondary: #181b26;

  --foreground: #e8e8ec;
  --muted: #8b8fa0;

  --accent: #6c8cff;
  --accent-hover: #5a7ae6;
  --accent-soft: rgba(108, 140, 255, 0.12);
  --accent-soft-hover: rgba(108, 140, 255, 0.22);

  --border: #262a39;
  --border-tertiary: #3a3e52;

  --success: #22c55e;
  --warning: #eab308;
  --danger:  #ef4444;
  --success-soft: rgba(34, 197, 94, 0.14);
  --warning-soft: rgba(234, 179, 8, 0.16);
  --danger-soft:  rgba(239, 68, 68, 0.14);

  --field-bg: #181b26;
  --field-placeholder: #5a5e70;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* aliases kept so older selectors resolve to the new palette */
  --bg: var(--background);
  --card: var(--surface);
  --line: var(--border);
  --good: var(--success);
  --high: var(--danger);
  --low: var(--warning);
  --navy: var(--foreground);
}

* { box-sizing: border-box; }
body {
  margin: 0; display: flex; min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 13px; line-height: 1.45;
  background: var(--background); color: var(--foreground);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
code { font-family: var(--font-mono); font-size: 0.92em; }

/* ── Left sidebar ── */
.sidebar {
  width: 220px; flex-shrink: 0; background: var(--background-secondary); color: var(--muted);
  display: flex; flex-direction: column; padding: 1rem 0; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; border-right: 1px solid var(--border);
}
.sidebar .brand {
  font-size: 1.1rem; font-weight: 600; color: var(--foreground); text-decoration: none;
  padding: 0 1.1rem 1rem; letter-spacing: -0.01em;
}
.sidebar .brand span { color: var(--accent); font-weight: 500; }
.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav a {
  color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  padding: 0.45rem 1.1rem; border-left: 2px solid transparent;
}
.sidebar nav a:hover { color: var(--foreground); background: var(--surface-secondary); }
.sidebar nav a.active {
  color: var(--foreground); background: var(--surface-secondary); border-left-color: var(--accent);
}
.sidebar .nav-section {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); padding: 0.9rem 1.1rem 0.3rem; opacity: 0.75;
}
.sidebar nav a.nav-sub { padding-left: 1.7rem; }
.sidebar nav a.nav-export { color: var(--accent); }
.sidebar-foot {
  margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar-foot a {
  color: var(--muted); text-decoration: none; font-size: 0.88rem; padding: 0.45rem 1.1rem;
}
.sidebar-foot a:hover { color: var(--foreground); }

.content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; max-width: 1120px; width: 100%; margin: 1.4rem auto; padding: 0 1.4rem; }

/* ── Buttons ── */
.btn {
  background: var(--accent); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  padding: 0.4rem 0.8rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500;
}
.btn:hover { background: var(--accent-hover); }
.btn-mute { background: var(--surface-secondary); color: var(--foreground); border: 1px solid var(--border); }
.btn-mute:hover { background: var(--surface-hover); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-go { background: var(--success); color: #0a0c12; border-color: var(--success); }
.btn-go:hover { filter: brightness(1.08); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-disabled { background: var(--surface-secondary); color: var(--muted); cursor: not-allowed; border: 1px solid var(--border); }
.btn-sm {
  border: 1px solid var(--border); background: var(--surface-secondary); border-radius: var(--radius);
  padding: 0.25rem 0.6rem; font-size: 0.8rem; cursor: pointer; color: var(--foreground); text-decoration: none;
  display: inline-block;
}
.btn-sm:hover { border-color: var(--accent); }

@media (max-width: 760px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .nav-section { width: 100%; }
}

h1 { font-size: 1.4rem; font-weight: 600; margin: 0 0 1.1rem; letter-spacing: -0.01em; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.8rem; color: var(--foreground); }
h3 { font-size: 0.95rem; font-weight: 600; }
.muted { color: var(--muted); font-weight: 400; font-size: 0.9rem; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.1rem;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; margin-bottom: 1.1rem; }
.kpi { text-align: center; border-top: 3px solid var(--border-tertiary); }
.kpi-name { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 1.8rem; font-weight: 600; margin: 0.3rem 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi-target { font-size: 0.78rem; color: var(--muted); }
.kpi.status-good { border-top-color: var(--success); }
.kpi.status-high { border-top-color: var(--danger); }
.kpi.status-low { border-top-color: var(--warning); }
.kpi.status-good .kpi-value { color: var(--success); }
.kpi.status-high .kpi-value { color: var(--danger); }
.kpi.status-low  .kpi-value { color: var(--warning); }

/* Tables */
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th, table.data td { padding: 0.45rem 0.6rem; text-align: left; }
table.data thead th { color: var(--muted); border-bottom: 1px solid var(--border); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
table.data tbody tr { border-bottom: 1px solid var(--border); }
table.data tbody tr:hover { background: var(--surface-secondary); }
table.data .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data tfoot td { font-weight: 600; border-top: 1px solid var(--border-tertiary); padding-top: 0.6rem; }
.statement .section td { font-weight: 600; color: var(--foreground); padding-top: 0.8rem; }
.statement .indent { padding-left: 1.4rem; color: var(--muted); }
.statement .subtotal td { border-top: 1px solid var(--border); font-weight: 600; }
.statement .emphasis td { font-weight: 600; }
.statement .total td { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--border-tertiary); color: var(--foreground); }
tr.subtotal td, tr.total td { font-weight: 600; }

.report-actions { margin-top: 1rem; display: flex; gap: 0.6rem; }
.link { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.link:hover { text-decoration: underline; }
.ok { color: var(--success); font-weight: 600; }
.warn { color: var(--danger); font-weight: 600; }
footer { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 1.4rem; }

/* Banner */
.banner-warn {
  background: var(--warning-soft); border: 1px solid rgba(234, 179, 8, 0.35); color: #e6c046;
  padding: 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1.1rem; font-size: 0.9rem;
}
.banner-warn code { background: rgba(234, 179, 8, 0.18); padding: 0 0.3rem; border-radius: 4px; color: inherit; }
.banner-info {
  background: rgba(108, 140, 255, 0.10); border: 1px solid rgba(108, 140, 255, 0.35);
  color: var(--foreground); padding: 0.7rem 1rem; border-radius: var(--radius);
  margin-bottom: 1.1rem; font-size: 0.9rem;
}

/* Inline spinner for in-progress work (background receipt processing, etc.) */
.spinner {
  display: inline-block; width: 0.72em; height: 0.72em; vertical-align: -0.06em;
  margin-right: 0.35em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #161b2b 0%, var(--background) 60%);
}
.login-card {
  background: var(--surface); padding: 1.8rem 2rem; border-radius: var(--radius); width: 320px;
  border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.login-card .brand { color: var(--foreground); font-size: 1.2rem; font-weight: 600; }
.login-card .brand span { color: var(--accent); }
.login-card h1 { font-size: 1.1rem; margin: 0; }
.login-card label { font-size: 0.85rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.3rem; }

/* Form fields (shared) */
input, select, textarea {
  background: var(--field-bg); color: var(--foreground); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.45rem 0.6rem; font-size: 0.9rem; font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--field-placeholder); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
select { cursor: pointer; }

/* Transactions register */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.filters input[type="search"] { flex: 1; min-width: 180px; }
table.txns td { vertical-align: top; }
table.txns .row-actions { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.small { font-size: 0.78rem; }
.btn.small { padding: 0.15rem 0.5rem; font-size: 0.78rem; }
.rename-form { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.rename-form input { max-width: 18rem; }
.num.pos { color: var(--success); }
.num.neg { color: #f08a8a; }

/* Badges — soft glow (solid hue + tinted bg) */
.badge {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.badge-posted { background: var(--success-soft); color: var(--success); }
.badge-draft { background: var(--warning-soft); color: var(--warning); }
.badge-unmatched { background: var(--danger-soft); color: var(--danger); }
.badge-processing { background: rgba(108, 140, 255, 0.15); color: var(--accent); }
.badge-pending { background: var(--surface-secondary); color: var(--muted); margin-left: 0.2rem; }
.badge-excluded { background: var(--surface-secondary); color: var(--muted); }
.flag-note { font-size: 0.78rem; color: var(--warning); margin-top: 0.2rem; font-weight: 600; }
.pagination { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.cat-form { margin: 0; }
.cat-form select { max-width: 220px; font-size: 0.85rem; padding: 0.3rem 0.4rem; }
.cat-form select.uncat { border-color: var(--danger); color: var(--danger); }
.cat-form select:hover { border-color: var(--accent); }

/* Tabs */
.tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tab {
  padding: 0.5rem 1rem; text-decoration: none; color: var(--muted); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--foreground); }
.tab.active { color: var(--foreground); border-bottom-color: var(--accent); }
.tab .count {
  display: inline-block; background: var(--surface-secondary); border-radius: 999px;
  padding: 0 0.45rem; font-size: 0.76rem; margin-left: 0.2rem; color: var(--muted);
}
.tab.active .count { background: var(--accent-soft); color: var(--accent); }

/* Bulk action bar */
.bulkbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
#selcount { margin-right: auto; }

/* Row actions */
.row-actions { display: flex; gap: 0.35rem; align-items: flex-start; }
.row-actions form { margin: 0; }
.row-actions .btn-mute { background: transparent; color: var(--muted); }

/* Compact per-row action menu (Split / Exclude / …), QuickBooks-style. */
.rowmenu { position: relative; }
.rowmenu[open] { z-index: 30; }
.rowmenu > summary { list-style: none; cursor: pointer; user-select: none; line-height: 1; padding: 0.28rem 0.5rem; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 140px;
  padding: 0.25rem; background: var(--surface-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.rowmenu-list form { margin: 0; }
.rowmenu-list a, .rowmenu-list button {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--foreground); font: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0.4rem 0.6rem; border-radius: 4px; text-decoration: none;
}
.rowmenu-list a:hover, .rowmenu-list button:hover { background: var(--surface); color: var(--accent); }

/* Split editor */
.split-head { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.split-row select { width: 100%; }
.split-row .amt { width: 140px; text-align: right; font-family: var(--font-mono); }
.split-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.split-foot .btn { margin-left: auto; }
.split-foot .muted b { color: var(--foreground); }

/* Split breakdown shown inline in the transactions list */
.split-detail { margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.1rem; }
.split-leg { display: flex; justify-content: space-between; gap: 1rem; }
.split-leg .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Chart of accounts */
.coa-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.import-form { display: flex; align-items: center; gap: 0.6rem; margin-left: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.8rem; }
table.coa tr.inactive { opacity: 0.5; }
.account-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 480px; }
.account-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }

/* Reconciliation */
.recon-start { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.recon-start label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.recon-summary { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.recon-summary > div b { font-size: 1.25rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.recon-finish { margin-left: auto; }
tr.cleared-row { background: var(--success-soft); }
tr.cleared-row td { color: var(--foreground); }
.recon-edit summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.recon-edit .recon-start { margin-top: 1rem; }
.recon-delete { margin-top: 0.8rem; }
.recon-report-head { display: flex; align-items: center; gap: 1rem; }
.recon-report-head form { margin: 0; }

/* Bank connections */
.conn { padding: 1rem 0; border-top: 1px solid var(--border); }
.conn:first-of-type { border-top: 0; }
.conn h3 { margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; }

/* Messages (agent/dev channel) */
.msg-compose-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.msg-compose textarea { width: 100%; box-sizing: border-box; }
.msg { padding: 0.7rem 0; border-top: 1px solid var(--border); }
.msg:first-child { border-top: 0; }
.msg-ack { opacity: 0.55; }
.msg-head { display: flex; align-items: center; gap: 0.5rem; }
.msg-subject { font-weight: 600; margin-top: 0.3rem; }
.msg-body { margin-top: 0.2rem; white-space: pre-wrap; }

/* Receipts */
.receipt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; }
.receipt-doc img, .receipt-doc iframe { width: 100%; max-height: 540px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.receipt-doc iframe { height: 540px; }
.line-cat { display: flex; align-items: center; gap: 0.4rem; margin: 0; flex-wrap: wrap; }
.suggest-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
@media (max-width: 820px) { .receipt-grid { grid-template-columns: 1fr; } }