/* ── Alyamama: the console's Arabic face ─────────────────────────────
   Google Fonts' Alyamama (SIL OFL), the variable file it serves for the
   Arabic subset, re-declared under a private name RESTRICTED to the Arabic
   ranges — the same trick crm.css plays with Noto Kufi. Google ships the
   family with Latin too, and naming it bare would set the whole console in
   it; here a Latin codepoint matches no face and falls through to IBM Plex
   Sans, so only Arabic changes. Declared once, here, because this sheet
   loads before crm.css and both halves of the console read it. Kufi and
   Plex Sans Arabic stay in the stacks behind it as the fallback for any
   letter Alyamama does not carry. */
@font-face{
  font-family:'Alyamama Arabic';
  src:url('https://fonts.gstatic.com/s/alyamama/v2/snfps0a6-txy62q5QogIHtxEwQ.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
                U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* =============================================================================
   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:'Alyamama Arabic','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}
/* A RESET MUST NOT OUT-SPECIFY THE COMPONENTS IT IS RESETTING.

   This was `.accapp button` — one class and one type, specificity (0,1,1) —
   against `.accbtn` and `.accbtn--p`, which are a single class each, (0,1,0).
   Specificity is decided before source order, so the reset won everywhere and
   the entire button design system was dead on arrival: the primary button's
   white text, the danger button's red, `.accbtn`'s own ink colour, and — through
   the `font` SHORTHAND, which resets weight and size too — its font-weight:600
   and 13px scale. Every action button in the ledger was rendering inherited ink
   at weight 400 and the body font size, and had been since the shell was
   written.

   :where() contributes ZERO specificity, so this now scores (0,0,1) — the
   browser default is still undone, and any class rule beats it, which is the
   whole job of a reset. */
:where(.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));
}
/* A note that is about something being WRONG rather than something worth
   knowing. Empty by default and empty again the moment it is fixed, so it never
   sits on the screen as decoration. */
.accnote--warn{color:var(--acc-red);font-weight:500}
.accnote--warn:empty{display:none}

/* 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;
  /* Clips the tree rail to the row. The verticals below deliberately overhang
     far past their own box; this is what cuts them off at exactly the row's
     edges, so the line leaving one row meets the line entering the next with no
     seam and no arithmetic. See .acctree__g. */
  overflow:hidden;
}
.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;padding-inline-start:6px}
/* Tree rails. One 20px cell per ancestor level, drawn rather than implied: a
   chart six levels deep asks "whose child is this?" on every row, and an
   indent alone answers it by eye across twenty lines of figures.

   The verticals are pulled 9px beyond the cell top and bottom — exactly the
   row's vertical padding — so a line leaving one row meets the line entering
   the next and the branch reads as continuous. Change .acctree__row's 9px and
   these have to move with it, or the rail turns into dashes.

   Logical properties throughout: this screen flips to RTL with the rest of the
   ledger, and a rail hard-coded to the left is a rail on the wrong side of
   every Arabic row.

   --acc-line-firm, not --acc-line. The hairline that rules a table is read
   ACROSS, once, with the row; a rail is read DOWN, traced by eye over twenty
   rows to find where a branch began, and #d9e0ea gives out long before it gets
   there. This is the one line on the screen whose job is to be followed. */
.acctree__rail{display:flex;align-self:stretch;flex:0 0 auto}
.acctree__g{position:relative;flex:0 0 20px;width:20px;align-self:stretch}
/* `is-on` = an ancestor with siblings still below it, so its line runs the full
   height. The elbow cell always has a vertical, but a LAST child stops it at
   the row's middle — a line continuing past the last child of a branch claims
   there is more under it than there is. */
/* OVERHANG FAR, AND LET THE ROW CLIP IT.

   These used to reach exactly 9px past the guide, on the assumption that the
   row's 9px vertical padding was the only thing between the guide and the row's
   edge. It is not: the row centres its children, and .acctree__end (the action
   buttons, ~33px) is taller than .acctree__main (~22px), so the guide also sits
   ~5px short at each end. The line fell 5px short top and bottom and the rail
   arrived as a column of dashes.

   Any fixed number here is a guess about the tallest thing in the row, and it
   would be wrong again the moment a control changes size or --acc-fs moves. So
   the line is drawn far beyond the guide in both directions and .acctree__row's
   overflow:hidden trims it to the row's padding box. Rows stack with no margin
   between them, so the result is continuous by construction rather than by
   measurement. */
.acctree__g.is-on::before,
.acctree__g--el::before{
  content:'';position:absolute;inset-inline-start:9px;top:-999px;bottom:-999px;
  width:1px;background:var(--acc-line-firm);
}
/* A last child's line stops at the elbow — 50% of the GUIDE, which is centred
   on the row's text, so it meets the horizontal stub exactly. Declared after the
   rule above so it wins over bottom:-999px. */
