/* =============================================================================
   Mutlaq Accounting System — full-page application shell.

   Ported from the "Phenix Accounting" design: an accent header, a menu bar, an
   icon toolbar, a document tab strip and a light card/table canvas. The design
   used per-element inline styles; here it is a token set plus components, so a
   theme change is one variable and not a find-and-replace.

   This sheet is deliberately self-contained under .accapp / .acc-fullscreen.
   The CRM boards keep their own look — nothing here leaks into styles.css's
   world, and nothing there restyles this.

   Loaded last in the cascade.
   ============================================================================= */

:root{
  /* Brand red. Two shades on purpose:
       --acc-accent      #ed1b24  the brand itself — large fills (header bar,
                                  menu bar, active-tab indicator, dots, chips)
       --acc-accent-deep #c2151c  anywhere SMALL TEXT meets the colour, either
                                  as the text (links, hovers) or behind it
                                  (primary buttons)
     White on #ed1b24 measures 4.4:1 — fine for the bold 15px brand lockup and
     for decoration, but under the 4.5:1 floor for 13px labels. The deep shade
     measures 6.1:1 both as text on white and as a background under white, so
     every small-text pairing clears AA without losing the red. */
  --acc-accent:#ed1b24;
  --acc-accent-deep:#c2151c;
  --acc-accent-ink:#fff;

  /* Surfaces, as four separated layers rather than four shades of one grey.

     The design's fault was not that the canvas was grey — it is that everything
     on it sat at almost the same value. Canvas #eef1f6, card #fff, header
     #f4f6fa, banding #f2f6fc: four steps inside 7% of each other, so nothing had
     an edge and the whole screen read as one grey field.

     So the canvas keeps its grey and goes a shade deeper, which is what buys the
     white panels their contrast; the panels stay pure white; and each layer sits
     a clear step from the one behind it — trough, canvas, card, row. */
  --acc-canvas:#e8ecf3;       /* the page — the design's grey, one step deeper */
  --acc-surface:#fff;         /* cards, menus, toolbar, the active tab */
  --acc-surface-2:#fff;       /* insets inside a white card: inputs, footers */
  --acc-head:#eff3f9;         /* table header — a definite band, not a whisper */
  --acc-chrome:#d8dfea;       /* tab-strip trough: darker than the page, so the
                                 open tab reads as a white card lifted out of it */
  --acc-hover:#e6ecf5;        /* pointer fill on chrome: menu items, tools */

  /* Hairlines, firm enough to be seen. A 4%-contrast border is decoration; these
     are what actually cut one element off from the next, so --acc-line draws
     every card and grid edge and --acc-line-firm closes a header or a total. */
  --acc-line:#d9e0ea;
  --acc-line-soft:#e7ecf3;
  --acc-line-firm:#b9c4d4;
  --acc-scroll:#b9c4d4;
  /* The window taskbar is the one dark surface in the application — light-on-
     dark by design, so it reads as system chrome under the light ledger. */
  --acc-taskbar:#1e2a44;

  /* Ink, neutral rather than navy — the design's #1a2540 tinted every label blue
     and was most of the dusty cast.

     But neutral is not the same as light, and the first pass at this ramp made
     three of the four steps FAINTER than the design's, which is the wrong trade
     in a ledger: the lightest step is not decoration here, it is the account
     code in the tree and the number on the row. So every step is measured on the
     three grounds it actually lands on — white, the banded row, the header band
     — and the whole ramp clears 4.5:1 on all of them, the bottom step included.

                white   band   header
       ink      17.8    16.1   15.9    headings, KPI figures, totals
       ink-2    13.3    12.1   12.0    table body — the text you read most
       ink-soft  7.0     6.3    6.3    column headers, labels, captions
       ink-mute  5.6     5.1    5.1    account codes, row numbers, hints      */
  --acc-ink:#101828;
  --acc-ink-2:#233043;
  --acc-ink-soft:#4c5a70;
  --acc-ink-mute:#5d6879;

  /* Grid banding. Phenix stripes every other ledger row and closes the grid
     with a coloured total line; both are load-bearing on a twelve-column
     statement, where losing your place costs a re-read. The stripe has to be
     readable against WHITE, not against the canvas — so it is a real step, and
     the hover a clearly stronger one, or a wide row loses you halfway across. */
  --acc-band:#eff4fa;
  --acc-band-hi:#e2ebf7;
  --acc-total:#e8f6f2;

  /* Category colours — KPI chips, pills, the account-type boxes. Each is used as
     full-strength ink on a 12%-alpha wash of ITSELF (accKpi/accPill append "1f"
     to the hex), so every one has to clear 4.5:1 as text on white. The design's
     set did not — its teal, amber and green measured 3.89, 3.48 and 3.51, which
     is why those chips read as smudges. Measured here, in order below:
     5.17 · 5.47 · 5.43 · 5.69 · 6.57 · 7.69 · 6.62.
     KEEP IN STEP with the same literals in accounting.js / acc-app.js /
     acc-drill.js — the JS concatenates the hex to build its wash, so it cannot
     read a variable. */
  --acc-blue:#2563eb;
  --acc-teal:#0f766e;
  --acc-amber:#b54708;
  --acc-green:#067647;
  --acc-red:#b42318;
  --acc-slate:#475467;
  --acc-violet:#6941c6;       /* the five account-type boxes need a fifth hue
                                 that is not another brown (was --acc-maroon) */
  --acc-red-soft:#fef3f2;     /* destructive hover wash */
  --acc-red-line:#fecdca;     /* destructive button border */

  --acc-r:10px;
  --acc-r-lg:14px;
  /* A card on a grey page is separated by three things at once: its own white
     fill, a border firm enough to see, and a shadow that puts it in front rather
     than merely tinting the ground under it. The design had the first, a hairline
     too faint for the second, and .04 of the third. */
  --acc-shadow:0 1px 2px rgba(23,38,66,.06), 0 4px 12px rgba(23,38,66,.08);
  --acc-shadow-pop:0 16px 36px rgba(23,38,66,.20);
  --acc-pad-y:12px;

  /* Type scale. Every font-size in this sheet is calc(<design px> * --acc-fs),
     so the whole application resizes proportionally from this one number and
     the design's typographic ratios survive. 1 = the ported design exactly. */
  --acc-fs:1.12;
}
/* Compact density — the design's second layout mode. */
.accapp.is-compact{--acc-pad-y:8px}

/* While the ledger owns the screen, the CRM shell underneath is hidden outright
   rather than merely covered: a hidden sidebar must not be tabbable. */
body.acc-fullscreen #app{display:none !important}
body.acc-fullscreen{overflow:hidden}

