/* ============================================================
   LedgerNest — design tokens
   A single, consistent palette instead of the half-dozen blues
   this file had accumulated. Deep teal for actions/brand, warm
   neutral grays for chrome, and a small set of status colors.
   ============================================================ */
:root {
  --ink: #182420;
  --ink-soft: #57635c;
  --muted: #8f9a93;
  --paper: #ffffff;
  --paper-2: #f6f8f7;
  --card: #ffffff;
  --line: #e1e8e4;
  --line-soft: #ecf1ee;
  --accent: #0e9b78;
  --accent-d: #0b5c49;
  --accent-soft: #e2f5ec;
  --accent-soft-line: #bfe7d7;
  --navy: #182420;
  --ok: #15803d;
  --ok-soft: #e5f6ec;
  --bad: #c0362c;
  --bad-soft: #fbeae8;
  --warn: #b45309;
  --warn-soft: #fdf1e0;
  --violet: #6d4bb8;
  --violet-soft: #efe9fb;
  --blue: #2563a8;
  --blue-soft: #e8f0fa;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(20, 30, 45, 0.04), 0 4px 14px rgba(20, 30, 45, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.06);
  --shadow-lg: 0 18px 44px rgba(15, 30, 50, 0.14);
}

* { box-sizing: border-box; }
/* LedgerNest only ever has one (light) theme of its own, but without this
   the browser/WebView is free to pick a native dark theme for anything it
   renders itself rather than through our CSS - most notably a <select>'s
   own popup list of options, which on Android's WebView can come out
   dark-on-dark (unreadable/"invisible") when the device is in system dark
   mode, since the closed box follows our CSS but the expanded native popup
   doesn't. Declaring the page as light-only fixes that popup (and any other
   native control chrome - date pickers, checkboxes) everywhere at once. */
html { color-scheme: light; }
html, body { margin: 0; min-height: 100%; background: var(--paper-2); color: var(--ink); font-family: "Work Sans", system-ui, -apple-system, Roboto, sans-serif; }
html, body { height: 100vh; overflow: hidden; }
body { font-size: 14px; line-height: 1.5; }
h1, h2, .serif { font-family: "Spectral", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 22px; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   App shell
   ============================================================ */
.app { display: flex; min-height: 100vh; height: 100vh; overflow: hidden; background: var(--paper-2); }
.main { order: 1; flex: 1; min-width: 0; background: var(--paper-2); height: 100vh; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

.sidebar {
  order: 2;
  width: 232px;
  flex-shrink: 0;
  background: var(--paper);
  color: var(--ink);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  padding: 14px 10px 16px;
}
/* Drag-to-resize handle for the sidebar (App.startSidebarResize()) - a real
   flex sibling placed between .main and .sidebar in the DOM (both share
   order:2, so ties are broken by DOM order and this renders first, i.e.
   immediately left of the sidebar's own border), not an absolutely-
   positioned child of .sidebar itself - .sidebar has overflow:hidden, which
   would otherwise clip a handle hanging off its edge.
   Full column height (a real flex item stretches to match its siblings by
   default) with a generous 10px hit-width, not just the visible 1px line,
   is what fixes "cursor corners not show proper": a hair-thin hit target
   made the resize cursor flicker on/off right at the strip's very top and
   bottom edges (exactly where the eye is drawn to line it up with the
   sidebar's border), especially at OS-scaled zoom levels. */
.sidebar-resize-handle {
  order: 2;
  flex: 0 0 auto;
  width: 10px;
  cursor: col-resize;
  position: relative;
  z-index: 6;
}
.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 5px;
  width: 1px;
}
.sidebar-resize-handle:hover::after, .sidebar-resize-handle.dragging::after {
  background: var(--accent);
}
body.sidebar-resizing, body.sidebar-resizing * { cursor: col-resize !important; user-select: none; }
.sidebar .brand { flex: 0 0 auto; position: sticky; top: 0; z-index: 4; background: var(--paper); padding-bottom: 10px; }
.sidebar .nav-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  /* On a full menu (this app easily has more nav items than fit in one
     screen), this list scrolls - and on Windows, where the scrollbar isn't
     an overlay and actually takes up space, that space was only reserved
     once a scrollbar was already showing. Every .nav-btn is width:100% of
     this container, so the highlighted item's right border (visible;
     unselected items only get a transparent one, so the same shift is
     invisible on them) would land right up against, or get sliced by, the
     scrollbar track - looking "cut" - and the usable width would visibly
     shift by the scrollbar's width depending on how many menu sections
     happened to be open. Reserving the gutter always keeps every nav item's
     width identical and predictable, scrollbar or not.
     Bottom padding keeps the very last item (Settings) from sitting flush
     against the boundary with the user-name footer below it. */
  scrollbar-gutter: stable;
  padding-bottom: 10px;
}
.sidebar .side-foot { flex: 0 0 auto; background: var(--paper); padding-top: 8px; }

.brand { display: flex; gap: 12px; align-items: center; padding: 4px 6px 18px; }
.brand .seal {
  width: 36px; height: 36px; border-radius: 10px; background: var(--accent);
  display: grid; place-items: center; color: #fff; font-family: Georgia, serif; font-weight: 650;
}
.brand b { display: block; font-size: 15px; letter-spacing: 0.1px; color: var(--ink); }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.logo-mark {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 36px; box-sizing: border-box;
  object-fit: contain; display: block;
}

.nav-sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #93a4b8; padding: 14px 10px 6px; font-weight: 700; }
.nav-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 1px solid transparent; background: transparent; color: var(--ink-soft); text-align: left;
  margin: 2px 0; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px;
}
.nav-btn:hover { background: var(--paper-2); color: var(--ink); }
.nav-btn.on, .nav-btn.nav-aim {
  background: transparent !important; color: var(--accent-d) !important;
  border: 1px solid transparent !important; border-left: 3px solid var(--accent) !important; font-weight: 650;
  outline: none !important; box-shadow: none !important;
}
.nav-k { color: var(--accent) !important; font-weight: 800; }
.sidebar .nav-k { color: var(--accent) !important; }
/* Inside a solid .btn (background: var(--accent)) the accent-colored letter
   above is invisible - teal text on the same teal fill. Day-entries'
   Deposit/Payment/Journal/Transfer buttons hit this. Render the shortcut
   letter in white + underlined there instead, so it stays visible and still
   reads as a called-out letter. */
