/* ==========================================================================
   Industry PVT — design system
   Identity: a bound accounting ledger. Navy cloth binding, brass fittings,
   statement-white paper for reports. Figures are always tabular.
   ========================================================================== */

:root{
  /* Surfaces */
  --canvas:#EDF0F6;
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;

  /* Ink */
  --ink:#0E1B2E;
  --ink-2:#1B2C46;
  --ink-3:#33445F;
  --muted:#63728C;

  /* Rules */
  --rule:#D7DDE7;
  --rule-soft:#EAEEF4;
  --rule-strong:#94A2B8;

  /* Accent — brass */
  --brass:#A8761F;
  --brass-lt:#D2A044;

  /* Semantic */
  --pos:#0F7A4F;
  --neg:#B3261E;

  --shadow-sm:0 1px 2px rgba(14,27,46,.07);
  --shadow-md:0 1px 2px rgba(14,27,46,.06), 0 10px 26px rgba(14,27,46,.07);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:Inter,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-size:15px;
  color:var(--ink-2);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}

/* Figures line up everywhere, always. */
.num,.kpi-value,.stmt .num,td.num,th.num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  text-align:right;
  white-space:nowrap;
}

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

/* ==========================================================================
   Sidebar — navy binding with a brass edge on the open page
   ========================================================================== */

.sidebar{
  width:248px;flex:0 0 248px;
  background:linear-gradient(180deg,#12213A 0%,#0C1729 100%);
  color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  border-right:1px solid #0A1422;
}

.brand{
  display:flex;align-items:center;gap:11px;
  padding:19px 20px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-weight:700;font-size:1.02rem;letter-spacing:.01em;
}
.brand i{
  font-size:1.05rem;color:var(--ink);
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.3);
  flex:0 0 32px;
}

.menu{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}

.menu-group{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
  padding:16px 12px 7px;
}
.menu-group:first-child{padding-top:4px}

.menu a{
  display:flex;align-items:center;gap:11px;
  color:rgba(255,255,255,.80);text-decoration:none;
  padding:9px 12px;border-radius:8px;
  font-weight:500;font-size:.915rem;line-height:1.2;
  border-left:3px solid transparent;
  transition:background .13s ease,color .13s ease;
}
.menu a i{font-size:1rem;width:18px;text-align:center;flex:0 0 18px;opacity:.85}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.menu a.active{
  background:rgba(255,255,255,.10);
  color:#fff;font-weight:600;
  border-left-color:var(--brass-lt);
}
.menu a.active i{opacity:1;color:var(--brass-lt)}

.side-foot{
  padding:13px 20px;font-size:.74rem;letter-spacing:.03em;
  color:rgba(255,255,255,.40);
  border-top:1px solid rgba(255,255,255,.09);
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.main{flex:1;display:flex;flex-direction:column;min-width:0}

.topbar{
  height:60px;background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;position:sticky;top:0;z-index:5;
  box-shadow:0 1px 2px rgba(14,27,46,.04);
}
.tb-title{font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tb-title small{display:block;font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.tb-right{display:flex;align-items:center;gap:10px}

.badge-user{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--paper-2);border:1px solid var(--rule);
  color:var(--ink-3);padding:6px 12px;border-radius:20px;
  font-weight:600;font-size:.83rem;
}
.badge-role{
  background:var(--ink);color:#fff;border-radius:12px;
  padding:2px 8px;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}

.content{padding:24px 26px 48px;max-width:1240px;width:100%}

/* ==========================================================================
   Page head — one baseline, title left, actions right
   ========================================================================== */

.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin:0 0 20px;padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.page-head h1{
  font-size:1.42rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 3px;line-height:1.2;
}
.page-head .sub{font-size:.86rem;color:var(--muted);margin:0}
.page-head .head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.section-title{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:30px 0 12px;
  display:flex;align-items:center;gap:12px;
}
.section-title::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ==========================================================================
   Buttons — embossed: top highlight, seated edge, presses in on click
   ========================================================================== */

.btn{
  --btn-emboss:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.10);
  border-radius:8px;
  font-weight:600;font-size:.875rem;letter-spacing:.005em;
  padding:.46rem .9rem;
  border:1px solid rgba(10,20,34,.16);
  background-image:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 48%,rgba(0,0,0,.07) 100%);
  box-shadow:var(--btn-emboss), 0 1px 1px rgba(14,27,46,.10), 0 2px 5px rgba(14,27,46,.09);
  transition:transform .06s ease, box-shadow .13s ease, filter .13s ease;
}
.btn:hover{filter:brightness(1.05);box-shadow:var(--btn-emboss), 0 2px 3px rgba(14,27,46,.12), 0 5px 12px rgba(14,27,46,.14)}
.btn:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.24), inset 0 1px 0 rgba(0,0,0,.10);
  filter:brightness(.97);
}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px;box-shadow:var(--btn-emboss)}
.btn i{margin-right:.34em}
.btn-sm{padding:.3rem .66rem;font-size:.8rem;border-radius:7px}
.btn-lg{padding:.6rem 1.15rem;font-size:.95rem;border-radius:9px}

/* Outline + light buttons sit on white so the emboss reads as raised paper */
.btn-outline-secondary,.btn-outline-primary,.btn-outline-dark,.btn-light{
  background-color:#fff;color:var(--ink-2);border-color:var(--rule-strong);
}
.btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-dark:hover,.btn-light:hover{
  background-color:#fff;color:var(--ink);border-color:var(--ink-3);
}

/* Brass — the accent action */
.btn-brass{
  background-color:var(--brass);color:#fff;border-color:#8A5F14;
}
.btn-brass:hover{background-color:#B07F22;color:#fff}

.btn-ink{background-color:var(--ink);color:#fff;border-color:#060D18}
.btn-ink:hover{background-color:var(--ink-2);color:#fff}

/* Toolbar: a seated group of report actions, aligned right */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar .spacer{flex:1}

/* ==========================================================================
   Filter bar — financial year presets + custom range
   ========================================================================== */

.filterbar{
  background:var(--paper);border:1px solid var(--rule);border-radius:11px;
  box-shadow:var(--shadow-sm);
  padding:12px 15px;margin:0 0 18px;
  display:flex;flex-direction:column;gap:10px;
}
.fb-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fb-label{
  font-size:.67rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);min-width:112px;
}
.fb-fys{display:flex;gap:6px;flex-wrap:wrap}
.fb-to{color:var(--muted);font-size:.83rem;font-weight:600}
.filterbar .form-control{width:auto;min-width:158px}
/* The financial-year buttons. The current year carries a brass dot; the next
   year is offered before it starts, so it reads as available but quiet. */
.fy-btn{display:inline-flex;align-items:center;gap:6px}
.fy-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:var(--brass-lt);
  box-shadow:0 0 0 2px rgba(210,160,68,.25);
}
.btn-ink .fy-dot{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.fy-next:not(.btn-ink),.fy-future:not(.btn-ink){border-style:dashed;color:var(--muted)}

/* Current financial year, always visible in the top bar */
.fy-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--ink);color:#fff;text-decoration:none;
  padding:6px 13px;border-radius:20px;
  font-weight:700;font-size:.79rem;letter-spacing:.02em;
  border:1px solid #060D18;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.fy-chip:hover{background:var(--ink-2);color:#fff}
.fy-chip i{color:var(--brass-lt)}

.fb-active{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:20px;
  padding:5px 13px;font-size:.78rem;font-weight:600;color:var(--ink-3);
}
.fb-active i{color:var(--brass)}

/* Stock level flags */
.qty-out{color:var(--neg);font-weight:700}
.qty-low{color:#B0761B;font-weight:700}
.qty-ok{color:var(--ink-2)}

/* ==========================================================================
   KPI cards — fixed three-row structure so every card aligns
   ========================================================================== */

/* Fixed column counts, not auto-fit: six cards must land as 3x2, never 4+2. */
.kpi-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch}
@media(min-width:660px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .kpi-grid{grid-template-columns:repeat(3,1fr)} }

.kpi{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:16px 18px 15px;
  box-shadow:var(--shadow-sm);
  display:grid;
  grid-template-rows:auto auto auto;   /* label · value · foot — same baseline on every card */
  gap:9px;
  overflow:hidden;
  min-height:126px;
}
.kpi::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--accent,var(--ink-3));
}