.accapp{
  position:fixed;inset:0;z-index:400;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--acc-canvas);
  color:var(--acc-ink);
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans','Figtree','Noto Kufi Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:calc(14px * var(--acc-fs));line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.accapp.hidden{display:none}
.accapp button{font:inherit;color:inherit}
.accapp ::-webkit-scrollbar{width:10px;height:10px}
.accapp ::-webkit-scrollbar-thumb{background:var(--acc-scroll);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.accapp ::-webkit-scrollbar-track{background:transparent}

/* ── header ─────────────────────────────────────────────────────────────── */
/* min-height, not height: the bar grows with the type scale instead of
   clipping the brand lockup when --acc-fs is raised. */
.accapp__head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
  min-height:54px;padding:6px 16px;
  background:var(--acc-accent);color:#fff;
  z-index:50;
}
.accapp__brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:0}
.accapp__mark{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.16);
  display:grid;place-items:center;
  font-weight:700;font-size:calc(16px * var(--acc-fs));
  flex:0 0 auto;
}
.accapp__brandtext{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.accapp__brandtext b{font-weight:700;font-size:calc(15px * var(--acc-fs));white-space:nowrap}
.accapp__brandtext span{font-size:calc(11.5px * var(--acc-fs));opacity:.92;white-space:nowrap}

.accapp__search{
  display:flex;align-items:center;gap:9px;
  width:min(440px,100%);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--acc-r);
  padding:8px 13px;
}
.accapp__searchwrap{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.accapp__search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit}
.accapp__search input::placeholder{color:rgba(255,255,255,.6)}

.accapp__hactions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.accapp__hbtn{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:#fff;
  font-size:calc(12.5px * var(--acc-fs));font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.accapp__hbtn--icon{display:grid;place-items:center;width:36px;height:36px;padding:0;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)}
.accapp__hbtn:hover{background:rgba(255,255,255,.2)}
.accapp__user{display:flex;align-items:center;gap:9px;padding-inline-start:6px}
.accapp__av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:600;font-size:calc(13px * var(--acc-fs));flex:0 0 auto}
.accapp__who{display:flex;flex-direction:column;line-height:1.2}
.accapp__who b{font-size:calc(12.5px * var(--acc-fs));font-weight:600}
.accapp__who span{font-size:calc(11px * var(--acc-fs));opacity:.92}

/* ── menu bar ───────────────────────────────────────────────────────────── */
/* Deep shade, not the brand shade: this band is wall-to-wall 13px labels, which
   need 4.5:1. #ed1b24 gives white 4.4:1, #c2151c gives 6.1:1. It also reads as
   a deliberate second band under the header rather than one tall slab of red. */
.accapp__menubar{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;
  padding:0 8px;
  background:var(--acc-accent-deep);color:var(--acc-accent-ink);
  border-top:1px solid rgba(0,0,0,.12);
  z-index:50;
}
.accmenu{position:relative}
.accmenu__btn{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;border:0;background:transparent;
  font-size:calc(13px * var(--acc-fs));cursor:pointer;
  border-radius:7px 7px 0 0;white-space:nowrap;
}
.accmenu__btn:hover{background:rgba(255,255,255,.1)}
.accmenu.is-open .accmenu__btn{background:rgba(255,255,255,.14)}
.accmenu__pop{
  position:absolute;top:100%;inset-inline-start:0;
  min-width:224px;
  background:var(--acc-surface);color:var(--acc-ink-2);
  border:1px solid var(--acc-line);border-radius:0 10px 10px 10px;
  box-shadow:var(--acc-shadow-pop);
  padding:6px;z-index:60;
  animation:accSlideDown .12s ease;
}
.accmenu__item{
  display:flex;width:100%;align-items:center;gap:9px;
  padding:8px 10px;border:0;background:transparent;border-radius:7px;
  font-size:calc(13px * var(--acc-fs));cursor:pointer;text-align:start;white-space:nowrap;
}
.accmenu__item:hover{background:var(--acc-hover);color:var(--acc-accent-deep)}
.accmenu__item svg{opacity:.7;flex:0 0 auto}
.accmenu__sep{height:1px;background:var(--acc-line);margin:5px 8px}
/* Click-away catcher for an open menu. */
.accapp__scrim{position:fixed;inset:0;z-index:30}

/* ── toolbar ────────────────────────────────────────────────────────────── */
.accapp__toolbar{
  flex:0 0 auto;
  display:flex;align-items:stretch;gap:2px;
  padding:7px 8px;
  background:var(--acc-surface);border-bottom:1px solid var(--acc-line);
  overflow-x:auto;z-index:20;
}
.acctool{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:66px;padding:6px 8px;
  border:0;background:transparent;border-radius:9px;
  color:var(--acc-ink-2);cursor:pointer;flex:0 0 auto;
}
.acctool:hover{background:var(--acc-hover);color:var(--acc-accent-deep)}
.acctool span{font-size:calc(11px * var(--acc-fs));white-space:nowrap}
.acctool.is-on{background:var(--acc-hover);color:var(--acc-accent-deep)}

/* ── document tabs ──────────────────────────────────────────────────────── */
.accapp__tabs{
  flex:0 0 auto;
  display:flex;align-items:flex-end;gap:4px;
  padding:7px 12px 0;
  background:var(--acc-chrome);
  overflow-x:auto;
}
.acctab{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:9px 9px 0 0;
  cursor:pointer;white-space:nowrap;
  font-size:calc(13px * var(--acc-fs));font-weight:500;
  background:transparent;color:var(--acc-ink-soft);
  border:1px solid transparent;border-bottom:0;border-top:2px solid transparent;
  flex:0 0 auto;
}
.acctab:hover{background:var(--acc-hover)}
/* The open tab is a white card lifted out of the darker trough — the same white
   as the panels below it, so the eye reads tab and page as one surface. */
.acctab.is-on{
  background:var(--acc-surface);color:var(--acc-ink);font-weight:700;
  border-color:var(--acc-line-firm);border-top-color:var(--acc-accent);
}
.acctab__dot{width:8px;height:8px;border-radius:50%;background:var(--acc-ink-mute);flex:0 0 auto}
.acctab.is-on .acctab__dot{background:var(--acc-accent)}
.acctab__x{
  display:grid;place-items:center;
  width:18px;height:18px;border-radius:5px;
  opacity:.5;flex:0 0 auto;margin-inline-start:2px;
}
.acctab__x:hover{background:var(--acc-line-firm);opacity:1}

/* ── page canvas ────────────────────────────────────────────────────────── */
.accapp__main{
  flex:1 1 auto;min-height:0;overflow:auto;
  padding:18px clamp(12px,2.4vw,28px) 40px;
}
.accpage__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.accpage__head h1{margin:0;font-size:clamp(calc(19px * var(--acc-fs)),2.3vw,calc(25px * var(--acc-fs)));font-weight:700;color:var(--acc-ink)}
.accpage__head p{margin:5px 0 0;font-size:calc(13px * var(--acc-fs));color:var(--acc-ink-soft)}
.accpage__actions{display:flex;gap:8px;flex-wrap:wrap}