.acctree__g--el.is-last::before{bottom:50%}
.acctree__g--el::after{
  content:'';position:absolute;inset-inline-start:9px;top:50%;
  width:11px;height:1px;background:var(--acc-line-firm);
}
/* Printed, the rail is the only thing carrying the hierarchy: the screen's
   hover states and colour are gone and an indent on paper is even harder to
   follow back up the page. Darker, because a .5px hairline that survives a
   screen does not survive a laser printer. */
@media print{
  .acctree__g.is-on::before,
  .acctree__g--el::before,
  .acctree__g--el::after{background:#9aa3ad;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* 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)}

/* Search box and a filter on one line — the Items and Forklifts screens put
   the Brand picker beside the search rather than on a bar of its own. */
.accfilterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.accfilterbar .accsearch,.accfilterbar .accrepbar{margin-bottom:0}

/* ── 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)}
/* A statement bar: the party picker at the start, wide enough to read a
   customer's name, and the period + actions gathered at the end. Wraps onto a
   second line on a narrow screen, picker first. */
.accrepbar--split > select:first-child{flex:1 1 320px;min-width:260px;max-width:560px}
.accrepbar__end{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-inline-start:auto}

/* ── 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:'Alyamama Arabic','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)}
/* A primary action that cannot succeed should look like it. Offering a live
   Post button on an unbalanced entry only to refuse the click is a worse answer
   than saying so before it is pressed. */
body.acc-fullscreen .mdl__f .ok:disabled{opacity:.4;cursor:not-allowed}
body.acc-fullscreen .mdl__f .ok:disabled:hover{filter:none}
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}
/* The right half of a form row, for a totals block with no field beside it.

   NOT `accf--6` plus an inline grid-column-start. `grid-column: span 6` is a
   SHORTHAND that puts the span in grid-column-START and leaves the end `auto`,
   so setting the start to a line number replaces the span outright and the item
   collapses to a single column — which is exactly how the journal voucher's
   debit/credit/difference box came to render as a clipped strip in the middle
   of the dialog. Both ends are set here, so nothing can override half of it. */
body.acc-fullscreen .accf--right{grid-column:7 / -1}
/* 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));
}
/* An entry that does not reach zero cannot post, so the closing line stops
   wearing the document's own colour and says so. The accent wash reads as "this
   is the important figure"; red reads as "this figure is wrong", which is the
   difference that matters on a journal voucher. */
body.acc-fullscreen .mdl .acc-tot__grand.is-bad{
  background:var(--acc-red-soft);
  border-top-color:var(--acc-red);
}
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) .accfilterbar,
  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:'Alyamama Arabic','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}

