/* ============================================================================
   juribooks-premium-ui.css
   Premium presentation layer for the JuriBooks legal-practice accounting app.

   PRESENTATION ONLY. No JavaScript is touched by this file. It is loaded AFTER
   every existing application stylesheet (the inline <style> and the three
   lib/juribooks-*-v2.css skins), so equal-specificity rules here win the
   cascade without needing !important except where an inline style must be
   answered.

   It layers on top of the app's existing OKLCH token system rather than
   replacing it: the accounting semantics (--debit / --credit / --balanced /
   --flag) and the surface/line/ink scale are left exactly as the engine sets
   them. What is added is a brand-accurate chrome palette derived from the
   JuriBooks icon, an orange action accent the app previously lacked, and a
   tighter, more authoritative rhythm for a professional-services finance tool.

   Contents
     1.  Brand tokens (light / dark / clean)
     2.  Application canvas & typographic rhythm
     3.  Product navigation rail  (+ static product mark)
     4.  Top command bar
     5.  Dashboard  (hero, KPIs, health, trust prominence)
     6.  Cards & elevation
     7.  Financial tables
     8.  Journal & payment-voucher worksheet
     9.  Billing, fee notes & status pills
     10. Client-trust controls
     11. Reports
     12. Forms & inputs
     13. Modals & drill-downs
     14. Buttons
     15. Browser surfaces (selection, scrollbars, focus)
     16. Responsive
     17. Motion & print
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. BRAND TOKENS                                                     *
 * Derived from icon-192.png: navy field, orange book page, green ₦.  *
 * ------------------------------------------------------------------ */
:root{
  --jb-navy:#233F6B;
  --jb-navy-deep:#173255;
  --jb-navy-line:#2f4f7f;
  --jb-orange:#F47B2A;
  --jb-orange-strong:#E86A15;
  --jb-orange-soft:#FCEBDD;
  --jb-green:#16815B;
  --jb-green-soft:#E4F1EB;
  --jb-paleblue:#EAF0F8;
  --jb-canvas:#F4F6FA;

  /* Semantic aliases the premium layer uses. */
  --jb-accent:var(--jb-orange);          /* active location / primary action */
  --jb-accent-ink:#ffffff;
  --jb-trust:var(--jb-green);            /* client-money control accent      */
  --jb-focus:var(--jb-orange);          /* keyboard focus ring               */

  /* The app already exposes a global --accent (a near-orange) that the nav-v2
     layer uses for the active-location bar and that other controls read.
     Pin it to the exact brand orange so every accent in the product agrees. */
  --accent:var(--jb-orange);

  /* Elevation, unified: one border OR one shadow, never a ghost pair. */
  --jb-card-radius:14px;
  --jb-shadow-1:0 1px 2px rgba(23,50,85,.06), 0 1px 1px rgba(23,50,85,.04);
  --jb-shadow-2:0 4px 14px rgba(23,50,85,.10), 0 1px 3px rgba(23,50,85,.06);
  --jb-shadow-pop:0 18px 48px rgba(15,28,50,.22), 0 2px 8px rgba(15,28,50,.12);
}