.btn .nav-k { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; }
.pill { background: var(--accent-soft); color: var(--accent-d); border-radius: 99px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.sidebar .badge, .sidebar .count, .sidebar .nav-btn .badge, .sidebar .nav-btn span[style] {
  background: var(--accent-soft); color: var(--accent-d); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.side-foot { text-align: center; font-weight: 700; color: var(--ink); padding: 10px 8px; font-size: 12px; line-height: 1.45; }
.side-foot .muted { font-weight: 700; color: var(--accent); display: block; }
/* Developer credit lives here (opened via the menu) instead of on every
   single screen, where it used to sit as a permanent footer bar. */
.dev-credit { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 10.5px; font-weight: 400; color: var(--muted); line-height: 1.5; }
.sidebar button.out { margin-top: 8px; width: 100%; border-radius: var(--radius-sm); background: var(--accent); color: #fff; }
.sidebar button.out:hover { background: var(--accent-d); }

.top {
  height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  z-index: 30; position: relative;
}
.crumb { color: var(--muted); font-size: 13px; }
.top-right { display: flex; align-items: center; gap: 12px; position: relative; }
.clock { font-size: 13px; color: var(--ink-soft); font-weight: 650; white-space: nowrap; }
.bell { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 6px 10px; cursor: pointer; position: relative; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.avatar-wrap { position: relative; z-index: 201; }
.user-menu, .notes-pop {
  position: absolute; right: 0; top: 44px; width: 240px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; z-index: 200;
}
.user-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 0; cursor: pointer; }
.user-menu button:hover { color: var(--accent); }
.note-line { padding: 6px 0; border-bottom: 1px solid var(--line); }

.content { flex: 1; min-height: 0; overflow: auto; padding: 22px 24px; padding-bottom: 22px; display: flex; flex-direction: column; }
.content.page-home { overflow: auto !important; }

/* ============================================================
   Typography / layout helpers
   ============================================================ */
.lede { display: none; }
.page-head { margin-bottom: 10px; }
.page-head h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; }
.page-head.tight { margin: 0 !important; }
.h-sm { font-size: 18px !important; margin: 0 !important; }
.tight-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.tight-head h1 { margin: 0; font-size: 22px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1.3fr .9fr; gap: 14px; }
.split { display: grid; grid-template-columns: 1fr 168px; gap: 12px; align-items: start; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.tight { display: flex; gap: 8px; align-items: center; }
.row.tight .slim { width: 140px; height: 32px; }
.row.compact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--muted); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.clip { max-width: 260px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ============================================================
   Cards / KPIs
   ============================================================ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.card-head { margin-bottom: 18px; }
.kpi .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.kpi .val { font-family: "Segoe UI", sans-serif; font-size: 24px; font-weight: 700; margin-top: 6px; color: var(--ink); }
/* Light tints for the Home dashboard's KPI cards only (opt-in via kpi(l,v,tone) -
   GST/TDS pages call kpi() without a tone and keep the plain white card). */
.kpi.kpi-mint { background: var(--accent-soft); border-color: var(--accent-soft-line); }
.kpi.kpi-mint .val { color: var(--accent-d); }
.kpi.kpi-green { background: var(--ok-soft); }
.kpi.kpi-green .val { color: var(--ok); }
.kpi.kpi-amber { background: var(--warn-soft); }
.kpi.kpi-amber .val { color: var(--warn); }
.kpi.kpi-violet { background: var(--violet-soft); }
.kpi.kpi-violet .val { color: var(--violet); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  border: 1px solid transparent; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 650; font-size: 13.5px; transition: background .12s ease;
}
.btn:hover { background: var(--accent-d); }
.btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.quiet:hover { background: var(--paper-2); }
.btn.forest, button.btn.forest { background: var(--ok); color: #fff; border: 1px solid #106b34; }
.btn.forest:hover, button.btn.forest:hover, .btn.forest:focus, button.btn.forest:focus { background: #106b34; }
.btn.gold { background: var(--warn); color: #fff; }
.btn.tiny { padding: 5px 10px; font-size: 12px; }
.btn.tiny.on { background: var(--accent); color: #fff; }
/* Extra-compact variant for a row that already has its own primary click
   target (e.g. the ledger name itself opens its book) and only needs small
   secondary actions like Edit/Delete alongside it. */
.btn.mini { padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.led-actions { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.btn.risk { background: #fff; color: var(--bad); border: 1px solid #f0c7c2; }
.btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.btn-post, button.btn.btn-post { background: var(--navy) !important; color: #fff !important; border: 1px solid var(--navy) !important; }
.btn.btn-post:hover, .btn.btn-post:focus, button.btn.btn-post:hover, button.btn.btn-post:focus {
  background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important;
}
.content table .btn.tiny.quiet { background: #55677c !important; color: #fff !important; border: 1px solid #3c4c5e !important; }
.content.page-banks .btn.tiny.quiet:hover, .content.page-banks .btn.tiny.quiet:focus, .content.page-banks .btn.tiny.quiet:focus-visible {
  background: #3c4c5e !important; color: #fff !important;
}
.out { background: var(--accent); border: 0; color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-top: 8px; font-weight: 650; }
.out:hover { background: var(--accent-d); }
.login .btn, .lockPage .btn, button.btn[onclick*="unlockTab"] { background: var(--accent) !important; color: #fff !important; }

/* ============================================================
   Forms
   ============================================================ */
input, select, textarea {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 5px; font-weight: 650; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
select.slim, input.slim, .filter-bar.compact input[type=date], .filter-bar.compact select {
  height: 32px; font-size: 13px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  max-width: 180px; width: auto;
}
select.bank-slim { width: auto !important; min-width: 120px; max-width: 200px; padding: 4px 8px; font-size: 13px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.filter-bar input[type=date] { width: 140px; }
.filter-bar .qbox { width: 220px; }
.filter-bar.compact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 4px; }
.filter-bar.compact label { display: none; }
.feat-list { display: grid; gap: 8px; margin-top: 10px; max-width: 420px; }
.feat { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; }
.feat input { width: 16px; height: 16px; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent-soft-line); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--accent-d); }
.chip input { margin: 0; }
.master-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.master-actions select.btn, .master-actions .btn.eq { height: 32px; min-width: 118px; font-size: 13px; padding: 0 12px; }
.toolbar-eq .btn.eq, .toolbar-eq input[type=date] { height: 36px; min-height: 36px; padding: 0 14px; font-size: 13px; box-sizing: border-box; }
.toolbar-eq .feat { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; margin: 0; }
.toolbar-eq .feat input { width: 16px; height: 16px; }
.toolbar-eq label { margin: 0; }
.stmt-top select.slim, .stmt-top input { height: 28px; font-size: 12px; padding: 2px 8px; width: auto; }
.stmt-top .btn { padding: 4px 8px; font-size: 12px; }
.brs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.brs-bar select, .brs-bar input.brs-sm { width: auto; min-width: 140px; max-width: 220px; padding: 6px 8px; font-size: 13px; }
.brs-bar .btn.tiny { padding: 6px 10px; }

/* ============================================================
   Tables
   ============================================================ */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); font-weight: 700; }
td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.content table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.content table th, .content table td { border-bottom: 1px solid var(--line); padding: 8px 9px; vertical-align: middle; }
.content table thead th { background: var(--paper-2); color: var(--ink-soft); font-weight: 700; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.content table tbody tr:nth-child(even) td { background: #fafbfd; }
/* Journal/Deposit/Payment/Transfer entry lines table: a line's ledger cell
   can grow taller than its Debit/Credit cells (the balance-hint line below
   the select, see .led-bal-hint) - with the default vertical-align:middle
   that let each row's Debit/Credit inputs drift up or down depending on
   whether THAT row happened to have a hint, so the inputs looked staggered
   from row to row. Anchoring every cell to the top of its row keeps the
   select/inputs level across every line regardless of hint height. Same
   specificity as the ".content table td" rule above (0,1,2) - placed after
   it in source order so it wins on the entry-lines table without needing
   an extra class or !important. */
table.jlines td { vertical-align: top; }
.led-bal-hint { font-size: 11px; margin-top: 4px; line-height: 1.3; }
.scroll-pane { max-height: calc(100vh - 250px); overflow: auto; flex: 1; min-height: 0; }
.scroll-pane.tall { max-height: calc(100vh - 210px) !important; overflow: auto !important; }
.scroll-pane thead th, .scroll-pane.tall thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.bank-scroll { max-height: calc(100vh - 320px); min-height: 240px; overflow: auto; }
.bank-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
/* The Ledger/Party <select> boxes were left to the browser's own table
   auto-layout, which sizes a <select style="width:100%"> by its own tiny
   intrinsic minimum rather than by the option text inside it - so both
   dropdowns were squeezed down to a sliver ("Pai...") no matter how long a
   party or ledger name was, while spare width piled up elsewhere. A fixed
   column layout (set on the table itself via .bank-grid, widths given
   per-column below) makes every column's width predictable and gives
   Ledger/Party a real, consistent share of the row instead of whatever was
   left over. */
.bank-grid { table-layout: fixed; }
.bank-grid td .clip { max-width: 100%; width: 100%; }
.bank-grid td, .bank-grid th { overflow: hidden; text-overflow: ellipsis; }
tr.lined td { border-top: 1px solid #ccd3db; }
tr.strong td { font-weight: 700; }
/* Sub-account rows under a statement head (P&L/BS "Expand ledgers"). Was
   plain-weight var(--accent) at 13px - readable but looked thin/washed-out
   next to the bold black head rows above it. Kept the same accent color
   family (still visually distinct from a head row) but switched to the
   darker --accent-d shade with semi-bold weight for better contrast and
   legibility, matching the visual weight .led-link already uses (650)
   elsewhere in these statements. */
.exp-row td { color: var(--accent-d); font-weight: 600; font-size: 13px; }
.warn-row td { background: var(--warn-soft); }
a.led-link, .led-link, button.led-link { color: var(--ink); background: none; border: 0; font-weight: 650; cursor: pointer; padding: 0; text-decoration: none; }
.led-link:hover { color: var(--accent); text-decoration: underline; }
a.led-link:focus, a.led-link:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; }
.led-row { cursor: pointer; }
.narr-plain { font-weight: 400 !important; color: var(--ink-soft); }

/* row highlight (selection / keyboard aim) */
tr.row-on, tr.stmt-aim, tr.row-on td, tr.stmt-aim td, .home-aim.row-on, .home-aim.stmt-aim {
  background: var(--accent-soft) !important; outline: none !important; box-shadow: none !important;
}
.page-newentry tr.row-on, .page-newentry tr.stmt-aim,
.content.page-newentry table tbody tr, .content.page-newentry table tbody tr.row-on,
.content.page-newentry table tbody tr.stmt-aim, .content.page-newentry table tbody tr td,
.content.page-banks tr.row-on, .content.page-banks tr.row-on td,
.content.page-banks tr.stmt-aim, .content.page-banks tr.stmt-aim td {
  background: transparent !important; outline: none !important; box-shadow: none !important;
}

/* ============================================================
   Tags / badges / nature chips
   ============================================================ */
.tag { display: inline-flex; border-radius: 6px; padding: 2px 9px; font-size: 11px; font-weight: 650; letter-spacing: .02em; border: 1px solid transparent; }
.tag.in { background: var(--ok-soft); color: var(--ok); border-color: #a9e2bd; }
.tag.out { background: var(--bad-soft); color: var(--bad); border-color: #f0c2bc; }
.tag.move { background: var(--warn-soft); color: var(--warn); border-color: #f3d19c; }
.tag.adj { background: var(--violet-soft); color: var(--violet); border-color: #d3c3f0; }
.tag.inv { background: var(--accent-soft); color: var(--accent-d); border-color: var(--accent-soft-line); }
.nchip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 650; font-size: 12px; }
.nchip.n-exp { background: var(--ok); color: #fff; }
.nchip.n-inc { background: var(--accent); color: #fff; }
.nchip.n-ast { background: #2563a8; color: #fff; }
.nchip.n-lia { background: var(--violet); color: #fff; }
/* Ledgers-list "Nature" column badge - same 4 categories as .nchip above
   (reused there for a ledger NAME, which is variable length by nature, so
   that one stays solid-colored/content-width), but this one only ever
   holds one of 4 fixed words, so it can be a light, uniform-width pill -
   much easier to scan down a whole column of them. */
.nchip.nat-pill { display: inline-flex; align-items: center; justify-content: center; width: 84px; padding: 3px 4px; border: 1px solid transparent; }
.nchip.nat-pill.n-exp { background: var(--ok-soft); color: var(--ok); border-color: #a9e2bd; }
.nchip.nat-pill.n-inc { background: var(--accent-soft); color: var(--accent-d); border-color: var(--accent-soft-line); }
.nchip.nat-pill.n-ast { background: var(--blue-soft); color: var(--blue); border-color: #b9d3ee; }
.nchip.nat-pill.n-lia { background: var(--violet-soft); color: var(--violet); border-color: #d3c3f0; }

/* ============================================================
   Tabs / segmented controls
   ============================================================ */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; background: transparent; padding: 0; border-radius: 0; width: max-content; max-width: 100%; flex-wrap: wrap; }
/* Same solid look as the app's primary .btn (e.g. "New ledger") - filled
   accent green, white text - used uniformly for every tab-strip/action-row
   button in the app (Bank sheet's PDF extract/To classify/Written to books/
   Left out/Narration rules, Day entries' Newest first/Voice/Delete selected/
   Deposit/Payment/Journal/Transfer, GST's GSTR-1/GSTR-3B/etc.) instead of
   each place inventing its own treatment. The active/current tab (.on) is
   the same green one shade darker (--accent-d, the same tone .btn already
   uses on :hover) rather than a different color, so "which tab is this"
   stays readable without breaking the uniform green/white look. */
.tab, .tab-chip, button.tab {
  border: 1px solid transparent; background: var(--accent); padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer;
  color: #fff; font-weight: 650; font-size: 13px;
}
.tab:hover, .tab-chip:hover { background: var(--accent-d); }
.tab.on, .tab-chip.on { background: var(--accent-d); color: #fff; border-color: var(--accent-d); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aim-hint { display: inline-block; min-width: 52px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-d); border: 1px solid var(--accent-soft-line); }
.aim-hint.is-list, .aim-hint.is-menu { background: var(--accent-soft); color: var(--accent-d); border-color: var(--accent-soft-line); }

.kindbar { display: flex; gap: 6px; margin-bottom: 14px; }
.kindbar button {
  flex: 1; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  padding: 9px 8px; cursor: pointer; font-weight: 650; color: var(--ink-soft); font-size: 13px;
}
.kindbar button.on { background: var(--accent-soft); color: var(--accent-d); border-color: var(--accent-soft-line); }
.kindbar button .letter {
  display: inline-block; min-width: 18px; margin-right: 4px;
  border-radius: 4px; background: var(--accent-soft); color: var(--accent-d); font-weight: 800; font-size: 12px;
}
.kindbar button.on .letter { background: var(--accent); color: #fff; }
/* The entry screen's own Deposit/Payment/Journal/Transfer quick-switch row
   (below Save) used to be a separate "kindbar" look (white pills + a colored
   accelerator-letter badge) - now uses the same .tab/.tab-chip class as
   every other tab-strip/action-row button in the app instead, so it's
   plain, uniform green/white here too (.row, not .kindbar, avoids the
   dead-but-still-matching `.kindbar button` rules above overriding that). */
.row.bottom-kinds { margin-top: 14px; }

/* ============================================================
   Entry screen (Day entries / new voucher)
   ============================================================ */
.entry-grid { display: grid; grid-template-columns: 140px 120px 1fr; gap: 8px 12px; }
.entry-grid.three { display: grid; grid-template-columns: 140px 120px 1fr; gap: 8px 12px; }
.amt-box input { font-size: 22px; font-family: Georgia, serif; text-align: right; padding: 12px; }
#e-date { letter-spacing: .06em; }
#e-narr { max-width: 100%; }
#e-type { font: inherit; font-weight: 700; border: 1px solid var(--line); padding: 4px 8px; }
#e-type.type-pill { border-radius: 999px; font-weight: 700; padding: 5px 13px; border: none; font-size: 13px; margin: 0 0 8px; display: inline-block; }
#e-type.type-Deposit { background: var(--ok-soft); color: var(--ok); }
#e-type.type-Payment { background: var(--bad-soft); color: var(--bad); }
#e-type.type-Journal { background: var(--warn-soft); color: var(--warn); }
#e-type.type-Transfer { background: var(--accent-soft); color: var(--accent-d); }

.keys-slim { padding: 10px 8px; }
.keys-vert { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.keys-vert kbd { margin-right: 4px; }
.keys dt { float: left; clear: left; width: 92px; margin: 0 0 8px; }
.keys dd { margin: 0 0 8px 92px; color: var(--muted); }
.keys { margin: 12px 0 0; }
.keys-table { width: 100%; font-size: 13px; }
.keys-table td:first-child { width: 42%; white-space: nowrap; }
.keys-table.tight td { padding: 3px 6px; font-size: 12px; }
kbd {
  display: inline-block; min-width: 1.4em; text-align: center;
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  padding: 1px 6px; font-size: 12px; font-family: ui-monospace, Consolas, monospace;
  box-shadow: 0 1px 0 var(--line);
  font-weight: 700;
}

/* focus rings inside the entry table stay quiet, matching the field itself */
.entry-grid input:focus, .entry-grid input:focus-visible,
.content table select:focus, .content table select:focus-visible,
.content table input:focus, .content table input:focus-visible,
#e-date:focus, #e-narr:focus, #e-date:focus-visible, #e-narr:focus-visible,
.content.page-newentry table input:focus, .content.page-newentry table select:focus,
.content.page-newentry #e-narr:focus, .content.page-newentry #e-date:focus,
tr.row-on input:focus, tr.stmt-aim input:focus, tr.row-on select:focus, tr.stmt-aim select:focus,
tr.row-on input:focus-visible, tr.stmt-aim input:focus-visible {
  outline: none !important; box-shadow: none !important;
  background: var(--accent-soft) !important; border: 1px solid var(--accent-soft-line) !important;
}
.content table tbody tr:has(select:focus), .content table tbody tr:has(input:focus) {
  outline: none !important; box-shadow: none !important; background: transparent !important;
}
.content.page-banks input:focus, .content.page-banks select:focus,
.content.page-banks input:focus-visible, .content.page-banks select:focus-visible {
  background: var(--accent-soft) !important; border: 1px solid var(--accent-soft-line) !important;
}

/* ============================================================
   Modals
   ============================================================ */
.mask { position: fixed; inset: 0; background: rgba(20,30,45,.45); display: grid; place-items: center; z-index: 30; padding: 20px; }
.modal { background: var(--card); width: min(780px, 96vw); max-height: 88vh; overflow: auto; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg); }
.modal.wide { width: min(880px, 96vw); }
.modal.led-full { width: 96vw; max-width: 96vw; height: 94vh; max-height: 94vh; overflow: auto; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }

/* ============================================================
   Charts / calendar (Home)
   ============================================================ */
.bars { display: flex; align-items: flex-end; gap: 16px; height: 140px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pair { display: flex; gap: 4px; align-items: flex-end; height: 110px; }
.b { width: 12px; border-radius: 4px 4px 0 0; }
.cal { margin: 0; padding: 0; }
.cal li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); list-style: none; }

/* Home dashboard - a fixed, meaningful accent per card (never cycled) reused
   from the same tokens the KPI tiles above already use, so the page reads
   as more than a wall of identical white cards without turning into a
   rainbow. */
.home-card { border-top: 3px solid var(--line); }
.home-card.tone-accent { border-top-color: var(--accent); }
.home-card.tone-violet { border-top-color: var(--violet); }
.home-card.tone-amber  { border-top-color: var(--warn); }
.home-card.tone-green  { border-top-color: var(--ok); }
.home-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.home-dot.tone-accent { background: var(--accent); }
.home-dot.tone-violet { background: var(--violet); }
.home-dot.tone-amber  { background: var(--warn); }
.home-dot.tone-green  { background: var(--ok); }
.home-legend { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); }
.home-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.home-legend .lg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }

/* ============================================================
   Suggest / search popovers
   ============================================================ */
.suggest-list { margin-top: 10px; max-height: 320px; overflow: auto; }
.suggest-row { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.suggest-row small { display: block; color: var(--muted); font-weight: 500; }
.suggest-row:hover { background: var(--accent-soft); }
/* Reports > Ledger: the "Select ledger" picker box sat with zero space
   between it and .rep-sheet right below it, so the picker's own border and
   the report paper's border ran together / visually "mixed" into one
   block. margin-bottom gives them a clean gap. */
.led-pick { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; margin-bottom: 14px; }
.col-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ============================================================
   Reports / statement paper
   ============================================================ */
.rep-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.rep-side { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 170px); overflow: auto; }
.rep-side select, .rep-side input, .rep-side .btn { width: 100%; }
.rep-opts { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.rep-opts summary { cursor: pointer; font-size: 13px; }
.rep-opts .feat { display: block; margin: 4px 0; }
.rep-sheet { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow); max-height: calc(100vh - 210px); overflow: auto; }
.rep-sheet, .rep-sheet .serif, .rep-title, .led-head { font-family: "Spectral", Georgia, serif !important; }
.rep-banner { position: relative; text-align: center; background: linear-gradient(180deg, var(--accent-soft), #fff); border-bottom: 3px solid var(--accent); padding: 12px 8px 14px; margin: -8px -8px 16px; padding-top: 6px; }
.rep-banner .rep-title, .rep-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.rep-foot { margin-top: 16px; border-top: 1px solid var(--accent-soft-line); padding-top: 8px; text-align: center; font-size: 12px; color: var(--accent-d); font-weight: 700; }
.rep-table { table-layout: auto; width: 100%; }
.rep-table th { background: var(--accent); color: #fff; }
.rep-table tr:nth-child(even) td { background: #f7fafb; }
.rep-table td.num, .rep-table th.num { white-space: nowrap; min-width: 88px; }
.rep-block { margin: 16px 0 22px; page-break-before: always; break-before: page; }
.rep-block:first-child { page-break-before: auto; break-before: auto; }
.rep-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* Was written as a text-badge box (inline-flex + centered bold letter) from
   before the real logo image was wired in - the actual LOGO_MARK_URI PNG is
   200x139 (not square), so forcing it into a bare 28x28 box with no
   object-fit stretched/squashed it out of shape every time this banner
   rendered. .logo-mark (sidebar/login/gate) already solved this the right
   way - mirror that same treatment here at the Reports banner's smaller
   size, so the mark scales down cleanly instead of distorting. */
.rep-logo { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 28px; box-sizing: border-box; object-fit: contain; display: block; }
.ln-mark { position: absolute; left: 12px; top: 12px; background: var(--accent); color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 4px; font-size: 11px; }
.stmt-head { text-align: center; margin-bottom: 14px; }
.stmt-head .serif { font-size: 22px; }
table.stmt td.pad-l { padding-left: 22px; }
/* Traditional Balance Sheet's side-by-side Liabilities/Assets table - kept
   compact and bordered like a real printed statement, rather than the wide,
   airy row spacing the app's generic data-entry tables use. */
.t-sheet { display: flex; gap: 0; border: 1px solid var(--line); max-width: 880px; margin: 0 auto; background: #fff; }
.t-sheet > div { padding: 6px 0; flex: 1 1 0; min-width: 0; overflow: hidden; }
.t-sheet > div + div { border-left: 1px solid var(--line); }
/* #stmt-paper table sets a 720px min-width so a single full-width report
   table never gets too cramped on a narrow screen - but t-sheet holds TWO
   side-by-side tables, so that same minimum would force each one to demand
   720px (1440px total), overflowing its half-width column. Reset it here
   (matching #stmt-paper's own ID specificity so the override actually wins). */
.t-sheet table.stmt { table-layout: fixed; width: 100%; }
#stmt-paper .t-sheet table.stmt { min-width: 0; }
.t-sheet table.stmt th, .t-sheet table.stmt td { padding: 4px 10px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.t-sheet table.stmt td { border-bottom: none; }
.t-sheet table.stmt td.pad-l { padding-left: 20px; }
.t-sheet table.stmt tr.lined td { border-top: 1px solid #ccd3db; padding-top: 6px; }
.t-sheet table.stmt th.num, .t-sheet table.stmt td.num { width: 118px; white-space: nowrap; }
.inv-paper { max-width: 800px; }
.led-head { font-family: "Spectral", Georgia, serif; font-size: 20px; font-weight: 700; color: var(--ink); }
.led-banner { display: inline-block; background: var(--accent-soft); border: 1px solid var(--accent-soft-line); color: var(--accent-d); font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.fmt-pair { display: inline-flex; gap: 6px; align-items: center; }

/* ============================================================
   Voice entry
   ============================================================ */
.voice-seq { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.voice-seq span { color: var(--accent); margin: 0 6px; }
.voice-ex { font-size: 16px; color: var(--accent); }
.voice-card { padding: 18px; }

/* ============================================================
   Calculator
   ============================================================ */
.calc-win { position: fixed; z-index: 60; width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.calc-head { background: var(--accent); color: #fff; padding: 8px 10px; border-radius: 12px 12px 0 0; cursor: move; font-weight: 700; display: flex; justify-content: space-between; }
.calc-head button { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 16px; }
.calc-out { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 10px; font-size: 20px; text-align: right; }
.calc-keys { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 10px; }
.calc-keys button { border: 1px solid var(--line); background: var(--paper-2); border-radius: 8px; padding: 8px; cursor: pointer; font-weight: 700; }

/* ============================================================
   Gate / login screens
   ============================================================ */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--paper-2); }
html, body { overflow: auto !important; }
.gate-wrap { height: 100vh; overflow: auto !important; background: linear-gradient(180deg, var(--paper-2) 0%, #eef2f6 100%); padding: 0 0 48px; }
.gate-hero { background: linear-gradient(135deg, #0d2b3f 0%, #12445a 55%, var(--accent-d) 100%); color: #fff; padding: 28px 24px 64px; }
.gate-hero-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gate-tagline, .gate-tag { letter-spacing: .18em; font-size: 12px; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,.75); }
.gate-hero .brand b { color: #fff !important; font-weight: 700 !important; font-size: 22px; }
.gate-hero .brand small { color: rgba(255,255,255,.9) !important; font-weight: 600; }
.gate-art { max-width: 920px; margin: 0 auto 8px; }
.gate-card { width: min(1120px, 96vw); margin: -48px auto 32px; position: relative; z-index: 2; box-shadow: var(--shadow-lg); }

/* ============================================================
   Companies list
   ============================================================ */
.co-scroll { max-height: 280px; overflow: auto; border-top: 1px solid var(--line-soft); }
.co-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.co-name { font-weight: 600; }

/* ============================================================
   Dock (unused / hidden by default)
   ============================================================ */
.dock { position: sticky; bottom: 0; display: none; gap: 4px; background: var(--navy); padding: 8px; justify-content: space-around; }
.dock button { flex: 1; border: 0; background: transparent; color: #d9cebf; font-size: 11px; font-weight: 700; padding: 8px 4px; border-radius: 8px; cursor: pointer; }
.dock button.on { background: var(--accent); color: #fff; }

/* ============================================================
   Dev / footer bar
   ============================================================ */
.devbar { border-top: 1px solid var(--line); padding: 10px 24px; font-size: 11px; color: var(--muted); }
.devbar strong, .devbar b { color: var(--ink); font-weight: 700; }
.devbar a { color: var(--accent); text-decoration: none; }
.dev-mini { font-size: 11px; color: var(--muted); margin-top: 14px; font-weight: 400; }

/* ============================================================
   Converter helper
   ============================================================ */
.convert { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.convert.slim .card.slim { padding: 8px 10px; }
.convert.slim .serif { display: none; }
.convert.slim p { display: none; }
.step { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   Ledger book / statement scrolling panes
   ============================================================ */
#led-book { display: flex; flex-direction: column; max-height: calc(100vh - 88px); overflow: hidden; }
.led-pin { flex: 0 0 auto; background: var(--paper-2); }
.led-amt-scroll, .led-amt-scroll.stick-head { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto !important; }
.led-amt-scroll thead th, .led-amt-scroll.stick-head thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
.led-full .led-amt-scroll { max-height: calc(94vh - 180px); overflow: auto; }
#led-book .between, #led-book .filter-bar, #led-book .led-banner { position: sticky; top: 0; background: var(--paper-2); z-index: 4; }

.stmt-pin { flex: 0 0 auto; padding: 0; }
#stmt-paper { flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 168px) !important; overflow: auto !important; }
#stmt-paper table { min-width: 720px; }
.stmt-scroll-full { overflow: auto !important; max-height: calc(100vh - 160px) !important; }

/* ============================================================
   Per-page scroll-region fixes (structural — page content can be
   taller than the viewport, so each page owns its own scroller)
   ============================================================ */
.content.page-firm { overflow: auto !important; max-height: calc(100vh - 72px); }
.content.page-brs { overflow: auto !important; max-height: calc(100vh - 72px); padding-bottom: 48px; }
.content.page-people { overflow: auto !important; max-height: calc(100vh - 72px); padding-bottom: 80px; }
.content.page-bills { overflow: auto !important; max-height: calc(100vh - 72px); padding-bottom: 80px; }
.content.page-gst, .content.page-tds { overflow: auto !important; max-height: calc(100vh - 88px) !important; padding-bottom: 80px !important; }

/* ============================================================
   Accessibility — focus ring
   ============================================================ */
:focus { outline: none; }
/* This used to be "outline: none !important" - in CSS, !important always
   wins over a non-!important declaration no matter how specific the other
   selector is, so that one word was silently cancelling the very next rule
   below (which restores a 2px accent outline on every input/select/button/
   link/tab on keyboard focus) on every element it was meant to apply to.
   Dropping it here is the entire fix - no new rule, no new color, just
   letting the app's own already-designed focus ring actually take effect. */
:focus-visible { outline: none; box-shadow: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .tab:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-btn:focus-visible { outline: none; }
.nav-btn.on:focus-visible, .nav-btn.nav-aim:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }

/* ============================================================
   Keyboard "aim" affordances (sidebar / work area)
   ============================================================ */
.sidebar.nav-aim-zone, .content.work-aim { outline: 1px solid var(--accent-soft-line) !important; outline-offset: -1px; }

/* ============================================================
   Print
   ============================================================ */
.no-print { }
@media print {
  .sidebar, .top, .devbar, .btn, .topbar, .filter-bar, .tab, .no-print, .col-picks, .rep-side { display: none !important; }
  .app { display: block; }
  .rep-wrap { display: block; }
}

/* ============================================================
   Responsive / mobile
   ============================================================ */
.menu-btn { display: none; }
.nav-backdrop { display: none; }
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

@media (max-width: 900px) {
  .grid-4, .grid-2, .form-2, .form-3, .split,
  .entry-grid, .entry-grid.three, .convert { grid-template-columns: 1fr !important; }
  .t-sheet { flex-direction: column; }
  .t-sheet > div { flex: none; width: 100%; }
  .t-sheet > div + div { border-left: none; border-top: 1px solid var(--line); }

  .content { padding: 14px 12px; }
  .card { padding: 14px; }

  /* The sidebar becomes a slide-in drawer below - fixed-width by design on
     a phone, so the drag handle (a desktop-only affordance) has no meaning
     here and would just be an extra dead strip of screen. */
  .sidebar-resize-handle { display: none; }

  /* The sidebar becomes a slide-in drawer instead of just vanishing at
     this width - toggled by the new .menu-btn in .top and closed again
     by tapping the backdrop or picking a menu item (App.toggleNav()),
     so every screen stays reachable on a phone. */
  .sidebar {
    position: fixed; top: 0; right: 0; height: 100vh; max-height: 100vh;
    /* !important: the sidebar carries a per-device inline width (the
       desktop resize handle above, App.startSidebarResize()) which would
       otherwise win over this rule by specificity and break the drawer's
       deliberate mobile sizing. */
    width: min(80vw, 300px) !important; z-index: 500; box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .22s ease;
    /* Belt-and-suspenders on top of the Android app shell's own status-bar
       padding: since this drawer is position:fixed (its own stacking/
       compositing layer), some WebView versions don't reliably carry the
       host view's padding into a fixed-position layer the same way they do
       for normal scrolled content. env(safe-area-inset-top) is the web
       platform's own standard way to ask "how tall is the notch/status bar
       right now" - it resolves to 0 anywhere that isn't edge-to-edge (plain
       desktop/browser use is unaffected) and to the real value once
       viewport-fit=cover is set (see index.html) and the app draws
       edge-to-edge (already the case here), so this keeps the drawer's own
       top row of menu items clear of the status bar even if the native
       Android padding fix doesn't apply to this exact layer on a given
       device. Also trimmed the drawer's own internal spacing a bit smaller
       than the desktop sidebar so the full menu comfortably fits a phone
       screen's shorter height without needing this env() padding to eat
       into space the menu list actually needs. */
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .sidebar.nav-open { transform: translateX(0); }
  .sidebar .brand { padding: 2px 6px 10px; }
  .sidebar .brand .seal, .sidebar .brand .logo-mark { width: 30px; height: 30px; }
  .sidebar .nav-sec { padding: 10px 8px 4px; font-size: 9.5px; }
  .sidebar .nav-btn { padding: 7px 10px; margin: 1px 0; font-size: 13px; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(15,25,38,.42); z-index: 480; }
  .nav-backdrop.on { display: block; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; cursor: pointer; font-size: 18px; flex: 0 0 auto; padding: 0;
  }

  .top {
    height: auto; min-height: 58px; flex-wrap: wrap; gap: 8px;
    padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .top-left .serif { max-width: 48vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .crumb { display: none; }
  .top-right { gap: 8px; }
  .top-right #q-all { width: 120px; }
  .clock { display: none; }
  /* The MENU/LIST pill is a keyboard-navigation focus indicator - useful on
     desktop where Tab/Alt shortcuts move focus between panes, meaningless
     on a touch screen, so it just clutters the mobile top bar. */
  .aim-hint { display: none; }

  /* Below 16px, iOS Safari auto-zooms the page on focusing a text field -
     jarring on a form-heavy app like this one - so every field gets a
     16px floor on small screens without changing the desktop scale. */
  input, select, textarea { font-size: 16px; }

  /* table{width:100%} squeezes a wide table down to a narrow phone's
     width, wrapping every cell into an unreadable stack. Letting the
     table keep its natural width and scoping the horizontal scroll to
     its own card/scroll-pane (rather than the whole page) keeps page
     headers and buttons in place while just the grid scrolls sideways. */
  .card, .scroll-pane, .bank-scroll, #stmt-paper { overflow-x: auto; }
  .content table { width: auto; min-width: 100%; }
  .content table.bank-grid, .content table.pdfext-grid { min-width: 640px; }
  .rep-table { min-width: 540px; }

  /* Giving a plain .card overflow-x:auto above also forces its overflow-y
     to auto (a box can't mix "auto" on one axis with "visible" on the
     other), and since .content is a flex column, any flex child whose
     overflow isn't visible gets an automatic minimum size of 0 instead of
     one based on its content. So once a page's stacked cards add up to
     more than the screen's height, an ordinary card (e.g. Home's
     "Bank-wise balance" table) gets squeezed down to a sliver instead of
     just letting the whole page scroll - the card's own table ends up
     hidden inside its own near-zero height. Cards built to deliberately
     shrink/scroll internally (.scroll-pane) are excluded; every other
     card is floored at its natural content height. */
  .card:not(.scroll-pane) { min-height: min-content; }

  /* The Home/GST/TDS summary cards (.grid-4 of .kpi cards) were stacking to
     one full-width card each on a phone - four tall cards just to show one
     number apiece, pushing the real data (GST tables, the Home chart) well
     below the fold before any of it is visible. Two columns of smaller
     cards cuts that stack height roughly in half. */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .card.kpi { padding: 10px 12px; }
  .kpi .lbl { font-size: 10px; }
  .kpi .val { font-size: 17px; margin-top: 3px; }

  /* Tab/segmented-control rows (GST's GSTR-1/GSTR-3B/HSN summary/... row,
     and similar elsewhere) at full desktop size take up a lot of width and
     wrap across several lines on a phone - shrinking them leaves more of
     the screen for the actual table underneath. */
  .tab, .tab-chip, button.tab { padding: 5px 9px; font-size: 11.5px; }
  .tabs { gap: 5px; margin-bottom: 10px; }

  /* GST/TDS (and a few other pages) cap .content's height with a fixed
     "100vh minus N px" formula sized for the desktop top bar. On a phone
     the top bar can wrap onto two lines (hamburger+name, then search/bell/
     avatar below it) and is taller than that fixed number allows for, so
     the calc() undershoots the real available space - the bottom of the
     page then extends past what .main's own overflow:hidden shows, and
     that portion is never reachable by scrolling however far you scroll.
     Removing the fixed cap lets these pages fall back to the ordinary
     flex-based sizing every other page already uses, which measures the
     real (however-tall-it-wrapped) top bar automatically. */
  .content.page-gst, .content.page-tds,
  .content.page-firm, .content.page-brs,
  .content.page-people, .content.page-bills {
    max-height: none !important;
  }

  /* Day entries' Voice/Delete selected/Deposit/Payment/Journal/Transfer
     row used full desktop-size buttons, which wrapped onto two tall rows
     above the list on a phone. Shrinking just this row (rather than every
     .btn everywhere, which would also shrink buttons elsewhere that are
     fine at full size) gets it down closer to one compact strip. */
  .entries-actions { gap: 6px; }
  .entries-actions .btn, .entries-actions .tab-chip { padding: 5px 9px; font-size: 11.5px; }

  /* A ledger's own book view (opened by tapping a ledger name) packs a
     year-range select, two date pickers, Apply/Refresh, a search box +
     Enter, Delete selected and a Debit/Credit toggle into one filter bar -
     at full desktop control sizes each one lands on its own line, pushing
     six-plus rows of controls above any actual transaction. Shrinking the
     controls (and letting the search box shrink despite its own inline
     width) lets more of them share each row. */
  #led-book .led-banner { padding: 4px 8px; font-size: 12px; }
  #led-book .filter-bar.compact { gap: 6px; margin: 3px 0; }
  #led-book .filter-bar.compact input[type=date] { height: 28px; font-size: 11.5px; padding: 0 6px; max-width: 108px; }
  #led-book .filter-bar.compact select.slim { height: 28px; font-size: 11.5px; padding: 0 6px; max-width: 140px; }
  #led-book .filter-bar.compact input:not([type=date]) { height: 28px; font-size: 12px; padding: 0 8px; width: 150px !important; }
  #led-book .filter-bar.compact .btn.tiny { padding: 4px 8px; font-size: 11px; }

  /* The Reports page's own report-kind select, year/date range controls,
     "Daily balance"/old-new-first/Preview-Print row, and (for P&L/Balance
     Sheet) the Notes/Previous year/%change/... chip row all used full
     desktop-size controls, wrapping across many rows above the actual
     report - the same "tabs too big" issue already fixed elsewhere in the
     app. Shrinking just these rows, and letting the ledger picker sit full
     width instead of a fixed max-width, keeps far more of the screen for
     the report itself. */
  .rep-acts .btn, .rep-acts .tab-chip { padding: 5px 9px; font-size: 11.5px; }
  .rep-acts .feat { font-size: 12px; }
  .rep-filters { gap: 6px; }
  .rep-filters select, .rep-filters input[type=date] { height: 30px; font-size: 12px; padding: 0 8px; }
  .rep-filters .btn.tiny { padding: 5px 9px; font-size: 11.5px; }
  .rep-filters label { margin: 0; font-size: 11.5px; }
  .col-picks .chip { padding: 4px 8px; font-size: 11px; }
  .led-pick { padding: 4px; }
}

@media (max-width: 420px) {
  .top-right #q-all { display: none; }
  .top-right button[onclick*="runSearch"] { display: none; }
}
@media (max-width: 900px) { .convert, .entry-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Elevated page components — added when the Home/Day-entries/
   Ledgers/Settings/Reports pages were rebuilt to match the
   approved editorial design concept. Purely additive: nothing
   above this block was touched, no existing selector removed.
   ============================================================ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; }
.page-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

.stat-row { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; background: var(--card); flex-wrap: wrap; }
.stat-row .stat { flex: 1; min-width: 170px; padding: 18px 24px; border-right: 1px solid var(--line); }
.stat-row .stat:last-child { border-right: none; }
.stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stat-value { font-family: "Spectral", Georgia, serif; font-weight: 600; font-size: 25px; letter-spacing: -.01em; margin-top: 8px; }
.stat-delta { font-size: 11.5px; margin-top: 6px; display: flex; align-items: center; gap: 4px; color: var(--ink-soft); }
.stat-delta svg { width: 10px; height: 10px; stroke: currentColor; flex: 0 0 auto; }
.stat-delta.up { color: var(--accent-d); }
.stat-delta.down { color: var(--bad); }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 14.5px; font-weight: 600; font-family: "Spectral", Georgia, serif; }
.panel-cap { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.panel-body { padding: 20px; }

.checklist { display: flex; flex-direction: column; gap: 12px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.check-item input[type=checkbox] { width: 15px; height: 15px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.check-item.done .check-label { color: var(--muted); text-decoration: line-through; }

.status-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-asset { color: var(--blue); }
.status-liability { color: var(--violet); }
.status-expense { color: var(--warn); }
.status-income { color: var(--accent-d); }
.status-deposit { color: var(--accent-d); }
.status-payment { color: var(--warn); }
.status-journal { color: var(--violet); }
.status-transfer { color: var(--blue); }

.toggle { width: 38px; height: 21px; border-radius: 11px; background: var(--line); position: relative; flex: 0 0 auto; }
.toggle.on { background: var(--accent); }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on .toggle-knob { left: 19px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line-soft); gap: 16px; }
.toggle-row:last-child { border-bottom: none; }
.toggle-row-label { font-size: 13px; font-weight: 500; }
.toggle-row-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.letterhead2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1.5px solid var(--ink); }
.letterhead2-brand { display: flex; align-items: center; gap: 12px; }
.letterhead2-mark { width: 44px; height: 30px; flex: 0 0 auto; }
.letterhead2-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.letterhead2-co { font-family: "Spectral", Georgia, serif; font-weight: 700; font-size: 15px; }
.letterhead2-addr { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.letterhead2-meta { text-align: right; font-size: 11.5px; color: var(--ink-soft); }
.letterhead2-meta .serif { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

.report-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font-family: inherit; }
.report-row:last-child { border-bottom: none; }
.report-row.on { background: var(--accent-soft); }
.report-row-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink-soft); flex: 0 0 auto; }
.report-row.on .report-row-icon { background: var(--card); color: var(--accent-d); }
.report-row svg { width: 15px; height: 15px; stroke: currentColor; }
.report-row-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.report-row-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-actions button { background: none; border: none; color: var(--muted); width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.row-actions button:hover { color: var(--ink); background: var(--line-soft); }
.row-actions svg { width: 14px; height: 14px; stroke: currentColor; }

.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.field2 { display: flex; flex-direction: column; gap: 6px; }
.field2 label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.field2.full { grid-column: 1 / -1; }
.field2 input, .field2 select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; font-family: inherit; font-size: 13px; color: var(--ink); background: var(--card); }

.logo-well { width: 64px; height: 64px; border-radius: var(--radius); border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; overflow: hidden; }
.logo-well img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
  .stat-row { flex-direction: column; }
  .stat-row .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-row .stat:last-child { border-bottom: none; }
  .form-grid2 { grid-template-columns: 1fr; }
}

/* ====================================================================
   TAXBYTE LAYOUT (2026-10) - rebuilt from scratch to match the Taxbyte
   app: warm paper background, top bar with brand + FY + "Saved" pill,
   plain left rail with underlined section headings, one white centre
   sheet with a serif title, and a sticky right summary column.
   Fonts are bundled (css/fonts, SIL OFL): Inter for UI (Taxbyte uses
   Public Sans), Lora for headings (Taxbyte uses Spectral), Consolas /
   system mono for figures (Taxbyte uses IBM Plex Mono).
   ==================================================================== */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff") format("woff"); }
@font-face { font-family: "Lora"; font-weight: 500; font-display: swap; src: url("fonts/Lora-500.woff") format("woff"); }
@font-face { font-family: "Lora"; font-weight: 600; font-display: swap; src: url("fonts/Lora-600.woff") format("woff"); }
@font-face { font-family: "Lora"; font-weight: 700; font-display: swap; src: url("fonts/Lora-700.woff") format("woff"); }

:root {
  --paper: #f4f6f3; --sheet: #ffffff; --ink: #1b2626; --muted: #5b6a68; --rule: #d8dfdb; --rule-strong: #b9c4bf;
  --teal: #0e6656; --teal-d: #0a4f43; --teal-soft: #e2efeb; --saffron: #a8620c; --saffron-soft: #fbf0e0;
  --red: #b3261e; --red-soft: #fbe9e7; --green: #1d7a3e; --green-soft: #e5f3e9; --navyb: #0a2348; --leaf: #3a7a2c;
  /* map the app's older token names onto the Taxbyte palette */
  --paper-2: var(--paper); --card: var(--sheet); --line: var(--rule); --line-soft: #e8ede9; --ink-soft: #3d4a48;
  --accent: var(--teal); --accent-d: var(--teal-d); --accent-soft: var(--teal-soft); --accent-soft-line: #bcd9d0;
  --navy: var(--teal); --ok: var(--green); --ok-soft: var(--green-soft); --bad: var(--red); --bad-soft: var(--red-soft);
  --warn: var(--saffron); --warn-soft: var(--saffron-soft); --violet: #5b4a9e; --violet-soft: #eeebf7; --blue: #1f5a8a; --blue-soft: #e6eff7;
  --c-sales: #0e6656; --c-purch: #a8620c;
  --radius: 12px; --radius-sm: 7px; --radius-lg: 14px;
  --shadow: none; --shadow-sm: none; --shadow-lg: 0 10px 30px rgb(0 0 0 / .10);
  --f-ui: "Inter", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head: "Lora", "Spectral", Georgia, serif;
  --f-num: "IBM Plex Mono", Consolas, ui-monospace, "Cascadia Mono", monospace;
}
html, body { background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .serif, .rep-title, .led-head, .panel-head h2, .letterhead2-co { font-family: var(--f-head) !important; letter-spacing: 0; color: var(--ink); }
h1 { font-size: 23px; font-weight: 600; }
.serif { font-weight: 600; }
.num, td.num, .kpi-num, .sm-big, .sm-row b, .sm-cmp b { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.rep-sheet, .rep-sheet .serif { font-family: var(--f-head) !important; }
.rep-sheet td.num, .rep-sheet th.num { font-family: var(--f-num) !important; }

/* ---------------- shell ---------------- */
.app.tb { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; background: var(--paper); }
.tb-top { position: relative; height: auto; min-height: 56px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px 18px; padding: 8px 16px;
  background: var(--sheet); border-bottom: 1px solid var(--rule); box-shadow: none; backdrop-filter: none; z-index: 30; }
.tb-top .top-left { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.tb-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.tb-word { font-weight: 800; font-size: 20px; letter-spacing: -.015em; }
.tb-a { color: var(--navyb); } .tb-b { color: var(--leaf); }
.tb-fy { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; }
.top-co { min-width: 0; margin-right: auto; padding-left: 16px; border-left: 1px solid var(--rule); }
.top-co .co-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.top-co .crumb { font-size: 11.5px; color: var(--muted); }
.tb-top .top-right { display: flex; align-items: center; gap: 10px; }
.searchbox { position: relative; display: flex; align-items: center; gap: 6px; }
.searchbox > .ic { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.searchbox input { width: 260px; height: 34px; min-height: 34px; padding: 0 10px 0 32px; background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; font-size: 13px; }
.searchbox .btn.tiny { height: 34px; }
.clock { font-size: 12px; color: var(--muted); font-weight: 500; font-family: var(--f-num); }
.saved-pill { background: var(--teal-soft); color: var(--teal); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.bell { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 9px; border: 1px solid var(--rule); border-radius: 7px; background: var(--sheet); color: var(--muted); cursor: pointer; }
.bell .ic { width: 16px; height: 16px; }
.bell .pill { background: var(--saffron); color: #fff; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; border: 0; font-weight: 700; }
.aim-hint { background: var(--paper); color: var(--muted); border: 1px solid var(--rule); font-family: var(--f-ui); }
.aim-hint.is-menu { background: var(--teal-soft); color: var(--teal); border-color: var(--accent-soft-line); }
.user-menu, .notes-pop { top: 44px; border-radius: 10px; border-color: var(--rule); box-shadow: var(--shadow-lg); }

.tb-wrap { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; padding: 0; }

/* left rail */
.app.tb .sidebar.rail { order: 0; position: relative; height: auto; max-height: none; flex: 0 0 auto; background: transparent; border: 0; color: var(--ink);
  padding: 18px 6px 12px 16px; display: flex; flex-direction: column; overflow: hidden; }
.app.tb .sidebar .nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; scrollbar-gutter: auto; padding: 0 6px 12px 0; }
.app.tb .sidebar .nav-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.app.tb .nav-sec { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  padding: 14px 10px 6px; }
.app.tb .nav-sec:first-child { padding-top: 2px; }
.app.tb .nav-btn { display: flex; width: 100%; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; padding: 6px 10px; margin: 1px 0;
  border-radius: 7px; cursor: pointer; text-align: left; box-shadow: none; }
.app.tb .nav-btn .nav-l { display: inline-flex; align-items: center; gap: 0; }
.app.tb .nav-btn .ic { display: none; }
.app.tb .nav-btn:hover { background: var(--teal-soft); color: var(--ink); }
.app.tb .nav-btn.on, .app.tb .nav-btn.nav-aim { background: var(--teal-soft) !important; color: var(--teal) !important; font-weight: 600; border: 0 !important; box-shadow: none !important; }
.app.tb .sidebar .nav-k, .app.tb .nav-k { color: var(--teal) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.app.tb .sidebar .pill, .app.tb .nav-btn .pill { background: var(--saffron-soft); color: var(--saffron); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.app.tb .side-foot { flex: 0 0 auto; text-align: left; padding: 10px 10px 0; border-top: 1px solid var(--rule); color: var(--ink); font-size: 12px; font-weight: 600; background: transparent; margin-right: 6px; }
.app.tb .side-foot .muted { color: var(--teal); display: inline; }
.app.tb .sidebar.nav-aim-zone { outline: none !important; }
.app.tb .sidebar.nav-aim-zone .nav-sec { color: var(--teal); }
.app.tb .sidebar-resize-handle { order: 0; width: 8px; flex: 0 0 8px; cursor: col-resize; position: relative; }
.app.tb .sidebar-resize-handle::after { left: 3px; }

/* centre sheet */
.app.tb .main { order: 0; flex: 1 1 auto; min-width: 0; height: auto; display: flex; flex-direction: column; min-height: 0; background: transparent; overflow: hidden; padding: 16px 8px 16px 12px; }
.app.tb .content { flex: 1 1 auto; min-height: 0; overflow: auto !important; max-height: none !important; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px;
  padding: 22px 24px 18px; display: flex; flex-direction: column; }
.app.tb .content.work-aim { outline: none !important; }
.tb-credit { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.tb-credit b { color: var(--ink-soft); }
.content > * + .tb-credit { margin-top: 22px; }

/* right summary column */
.summary { flex: 0 0 292px; padding: 16px 16px 16px 8px; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.summary::-webkit-scrollbar { display: none; }
.sm-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 16px 14px; margin-bottom: 12px; }
.sm-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.sm-big { font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; margin-bottom: 8px; }
.sm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sm-chips .chip { background: var(--saffron-soft); color: var(--saffron); border: 0; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.sm-chips .chip.ok { background: var(--teal-soft); color: var(--teal); }
.sm-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--ink-soft); }
.sm-row b { font-weight: 500; color: var(--ink); font-size: 12.5px; }
.sm-total { border-top: 1px solid var(--rule-strong); margin-top: 6px; padding-top: 6px; }
.sm-total .sm-row span { font-weight: 600; color: var(--ink); }
.sm-total b { font-weight: 700 !important; }
.sm-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.sm-cmp > div { border: 1px solid var(--rule); border-radius: 8px; padding: 9px 10px; }
.sm-cmp > div.on { background: var(--teal-soft); border-color: var(--teal); }
.sm-cmp small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sm-cmp b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-note { font-size: 12px; color: var(--muted); }
.ok { color: var(--green); } .bad { color: var(--red); }

/* ---------------- page furniture ---------------- */
.page-head, .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.dash-eyebrow { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.ph-ic { display: none !important; }
.content h1.ph { display: block; }
.lede { display: none; }

/* summary tiles -> Taxbyte stat strip (bordered boxes, label + mono figure) */
.kpi-grid, .grid-4:has(.kpi-tile) { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.kpi-tile { display: block; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; box-shadow: none; position: static; }
.kpi-tile::after { display: none; }
.kpi-tile .kpi-ic { display: none; }
.kpi-tile .stat-label, .stat-label, .kpi .lbl { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.kpi-num { font-family: var(--f-num); font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-num small { font-size: 11px; font-weight: 500; color: var(--muted); }
.kpi-tile .stat-delta { font-size: 11.5px; margin-top: 2px; color: var(--muted); }
.kpi-tile.t-orange { background: var(--saffron-soft); border-color: #ecd3ad; }
.kpi-tile.t-orange .kpi-num { color: var(--saffron); }
.kpi-tile:last-child.t-green, .kpi-tile.t-green:has(+ .none) { }
.stat-delta.up { color: var(--green); } .stat-delta.down { color: var(--red); }

/* cards and panels inside the sheet: flat, ruled */
.card, .panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: none; }
.card { padding: 16px 18px; }
.panel-head { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: 16px; font-weight: 600; }
.panel-cap { font-size: 12px; color: var(--muted); }
.panel-body { padding: 14px 16px; }
.panel-foot { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--rule); background: #fafbf9; font-size: 13px; }
.panel-foot b { font-family: var(--f-num); margin-left: 4px; }
.content > .panel + .panel, .content > .card + .card { margin-top: 14px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.dash-grid.two-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* buttons: Taxbyte solid teal / outlined teal */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--teal); color: #fff; border: 1px solid var(--teal); border-radius: 7px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; line-height: 1.25; box-shadow: none; cursor: pointer; }
.btn:hover { background: var(--teal-d); border-color: var(--teal-d); }
.btn .ic { width: 14px; height: 14px; }
.btn kbd { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .3); color: inherit; box-shadow: none; font-size: 10.5px; padding: 0 4px; }
.btn.quiet { background: var(--sheet); color: var(--teal); border: 1px solid var(--teal); }
.btn.quiet:hover { background: var(--teal-soft); }
.btn.quiet kbd { background: var(--teal-soft); border-color: var(--accent-soft-line); }
.btn.tiny { padding: 4px 10px; font-size: 12px; }
.btn.mini { padding: 2px 8px; font-size: 11px; }
.btn.risk { background: var(--sheet); color: var(--red); border-color: #e4b4ae; }
.btn.forest, button.btn.forest { background: var(--green); border-color: var(--green); }
.btn.gold { background: var(--saffron); border-color: var(--saffron); }
.btn.btn-post, button.btn.btn-post { background: var(--teal) !important; border-color: var(--teal) !important; color: #fff !important; }
.btn.btn-post:hover, .btn.btn-post:focus, button.btn.btn-post:hover, button.btn.btn-post:focus { background: var(--teal-d) !important; border-color: var(--teal-d) !important; }
.content table .btn.tiny.quiet { background: var(--sheet) !important; color: var(--teal) !important; border: 1px solid var(--teal) !important; }
.content table .btn.tiny.quiet:hover { background: var(--teal-soft) !important; }
.btn .nav-k { color: #fff !important; }
.out, .sidebar button.out { background: var(--teal); }
.login .btn, .lockPage .btn, button.btn[onclick*="unlockTab"] { background: var(--teal) !important; border-color: var(--teal) !important; }

/* tab strips: outlined teal, active = solid teal (Clients / Firm settings / Data style) */
.tab, .tab-chip, button.tab { background: var(--sheet); color: var(--teal); border: 1px solid var(--teal); border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; box-shadow: none; }
.tab:hover, .tab-chip:hover { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.tab.on, .tab-chip.on { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: none; }
.tab .nav-k, .tab-chip .nav-k { color: inherit !important; }

/* forms */
input, select, textarea { background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 8px 11px; min-height: 36px; font-size: 14px; color: var(--ink); box-shadow: none; }
input:focus, select:focus, textarea:focus { background: var(--sheet); border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); outline: none; }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--teal); }
label { font-size: 12.5px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
select.slim, input.slim { height: 34px; min-height: 34px; }
.field2 input, .field2 select { background: var(--paper); }
.field2 label { color: var(--muted); font-weight: 500; }

/* tables: ruled, uppercase spaced headers */
table { font-size: 13.5px; }
.content table { background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; }
.content table thead th, th { background: #f7f9f7; color: var(--muted); font-size: 11px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.content table th, .content table td { padding: 8px 10px; border-bottom: 1px solid #e8ede9; }
.content table tbody tr:nth-child(even) td { background: transparent; }
.content table tbody tr:hover td { background: #f7faf8; }
.content.page-newentry table tbody tr:hover td { background: transparent; }
.content table.plain-table { border: 0; }
.content table.plain-table td { padding: 9px 16px; }
.plain-table .ic { width: 15px; height: 15px; color: var(--muted); vertical-align: -3px; }
tr.row-on, tr.stmt-aim, tr.row-on td, tr.stmt-aim td { background: var(--teal-soft) !important; }
.rep-table th { background: #f7f9f7 !important; color: var(--muted) !important; }
.rep-sheet { border-radius: 10px; box-shadow: none; }
.rep-banner { background: linear-gradient(180deg, var(--teal-soft), #fff); border-bottom-color: var(--teal); }
.rep-foot { color: var(--teal); border-top-color: var(--accent-soft-line); }
.ln-mark { background: var(--teal); }
a.led-link, .led-link { color: var(--teal); font-weight: 600; }
.led-link:hover { color: var(--teal-d); }

/* badges: one size (Deposit = Sales = Payment...) */
.tag { border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.tag.in { background: var(--green-soft); color: var(--green); border-color: #bfe0c9; }
.tag.out { background: var(--red-soft); color: var(--red); border-color: #efc4bf; }
.tag.move { background: var(--saffron-soft); color: var(--saffron); border-color: #ecd3ad; }
.tag.inv { background: var(--teal-soft); color: var(--teal); border-color: var(--accent-soft-line); }
.content table .tag { min-width: 92px; justify-content: center; text-align: center; box-sizing: border-box; }
.chip { border-color: var(--accent-soft-line); background: var(--teal-soft); color: var(--teal); }
.nchip.nat-pill.n-inc { background: var(--teal-soft); color: var(--teal); }

/* dashboard chart */
.chart-body { padding: 8px 12px 2px; }
.dash-chart { width: 100%; height: auto; max-height: 250px; display: block; }
.dash-chart .grid { stroke: #e8ede9; } .dash-chart .base { stroke: var(--rule-strong); }
.dash-chart .ax { fill: var(--muted); font-size: 10.5px; font-family: var(--f-ui); }
.dash-chart .bs { fill: var(--c-sales); } .dash-chart .bp { fill: var(--c-purch); }
.dash-chart .hit { fill: transparent; } .dash-chart .mgrp:hover .hit { fill: rgb(14 102 86 / .06); }
.home-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); }
.home-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.home-legend .lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ql { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; cursor: pointer; color: var(--ink); font: inherit; font-weight: 600; font-size: 13px; }
.ql:hover { border-color: var(--teal); background: var(--teal-soft); }
.ql .ic { width: 17px; height: 17px; color: var(--teal); flex: 0 0 auto; }
.ql small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.empty-mini { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.empty-mini .ic { width: 17px; height: 17px; color: var(--green); }
.book-card { border-top: 1px solid var(--rule); background: #fafbf9; }
.small { font-size: 12px; } .nowrap { white-space: nowrap; }

/* voucher entry */
#e-type.type-pill { font-family: var(--f-head); font-size: 15px; padding: 6px 14px; }
.content.page-newentry .split { grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; }
table.jlines input { text-align: right; font-family: var(--f-num); }
#e-bal { display: inline-flex; font-weight: 600; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; margin: 10px 0; }
#e-bal.ok { background: var(--green-soft); color: var(--green); }
#e-bal.bad { background: var(--saffron-soft); color: var(--saffron); }
.btn.btn-save { padding: 9px 22px; font-size: 14px; }
.btn.btn-save:focus, #e-save:focus { background: var(--teal-d); box-shadow: 0 0 0 3px rgb(14 102 86 / .3) !important; outline: none !important; }
#j-more:focus { box-shadow: 0 0 0 2px var(--teal) !important; }
.entry-grid input:focus, .content table select:focus, .content table input:focus, #e-date:focus, #e-narr:focus,
.content.page-newentry table input:focus, .content.page-newentry table select:focus, .content.page-banks input:focus, .content.page-banks select:focus {
  background: var(--sheet) !important; border: 1px solid var(--teal) !important; box-shadow: 0 0 0 2px var(--teal) !important;
}
kbd { font-family: var(--f-num); border-color: var(--rule); background: var(--paper); box-shadow: 0 1px 0 var(--rule); color: var(--ink); font-weight: 600; font-size: 11px; }

/* modals, calculator, login */
.mask { background: rgb(20 30 28 / .42); }
.modal { border-radius: 12px; border: 1px solid var(--rule); }
.calc-head { background: var(--teal); }
.login { background: var(--paper); }
.login .card, .login > div { border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .08); }
.gate-hero { background: linear-gradient(135deg, var(--teal-d), var(--teal)); }
.co-row { border-bottom-color: var(--rule); }

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) { .summary { display: none; } .searchbox input { width: 200px; } }
@media (max-width: 1000px) { .clock, .saved-pill { display: none; } .top-co .co-title { max-width: 24vw; } }
@media (max-width: 900px) {
  .app.tb .sidebar.rail { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: min(80vw, 280px) !important; z-index: 500; background: var(--sheet);
    border-right: 1px solid var(--rule); transform: translateX(-100%); transition: transform .2s ease; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .app.tb .sidebar.rail.nav-open { transform: translateX(0); }
  .app.tb .sidebar-resize-handle { display: none; }
  .app.tb .main { padding: 10px; }
  .app.tb .content { padding: 14px; }
  .dash-grid, .dash-grid.two-even, .quick-links { grid-template-columns: 1fr; }
  .top-co { display: none; }
  .searchbox input { width: 130px; }
}
@media (max-width: 420px) { .searchbox { display: none; } }
@media print {
  .tb-top, .summary, .sidebar, .tb-credit, .dash-actions { display: none !important; }
  .app.tb, .tb-wrap, .app.tb .main, .app.tb .content { display: block; height: auto; overflow: visible !important; border: 0; padding: 0; }
}
@media (max-width: 1600px) { .dash-grid, .dash-grid.two-even { grid-template-columns: minmax(0, 1fr); } .quick-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .quick-links { grid-template-columns: 1fr 1fr; } }
.home-legend { white-space: nowrap; }
/* sign-in card, Taxbyte style: large centred logo, centred credit */
.login .card { padding: 28px 30px; }
.login .brand { flex-direction: column; text-align: center; gap: 8px; padding: 0 0 16px !important; }
.login .brand .logo-mark { width: 110px; height: 110px; flex-basis: 110px; border-radius: 24px; box-shadow: 0 4px 14px rgb(0 0 0 / .08); }
.login .brand b { font-size: 24px; font-weight: 800; color: var(--navyb); letter-spacing: -.015em; }
.login .brand small { color: var(--muted); letter-spacing: .08em; }
.login .dev-mini { text-align: center; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.login .btn { padding: 9px; }

/* ---- 2026-10 round 4: compact screens, one scroller ---- */
/* The page sheet is the single scroll area; inner list panes no longer have
   their own fixed "100vh minus N" heights (those were sized for the old
   layout and cut the bottom of lists off). Table headers stay pinned. */
.app.tb .scroll-pane, .app.tb .scroll-pane.tall, .app.tb .bank-scroll, .app.tb .rep-side,
.app.tb #stmt-paper, .app.tb .stmt-scroll-full, .app.tb .rep-sheet, .app.tb .led-amt-scroll, .app.tb #led-book {
  max-height: none !important; overflow: visible !important; height: auto !important;
}
.app.tb #led-book { display: block; }
.app.tb .content table { overflow: visible; }
.app.tb .content thead th { position: sticky; top: -16px; z-index: 2; }
.app.tb .content table tr { scroll-margin-top: 48px; scroll-margin-bottom: 16px; }
.app.tb #led-book .between, .app.tb #led-book .filter-bar, .app.tb #led-book .led-banner { top: -16px; }

/* compact sheet (no summary column on these screens) */
.app.tb .content { padding: 16px 20px 14px; }
.app.tb .main { padding: 12px 12px 12px 8px; }
.app.tb .content h1 { font-size: 21px; }
.app.tb .page-head, .app.tb .dash-head { margin-bottom: 10px; }
.app.tb .page-sub { font-size: 12.5px; margin-top: 1px; }
.app.tb .kpi-grid, .app.tb .grid-4:has(.kpi-tile) { gap: 6px; margin-bottom: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.app.tb .kpi-tile { padding: 6px 10px; }
.app.tb .kpi-tile .stat-label { font-size: 10px; }
.app.tb .kpi-num { font-size: 14px; }
.app.tb .kpi-tile .stat-delta { font-size: 11px; margin-top: 0; }
.app.tb .panel-head { padding: 9px 14px; }
.app.tb .card { padding: 12px 14px; }
.app.tb .tabs { margin: 0 0 10px; gap: 5px; }
.app.tb .content table th, .app.tb .content table td { padding: 6px 9px; }
.app.tb .content table { font-size: 13px; }
.app.tb .content table td.num, .app.tb .content table th.num { white-space: nowrap; }
.app.tb .entries-actions .tab-chip, .app.tb .entries-actions .btn { padding: 4px 10px; font-size: 12px; }
.app.tb input, .app.tb select { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.app.tb .tb-credit { padding-top: 10px; font-size: 11.5px; }
.app.tb .content > * + .tb-credit { margin-top: 16px; }

/* GST tables: everything fits - compact type, no wrapped amounts/GSTINs */
.content.page-gst .rep-table { table-layout: auto; font-size: 12.5px; }
.content.page-gst .rep-table th { font-size: 10px; letter-spacing: .05em; white-space: nowrap; padding: 6px 7px; }
.content.page-gst .rep-table td { padding: 6px 7px; white-space: nowrap; }
.content.page-gst .rep-table td.num, .content.page-gst .rep-table th.num { min-width: 0; font-size: 12px; }
.content.page-gst .rep-table td:nth-child(2) { white-space: normal; min-width: 120px; }
.content.page-gst #gst-paper { overflow-x: auto; }
.content.page-gst .serif { font-size: 14.5px; margin: 6px 0 4px; }
.content.page-gst .kpi-tile .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-dates { font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 1px; white-space: nowrap; }
/* flex children of the sheet must not shrink - that is what made long
   statements spill over the footer instead of scrolling */
.app.tb .content > * { flex: 0 0 auto !important; min-height: auto !important; }
.app.tb #stmt-paper { flex: 0 0 auto !important; }
.app.tb input[type=checkbox], .app.tb input[type=radio] { min-height: 0; width: 15px; height: 15px; padding: 0; }
.app.tb .searchbox input { padding: 0 10px 0 32px; min-height: 34px; height: 34px; }
/* inventory reports: fit 10 columns on a laptop screen */
.content table.inv-table { font-size: 12.5px; }
.content table.inv-table th { font-size: 10px; letter-spacing: .04em; padding: 6px 7px; white-space: normal; vertical-align: bottom; }
.content table.inv-table td { padding: 6px 7px; }
.content table.inv-table td.num { white-space: nowrap; }
.content table.inv-table tr.grp-row td { background: #f7f9f7; }
#inv-paper { overflow-x: auto; }
.tb-credit a, .dev-mini a { color: var(--teal); }

/* Copy narration */
.narr-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.narr-acts { font-size: 11.5px; font-weight: 500; color: var(--ink-soft, #57635c); }
.narr-acts a { color: var(--accent-d, #0b5c49); text-decoration: none; }
.narr-acts a:hover { text-decoration: underline; }
td.row-acts { white-space: nowrap; }
td.row-acts .btn + .btn { margin-left: 4px; }
.ln-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: #182420; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 9999; }
.ln-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* developer credit: plain system face so "Niyaan" reads with a small i */
.tb-credit b, .dev-mini b { font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* quick entry inside a ledger */
.qe-box { border: 1px solid var(--accent-soft-line, #bfe7d7); background: var(--accent-soft, #e2f5ec); border-radius: 10px; padding: 10px 12px; margin: 8px 0 10px; }
.qe-title { font-size: 13px; margin-bottom: 6px; }
.qe-grid { display: grid; grid-template-columns: 130px 130px minmax(200px, 1.4fr) 130px minmax(200px, 1.6fr); gap: 8px; align-items: end; }
.qe-grid label { font-size: 11.5px; color: var(--ink-soft, #57635c); display: block; margin-bottom: 3px; }
.qe-grid input, .qe-grid select { width: 100%; }
@media (max-width: 1100px) { .qe-grid { grid-template-columns: 1fr 1fr; } .qe-grid .qe-wide { grid-column: 1 / -1; } }
/* fold-away summary cards */
.cards-switch { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 2px; margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft, #57635c); cursor: pointer; width: auto; }
.cards-switch:hover { color: var(--accent-d, #0b5c49); text-decoration: underline; }
.cards-folded { display: none !important; }
/* every date filter box: just wide enough for DD/MM/YYYY */
input.dm-filter, .filter-bar input.dm-filter, .row input.dm-filter, #stmt-from, #stmt-to { width: 112px !important; min-width: 0 !important; flex: 0 0 112px !important; padding-left: 8px !important; padding-right: 8px !important; text-align: center; }
.filter-bar > div:has(> input.dm-filter) { flex: 0 0 auto !important; width: auto !important; }
/* inventory: report picker + filters on one tidy line */
.inv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; }
.inv-bar label { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }
.inv-bar select.slim { width: auto; min-width: 0; }
.inv-bar .inv-rep { min-width: 200px; font-weight: 600; }
/* ledger book toolbar: period & dates | view | search | delete */
.led-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 4px; }
.led-bar .lb-grp { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.led-bar .lb-grp + .lb-grp { padding-left: 14px; border-left: 1px solid var(--rule, #dde3df); }
.led-bar label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft, #57635c); margin: 0; }
.led-bar select.slim { width: auto; min-width: 0; }
.led-bar .lb-search input { width: 230px; }
.led-bar .lb-right { margin-left: auto; border-left: 0 !important; }
.lb-note { margin: 2px 0 8px; }
/* ledger & day-entry tables: fixed columns, one-line narration (full text on
   hover and in the entry itself) */
table.led-tbl { table-layout: fixed; width: 100%; }
table.led-tbl col.c-chk { width: 36px; }
table.led-tbl col.c-date { width: 104px; }
table.led-tbl col.c-no { width: 128px; }
table.led-tbl col.c-kind { width: 112px; }
table.led-tbl col.c-narr { width: auto; }
table.led-tbl col.c-amt { width: 132px; }
table.led-tbl col.c-bal { width: 142px; }
table.led-tbl col.c-act { width: 72px; }
table.led-tbl td, table.led-tbl th { overflow: hidden; }
table.led-tbl td.narr-plain { white-space: nowrap; text-overflow: ellipsis; max-width: 0; }
table.led-tbl td.num, table.led-tbl th.num { padding-right: 14px; white-space: nowrap; }
table.led-tbl td:last-child, table.led-tbl th:last-child { text-align: center; }
table.led-tbl td:nth-child(3) { white-space: nowrap; text-overflow: ellipsis; }
/* Reports: fold the "All reports" list away for a full-width report */
.rep-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rep-fold { width: auto; white-space: nowrap; }
.rep-layout.list-hidden .rep-pick { width: auto; min-width: 200px; font-weight: 600; }
.saved-pill.warn { background: #fdecea !important; color: #b3261e !important; border-color: #f2b8b5 !important; cursor: pointer; }

/* Bank statement review - possible duplicate lines */
.dup-banner { font-size: 12.5px; color: #8a2a20; background: #fdecea; border: 1px solid #f2b8b5; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.45; }
.content table tr.dup-row > td { background: #fdf1e0 !important; border-bottom: 0 !important; }
.content table tr.dup-kept > td { background: #eef6f0 !important; border-bottom: 0 !important; }
.content table tr.dup-note > td { background: #fdf1e0 !important; padding: 0 12px 9px !important; border-top: 0 !important; overflow: visible; }
.content table tr.dup-note.kept > td { background: #eef6f0 !important; }
.dup-note-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6b3a10; }
.dup-note.kept .dup-note-in { color: #2d5a3a; }
.dup-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; background: #c0362c; color: #fff; white-space: nowrap; }
.dup-note.kept .dup-tag { background: #2e7d4f; }
.dup-text { flex: 1 1 auto; min-width: 180px; }
.dup-keep { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; margin: 0; }
.dup-keep input { width: 14px; height: 14px; margin: 0; flex: none; }
/* Remove-line button in the statement review */
.content table.pdfext-grid td.pdf-del-cell { text-align: center; padding-left: 4px; padding-right: 4px; overflow: visible; }
.pdf-del { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #8a8f98; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pdf-del:hover { background: #fdecea; color: #c0362c; border-color: #f2b8b5; }
.pdf-del:focus-visible { outline: 2px solid #c0362c; outline-offset: 1px; }

.dup-banner-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dup-note-in .btn.tiny { padding: 3px 10px; font-size: 11.5px; }
.dup-ok { background: none; border: 0; padding: 3px 4px; font-size: 11.5px; font-weight: 600; color: #6b3a10; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dup-ok:hover { color: #3d2108; }

/* Bank sheet tab bar - one compact segmented strip, counts as small badges */
.btabs-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.btabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--paper, #f4f6f3); border: 1px solid var(--rule, #d8dfdb); border-radius: 9px; flex-wrap: wrap; max-width: 100%; }
.btab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft, #3d4a48); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.btab:hover { background: rgba(14, 102, 86, .08); color: var(--teal, #0e6656); }
.btab.on { background: var(--teal, #0e6656); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.btab:focus-visible { outline: 2px solid var(--teal, #0e6656); outline-offset: 1px; }
.btab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,.07); color: inherit; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.btab.on .btab-n { background: rgba(255,255,255,.22); }
.btab-dot { width: 7px; height: 7px; border-radius: 50%; background: #d97706; }
.btab.on .btab-dot { background: #fff; }
.btabs-sep { width: 1px; height: 16px; background: var(--rule, #d8dfdb); margin: 0 3px; }
.btab-sort { height: 30px; padding: 0 10px; border: 1px solid var(--rule, #d8dfdb); border-radius: 7px; background: var(--sheet, #fff); color: var(--ink-soft, #3d4a48); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btab-sort:hover { border-color: var(--teal, #0e6656); color: var(--teal, #0e6656); }

/* Tab / action chips elsewhere: a little tighter and tidier */
.tab, .tab-chip, button.tab { padding: 4px 10px; font-size: 12px; border-radius: 6px; line-height: 1.35; }
.content table.bank-grid td.b-acts { overflow: visible; }
.b-acts-in { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
/* Small shortcut hint in the top-right corner of a chip (Sales F1 / Purchase F2) */
button.has-key, button.tab-chip.has-key { position: relative; padding-right: 22px !important; }
button.has-key.has-key-long, button.tab-chip.has-key.has-key-long { padding-right: 34px !important; }
.key-corner { position: absolute; top: 3px; right: 5px; font-size: 8.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; opacity: .7; pointer-events: none; }
/* Keys panel on the entry screen: collapsible */
.keys-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0 2px; margin: 0 0 6px; cursor: pointer; color: inherit; font-size: 13px; }
.keys-head .keys-arrow { font-size: 12px; font-weight: 700; color: var(--teal, #0e6656); background: var(--teal-soft, #e2efeb); border: 1px solid #b9d6cc; border-radius: 6px; padding: 3px 9px; line-height: 1.2; white-space: nowrap; }
.keys-head:hover .keys-arrow { background: var(--teal, #0e6656); color: #fff; border-color: var(--teal, #0e6656); }
.keys-slim.keys-closed .keys-head { margin-bottom: 0; }
.keys-grp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5b6a68); margin-top: 6px; }
.keys-grp:first-child { margin-top: 0; }
/* Bank sheet: page numbers under the table */
.bank-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; }
.pg-btns { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg-btn { min-width: 30px; height: 28px; padding: 0 9px; border: 1px solid var(--rule, #d8dfdb); border-radius: 6px; background: var(--sheet, #fff); color: var(--ink-soft, #3d4a48); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pg-btn:hover:not([disabled]) { border-color: var(--teal, #0e6656); color: var(--teal, #0e6656); }
.pg-btn.on { background: var(--teal, #0e6656); border-color: var(--teal, #0e6656); color: #fff; }
.pg-btn[disabled] { opacity: .4; cursor: default; }
.pg-gap { padding: 0 2px; color: var(--muted, #5b6a68); }
/* Bank sheet: keyboard cursor row visible (same tint as other lists, wins over the duplicate tint) */
.content.page-banks table.bank-grid tbody tr.row-on > td,
.content.page-banks table.bank-grid tbody tr.stmt-aim > td,
.content.page-banks table.bank-grid tbody tr:focus-within > td { background: var(--teal-soft, #e2efeb) !important; }
.content.page-banks table.bank-grid tbody tr.row-on > td:first-child,
.content.page-banks table.bank-grid tbody tr.stmt-aim > td:first-child,
.content.page-banks table.bank-grid tbody tr:focus-within > td:first-child { box-shadow: inset 3px 0 0 var(--teal, #0e6656) !important; }
.inv-q { width: 170px; }
/* Sales / purchase line: optional stock item + description side by side */
.doc-line-desc { display: flex; gap: 6px; min-width: 0; }
.doc-line-desc select { flex: 0 0 42%; min-width: 0; }
.doc-line-desc input { flex: 1 1 auto; min-width: 0; }

/* inventory on entries (item box on a stock ledger's line) and invoices / bills */
.led-info { font-size: 11.5px; margin-top: 4px; color: var(--accent, #0e7a5f); font-weight: 600; line-height: 1.3; }
.inv-tick { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; }
.inv-tick input { width: auto; height: auto; margin: 0; }
.inv-tick-doc { min-height: 38px; }
.inv-legacy { font-size: 12px; margin: 8px 0 0; }
.alloc-box { margin-top: 6px; padding: 6px 8px 4px; border-left: 3px solid var(--line); background: rgba(14, 122, 95, .04); border-radius: 6px; }
table.alloc { margin: 0; width: 100%; }
table.alloc th { font-size: 10px; padding: 3px 4px; background: transparent; }
table.alloc td { padding: 3px 4px; vertical-align: top; border-bottom: 0; }
table.alloc select { min-width: 150px; }
table.alloc .inv-num { text-align: right; width: 100%; min-width: 70px; }
.alloc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 2px; font-size: 11.5px; }
.ni-box { display: flex; gap: 6px; align-items: center; }
.ni-box input { min-width: 140px; }
tr.alloc-row td { padding-top: 0; }
/* other charges on invoices / bills */
.doc-charges { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.dc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dc-head .muted { font-size: 12px; }
table.dc-table { margin: 0 0 6px; }
table.dc-table select { min-width: 220px; }
table.dc-table .inv-num { text-align: right; max-width: 140px; }
table.dc-table td.dc-cost { white-space: nowrap; }
/* credit / debit notes, orders, bill-wise, recurring, cheques */
select.doc-more { height: 36px; font-weight: 600; color: var(--accent, #0e7a5f); }
.doc-no-badge { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; font-family: inherit; }
.th-disc, .td-disc { width: 70px; }
.td-disc input { text-align: right; }
.doc-total { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; }
.doc-total > span { color: var(--muted); }
.doc-total > b { margin-left: auto; font-size: 15px; }
.bw-box table.alloc td { font-size: 12.5px; }
.bw-over { color: var(--bad); font-weight: 600; }
table.bw-rep tr.bw-party td { background: var(--bg-soft, #f3f6f4); border-top: 1px solid var(--line); }
table.bw-rep tr.bw-total td { border-top: 2px solid var(--ink, #182420); }
table.bw-rep td.pad-l { padding-left: 22px; }
.recur-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 12.5px; }
.recur-box label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.recur-box input.slim { width: 110px; }
.ev-tabs .tab-chip.on { background: var(--accent, #0e7a5f); color: #fff; border-color: var(--accent, #0e7a5f); }
.ev-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.due-bar { margin: 0 0 10px; padding: 7px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 600; }
.due-bar a { color: inherit; }
tr.rc-due td { background: rgba(214, 120, 0, .06); }
.pdc-add { gap: 6px; flex-wrap: wrap; }
table.ln-auto { table-layout: auto; }
table.ln-auto td:last-child { white-space: nowrap; width: 1%; }
table.bw-rep { font-size: 12px; }
table.bw-rep th, table.bw-rep td { padding: 6px 7px; }
table.bw-rep th { white-space: nowrap; }