/* Books design tokens — KICKOFF §5. THE APP IS QUIET.
 * Grounding: the Indian accountant's desk — 13-column green analysis pad,
 * fountain-pen blue-black ink, violet office stamp pad, the Dr|Cr vertical rule.
 * Beauty here is density, calm, perfect numeral alignment, absence of chrome.
 * No shadows on data surfaces (hairlines only); motion NONE on data entry. */

:root {
  /* Palette — refreshed to a clean modern SaaS look (green primary) while the
     accessibility gates (tabular numerals, focus ring, reduced motion) hold. */
  /* Cool, neutral, professional greys with a single warm accent — the serious
     accounting-SaaS look (cool ink + warm seal is a classic, trustworthy pairing). */
  --bk-pad:       #F6F5F3;  /* app background — warm, very light stone         */
  --bk-pad-sunk:  #EFEDEA;  /* alternating row bands, inset panels            */
  --bk-rule:      #E6E3DE;  /* hairline borders — warm neutral               */
  --bk-ink:       #1C1917;  /* primary text — warm near-black (stone-900)     */
  --bk-ink-soft:  #78716C;  /* labels, secondary — warm grey (stone-500)      */
  --bk-seal:      #E24E1B;  /* the accent — a rich, confident vermillion      */
  --bk-seal-wash: #FCECE4;  /* active/selected/focus wash                     */
  --bk-negative:  #DC2626;  /* sign/status ONLY — clear red                  */
  --bk-positive:  #059669;  /* deep emerald                                 */
  --bk-warn:      #B45309;  /* amber                                        */
  /* Brand gradient (logo, avatars, Meera launcher, primary chips) — warm sunset. */
  --bk-g1:        #FB7A36;
  --bk-g2:        #E11D48;
  --bk-glow:      rgba(226, 78, 27, .30);

  /* Depth: hairlines do most of the work; shadows are faint and cool (serious apps
     don't glow). Cards get a soft, tight shadow only. */
  --bk-shadow-1: 0 1px 2px rgba(28,25,23,.05);          /* faint, single, cool — QB-like */
  --bk-shadow-2: 0 10px 30px rgba(28,25,23,.10);
  --bk-hover:    #FAF6F3;                                /* neutral warm row/hover wash  */
  --bk-radius-card: 10px;
  --bk-primary-hover: #C6431C;
  --bk-grad: var(--bk-seal);  /* flat — no gradient (gradients read as consumer/playful) */

  /* Type — one modern, professional sans everywhere (the look of a serious SaaS).
     Leads with Inter for those who have it, then the platform UI face (San Francisco /
     Segoe UI / Roboto). No web-font fetch, so it renders the same offline. Titles are
     the same family, just heavier + tighter — cleaner and more current than a serif. */
  --bk-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bk-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* UI labels/eyebrows/table-heads: the clean SANS (QuickBooks-style), NOT monospace.
     Only true machine codes (GSTIN/HSN/voucher no) and money numerals keep the mono. */
  --bk-font-label:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bk-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Courier New", monospace; /* CODES only */
  --bk-font-deva:    "IBM Plex Sans Devanagari", var(--bk-font-body);

  /* Density: base unit 4px (not 8). Row heights are a persisted user pref. */
  --bk-unit: 4px;
  --bk-row-compact:     28px;
  --bk-row-default:     32px;
  --bk-row-comfortable: 40px;
  --bk-radius-max: 4px;

  /* The Dr | Cr spine: one hairline at a FIXED x-position, full height. */
  --bk-spine-x: 50%;
  --bk-spine-color: var(--bk-rule);
}

html { color: var(--bk-ink); background: var(--bk-pad); font-family: var(--bk-font-body); }
body { margin: 0; }

/* ── Numerals: EVERY numeric cell is tabular + right-aligned (Gate CS). A
 *    non-tabular numeral in a trial balance is a DEFECT, not a style choice.
 *    Amounts use tabular Inter (body), NOT mono. Codes use mono. ───────────── */