[data-theme="dark"]{
  --jb-navy:#1b3357;
  --jb-navy-deep:#12233d;
  --jb-navy-line:#2a4160;
  --jb-orange:#F98E45;
  --jb-orange-strong:#F47B2A;
  --jb-orange-soft:#3a2a1c;
  --jb-green:#3FB489;
  --jb-green-soft:#16281f;
  --jb-paleblue:#22334d;
  --jb-canvas:#0f1a2b;
  --jb-shadow-1:0 1px 2px rgba(0,0,0,.34);
  --jb-shadow-2:0 6px 18px rgba(0,0,0,.42);
  --jb-shadow-pop:0 22px 52px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------------ *
 * 2. CANVAS & TYPOGRAPHIC RHYTHM                                      *
 * ------------------------------------------------------------------ */
body{ background:var(--jb-canvas); }
[data-theme="dark"] body{ background:var(--jb-canvas); }

/* Give the working area a calm, even reading gutter without losing density. */
.main{ background:var(--jb-canvas); }
[data-theme="dark"] .main{ background:var(--jb-canvas); }

/* Serif statement headings read as accounts, not as a SaaS landing page. */
.stmt-title{ letter-spacing:-.012em; }
.stmt-entity{ letter-spacing:.02em; }

/* Eyebrows: quiet, tracked, never shouting. */
.eyebrow{ letter-spacing:.10em; }

/* ------------------------------------------------------------------ *
 * 3. PRODUCT NAVIGATION RAIL                                          *
 * ------------------------------------------------------------------ */

/* Deepen the navy into a controlled vertical authority gradient. */
.rail{
  background:linear-gradient(190deg, var(--jb-navy) 0%, var(--jb-navy-deep) 92%);
  box-shadow:1px 0 0 rgba(0,0,0,.28), inset -1px 0 0 rgba(255,255,255,.02);
}

/* Static JuriBooks product mark (added markup, see index.html). */
.jb-brandmark{
  display:flex; align-items:center; gap:11px;
  margin:2px 14px 12px; padding:2px 2px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-decoration:none; color:#fff; min-width:0;
}
.jb-brandmark-icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.jb-brandmark-txt{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.jb-brandmark-txt b{
  font-family:var(--fserif, Georgia, serif);
  font-size:1.16rem; font-weight:700; letter-spacing:-.01em; color:#fff;
}
.jb-brandmark-txt span{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--jb-orange); font-weight:600; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail.mini .jb-brandmark{ justify-content:center; margin:2px 8px 10px; padding-bottom:10px; }
.rail.mini .jb-brandmark-txt{ display:none; }
.rail.mini .jb-brandmark-icon{ width:36px; height:36px; }

/* Firm watermark: demote to a small secondary chip so the product mark leads. */
.rail .brand{ margin-top:2px; opacity:.92; }
.rail .brand .wm{
  font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.62); font-weight:600;
}

/* The nav-v2 layer owns the destination buttons (.jb2-item) and their active
   bar, styling them with runtime-injected !important rules and reading the
   global --accent for the active indicator. Rather than fight that with
   heavier !important of my own, I pinned --accent to the brand orange above,
   which recolours the active-location bar to brand automatically. The rail
   only needs its frame, brand and focus treatment here. */

/* Collapse control + theme toggle. */
.rail .navtoggle{ color:rgba(255,255,255,.72); border-radius:8px; }
.rail .navtoggle:hover{ color:#fff; background:rgba(255,255,255,.08); }
.rail-foot button{ color:rgba(255,255,255,.72); }
.rail-foot button:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* Keyboard focus inside the navy rail must be visible on navy. */
.rail button:focus-visible,
.rail [tabindex]:focus-visible{
  outline:2px solid var(--jb-orange);
  outline-offset:2px; border-radius:8px;
}

/* --- Clean UI variant: rail is white; orange accent still reads. --- */
body[data-ui="clean"] .rail{
  background:#fff;
}
body[data-ui="clean"] .jb-brandmark{ border-bottom-color:var(--line); color:var(--ink); }
body[data-ui="clean"] .jb-brandmark-txt b{ color:var(--jb-navy); }
body[data-ui="clean"] .jb-brandmark-txt span{ color:var(--jb-orange-strong); }
[data-theme="dark"] body[data-ui="clean"] .rail{ background:var(--surface); }
[data-theme="dark"] body[data-ui="clean"] .jb-brandmark-txt b{ color:#fff; }

/* ------------------------------------------------------------------ *
 * 4. TOP COMMAND BAR                                                  *
 * ------------------------------------------------------------------ */
.topbar{
  background:color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar h1{ letter-spacing:-.012em; }
.topbar .sub{ color:var(--mute); }

/* Primary actions read; secondary chrome (PDF, Print options, zoom) recedes. */
.tb-actions{ gap:7px; align-items:center; }
.tb-actions .btn{ font-weight:600; }
.tb-actions .btn svg{ opacity:.82; }
.tb-actions #pdfBtn,
.tb-actions #zoomCtl,
.tb-actions .btn-icon{
  color:var(--mute); background:transparent; border-color:transparent;
}
.tb-actions #pdfBtn:hover,
.tb-actions #zoomCtl:hover,
.tb-actions .btn-icon:hover{
  color:var(--ink); background:var(--surface-2); border-color:var(--line-2);
}

/* Status chips: storage & references legible, monospaced values. */
.tb-stats .stat-chip{
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface); box-shadow:var(--jb-shadow-1);
}
.tb-stats .stat-chip .v{ font-family:var(--fmono); font-variant-numeric:tabular-nums; }
.tb-stats .stat-chip .l{ color:var(--mute); letter-spacing:.04em; }
.stat-chip.save-bad, .stat-chip.save-bad .v{ color:var(--flag); }
.stat-chip.save-ok .v{ color:var(--balanced); }

/* ------------------------------------------------------------------ *
 * 5. DASHBOARD                                                        *
 * ------------------------------------------------------------------ */

/* Hero header: keep the navy authority panel, refine its surface. */
.home-head{
  background:linear-gradient(160deg, var(--jb-navy) 0%, var(--jb-navy-deep) 100%);
  border-radius:16px;
  box-shadow:var(--jb-shadow-2);
}
.home-head .stmt-entity{ color:rgba(255,255,255,.72); }
.home-head .stmt-title{ color:#fff; }
.home-head .stmt-sub, .home-head .sub{ color:rgba(255,255,255,.68); }
.home-gauge .hg-l{ color:rgba(255,255,255,.66); }

/* KPI cards: dense, precise, amounts that never clip. Tame the "hero number"
   so figures read as a controlled row of instruments, not a billboard. */
.kpi-grid{ gap:14px; }
.dkpi{
  border:1px solid var(--line); border-radius:var(--jb-card-radius);
  box-shadow:var(--jb-shadow-1); padding:16px 18px 15px;
}
.dkpi:hover{ box-shadow:var(--jb-shadow-2); border-color:var(--line-2); }
.dkpi .l{ letter-spacing:.085em; color:var(--mute); font-weight:700; margin-bottom:9px; }
.dkpi .v{
  /* Sized so a full ₦-hundred-million amount stays on ONE line inside the
     tile — long Naira figures must never wrap mid-number or clip. */
  font-size:calc(var(--fbody) * 1.32 * var(--mult-heading,1));
  letter-spacing:-.015em; line-height:1.08;
  white-space:nowrap;               /* the number never breaks */
}
.dkpi .v > *{ white-space:normal; } /* but the change-chip may still wrap below */
.dkpi .s{ color:var(--mute); margin-top:7px; }

/* The dashboard-skin promotes the leading tile (cash) to a full-width headline
   at up to 6x body — deliberate, but too loud for a dense finance tool and at
   odds with the brief's "avoid giant dashboard numbers". Moderate it into a
   controlled headline: still clearly the page's lead figure, still full-width
   so the grid never holes, but calmer and unmistakably professional. The
   engine's font-size control still moves it because it stays bound to --fbody. */
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child .v{
  font-size:clamp(calc(var(--fbody) * 2.3), 4.4vw, calc(var(--fbody) * 3.4)) !important;
  letter-spacing:-.028em !important;
}
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child{
  padding:22px 26px 20px !important;
}

/* Home shortcut/action cards. */
.home-card{ border-radius:var(--jb-card-radius); }

/* ------------------------------------------------------------------ *
 * 6. CARDS & ELEVATION                                                *
 * One elevation system: a hairline border with a soft, offset shadow. *
 * ------------------------------------------------------------------ */
.card{
  border:1px solid var(--line);
  border-radius:var(--jb-card-radius);
  box-shadow:var(--jb-shadow-1);
}
.card:where(.beam-card, .entry-card){ box-shadow:var(--jb-shadow-1); }

/* ------------------------------------------------------------------ *
 * 7. FINANCIAL TABLES                                                 *
 * Preserve density; make money columns unambiguous.                  *
 * ------------------------------------------------------------------ */
.tb-tbl, .stmt, .recent-tbl, .coa-tbl, table{ border-collapse:collapse; }

/* Column headers: quiet, tracked, ledger-like. */
.tb-tbl thead th, .stmt thead th, .recent-tbl thead th, .coa-tbl thead th{
  color:var(--mute); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; font-size:var(--f-xs);
  border-bottom:1px solid var(--line-2);
  background:var(--surface-2);
}

/* Sticky heads keep their weight while scrolling long registers. */
.tb-tbl thead th{ position:sticky; top:0; z-index:2; }

/* Money is monospaced, tabular, right-aligned and never wraps. */
.tb-tbl td.r, .stmt td.r, .recent-tbl td.r, .num, .money, td.num,
.stmt .r, .tb-tbl .r{
  font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap;
}

/* Row rhythm: calm separators, a clear hover, a defined selection. */
.tb-tbl tbody tr, .coa-tbl tbody tr{ transition:background .12s; }
.tb-tbl tbody tr:hover, .coa-tbl tbody tr:hover{ background:var(--jb-paleblue); }
[data-theme="dark"] .tb-tbl tbody tr:hover,
[data-theme="dark"] .coa-tbl tbody tr:hover{ background:var(--surface-2); }
.tb-tbl tbody tr.sel, .tb-tbl tbody tr[aria-selected="true"]{
  background:var(--jb-orange-soft);
  box-shadow:inset 2px 0 0 var(--jb-orange);
}

/* Totals / subtotals stand apart without shouting. */
.tb-tbl tr.total td, .stmt tr.total td, .tb-tbl tr.grand td, .stmt tr.grand td,
.tb-tbl tfoot td, .stmt tfoot td{
  border-top:1.5px solid var(--line-strong);
  font-weight:700; color:var(--ink);
}
.tb-tbl tr.grand td, .stmt tr.grand td{
  border-top:2px solid var(--jb-navy);
  border-bottom:3px double var(--jb-navy);
}

/* ------------------------------------------------------------------ *
 * 8. JOURNAL & PAYMENT-VOUCHER WORKSHEET                              *
 * ------------------------------------------------------------------ */
.eyebrow{ color:var(--mute); }

/* Debit / credit legibility follows the engine's own semantic tokens. */
.tb-tbl td.dr, .dr .num, .amt-dr{ color:var(--debit); }
.tb-tbl td.cr, .cr .num, .amt-cr{ color:var(--credit); }

/* Balanced vs out-of-balance: impossible to overlook. */
.balanced, .is-balanced, .totals .ok{
  color:var(--balanced); font-weight:700;
}
.unbalanced, .is-unbalanced, .totals .bad{
  color:var(--credit); font-weight:800;
}
.unbalanced::before, .is-unbalanced::before{ content:"● "; }

/* GL account selection cue on the entry worksheet. */
.line-builder .inp:focus, .entry-card .inp:focus{
  border-color:var(--jb-navy);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--jb-navy) 22%, transparent);
}

/* ------------------------------------------------------------------ *
 * 9. BILLING, FEE NOTES & STATUS PILLS                                *
 * A single legible status vocabulary. Colour is always paired with a  *
 * word, never carrying meaning alone.                                 *
 * ------------------------------------------------------------------ */
.pill, .tag, .badge{
  font-weight:700; letter-spacing:.02em;
  border-radius:999px; padding:2px 10px;
  font-size:var(--f-xs); text-transform:capitalize;
  border:1px solid transparent; white-space:nowrap;
}
.pill.plain{ background:var(--surface-2); color:var(--ink-soft); border-color:var(--line-2); }

/* State names used across billing / fee-note registers. */
.badge.draft, .pill.draft   { background:var(--surface-3); color:var(--mute); border-color:var(--line-2); }
.badge.posted, .pill.posted { background:var(--bg-debit); color:var(--debit); }
.badge.part, .pill.part,
.badge.partpaid, .pill.partpaid{ background:var(--jb-orange-soft); color:var(--jb-orange-strong); }
.badge.paid, .pill.paid     { background:var(--jb-green-soft); color:var(--jb-green); }
.badge.overdue, .pill.overdue{ background:var(--bg-flag); color:var(--flag); }
.badge.void, .pill.void     { background:var(--surface-2); color:var(--mute); text-decoration:line-through; }
.badge.active, .pill.active { background:var(--jb-green-soft); color:var(--jb-green); }
.badge.trialing, .pill.trialing{ background:var(--bg-flag); color:var(--flag); }
.badge.expired, .pill.expired,
.badge.past_due, .pill.past_due{ background:var(--bg-credit); color:var(--credit); }

/* ------------------------------------------------------------------ *
 * 10. CLIENT-TRUST CONTROLS                                           *
 * Client money is visibly ring-fenced from firm money.               *
 * ------------------------------------------------------------------ */
#view-trust .card{
  border-top:3px solid var(--jb-green);
}
#view-trust .eyebrow{ color:var(--jb-green); }

/* Reconciliation status cues. */
#view-trust .reconciled, #view-trust .is-reconciled,
.trust-ok{ color:var(--jb-green); font-weight:700; }
#view-trust .deficit, .trust-deficit, .trust-bad{
  color:var(--credit); font-weight:800;
}
.trust-deficit::before, #view-trust .deficit::before{ content:"⚠ "; }

