/* ============================================================================
   FinLedger design system

   Grounded in the physical object it replaces: a bound columnar ledger. Pale
   green-tinted paper, blue hairline rules, black ink for debits and red for credits.
   The sidebar is the leather cover -- near-black, and the only heavy mass on screen.

   One superfamily, three registers: Plex Serif for headings, Plex Sans for prose,
   Plex Mono for every figure. Numbers are always tabular so columns align down the page,
   which is the entire point of a ledger.
   ========================================================================= */

:root {
  /* ink */
  --ink:            #16171c;
  --ink-raised:     #1e2027;
  --ink-line:       #2c2f38;
  --ink-muted:      #7b8290;
  --ink-bright:     #eef1f4;

  /* ledger paper */
  --paper:          #f1f4ee;
  --paper-card:     #fbfcfa;
  --paper-sunk:     #e7ebe3;
  --rule:           #c6d4d9;
  --rule-soft:      #dde5e3;

  /* text */
  --text:           #1a1f23;
  --text-soft:      #5a6470;
  --text-faint:     #8c96a1;

  /* ledger inks */
  --debit:          #1e4c7a;   /* traditional black-blue for debits */
  --credit:         #8c3a2e;   /* red ink for credits */
  --balanced:       #1f7a5c;   /* the beam levels to this */
  --caution:        #a8762a;
  --danger:         #9c3226;

  --shadow-card:    0 1px 2px rgba(26, 31, 35, .06), 0 4px 14px rgba(26, 31, 35, .04);
  --shadow-lift:    0 2px 6px rgba(26, 31, 35, .09), 0 12px 32px rgba(26, 31, 35, .08);

  --sidebar-w:      248px;
  --radius:         5px;
  --radius-sm:      3px;

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Every figure in the application. Tabular so columns line up, and never a
   proportional font -- a ledger where the digits drift is unreadable. */
.fig, .fig * , td.fig, th.fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -.01em;
}

a { color: var(--debit); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 25px; line-height: 1.2; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

.fl-null { color: var(--text-faint); }

/* ---------------------------------------------------------------- shell */

.fl-shell { display: flex; min-height: 100vh; }

.fl-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ink);
  color: var(--ink-bright);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.fl-brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--ink-line);
}
.fl-brand__mark {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #fff;
  display: block;
}
.fl-brand__mark:hover { text-decoration: none; }
.fl-brand__org {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fl-nav { padding: 14px 10px; flex: 1; overflow-y: auto; }
.fl-nav__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
  padding: 14px 12px 6px;
}
.fl-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: #c9cfd8;
  font-size: 13.5px;
}
.fl-nav__item:hover { background: var(--ink-raised); color: #fff; text-decoration: none; }
.fl-nav__item.is-active {
  background: var(--ink-raised);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--balanced);
}
.fl-nav__count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  background: var(--caution);
  color: #17130a;
  padding: 1px 6px;
  border-radius: 9px;
  font-weight: 600;
}

.fl-whoami {
  padding: 14px 20px;
  border-top: 1px solid var(--ink-line);
  font-size: 12px;
  color: var(--ink-muted);
}
.fl-whoami__name { color: var(--ink-bright); font-size: 13px; }
.fl-whoami__role {
  display: inline-block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fl-whoami form { margin-top: 10px; }
.fl-signout {
  background: none;
  border: 1px solid var(--ink-line);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fl-signout:hover { color: var(--ink-bright); border-color: var(--ink-muted); }

/* ---------------------------------------------------------------- canvas */

.fl-main { flex: 1; min-width: 0; }

/* The ruled paper. Horizontal hairlines every 30px, the way a columnar pad is printed. */
.fl-canvas {
  padding: 26px 30px 60px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 29px,
    var(--rule-soft) 29px,
    var(--rule-soft) 30px
  );
  background-position: 0 68px;
  min-height: 100vh;
}

.fl-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--rule);
}
.fl-pagehead__eyebrow {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.fl-pagehead__sub { color: var(--text-soft); font-size: 13px; margin-top: 4px; }
.fl-pagehead__actions { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------- cards */

.fl-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.fl-card__head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fl-card__body { padding: 16px; }
.fl-card__foot {
  padding: 11px 16px;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-sunk);
  border-radius: 0 0 var(--radius) var(--radius);
}

.fl-grid { display: grid; gap: 16px; }
.fl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* The right-hand column of .fl-grid--sidebar -- the totals panel on the invoice,
   bill and party forms. Named apart from .fl-side, which is the 18px debit/credit
   letter in voucher tables; the two collided and the column inherited that width,
   which wrapped the panel's prose one word to a line. */
.fl-aside { min-width: 0; }
.fl-aside > .fl-card:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tiles */

.fl-tile {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px 15px;
  box-shadow: var(--shadow-card);
}
.fl-tile__label {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fl-tile__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 500;
  margin-top: 7px;
  letter-spacing: -.02em;
}
.fl-tile__note { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; }
.fl-tile--debit .fl-tile__value { color: var(--debit); }
.fl-tile--credit .fl-tile__value { color: var(--credit); }
.fl-tile--good .fl-tile__value { color: var(--balanced); }
.fl-tile--warn { border-color: var(--caution); }
.fl-tile--warn .fl-tile__value { color: var(--caution); }

/* ---------------------------------------------------------------- tables */

.fl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fl-table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.fl-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.fl-table tbody tr:hover { background: rgba(198, 212, 217, .17); }
.fl-table .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fl-table .num--debit { color: var(--debit); }
.fl-table .num--credit { color: var(--credit); }
.fl-table tfoot td {
  border-top: 2px solid var(--rule);
  border-bottom: 2px double var(--rule);
  font-weight: 600;
  padding-top: 11px;
  padding-bottom: 11px;
  background: var(--paper-sunk);
}
.fl-table--compact td, .fl-table--compact th { padding: 6px 10px; }
.fl-table__group td {
  background: var(--paper-sunk);
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-soft);
  border-bottom: 1px solid var(--rule);
}