.accbtn{
  display:flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:9px;
  border:1px solid var(--acc-line);background:var(--acc-surface);color:var(--acc-ink-2);
  font-weight:600;font-size:calc(13px * var(--acc-fs));cursor:pointer;white-space:nowrap;
}
.accbtn:hover{filter:brightness(.96)}
.accbtn--p{background:var(--acc-accent-deep);border-color:var(--acc-accent-deep);color:#fff}
.accbtn--danger{color:var(--acc-red);border-color:var(--acc-red-line)}

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.acckpis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.acckpi{
  flex:1 1 200px;
  background:var(--acc-surface);border:1px solid var(--acc-line);border-radius:var(--acc-r-lg);
  padding:14px 16px;display:flex;align-items:center;gap:13px;
  box-shadow:var(--acc-shadow);
}
.acckpi__chip{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.acckpi__lbl{font-size:calc(12px * var(--acc-fs));color:var(--acc-ink-soft);white-space:nowrap}
.acckpi__val{
  font-size:clamp(calc(17px * var(--acc-fs)),1.7vw,calc(21px * var(--acc-fs)));font-weight:700;color:var(--acc-ink);
  direction:ltr;unicode-bidi:isolate;text-align:start;
}
.acckpi__sub{font-size:calc(11.5px * var(--acc-fs));margin-top:1px;color:var(--acc-ink-soft)}

/* ── card + table ───────────────────────────────────────────────────────── */
.acccard{
  background:var(--acc-surface);border:1px solid var(--acc-line);border-radius:16px;
  box-shadow:var(--acc-shadow);overflow:hidden;margin-bottom:16px;
}
.acccard__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--acc-line);
}
.acccard__title{display:flex;align-items:center;gap:10px;min-width:0}
.acccard__title h2{margin:0;font-size:calc(15.5px * var(--acc-fs));font-weight:700;color:var(--acc-ink);white-space:nowrap}
.acccard__dot{width:10px;height:10px;border-radius:3px;background:var(--acc-accent);flex:0 0 auto}
.acccard__meta{font-size:calc(12.5px * var(--acc-fs));color:var(--acc-ink-soft);white-space:nowrap}
.acccard__meta b{color:var(--acc-ink);direction:ltr;unicode-bidi:isolate}
.acccard__body{padding:16px}
.acccard__scroll{overflow-x:auto}

/* The ledger grid, after Phenix's: ruled columns, banded rows, a numbered
   gutter and a coloured total line. Row backgrounds are set on the CELLS, not
   the row, because a <tr> background sits behind a <td> one and the banding
   would swallow every state below it — so each state is a `tbody tr.X td`
   selector, ordered weakest to strongest. */
.acctable{width:100%;border-collapse:collapse;white-space:nowrap;font-size:calc(13px * var(--acc-fs))}
.acctable th{
  padding:var(--acc-pad-y) 14px;text-align:start;
  font-weight:600;color:var(--acc-ink-soft);
  background:var(--acc-head);border-bottom:1px solid var(--acc-line-firm);
}
.acctable td{padding:var(--acc-pad-y) 14px;color:var(--acc-ink-2);border-bottom:1px solid var(--acc-line-soft)}
/* Column rules. Logical, so they land on the right edge of the cell in English
   and the left in Arabic without a second rule set. */
.acctable th,.acctable td{border-inline-end:1px solid var(--acc-line-soft)}
.acctable th:last-child,.acctable td:last-child{border-inline-end:0}
.acctable tbody tr:last-child td{border-bottom:0}
.acctable tbody tr:nth-child(even) td{background:var(--acc-band)}
.acctable .t-nm{font-weight:600;color:var(--acc-ink-2)}
.acctable .t-mut{color:var(--acc-ink-mute)}
.acctable .t-soft{color:var(--acc-ink-soft)}
/* Money, codes and dates: LTR islands inside an otherwise RTL row. */
.acctable .t-num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}
.acctable .t-pos{color:var(--acc-green)}
.acctable .t-neg{color:var(--acc-red)}
/* Row number. Chrome rather than data, so it keeps the header's fill through
   the banding and is never the thing a figure is confused with. */
.acctable .t-rn{
  width:46px;text-align:center;padding-inline:6px;
  color:var(--acc-ink-mute);font-size:calc(11.5px * var(--acc-fs));
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
}
.acctable tbody tr td.t-rn{background:var(--acc-surface-2)}
.acctable .t-sec td{padding-top:16px;font-weight:800;font-size:calc(12px * var(--acc-fs));text-transform:uppercase;letter-spacing:.4px}
.acctable tbody tr.t-sub td{background:var(--acc-band-hi);font-weight:700}
/* المجموع — the grid's closing line. Also serves <tfoot> and the report
   subtotals, which are the same thing under another name. */
.acctable tfoot td,
.acctable tbody tr.t-total td,
.acctable tbody tr.t-total td.t-rn{
  background:var(--acc-total);font-weight:700;color:var(--acc-ink);
  border-top:2px solid var(--acc-teal);border-bottom:0;
}
/* The total line keeps its fill under the pointer — it is a result, not a row
   you act on. */
.acctable tbody tr:not(.t-total):hover td,
.acctable tbody tr:not(.t-total):hover td.t-rn{background:var(--acc-band-hi)}
.acctable .t-ind{padding-inline-start:30px}
.acctable .t-act{text-align:end;white-space:nowrap}
/* Ledger grids carry twice the columns of a list, so they run tighter. */
.acctable--dense{--acc-pad-y:8px;font-size:calc(12.5px * var(--acc-fs))}
.acctable--dense th,.acctable--dense td{padding-inline:10px}

/* ── grid footer strip ──────────────────────────────────────────────────────
   Phenix closes a statement with "مدين − دائن = الرصيد" and the balance spelled
   out in words. It is a read-out of the total row and stores nothing; the words
   are what a signed statement is checked against. */