/* A quiet trust badge for balances shown outside the trust view. */
.trust-chip{
  background:var(--jb-green-soft); color:var(--jb-green);
  border:1px solid color-mix(in oklch, var(--jb-green) 30%, transparent);
  border-radius:8px; padding:1px 8px; font-weight:700; font-size:var(--f-xs);
}

/* ------------------------------------------------------------------ *
 * 11. REPORTS                                                         *
 * Signed-accounts formality: entity, title, basis, rule, body.       *
 * ------------------------------------------------------------------ */
.stmt-entity{ font-weight:700; color:var(--ink); }
.stmt-title{ color:var(--ink); }
.stmt-sub{ color:var(--mute); }
.stmt-title + .stmt-sub{ padding-bottom:10px; border-bottom:1px solid var(--line-2); }

/* Comparative / common-size columns hold their alignment. */
.stmt td, .stmt th{ font-variant-numeric:tabular-nums; }
.stmt thead th:not(:first-child){ text-align:right; }

/* ------------------------------------------------------------------ *
 * 12. FORMS & INPUTS                                                  *
 * ------------------------------------------------------------------ */
.inp, input[type="text"], input[type="date"], input[type="number"],
input[type="email"], input[type="password"], select, textarea{
  border:1px solid var(--line-2); border-radius:9px;
  transition:border-color .14s, box-shadow .14s;
}
.inp:hover, select:hover, textarea:hover{ border-color:var(--line-strong); }
.inp:focus, input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--jb-navy);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--jb-navy) 20%, transparent);
}
.inp.mono, input.mono{ font-family:var(--fmono); font-variant-numeric:tabular-nums; }