/* ── the sales invoice (PRINT_DOC.invoice) ──────────────────────────────── */
.pinv__top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:3px solid #111;
}
.pinv__title{text-align:end;flex:0 0 auto}
.pinv__title h1{margin:0;font-size:24pt;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.pinv__no{font-size:13pt;font-weight:700;margin-top:4px;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.pinv__paid{
  display:inline-block;margin-top:8px;padding:3px 12px;
  border:2.5px solid #111;border-radius:4px;
  font-size:11pt;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  transform:rotate(-6deg);
}
.pinv__band{
  display:flex;margin-bottom:16px;
  background:#f3f3f3;border:1px solid #ddd;border-radius:4px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.pinv__cell{flex:0 0 auto;padding:10px 14px;border-inline-start:1px solid #ddd;min-width:110px}
.pinv__cell:first-child{border-inline-start:0}
.pinv__cell--who{flex:1 1 auto;min-width:0}
.pinv__cell span{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.6px;color:#666;margin-bottom:2px}
.pinv__cell b{display:block;font-size:11.5pt;font-weight:700}
.pinv__cell--who b{font-size:13pt}
.pinv__cell i{display:block;font-style:normal;font-size:9.5pt;color:#555;margin-top:2px}
/* A span INSIDE the value (an account code kept left-to-right) is part of the value, not a second label. */
.pinv__cell b span{display:inline;font-size:inherit;color:inherit;letter-spacing:0;text-transform:none;margin:0}
.pinv .ptable thead th{background:#111;color:#fff;border-color:#111;font-size:8.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pinv .ptable td{padding:8px}
.pinv .ptable tbody tr:nth-child(even) td{background:#fafafa;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pinv__desc{font-weight:600}
.pinv__meta{font-size:9pt;color:#555;margin-top:2px;display:flex;gap:14px;flex-wrap:wrap}
.pinv .ltr{direction:ltr;unicode-bidi:isolate}
.pinv__bottom{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-top:4px}
.pinv__words{flex:1 1 auto;min-width:0;padding-top:6px}
.pinv__words>span{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.6px;color:#666}
.pinv__words>b{display:block;font-size:10.5pt;margin:2px 0 10px}
.pinv__sums{flex:0 0 300px}
.pinv__sums .ptotals{min-width:0;width:100%;margin-bottom:8px}
.pinv__sums .pdoc__amountbox{margin:0}
.pinv__signs{display:flex;gap:28px;align-items:flex-end;margin-top:36px}
.pinv__signs>div{flex:1}
.pinv__signs span{display:block;border-top:1px solid #111;margin-bottom:5px}
.pinv__signs b{font-size:9pt;font-weight:500;color:#555}
.pinv__stampbox{
  flex:0 0 150px;height:78px;
  border:1px dashed #999;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:8.5pt;color:#888;text-transform:uppercase;letter-spacing:.5px;
}

/* ── report pages (PRINT_DOC listings) ──────────────────────────────────── */
.prep__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:3px solid #111;
}
.prep__title{text-align:end;flex:0 0 auto}
.prep__title h1{margin:0;font-size:20pt;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.prep__period{font-size:9.5pt;color:#444;margin-top:4px}
.prep__period b{color:#111}
.prep__kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;
}
.prep__kpi{border:1px solid #ccc;border-radius:4px;padding:8px 12px}
.prep__kpi span{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.6px;color:#666}
.prep__kpi b{display:block;font-size:14pt;font-weight:700;margin-top:2px;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;text-align:start}
.prep__kpi i{display:block;font-style:normal;font-size:8.5pt;color:#555;margin-top:1px}
.prep .ptable{font-size:9.5pt}
.prep .ptable thead th{background:#111;color:#fff;border-color:#111;font-size:8pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.prep .ptable tfoot th,.prep .ptable tfoot td{background:#f0f0f0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.prep .ptable td.ltr{white-space:nowrap}
.prep .ptable td{padding:6px 7px}
.prep .ptable tbody tr:nth-child(even) td{background:#fafafa;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.prep .ptable tr.is-over td{color:#111}
.prep .ltr{direction:ltr;unicode-bidi:isolate}
.ppill{
  display:inline-block;padding:1px 8px;border:1px solid #999;border-radius:10px;
  font-size:8pt;font-weight:600;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;
}
.ppill.is-bad{border-color:#111;border-width:1.5px;font-weight:800}

.prep--dense .ptable{font-size:8.5pt;table-layout:fixed}
.prep--dense .ptable thead th{white-space:normal;vertical-align:bottom}
.prep--dense .ptable td .pmut{display:block;font-size:7.5pt;margin-top:1px}
.prep--dense .ptable .num,.prep--dense .ptable .ltr{white-space:nowrap}
.prtpreview .pdoc:has(.prep--dense){max-width:1040px}
/* …and the dialog around it lets go of its 700px cap while one is showing. */
body.acc-fullscreen .mdl:has(.prep--dense){max-width:min(1400px,calc(100vw - 32px))}
.prep--dense .ptable td{padding:5px 5px}
.prep--dense .ptable thead th{padding:6px 5px}
.prep .ptable tr.is-open td{background:#eeeeee;font-weight:700;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.prep .pmut{color:#666;font-weight:400}
.prep .ptable td .pmut{display:block;font-size:8pt;margin-top:1px}
.prep .ptable{table-layout:fixed}
.prep .ptable thead th{white-space:normal;vertical-align:bottom}
/* accounting.css makes every .ltr an inline-block — which turns a CELL carrying
   the class into a floating box beside the row (an underline, a white gap).
   A cell stays a cell and a line stays a line; only the text direction is wanted. */
.pdoc td.ltr{display:table-cell}
.pdoc div.ltr{display:block}
.prep .pinv__band{margin-bottom:12px}
.prep .pdoc__signs{margin-top:28px}
@media (max-width:640px){ .prep__kpis{grid-template-columns:1fr 1fr} }

@media (max-width:640px){
  .pinv__band{flex-wrap:wrap}
  .pinv__bottom{flex-direction:column}
  .pinv__sums{flex-basis:auto;width:100%}
}

/* 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);
}


/* ---------- serial-tracked machines (units.js) ----------
   A chassis number is Latin digits and letters inside an Arabic table, and it
   is read one character at a time by somebody comparing it to a plate on a
   machine. unicode-bidi:isolate on its own is not enough — the cell inherits
   RTL, so a VIN ending in digits has them reordered against the letters. This
   forces the run LTR and isolates it from the row around it. */
.t-ltr{direction:ltr;unicode-bidi:isolate;text-align:start;font-variant-numeric:tabular-nums}

/* An input sitting in a grid cell — the VIN and model boxes on the shipment
   window, where the table IS the form. The document line-item grids have their
   own tighter cells (.lntbl); this is the same idea for an .acctable, kept a
   size down from a form control so a row of twenty does not tower over the
   figures beside it. */
.acctable td > input{
  width:100%;box-sizing:border-box;
  height:calc(30px * var(--acc-fs));
  border:1px solid var(--acc-line);border-radius:var(--acc-r-sm,6px);
  background:var(--acc-surface);color:var(--acc-ink);
  padding:0 8px;font:inherit;font-size:calc(12px * var(--acc-fs));
}
.acctable td > input:focus{outline:2px solid var(--acc-accent);outline-offset:-1px}
.acctable td > input[dir="ltr"]{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Add-a-child, on every row of the chart of accounts. Green rather than the
   neutral ink of edit: it is the one row action that CREATES, and next to a
   pencil and a bin the difference should be readable without reading the
   tooltip. Same weight as its neighbours otherwise — it is a row action, not a
   call to action. */
.accibtn--add{color:var(--acc-green)}
.accibtn--add:hover{background:color-mix(in srgb, var(--acc-green) 12%, transparent)}

/* ---------- admin settings: the parts grid ----------
   Two groups of checkboxes, CRM boards and accounting screens, each with a
   select-all in its heading. The grid is dimmed, not hidden, while "everything
   the role allows" is ticked, so the admin can see what the alternative would
   be without toggling back and forth. */
.admparts{display:grid;gap:14px}
.admparts.is-off{opacity:.45;pointer-events:none}
.admparts__grp{border:1px solid var(--acc-line);border-radius:var(--acc-r);padding:10px 12px}
.admparts__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.admparts__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 14px}
.admparts__grid .accchk{min-height:30px}
/* The modal's label rule (an uppercase caption above a field, with its own
   margin) outranks .accchk — inside this dialog a checkbox label is a line of
   text beside its box, not a caption. */
body.acc-fullscreen .mdl label.accchk{
  display:flex;margin:0;text-transform:none;letter-spacing:0;
  font-size:calc(12.5px * var(--acc-fs));font-weight:500;color:var(--acc-ink-2);
}
body.acc-fullscreen .mdl label.accchk b{font-weight:700}

/* ---------- the settings switch (.accsw) ----------
   A row that IS the control: title, one-line consequence, and a switch on the
   trailing edge that says On/Off in words as well as colour. The input is a
   real checkbox (role=switch) kept in the tab order but drawn by the track
   after it, so :checked / :focus-visible / :disabled drive the visuals with
   no script. Colours come off the --acc-* block only; the thumb travel flips
   under .acc-rtl and every transition dies under reduced motion. */
body.acc-fullscreen .mdl label.accsw{
  position:relative;display:flex;align-items:center;gap:16px;
  margin:4px 0 0;padding:12px 14px;min-height:56px;
  border:1px solid var(--acc-line);border-radius:var(--acc-r-lg);
  background:var(--acc-surface-2);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;
  transition:border-color .15s ease,background .15s ease;
}
body.acc-fullscreen .mdl label.accsw:hover{border-color:var(--acc-line-firm)}
body.acc-fullscreen .mdl label.accsw:has(input:checked){border-color:var(--acc-accent);background:var(--acc-surface)}
body.acc-fullscreen .mdl label.accsw:has(input:disabled){cursor:not-allowed}
body.acc-fullscreen .mdl label.accsw:has(input:disabled) .accsw__track{opacity:.5}
body.acc-fullscreen .mdl label.accsw input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
body.acc-fullscreen .accsw__text{flex:1 1 auto;min-width:0;display:block}
body.acc-fullscreen .accsw__title{
  display:block;font-size:calc(13.5px * var(--acc-fs));font-weight:600;
  color:var(--acc-ink);line-height:1.3;margin-bottom:3px;
}
body.acc-fullscreen .accsw__desc{
  display:block;font-size:calc(12.5px * var(--acc-fs));line-height:1.45;
  color:var(--acc-ink-soft);
}
body.acc-fullscreen .accsw__lock{
  display:block;margin-top:6px;font-size:calc(12px * var(--acc-fs));
  font-weight:500;color:var(--acc-amber);
}
body.acc-fullscreen .accsw__track{
  position:relative;flex:none;width:44px;height:26px;border-radius:13px;
  background:var(--acc-line-firm);transition:background .2s ease;
}
body.acc-fullscreen .accsw__thumb{
  position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;
  background:var(--acc-surface);box-shadow:0 1px 2px var(--acc-line-firm);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
body.acc-fullscreen .mdl label.accsw input:checked ~ .accsw__track{background:var(--acc-accent)}
body.acc-fullscreen .mdl label.accsw input:checked ~ .accsw__track .accsw__thumb{transform:translateX(18px)}
body.acc-fullscreen.acc-rtl .mdl label.accsw input:checked ~ .accsw__track .accsw__thumb{transform:translateX(-18px)}
body.acc-fullscreen .mdl label.accsw input:focus-visible ~ .accsw__track{
  outline:2px solid var(--acc-accent);outline-offset:3px;
}
body.acc-fullscreen .accsw__state{
  flex:none;min-width:2.6em;text-align:start;
  font-size:calc(12px * var(--acc-fs));font-weight:600;color:var(--acc-ink-soft);
}
body.acc-fullscreen .mdl label.accsw input:checked ~ .accsw__state{color:var(--acc-accent-deep)}
body.acc-fullscreen .accsw__on{display:none}
body.acc-fullscreen .mdl label.accsw input:checked ~ .accsw__state .accsw__on{display:inline}
body.acc-fullscreen .mdl label.accsw input:checked ~ .accsw__state .accsw__off{display:none}
@media (prefers-reduced-motion: reduce){
  body.acc-fullscreen .mdl label.accsw,
  body.acc-fullscreen .accsw__track,
  body.acc-fullscreen .accsw__thumb{transition:none}
}

/* The chart picker in the same dialog: a search bar over a scrolling list of
   the tree, one checkbox a row, indented by depth. Dimmed like the parts grid
   while "the whole chart" is ticked. A row the search does not match is hidden
   — the rule has to outrank the modal's label rule above, hence the prefix. */
.admaccts{border:1px solid var(--acc-line);border-radius:var(--acc-r);overflow:hidden}
.admaccts.is-off{opacity:.45;pointer-events:none}
.admaccts__bar{display:flex;align-items:center;gap:12px;padding:8px 10px;border-bottom:1px solid var(--acc-line);background:var(--acc-surface-2)}
.admaccts__bar input{flex:1 1 auto;min-width:0}
.admaccts__bar .mut{white-space:nowrap}
.admaccts__list{max-height:280px;overflow:auto;padding:4px 10px}
body.acc-fullscreen .mdl label.admaccts__row{min-height:28px}
body.acc-fullscreen .mdl label.admaccts__row.is-hidden{display:none}
.admaccts__row code{font-family:inherit;font-weight:700;color:var(--acc-ink-soft);margin-inline-end:8px}
/* …and the modal's input rule (padding, inset shadow, full width) outranks
   .accchk input the same way: the box stays a 15px box, the text takes the rest. */
body.acc-fullscreen .mdl label.accchk input{
  width:15px;height:15px;flex:none;padding:0;margin:0;box-shadow:none;
}
body.acc-fullscreen .mdl label.accchk span{flex:1 1 auto;min-width:0}

/* A row of filter chips: mutually exclusive, each carrying its own count, all of
   them readable at once. Used for the machines register's status filter, where a
   dropdown hid the one thing the filter is for.

   The ACTIVE chip's colours arrive inline, from the status's own hex, so the
   filter and the table's pills agree about what each state looks like — which is
   also why nothing here sets a background for .is-on: it would win over the
   inline style on the one chip that has one. */
.accchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center}
.accchip{
  display:inline-flex;align-items:center;gap:7px;
  height:calc(32px * var(--acc-fs));padding:0 13px;
  border:1px solid var(--acc-line);border-radius:999px;
  background:var(--acc-surface);color:var(--acc-ink-soft);
  font:inherit;font-size:calc(12.5px * var(--acc-fs));line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.accchip:hover{border-color:var(--acc-line-firm)}
.accchip.is-on{font-weight:600}
/* The count reads as secondary to the label at every state, including inside a
   coloured chip where it inherits that colour rather than a grey of its own. */
.accchip__n{font-size:calc(11px * var(--acc-fs));font-variant-numeric:tabular-nums;opacity:.7}
/* Dimmed, not hidden: a chip that vanishes at zero makes the row reflow under
   the pointer, and "Sold: 0" is worth knowing. The selected chip is never
   dimmed, or choosing an empty status would fade the control you just used. */
.accchip.is-empty{opacity:.5}
.accchip.is-on{opacity:1}
.accchip:focus-visible{outline:2px solid var(--acc-accent);outline-offset:2px}

/* A warning inside a dialog — VINs still missing on a shipment about to be
   received. Amber, not red: it is a thing to finish, not a thing that failed. */
.accbanner{
  border:1px solid var(--acc-line);border-radius:var(--acc-r);
  padding:10px 14px;margin:0 0 14px;font-size:calc(12.5px * var(--acc-fs));
  color:var(--acc-ink-soft);background:var(--acc-surface);
}
.accbanner--warn{border-color:#f5c26b;background:#fef6e7;color:#8a5a00}

/* Checkbox + label on one baseline, for a switch that sits in the form grid
   beside ordinary inputs. The height matches a control so the row does not
   jump when it is the only field on its line. */
.accchk{
  display:flex;align-items:center;gap:8px;min-height:calc(36px * var(--acc-fs));
  font-size:calc(12.5px * var(--acc-fs));color:var(--acc-ink-soft);cursor:pointer;
}
.accchk input{width:15px;height:15px;accent-color:var(--acc-accent);flex:none;margin:0}

/* ---------- the integrity banner ----------
   accAuditBanner() (acc-app.js) draws this above every screen when accAudit()
   found something. It is deliberately the loudest thing in the application:
   a ledger that is quietly wrong renders exactly like one that is right, so
   the only useful place to report it is in the reader's way.

   Colour is the palette's own --acc-red family; nothing here is a literal. */
.accaudit{
  margin:0 0 var(--acc-sp-4,16px);
  border:1px solid var(--acc-red-line);
  border-inline-start:3px solid var(--acc-red);
  border-radius:var(--acc-r,6px);
  background:var(--acc-red-soft);
  overflow:hidden;
}
.accaudit__bar{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--acc-red);text-align:start;
}
.accaudit__bar svg{flex:none}
.accaudit__bar>span:first-of-type{font-weight:600}
.accaudit__hint{
  margin-inline-start:auto;font-size:12px;font-weight:500;
  color:var(--acc-ink-mute);text-decoration:underline;
}
.accaudit__body{
  padding:2px 12px 12px;
  border-top:1px solid var(--acc-red-line);
  background:var(--acc-paper,#fff);
}
.accaudit__body p{margin:10px 0;font-size:12.5px;color:var(--acc-ink-soft)}
.accaudit__body ul{margin:0;padding-inline-start:18px;display:grid;gap:6px}
.accaudit__body li{font-size:13px;color:var(--acc-ink-2)}
/* The count, so "3 unbalanced entries" reads without expanding every id. */
.accaudit__n{
  display:inline-block;min-width:18px;padding:0 5px;margin-inline-start:4px;
  border-radius:9px;background:var(--acc-red);color:#fff;
  font-size:11px;font-weight:700;text-align:center;
}
/* The offending record numbers. LTR-neutral so document numbers keep their
   digit order when the ledger is showing Arabic. */
.accaudit__d{
  display:block;margin-top:2px;font-size:12px;color:var(--acc-ink-mute);
  unicode-bidi:plaintext;
}
/* The per-finding remedy: its own line under the detail, quieter than the
   finding itself but not so quiet it reads as decoration. */
.accaudit__fix{display:block;margin-top:3px;color:var(--acc-ink-soft,#5b6a82);font-size:12px;line-height:1.5}


/* ── The audit trail (acc-audit.js) ───────────────────────────────────────
   The created/edited strip at the top of every record window, the role pill,
   the history cards, the Database log's filter bar and the recycle bin.
   Palette from the token block only; logical properties throughout, so the
   Arabic ledger mirrors without a rule of its own. The strip lives inside
   .mdl__b rather than under the header, because mdi.js hides the header of a
   record it floats — and the strip must survive that. */
body.acc-fullscreen .mdl .accstamp{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  margin:0 0 14px;padding-block:7px;padding-inline:12px 7px;
  background:var(--acc-band);border:1px solid var(--acc-line);border-radius:var(--acc-r);
  font-size:calc(12px * var(--acc-fs));color:var(--acc-ink-soft);line-height:1.45;
}
body.acc-fullscreen .mdl .accstamp__item{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
body.acc-fullscreen .mdl .accstamp__item>svg{color:var(--acc-ink-mute);flex:0 0 auto}
body.acc-fullscreen .mdl .accstamp__lbl{color:var(--acc-ink-mute)}
body.acc-fullscreen .mdl .accstamp__item b{color:var(--acc-ink);font-weight:600}
body.acc-fullscreen .mdl .accstamp__at{color:var(--acc-ink-2);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
body.acc-fullscreen .mdl .accstamp__btn{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:7px;border:1px solid var(--acc-line);
  background:var(--acc-surface);color:var(--acc-accent-deep);
  font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;
}
body.acc-fullscreen .mdl .accstamp__btn:hover{background:var(--acc-head)}
body.acc-fullscreen .mdl .accstamp__btn.is-on{background:var(--acc-head);border-color:var(--acc-line-firm)}
/* The history, folded open under the stamp. Bounded, so a long-lived invoice
   does not push its own form off the bottom of the window. */
body.acc-fullscreen .mdl .acchist-inline{
  margin:-6px 0 16px;padding:10px;max-height:360px;overflow-y:auto;
  background:var(--acc-band);border:1px solid var(--acc-line);border-radius:var(--acc-r);
}
body.acc-fullscreen .mdl .acchist-inline .accempty{padding:18px}

/* Who someone was when they did it. Admin wears the accent, an accountant the
   teal the ledger gives vouchers, a supervisor blue, everyone else grey. */
.accrole{
  display:inline-block;padding:1px 7px;border-radius:999px;vertical-align:middle;white-space:nowrap;
  font-size:calc(10.5px * var(--acc-fs));font-weight:700;line-height:1.5;
  background:var(--acc-head);color:var(--acc-ink-soft);
}
.accrole--admin{background:color-mix(in srgb,var(--acc-accent-deep) 11%,#fff);color:var(--acc-accent-deep)}
.accrole--accountant{background:color-mix(in srgb,var(--acc-teal) 12%,#fff);color:var(--acc-teal)}
.accrole--supervisor{background:color-mix(in srgb,var(--acc-blue) 11%,#fff);color:var(--acc-blue)}
.accrole--system{background:var(--acc-chrome);color:var(--acc-ink-2)}

/* One save, as a card: when and who on top, what underneath. */
body.acc-fullscreen .mdl .acchist{
  margin-bottom:10px;overflow:hidden;
  background:var(--acc-surface);border:1px solid var(--acc-line);border-radius:var(--acc-r);
}
body.acc-fullscreen .mdl .acchist:last-child{margin-bottom:0}
body.acc-fullscreen .mdl .acchist__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  padding:8px 14px;background:var(--acc-head);border-bottom:1px solid var(--acc-line-soft);
  font-size:calc(12.5px * var(--acc-fs));color:var(--acc-ink-soft);
}
body.acc-fullscreen .mdl .acchist__when{font-weight:700;color:var(--acc-ink);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
body.acc-fullscreen .mdl .acchist__meta b{color:var(--acc-ink);font-weight:600}
body.acc-fullscreen .mdl .acchist__n{margin-inline-start:auto;color:var(--acc-ink-mute);font-size:calc(11.5px * var(--acc-fs))}
body.acc-fullscreen .mdl .acchist__list{
  margin:0;padding-block:8px 10px;padding-inline:32px 14px;
  font-size:calc(12.5px * var(--acc-fs));color:var(--acc-ink-2);line-height:1.75;
}
body.acc-fullscreen .mdl .acchist__head{font-weight:700;color:var(--acc-green)}
body.acc-fullscreen .mdl .acchist__head--del{color:var(--acc-red)}
.acchist__mut{color:var(--acc-ink-mute)}
.acchist__diff{display:inline-block;margin-inline-end:12px;unicode-bidi:isolate}
.acchist__diff i{font-style:normal;color:var(--acc-ink-mute);margin-inline-end:2px}
.acchist__arrow{color:var(--acc-ink-mute);padding:0 5px}

/* The Database log's filters: labelled controls in a row that wraps. */
.acclogbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  padding:12px 16px;margin-bottom:14px;
  background:var(--acc-surface);border:1px solid var(--acc-line);border-radius:var(--acc-r);
}
.acclogbar label{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  font-size:calc(11.5px * var(--acc-fs));font-weight:600;color:var(--acc-ink-mute);
}
.acclogbar select,.acclogbar input{
  min-width:150px;max-width:100%;padding:7px 10px;
  border:1px solid var(--acc-line);border-radius:8px;
  background:var(--acc-surface);color:var(--acc-ink);font:inherit;font-size:calc(13px * var(--acc-fs));
}
.acclogbar__btns{display:flex;gap:8px;margin-inline-start:auto}
.acclogbar .accbtn{padding:8px 14px}
.acclog__rec{white-space:nowrap}
.acclog__details{min-width:240px;max-width:560px;white-space:normal;line-height:1.6}
.acclog__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;border-top:1px solid var(--acc-line-soft);
}
.acclog__foot .accnote{margin:0}
.accbin__with{font-size:calc(12px * var(--acc-fs))}
.accbtn--sm{padding:5px 10px;border-radius:7px;font-size:calc(12px * var(--acc-fs))}
.acctable tr.is-restored td{color:var(--acc-ink-mute)}

/* ── the Daily Report (acc-daily.js) ────────────────────────────────────────
   A day's work for the paper archive. Cards keep one entry on one page where
   they can; section headings never strand at the foot of a page; everything is
   black on white with rules, so a cheap laser prints it cleanly. The running
   header, page numbers and printed-at line are @page margin boxes the document
   carries in its own <style>, so they appear on every sheet. */
.pday__h3{font-size:10pt;text-transform:uppercase;letter-spacing:.5px;margin:18px 0 6px;color:#222;break-after:avoid}
.pday__sec{margin-top:22px}
.pday__sec>h2{
  display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding:6px 0 5px;
  border-top:3px solid #111;border-bottom:1px solid #111;
  font-size:12pt;font-weight:800;text-transform:uppercase;letter-spacing:.4px;break-after:avoid;
}
.pday__sec>h2 span{
  display:inline-block;min-width:22px;padding:0 6px;text-align:center;
  background:#111;color:#fff;border-radius:3px;-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.pday__sec>h2 i{margin-inline-start:auto;font-style:normal;font-weight:600;font-size:10pt;color:#555}
.pday__card{border:1px solid #999;border-radius:4px;padding:10px 12px 4px;margin-bottom:12px;break-inside:avoid}
.pday__ch{display:flex;align-items:flex-start;gap:12px;padding-bottom:6px;border-bottom:1px solid #ccc;margin-bottom:6px}
.pday__ref{
  flex:0 0 auto;min-width:40px;padding:3px 7px;text-align:center;
  border:2px solid #111;border-radius:4px;font-size:12pt;font-weight:800;font-variant-numeric:tabular-nums;
}
.pday__ct{flex:1 1 auto;min-width:0}
.pday__ct b{display:block;font-size:12pt;font-weight:700}
.pday__ct i{display:block;font-style:normal;font-size:10pt;color:#333;margin-top:1px}
.pday__amt{flex:0 0 auto;font-size:13pt;font-weight:800;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.pday__stamp{font-size:8.5pt;color:#444;margin-bottom:6px}
.pday__stamp b{color:#111}
.pday__role{display:inline-block;padding:0 5px;border:1px solid #999;border-radius:8px;font-size:7pt;font-weight:600;text-transform:uppercase;letter-spacing:.3px;vertical-align:1px}
.pday__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px;margin:4px 0 8px}
.pday__grid div{min-width:0}
/* The LABEL only: a span inside the value (a pill, a document number) is part of the value. */
.pday__grid>div>span{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.5px;color:#666}
.pday__grid b{display:block;font-size:9.5pt;font-weight:600;overflow-wrap:anywhere}
.pday .pday__card .ptable{margin-bottom:8px;font-size:9pt}
.pday .pday__card .ptable thead th{background:#f0f0f0;color:#111;border-color:#111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pday .pday__card .ptotals{font-size:9.5pt;margin-bottom:8px;min-width:240px}
.pday__post{margin:2px 0 6px}
.pday__posthead{font-size:8pt;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#444;margin:4px 0 3px}
.pday .pday__post .ptable{font-size:8.5pt}
.pday .pday__post .ptable td{padding:3px 6px}
.pday__later{font-size:8.5pt;border-top:1px dashed #999;padding:5px 0 4px;margin-top:2px}
.pday__later b{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.pday__what{font-size:8.5pt;line-height:1.55}
.pday .acchist__diff i{color:#555}
.pday .acchist__arrow{color:#555}
.pday__note{font-size:9.5pt;color:#444;margin:6px 0 10px}
.pday__check{margin:18px 0 0;padding:8px 10px;border:1px solid #111;font-size:9.5pt;font-weight:600}
.pday__check.is-bad{border-width:2.5px}
.pday__sign{display:flex;align-items:flex-end;gap:24px;break-inside:avoid}
.pday__sign .pdoc__signs{flex:1 1 auto}
.pday__filed{flex:0 0 190px;height:70px;border:1px dashed #777;border-radius:4px;padding:6px 8px;font-size:8pt;color:#555;text-transform:uppercase;letter-spacing:.4px}
@media (max-width:640px){ .pday__grid{grid-template-columns:1fr 1fr} .pday__sign{flex-direction:column;align-items:stretch} .pday__filed{flex-basis:auto} }

/* The Retry button under a failed ledger load (accRenderApp). */
.accempty__act{margin-top:14px;display:flex;justify-content:center}

/* Stock Adjustment's machine picker: the machines of one item on the yard, each
   with what it is carried at, ticked by name (openStockAdjust). */
.sa-units{display:grid;gap:4px;max-height:200px;overflow:auto;padding:2px 0}
.sa-unit{display:flex;align-items:center;gap:8px;cursor:pointer}
.sa-unit span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-unit b{font-variant-numeric:tabular-nums;font-weight:600}