/* ============================================================================
   books-design.css — the visual system for client Books and staff Books.
   ONE file, loaded by both, because the spec's rule is that they share tokens,
   type scale and number treatment and differ ONLY in density. Two stylesheets
   would let them drift apart the first time somebody edited one of them.

   Everything is scoped under .bkd so it cannot leak into the rest of the staff
   shell or the portal, both of which keep their own 16px consumer-app look on
   purpose. Books is the surface that has to read as financial software.

   Density: <div class="bkd">                  client, 7px rows
            <div class="bkd" data-density="staff">  staff, 5px rows
   ============================================================================ */

.bkd {
  /* ---- Brand. Existing tokens only, no new brand colours. ---------------- */
  --bkd-brand: #24265d;          /* module tab strip, primary action fill */
  --bkd-brand-d: #191a45;        /* top identity bar */
  --bkd-tab-off: #c5cae4;        /* inactive tab text */

  /* ---- Surfaces and lines. Greyscale, derived from the portal palette so
     these read as the same product rather than a second one. --------------- */
  --bkd-surface: #ffffff;
  --bkd-surface-1: #f4f6fa;      /* the portal body colour, reused as a fill */
  --bkd-surface-2: #eef1f7;      /* was --chip */
  --bkd-border: #e7ebf2;         /* was --line */
  --bkd-border-strong: #d3dae6;  /* section divisions only */

  /* ---- Text ------------------------------------------------------------- */
  --bkd-text: #141a2b;           /* was --ink */
  --bkd-text-secondary: #6a7488; /* was --muted */

  /* ---- Semantic status. The only colour on the page that is not greyscale,
     and it always means something. --------------------------------------- */
  --bkd-bg-success: #e9f8f1; --bkd-text-success: #0b7a54;
  --bkd-bg-warning: #fff3ea; --bkd-text-warning: #9a4a12;
  --bkd-bg-danger:  #fdecec; --bkd-text-danger:  #a32020;

  /* ---- Radius. The single change that does the most work here. 16px reads
     as a consumer app; 6px reads as software somebody does their books in. -- */
  --bkd-r-panel: 6px;
  --bkd-r-control: 4px;
  --bkd-r-pill: 3px;

  /* ---- Density, overridden for staff below ------------------------------ */
  --bkd-row-y: 7px;
  --bkd-panel-p: 12px;

  color: var(--bkd-text);
  font-size: 12px;
  line-height: 1.45;

  /* ---- Books opts out of the wallpaper entirely. -------------------------
     A custom wallpaper sets .main transparent so the photo shows around the
     panels. That works on screens built out of panels; Books is not one, it
     puts <table> straight onto the page, so a ledger drew its rows onto the
     photograph. This is the page fill, the same role --bg plays elsewhere, and
     the cards sit on it. The wallpaper stops at the edge of Books. */
  background: var(--bkd-surface-2);
}

/* ---- Dark mode: the token block re-pointed, which is what this file said ---
   all along would be the way to do it. Every --bkd-* value above is a LIGHT
   value, and .bkd sets color on the wrapper, so in dark mode the ledger
   inherited near-black text while the panels underneath it followed the app to
   near-black surfaces. Row text came out DARKER than the headers above it, at
   1.16:1 where 4.5:1 is the floor. Not a new palette: each token is pointed at
   the app token that already holds the dark value, so Books and the shell
   cannot drift, and a change to the shell palette reaches Books for free. */
html[data-theme="dark"] .bkd {
  --bkd-surface: var(--card);
  --bkd-surface-1: var(--chip);
  --bkd-surface-2: var(--bg);
  --bkd-border: var(--line);
  --bkd-border-strong: var(--line);
  --bkd-text: var(--ink);
  --bkd-text-secondary: var(--muted);
  --bkd-tab-off: var(--muted);
}
.bkd[data-density="staff"] { --bkd-row-y: 5px; --bkd-panel-p: 11px; }

/* ---- Staff is LIGHT, same tokens as the client surface. -------------------
   An earlier version of this file hand-built dark navy surfaces for staff. That was
   wrong, and the spec now says so explicitly: it produced something dreary, and the
   cause was never density. It was going from the nav straight into a wall of rows
   with no summary above them, which is what the summary strip below fixes.

   Because everything is expressed as tokens, dark mode can be added later by
   re-pointing the token block, and it will be better than one built by hand. There
   is deliberately no hand-written dark palette here to fight with it. -------- */

/* ---- Money direction. In is green; out is ordinary text, NEVER red. Red is
   reserved for problems, and ordinary spending is not a problem. ------------ */
.bkd .bkd-in  { color: var(--bkd-text-success); }
.bkd .bkd-out { color: var(--bkd-text); }

/* ---- The summary strip every high-volume staff screen needs above its table.
   Context before the rows, and the pile visibly shrinking. ----------------- */