/* Labels stay visible and quiet. */
.fld, label.fld{ color:var(--mute); font-weight:600; letter-spacing:.02em; }

/* Read-only and disabled remain understandable, not invisible. */
.inp[readonly], input[readonly]{
  background:var(--surface-2); color:var(--ink-soft); cursor:default;
}
.inp:disabled, input:disabled, select:disabled, textarea:disabled{
  background:var(--surface-2); color:var(--mute); opacity:1; cursor:not-allowed;
}

/* Validation / warning field states. */
.inp.invalid, input.invalid, .inp[aria-invalid="true"]{
  border-color:var(--credit);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--credit) 18%, transparent);
}

/* ------------------------------------------------------------------ *
 * 13. MODALS & DRILL-DOWNS                                            *
 * ------------------------------------------------------------------ */
.modal{
  border-radius:16px; box-shadow:var(--jb-shadow-pop);
  border:1px solid var(--line);
}
.modal-head{
  border-bottom:1px solid var(--line);
  background:var(--surface); border-radius:16px 16px 0 0;
}
.modal-foot{
  border-top:1px solid var(--line);
  background:var(--surface-2); border-radius:0 0 16px 16px;
}
.modal-body{ background:var(--surface); }

/* ------------------------------------------------------------------ *
 * 14. BUTTONS                                                         *
 * The app deliberately reserves navy for the primary action — its     *
 * authority colour — and the brief agrees ("navy for authority and    *
 * primary navigation, orange for active/action accents"). So primary  *
 * stays navy; orange is spent on the active location and the focus    *
 * ring, not on flooding every call-to-action.                         *
 * ------------------------------------------------------------------ */