.accsum{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:-4px 2px 16px;padding:12px 16px;
  background:var(--acc-surface);border:1px solid var(--acc-line);border-radius:var(--acc-r-lg);
  box-shadow:var(--acc-shadow);
}
.accsum__eq{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.accsum__cell{display:flex;align-items:baseline;gap:8px}
.accsum__cell i{font-style:normal;font-size:calc(11.5px * var(--acc-fs));color:var(--acc-ink-soft)}
.accsum__cell b{
  font-size:calc(15px * var(--acc-fs));font-weight:700;color:var(--acc-ink);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
}
.accsum__op{color:var(--acc-ink-mute);font-size:calc(14px * var(--acc-fs))}
.accsum__cell--out b{color:var(--acc-teal)}
.accsum__words{
  font-size:calc(12.5px * var(--acc-fs));color:var(--acc-ink-soft);
  white-space:normal;text-align:end;max-width:52ch;
}
.accsum__words b{color:var(--acc-ink);font-weight:600}
/* Inside a document window the strip sits between two panels, not under a card. */
.mdl .accsum{margin:12px 0 14px}

.accpill{
  display:inline-block;padding:3px 11px;border-radius:999px;
  font-size:calc(11.5px * var(--acc-fs));font-weight:600;white-space:nowrap;
}
/* Every reference to a record is a link to it (acc-drill.js). The identifier
   columns carry the accent; a link sitting in a deliberately quiet column keeps
   that column's calm and only shows itself under the cursor, or a table where
   everything is clickable would read as a wall of blue. */
.acclink{color:var(--acc-accent-deep);cursor:pointer;font-weight:600}
.acclink:hover{text-decoration:underline}
.acctable .t-mut>.acclink,.acctable .t-soft>.acclink{color:inherit;font-weight:inherit}
.acctable .t-mut>.acclink:hover,.acctable .t-soft>.acclink:hover{color:var(--acc-accent-deep)}
/* A link wrapped around a pill: the pill keeps its own colour, the cursor and
   the lift say it opens something. */
.acclink--raw{display:inline-block}
.acclink--raw:hover{text-decoration:none;filter:brightness(.94)}
.accibtn{
  border:0;background:transparent;border-radius:7px;
  padding:5px 7px;cursor:pointer;color:var(--acc-ink-soft);line-height:1;
}
.accibtn:hover{background:var(--acc-hover);color:var(--acc-accent-deep)}
.accibtn--del:hover{background:var(--acc-red-soft);color:var(--acc-red)}
/* Send-by-WhatsApp. Tinted at rest, not only on hover: it is the one action in
   a row that leaves the building, and it should read that way before it is
   clicked. --acc-green is 4.5:1 on paper, which is how it is used here. */
.accibtn--wa{color:var(--acc-green)}
.accibtn--wa:hover{background:var(--acc-hover);color:var(--acc-green)}

.accempty{padding:34px;text-align:center;color:var(--acc-ink-mute);font-size:calc(13.5px * var(--acc-fs))}
/* Small aside above a list ("showing the 200 most recent…"). */
.accnote{
  margin:0 2px 12px;
  color:var(--acc-ink-mute);
  font-size:calc(12.5px * var(--acc-fs));
}

/* Section header inside a card — used by reports that stack several tables
   (General Ledger per account, aging summary + detail) without nesting cards. */
.accsection{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 16px 10px;
  border-inline-start:3px solid var(--acc-slate);
  background:var(--acc-surface-2);
  border-top:1px solid var(--acc-line-soft);
}
.accsection b{font-size:calc(13.5px * var(--acc-fs));font-weight:700;color:var(--acc-ink)}
.accsection span{font-size:calc(12px * var(--acc-fs));color:var(--acc-ink-soft);direction:ltr;unicode-bidi:isolate}

/* ── chart-of-accounts tree ─────────────────────────────────────────────── */
/* Three levels, indented by 20px a level and distinguished by weight rather
   than by rules or chevrons — the tree reads as one column of figures, which is
   how an accountant scans it. Codes and balances are LTR islands. */
.acctree{padding:6px}
.acctree__row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:8px;
  padding-inline-start:14px;
}
.acctree__row{padding-inline-start:4px}
.acctree__row:hover{background:var(--acc-hover)}
.acctree__main{display:flex;align-items:center;gap:9px;min-width:0}
/* Fold/unfold chevron; a leaf keeps the slot so codes still line up. */
.acctree__caret{display:inline-flex;align-items:center;justify-content:center;width:16px;flex:0 0 auto;
  color:var(--acc-ink-mute);cursor:pointer;transition:transform .12s ease}