.bkd .bkd-summary {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
  padding: 9px 14px; background: var(--bkd-surface-1);
  border: 0.5px solid var(--bkd-border); border-radius: var(--bkd-r-panel); margin-bottom: 10px;
}
.bkd .bkd-summary .bkd-metric-value { font-size: 15px; }
.bkd .bkd-progress {
  flex: 1 1 180px; height: 6px; border-radius: var(--bkd-r-pill);
  background: var(--bkd-surface-2); overflow: hidden; display: flex;
}
.bkd .bkd-progress span { display: block; height: 100%; }
.bkd .bkd-progress .is-posted { background: var(--bkd-text-success); }
.bkd .bkd-progress .is-ready  { background: var(--bkd-brand); }

/* ============================================================================
   NUMBERS. The spec calls this the strongest professional signal and it is
   right: digits that shift width down a column is the clearest tell of amateur
   financial software. Applied to the whole surface rather than per table so a
   figure added later cannot miss it.
   ============================================================================ */
.bkd, .bkd table, .bkd .bkd-metric, .bkd .bkd-num { font-variant-numeric: tabular-nums; }
.bkd .bkd-num, .bkd td.bkd-num, .bkd th.bkd-num { text-align: right; white-space: nowrap; }

/* ---- Type scale. Two weights only. Hierarchy from colour and position. ---- */
.bkd .bkd-metric-value { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.bkd table { font-size: 12px; font-weight: 400; }
.bkd .bkd-label, .bkd th, .bkd .bkd-meta, .bkd .bkd-axis { font-size: 11px; font-weight: 400; color: var(--bkd-text-secondary); }
.bkd h2, .bkd .bkd-section { font-size: 12px; font-weight: 500; letter-spacing: .01em; }

/* ---- Panels ------------------------------------------------------------- */
.bkd .bkd-panel {
  background: var(--bkd-surface); border: 0.5px solid var(--bkd-border);
  border-radius: var(--bkd-r-panel); padding: var(--bkd-panel-p);
}
.bkd .bkd-panel + .bkd-panel { margin-top: 10px; }

/* ---- Tables. Hairlines define structure, not whitespace. ----------------- */
.bkd table { width: 100%; border-collapse: collapse; }
.bkd th {
  text-align: left; padding: var(--bkd-row-y) 4px; border-bottom: 0.5px solid var(--bkd-border-strong);
  white-space: nowrap;
}
.bkd td { padding: var(--bkd-row-y) 4px; border-bottom: 0.5px solid var(--bkd-border); }
.bkd th:first-child, .bkd td:first-child { padding-left: 14px; }
.bkd th:last-child,  .bkd td:last-child  { padding-right: 14px; }
/* Every table ends with a total row. A ledger that does not add up reads as a list. */
.bkd tr.bkd-total td {
  border-top: 0.5px solid var(--bkd-border-strong); border-bottom: none;
  font-weight: 500; background: var(--bkd-surface-1);
}

/* ---- Status pills. Replace coloured text. Always same-family text on tint. */
.bkd .bkd-pill {
  display: inline-block; border-radius: var(--bkd-r-pill); font-size: 11px;
  padding: 2px 7px; white-space: nowrap; font-weight: 400;
  background: var(--bkd-surface-2); color: var(--bkd-text-secondary);
}
.bkd .bkd-pill.is-paid    { background: var(--bkd-bg-success); color: var(--bkd-text-success); }
.bkd .bkd-pill.is-late    { background: var(--bkd-bg-warning); color: var(--bkd-text-warning); }
.bkd .bkd-pill.is-verylate{ background: var(--bkd-bg-danger);  color: var(--bkd-text-danger); }

/* ---- Controls ----------------------------------------------------------- */
.bkd .bkd-btn {
  background: var(--bkd-brand); color: #fff; border: none;
  border-radius: var(--bkd-r-control); padding: 7px 13px; font-size: 12px; cursor: pointer;
}
.bkd .bkd-btn.is-quiet {
  background: transparent; color: var(--bkd-text); border: 0.5px solid var(--bkd-border-strong);
}
/* background-COLOR, not the background shorthand. The shorthand resets every background longhand
   it does not mention, and the shell draws a <select>'s chevron as a background-image with its own
   repeat, position and size. So this rule was quietly wiping all three. In light mode that removed
   the image too and Books selects simply had no arrow. In dark mode the shell's dark-chevron rule
   is more specific (html[data-theme="dark"] select beats .bkd select), so the IMAGE came back while
   the reset longhands stayed, and one chevron tiled across the whole control at its natural size:
   a company switcher rendered as a row of arrows with the name behind them. */
.bkd input, .bkd select, .bkd textarea {
  border-radius: var(--bkd-r-control); border: 0.5px solid var(--bkd-border-strong);
  padding: 6px 9px; font-size: 12px; background-color: var(--bkd-surface); color: var(--bkd-text);
}
/* The shell reserves 30px for the chevron; the padding above narrows it back to 9px, which would
   run the longest company name underneath the arrow. */
.bkd select { padding-right: 30px; }
.bkd .bkd-chip {
  display: inline-block; border-radius: var(--bkd-r-control); font-size: 11px;
  padding: 4px 9px; border: 0.5px solid var(--bkd-border-strong);
  background: var(--bkd-surface); color: var(--bkd-text-secondary); cursor: pointer;
}
.bkd .bkd-chip[aria-pressed="true"] { background: var(--bkd-brand); color: #fff; border-color: var(--bkd-brand); }

/* ---- Top navigation. A sidebar costs ~124px permanently and tables need it. */
.bkd .bkd-identity {
  background: var(--bkd-brand-d); color: #fff; padding: 9px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.bkd .bkd-tabs { background: var(--bkd-brand); display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; }
.bkd .bkd-tabs a {
  color: var(--bkd-tab-off); text-decoration: none; font-size: 12px;
  padding: 6px 13px; border-radius: var(--bkd-r-panel) var(--bkd-r-panel) 0 0; white-space: nowrap;
}
.bkd .bkd-tabs a[aria-current="page"] { background: var(--bkd-surface); color: var(--bkd-text); }

/* ---- The active tab must sit ON the card, not above a gap ------------------
   The active tab is the card colour with a radius on its top corners, which
   only reads as a tab if the card starts where the tab ends. It did not: the
   body below was a run of separate panels with the page showing between the
   strip and the first one, so the white tab floated over a gap and looked like
   a mistake. One continuous surface from the underside of the strip down, with
   the panels inside it carrying their own hairlines for structure. */
.bkd .bkd-tabs { margin-bottom: 0; }
.bkd #bkSummary:not(:empty), .bkd #booksBody {
  background: var(--bkd-surface);
  border: 0.5px solid var(--bkd-border);
  border-top: none;
}
.bkd #bkSummary:not(:empty) + #booksBody { border-top: 0.5px solid var(--bkd-border); }
.bkd #booksBody {
  padding: var(--bkd-panel-p);
  border-radius: 0 0 var(--bkd-r-panel) var(--bkd-r-panel);
}
/* First thing in the body starts flush with the strip, whatever a tab renders. */
.bkd #booksBody > *:first-child { margin-top: 0; }

/* ---- Nothing inside Books is see-through ----------------------------------
   Stated as a rule rather than left to each surface, because this is the third
   report of the same defect and every previous fix named the surfaces it knew
   about. The panels a tab renders are the shell's .panel, which is opaque, but
   over a wallpaper the shell also strips backgrounds and blurs things, and any
   of that reaching a ledger puts a photograph behind somebody's figures. */
.bkd .panel, .bkd .card, .bkd table, .bkd thead, .bkd tbody, .bkd tr {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.bkd .panel, .bkd .card { background: var(--bkd-surface); }
/* The panels are already on the body surface, so their own border would draw a
   second box around each. Kept as a hairline divider instead of a card edge. */
.bkd #booksBody > .panel { border: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.bkd #booksBody > .panel + .panel { border-top: 0.5px solid var(--bkd-border); }

/* ---- Chart of accounts: three columns, not three edges --------------------
   Code, name and edit were the only cells in the row, so on a wide window they
   sat at the far left, the centre and the far right with about 1,400px between
   them, and reading across a row became a journey. Capped at a width a ledger
   line is actually read at. */
.bkd table.bkd-narrow { max-width: 760px; }

/* "edit" repeated down every row was the brightest thing on the screen, which
   made the least important column the first one the eye landed on. */
.bkd a.dl { color: var(--bkd-text-secondary); }

/* ---- Metrics ------------------------------------------------------------ */
.bkd .bkd-metrics { display: flex; flex-wrap: wrap; gap: 10px; }
.bkd .bkd-metric { flex: 1 1 150px; }
.bkd .bkd-metric-row { display: flex; align-items: flex-end; gap: 8px; justify-content: space-between; }

/* ---- "As of". Every number should feel like it came from somewhere. ------ */
.bkd .bkd-asof { font-size: 11px; color: var(--bkd-text-secondary); }

/* ---- Empty states. One line of what belongs here, and the action that
   starts it. No illustrations, and never "Nothing here yet." --------------- */
.bkd .bkd-empty { padding: 18px 14px; font-size: 12px; color: var(--bkd-text-secondary); }
.bkd .bkd-empty b { color: var(--bkd-text); font-weight: 500; display: block; margin-bottom: 6px; }

/* ---- Charts. Bars at 1 to 2px so they read as data, not as decoration. --- */
.bkd .bkd-bar { fill: var(--bkd-brand); }
.bkd .bkd-spark { display: block; }

/* ---- Staff: keyboard navigation through rows ----------------------------- */
.bkd[data-density="staff"] tr[tabindex]:focus {
  outline: 2px solid var(--bkd-brand); outline-offset: -2px;
}

/* ---- Mobile: the nav becomes a bottom tab bar, which holds four ---------- */
@media (max-width: 640px) {
  .bkd .bkd-tabs {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    padding: 0; justify-content: space-around; border-top: 0.5px solid var(--bkd-border-strong);
  }
  .bkd .bkd-tabs a { border-radius: 0; padding: 9px 6px; text-align: center; flex: 1; }
  .bkd .bkd-tabs a[aria-current="page"] { background: var(--bkd-brand-d); color: #fff; }
  .bkd .bkd-pad-for-tabs { padding-bottom: 52px; }
}