.btn{
  border-radius:9px; font-weight:600;
  transition:background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.btn:focus-visible{
  outline:2px solid var(--jb-focus); outline-offset:2px;
}
.btn.primary:active{ transform:translateY(.5px); }

/* ------------------------------------------------------------------ *
 * 15. BROWSER SURFACES                                                *
 * The parts the design system doesn't draw still carry the brand.    *
 * ------------------------------------------------------------------ */
::selection{ background:color-mix(in oklch, var(--jb-orange) 30%, transparent); color:var(--ink); }
.rail ::selection{ background:rgba(244,123,42,.45); color:#fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--jb-focus); outline-offset:2px;
}

/* Themed scrollbars — the cheapest "built, not assembled" signal. */
*{ scrollbar-color:var(--line-strong) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:8px;
  border:3px solid var(--surface); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--mute-2); }
::-webkit-scrollbar-track{ background:transparent; }
.rail{ scrollbar-color:rgba(255,255,255,.30) transparent; }
.rail ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); border-color:transparent; }

/* Caret picks up the brand navy. */
.inp, input, textarea, select{ caret-color:var(--jb-navy); }

/* ------------------------------------------------------------------ *
 * 16. RESPONSIVE                                                      *
 * Tested at 360 / 390 / 768 / 1024 / 1440 / 1920. No page overflow;  *
 * financial tables scroll inside their own wrappers.                 *
 * ------------------------------------------------------------------ */