.fl-vno {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- chips */

.fl-chip {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  white-space: nowrap;
}
.fl-chip--posted   { color: var(--balanced); border-color: rgba(31,122,92,.4);  background: rgba(31,122,92,.08); }
.fl-chip--pending  { color: var(--caution);  border-color: rgba(168,118,42,.4); background: rgba(168,118,42,.09); }
.fl-chip--draft    { color: var(--text-soft);border-color: var(--rule);         background: var(--paper-sunk); }
.fl-chip--reversed { color: var(--credit);   border-color: rgba(140,58,46,.35); background: rgba(140,58,46,.07); }
.fl-chip--locked   { color: var(--danger);   border-color: rgba(156,50,38,.35); background: rgba(156,50,38,.07); }
.fl-chip--open     { color: var(--balanced); border-color: rgba(31,122,92,.35); background: rgba(31,122,92,.07); }

.fl-side {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  width: 18px;
  display: inline-block;
  text-align: center;
}
.fl-side--D { color: var(--debit); }
.fl-side--C { color: var(--credit); }

/* ---------------------------------------------------------------- buttons */

.fl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--paper-card);
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
}
.fl-btn:hover { background: var(--paper-sunk); text-decoration: none; }
.fl-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.fl-btn--primary:hover { background: var(--ink-raised); border-color: var(--ink-raised); }
.fl-btn--good {
  background: var(--balanced);
  border-color: var(--balanced);
  color: #fff;
}
.fl-btn--good:hover { filter: brightness(1.08); }
.fl-btn--danger { color: var(--danger); border-color: rgba(156,50,38,.35); }
.fl-btn--danger:hover { background: rgba(156,50,38,.07); }
.fl-btn--sm { font-size: 12px; padding: 4px 10px; }
.fl-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- forms */

.fl-field { margin-bottom: 14px; }
.fl-field label {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 5px;
  font-weight: 600;
}
.fl-input, .fl-select, textarea.fl-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
}
.fl-input:focus, .fl-select:focus {
  outline: 2px solid rgba(30, 76, 122, .3);
  outline-offset: 1px;
  border-color: var(--debit);
}
.fl-input--amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fl-help { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; }
.fl-error { font-size: 12px; color: var(--danger); margin-top: 4px; }
.fl-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fl-inline .fl-field { margin-bottom: 0; }

/* ---------------------------------------------------------------- flash */

.fl-flash {
  padding: 11px 15px;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: 18px;
  font-size: 13.5px;
}
.fl-flash--success { border-color: rgba(31,122,92,.4);  background: rgba(31,122,92,.07);  color: #14563f; }
.fl-flash--error   { border-color: rgba(156,50,38,.4);  background: rgba(156,50,38,.06);  color: #7a251c; }
.fl-flash--info    { border-color: var(--rule);         background: var(--paper-sunk);    color: var(--text-soft); }

.fl-empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--text-soft);
}
.fl-empty h3 { color: var(--text); margin-bottom: 6px; }

/* ============================================================================
   BalanceBeam -- the signature element

   A physical beam balance. It tilts in proportion to the imbalance between debit and
   credit, and it only levels out and turns green when the two sides are exactly equal
   to the paisa. A near-miss still tilts, which is the whole point: "close" is not
   balanced in double-entry bookkeeping.
   ========================================================================= */