.acctree__caret.is-open{transform:rotate(90deg)}
.acctree__caret--leaf{cursor:default;visibility:hidden}
.acctree__code{
  font-size:calc(11px * var(--acc-fs));color:var(--acc-ink-mute);min-width:40px;
  direction:ltr;unicode-bidi:isolate;flex:0 0 auto;
}
.acctree__name{font-size:calc(13.5px * var(--acc-fs));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Branch (father) rows read bold like a heading; leaves are lighter and clickable. */
.acctree__row--grp .acctree__name{font-weight:700;color:var(--acc-ink)}
.acctree__row--leaf .acctree__name{font-weight:500;color:var(--acc-ink-2)}
.acctree__row--leaf{cursor:pointer}
/* Debit/credit nature chip on an account. */
.acctree__nat{font-size:calc(10px * var(--acc-fs));color:var(--acc-ink-mute);border:1px solid var(--acc-line);
  border-radius:4px;padding:0 5px;line-height:1.7;flex:0 0 auto}
.acctree__end{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.acctree__val{
  font-size:calc(13px * var(--acc-fs));color:var(--acc-ink-soft);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
}
.acctree__row--grp .acctree__val{font-weight:700;color:var(--acc-ink)}
/* Row actions stay out of the way until the row is under the pointer; the
   design has no action column and the tree should keep reading as figures. */
.acctree__acts{display:flex;gap:2px;opacity:0;transition:opacity .12s ease}
.acctree__row:hover .acctree__acts,
.acctree__acts:focus-within{opacity:1}
@media (hover:none){.acctree__acts{opacity:1}}
.acctree__flag{font-size:calc(10.5px * var(--acc-fs));color:var(--acc-ink-mute);flex:0 0 auto}

/* ── account/cash-box card grid (the design's home screen) ──────────────── */
.accboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.accbox{
  border-radius:var(--acc-r-lg);padding:14px 15px;cursor:pointer;
  border:1px solid;display:flex;flex-direction:column;gap:9px;
  text-align:start;
}
.accbox:hover{filter:brightness(.985)}
.accbox__top{display:flex;align-items:center;gap:10px}
.accbox__chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.accbox__name{font-size:calc(13px * var(--acc-fs));font-weight:600;color:var(--acc-ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.accbox__val{font-size:calc(19px * var(--acc-fs));font-weight:700;direction:ltr;unicode-bidi:isolate;text-align:start}
.accbox__sub{font-size:calc(11.5px * var(--acc-fs));color:var(--acc-ink-soft)}

/* ── search field on a page ─────────────────────────────────────────────── */
.accsearch{
  display:flex;align-items:center;gap:8px;
  flex:1 1 240px;max-width:380px;
  background:var(--acc-surface);border:1px solid var(--acc-line);border-radius:var(--acc-r);
  padding:9px 12px;margin-bottom:14px;
}
.accsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--acc-ink-2)}
.accsearch input::placeholder{color:var(--acc-ink-mute)}

/* ── report bar ─────────────────────────────────────────────────────────── */
.accrepbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.accrepbar select,.accrepbar input{
  padding:8px 11px;border:1px solid var(--acc-line);border-radius:var(--acc-r);
  background:var(--acc-surface);color:var(--acc-ink-2);font:inherit;font-size:calc(13px * var(--acc-fs));
}
.accrepbar label{font-size:calc(12px * var(--acc-fs));color:var(--acc-ink-soft)}

/* ── status bar ─────────────────────────────────────────────────────────── */
.accapp__foot{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:6px 16px;
  background:var(--acc-surface);border-top:1px solid var(--acc-line);
  font-size:calc(11.5px * var(--acc-fs));color:var(--acc-ink-soft);
}
.accapp__foot span{white-space:nowrap}
.accapp__foot b{color:var(--acc-ink);direction:ltr;unicode-bidi:isolate}

@keyframes accSlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =============================================================================
   DOCUMENT DIALOGS

   Invoices, bills, payments and journal entries still go through app.js's
   modal() — the behaviour is shared with the CRM and works. Only the skin is
   re-cut here, scoped to body.acc-fullscreen so the CRM's own dialogs are
   untouched. Without this the new application would open dialogs in the old
   product's clothes.
   ============================================================================= */
body.acc-fullscreen .ovl{background:rgba(16,23,38,.5);z-index:500}
body.acc-fullscreen .mdl{
  border-radius:16px;
  border:1px solid var(--acc-line);
  box-shadow:0 24px 64px rgba(16,23,38,.32);
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans','Figtree',sans-serif;
  color:var(--acc-ink);
}
/* Title block reads as a document header, matching the page headers behind it.
   In a document window it takes a wash of that document's colour (--win-accent:
   green invoice, amber bill, teal voucher) so the header agrees with the window's
   title bar; a plain modal has no --win-accent and falls back to the brand red. */
body.acc-fullscreen .mdl__h{
  padding:16px 20px 14px;
  background:color-mix(in srgb, var(--win-accent, var(--acc-accent)) 7%, var(--acc-head));
  border-bottom:1px solid color-mix(in srgb, var(--win-accent, var(--acc-accent)) 22%, var(--acc-line));
}
body.acc-fullscreen .mdl__h h3{font-size:calc(16.5px * var(--acc-fs));font-weight:700;color:var(--acc-ink)}
body.acc-fullscreen .mdl__h p{font-size:calc(12.5px * var(--acc-fs));color:var(--acc-ink-soft)}
body.acc-fullscreen .mdl__b{padding:14px 20px 6px}
body.acc-fullscreen .mdl label{
  font-size:calc(11px * var(--acc-fs));font-weight:600;letter-spacing:.3px;
  color:var(--acc-ink-soft);margin:14px 0 6px;
}
body.acc-fullscreen .mdl input,
body.acc-fullscreen .mdl select,
body.acc-fullscreen .mdl textarea{
  padding:9px 11px;border:1px solid var(--acc-line);border-radius:var(--acc-r);
  background:var(--acc-surface-2);font-size:calc(13.5px * var(--acc-fs));color:var(--acc-ink-2);
  box-shadow:inset 0 1px 2px rgba(16,23,38,.05);
}
body.acc-fullscreen .mdl input:focus,
body.acc-fullscreen .mdl select:focus,
body.acc-fullscreen .mdl textarea:focus{
  border-color:var(--acc-accent-deep);background:var(--acc-surface);
  box-shadow:0 0 0 3px rgba(194,21,28,.15);
}
body.acc-fullscreen .mdl__f{
  padding:14px 20px 18px;gap:10px;
  border-top:1px solid var(--acc-line);background:var(--acc-surface-2);
  box-shadow:0 -3px 10px rgba(16,23,38,.04);
}
body.acc-fullscreen .mdl__f button{border-radius:var(--acc-r);font-weight:600}
body.acc-fullscreen .mdl__f .ok{background:var(--acc-accent-deep)}
body.acc-fullscreen .mdl__f .cancel{background:var(--acc-hover);color:var(--acc-ink-soft)}

/* ── form grid ───────────────────────────────────────────────────────────
   Data entry was one field per row, top to bottom, which turned an invoice into
   a long scroll. Fields now sit on a 12-column grid and declare their own span,
   so related values (date / due date / status, amount / tax) line up on one row
   and the eye moves across a form instead of down a list.
   Collapses to a single column on narrow screens.                          */
body.acc-fullscreen .accform{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px 14px;
  align-items:start;
}
body.acc-fullscreen .accf{
  grid-column:span 12;
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
/* Every span 1–12 has a rule. A missing one is not a cosmetic gap: the field
   falls through to .accf's own `span 12` and takes an entire row to itself,
   which is exactly what threw the invoice's status field across the full width
   and pushed the payment field onto a row of its own. */
body.acc-fullscreen .accf--1{grid-column:span 1}
body.acc-fullscreen .accf--2{grid-column:span 2}
body.acc-fullscreen .accf--3{grid-column:span 3}
body.acc-fullscreen .accf--4{grid-column:span 4}
body.acc-fullscreen .accf--5{grid-column:span 5}
body.acc-fullscreen .accf--6{grid-column:span 6}
body.acc-fullscreen .accf--7{grid-column:span 7}
body.acc-fullscreen .accf--8{grid-column:span 8}
body.acc-fullscreen .accf--9{grid-column:span 9}
body.acc-fullscreen .accf--10{grid-column:span 10}
body.acc-fullscreen .accf--11{grid-column:span 11}
body.acc-fullscreen .accf--12{grid-column:span 12}
/* Labels inside the grid are the field's own, not extra.css's stacked ones. */
body.acc-fullscreen .accform label{margin:0;display:block}
body.acc-fullscreen .accform input,
body.acc-fullscreen .accform select,
body.acc-fullscreen .accform textarea{width:100%}
/* One height for every control on the grid. Left to the browser they disagree —
   a text input renders 36.9px against a select's 37.8 and a date picker's 37.9 —
   so a row mixing them never quite lines up.

   `height`, not `min-height`: the field wrapper is a flex column, which shrinks
   its children below a min-height floor, so the floor was set and ignored. The
   figure scales with the type scale, so raising --acc-fs grows the controls with
   the text instead of cropping it. Direct children only — the line-item grid
   inside a document keeps its own tighter cells. */
body.acc-fullscreen .accform > .accf > input,
body.acc-fullscreen .accform > .accf > select{
  height:calc(36px * var(--acc-fs));
}

/* Section rule inside a form — groups fields without nesting another card. */
body.acc-fullscreen .accsec{
  grid-column:span 12;
  display:flex;align-items:center;gap:9px;
  margin-top:6px;
  font-size:calc(11.5px * var(--acc-fs));font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;
  color:var(--acc-ink-soft);
}
/* A short tick in the document's colour opens each section; the hairline closes
   it. Together they mark the grouping without nesting another boxed card. */
body.acc-fullscreen .accsec::before{
  content:"";flex:0 0 auto;width:3px;height:13px;border-radius:2px;
  background:var(--win-accent, var(--acc-accent));
}
body.acc-fullscreen .accsec::after{content:"";flex:1;height:1px;background:var(--acc-line)}
body.acc-fullscreen .accsec:first-child{margin-top:0}

/* Modal widths: forms get two comfortable columns, documents with a line grid
   get the room their table needs. Both stay inside the viewport. */
body.acc-fullscreen .mdl{max-width:min(700px,calc(100vw - 32px))}
body.acc-fullscreen .mdl--wide{max-width:min(1080px,calc(100vw - 32px))}
/* Header and footer are pinned; only the body scrolls, so the title and the
   Save button stay reachable in a long document. extra.css puts overflow on
   .mdl itself — turn that off or the dialog scrolls inside its own scroller. */
body.acc-fullscreen .mdl{
  max-height:min(92vh,900px);
  display:flex;flex-direction:column;overflow:hidden;
}
body.acc-fullscreen .mdl__h,
body.acc-fullscreen .mdl__f{flex:0 0 auto}
body.acc-fullscreen .mdl__b{flex:1 1 auto;overflow-y:auto;min-height:0}
/* Cards used inside a dialog are already inside a panel — drop the outer gap. */
body.acc-fullscreen .mdl .acccard{margin-bottom:0}

/* The line-item grid keeps app.js's .dt/.lntbl structure; restyle it in place. */
body.acc-fullscreen .mdl .dt-card{
  border:1px solid var(--acc-line);border-radius:var(--acc-r);
  box-shadow:0 1px 3px rgba(16,23,38,.06);overflow:auto;max-height:46vh;
}
/* The header stays put while a long document scrolls under it — and carries a
   wash of the document's colour, so the grid belongs to the invoice/bill above
   it rather than reading as a stray grey table. */
body.acc-fullscreen .mdl .dt thead th{
  position:sticky;top:0;z-index:2;
  background:color-mix(in srgb, var(--win-accent, var(--acc-accent)) 9%, var(--acc-head));
  color:var(--acc-ink-soft);
  font-size:calc(11px * var(--acc-fs));
  text-transform:uppercase;letter-spacing:.3px;
  border-bottom:1px solid color-mix(in srgb, var(--win-accent, var(--acc-accent)) 26%, var(--acc-line));
}
body.acc-fullscreen .mdl .dt td{border-bottom:1px solid var(--acc-line-soft);color:var(--acc-ink-2)}
body.acc-fullscreen .mdl .dt tbody tr:last-child td{border-bottom:0}
body.acc-fullscreen .mdl .lntbl tbody tr:hover{background:var(--acc-surface-2)}
/* Numeric line inputs read as figures, not free text. */
body.acc-fullscreen .mdl .lntbl input[type="number"]{
  text-align:end;font-variant-numeric:tabular-nums;direction:ltr;
}
body.acc-fullscreen .mdl .lntbl .ln-amt{
  font-weight:600;color:var(--acc-ink);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:end;
}
body.acc-fullscreen .mdl .acc-tot{border-color:var(--acc-line);border-radius:var(--acc-r);margin:0}
/* The document's bottom line, closed in its own colour. */
body.acc-fullscreen .mdl .acc-tot__grand{
  background:color-mix(in srgb, var(--win-accent, var(--acc-accent)) 12%, #fff);
  border-top:2px solid color-mix(in srgb, var(--win-accent, var(--acc-accent)) 55%, var(--acc-line));
}
body.acc-fullscreen .mdl .tbtn{color:var(--win-accent, var(--acc-accent-deep));font-weight:600}

/* Read-only document view (invoice preview): its tables are plain, not inputs. */
body.acc-fullscreen .mdl .accview{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 14px}
body.acc-fullscreen .mdl .accview__meta{
  grid-column:span 12;display:flex;flex-wrap:wrap;gap:8px 22px;
  padding:12px 14px;background:var(--acc-surface-2);border:1px solid var(--acc-line);border-radius:var(--acc-r);
}
body.acc-fullscreen .mdl .accview__meta div{display:flex;flex-direction:column;gap:2px;min-width:0}
body.acc-fullscreen .mdl .accview__meta span{font-size:calc(11px * var(--acc-fs));color:var(--acc-ink-mute)}
body.acc-fullscreen .mdl .accview__meta b{font-size:calc(13px * var(--acc-fs));color:var(--acc-ink)}

/* Drill windows (acc-drill.js). One record leads to the next — entry to
   account to entry — so the header carries the way back, and only carries it
   once there is somewhere to go. */
body.acc-fullscreen .mdl__h--drill{display:flex;align-items:flex-start;gap:10px}
body.acc-fullscreen .mdl__h--drill .mdl__htext{min-width:0;flex:1}
body.acc-fullscreen .accback{
  flex:0 0 auto;margin-top:2px;
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--acc-line);border-radius:var(--acc-r);
  background:var(--acc-surface);color:var(--acc-ink-soft);cursor:pointer;
}
body.acc-fullscreen .accback:hover{background:var(--acc-head);color:var(--acc-accent-deep)}
/* The chevron points the way back, which is the other way in Arabic. */
body.acc-rtl .accback svg{transform:scaleX(-1)}

/* ── drill window header ─────────────────────────────────────────────────────
   A record window opens with the type's face: the section's own icon on a wash
   of the colour that type carries in its pills and KPI chips, so the window is
   identified before the title is read. Title and identifying line sit between
   the two controls that are always live — back at the start when there is a
   chain behind you, close at the end always. */
body.acc-fullscreen .mdl__h--drill{align-items:center;padding-block:14px}
body.acc-fullscreen .accwin__face{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
}
body.acc-fullscreen .mdl__h--drill h3{line-height:1.25}
body.acc-fullscreen .mdl__h--drill p{margin-top:3px}
/* Close lives in the header as well as the footer: a window opened several
   levels deep is scrolled, and by then the footer is off screen. */
body.acc-fullscreen .accwin__x{
  flex:0 0 auto;align-self:flex-start;
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid transparent;border-radius:var(--acc-r);
  background:transparent;color:var(--acc-ink-mute);cursor:pointer;
}
body.acc-fullscreen .accwin__x:hover{
  background:var(--acc-surface);border-color:var(--acc-line);color:var(--acc-accent-deep);
}

/* ── drill window footer ─────────────────────────────────────────────────────
   Three equal grey buttons said the three did the same kind of thing. They do
   not: one leaves, one carries you onward, one prints. So the bar has two ends
   — Close alone at the start, the actions grouped at the end — and the buttons
   size to their labels instead of splitting the width between them. */
body.acc-fullscreen .mdl__f--win{flex-wrap:wrap;justify-content:flex-end}
body.acc-fullscreen .mdl__f--win button{flex:0 0 auto;min-width:112px;padding-inline:18px}
body.acc-fullscreen .mdl__f--win .accwin__close{margin-inline-end:auto}
/* The accented action is the one the window exists to offer — open the document
   behind an entry, settle a bill, pull an account's statement. */
body.acc-fullscreen .mdl__f--win .ok{
  background:var(--acc-accent-deep);color:var(--acc-accent-ink);
  box-shadow:0 1px 2px rgba(194,21,28,.28);
}
body.acc-fullscreen .mdl__f--win .ok:hover{filter:brightness(1.06)}
body.acc-fullscreen .mdl__f--win .cancel{
  background:var(--acc-surface);color:var(--acc-ink-2);border:1px solid var(--acc-line);
}
body.acc-fullscreen .mdl__f--win .cancel:hover{background:var(--acc-hover);border-color:var(--acc-line-firm)}
/* Destructive action stays a footer button, not a warning. */
body.acc-fullscreen .mdl__f .accwin--del{color:var(--acc-red)}
body.acc-fullscreen .mdl__f--win .accwin--del{border-color:var(--acc-red-line)}
body.acc-fullscreen .mdl__f--win .accwin--del:hover{background:var(--acc-red-soft);border-color:var(--acc-red)}

@media (max-width:560px){
  /* Stacked, the auto margin would leave Close orphaned at the top. */
  body.acc-fullscreen .mdl__f--win{flex-direction:column-reverse}
  body.acc-fullscreen .mdl__f--win button{width:100%}
  body.acc-fullscreen .mdl__f--win .accwin__close{margin-inline-end:0}
}

@media (max-width:720px){
  body.acc-fullscreen .accf,
  body.acc-fullscreen [class*="accf--"]{grid-column:span 12 !important}
  body.acc-fullscreen .mdl .dt-card{max-height:38vh}
}

/* Confirm dialogs (delete flows). */
body.acc-fullscreen .cdlg h3{color:var(--acc-ink)}
body.acc-fullscreen .cdlg p{color:var(--acc-ink-soft)}
body.acc-fullscreen .cdlg__btns button{border-radius:var(--acc-r)}
body.acc-fullscreen .btn-cancel{background:var(--acc-hover);color:var(--acc-ink-soft)}

/* Toasts sit above the application layer. */
body.acc-fullscreen #toast{z-index:600}

/* ── RTL ────────────────────────────────────────────────────────────────── */
/* dir="rtl" on .accapp reverses the flex rows and table columns on its own;
   the logical properties above cover the rest. Numbers stay LTR via .t-num /
   plaintext, exactly as in the LTR build. */
.accapp[dir="rtl"] .acctable td:not(.t-num),
.accapp[dir="rtl"] .accbox__name{unicode-bidi:plaintext}

/* =============================================================================
   PRINTING

   Two paths. The Print Centre paints a finished document into #acc-print-root
   and sets body.acc-printing — then only that node reaches the paper. A plain
   Ctrl+P with no document chosen still prints the current screen, chrome
   stripped, which is the old behaviour and a useful fallback.
   ============================================================================= */
#acc-print-root{display:none}

@page{size:A4;margin:14mm}

@media print{
  /* Print Centre: the document and nothing else. */
  body.acc-printing > *{display:none !important}
  body.acc-printing > #acc-print-root{display:block !important}

  /* Fallback: the screen, minus its chrome. */
  body.acc-fullscreen:not(.acc-printing) .accapp{position:static;height:auto;overflow:visible}
  body.acc-fullscreen:not(.acc-printing) .accapp__head,
  body.acc-fullscreen:not(.acc-printing) .accapp__menubar,
  body.acc-fullscreen:not(.acc-printing) .accapp__toolbar,
  body.acc-fullscreen:not(.acc-printing) .accapp__tabs,
  body.acc-fullscreen:not(.acc-printing) .accapp__foot,
  body.acc-fullscreen:not(.acc-printing) .accpage__actions,
  body.acc-fullscreen:not(.acc-printing) .accsearch,
  body.acc-fullscreen:not(.acc-printing) .accrepbar,
  body.acc-fullscreen:not(.acc-printing) .accapp__scrim{display:none !important}
  body.acc-fullscreen:not(.acc-printing) .accapp__main{overflow:visible;padding:0}
  .acccard{border:0;box-shadow:none;break-inside:auto}
  .acccard__scroll{overflow:visible !important}
  tr{break-inside:avoid}
}

/* ── the printed document ───────────────────────────────────────────────── */
/* Deliberately ink-frugal: black on white, structure carried by rules and
   weight rather than fills, so it reads the same from a cheap office laser. */
.pdoc{
  background:#fff;color:#111;
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:11.5pt;line-height:1.45;
}
.pdoc__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding-bottom:12px;margin-bottom:18px;border-bottom:2.5px solid #111;
}
.pdoc__brand{display:flex;align-items:flex-start;gap:14px;min-width:0}
/* Bounded both ways so any logo the office points at sits in the same block —
   object-fit keeps it undistorted whatever its aspect ratio. */
.pdoc__logo{
  max-height:58px;max-width:170px;
  object-fit:contain;object-position:left top;
  flex:0 0 auto;
}
[dir="rtl"] .pdoc__logo{object-position:right top}
.pdoc__co{font-size:17pt;font-weight:700;letter-spacing:-.01em}
.pdoc__coaddr{font-size:9pt;color:#444;margin-top:3px;line-height:1.5}
.pdoc__coaddr .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.pdoc__cosub{font-size:9.5pt;color:#555;margin-top:2px}
.pdoc__ident{text-align:end;flex:0 0 auto}
.pdoc__ident h1{margin:0 0 6px;font-size:14pt;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pdoc__ident table{border-collapse:collapse;margin-inline-start:auto;font-size:9.5pt}
.pdoc__ident th{text-align:end;padding:1px 10px 1px 0;color:#555;font-weight:500;white-space:nowrap}
.pdoc__ident td{text-align:end;padding:1px 0;white-space:nowrap;direction:ltr;unicode-bidi:isolate}

.pdoc__party{margin-bottom:14px}
.pdoc__party span{display:block;font-size:8.5pt;text-transform:uppercase;letter-spacing:.6px;color:#666}
.pdoc__party b{font-size:12.5pt;font-weight:700}
.pdoc__party i{display:block;font-style:normal;font-size:9.5pt;color:#555;margin-top:1px}

.ptable{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:10pt}
.ptable th{
  text-align:start;padding:7px 8px;
  border-bottom:1.5px solid #111;border-top:1px solid #111;
  font-size:8.5pt;text-transform:uppercase;letter-spacing:.5px;background:#f2f2f2;
}
.ptable td{padding:6px 8px;border-bottom:1px solid #ddd;vertical-align:top}
.ptable .num{text-align:end;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.ptable .ind{padding-inline-start:22px}
.ptable tr.is-open td{background:#f7f7f7;font-weight:700}
.ptable tfoot th,.ptable tfoot td{
  padding:7px 8px;border-top:1.5px solid #111;border-bottom:2px solid #111;
  font-weight:700;text-align:start;
}
.ptable tfoot td{text-align:end;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.pempty{text-align:center;color:#777;padding:22px;font-size:10pt}

.ptotals{margin-inline-start:auto;border-collapse:collapse;min-width:290px;margin-bottom:16px;font-size:10.5pt}
.ptotals th{text-align:start;padding:5px 14px 5px 0;color:#444;font-weight:500}
.ptotals td{text-align:end;padding:5px 0;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.ptotals tr.is-grand th,.ptotals tr.is-grand td{
  font-weight:700;font-size:11.5pt;border-top:1px solid #111;border-bottom:1px solid #111;
}

.pdoc__amountbox{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:2px solid #111;padding:12px 16px;margin:8px 0 16px;
}
.pdoc__amountbox span{font-size:9pt;text-transform:uppercase;letter-spacing:.6px;color:#555}
.pdoc__amountbox b{font-size:17pt;font-weight:700;direction:ltr;unicode-bidi:isolate}

.pdoc__sub{margin-top:6px}
.pdoc__sub h2{font-size:10pt;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;color:#444}
.pdoc__note{font-size:9.5pt;color:#444;margin:4px 0 14px}
.pdoc__signs{display:flex;gap:40px;margin-top:34px}
.pdoc__signs div{flex:1}
.pdoc__signs span{display:block;border-top:1px solid #111;margin-bottom:5px}
.pdoc__signs b{font-size:9pt;font-weight:500;color:#555}
.pdoc__foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-top:22px;padding-top:8px;border-top:1px solid #bbb;
  font-size:8.5pt;color:#666;
}
.pdoc__stamp{white-space:nowrap}

/* Financial statements are reused verbatim from the screen; neutralise their
   screen colours so a printed P&L is not a wall of ink. */
.pdoc__report .acctable{width:100%;border-collapse:collapse;font-size:10pt;white-space:normal}
.pdoc__report .acctable th{background:#f2f2f2;color:#111;border-bottom:1.5px solid #111;padding:7px 8px}
.pdoc__report .acctable td{padding:6px 8px;border-bottom:1px solid #ddd;color:#111}
.pdoc__report .t-num{text-align:end;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.pdoc__report .acctable tbody tr:nth-child(even) td{background:#f8f8f8}
.pdoc__report .acctable tbody tr td.t-rn{background:#f2f2f2;color:#666}
.pdoc__report .acctable tbody tr.t-total td,
.pdoc__report .acctable tbody tr.t-total td.t-rn,
.pdoc__report .t-total td,.pdoc__report .t-total th{border-top:1.5px solid #111;font-weight:700;background:#f0f0f0;color:#111}
.pdoc__report .acctable tbody tr.t-sub td,
.pdoc__report .t-sub td{background:#fafafa;font-weight:700}
.pdoc__report .t-sec td{font-weight:700;padding-top:14px;color:#111 !important}
.pdoc__report .t-pos,.pdoc__report .t-neg{color:#111}
.pdoc__report canvas,.pdoc__report .accsection span{display:none}
.pdoc__report .accsection{border:0;background:none;padding:12px 0 4px;font-weight:700}
.pdoc__report .accempty{padding:20px;color:#777}

/* Letterhead preview inside the Company details dialog — the same block the
   printed page draws, at screen scale, so the effect of a change is visible
   before anyone spends paper on it. */
.colhpreview{
  border:1px solid var(--acc-line);border-radius:var(--acc-r);
  background:#fff;padding:14px 16px;
}
.colhpreview__in{display:flex;align-items:flex-start;gap:14px}
.colhpreview__in img{max-height:52px;max-width:150px;object-fit:contain;flex:0 0 auto}
.colhpreview__in b{display:block;font-size:calc(15px * var(--acc-fs));color:var(--acc-ink)}
.colhpreview__in span{
  display:block;font-size:calc(11.5px * var(--acc-fs));
  color:var(--acc-ink-soft);margin-top:2px;
}
.colhpreview__in .ltr{direction:ltr;unicode-bidi:isolate}

/* ── Print Centre dialog ────────────────────────────────────────────────── */
body.acc-fullscreen .mdl--print .mdl__b{padding:0}
.prtwrap{display:flex;align-items:stretch;min-height:0}
.prtside{
  flex:0 0 288px;padding:16px 18px;
  border-inline-end:1px solid var(--acc-line);background:#fbfcfe;
}
.prtpreview{
  flex:1 1 auto;min-width:0;
  padding:20px;background:var(--acc-canvas);
  overflow:auto;
}
/* Paper on a desk — the preview is the real document at screen width, not a
   scaled screenshot, so what is checked here is what prints. */
.prtpreview .pdoc{
  max-width:760px;margin:0 auto;padding:26px 30px;
  box-shadow:0 2px 14px rgba(20,32,60,.14);
  border-radius:2px;
}
@media (max-width:860px){
  .prtwrap{flex-direction:column}
  .prtside{flex:0 0 auto;border-inline-end:0;border-bottom:1px solid var(--acc-line)}
  .prtpreview{padding:12px}
  .prtpreview .pdoc{padding:18px}
}

/* ── phones ─────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .accapp__head{height:auto;flex-wrap:wrap;padding:8px 12px;gap:10px}
  .accapp__searchwrap{order:3;flex-basis:100%}
  .accapp__search{width:100%}
  .accapp__who{display:none}
  .accapp__menubar{flex-wrap:nowrap;overflow-x:auto}
  .accapp__main{padding:14px 12px 32px}
  .acckpi{flex:1 1 150px;padding:12px}
  .acckpi__chip{width:36px;height:36px}
  .accboxes{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .accapp__foot{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   ACCOUNTING SYSTEM SMOOTH ANIMATIONS & MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════════════ */
@keyframes acc-page-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.accpage,
.accapp__main {
  animation: acc-page-in .32s cubic-bezier(.16, 1, .3, 1) backwards;
}
.acckpi {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .18s ease;
  animation: acc-page-in .4s cubic-bezier(.16, 1, .3, 1) backwards;
}
.acckpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(0,0,0,.08);
}
.acckpi:hover .acckpi__chip {
  transform: scale(1.15) rotate(3deg);
}
.acckpi__chip {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.acccard {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .15s ease;
}
.acccard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.08);
}
.accbtn {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s ease, box-shadow .18s ease;
}
.accbtn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.accbtn:active {
  transform: translateY(0) scale(0.98);
}
.acctbl tbody tr {
  transition: background .15s ease;
}
.acctbl tbody tr:hover {
  background: var(--acc-band-hi) !important;
}
.mdi-win {
  transition: box-shadow .2s ease, border-color .2s ease;
  animation: acc-page-in .25s cubic-bezier(.16, 1, .3, 1) backwards;
}
.mdi-win.is-focused {
  box-shadow: 0 20px 48px -8px rgba(0,0,0,.22);
}