.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-label{
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);line-height:1.3;
}
.kpi-ico{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:#fff;
  background:var(--accent,var(--ink-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(14,27,46,.22);
}

.kpi-value{
  font-size:1.48rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);line-height:1.1;
  text-align:left;                      /* value grid is left-aligned; digits still tabular */
  display:flex;align-items:baseline;gap:6px;
}
.kpi-cur{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.kpi-foot{font-size:.76rem;color:var(--muted);line-height:1.3;align-self:end}

.a-navy  {--accent:#1E3A5F}
.a-green {--accent:#0F7A4F}
.a-red   {--accent:#B3261E}
.a-teal  {--accent:#0E6E7D}
.a-amber {--accent:#B0761B}
.a-brass {--accent:var(--brass)}

/* ==========================================================================
   Quick-action tiles — same card, same alignment, brass on hover
   ========================================================================== */

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:12px}

.tile{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);border:1px solid var(--rule);border-radius:11px;
  padding:14px 15px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .13s ease,border-color .13s ease;
}
.tile i{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.02rem;color:#fff;background:var(--accent,var(--ink-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(14,27,46,.22);
}
.tile:hover{
  transform:translateY(-2px);
  border-color:var(--brass-lt);
  box-shadow:0 1px 2px rgba(14,27,46,.07), 0 10px 22px rgba(14,27,46,.13);
  color:var(--ink);
}
.tile:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ==========================================================================
   Cards
   ========================================================================== */

.card.soft{
  border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--shadow-sm);overflow:hidden;background:var(--paper);
}
.card.soft .card-header{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:11px 16px;
}

/* ==========================================================================
   The statement sheet — the signature of this app
   ========================================================================== */

.sheet{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:12px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

.sheet-head{padding:24px 28px 18px;text-align:center;border-bottom:2px solid var(--ink)}
.sheet-org{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-size:1.42rem;font-weight:700;color:var(--ink);
  letter-spacing:.01em;line-height:1.2;margin:0;
}
.sheet-org-sub{font-size:.78rem;color:var(--muted);margin-top:4px;letter-spacing:.03em}
.sheet-title{
  display:inline-block;margin-top:14px;padding:6px 0 0;
  font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);border-top:1px solid var(--rule);
}
.sheet-period{font-size:.83rem;color:var(--ink-3);margin-top:5px;font-weight:500}

.sheet-body{padding:0}
.sheet-foot{
  padding:12px 20px;border-top:1px solid var(--rule);
  background:var(--paper-2);
  font-size:.74rem;color:var(--muted);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* Statement table.
   table-layout:fixed + percentage column widths, so the same proportions hold on
   screen and on A4. Pixel widths used to overflow the printed page and crush the
   narration column into one character per line. */
.stmt{width:100%;border-collapse:collapse;font-size:.875rem;margin:0;table-layout:fixed}
.stmt thead th{
  background:var(--paper-2);
  border-bottom:1px solid var(--rule-strong);
  padding:10px 16px;
  font-size:.67rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:left;
  white-space:normal;          /* headers wrap rather than collide with the next column */
  line-height:1.25;
}
.stmt thead th.num{text-align:right}
.stmt tbody td{padding:7px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.stmt tbody tr:hover{background:#F6F9FD}
.stmt .code{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.stmt .acct{font-weight:600;color:var(--ink-2)}
.stmt .acct a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.stmt .acct a:hover{border-bottom-color:var(--brass-lt);color:var(--ink)}
.stmt .grp{color:var(--muted);font-size:.8rem}
.stmt .dc{color:var(--muted);font-size:.74rem;font-weight:600;margin-left:3px}

/* Narration: wraps, never truncated, breaks long unbroken strings rather than overflowing */
.narr{white-space:normal;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.narr .narr-sub{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}

/* Accounting rules: single above a subtotal, double under the grand total */
.stmt tr.subtotal td{
  border-top:1px solid var(--rule-strong);
  border-bottom:none;
  font-weight:700;color:var(--ink);
  padding-top:9px;padding-bottom:9px;
  background:var(--paper-2);
}
.stmt tr.grand td{
  border-top:1px solid var(--ink);
  border-bottom:3px double var(--ink);
  font-weight:700;color:var(--ink);font-size:.94rem;
  padding-top:10px;padding-bottom:10px;
  background:var(--paper-2);
}
.stmt tr.section-row td{
  background:#F1F4F9;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 16px;
  border-bottom:1px solid var(--rule);
}
.stmt tr.opening td{background:var(--paper-2);font-weight:600;color:var(--ink-3)}
.stmt .empty{text-align:center;color:var(--muted);padding:34px 16px}

.pos{color:var(--pos)}
.neg{color:var(--neg)}

/* Result strip under P&L / BS */
.result-strip{
  margin-top:16px;background:var(--paper);
  border:1px solid var(--rule);border-left:4px solid var(--accent,var(--ink));
  border-radius:11px;box-shadow:var(--shadow-sm);
  padding:15px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.result-strip .rs-label{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.result-strip .rs-value{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Balance chip */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:20px;
  font-size:.76rem;font-weight:700;letter-spacing:.04em;
  border:1px solid transparent;
}
.chip-ok{background:#E7F4EE;color:#0B5C3B;border-color:#B9DFCD}
.chip-bad{background:#FCEAE8;color:#8C1D18;border-color:#F0C4C0}

/* ==========================================================================
   Data tables (lists)
   ========================================================================== */

.table thead th{
  background:var(--paper-2);color:var(--muted);
  text-transform:uppercase;font-size:.67rem;font-weight:700;letter-spacing:.11em;
  border-bottom:1px solid var(--rule-strong);
  padding:10px 14px;white-space:nowrap;
}
.table tbody td{padding:8px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}

/* Pills */
.pill{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.pill-pv,.pill-red{background:#FCEAE8;color:#8C1D18;border-color:#F2CBC7}
.pill-rv,.pill-green{background:#E7F4EE;color:#0B5C3B;border-color:#C2E3D3}
.pill-jv,.pill-blue{background:#E8EFF9;color:#1B3F73;border-color:#C9D9F0}
.pill-ob,.pill-purple{background:#F1ECF8;color:#4B2E77;border-color:#DCD0EE}
.pill-pur{background:#FBF0DF;color:#7A5210;border-color:#EFDCBB}
.pill-sal{background:#E7F4EE;color:#0B5C3B;border-color:#C2E3D3}
.pill-ret{background:#FCEAE8;color:#8C1D18;border-color:#F2CBC7}

/* Forms */
.form-control,.form-select{
  border-radius:8px;border:1px solid var(--rule-strong);
  font-size:.9rem;padding:.44rem .7rem;
  box-shadow:inset 0 1px 2px rgba(14,27,46,.06);
}
.form-control:focus,.form-select:focus{
  border-color:var(--brass);box-shadow:0 0 0 3px rgba(168,118,31,.15), inset 0 1px 2px rgba(14,27,46,.06);
}
.form-label{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}

.alert{border-radius:10px;border-width:1px;font-size:.9rem;box-shadow:var(--shadow-sm)}

/* ==========================================================================
   Login
   ========================================================================== */

.login-bg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#0E1B2E 0%,#16283F 55%,#243A57 100%);
}
.login-card{
  background:var(--paper);border-radius:16px;padding:38px 36px;
  width:100%;max-width:400px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  border-top:3px solid var(--brass);
}
.login-brand{
  width:60px;height:60px;border-radius:14px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;color:var(--ink);
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.28);
}
.login-card h1{font-size:1.28rem;font-weight:700;margin:0 0 3px;color:var(--ink);letter-spacing:-.01em}

/* ==========================================================================
   Document forms — 12-column field grid, so every label and input lines up
   ========================================================================== */

.doc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 16px;align-items:start}
.fld{display:flex;flex-direction:column;min-width:0}
.fld .form-label{margin-bottom:5px}
.fld .form-control,.fld .form-select{width:100%}
.fld-1{grid-column:span 1}.fld-2{grid-column:span 2}.fld-3{grid-column:span 3}
.fld-4{grid-column:span 4}.fld-5{grid-column:span 5}.fld-6{grid-column:span 6}
.fld-7{grid-column:span 7}.fld-8{grid-column:span 8}.fld-9{grid-column:span 9}
.fld-10{grid-column:span 10}.fld-11{grid-column:span 11}.fld-12{grid-column:span 12}

@media(max-width:1000px){
  .doc-grid{grid-template-columns:repeat(6,1fr)}
  .fld-1,.fld-2,.fld-3{grid-column:span 3}
  .fld-4,.fld-5,.fld-6{grid-column:span 3}
  .fld-7,.fld-8,.fld-9,.fld-10,.fld-11,.fld-12{grid-column:span 6}
}
@media(max-width:620px){
  .doc-grid{grid-template-columns:1fr}
  [class*="fld-"]{grid-column:span 1 !important}
}

/* Numbers are typed right-aligned, in the same tabular face they print in */
.num-input{
  text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* Line-item grid: inputs sit flush in the cell, computed cells read as figures */
.line-grid tbody td{padding:6px 10px;vertical-align:middle}
.line-grid tbody td.rowno{color:var(--muted);text-align:center;font-size:.8rem}
.line-grid .form-control,.line-grid .form-select{padding:.34rem .55rem;font-size:.86rem}
.line-grid tbody td.num{color:var(--muted);font-weight:600}
.line-grid tr.line-filled td.num{color:var(--ink-2)}
.line-grid tr.line-filled td.cell-total{color:var(--ink);font-weight:700}
.line-grid tbody tr:hover{background:transparent}

/* ==========================================================================
   Developer identity
   ========================================================================== */

.side-foot.dev-foot{
  display:block;text-decoration:none;
  transition:background .13s ease;
}
.side-foot.dev-foot:hover{background:rgba(255,255,255,.06)}
.dev-mark{
  display:block;color:var(--brass-lt);
  font-weight:700;font-size:.84rem;letter-spacing:.04em;
}
.dev-sub{display:block;color:rgba(255,255,255,.40);font-size:.72rem;margin-top:2px}

/* Login page credit */
.login-dev{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule)}
.login-dev-name{
  font-weight:700;font-size:.86rem;color:var(--brass);letter-spacing:.05em;text-transform:uppercase;
}
.login-dev-sub{font-size:.76rem;color:var(--muted);margin-top:3px}

/* Support page identity card */
.dev-card{
  background:linear-gradient(135deg,#12213A 0%,#0C1729 100%);
  border-radius:14px;padding:24px 26px;color:#fff;
  box-shadow:0 10px 30px rgba(14,27,46,.22);
}
.dev-card-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.dev-logo{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--ink);
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.3);
}
.dev-card-name{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:1.5rem;font-weight:700;letter-spacing:.01em;line-height:1.2;
}
.dev-card-tag{color:rgba(255,255,255,.62);font-size:.86rem;margin-top:3px}
.dev-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.dev-chan{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:11px;padding:12px 15px;color:#fff;
  transition:background .13s ease,border-color .13s ease;
}
.dev-chan:hover{background:rgba(255,255,255,.13);border-color:var(--brass-lt);color:#fff}
.dev-chan i{font-size:1.05rem;color:var(--brass-lt)}
.dev-chan-k{display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.dev-chan-v{display:block;font-weight:600;font-size:.9rem;margin-top:1px;overflow-wrap:anywhere}

.support-list{margin:0;padding-left:20px;color:var(--ink-3);font-size:.9rem;line-height:1.8}
.support-list li{padding-left:3px}

/* Restore warning + contact row */
.restore-warn{
  display:flex;gap:11px;align-items:flex-start;
  background:#FCEFEE;border:1px solid #F0C4C0;border-radius:10px;
  padding:13px 15px;font-size:.88rem;color:#7C1A15;line-height:1.5;
}
.restore-warn i{font-size:1.1rem;color:var(--neg);flex:0 0 auto;margin-top:1px}
.restore-contact{display:flex;gap:9px;flex-wrap:wrap}

/* Small credit line, printed at the foot of every page */
.print-credit{display:none}
.print-credit-screen{
  margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.75rem;color:var(--muted);text-align:center;
}

/* Restore instructions */
.restore-steps{margin:0;padding-left:20px;color:var(--ink-3);font-size:.9rem;line-height:1.9}
.restore-steps li{padding-left:4px}
.restore-steps code,.card-body code{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;
  padding:1px 6px;font-size:.85em;color:var(--ink);
}
.backup-note{
  display:flex;gap:11px;align-items:flex-start;
  background:#FBF6EC;border:1px solid #EBD9B4;border-radius:10px;
  padding:12px 14px;font-size:.86rem;color:#6B4E12;line-height:1.5;
}
.backup-note i{font-size:1.05rem;color:var(--brass);flex:0 0 auto;margin-top:1px}

/* Two panels side by side, equal height */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.split-2 > .card{display:flex;flex-direction:column}
/* The table must size to its own rows — giving the scroll container flex:1 clipped
   every row after the first. The footer button is pushed down instead. */
.split-2 .table-responsive{flex:0 0 auto}
.split-2 > .card > .card-body:last-child{margin-top:auto}
@media(max-width:900px){ .split-2{grid-template-columns:1fr} }

/* Rates card + totals card, side by side and equal height */
.trade-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:900px){ .trade-foot{grid-template-columns:1fr} }
.totals-card .card-body{padding-top:14px}

/* The totals stack: labels left, figures right, on one aligned column */
.totals-block{display:flex;flex-direction:column;gap:2px}
.tot-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:6px 0;border-bottom:1px solid var(--rule-soft);
  font-size:.9rem;color:var(--ink-3);
}
.tot-row:last-child{border-bottom:none}
.tot-row .num{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-weight:600;color:var(--ink-2);min-width:130px;text-align:right;
}
.tot-row.tot-grand{
  margin-top:5px;padding-top:9px;
  border-top:1px solid var(--ink);border-bottom:3px double var(--ink);
  font-weight:700;color:var(--ink);font-size:1rem;
}
.tot-row.tot-grand .num{font-size:1.12rem;font-weight:700;color:var(--ink)}

/* Sticky action bar */
.action-bar{
  position:sticky;bottom:0;z-index:4;
  display:flex;align-items:center;gap:12px;
  margin-top:18px;padding:13px 16px;
  background:var(--paper);border:1px solid var(--rule);border-radius:11px;
  box-shadow:0 -2px 10px rgba(14,27,46,.07);
}
.action-bar .spacer{flex:1}
.action-note{font-size:.83rem;font-weight:600;color:var(--muted)}
.action-note.ok{color:var(--pos)}

/* ==========================================================================
   Printed trade document — parties, meta strip, words, signatures
   ========================================================================== */

.doc-parties{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.party-box{padding:14px 20px}
.party-box + .party-box{border-left:1px solid var(--rule)}
.party-label{
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-bottom:4px;
}
.party-name{font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.3}
.party-line{font-size:.82rem;color:var(--muted);margin-top:2px;line-height:1.4}

.doc-meta{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--rule);background:var(--paper-2);
}
.meta-cell{padding:9px 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.meta-cell + .meta-cell{border-left:1px solid var(--rule)}
.meta-k{font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meta-v{font-size:.86rem;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
@media(max-width:760px){ .doc-meta{grid-template-columns:repeat(2,1fr)} }

.doc-summary{
  display:grid;grid-template-columns:1.35fr 1fr;gap:0;
  border-top:1px solid var(--rule);
}
.doc-words{padding:16px 20px;min-width:0}
.doc-totals{padding:14px 20px;border-left:1px solid var(--rule);background:var(--paper-2)}
.words-label{
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.words-value{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.4;
  overflow-wrap:anywhere;
}
.words-note{font-size:.86rem;color:var(--ink-3);line-height:1.45;overflow-wrap:anywhere}
@media(max-width:760px){
  .doc-summary{grid-template-columns:1fr}
  .doc-totals{border-left:none;border-top:1px solid var(--rule)}
}

.doc-sign{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding:30px 20px 18px;border-top:1px solid var(--rule);
}
.sign-box{display:flex;flex-direction:column;gap:6px}
.sign-line{display:block;border-bottom:1px solid var(--rule-strong);height:26px}
.sign-label{font-size:.74rem;color:var(--muted);font-weight:600}

/* ---------- invoice / GRN as a boxed form: every block ruled, columns ruled ---------- */
.doc-sheet .sheet-head{border-bottom:2px solid var(--ink)}
.doc-sheet .doc-parties,.doc-sheet .doc-meta{border-bottom:1px solid var(--ink)}
.doc-sheet .party-box + .party-box,.doc-sheet .meta-cell + .meta-cell{border-left:1px solid var(--rule-strong)}
.doc-sheet .stmt th,.doc-sheet .stmt td{border-right:1px solid var(--rule)}
.doc-sheet .stmt th:last-child,.doc-sheet .stmt td:last-child{border-right:none}
.doc-sheet .stmt thead th{border-bottom:1px solid var(--ink)}
.doc-sheet .stmt tbody td{border-bottom:1px solid var(--rule-soft)}
.doc-sheet .stmt tr.fill-row td{border-bottom:1px solid var(--rule-soft);padding-top:7px;padding-bottom:7px}
.doc-sheet .stmt tfoot tr.subtotal td{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.doc-sheet .doc-summary{border-top:none;border-bottom:1px solid var(--ink)}
.doc-sheet .doc-totals{border-left:1px solid var(--ink)}
.doc-sheet .doc-sign{border-top:none;border-bottom:1px solid var(--rule-strong)}

/* ==========================================================================
   Print — the sheet becomes the document
   ========================================================================== */

.print-head{display:none}

@media print{
  /* Side margins live INSIDE the page (body padding) so the print is safe even when the
     browser print window is set to Margins: None, which overrides @page margins. */
  @page{size:A4;margin:12mm 4mm}

  html,body{background:#fff !important;font-size:11pt}
  body{padding:6mm 9mm 4mm !important;margin:0 !important}
  /* KPI cards are screen furniture — the printed statement carries its own totals */
  .sidebar,.topbar,.no-print,.alert,.kpi-grid,.tiles,.section-title{display:none !important}
  .app{display:block}
  .main{display:block}
  .content{padding:0 !important;max-width:none !important}

  .print-head{
    display:block;text-align:center;margin:0 0 10pt;
    padding-bottom:8pt;border-bottom:1.5pt solid #000;
  }
  .print-head .ph-org{
    font-family:'Source Serif 4',Georgia,serif;
    font-size:15pt;font-weight:700;color:#000;
  }
  .print-head .ph-sub{font-size:8.5pt;color:#333;margin-top:2pt}

  .sheet{border:none !important;box-shadow:none !important;border-radius:0 !important}
  .sheet-head{padding:0 0 8pt;border-bottom:1pt solid #000}
  .sheet-org{font-size:14pt}
  .sheet-title{color:#000;letter-spacing:.18em}
  .sheet-foot{background:none;border-top:1pt solid #999;padding:6pt 0;color:#333}

  .card.soft{border:1px solid #999 !important;box-shadow:none !important;break-inside:avoid}

  .stmt{font-size:9.5pt;table-layout:fixed;width:100%}

  /* Never let a narration be clipped on paper. Bootstrap's .text-truncate and any
     inline pixel width are both overridden here — inline styles need !important. */
  .text-truncate{overflow:visible !important;white-space:normal !important;
    text-overflow:clip !important;max-width:none !important}
  /* Cells wrap at spaces; only narration may break inside a word (long refs, no spaces). */
  .stmt td,.table td{white-space:normal}
  .narr{overflow-wrap:anywhere;word-break:break-word}
  .stmt td.num,.stmt th.num,.table td.num,.table th.num{white-space:nowrap;overflow-wrap:normal;word-break:normal}
  .stmt .code{white-space:nowrap}

  .stmt thead{display:table-header-group}        /* header repeats on every page */
  .stmt tfoot{display:table-footer-group}
  .stmt thead th{background:#EEE !important;color:#000;border-bottom:1pt solid #000;padding:5pt 7pt;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stmt tbody td{padding:3.4pt 7pt;border-bottom:.4pt solid #DDD}

  /* Tables with six or more figure columns need a denser scale to stay on A4 */
  .stmt-wide{font-size:8.4pt}
  .stmt-wide td,.stmt-wide th{padding-left:4pt;padding-right:4pt}
  /* Total rows are set larger on screen; on paper they must match the body scale
     or the widest figures in the table collide with the column beside them. */
  .stmt tr.grand td{font-size:9.5pt}
  .stmt-wide tr.grand td,.stmt-wide tr.subtotal td{font-size:8.4pt}
  .stmt tbody tr:hover{background:none}
  .stmt tr{break-inside:avoid;page-break-inside:avoid}
  .stmt tr.subtotal td,.stmt tr.grand td,.stmt tr.section-row td,.stmt tr.opening td{
    background:#F2F2F2 !important;color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .stmt tr.grand td{border-top:1pt solid #000;border-bottom:2.5pt double #000}

  /* Trade document blocks keep their structure on paper */
  .action-bar,.trade-foot,.line-grid{display:none !important}
  /* Column counts are fixed for paper — never let a screen breakpoint stack these */
  .doc-parties{grid-template-columns:1fr 1fr !important}
  .doc-meta{grid-template-columns:repeat(2,1fr) !important}
  .doc-summary{grid-template-columns:1.15fr 1fr !important}
  .doc-sign{grid-template-columns:repeat(3,1fr) !important}
  .stmt thead th{white-space:normal}
  .stmt td,.stmt th{padding-left:5pt;padding-right:5pt}

  .doc-parties{border-bottom:1pt solid #000;break-inside:avoid}
  .party-box{padding:6pt 8pt}
  .party-box + .party-box{border-left:.6pt solid #999}
  .party-label{color:#000;font-size:7pt}
  .party-name{font-size:10pt}
  .party-line{font-size:8pt;color:#333}
  .doc-meta{border-bottom:.6pt solid #999;background:#F7F7F7 !important;break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .meta-cell{padding:4pt 8pt}
  .meta-cell + .meta-cell{border-left:.6pt solid #CCC}
  .meta-k{font-size:6.6pt}
  .meta-v{font-size:8pt}
  .doc-summary{border-top:.6pt solid #999;break-inside:avoid}
  .doc-words{padding:8pt}
  .doc-totals{padding:6pt 8pt;border-left:.6pt solid #999;background:#F7F7F7 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .words-value{font-size:10pt}
  .tot-row{font-size:8.6pt;padding:2.6pt 0;border-bottom:.4pt solid #DDD;gap:10pt}
  .tot-row .num{min-width:66pt}
  .tot-row.tot-grand{border-top:1pt solid #000;border-bottom:2.5pt double #000;font-size:10pt}
  .tot-row.tot-grand .num{font-size:11pt}
  .doc-sign{padding:16pt 8pt 6pt;gap:16pt;break-inside:avoid}
  .sign-line{border-bottom:.6pt solid #000;height:20pt}
  .sign-label{font-size:7.6pt;color:#333}

  /* boxed invoice form on paper: one outer border, black rules between blocks, ruled columns */
  .doc-sheet{border:1.2pt solid #000 !important;overflow:hidden !important}
  .doc-sheet .sheet-head{padding:7pt 8pt 6pt;border-bottom:1pt solid #000}
  .doc-sheet .doc-parties{border-bottom:1pt solid #000}
  .doc-sheet .party-box + .party-box{border-left:1pt solid #000}
  .doc-sheet .doc-meta{border-bottom:1pt solid #000}
  .doc-sheet .meta-cell + .meta-cell{border-left:.6pt solid #666}
  .doc-sheet .stmt th,.doc-sheet .stmt td{border-right:.6pt solid #666}
  .doc-sheet .stmt th:last-child,.doc-sheet .stmt td:last-child{border-right:none}
  .doc-sheet .stmt thead th{border-bottom:1pt solid #000}
  .doc-sheet .stmt tbody td{border-bottom:.4pt solid #BBB}
  .doc-sheet .stmt tr.fill-row td{border-bottom:.4pt solid #BBB;padding-top:4pt;padding-bottom:4pt}
  .doc-sheet .stmt tfoot tr.subtotal td{border-top:1pt solid #000;border-bottom:1pt solid #000}
  .doc-sheet .doc-summary{border-top:none;border-bottom:1pt solid #000}
  .doc-sheet .doc-totals{border-left:1pt solid #000}
  .doc-sheet .doc-sign{border-bottom:1pt solid #000;padding:14pt 8pt 6pt}
  .doc-sheet .sheet-foot{border-top:none;padding:4pt 8pt}

  .result-strip{border:1pt solid #000;border-left:3pt solid #000;box-shadow:none;break-inside:avoid}
  .chip{border:.6pt solid #666;color:#000;background:none !important}

  a{color:#000 !important;text-decoration:none}
  .stmt .acct a{border-bottom:none}

  /* Developer credit, printed once at the foot of the page */
  .print-credit{
    display:block;margin-top:10pt;padding-top:4pt;
    border-top:.4pt solid #BBB;
    font-size:7pt;color:#666;text-align:center;letter-spacing:.02em;
  }
  .dev-card{background:none !important;color:#000 !important;box-shadow:none;border:1pt solid #000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dev-card-tag,.dev-chan-k{color:#444 !important}
  .dev-chan{background:none !important;border:.6pt solid #999;color:#000 !important}
  .dev-logo{background:#DDD !important;color:#000 !important;box-shadow:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:900px){
  .sidebar{width:66px;flex:0 0 66px}
  .brand span,.menu a span,.side-foot,.menu-group{display:none}
  .brand{justify-content:center;padding:16px 8px}
  .menu a{justify-content:center;padding:11px 6px;border-left:0;border-right:3px solid transparent}
  .menu a.active{border-left:0;border-right-color:var(--brass-lt)}
  .menu a i{width:auto;flex:none}
  .content{padding:18px 16px 40px}
  .page-head{align-items:flex-start;flex-direction:column;gap:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .tile:hover{transform:none}
  .btn:active{transform:none}
}

/* Search row under the period filter, and page navigation for long lists */
.fb-search .fb-q{max-width:280px}
.fb-search .fb-party{max-width:300px}
.fb-search select{width:auto}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.pager .pager-of{margin-left:8px;color:var(--muted);font-size:13px}

/* ---------- FBR digital invoicing ---------- */
.pill-amber{background:#FFF4DE;color:#8A5A00;border:1px solid #F0D79A}
.pill-grey{background:#EEF1F5;color:#4A5568;border:1px solid #D7DDE7}
.fbr-chip-failed{background:#FDECEA;color:#9B1C1C;border-color:#F5C2BD}
.fbr-chip-unknown,.fbr-chip-sending{background:#FFF4DE;color:#8A5A00;border-color:#F0D79A}
.fbr-chip-not_sent{background:#EEF1F5;color:#4A5568}
.fbr-block{display:flex;align-items:center;gap:18px;margin:10px 0 14px;padding:10px 14px;border:1px solid var(--rule);border-radius:8px}
.fbr-logo img{height:56px;width:auto;display:block}
.fbr-logo-text{display:inline-block;font-weight:800;color:#0B5C3B;line-height:1.05;text-align:center;border:2px solid #0B5C3B;border-radius:6px;padding:4px 8px}
.fbr-logo-text small{font-size:9px;font-weight:700}
.fbr-no{flex:1;display:flex;flex-direction:column;gap:2px}
.fbr-no-v{font-size:18px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fbr-qr{width:1in;height:1in;flex:0 0 1in}
.fbr-qr svg{width:1in;height:1in;display:block}
.fbr-counts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fbr-count{display:flex;flex-direction:column;min-width:150px;padding:10px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);text-decoration:none;color:var(--ink-2)}
.fbr-count .n{font-size:22px;font-weight:700}
.fbr-count .l{font-size:12.5px;color:var(--muted)}
.fbr-count.fbr-failed .n{color:var(--neg)} .fbr-count.fbr-unknown .n{color:#B0761B} .fbr-count.fbr-sent .n{color:var(--pos)}
.fbr-st{font-weight:600;font-size:13px}
.fbr-st.fbr-sent{color:var(--pos)} .fbr-st.fbr-failed{color:var(--neg)} .fbr-st.fbr-unknown,.fbr-st.fbr-sending{color:#B0761B} .fbr-st.fbr-legacy,.fbr-st.fbr-not_sent{color:var(--muted)}
.fbr-err{font-size:12px;color:var(--neg);margin-top:3px;white-space:normal}
.fbr-bulkbar{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.fbr-resolve td{background:#FFF8EC}
.fbr-resolve-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fbr-steps ol{margin:0 0 10px 18px;padding:0}
.fbr-steps li{margin-bottom:4px}
.fbr-ip{padding:8px 12px;background:var(--paper-2);border:1px dashed var(--rule-strong);border-radius:8px;display:inline-flex;align-items:center;gap:10px}
@media print{ .fbr-block{border:.6pt solid #666} }

/* Statement pages (trial balance, ledger, invoice…) carry their own letterhead and title:
   on paper the generic letterhead and the screen title block above them are dropped. */
@media print{
  body.has-sheet .print-head,body.has-sheet .page-head{display:none !important}
  body.has-sheet .sheet{margin-top:0}
}

/* ---------- lists: the action column, clickable rows, compact pills ---------- */
.stmt th.act,.stmt td.act{text-align:right;white-space:nowrap;padding-left:4px;padding-right:12px}
.stmt td.act .btn{margin-left:4px}
.stmt .pill{padding:2px 7px;font-size:.64rem;vertical-align:1px}
tr.row-link{cursor:pointer}
tr.row-link:hover td{background:#F3F7FC}
.stmt .code a.doc-no{color:var(--ink-2);font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
.stmt .code a.doc-no:hover{color:var(--ink);border-bottom-color:var(--brass-lt)}
.ledger-stmt td:nth-child(2){white-space:nowrap}

/* ---------- ledger: month totals, summary, printed note ---------- */
.fb-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.fb-check input[type=checkbox]{width:16px;height:16px}
.ledger-stmt tr.month-total td{background:var(--paper-2);font-weight:700;font-size:.86rem;letter-spacing:.04em;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.ledger-summary{margin:18px 16px 14px;max-width:560px}
.credit-history{margin:18px 16px 14px;overflow-x:auto}
.credit-history .ls-title{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:700}
.ch-table{width:100%;table-layout:fixed}
.ch-table th,.ch-table td{border:1px solid var(--line,#cfd6de);padding:5px 6px;white-space:nowrap;font-size:.86rem}
.ch-table th{text-align:right}
.ledger-summary .ls-title{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:700}
.ledger-note{margin:16px 16px 0;font-size:1.05rem;white-space:pre-wrap;line-height:2;
  font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting',Inter,serif;unicode-bidi:plaintext;text-align:start}
.ledger-note:empty{display:none}
.ledger-note-input{flex:1;min-width:320px;font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting',Inter,sans-serif}
/* ---------- voucher forms, two per A4 ---------- */
.vouchers-print{padding:0}
.vprint{border:1px solid var(--rule-strong);padding:16px 18px;margin:0 0 18px;break-inside:avoid;page-break-inside:avoid}
.vp-head{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:start;border-bottom:1.5px solid #000;padding-bottom:8px;margin-bottom:8px}
.vp-org{font-family:'Source Serif 4',Georgia,serif;font-size:1.15rem;font-weight:700;color:#000}
.vp-org small{display:block;font-family:Inter,sans-serif;font-size:.74rem;font-weight:400;color:#333}
.vp-title{grid-column:1 / -1;text-align:center;letter-spacing:.2em;font-weight:700;font-size:.9rem}
.vp-meta{display:flex;gap:18px;grid-column:1 / -1;font-size:.86rem}
.vp-meta span{color:#444;margin-right:5px}
.vp-table th,.vp-table td{padding:5px 8px}
.vp-narr,.vp-words{font-size:.86rem;margin-top:8px}
.vp-sign{display:flex;gap:14px;margin-top:28px;font-size:.78rem;color:#333}
.vp-sign div{flex:1;text-align:center}
.vp-sign span{display:block;border-top:1px solid #000;margin-bottom:4px}
@media print{
  .vprint{margin:0 0 8mm;padding:6mm 7mm;min-height:120mm}
  .vprint:nth-of-type(2n){break-after:page;page-break-after:always}
  .vprint:last-of-type{break-after:auto;page-break-after:auto}
  .vouchers-print{border:0 !important}
  .ledger-stmt tr.month-total td{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ledger-summary{break-inside:avoid;margin:12pt 0 8pt}
  .credit-history{break-inside:avoid;margin:12pt 0 8pt;overflow:visible}
  .ch-table th,.ch-table td{font-size:8.5pt;padding:3pt 4pt}
  .ledger-summary .ls-table th{white-space:normal}
  .ledger-note{margin:10pt 0 0;font-size:12pt;line-height:2;color:#000;break-inside:avoid}
  /* nothing is clipped at the sheet edge on paper; a little air before the paper edge */
  .sheet{overflow:visible !important}
  .sheet-foot{padding:6pt 3pt}
  .stmt .dc{margin-left:2pt}
  a.doc-no{font-weight:700}
  /* every list and register fits the sheet: smaller type, no clipping */
  .table-responsive{overflow:visible !important}
  .table{font-size:8.5pt}
  .table th,.table td{padding:3pt 5pt !important;white-space:normal}
  .pill{border:.5pt solid #666;background:none !important;color:#000 !important;padding:0 3pt}
  .filterbar,.pager,.fbr-bulkbar,.fbr-counts,.head-actions,.kpi,.kpi-grid{display:none !important}
  .card.soft{break-inside:auto}
  tr{break-inside:avoid;page-break-inside:avoid}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}
}

/* chart of accounts report */
.coa-stmt .coa-n{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted);margin-left:8px;font-size:.72rem}
.coa-stmt .pill{margin-left:6px}
@media print{ .coa-stmt .pill{display:none} .coa-stmt tr.section-row td{break-after:avoid} }

/* Live search and searchable dropdowns */
main.ls-busy .sheet, main.ls-busy table { opacity: .55; transition: opacity .15s; }
.ss-panel { position: absolute; z-index: 2000; display: none; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18); overflow: hidden; font-size: 14px; }
.ss-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.ss-top .bi { color: #64748b; }
.ss-q { flex: 1; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 9px; font-size: 14px; outline: none; min-width: 0; }
.ss-q:focus { border-color: #b8862b; box-shadow: 0 0 0 3px rgba(184,134,43,.18); }
.ss-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.ss-it { padding: 7px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111827; }
.ss-it.blank { color: #94a3b8; }
.ss-it.cur { font-weight: 600; }
.ss-it.on { background: #0f1b2d; color: #fff; }
.ss-it mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.ss-it.on mark { background: #b8862b; color: #fff; }
.ss-none { padding: 12px; color: #b42318; }
.ss-info { padding: 5px 12px; font-size: 12px; color: #64748b; border-top: 1px solid #e5e7eb; background: #f8fafc; }
@media print { .ss-panel { display: none !important; } }

/* Account Code List */
.code-list td{font-size:.84rem;vertical-align:top}
.code-list td.cl-addr{white-space:normal;line-height:1.35}
@media print{ .code-list td,.code-list th{font-size:8pt;padding:3px 4px} .code-list td.cl-addr{font-size:7.5pt} }
.code-list td.cl-nw{white-space:nowrap}


/* ==========================================================================
   Premium pass (17 Oct 2026) — serif page titles, deeper cards, brass and
   ink with a little light in them, sticky table headers, and the VectorIT
   mark where the client (and the client's customers) will see it.
   ========================================================================== */

/* ---------- page titles in the ledger's serif ---------- */
.page-head{padding-bottom:16px;margin-bottom:22px}
.page-head h1{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-weight:700;font-size:1.72rem;letter-spacing:-.015em;line-height:1.15;
}
.page-head .sub{font-size:.88rem}

/* ---------- buttons with a little light ---------- */
.btn-brass{
  background-image:linear-gradient(180deg,#C8963A 0%,var(--brass) 55%,#96681A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(14,27,46,.18);
}
.btn-brass:hover{background-image:linear-gradient(180deg,#D2A044 0%,#B07F22 55%,#A0711C 100%)}
.btn-ink{
  background-image:linear-gradient(180deg,#1B2C46 0%,var(--ink) 60%,#070F1C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(14,27,46,.25);
}
.btn-ink:hover{background-image:linear-gradient(180deg,#24395A 0%,#15253C 60%,#0A1526 100%)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(168,118,31,.3)}

/* ---------- KPI cards ---------- */
.kpi{
  border-radius:14px;padding:18px 20px 16px;min-height:132px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi::after{
  content:"";position:absolute;right:-28px;top:-28px;width:120px;height:120px;border-radius:50%;
  background:var(--accent,var(--ink-3));opacity:.05;pointer-events:none;
}
.kpi-value{font-size:1.62rem}
.kpi-ico{width:34px;height:34px;flex-basis:34px;border-radius:9px;font-size:1.02rem}

/* ---------- cards and sheets ---------- */
.card.soft{border-radius:14px;box-shadow:var(--shadow-sm)}
.sheet{border-radius:14px}
.sheet-head{padding:30px 28px 20px}
.sheet-org{font-size:1.5rem}

/* ---------- lists: rows light up under the pointer ---------- */
@media screen{
  .table tbody tr:hover > td{background:#F3F6FB}
  tr.row-link{cursor:pointer}
}

/* ---------- header monogram ---------- */
.mb-brand .mono{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;flex:0 0 30px;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:13px;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.35);
}

/* ---------- the VectorIT mark ---------- */
.vit-badge{
  display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;
  font-weight:700;letter-spacing:-.01em;white-space:nowrap;
}
.vit-badge svg{width:18px;height:18px;flex:0 0 18px}
.vit-badge em{font-style:normal;color:#2E5BDB}
.vit-badge:hover{color:#2E5BDB}
.vit-badge-lg{font-size:1.15rem;gap:9px;color:var(--ink)}
.vit-badge-lg svg{width:26px;height:26px;flex-basis:26px}
.mb-foot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 24px}
.mb-foot .vit-badge{font-size:12.5px;color:var(--ink-3)}
.mb-foot .vit-badge svg{width:15px;height:15px;flex-basis:15px}
.login-dev-by{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.login-dev .vit-badge-lg{margin-bottom:6px}

/* ---------- sign-in: story on the left, form on the right ---------- */
body.login-split{
  margin:0;min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;
  background:var(--canvas);
}
.ls-story{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(210,160,68,.22), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(46,91,219,.28), transparent 60%),
    linear-gradient(160deg,#0B1628 0%,#122238 55%,#1B3050 100%);
}
.ls-story::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
}
.ls-story-in{position:relative;max-width:560px;margin:0 auto;padding:clamp(40px,7vh,84px) clamp(28px,5vw,64px)}
.ls-eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);font-weight:700;margin-bottom:18px}
.ls-title{
  font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:clamp(1.9rem,3.2vw,2.75rem);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 16px;
}
.ls-title em{font-style:italic;color:var(--brass-lt)}
.ls-lede{color:rgba(255,255,255,.72);font-size:.98rem;line-height:1.6;margin:0 0 30px;max-width:46ch}

/* the specimen invoice */
.ls-doc{
  background:#fff;color:var(--ink);border-radius:12px;padding:16px 18px 14px;
  box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-1.2deg);max-width:420px;
}
.ls-doc-top{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;letter-spacing:.14em;font-weight:700;color:var(--ink-3);padding-bottom:10px;border-bottom:2px solid var(--ink)}
.ls-fbr{color:var(--pos);letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px;text-transform:none}
.ls-doc-row{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;font-size:.78rem;padding:10px 0;color:var(--ink-3)}
.ls-doc-row b{font-weight:600;color:var(--muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.ls-doc-lines{border-top:1px solid var(--rule);padding-top:8px;font-size:.82rem}
.ls-doc-lines > div{display:flex;justify-content:space-between;gap:10px;padding:5px 0}
.ls-doc-lines i{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600}
.ls-doc-total{border-top:1px solid var(--ink);margin-top:4px;font-weight:700}
.ls-doc-total i{color:var(--brass)}
.ls-doc-qr{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule);font-size:.7rem;color:var(--muted)}
.ls-qr{
  width:34px;height:34px;flex:0 0 34px;border:2px solid var(--ink);border-radius:3px;
  background:
    linear-gradient(var(--ink),var(--ink)) 3px 3px/7px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 20px 3px/7px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 3px 20px/7px 7px no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px) 13px 13px/14px 2px no-repeat,
    repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 4px) 20px 15px/2px 12px no-repeat;
}
.ls-feats{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
.ls-feats li{display:flex;gap:12px;align-items:flex-start}
.ls-feats i{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--brass-lt);font-size:.95rem}
.ls-feats span{font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.45}
.ls-feats b{display:block;color:#fff;font-weight:600}

.ls-form{display:flex;align-items:center;justify-content:center;padding:28px}
body.login-split .login-card{max-width:420px;box-shadow:var(--shadow-md);border-top-width:4px}
body.login-split .login-brand{font-size:1.1rem;font-family:'Source Serif 4',Georgia,serif;letter-spacing:.04em}

@media(max-width:900px){
  body.login-split{grid-template-columns:1fr}
  .ls-story{display:none}
  .ls-form{min-height:100vh;background:linear-gradient(160deg,#0E1B2E 0%,#16283F 55%,#243A57 100%)}
}

/* ---------- printed documents carry the mark ---------- */
@media print{
  .print-credit{display:flex;align-items:center;justify-content:center;gap:6pt}
  .print-credit .vit-badge{font-size:7.5pt;color:#444;gap:4pt}
  .print-credit .vit-badge svg{width:10pt;height:10pt;flex-basis:10pt}
  .print-credit .vit-badge em{color:#2E5BDB}
}


/* ==========================================================================
   Gloss pass (7 Nov 2026) — light on every surface: a soft-lit canvas,
   raised cards with a top highlight, glass menus, sheen on brass and ink,
   zebra lists that glow under the pointer, and rings instead of hard focus.
   Screen only; print is untouched.
   ========================================================================== */
@media screen{

/* ---------- canvas: a soft light from the top-left ---------- */
body,body.mb-layout{
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(210,160,68,.10), transparent 55%),
    linear-gradient(180deg,#EEF1F7 0%,#E9EDF5 100%);
  background-attachment:fixed;
}

/* ---------- cards & sheets: raised paper with a lit edge ---------- */
.card.soft,.sheet,.kpi,.tile,.login-card{
  border-color:rgba(148,162,184,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(14,27,46,.06),
    0 8px 24px -8px rgba(14,27,46,.14);
}
.card.soft{transition:box-shadow .18s ease}
.card.soft:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(14,27,46,.07),0 16px 36px -10px rgba(14,27,46,.20)}
.card.soft .card-header{
  background:linear-gradient(180deg,#FBFCFE 0%,#F3F6FB 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.8);
}
.card.soft .card-header::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));margin-right:9px;vertical-align:1px;
  box-shadow:0 0 0 3px rgba(168,118,31,.14)}

/* ---------- KPI: a sheen across the top, the figure in deep ink ---------- */
.kpi{overflow:hidden}
.kpi::before{height:3px;background:linear-gradient(90deg,var(--accent,var(--brass)),rgba(255,255,255,0))}
.kpi .kpi-value{
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kpi-ico{
  background:linear-gradient(180deg,#FFFFFF,#EEF2F8);border:1px solid var(--rule);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(14,27,46,.08);
  transition:background .16s ease,color .16s ease;
}
.kpi:hover .kpi-ico{background:linear-gradient(180deg,var(--brass-lt),var(--brass));color:#fff;border-color:#8A5F14}

/* ---------- quick tiles glow brass ---------- */
.tile{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--brass-lt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px -8px rgba(168,118,31,.35)}

/* ---------- buttons: brighter sheen, lift on hover ---------- */
.btn{transition:transform .12s ease,box-shadow .16s ease,filter .16s ease,background-color .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-brass{
  background-image:linear-gradient(180deg,#E0B35A 0%,#C8963A 30%,var(--brass) 65%,#96681A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 2px 6px rgba(168,118,31,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.btn-brass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(168,118,31,.45)}
.btn-ink{
  background-image:linear-gradient(180deg,#2A4166 0%,#1B2C46 35%,var(--ink) 70%,#070F1C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(14,27,46,.35);
}
.btn-ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px rgba(14,27,46,.4)}
.btn-outline-secondary,.btn-outline-primary,.btn-outline-dark,.btn-light{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F4F6FA 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(14,27,46,.08);
}
.btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-dark:hover,.btn-light:hover{
  border-color:var(--brass);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(14,27,46,.14)}
.btn-success,.btn-primary,.btn-danger,.btn-warning,.btn-info,.btn-secondary,.btn-dark{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(14,27,46,.22)}

/* ---------- filter chips ---------- */
.fy-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 3px rgba(14,27,46,.25);transition:transform .12s ease,box-shadow .16s ease}
.fy-chip:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px rgba(14,27,46,.3)}

/* ---------- lists: zebra, glow on hover, lit header ---------- */
.table thead th{
  background:linear-gradient(180deg,#FBFCFE 0%,#F1F4F9 100%);
  box-shadow:inset 0 1px 0 #fff;
}
.table tbody tr:nth-child(even) > td{background:rgba(247,249,252,.7)}
.table tbody tr:hover > td{background:#EEF3FB}
.table tbody tr:hover > td:first-child{box-shadow:inset 3px 0 0 var(--brass-lt)}
.table tbody td{transition:background .12s ease}
.card.soft .table{margin-bottom:0}

/* ---------- pills with a little light ---------- */
.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(14,27,46,.06)}

/* ---------- forms: lit fields, brass ring on focus ---------- */
.form-control,.form-select{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%);
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.form-control:hover:not(:focus),.form-select:hover:not(:focus){border-color:var(--ink-3)}
.form-control:focus,.form-select:focus{
  background-color:#fff;border-color:var(--brass);
  box-shadow:0 0 0 4px rgba(168,118,31,.16),0 2px 8px rgba(168,118,31,.12),inset 0 1px 2px rgba(14,27,46,.04);
}
.form-control[readonly]{background:var(--paper-2);box-shadow:none}
.form-check-input:checked{background-color:var(--brass);border-color:#8A5F14}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(168,118,31,.2);border-color:var(--brass)}

/* ---------- alerts: accent bar on the left ---------- */
.alert{border-left-width:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-sm)}

/* ---------- page head: a brass tick under the title ---------- */
.page-head{position:relative}
.page-head::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brass-lt),var(--brass))}

/* ---------- section titles ---------- */
.section-title::after{background:linear-gradient(90deg,var(--rule),rgba(215,221,231,0))}

/* ---------- dropdown menus & modals ---------- */
.dropdown-menu{border-radius:12px;border:1px solid var(--rule);box-shadow:var(--shadow-md);padding:6px}
.dropdown-item{border-radius:7px;font-size:.9rem}
.dropdown-item:hover,.dropdown-item:focus{background:#EEF2FA;color:var(--ink)}
.modal-content{border-radius:16px;border:1px solid rgba(148,162,184,.45);box-shadow:0 30px 80px rgba(14,27,46,.35)}
.modal-header{background:linear-gradient(180deg,#FBFCFE,#F3F6FB);border-bottom-color:var(--rule)}
.modal-backdrop.show{opacity:.45}

/* ---------- login card sheen ---------- */
.login-card{
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFBFD 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 70px rgba(0,0,0,.4);
}

/* ---------- scrollbars match the ledger ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(99,114,140,.45) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,114,140,.40);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(99,114,140,.65);border:2px solid transparent;background-clip:padding-box}

/* ---------- text selection ---------- */
::selection{background:rgba(210,160,68,.35);color:var(--ink)}

/* ---------- page settles in ---------- */
@keyframes gloss-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.content,.mb-content{animation:gloss-in .22s ease-out both}

}

@media(prefers-reduced-motion:reduce){
  .content,.mb-content{animation:none}
  .btn,.tile,.kpi,.card.soft,.fy-chip{transition:none}
}

/* ==========================================================================
   M. EJAZ logo and name style (9 Nov 2026) — from the customer's sign:
   blue/black "mei" emblem with the red drop, name in a wide blue display face.
   ========================================================================== */
.brand-name{display:inline-flex;flex-direction:column;align-items:center;line-height:1;
  font-family:Audiowide,'Segoe UI',sans-serif;font-weight:400;color:#2E95D3;letter-spacing:.02em;
  -webkit-text-stroke:.04em currentColor;paint-order:stroke fill}
.brand-name .bn1{white-space:nowrap}
.brand-name .bn2{font-size:.68em;margin-top:.22em;white-space:nowrap}

/* header */
.mb-brand .mono-logo{width:auto;flex:0 0 auto;height:40px;padding:3px 7px;background:#fff;border-radius:9px;
  box-shadow:inset 0 1px 0 #fff,0 1px 4px rgba(0,0,0,.35)}
.mb-brand .mono-logo img{height:34px;width:auto;display:block}
.mb-brand .brand-name{font-size:17px;color:#5DB8F0;-webkit-text-stroke:.03em currentColor;align-items:flex-start}
.mb-brand .brand-name .bn2{font-size:10.5px;margin-top:3px;letter-spacing:.06em}
.mb-brand .brand-name span{overflow:visible}

/* sign-in */
.login-logo{margin:0 auto 14px}
.login-logo img{width:190px;height:auto;display:block;margin:0 auto}
.login-card h1 .brand-name{font-size:1.45rem}

/* company picker */
.co-mono.co-logo{background:#fff !important;border:1px solid var(--rule);padding:4px;flex-basis:70px !important;width:70px}
.co-mono.co-logo img{width:100%;height:auto;display:block}

/* report and print headings */
.sheet-org-brand{display:flex;align-items:center;justify-content:center;gap:16px}
.sheet-org-brand .sheet-logo{height:62px;width:auto;flex:0 0 auto}
.sheet-org-brand .brand-name{font-size:1.55rem}
.vp-brand{display:inline-flex;align-items:center;gap:10px}
.vp-brand .sheet-logo{height:40px;width:auto}
.vp-brand .brand-name{font-size:1.05rem}
@media print{
  .sheet-logo,.brand-name,.mb-brand .mono-logo{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet-org-brand{gap:10pt}
  .sheet-org-brand .sheet-logo{height:15mm}
  .sheet-org-brand .brand-name{font-size:17pt}
  .vp-brand .sheet-logo{height:10mm}
  .vp-brand .brand-name{font-size:12pt}
}
@media(max-width:700px){
  .mb-brand .brand-name{font-size:13px}
  .mb-brand .brand-name .bn2{display:none}
  .sheet-org-brand{flex-direction:column;gap:8px}
}