.beam {
  --tilt: 0deg;
  position: relative;
  padding: 18px 20px 14px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.beam.is-level { border-color: rgba(31,122,92,.45); }

.beam__stage {
  position: relative;
  height: 74px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.beam__column {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 42px;
  background: var(--ink-line);
  border-radius: 2px 2px 0 0;
}
.beam__pivot {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 3;
}
.beam.is-level .beam__pivot { background: var(--balanced); }

.beam__bar {
  position: absolute;
  bottom: 45px;
  left: 50%;
  width: 74%;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%) rotate(var(--tilt));
  transform-origin: center;
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), background-color .35s ease;
  z-index: 2;
}
.beam.is-level .beam__bar { background: var(--balanced); }

.beam__pan {
  position: absolute;
  top: 1px;
  width: 84px;
  margin-left: -42px;
  text-align: center;
  transform: rotate(calc(var(--tilt) * -1));
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1);
}
.beam__pan--dr { left: 0; }
.beam__pan--cr { left: 100%; }

.beam__pan-label {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
}
.beam__pan-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-top: 1px;
}
.beam__pan--dr .beam__pan-value { color: var(--debit); }
.beam__pan--cr .beam__pan-value { color: var(--credit); }
.beam.is-level .beam__pan-value { color: var(--balanced); }

.beam__verdict {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--caution);
  min-height: 18px;
}
.beam__verdict strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.beam.is-level .beam__verdict {
  color: var(--balanced);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .beam__bar, .beam__pan { transition: none; }
}

/* ---------------------------------------------------------------- login */

.fl-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
}
.fl-auth__pitch {
  background: var(--ink);
  color: var(--ink-bright);
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fl-auth__pitch h1 { color: #fff; font-size: 32px; max-width: 12em; }
.fl-auth__pitch p { color: var(--ink-muted); max-width: 30em; margin-top: 14px; }
.fl-auth__rules { list-style: none; padding: 0; margin: 30px 0 0; }
.fl-auth__rules li {
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 13px;
  color: #b9c0ca;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.fl-auth__rules span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.fl-auth__form { padding: 54px 48px; display: flex; align-items: center; }
.fl-auth__form-inner { width: 100%; max-width: 330px; margin: 0 auto; }
.fl-auth__creds {
  margin-top: 22px;
  padding: 12px 14px;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-soft);
}
.fl-auth__creds code { font-family: var(--mono); font-size: 11.5px; color: var(--text); }

/* ---------------------------------------------------------------- utilities */

.u-right { text-align: right; }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-soft { color: var(--text-soft); }
.u-faint { color: var(--text-faint); }
.u-small { font-size: 12px; }
.u-mt { margin-top: 16px; }
.u-mt-lg { margin-top: 26px; }
.u-mb { margin-bottom: 16px; }
.u-debit { color: var(--debit); }
.u-credit { color: var(--credit); }
.u-good { color: var(--balanced); }
.u-bad { color: var(--danger); }

.fl-pager ul { list-style: none; display: flex; gap: 5px; padding: 0; margin: 18px 0 0; }
.fl-pager a, .fl-pager span {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: var(--mono);
  background: var(--paper-card);
}
.fl-pager .active span { background: var(--ink); color: #fff; border-color: var(--ink); }
.fl-pager .disabled span { opacity: .4; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .fl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-grid--sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .fl-shell { flex-direction: column; }
  .fl-sidebar { width: 100%; flex: none; height: auto; position: static; }
  .fl-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .fl-nav__label { display: none; }
  .fl-nav__item { padding: 6px 11px; font-size: 13px; }
  .fl-canvas { padding: 18px 15px 40px; }
  .fl-grid--4, .fl-grid--3, .fl-grid--2 { grid-template-columns: 1fr; }
  .fl-auth { grid-template-columns: 1fr; }
  .fl-auth__pitch { display: none; }
  .fl-table { font-size: 12.5px; }
  .fl-table th, .fl-table td { padding: 7px 8px; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .fl-sidebar, .fl-pagehead__actions, .fl-btn, .fl-pager { display: none !important; }
  .fl-canvas { background: #fff; padding: 0; }
  .fl-card { border: none; box-shadow: none; }
  body { font-size: 11pt; }
}

/* ---- company switcher -------------------------------------------------- */
/* Sits in the ink sidebar, so it has to read as part of the brand block
   rather than as a form control dropped into it. */
.fl-orgpick {
  width: 100%;
  margin-top: 2px;
  padding: 3px 20px 3px 0;
  border: 0;
  background: transparent;
  color: var(--ink-bright);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' fill-opacity='.45' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.fl-orgpick:hover { color: #fff; }
.fl-orgpick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.fl-orgpick option { color: var(--text); background: var(--paper-card); font-weight: 400; }

.fl-brand__gstin {
  margin-top: 1px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--ink-muted);
}