.num,
td.num,
th.num,
.amount,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--bk-font-body);
}
.code {                 /* GSTIN, PAN, HSN, IFSC, voucher no — mono */
  font-family: var(--bk-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Fields: clean, conventional inputs — white at rest, a calm 1px border, a soft
 *    accent focus ring (no harsh outline, no filled-at-rest inversion). The point is
 *    still that a field reads clearly as a place to type, done the quiet way. ───── */
input, select, textarea, .bk-field {
  background: #fff;
  border: 1px solid #D8D2CB;                 /* calm neutral hairline */
  border-radius: 6px;
  color: var(--bk-ink);
  font-family: var(--bk-font-body);
}
input:hover, select:hover, textarea:hover, .bk-field:hover { border-color: #BCB4AB; }
input:focus, select:focus, textarea:focus, .bk-field:focus {
  border-color: var(--bk-seal);
  outline: none;
  box-shadow: 0 0 0 3px var(--bk-seal-wash); /* soft ring in the accent wash */
}
::placeholder { color: #A99F96; }
/* Required carries a thin accent left edge — a subtle marker, nothing else uses one.
 * Longhands (not the `border-left` shorthand) so the literal width resolves even when
 * the colour is a custom property. */
input:required, select:required, textarea:required,
[data-required="true"] { border-left-width: 3px; border-left-style: solid; border-left-color: var(--bk-seal); }
/* Read-only / disabled: not a place to type — no fill, dashed, muted. */
input[readonly], textarea[readonly],
input:disabled, select:disabled, textarea:disabled, .bk-field[readonly] {
  background: transparent; border-style: dashed; color: var(--bk-ink-soft);
}
/* Error changes border AND background (visible to a colour-blind user), with a
 * message below stating what is wrong; warn changes the border. */
[data-state="error"] { border-color: var(--bk-negative); background: #FBF1EF; }
[data-state="warn"]  { border-color: var(--bk-warn); }
/* A mandatory field flagged by a failed Save (JS adds .bk-invalid): a clear red border + ring
 * so it's obvious WHICH field to fill. Cleared the moment the user edits that field. */
input.bk-invalid, select.bk-invalid, textarea.bk-invalid, .bk-field.bk-invalid, .bk-invalid {
  border-color: var(--bk-negative) !important;
  background: #FBF1EF;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .18) !important;
}
/* Derived / computed output — a dotted underline only, no box. It is output, not
 * input, and must never look editable. */
[data-state="derived"] {
  background: transparent;
  border-style: none none dotted none;
  border-radius: 0;
}

/* ── Section bands (WO-02 §1.3): every form is divided into labelled bands so there
 *    is no wall of undifferentiated fields. Colour codes the BAND, not the field. ── */
.bk-band { border-left-width: 3px; border-left-style: solid; border-left-color: var(--bk-rule); padding: calc(var(--bk-unit) * 2) calc(var(--bk-unit) * 3); background: var(--bk-pad); }
.bk-band + .bk-band { margin-top: calc(var(--bk-unit) * 2); }
.bk-band:nth-of-type(even) { background: var(--bk-pad-sunk); }
.bk-band > .bk-band-head {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-ink-soft);
  display: flex; align-items: center; gap: calc(var(--bk-unit) * 2); margin-bottom: calc(var(--bk-unit) * 2);
}
.bk-band > .bk-band-head::after { content: ""; flex: 1; height: 1px; background: var(--bk-rule); }
.bk-band[data-band="party"]  { border-left-color: #6B7DB3; }
.bk-band[data-band="items"]  { border-left-color: #5B9279; }
.bk-band[data-band="tax"]    { border-left-color: #B38A5B; }
.bk-band[data-band="totals"] { border-left-color: var(--bk-ink-soft); }

/* ── One page template everywhere (WO-02 §1.4): same header height, filter-bar
 *    position, primary-action placement and footer on every screen. ──────────────── */
.bk-page { display: flex; flex-direction: column; }
.bk-page-header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--bk-unit) * 3); height: 56px; }
.bk-page-header .bk-page-actions { display: flex; align-items: center; gap: calc(var(--bk-unit) * 2); }
.bk-filter-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: calc(var(--bk-unit) * 2); height: 44px; background: var(--bk-pad); border-bottom: 1px solid var(--bk-rule); }
.bk-page-content { flex: 1; }
.bk-page-footer { position: sticky; bottom: 0; background: var(--bk-pad); border-top: 1px solid var(--bk-rule); padding: calc(var(--bk-unit) * 2) 0; }

/* ── Tables (WO-02 §1.6): sticky header + sticky totals row over the flat data grid. */
/* ── Drill breadcrumb (WO-02 §1.5): the path a figure was drilled through. */
.bk-crumbs .crumb-here { color: var(--bk-ink); font-weight: 600; }

.table thead th { position: sticky; top: 0; z-index: 3; background: var(--bk-pad); }
.table tfoot td, .table tr.total td { position: sticky; bottom: 0; background: var(--bk-pad); font-weight: 600; }

/* Sign carries colour; Dr/Cr are distinguished by POSITION, not colour. */
.amount--negative { color: var(--bk-negative); }
.amount--positive { color: var(--bk-positive); }
.status--warn     { color: var(--bk-warn); }

/* ── Data surfaces: hairlines only, no shadows, radius 0 on table cells ─────── */
.table { border-collapse: collapse; width: 100%; }
.table td, .table th {
  border: 0;
  border-bottom: 1px solid var(--bk-rule);
  border-radius: 0;
  height: var(--bk-row-default);
  padding: 0 calc(var(--bk-unit) * 2);
}
.table tr:nth-child(even) { background: var(--bk-pad-sunk); }  /* analysis-pad bands */
[data-density="compact"]     .table td { height: var(--bk-row-compact); }
[data-density="comfortable"] .table td { height: var(--bk-row-comfortable); }

/* ── The Dr | Cr spine + balance beam ──────────────────────────────────────── */
.spine {
  position: relative;
}
.spine::before {                       /* the vertical rule, fixed x, full height */
  content: "";
  position: absolute;
  left: var(--bk-spine-x);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--bk-spine-color);
}
.balance-beam {                        /* thin horizontal indicator above the spine */
  height: 2px;
  background: var(--bk-ink-soft);
  transform-origin: center;
  /* Off-level while unbalanced; settles level ONLY on exact balance (Gate CX). */
  transition: transform 180ms ease;
}
.balance-beam[data-balanced="true"]  { transform: rotate(0deg); }
.balance-beam[data-balanced="false"] { transform: rotate(var(--bk-beam-tilt, 1.2deg)); }

/* ── Focus + motion (Gate CW): visible focus ring on EVERY interactive element;
 *    all motion suppressed under prefers-reduced-motion. ────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bk-seal);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Page titles: same modern sans, heavier + tighter for a clean, current heading. */
.page-title { font-family: var(--bk-font-display); font-weight: 700; letter-spacing: -.021em; color: var(--bk-ink); }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* --bk-seal appears at most TWICE per screen: primary action + active state. */
.btn-primary { background: var(--bk-seal); color: #fff; border: 0; border-radius: var(--bk-radius-max); }
.is-active   { box-shadow: inset 2px 0 0 var(--bk-seal); }