html, body{ max-width:100%; overflow-x:hidden; }

/* Any table wrapper scrolls internally rather than pushing the page. */
.tbl-wrap, .table-wrap, .tb-scroll, .stmt-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%;
}

@media (max-width:768px){
  .home-head{ border-radius:14px; }
  .kpi-grid{ gap:10px; }
  .dkpi .v{ font-size:calc(var(--fbody) * 1.5 * var(--mult-heading,1)); }
  #view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child .v{
    font-size:calc(var(--fbody) * 1.62 * var(--mult-heading,1));
  }
  /* On mobile the product mark collapses to the icon in the horizontal rail. */
  .rail .jb-brandmark-txt{ display:none; }
  .rail .jb-brandmark{ margin:0 6px 0 2px; padding:0; border:none; }
}

@media (max-width:390px){
  .tb-actions .btn span{ display:none; }   /* icon-only actions when tight */
  .tb-actions #expBtn span, .tb-actions #prtBtn span{ display:inline; }
}

/* ------------------------------------------------------------------ *
 * 17. MOTION & PRINT                                                  *
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

@media print{
  .rail, .topbar .tb-actions, .rail-foot{ display:none !important; }
  .home-head{ background:none !important; color:#000 !important; box-shadow:none; }
  .home-head .stmt-title, .home-head .stmt-entity, .home-head .stmt-sub{ color:#000 !important; }
  .card, .dkpi, .modal{ box-shadow:none !important; border-color:#ccc !important; }
  .stmt tr.grand td{ border-color:#000 !important; }
}