/* ===== Tijarah shared UI — palette + shell, matched to the desktop prototype ===== */
.tj-app{
  --bg:#e8eaed; --surface:#fff; --surface-2:#f1f3f5; --border:#d8dce0;
  --text:#22262a; --muted:#697077; --faint:#a4abb1;
  --accent:#4b5a69; --accent-strong:#37434f; --accent-soft:#e7eaee;
  --pos:#2e7d5b; --neg:#c0473e; --warn:#b4791c; --info:#3e6ea5;
  --pos-soft:#e7f1eb; --neg-soft:#f6eae8; --warn-soft:#f4eedf;
  /* The stretch of a target bar that went PAST the target, and the run of the score line above it.
     Blue, against the green: the surplus is a DIFFERENT thing from the target, not more of it, and
     two greens one shade apart were being read as one bar. Asked for outright after a month at
     140% looked, at a glance, no different from a month that had just made it.
     (It has been three colours now — a slate that sank into the empty track, then a mint that read
     as the same green. Blue is the first one that separates at arm's length.)
     --over-ink is the same hue at a weight that can be read as text on this surface. */
  --over:#3f7fd6; --over-ink:#2a5fae;
  /* Cash-flow charts. Checked with the palette validator on this surface: the four series against
     every other one (colour-blind and normal vision), and the in/out pair. */
  --cf-purchase:#eb6834; --cf-payment:#4a3aa7; --cf-sale:#2a78d6; --cf-receipt:#1baf7a;
  --cf-in:#3e6ea5; --cf-out:#b4791c; --cf-in-tint:#dbe6f2; --cf-out-tint:#f3e6cf;
  /* Report donut / share-bar slices, in this order (validator-checked, light and dark); --ch-o = "Other". */
  --ch1:#2a78d6; --ch2:#eb6834; --ch3:#1baf7a; --ch4:#eda100; --ch5:#e87ba4; --ch6:#008300; --ch7:#4a3aa7; --ch-o:#b3b9bf;
  /* Bar chart: last year beside this year (pale step of slot 1), and a value below zero. */
  --ch-prev:#9ec5f4; --ch-neg:#e34948;
  /* Report line chart: the colours a merchant can give the line (light here, dark below). */
  --lc-blue:#2a78d6; --lc-teal:#0f9a8a; --lc-violet:#6a4fd8; --lc-pink:#d6457f; --lc-orange:#eb6834; --lc-green:#1b9a4a;
  --radius:12px; --sm:8px;
  --shadow:0 1px 2px rgba(30,35,40,.05),0 4px 16px rgba(30,35,40,.07);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",system-ui,serif;
}
.tj-app[data-theme="dark"]{
  --bg:#191c20; --surface:#22262b; --surface-2:#2a2f35; --border:#363c43;
  --text:#e6e8eb; --muted:#9aa1a8; --faint:#6c737a;
  --accent:#5e6e7e; --accent-strong:#b7c2cd; --accent-soft:#2c333b;
  --pos:#4fb784; --neg:#e88880; --warn:#e0a64f; --info:#6f9dd8;
  --pos-soft:#1e2a24; --neg-soft:#2c1e1d; --warn-soft:#2a2416;
  /* Same blue, lifted to carry on a dark ground — and light enough to read as text, which is what
     --over-ink is used for beside the percentage. */
  --over:#6ba6ef; --over-ink:#8fc0f5;
  /* dark steps of the same series, validated against this surface */
  --cf-purchase:#d95926; --cf-payment:#b35cc8; --cf-sale:#3987e5; --cf-receipt:#199e70;
  --cf-in:#5f8fcf; --cf-out:#bd8533; --cf-in-tint:#2a3747; --cf-out-tint:#3d3222;
  --ch1:#3987e5; --ch2:#d95926; --ch3:#199e70; --ch4:#c98500; --ch5:#d55181; --ch6:#008300; --ch7:#9085e9; --ch-o:#5d656d; --ch-prev:#4d6f99; --ch-neg:#e66767;
  --lc-blue:#3987e5; --lc-teal:#22b8a6; --lc-violet:#9085e9; --lc-pink:#ea6a9b; --lc-orange:#f08a4b; --lc-green:#34c77b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 18px rgba(0,0,0,.4);
}

/* ---- Cash-flow chart cards (CashFlowChart.razor) ---- */
.cf-card{display:grid;gap:10px;align-content:start}
.cf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 16px;flex-wrap:wrap}
.cf-head h3{margin:0}
.cf-sub{margin:1px 0 0;font-size:12px;color:var(--muted)}
.cf-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.cf-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.cf-seg button{font:inherit;font-size:11.5px;font-weight:600;border:0;background:transparent;color:var(--muted);padding:5px 10px;cursor:pointer}
.cf-seg button.on{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.cf-seglbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-inline-end:5px}
.cf-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px}
.cf-legend span{display:inline-flex;align-items:center;gap:6px}
.cf-legend .grp{color:var(--muted);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.cf-sw{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
.cf-sw.ln{height:2px;width:14px;border-radius:1px;background:var(--text)}
.cf-sw.h-in{background:repeating-linear-gradient(135deg,var(--cf-in) 0 2.5px,var(--cf-in-tint) 2.5px 5px);box-shadow:inset 0 0 0 1.5px var(--cf-in)}
.cf-sw.h-out{background:repeating-linear-gradient(135deg,var(--cf-out) 0 2.5px,var(--cf-out-tint) 2.5px 5px);box-shadow:inset 0 0 0 1.5px var(--cf-out)}
.cf-ltr{font-weight:800;color:var(--muted);font-size:10.5px}
.cf-months{display:flex;flex-wrap:wrap;gap:6px}
.cf-months button{font:inherit;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.cf-months button.on{background:var(--text);border-color:var(--text);color:var(--surface)}
.cf-svg{display:block;width:100%;height:auto}
.cf-svg text{font-family:var(--sans)}
.cf-hit{fill:transparent;cursor:pointer}
.cf-check{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.cf-check .m{font-weight:800}
.cf-check .it{display:inline-flex;align-items:center;gap:5px}
.cf-check .sum{flex-basis:100%;display:flex;flex-wrap:wrap;gap:3px 7px;padding-top:5px;border-top:1px dashed var(--border)}
.cf-check .o{color:var(--muted);font-weight:700}
/* global reset so the shell fills the viewport edge-to-edge (no default body margin
   strips — they show as dark gaps when the OS is in dark mode) */
html,body{margin:0;padding:0;height:100%}
body{background:#e8eaed}
@media(prefers-color-scheme:dark){body{background:#191c20}}
.tj-app,.tj-app *{box-sizing:border-box}
.tj-app{font-family:var(--sans);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"cv11" 1;letter-spacing:-.005em;
  display:grid;grid-template-columns:248px 1fr;width:100%;overflow:hidden;
  /* minmax(0,…), not 1fr: a plain 1fr row grows to its tallest child. The icon rail has overflow
     visible (for its tooltips), so its full height stretched the row past the window, and the
     overflow:hidden above cut the bottom of every screen off where the scroll could not reach. */
  grid-template-rows:60px minmax(0,1fr);
  /* dvh, because a phone browser's 100vh is the height WITHOUT its address bar: the page ends up
     taller than the window and the last row of every screen sits under the chrome. vh first for
     the browsers that have never heard of dvh. */
  height:100vh;height:100dvh}
/* All numeric text: tabular figures so digits align and read cleanly */
.tj-app .num,.tj-app .tj-amt,.tj-app input[type=number],.tj-app input[data-tj-num]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- topbar ---- */
.tj-topbar{grid-column:1/3;display:flex;align-items:center;gap:16px;padding:0 18px;
  background:var(--surface);border-block-end:1px solid var(--border);z-index:5}
.tj-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.2px}
.tj-brand .logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;font-size:18px}
.tj-brand small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.tj-bizchip{display:flex;align-items:center;gap:9px;padding:6px 11px;border:1px solid var(--border);
  border-radius:var(--sm);background:var(--surface-2);font-size:13px}
.tj-bizchip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tj-bizchip .sep{color:var(--faint)}
.tj-bizchip b{font-weight:600}
.tj-bizchip select{border:0;background:transparent;font:inherit;color:inherit;font-weight:600;cursor:pointer;outline:none;max-width:150px}
.tj-app .grow{flex:1}
/* Global search (topbar) — matches prototype */
.tj-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;padding:7px 14px;min-width:180px;color:var(--muted);position:relative}
.tj-search input{border:0;background:transparent;color:var(--text);outline:none;width:100%;font:inherit;font-size:13px}
.tj-gsr{position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:min(400px,86vw);max-height:64vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 42px rgba(0,0,0,.24);
  padding:6px;z-index:80}
.tj-gsr .gsr-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;padding:8px 10px 4px}
.tj-app[lang="ur"] .tj-gsr .gsr-h{letter-spacing:0}
.tj-gsr .gsr-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.tj-gsr .gsr-i:hover{background:var(--surface-2)}
.tj-gsr .gsr-ic{width:28px;height:28px;border-radius:7px;background:var(--surface-2);display:grid;place-items:center;font-size:14px;flex-shrink:0}
.tj-gsr .gsr-tx{min-width:0}
.tj-gsr .gsr-tx b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-gsr .gsr-tx span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-gsr .gsr-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:820px){.tj-search{display:none}}
.tj-icbtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);display:grid;place-items:center;font-size:15px;cursor:pointer}
.tj-icbtn:hover{border-color:var(--accent);color:var(--accent)}
/* Guide: the same height as the icon buttons beside it, but it says what it is. */
.tj-guidebtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:12.5px;
  font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.tj-guidebtn:hover{border-color:var(--accent);color:var(--accent)}
/* KPI trend line: this month's figure, with the arrow against last month. */
.tj-trend{display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--muted)}
.tj-trend b{font-weight:700;margin-inline-start:2px}
.tj-trend b.up{color:var(--pos)}
.tj-trend b.down{color:var(--neg)}
@media(max-width:900px){ .tj-guidebtn span{display:none} .tj-guidebtn{padding:0 9px;gap:0} }
.tj-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);
  display:grid;place-items:center;font-weight:700;font-size:13px}
/* The avatar is the signed-in user's, and opens their own menu: who is signed in (the shop PC changes
   hands), Change password, Sign out. The menu is fixed to the window rather than hung off the bar,
   because on a phone the bar clips whatever overflows it. */
button.tj-avatar{border:0;padding:0;cursor:pointer;font-family:inherit;flex:none}
button.tj-avatar:hover,button.tj-avatar[aria-expanded="true"]{box-shadow:0 0 0 2px var(--accent)}
.tj-acct-scrim{position:fixed;inset:0;z-index:89}
.tj-acct-menu{position:fixed;top:66px;inset-inline-end:14px;z-index:90;width:min(280px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 42px rgba(0,0,0,.24);padding:6px}
.tj-acct-menu .who{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-block-end:1px solid var(--border)}
.tj-acct-menu .who .tj-avatar{flex:none}
.tj-acct-menu .who>div:last-child{min-width:0}
.tj-acct-menu .who b{display:block;font-size:13.5px;overflow-wrap:anywhere}
.tj-acct-menu .who span{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.tj-acct-menu .item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;
  background:none;color:var(--text);font:inherit;font-size:13px;text-align:start;text-decoration:none;cursor:pointer}
.tj-acct-menu .item:hover{background:var(--surface-2)}
.tj-acct-menu .item.branch{justify-content:space-between;cursor:default}
.tj-acct-menu .item.branch select{flex:1;min-width:0;max-width:150px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text);font:inherit;font-weight:600}
.tj-acct-menu .item.lang{justify-content:space-between;cursor:default}
.tj-acct-menu .item.lang:hover{background:none}
.tj-acct-menu .acct-lang{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:none}
.tj-acct-menu .acct-lang button{border:0;background:transparent;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.tj-acct-menu .acct-lang button.on{background:var(--accent);color:#fff}

/* ---- language toggle + sync status (topbar) ---- */
.tj-langtog{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--surface-2)}
.tj-langtog button{border:0;background:transparent;padding:7px 12px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.tj-langtog button.on{background:var(--accent);color:#fff}
.tj-sync{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:600}
.tj-sync .pulse{width:8px;height:8px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 0 var(--pos);animation:tjpulse 2s infinite}
@keyframes tjpulse{0%{box-shadow:0 0 0 0 rgba(46,125,91,.5)}70%{box-shadow:0 0 0 6px rgba(46,125,91,0)}100%{box-shadow:0 0 0 0 rgba(46,125,91,0)}}

/* ---- Urdu: RTL font + comfortable line-height for text (numbers stay in the sans font) ---- */
.tj-app[lang="ur"]{font-family:var(--font-ur)}
.tj-app[lang="ur"] h1,.tj-app[lang="ur"] h3,.tj-app[lang="ur"] .tj-navlink,.tj-app[lang="ur"] .tj-navlabel,
.tj-app[lang="ur"] label,.tj-app[lang="ur"] .lbl,.tj-app[lang="ur"] th,.tj-app[lang="ur"] .tj-brand,
.tj-app[lang="ur"] .tj-bizchip,.tj-app[lang="ur"] p{line-height:2}
.tj-app[lang="ur"] .num,.tj-app[lang="ur"] input,.tj-app[lang="ur"] .tj-kpi .val{font-family:var(--sans)}

/* ---- sidebar: three widths, one attribute ----
   full   the menu as it has always been
   icons  a rail: the glyphs stay where the eye learned them, the labels become hover tooltips, and
          the page gets 184px back. Hovering the rail opens it OVER the page rather than pushing it,
          so nothing under the pointer moves; the lock turns that off for anyone who finds it jumpy.
   hidden gone entirely — for a narrow screen, or for reading a wide report. */
.tj-side{background:var(--surface);border-inline-end:1px solid var(--border);padding:14px 12px;overflow-y:auto;
  position:relative;transition:width .12s ease}

.tj-app[data-nav="icons"]{grid-template-columns:64px 1fr}
.tj-app[data-nav="hidden"]{grid-template-columns:0 1fr}
.tj-app[data-nav="hidden"] .tj-side{padding:0;border-inline-end:0;overflow:hidden}

/* The rail itself */
/* 30px at the top so the first glyph clears the lock button sitting in that corner. */
.tj-app[data-nav="icons"] .tj-side{padding:30px 8px 14px;overflow:visible}
.tj-app[data-nav="icons"] .tj-navlabel{display:none}
.tj-app[data-nav="icons"] .tj-navlink{justify-content:center;padding:10px 0;position:relative}
.tj-app[data-nav="icons"] .nv-ic{font-size:17px}
/* The label becomes the tooltip — the text is already there, so nothing has to be repeated in a
   title attribute that would then need translating twice. */
.tj-app[data-nav="icons"] .nv-tx{position:absolute;inset-inline-start:100%;margin-inline-start:10px;
  white-space:nowrap;background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:5px 10px;font-size:12.5px;box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;transition:opacity .1s ease;z-index:60}
.tj-app[data-nav="icons"] .tj-navlink:hover .nv-tx{opacity:1}

/* Hover to peek: the rail widens over the page. Locked, it does not. */
.tj-app[data-nav="icons"]:not([data-navlock]) .tj-side:hover{width:248px;padding:30px 12px 14px;overflow-y:auto;
  z-index:55;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.tj-app[data-nav="icons"]:not([data-navlock]) .tj-side:hover .tj-navlabel{display:block}
.tj-app[data-nav="icons"]:not([data-navlock]) .tj-side:hover .tj-navlink{justify-content:flex-start;padding:9px 11px}
.tj-app[data-nav="icons"]:not([data-navlock]) .tj-side:hover .nv-tx{position:static;margin:0;background:none;
  border:0;padding:0;font-size:13.5px;box-shadow:none;opacity:1}

/* The lock, top-right of the rail */
.tj-navlock{position:absolute;inset-inline-end:6px;top:6px;border:1px solid var(--border);background:var(--surface-2);
  border-radius:7px;font-size:11px;line-height:1;padding:3px 5px;cursor:pointer;opacity:.55;z-index:61}
.tj-navlock:hover,.tj-navlock.on{opacity:1}
.tj-navtoggle{font-size:15px}
/* Only ever seen in the narrow layout, where the menu floats over the page (see the phone block). */
.tj-navscrim{display:none}
.tj-navlabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:700;margin:16px 10px 6px}
.tj-navlabel:first-child{margin-top:2px}
.tj-side nav{display:flex;flex-direction:column;gap:2px}
.tj-navlink{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--muted);
  text-decoration:none;font-size:13.5px;font-weight:500;border:1px solid transparent}
.tj-navlink:hover{background:var(--surface-2);color:var(--text)}
.tj-navlink.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}

/* Chart labels (Dashboard SvgText). Written in the chart's own user units, so what reaches the
   eye is this size times the chart's scale — see the phone block, where that scale is ~0.6. */
.cxt{font-size:10px;fill:var(--muted)}
.cxt.s{font-size:11px;font-weight:700;fill:var(--text)}

/* ---- main scroll area ---- */
.tj-main{overflow-y:auto;padding:24px 28px;background:var(--bg)}

/* ---- a document screen: the form, and its Summary beside it ----
   Ten screens each carried this as an inline `display:grid;grid-template-columns:2fr 1fr` with a
   local copy of the breakpoint, which is why the pair kept two columns on a 1024px laptop and the
   Summary card hung 400px off the side of the page.

   The pair only works while the form still has room for two columns of fields, and how much room
   there is depends on the MENU as much as on the window — 248px of it when it is full, 64px as a
   rail. A window query cannot see that, so the floor (820px of page) is written once per menu
   width. Container queries would say this in one line; they also make .tj-main the containing
   block for every position:fixed descendant, which would move each modal and the item picker's
   floating list. Three lines is the cheaper price. */
/* The summary column never goes below what its rows and buttons need; the lines column gives way
   first (it scrolls sideways on its own), and below the breakpoints both stack. */
.tj-docgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:16px}
/* Receiving, transfer and return screens: the picker on the right is the wider half. */
.tj-docgrid.listfirst{grid-template-columns:1.1fr 1.6fr}
.tj-docgrid>*{min-width:0}
@media (max-width:1068px){ .tj-app[data-nav="full"] .tj-docgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:884px){ .tj-app[data-nav="icons"] .tj-docgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .tj-app[data-nav="hidden"] .tj-docgrid{grid-template-columns:minmax(0,1fr)} }

/* ===== page content ===== */
.tj-page{max-width:none;width:100%}
.tj-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.tj-head h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px}
/* Detail-page header: back button on the left + title/sub group (matches prototype .phead) */
.tj-dethead{display:flex;align-items:center;gap:12px;min-width:0}
.tj-dethead>.tj-btn{flex:none;font-size:15px;line-height:1;padding:8px 13px}
.tj-dethead h1{margin:0;font-weight:700}
.tj-dethead p{margin:2px 0 0}
.tj-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
.tj-btn{border:0;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none}
.tj-btn:hover{filter:brightness(1.1)}
button.ghost,a.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none}
button.ghost:hover,a.ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Smaller variant, for a button that sits beside explanatory text rather than ending a form.
   Written in markup before it was written here, so it read as a full-size button. */
.tj-btn.sm,button.ghost.sm,a.ghost.sm{padding:6px 11px;font-size:12px;border-radius:8px}

.tj-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:8px 14px;color:var(--muted);margin-bottom:12px;max-width:420px}
.tj-search input{border:0;background:transparent;color:var(--text);outline:none;width:100%;font-size:13px}
.tj-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tj-tabs button{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:9px;padding:7px 12px;font-weight:600;font-size:12.5px;cursor:pointer}
.tj-tabs button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
/* The "Only mine" chip locked on for a read-own user: still clearly ON, just not a button any more. */
.tj-tabs button[data-only-mine].on:disabled{opacity:1;cursor:default;background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.tj-badge{display:inline-block;min-width:18px;padding:0 6px;margin-inline-start:5px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:11px;font-weight:700}

.tj-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;align-content:start;grid-auto-rows:min-content}
/* One row of tabs that scrolls sideways, instead of wrapping a few orphans onto a second line. */
.tj-tabs.tj-tabs-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.tj-tabs.tj-tabs-row button{flex:none;white-space:nowrap}
/* The stock as a sum: boxes joined by + − =, the last one the shelf. Wraps on a narrow screen. */
.tj-walk .walk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin-top:6px}
.tj-walk .st{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.tj-walk .st .n{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.tj-walk .st .w{font-size:12px;color:var(--muted)}
.tj-walk .st.total{background:var(--accent-soft);border-color:var(--accent)}
.tj-walk .op{font-size:20px;font-weight:600;color:var(--muted)}
.tj-walk .walkrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.tj-trend{flex:1 1 220px;min-width:200px}
.tj-trend .plot{position:relative}
/* Inside a card (a column) the 220px flex-basis above would become a height: the month line is just text. */
.tj-kpi .tj-trend{flex:none;min-width:0}
.tj-trend svg{width:100%;height:64px;display:block}
.tj-trend .line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.tj-trend .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.tj-trend .hit{fill:var(--accent);fill-opacity:0}.tj-trend .hit:hover{fill-opacity:.08}
.tj-trend .cap{font-size:11.5px;color:var(--muted);margin-top:2px}.tj-trend .cap b{color:var(--text)}.tj-trend .cap b.neg{color:var(--neg,#b3392b)}
.tj-walk .pos{color:var(--pos,#1f7a4d)}.tj-walk .neg{color:var(--neg,#b3392b)}
.tj-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}
.tj-kpi .lbl{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px}
/* Colored KPI icon badge (matches prototype .ic) */
.tj-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex:none}
.i-green{background:var(--pos-soft);color:var(--pos)}
.i-red{background:var(--neg-soft);color:var(--neg)}
.i-amber{background:var(--warn-soft);color:var(--warn)}
.i-blue{background:color-mix(in srgb,#4B7BEC 15%,transparent);color:#3B6BD8}
.i-teal{background:color-mix(in srgb,#1BA89A 16%,transparent);color:#149385}
.i-purple{background:color-mix(in srgb,#9B6DE8 15%,transparent);color:#8657D6}
:root[data-theme="dark"] .i-blue{color:#7BA0F0} :root[data-theme="dark"] .i-teal{color:#4FD0C0} :root[data-theme="dark"] .i-purple{color:#BB98F0}
.tj-kpi .val{font-size:22px;font-weight:800}
.tj-kpi .val.warn{color:var(--warn)} .tj-kpi .val.neg{color:var(--neg)} .tj-kpi .val.pos{color:var(--pos)}
/* Dashboard customizable widgets */
/* Twelve columns, so six figures fit one row and a 5/7 split is possible; a card carries its width as
   an inline grid-column:span N in twelfths (2 = tile, 4 = third, 6 = half, 12 = row). */
.tj-dashgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.tj-widget{position:relative;min-width:0}
.tj-widget>.tj-kpi,.tj-widget>a.tj-kpi{height:100%}
.tj-dashgrid.editing .tj-widget{outline:2px dashed var(--border);outline-offset:2px;border-radius:var(--radius);cursor:grab}
.tj-dashgrid.editing .tj-widget:active{cursor:grabbing}
.tj-dashgrid.editing .tj-widget.drop-target{outline:2px solid var(--accent);outline-offset:2px}
.tj-dashgrid.editing a{pointer-events:none}
.tj-wtools{position:absolute;top:6px;inset-inline-end:6px;display:flex;gap:4px;z-index:3}
.tj-wtools button{width:22px;height:22px;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center;color:var(--text)}
.tj-wtools button:hover{background:var(--surface-2)}
.tj-customize{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.tj-customize .tj-chip{cursor:pointer}
/* Customize (Dashboard.Customize.cs): the bar, views, presets, the gallery, the grip and the size menu. */
.tj-cz{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.tj-cz-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tj-cz-bar .grow{flex:1}
.tj-cz-hint{font-size:12px}
.tj-cz-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.tj-cz-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);min-width:78px}
.tj-cz-name{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;min-width:0;width:180px;max-width:100%}
.tj-cz-name:focus{outline:none;border-color:var(--accent)}
.tj-cz-err{font-size:12px;color:var(--neg);font-weight:600}
.tj-cz-confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:9px;background:var(--neg-soft);border:1px solid var(--neg);font-size:13px}
.tj-cz-confirm span{flex:1;min-width:200px}
.tj-cz-preset{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer}
.tj-cz-preset:hover{border-color:var(--accent);background:var(--accent-soft)}
.tj-cz-group>b{display:block;font-size:12.5px;margin:2px 0 6px}
.tj-cz-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.tj-gcard{display:flex;align-items:center;gap:10px;text-align:start;font:inherit;color:var(--text);padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);cursor:pointer;min-width:0}
.tj-gcard:hover{border-color:var(--accent);background:var(--accent-soft)}
.tj-gcard .txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tj-gcard .txt b{font-size:13px}
.tj-gcard .txt small{font-size:11.5px;color:var(--muted);line-height:1.35}
.tj-gcard .add{font-weight:800;color:var(--accent-strong);font-size:16px}
/* The glyph: a tiny drawing of the card's shape — a tile, bars, progress lines, a stack, a list. */
.tj-gcard .glyph{flex:0 0 38px;height:30px;border-radius:6px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:4px}
.tj-gcard .glyph i{display:block;background:var(--accent);opacity:.75;border-radius:2px}
.tj-gcard .g-bars i{width:5px}
.tj-gcard .g-bars i:nth-child(1){height:40%} .tj-gcard .g-bars i:nth-child(2){height:75%}
.tj-gcard .g-bars i:nth-child(3){height:55%} .tj-gcard .g-bars i:nth-child(4){height:95%}
.tj-gcard .g-tile{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.tj-gcard .g-tile i:nth-child(1){width:60%;height:4px;opacity:.4} .tj-gcard .g-tile i:nth-child(2){width:85%;height:8px}
.tj-gcard .g-tile i:nth-child(n+3){display:none}
.tj-gcard .g-progress,.tj-gcard .g-list,.tj-gcard .g-stack{flex-direction:column;align-items:stretch;justify-content:center;gap:3px}
.tj-gcard .g-progress i{height:4px} .tj-gcard .g-progress i:nth-child(1){width:85%} .tj-gcard .g-progress i:nth-child(2){width:55%}
.tj-gcard .g-progress i:nth-child(3){width:70%} .tj-gcard .g-progress i:nth-child(4){display:none}
.tj-gcard .g-list i{height:3px;opacity:.45} .tj-gcard .g-list i:nth-child(odd){opacity:.8}
.tj-gcard .g-stack{flex-direction:row;align-items:flex-end}
.tj-gcard .g-stack i{width:6px} .tj-gcard .g-stack i:nth-child(1){height:90%} .tj-gcard .g-stack i:nth-child(2){height:60%}
.tj-gcard .g-stack i:nth-child(3){height:35%} .tj-gcard .g-stack i:nth-child(4){height:20%;background:var(--neg)}
.tj-viewsel{min-width:150px;font-weight:600;color:var(--text);cursor:pointer}
.tj-wgrip{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:grab;font-size:13px;color:var(--muted);touch-action:none;user-select:none}
.tj-wgrip:active{cursor:grabbing}
.tj-wtools button.on{background:var(--accent-soft);border-color:var(--accent)}
.tj-wsize{position:absolute;top:32px;inset-inline-end:6px;z-index:4;display:flex;flex-direction:column;gap:6px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.tj-wsize div{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tj-wsize small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);width:48px}
.tj-wsize button{font:inherit;font-size:12px;font-weight:600;padding:3px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);cursor:pointer}
.tj-wsize button.on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--surface)}
/* While customizing, each card gets a strip of its own above it for the tools — laid over the card
   they covered its title ("Sales", "Cash in hand"), which is exactly what one looks for then. */
.tj-dashgrid.editing>.tj-widget{padding-top:30px}
.tj-dashgrid.editing .tj-wtools{top:3px}
.tj-dashgrid.editing .tj-wsize{top:30px}
.tj-dashgrid .tj-widget.dragging{opacity:.45}
.tj-dashgrid .tj-widget.drop-before{box-shadow:inset 4px 0 0 var(--info);border-radius:var(--radius)}
.tj-dashgrid .tj-widget.drop-after{box-shadow:inset -4px 0 0 var(--info);border-radius:var(--radius)}
.tj-dashgrid .tj-widget.drop-before:dir(rtl){box-shadow:inset -4px 0 0 var(--info)}
.tj-dashgrid .tj-widget.drop-after:dir(rtl){box-shadow:inset 4px 0 0 var(--info)}
/* Height: compact = as tall as its own content, never stretched by a taller row; tall = more room. */
.tj-dashgrid>.tj-widget.h-compact{align-self:start}
.tj-dashgrid>.tj-widget.h-tall{min-height:460px}
/* ---- inside a dashboard card ---- */
.tj-kpi .spark{width:100%;height:30px;display:block;margin-top:4px}
.tj-kpi .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
/* The figure by branch under a tile, when several branches are read together. */
.tj-kpi .split{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:4px}
.tj-kpi .split b{color:var(--text);font-variant-numeric:tabular-nums}
.tj-kpi .split i,.tj-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:4px;vertical-align:0}
.tj-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:6px}
/* KPI tiles above the Sales / Purchases list (ListKpis.razor). Lighter than the dashboard's: they
   sit on the list's page, so no shadow and a smaller figure. A pocket tile carries its colour on top. */
.tj-listkpis-head{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:0 0 8px}
.tj-lk-period{min-width:140px;font-weight:600;color:var(--text);cursor:pointer}
.tj-listkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin:0 0 10px}
.tj-listkpis .tj-kpi{box-shadow:none;padding:11px 13px;gap:2px;min-width:0;background:var(--surface-2)}
.tj-listkpis .tj-kpi .val{font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-listkpis .tj-kpi .sub{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tj-listkpis .tj-kpi .sub .pos{color:var(--pos);font-weight:700}
.tj-listkpis .tj-kpi .sub .neg{color:var(--neg);font-weight:700}
.tj-listkpis .tj-kpi .sub .warn{color:var(--warn);font-weight:700}
.tj-listkpis .pocket.cash{border-top:3px solid var(--pos)}
.tj-listkpis .pocket.bank{border-top:3px solid var(--info)}
.tj-listkpis .pocket.wallet{border-top:3px solid var(--warn)}
.tj-lk-btn{font:inherit;color:inherit;text-align:start;cursor:pointer}
.tj-lk-btn:hover{border-color:var(--accent)}
.tj-lk-btn.on{outline:2px solid var(--info);outline-offset:-1px}
.tj-lk-link{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.tj-lk-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--pos-soft);color:var(--pos);letter-spacing:.02em}
.tj-lk-outside{font-size:12.5px;color:var(--muted);margin:-2px 0 12px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.tj-lk-outside b{color:var(--text)}
.tj-lk-outside button.tj-lk-link{font:inherit;background:none;border:0;padding:0;color:var(--accent-strong);font-weight:700}
.tj-lk-team{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;margin:0 0 12px}
.tj-lk-team .t{color:var(--muted);margin-inline-end:2px}
.tj-lk-chip{font:inherit;font-size:12.5px;color:var(--text);border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:3px 10px;cursor:pointer;font-variant-numeric:tabular-nums}
.tj-lk-chip.on{background:var(--accent-soft);border-color:var(--accent);font-weight:700}
.tj-lk-filter{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
.tj-lk-filter button{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--info);background:var(--surface);color:var(--info);border-radius:999px;padding:2px 10px;cursor:pointer}
.tj-cardhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tj-cardhead h3{margin:0}
/* A card whose drawing should take whatever height the row gives it, rather than sit over a blank. */
.tj-card.tj-fill{display:flex;flex-direction:column}
/* The Cash in hand card: the working on the left, the drawer's line on the right; stacked when narrow. */
.cih{flex:1;min-height:0;display:grid;grid-template-columns:minmax(230px,2fr) 3fr;gap:18px;margin-top:10px}
@media (max-width:900px){.cih{grid-template-columns:1fr}}
.cih-sum{display:flex;flex-direction:column;gap:8px;min-width:0}
.cih-big{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.cih-big.neg{color:var(--neg)}
.cih-ch{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cih-ch.pos{color:var(--pos)} .cih-ch.neg{color:var(--neg)}
.cih-ch .tj-muted{font-weight:500}
.cih-calc{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.cih-calc td{padding:3px 0;border-bottom:1px dashed var(--border)}
.cih-calc td:last-child{text-align:end;font-weight:600;white-space:nowrap;padding-inline-start:10px}
.cih-calc td.pos{color:var(--pos)} .cih-calc td.neg{color:var(--neg)}
.cih-calc small{color:var(--muted);font-size:11px}
.cih-calc tr.sub td{font-weight:700;border-bottom:1px solid var(--border)}
.cih-calc tr.tot td{border-bottom:0;border-top:1.5px solid var(--text);font-weight:800;padding-top:5px}
.cih-pockets{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted)}
.cih-pockets b{color:var(--text);font-variant-numeric:tabular-nums}
.cih-pockets .t{color:var(--text);font-weight:600}
.cih-chart{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0}
.tj-fill>.fill{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.tj-fill>.fill svg{width:100%;height:auto}
/* Small tabs that switch what one card draws — a card that used to be three cards. */
/* A segmented control: one pill-shaped tray, the chosen piece raised out of it. The dashboard's
   header uses it for the branch picker and the period, side by side. A select inside it (the
   picker past five branches) wears the same pill and a chevron. */
.tj-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.tj-seg button,.tj-seg select{border:0;background:transparent;color:var(--muted);border-radius:9px;padding:6px 12px;font:inherit;font-weight:600;font-size:12.5px;line-height:1.3;cursor:pointer;outline:none}
.tj-seg button:hover,.tj-seg select:hover{color:var(--text)}
.tj-seg button.on,.tj-seg select.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tj-seg select{appearance:none;-webkit-appearance:none;padding-inline-end:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a9199' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.tj-seg select:focus{box-shadow:0 0 0 2px var(--accent-soft)}
.tj-seg select option{background:var(--surface);color:var(--text);font-weight:500}
.tj-tabs.mini{gap:4px;margin:0}
.tj-tabs.mini button{padding:3px 9px;font-size:11.5px;border-radius:7px}
/* The morning list: a severity stripe, what it is, and the next step named on the right. */
.tj-actlist{list-style:none;margin:8px 0 0;padding:0}
.tj-actlist li{display:grid;grid-template-columns:4px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer}
.tj-actlist li:last-child{border-bottom:0}
.tj-actlist li:hover b{color:var(--accent-strong)}
.tj-actlist .sev{width:4px;height:30px;border-radius:2px;background:var(--faint)}
.tj-actlist .sev.crit{background:var(--neg)} .tj-actlist .sev.warn{background:var(--warn)} .tj-actlist .sev.info{background:var(--info)}
.tj-actlist b{display:block;font-size:13px} .tj-actlist small{color:var(--muted);font-size:11.5px}
.tj-actlist .r{text-align:end;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;line-height:1.6}
/* How far a bill / invoice has got, on its voucher's row and in the voucher's popup. */
.tj-docprog{display:inline-block;vertical-align:middle;width:74px;height:7px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.tj-docprog i{display:block;height:100%;background:var(--warn)}
.tj-docprog.full i{background:var(--pos)}
.tj-docprog.wide{display:block;width:100%;height:9px}
/* A rule's use, on its row (Setup → Taxes & Discounts): six months as bars, the on/off switch, and the panel a row opens into. */
.tj-spark6{display:inline-flex;align-items:flex-end;gap:2px;height:24px;vertical-align:middle}
.tj-spark6 i{display:block;width:6px;border-radius:2px 2px 0 0;background:var(--muted);opacity:.45}
.tj-spark6 i:last-child{background:var(--accent);opacity:1}
.tj-up{color:var(--pos);font-weight:700} .tj-down{color:var(--neg);font-weight:700}
.tj-switch{position:relative;display:inline-block;width:34px;height:19px;border-radius:999px;border:0;padding:0;background:var(--border);cursor:pointer;vertical-align:middle;transition:background .15s}
.tj-switch i{position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:inset-inline-start .15s}
.tj-switch.on{background:var(--pos)} .tj-switch.on i{inset-inline-start:17px}
.tj-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tj-seg.tj-segfill{display:flex;width:100%} .tj-seg.tj-segfill button{flex:1;padding:7px 8px;white-space:nowrap}
.tj-unitbox{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding-inline-end:11px}
.tj-unitbox input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important}
.tj-unitbox>span{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap}
.tj-rulepreview{margin-top:12px;border:1px dashed var(--accent);background:var(--accent-soft);border-radius:10px;padding:10px 12px;display:grid;gap:3px;font-size:13px;font-variant-numeric:tabular-nums}
.tj-rulepreview div{display:flex;justify-content:space-between;gap:12px}
.tj-rulepreview .t{font-weight:800;border-top:1px solid var(--border);padding-top:5px;margin-top:2px}
/* "Apply by default", inside a rule's form: one dashed line while off, a tinted block of questions while on. */
.tj-ruledef{margin-top:12px;border:1px dashed var(--border);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.tj-ruledef.on{border:1.5px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--surface))}
.tj-ruledef .head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800}
.tj-ruledef label{margin-top:0}
.tj-ruledef .tj-unitbox.pick{padding:7px 10px;justify-content:space-between;background:var(--surface)}
.tj-ruledef .tj-unitbox.pick>span{color:var(--text)}
.tj-ruledef .tj-unitbox.dis{opacity:.5}
.tj-ruledef .tj-seg{background:var(--surface)}
.tj-ruledef .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tj-ruledef .chips button{border:1px solid var(--border);cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;padding:4px 10px}
.tj-ruledef .warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn);border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45}
.tj-ruledef .ok{background:color-mix(in srgb,var(--pos) 13%,var(--surface));color:var(--pos);border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45}
.tj-switch:disabled{cursor:not-allowed}
/* A rule's defaults in the list: a star badge per side. Colour = the side (the green of a Sales chip, the amber of a Purchase one);
   filled = the whole business, outlined = a branch's own. */
.tj-defbadges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tj-defbadge{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:10.5px;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;border:1.5px solid transparent;white-space:nowrap}
button.tj-defbadge{cursor:pointer}
.tj-defbadge.sale.biz{background:var(--pos);color:var(--surface)}
.tj-defbadge.purchase.biz{background:var(--warn);color:var(--surface)}
.tj-defbadge.sale.br{background:transparent;border-color:var(--pos);color:var(--pos)}
.tj-defbadge.purchase.br{background:transparent;border-color:var(--warn);color:var(--warn)}
.tj-defbadge s{opacity:.85}
.tj-defkey{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;margin-inline-start:auto;font-size:11.5px}
.tj-ruleuse .box.def{border:1.5px solid var(--warn)}
.tj-ruleuse .box.def .s{display:flex;flex-wrap:wrap;align-items:center;gap:5px;color:var(--text)}
tr.tj-detailrow>td{background:var(--surface-2);padding:12px;white-space:normal}
.tj-ruleuse{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tj-ruleuse .box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tj-ruleuse .l{font-size:11.5px;color:var(--muted);font-weight:600}
.tj-ruleuse .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.tj-ruleuse .s{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tj-ruleuse .s b{color:var(--text);font-weight:600}
/* The AI Insight card: the one card in the accent's own colour, so it is found at a glance.
   Everything inside reads in white on it — tabs, rows, chips and the muted lines. */
.tj-card.tj-ai{background:var(--accent);color:#fff;border:0}
.tj-ai h3{color:#fff}
.tj-ai .tj-muted,.tj-ai small{color:rgba(255,255,255,.82)}
.tj-ai .tj-tabs.mini button{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.tj-ai .tj-tabs.mini button.on{background:#fff;color:var(--accent)}
.tj-ai .tj-actlist li{border-bottom-color:rgba(255,255,255,.22)}
.tj-ai .tj-actlist li:hover b{color:#fff;text-decoration:underline}
.tj-ai .tj-actlist small{color:rgba(255,255,255,.82)}
.tj-ai .tj-actlist .sev,.tj-ai .tj-actlist .sev.crit,.tj-ai .tj-actlist .sev.warn,.tj-ai .tj-actlist .sev.info{background:rgba(255,255,255,.7)}
/* Up is green and down is red here too — in tints light enough to read on the accent. */
.tj-ai .tj-actlist li.up .sev{background:#6ee7a0} .tj-ai .tj-actlist li.up b,.tj-ai .tj-actlist li.up:hover b{color:#8df0b6}
.tj-ai .tj-actlist li.down .sev{background:#ff8f80} .tj-ai .tj-actlist li.down b,.tj-ai .tj-actlist li.down:hover b{color:#ffab9f}
.tj-ai .tj-actlist li.warn .sev{background:#ffd27a}
.tj-ai .tj-chip{background:rgba(255,255,255,.2);color:#fff}
.tj-askchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tj-askchips button{font:inherit;font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer}
.tj-askchips button:hover{background:rgba(255,255,255,.16)}
.tj-askchips button.on{background:#fff;color:var(--accent);border-color:#fff;font-weight:700}
.tj-askans{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.14);display:grid;gap:5px;font-size:13.5px;line-height:1.55}
/* Narrow desktop / tablet: still twelve columns, but six tiles across would be 120px each and a
   rupee figure at 22px does not fit that. Tiles go four across, the 5/7 pair and the thirds go
   two across. !important because the width is an inline style. Bounded below at 821px rather than
   left open: these are attribute selectors, which outrank the phone block's bare-class "everything
   takes the row" rule however late that appears, and a span of 6 forced a two-column phone grid to
   grow four implicit columns. */
@media(min-width:821px) and (max-width:1100px){
  .tj-dashgrid>.tj-widget[style*="span 2"]{grid-column:span 3!important}
  .tj-dashgrid>.tj-widget[style*="span 4"],.tj-dashgrid>.tj-widget[style*="span 5"],
  .tj-dashgrid>.tj-widget[style*="span 7"]{grid-column:span 6!important}
}
/* Table toolbar (search + sort dropdown) */
.tj-tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tj-sortsel{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.tj-sortsel select{padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer}

.tj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);max-width:640px}
.tj-card h3{margin:0 0 4px;font-size:16px}
.tj-card .sub{color:var(--muted);font-size:12.5px;margin:0 0 16px}

.tj-tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.tj-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.tj-table thead th{text-align:start;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;padding:11px 14px;border-bottom:1.5px solid var(--border);background:var(--surface-2);white-space:nowrap}
.tj-app[data-theme="dark"] .tj-table thead th{color:var(--text);background:color-mix(in srgb,var(--surface-2) 72%,#000);border-bottom-color:color-mix(in srgb,var(--border) 55%,var(--text))}
.tj-table th.num,.tj-table td.num{text-align:end;font-variant-numeric:tabular-nums}
.tj-table td.num,.tj-table td.tj-amt{font-weight:700;color:var(--text)}   /* amounts stand out (bold) like prototype .money */
.tj-table td.num.muted{font-weight:400;color:var(--muted)}                 /* secondary numbers (cost/rate) stay light */
.tj-table th.end,.tj-table td.end{text-align:end}
.tj-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.tj-table tfoot td{padding:12px 14px;border-top:2px solid var(--border);vertical-align:middle;color:var(--text)}
.tj-table tbody tr:last-child td{border-bottom:0}
.tj-table tbody tr:hover{background:var(--surface-2)}
/* Item picker (ItemPicker.razor): type to find a line's item */
.tj-ipick{position:relative}
.tj-ipick-in{width:100%;padding:7px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text);font:inherit}
.tj-ipick-in:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.tj-ipick-list{position:fixed;z-index:300;max-height:300px;overflow-y:auto;padding:4px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.tj-ipick-opt{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px}
.tj-ipick-opt .nm{flex:1;min-width:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.tj-ipick-opt .cd{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tj-ipick-opt .st{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tj-ipick-opt .st.out{color:var(--neg)}
.tj-ipick-opt:hover{background:var(--surface-2)}
.tj-ipick-opt.on,.tj-ipick-opt.on:hover{background:var(--accent-soft)}
.tj-ipick-opt.cur .nm::after{content:" ✓";color:var(--pos)}
.tj-ipick-empty{padding:10px;color:var(--muted);font-size:12.5px}
/* TjTable row selection */
.tj-table .tj-selcol{width:38px;text-align:center}
.tj-table .tj-selcol input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
.tj-table tbody tr.tj-picked,.tj-table tbody tr.tj-picked:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tj-table td.muted{color:var(--muted)}
.tj-table td.num.pos{color:var(--pos);font-weight:600}
.tj-table td.num.neg{color:var(--neg);font-weight:600}
.tj-table .dc{font-size:11px;font-weight:500}
.empty{padding:30px;text-align:center;color:var(--muted)}

/* A column header has to fit its column, which is how "IT" came to stand for internal transfers
   with nobody able to guess it. Set TjCol.Hint and the header grows this mark, which says the whole
   thing on hover, on keyboard focus, or on a tap — a title attribute does none of the last two. The
   th keeps the title as well, for anyone reading with the keyboard off and a mouse that hovers. */
.tj-hint{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-inline-start:5px;vertical-align:middle;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);
  font-size:9.5px;font-weight:700;line-height:1;letter-spacing:0;text-transform:none;cursor:help}
.tj-hint:hover,.tj-hint:focus{border-color:var(--accent);color:var(--accent);outline:none}
.tj-hint-tip{position:absolute;top:calc(100% + 7px);inset-inline-start:50%;transform:translateX(-50%);
  width:max-content;max-width:230px;white-space:normal;text-align:start;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:9px;
  padding:7px 10px;font-size:11.5px;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;
  box-shadow:0 10px 26px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .1s ease;z-index:70}
.tj-hint:hover .tj-hint-tip,.tj-hint:focus .tj-hint-tip{opacity:1}
/* A right-hand column's note hangs off the edge of the table if it is centred on the mark. */
.tj-table th.end .tj-hint-tip{inset-inline-start:auto;inset-inline-end:-6px;transform:none}

/* reusable table engine (TjTable) */
.tj-table th.tj-sort{cursor:pointer;user-select:none}
.tj-table th.tj-sort:hover{color:var(--accent)}
.tj-table .tj-sa{font-size:9px;margin-inline-start:4px;color:var(--accent);font-weight:700}
tr.tj-gsrow th{padding:8px 8px 4px;background:var(--surface)}
.tj-gs{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--sm);padding:0 12px}
.tj-gs input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;padding:9px 0;color:var(--text);outline:none}
tr.tj-frow th{padding:6px 8px;background:var(--surface);border-bottom:1px solid var(--border)}
tr.tj-frow input,tr.tj-frow select{width:100%;box-sizing:border-box;font:inherit;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;padding:5px 8px;border:1px solid var(--border);border-radius:var(--sm);background:var(--surface-2);color:var(--text);outline:none}
tr.tj-frow input:focus,tr.tj-frow select:focus{border-color:var(--accent);background:var(--surface)}
.tj-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px 2px;flex-wrap:wrap;font-size:13px}
/* Error strip. Every screen reports a failure as .tj-alert — 46 of them — and this rule was never
   written, so all of it came out as bare text wedged between the page title and the form: the one
   thing on the page that must not be missed was the one thing that looked like nothing. */
.tj-alert{background:var(--neg-soft);border:1px solid color-mix(in srgb,var(--neg) 45%,transparent);color:var(--neg);padding:10px 13px;border-radius:var(--sm);font-size:13px;font-weight:600;line-height:1.55;margin:0 0 14px}
.tj-alert b,.tj-alert a{color:inherit}
/* Payment-due warning — deliberately loud, sits above every page while the grace period runs. */
.tj-duebar{background:var(--neg);color:#fff;padding:10px 16px;border-radius:10px;margin:0 0 14px;font-size:13.5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tj-duebar b{color:#fff}
/* A platform admin is working in this account (support / impersonation) — on every page until it ends. */
.tj-supportbar{background:var(--warn-soft);color:var(--text);border:1px solid var(--warn);padding:10px 16px;border-radius:10px;margin:0 0 14px;font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tj-supportbar button{margin-inline-start:auto;padding:5px 12px;font-size:12.5px}
.tj-duebar a{color:#fff;font-weight:700;text-decoration:underline;margin-inline-start:auto}
.tj-pgleft{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;flex-wrap:wrap}
.tj-pgleft select{padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit}
.tj-pgnums{display:flex;align-items:center;gap:8px}
.tj-pgnums button{min-width:34px;height:34px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.tj-pgnums button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.tj-pgnums button:disabled{opacity:.4}

.tj-who{display:flex;align-items:center;gap:10px}
/* The column that carries words gets a share of the row before the figure columns divide the
   rest; without it the name was whatever was left over. Set on the th, which sizes the column. */
.tj-table th.tj-name{width:30%;min-width:240px}
/* Under a quantity box that was typed past what the bill or invoice has left. */
.tj-overmsg{font-size:11px;color:var(--neg);font-weight:600;text-align:end;max-width:220px;margin:4px 0 0 auto;line-height:1.35}
.tj-ini{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0}
.tj-ini.emoji{font-size:16px}
/* An item's own picture in the same square the initials/emoji use, so a list with pictures and one
   without line up exactly. Cropped, never squashed. */
.tj-ini-img{object-fit:cover;background:var(--surface-2)}
.tj-who b{font-weight:600;display:block}.tj-who span{font-size:11.5px;color:var(--muted)}
.tj-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap;margin-inline-start:6px}
.c-cust{background:var(--pos-soft);color:var(--pos)} .c-supp{background:var(--warn-soft);color:var(--warn)}
.c-both{background:var(--accent-soft);color:var(--accent-strong)}
.c-done{background:var(--pos-soft);color:var(--pos)} .c-pend{background:var(--warn-soft);color:var(--warn)}
/* A counter sale in the Sales list: told from a credit customer's invoice at a glance. */
.tj-chip.c-counter{background:var(--accent-soft);color:var(--accent-strong);font-size:10.5px;padding:1px 7px;margin-inline-start:4px;white-space:nowrap}
.c-stock{background:var(--neg-soft);color:var(--neg)}
.c-cust{background:var(--pos-soft);color:var(--pos)} .c-supp{background:var(--warn-soft);color:var(--warn)}
.c-info{background:var(--accent-soft);color:var(--accent-strong)}
/* Stock list → Sales trend: a six-point line and, under it, the mark that names its last step. The line
   takes the neutral ink — it is a shape, not a verdict; up or down is the chip's to say, with an
   arrow beside the colour. Stacked and kept narrow: this table has no width to give away, so the
   filter box under the heading is held to the column rather than to its longest word. */
.tj-saletrend{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap;vertical-align:middle}
.tj-spark{display:block;flex:none;color:var(--accent-strong);overflow:visible}
.tj-saletrend .tj-chip{margin-inline-start:0;padding:1px 7px;font-size:10.5px}
.c-flat{background:var(--surface-2);color:var(--muted)}
.tj-table td.tj-trendcol{white-space:nowrap}
/* The Inventory list's two reorder columns: the header wraps onto two lines so they cost 90px each, not 150 — ten figure columns plus these two still have to fit a 1440 window. */
.tj-table th.tj-reorder{white-space:normal;line-height:1.15;width:90px;max-width:100px}
.tj-table td.tj-reorder{white-space:nowrap}
tr.tj-frow th.tj-trendcol select{max-width:78px;padding-inline:5px}
/* Accent reference chip (codes/refs) — matches prototype .refchip */
.tj-refchip{display:inline-block;font-weight:700;font-size:11.5px;color:var(--accent-strong);background:var(--accent-soft);padding:2px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.tj-dethead .tj-chip{margin-inline-start:0}
.tj-dot{color:var(--faint);margin:0 5px}
.tj-muted{color:var(--muted)}
.tj-unit{text-transform:uppercase;font-weight:600;color:var(--muted)}
.tj-sum{display:flex;flex-direction:column;gap:9px;font-size:13px;margin-top:4px}
.tj-sum .row{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted)}
.tj-sum .row>span:first-child{flex-shrink:0}
.tj-sum .row b,.tj-sum .row .num{color:var(--text);font-weight:600;text-align:end}
.tj-sum .row .tj-chip{margin-inline-start:0}
.tj-sum .grand{border-top:1px dashed var(--border);padding-top:11px;margin-top:3px;font-size:17px;font-weight:700;color:var(--text)}
.tj-sum .grand>span:first-child{color:var(--text)}
.tj-sum .grand .num{color:var(--accent-strong);font-weight:800}
.tj-act{display:inline-flex;gap:6px;justify-content:flex-end}
.tj-act button{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:13px}
.tj-act button:hover{border-color:var(--accent);color:var(--accent)}
.tj-act button.del:hover{border-color:var(--neg);color:var(--neg)}
/* Row-action overflow: inline icons on wide screens; a ⋯ button + popover when space runs out. */
.tj-actwrap{position:relative;display:inline-flex;justify-content:flex-end}
.tj-actwrap .tj-actpop{display:contents}
.tj-actmore{display:none;width:30px;height:30px;border-radius:7px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.tj-actmore:hover{border-color:var(--accent);color:var(--accent)}
.tj-actbackdrop{position:fixed;inset:0;z-index:20}
/* ActionsMenu (TjTable, the stock list): the row's buttons behind one ⋯ at every width. The menu is
   drawn outside the table and fixed where the ⋯ was pressed — hung inside, the table's scroll
   frame would clip it on the last rows. Its rows are a card menu's: the icon, then the button's
   title. It opens leftward from the press (rightward in a right-to-left language), and never so
   low that it leaves the window. */
.tj-actwrap-menu .tj-actmore{display:inline-flex;align-items:center;justify-content:center}
.tj-actwrap-menu .tj-actmore.open{border-color:var(--accent);color:var(--accent)}
.tj-actfloat{position:fixed;z-index:40;top:min(calc(var(--y) + 16px),calc(100vh - 290px));left:var(--x);transform:translateX(calc(-100% + 18px));
    min-width:190px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.tj-actfloat:dir(rtl){transform:translateX(-18px)}
.tj-actfloat.mid{top:30vh;left:50vw;transform:translateX(-50%)}
.tj-actfloat .tj-act{display:flex;flex-direction:column;gap:2px}
.tj-actfloat .tj-act button{width:100%;height:auto;display:flex;align-items:center;gap:10px;justify-content:flex-start;
    padding:9px 10px;border:0;background:none;font-size:14px;border-radius:8px}
.tj-actfloat .tj-act button::after{content:attr(title);color:var(--text);font-size:13px;font-weight:600}
.tj-actfloat .tj-act button:hover{background:var(--surface-2)}
.tj-actfloat .tj-act button.del::after{color:var(--neg)}
/* PinActions (TjTable, the stock list): a table wider than its frame keeps its Actions column — and
   the search / sort bar above it — in view, and the columns in between scroll under them. Only
   above the card breakpoint: a card has no columns to scroll. The hairline on the pinned cell's
   inner edge shows only while something is hidden under it (a scroll-driven animation; a browser
   without one simply has no hairline). */
@media (min-width:921px){
    .tj-pinact{container-type:inline-size}
    .tj-pinact .tj-table thead th:last-child:not([colspan]),
    .tj-pinact .tj-table tbody td:last-child:not(.empty){position:sticky;inset-inline-end:0;z-index:1}
    .tj-pinact .tj-table tbody td:last-child:not(.empty){background:var(--surface)}
    .tj-pinact .tj-table tbody tr:hover td:last-child:not(.empty){background:var(--surface-2)}
    .tj-pinact .tj-table tbody tr.tj-picked td:last-child:not(.empty){background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
    .tj-pinact tr.tj-gsrow .tj-tbar{position:sticky;inset-inline-start:8px;width:calc(100cqw - 16px);box-sizing:border-box}
    @supports (animation-timeline:scroll()){
        .tj-pinact .tj-table thead th:last-child:not([colspan]),
        .tj-pinact .tj-table tbody td:last-child:not(.empty){animation:tj-pinedge linear both;animation-timeline:scroll(nearest inline)}
        .tj-pinact .tj-table thead th:last-child:not([colspan]):dir(rtl),
        .tj-pinact .tj-table tbody td:last-child:not(.empty):dir(rtl){animation-name:tj-pinedge-rtl}
    }
}
@keyframes tj-pinedge{from,97%{box-shadow:inset 1px 0 0 var(--border),-8px 0 8px -8px color-mix(in srgb,var(--text) 26%,transparent)}to{box-shadow:none}}
@keyframes tj-pinedge-rtl{from,97%{box-shadow:inset -1px 0 0 var(--border),8px 0 8px -8px color-mix(in srgb,var(--text) 26%,transparent)}to{box-shadow:none}}
/* Card mode (TjTable only, via .tj-cards): below 920px every row becomes a card — the first
   cell is the card header, other cells show "label · value" lines, and actions live behind a ⋯
   in the card's top-right corner that opens an app-style dropdown menu. The table (and its
   horizontal scrollbar) is gone entirely on small screens. */
/* The Filters button and its sheet exist for the card list only: a wide table filters from the row under its headings. */
.tj-filterbtn,.tj-fsheet{display:none}
@media (max-width:920px){
    .tj-cards .tj-filterbtn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
    .tj-cards .tj-filterbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}
    .tj-cards .tj-fsheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
    .tj-cards .tj-fitem{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:11px;font-weight:600;color:var(--muted)}
    .tj-cards .tj-fitem input,.tj-cards .tj-fitem select{width:100%;box-sizing:border-box;font:inherit;font-size:13px;font-weight:500;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);outline:none}
    .tj-cards .tj-fitem input:focus,.tj-cards .tj-fitem select:focus{border-color:var(--accent);background:var(--surface)}
    .tj-cards .tj-fclear{grid-column:1 / -1;justify-self:start;padding:4px 2px;border:0;background:none;color:var(--accent-strong);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline}
    .tj-cards{overflow:visible;border:0;border-radius:0;background:transparent}
    .tj-cards .tj-table{min-width:0}
    .tj-cards .tj-table,.tj-cards .tj-table thead,.tj-cards .tj-table tbody,
    .tj-cards .tj-table tbody tr,.tj-cards .tj-table tbody td{display:block;width:100%;box-sizing:border-box}
    .tj-cards .tj-table thead tr{display:none}
    .tj-cards .tj-table thead tr.tj-gsrow,.tj-cards .tj-table thead tr.tj-gsrow th{display:block}
    .tj-cards .tj-table thead tr.tj-gsrow th{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:8px}
    .tj-cards .tj-table tbody tr{position:relative;border:1px solid var(--border);border-radius:12px;
        background:var(--surface);margin-top:10px;padding:2px 0 6px}
    .tj-cards .tj-table tbody tr:hover{background:var(--surface)}

    /* label left, value(s) clustered right (auto-margin after the label, small gap between parts) */
    .tj-cards .tj-table tbody td{display:flex;align-items:center;gap:6px;padding:6px 13px;border-bottom:0;text-align:end}
    .tj-cards .tj-table tbody td::before{content:attr(data-label);color:var(--muted);font-size:10.5px;
        font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:start;flex-shrink:0;
        margin-inline-end:auto}

    /* first cell = card header: no label, left-aligned, separated from the detail lines */
    .tj-cards .tj-table tbody td:first-child:not(.empty){justify-content:flex-start;text-align:start;gap:10px;
        font-size:14px;padding:11px 13px;padding-inline-end:52px;border-bottom:1px solid var(--border);margin-bottom:4px}
    .tj-cards .tj-table tbody td:first-child:not(.empty)::before{content:none}

    .tj-cards .tj-table tbody td.empty{display:block;text-align:center}
    .tj-cards .tj-table tbody td.empty::before{content:none}

    /* actions: ⋯ pinned to the card's top-right, opening a dropdown menu (icon + label rows) */
    .tj-cards .tj-table tbody td:has(> .tj-actwrap){position:absolute;top:7px;inset-inline-end:7px;
        width:auto;padding:0}
    .tj-cards .tj-table tbody td:has(> .tj-actwrap)::before{content:none}
    .tj-cards .tj-actmore{display:inline-flex;align-items:center;justify-content:center}
    .tj-cards .tj-actwrap .tj-actpop{display:none}
    .tj-cards .tj-actwrap.open .tj-actmore{display:inline-flex}
    .tj-cards .tj-actwrap.open .tj-actpop{display:block;position:absolute;inset-inline-end:0;top:calc(100% + 6px);
        z-index:40;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
        padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
    .tj-cards .tj-actwrap.open .tj-act{display:flex;flex-direction:column;gap:2px}
    .tj-cards .tj-actwrap.open .tj-act button{width:100%;height:auto;display:flex;align-items:center;gap:10px;
        justify-content:flex-start;padding:9px 10px;border:0;background:none;font-size:14px;border-radius:8px}
    .tj-cards .tj-actwrap.open .tj-act button::after{content:attr(title);color:var(--text);font-size:13px;font-weight:600}
    .tj-cards .tj-actwrap.open .tj-act button:hover{background:var(--surface-2)}
    .tj-cards .tj-actwrap.open .tj-act button.del::after{color:var(--neg)}
}

/* data-import wizard */
.imp-page .tj-card{max-width:none}
.imp-steps{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.imp-step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);
    padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.imp-step .n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
    background:var(--surface-2);font-size:11px;font-weight:800}
.imp-step.on{color:#fff;background:var(--accent-strong,#37434f);border-color:transparent}
.imp-step.on .n{background:rgba(255,255,255,.22);color:#fff}
.imp-step.done{color:var(--pos);border-color:var(--pos);cursor:pointer}
.imp-step.done:hover{background:color-mix(in srgb,var(--pos) 10%,var(--surface))}
.imp-step.done .n{background:color-mix(in srgb,var(--pos) 15%,transparent);color:var(--pos)}
.imp-sep{flex:0 0 18px;height:1.5px;background:var(--border)}
.imp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.imp-card{display:flex;flex-direction:column;transition:border-color .15s, transform .15s}
.imp-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.imp-card h3{margin:0 0 4px;display:flex;align-items:center;gap:9px}
.imp-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-2);font-size:17px}
.imp-card .sub{min-height:34px}
.imp-card > div:last-child{margin-top:auto!important}
.sm-link{text-decoration:none;display:inline-flex;align-items:center;padding:8px 14px}
.imp-map{width:100%;border-collapse:collapse;font-size:13px}
.imp-map th{text-align:start;font-size:11px;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1.5px solid var(--border)}
.imp-map td{padding:8px 10px;border-bottom:1px solid var(--border)}
.imp-map select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;min-width:180px}
.imp-grid td{padding:4px 6px!important;vertical-align:top}
/* Width comes from the column (DataImport ColumnLayout), not from the input. */
.imp-cell{width:100%;min-width:0;padding:6px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text);font:inherit}
.imp-cell.num{text-align:end;font-variant-numeric:tabular-nums}
.imp-wrap{display:block;resize:vertical;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
/* Header stays on top while scrolling down; # and the row's name stay put while scrolling across.
   Stuck cells need a solid ground or the columns sliding under them show through. */
.imp-grid thead th{position:sticky;top:0;z-index:2;background:var(--surface-2)}
.imp-grid th.num{text-align:end}
.imp-grid .imp-stick{position:sticky;z-index:1;background:var(--surface)}
.imp-grid thead th.imp-stick{z-index:3;background:var(--surface-2)}
.imp-grid tr.imp-fail td.imp-stick{background:color-mix(in srgb,var(--neg) 7%,var(--surface))}
.imp-grid td.imp-stick + td.imp-stick,.imp-grid th.imp-stick + th.imp-stick{box-shadow:inset -1px 0 0 var(--border)}
.imp-cell:hover{border-color:var(--border)}
.imp-cell:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
tr.imp-fail td{background:color-mix(in srgb,var(--neg) 7%,transparent)}
.imp-del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:4px 8px;border-radius:6px}
.imp-del:hover{color:var(--neg);background:var(--surface-2)}

/* party ledger — these two are full-bleed, unlike the 640px form cards */
.led-bar,.led-id{max-width:100%}
.led-bar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:14px 16px;margin-bottom:14px}
.led-bar .tj-field{margin:0}
.led-pick{flex:1 1 240px;min-width:200px}
.led-range{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.led-range button{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:20px;cursor:pointer}
.led-range button:hover{border-color:var(--accent);color:var(--accent)}
.led-range button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.led-custom{display:flex;gap:6px;align-items:center}
.led-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}

.led-id{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 20px;margin-bottom:14px}
.led-who{display:flex;align-items:center;gap:14px;min-width:0}
.led-av{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent-strong);
  display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0}
.led-who h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.2px}
.led-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:12.5px;color:var(--muted)}
.led-bal{text-align:end;flex-shrink:0}
.led-bal .cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--muted)}
.led-bal .amt{font-size:28px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-top:3px}
.led-bal .amt small{font-size:14px;font-weight:700;margin-inline-start:3px}

.led-mon td{background:var(--surface-2);font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);padding:7px 14px!important}
.led-edge td{background:var(--accent-soft);font-weight:800}
.led-edge td .dc{font-weight:700;font-size:11px;color:var(--muted)}
.led-run{font-weight:700}
.led-run .dc{font-size:11px;font-weight:600;color:var(--muted);margin-inline-start:3px}
.led-e{cursor:pointer}
@media(max-width:720px){ .led-bal{text-align:start;width:100%} .led-bar{align-items:stretch} }

/* report gallery — full-bleed, unlike the 640px form cards */
.rpt-gal{max-width:100%;margin-top:16px}
.rpt-searchwrap{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2);margin-bottom:4px}
.rpt-searchwrap:focus-within{border-color:var(--accent)}
.rpt-search{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;outline:none;padding:0}
.rpt-cat{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:20px 0 9px}
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.rpt-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;height:100%;text-align:start;
  padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s, transform .15s, box-shadow .15s}
.rpt-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.rpt-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rpt-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent-soft);font-size:17px}
.rpt-card .nm{font-size:13.5px;font-weight:700;letter-spacing:-.1px}
.rpt-card .ds{font-size:12px;line-height:1.45;color:var(--muted)}
.rpt-saved{position:relative}
.rpt-x{position:absolute;top:7px;inset-inline-end:7px;border:0;background:none;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;padding:2px 7px;border-radius:6px}
.rpt-x:hover{color:var(--neg);background:var(--surface-2)}
.rpt-none{color:var(--muted);font-size:13px;padding:18px 0}
.rpt-back{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font:inherit;
  font-size:12.5px;font-weight:600;padding:5px 13px;border-radius:20px;cursor:pointer;margin-bottom:9px}
.rpt-back:hover{border-color:var(--accent);color:var(--accent)}

/* master–detail report rows: a voucher, then its own lines under it */
.rpt-m td{font-weight:700;border-block-start:1px solid var(--border)}
.rpt-c td{color:var(--muted);font-weight:500;padding-block:7px}
/* No positional indent on the item cell: the blank leading cells already step the line rows in, and
   which column the item lands in shifts with the report (a return carries no due date). */
.rpt-tog{border:0;background:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;
  padding:0 6px 0 0;line-height:1}
.rpt-tog:hover{color:var(--accent)}
/* Printing shows the whole thing — the toggle is a screen affordance, not part of the report. */
@media print{ .rpt-tog{display:none} }

/* pager under a report table — screen only, print and CSV always carry every row */
/* Business tab: profile beside the investor register. The register is a table and wants the
   width; the profile is a short column of fields and does not. One column once there is no room
   for two, and the save row spans both because one button saves the whole tab. */
.set-two{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:16px;align-items:start}
.set-two .set-saverow{grid-column:1 / -1;display:flex;align-items:center;gap:10px}
@media (max-width:1000px){ .set-two{grid-template-columns:minmax(0,1fr)} }

/* Business investors */
.inv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px}
.inv-head h3{margin:0}
.inv-head .sub{margin:3px 0 0;font-size:12px;color:var(--muted);max-width:52ch}
.inv-switch{display:flex;align-items:flex-start;gap:9px;margin:12px 0 4px;cursor:pointer}
.inv-switch input{margin-top:2px}
.inv-switch b{display:block;font-size:13px}
.inv-switch em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}
.inv-table input,.inv-table textarea,.inv-table select{width:100%;padding:6px 8px;border:1px solid var(--border);
  border-radius:7px;background:var(--surface-2);color:var(--text);font:inherit}
.inv-table input:focus,.inv-table textarea:focus,.inv-table select:focus{border-color:var(--accent)}

/* The register carries the money now — amount, joined, into, capital, share — so it takes the whole
   width rather than half of it beside the profile. Eight columns in a 440px column clipped the names. */
.set-two .inv-card{grid-column:1 / -1}

/* Column widths: 1 name · 2 amount · 3 joined · 4 into · 5 capital · 6 share · 7 note · 8 remove.
   Fixed layout, shares of the table: sizing by content let the name eat every spare pixel while
   "Into" collapsed to 1% — a dropdown squeezed down to its arrow with the word inside unreadable.
   Each column now gets the room its control actually needs, and nothing steals from a neighbour. */
.inv-table{table-layout:fixed}
.inv-table th{white-space:normal}          /* two-word headers wrap instead of being cut */
.inv-table th:nth-child(1),.inv-table td:nth-child(1){width:19%}
.inv-table th:nth-child(2),.inv-table td:nth-child(2){width:12%}
.inv-table th:nth-child(3),.inv-table td:nth-child(3){width:13%}   /* a date + the 📅 */
.inv-table th:nth-child(4),.inv-table td:nth-child(4){width:10%}
.inv-table th:nth-child(5),.inv-table td:nth-child(5){width:11%}
.inv-table th:nth-child(6),.inv-table td:nth-child(6){width:9%}
.inv-table th:nth-child(7),.inv-table td:nth-child(7){width:21%}
.inv-table th:nth-child(8),.inv-table td:nth-child(8){width:5%}
/* Money and shares read down the column, so they line up on the digits. */
.inv-table td:nth-child(2) input,.inv-table td:nth-child(6) input{text-align:end;font-variant-numeric:tabular-nums}
.inv-table td:nth-child(2),.inv-table td:nth-child(5),.inv-table td:nth-child(6){font-variant-numeric:tabular-nums}
.inv-table td:nth-child(5),.inv-table td:nth-child(6) .inv-derived{text-align:end}
.inv-table td:nth-child(6) .inv-derived{display:block}
/* The date box is a control like the others, not a wider one that pushes the row sideways. */
.inv-table td:nth-child(3) input{width:100%;box-sizing:border-box;min-width:0}

/* One line while the note is short, growing to fit as it wraps — a fixed one-line box clips a
   two-line note and leaves it half-visible, which is worse than a slightly taller row.
   field-sizing does the growing where the browser has it; the drag handle and the scroll are the
   fallback everywhere else, so the text is always reachable either way. */
.inv-table textarea{resize:vertical;min-height:34px;max-height:110px;line-height:1.4;
  field-sizing:content;overflow:auto}
/* Narrow screen: the note is the field most likely to be long, so give it room to wrap rather
   than making the whole table scroll sideways for it. */
@media (max-width:1000px){ .inv-table textarea{min-height:56px} }

.inv-table tfoot td{font-weight:700;border-block-start:1px solid var(--border)}
.inv-derived{color:var(--muted)}
/* Manual mode: the shares do not add up to 100 yet. Save refuses until they do (or are all 0). */
.inv-off{color:var(--warn)}
/* Manual mode: what is left to share out, and the button that shares it. */
.inv-adjust{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:10px;font-size:12.5px;color:var(--muted)}

/* A draft row in a voucher list: dashed, because it is not a real voucher yet. */
.tj-chip.c-draft{background:transparent;color:var(--muted);border:1px dashed var(--muted)}

/* A voided voucher (Goods Receiving / Goods Transfer → Voided tab). It is still shown whole; what
   marks it is the chip beside its number and the panel that says when, by whom and why. */
.tj-chip.c-void{background:var(--neg-soft);color:var(--neg);border:1px solid color-mix(in srgb,var(--neg) 40%,transparent)}
.tj-voided{border:1px solid color-mix(in srgb,var(--neg) 40%,transparent);background:var(--neg-soft);border-radius:9px;
  padding:10px 12px;margin-bottom:12px;font-size:12.5px;line-height:1.5}
.tj-voided > div b{display:block;color:var(--neg);font-size:13px}
.tj-voided > div span{color:var(--muted)}
.tj-voided dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:8px 0 0}
.tj-voided dt{color:var(--muted)}
.tj-voided dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
/* The reason in the list: as much as fits a sensible column, the rest wraps rather than stretching the table. */
.tj-voidwhy{display:inline-block;max-width:34ch;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
/* Undoing a voucher asks why — the question, its box, and the buttons stacked in the modal's foot. */
.tj-mfoot.tj-undoask{flex-direction:column;align-items:stretch;gap:8px}

/* Draft notice on a voucher form — says plainly that nothing is in the books yet. */
.tj-draftbar{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}

/* Live password checklist on the user form — grey while a rule is unmet, green once it is. */
.tj-pwrules{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:3px}
.tj-pwrules li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.tj-pwrules li span{width:13px;text-align:center;font-size:11px}
.tj-pwrules li.met{color:#1f7a4d}

.rpt-pager{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 2px 2px;font-size:12.5px;border-block-start:1px solid var(--border);margin-block-start:8px}
.rpt-pager .tj-btn{padding:5px 11px;font-size:12.5px}
.rpt-pager select{padding:5px 9px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);color:var(--text);font:inherit;font-size:12.5px;outline:none}

/* toasts */
.tj-toasts{position:fixed;bottom:18px;inset-inline-end:18px;z-index:200;display:flex;flex-direction:column;gap:9px;max-width:min(380px,90vw)}
.tj-toast{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:11px;font-size:13px;font-weight:600;
    background:var(--surface);border:1.5px solid var(--border);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.22);
    cursor:pointer;animation:tj-toast-in .22s ease-out}
.tj-toast .ic{flex-shrink:0}
.tj-toast .x{margin-inline-start:auto;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:0 2px}
.tj-toast.error{border-color:var(--neg);background:var(--neg);color:#fff}
.tj-toast.error .x{color:rgba(255,255,255,.85)}
.tj-toast.success{border-color:var(--pos);background:color-mix(in srgb,var(--pos) 9%,var(--surface))}
.tj-toast.info{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
@keyframes tj-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* forms */

/* Every dropdown in the app, wherever it lands. Screens each styled their own selects
   (.tj-setrow, .sort-table, .imp-map, tr.tj-frow …), so any dropdown added somewhere new arrived
   as a raw browser control sitting next to styled ones — the investor "Into" column did exactly
   that. This is the floor: a plain element selector, so every existing rule still wins over it.
   The native arrow is left alone (appearance:none would strip it from the borderless selects too). */
select{padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  color:var(--text);font:inherit;font-size:12.5px;line-height:1.35;cursor:pointer;outline:none}
select:focus{border-color:var(--accent)}
select:disabled{opacity:.6;cursor:not-allowed}
/* A date box (TjDateInput): a text box in the business's date format, the browser's own date input
   lying unseen under it for its calendar, and a 📅 that opens that calendar.
   The text box takes the look of whatever form it sits in (.tj-field, .tj-setrow, .inv-table … style
   their inputs, and a single class is the least specific thing here, so they all win); these rules
   are the floor for a date box that sits in none of them — a filter bar, a table cell. */
.tj-date{position:relative;display:inline-flex;vertical-align:middle;min-width:0;max-width:100%}
.tj-date.fill{flex:1 1 0}
.tj-field .tj-date,.tj-mbody .tj-date,.inv-table .tj-date,.tj-date.fill{display:flex}
.tj-date-text{width:11.5em;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  color:var(--text);font:inherit;font-size:13px;line-height:1.35;outline:none;min-width:0;max-width:100%;
  font-variant-numeric:tabular-nums}
.tj-date-text:focus{border-color:var(--accent)}
.tj-date-text::placeholder{color:var(--muted);opacity:.7}
.tj-date-text:disabled{opacity:.6;cursor:not-allowed}
/* Room for the 📅, whatever padding the form gave the box (span + input: to outrank
   ".tj-setrow input[type=text]", the most specific of them). */
span.tj-date input.tj-date-text{padding-inline-end:32px}
.tj-date.fill .tj-date-text,.tj-setrow .tj-date .tj-date-text{width:100%}
.tj-setrow > .tj-date{flex-shrink:0}
/* The real date input: the size of the box, so its calendar opens where the box is — and out of
   sight and out of reach, until a touch screen brings it to the front (below). Two classes and an
   element: more specific than any form's "input" rule, which would otherwise dress it as a second box. */
.tj-date input.tj-date-native{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;padding:0;border:0;
  opacity:0;pointer-events:none;color-scheme:light}
.tj-app[data-theme="dark"] .tj-date input.tj-date-native{color-scheme:dark}
.tj-date .tj-date-btn{position:absolute;inset-inline-end:3px;top:50%;transform:translateY(-50%);border:0;background:none;
  cursor:pointer;font-size:13px;line-height:1;padding:5px;border-radius:6px;opacity:.7}
.tj-date .tj-date-btn:hover{background:var(--accent-soft);opacity:1}
.tj-date .tj-date-btn:disabled{cursor:not-allowed;opacity:.4}
/* A finger: nobody types a date on a phone when the phone has a date wheel. The real input comes to
   the front, so a tap anywhere on the box opens it; the box beneath still shows the date written
   the business's way. */
@media (pointer:coarse){
  .tj-date input.tj-date-native{pointer-events:auto;z-index:2}
}

.tj-field{margin-bottom:12px}
.tj-field label,.tj-mbody label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.tj-field input,.tj-field select,.tj-field textarea,.tj-mbody input,.tj-mbody select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:13px;font-family:inherit;outline:none}
.tj-field input:focus,.tj-field select:focus,.tj-mbody input:focus,.tj-mbody select:focus{border-color:var(--accent)}
/* A password box's 👁 (🙈 to hide again) sits inside the box's far end; the box keeps room for it.
   After the field rules above, so its padding is the one that holds. */
.pw-wrap{position:relative}
.tj-field .pw-wrap input,.tj-mbody .pw-wrap input{padding-inline-end:42px}
.pw-wrap .pw-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;
  font-size:15px;line-height:1;padding:5px 6px;border-radius:7px;color:var(--muted)}
.pw-wrap .pw-eye:hover{background:var(--accent-soft);color:var(--text)}
/* An amount typed straight into a table row (Settings → Targets): the field look, right-aligned. */
.tj-cellinput{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;text-align:end;outline:none}
.tj-cellinput:focus{border-color:var(--accent)}
.tj-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* A settings card holding a table rather than a column of rows. Cards cap at 640px, which is right
   for label-and-control rows and far too narrow for TjTable (560px minimum on its own). The card
   already draws a border, so the table's own wrapper drops its frame — one box, not two. */
/* Settings cards are rows of "what it does" beside its control. At the global 640px cap the
   descriptions wrapped to three lines and the controls crowded them; 960px gives both room. Not full
   width: on a wide screen a label and its dropdown a metre apart are harder to read, not easier. */
.set-page .tj-card{max-width:960px}
.tj-card.set-wide{max-width:100%}
.tj-card.set-wide .tj-tablewrap{border:0;box-shadow:none;background:transparent;border-radius:0}
.tj-card.set-wide .tj-table{margin-top:6px}

/* Settings tabs — General · Inventory · Business · Branches. One section is open at a time; these
   are buttons, not links, because a link here navigated away instead of switching. */
.set-tabs{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:16px;border-bottom:1.5px solid var(--border)}
.set-tabs button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;
  padding:9px 15px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap}
.set-tabs button:hover{color:var(--text)}
.set-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
@media print{ .set-tabs{display:none} }

.tj-setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.tj-setrow:last-child{border:0}
.tj-setrow .lbl b{display:block;font-weight:600;font-size:13.5px}
.tj-setrow .lbl span{font-size:12px;color:var(--muted)}
.tj-setrow select,.tj-setrow input[type=text],.tj-setrow input[type=number]{width:auto;min-width:170px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;outline:none}
.tj-setrow input:focus,.tj-setrow select:focus{border-color:var(--accent)}
/* A long explanation used to win the row's space: the control shrank to its 170px floor and its own
   text was cut ("FIFO (oldest first" with the rest under the arrow). The explanation wraps instead;
   the control keeps the width its text needs. */
.tj-setrow > .lbl{flex:1 1 auto;min-width:0}
.tj-setrow > select,.tj-setrow > input,.tj-setrow > .switch{flex-shrink:0}
/* dependent sub-settings (e.g. series starts under Invoice numbering): indented with a guide line */
.tj-setrow.sub{margin-inline-start:8px;padding-inline-start:14px;border-inline-start:2.5px solid var(--border)}
.tj-setrow.sub .lbl b{font-size:13px}
.tj-setrow.sub input{font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* Per-screen table sort (Settings). Every other dropdown on this page is styled through
   .tj-setrow select — these sit in table cells instead, which matched nothing at all, so a column of
   raw browser dropdowns stood next to the styled one directly above them. */
.sort-table{max-width:720px;margin-top:6px}
/* .tj-table is built for the full-width list screens: it never goes below 560px and gives every row
   12px of air. Inside a 520px settings card that meant the table scrolled sideways AND each of the
   fourteen rows stood 56px tall — a short list of dropdowns reading like a report. */
.sort-table table{min-width:0}
.sort-table thead th{padding:7px 12px;font-size:10.5px}
.sort-table tbody td{padding:5px 12px;font-size:12.5px}
.sort-table th:last-child,.sort-table td:last-child{width:170px;text-align:end}
.sort-table select{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);color:var(--text);font:inherit;font-size:12px;cursor:pointer;outline:none}
.sort-table select:focus{border-color:var(--accent)}
.switch{position:relative;width:44px;height:25px;flex-shrink:0;display:inline-block}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch i{position:absolute;inset:0;background:var(--border);border-radius:20px;transition:.2s}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:19px;height:19px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::after{transform:translateX(19px)}
.hint{font-size:11.5px;color:var(--muted);margin:2px 0 0}
.ro{padding:9px 0;font-weight:700}
.saved{display:inline-block;margin-inline-start:10px;color:var(--pos);font-size:12.5px;font-weight:600}

/* modal */
.tj-overlay{position:fixed;inset:0;background:rgba(15,20,25,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.tj-modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.tj-mhead{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--border)}
.tj-mhead h3{margin:0;font-size:16px}
.tj-mhead .x{border:0;background:transparent;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.tj-mbody{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.tj-mbody .emoji-in{text-align:center;font-size:20px}
.tj-mfoot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border)}
/* The buttons under a form's summary (Reset · Save as Draft · Save…). They wrap rather than run
   past the card's edge, and the primary one takes the room that is left — a whole line of its own
   when the card is narrow. */
.tj-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tj-actions .tj-btn.primary{flex:1 1 150px;justify-content:center}

/* ===== narrow screens: phone and small tablet =====
   248px of a 390px screen is the screen, so below 820px the menu stops being a column at all: it
   leaves the flow and becomes a drawer over the page, opened by the same topbar button and shut by
   tapping the page, choosing a link, or pressing the button again.

   These rules are written as .tj-app[data-nav] rather than .tj-app, on purpose: the three desktop
   widths above are attribute selectors, which outrank a bare class no matter how late they appear.
   The previous version of this block did use the bare class and quietly lost every one of them. */
@media (max-width:820px){
  .tj-app[data-nav]{grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr)}
  /* grid-column:1/3 on the topbar was inventing a SECOND, implicit column in a one-column grid, and
     the page was landing in it — which is why the "mobile" layout still drew the menu squeezed into
     a column beside the content. 1/-1 spans whatever columns actually exist. */
  .tj-topbar{grid-column:1/-1;gap:8px;padding:0 10px;overflow:hidden}
  /* min-width:0 because a grid item's default floor is its content's minimum — one 560px table
     inside the page and the whole column grows past the screen, taking every field on it along. */
  .tj-main{grid-column:1/-1;padding:14px 12px;min-width:0}

  /* ---- the drawer ---- */
  .tj-app[data-nav] .tj-side{position:fixed;inset-block:56px 0;inset-inline-start:0;
    width:min(272px,82vw);padding:14px 12px;overflow-y:auto;z-index:70;background:var(--surface);
    border-inline-end:1px solid var(--border);border-block-end:0;box-shadow:0 0 40px rgba(0,0,0,.2);
    transform:translateX(-100%);transition:transform .18s ease}
  .tj-app[dir="rtl"][data-nav] .tj-side{transform:translateX(100%)}
  .tj-app[data-nav="full"] .tj-side{transform:none}
  .tj-app[data-nav="full"] .tj-navscrim{display:block;position:fixed;inset:56px 0 0;
    background:rgba(15,20,25,.45);z-index:65}
  /* Inside the drawer the menu is always the full menu — labels, left-aligned, generous rows.
     Hover means nothing on a touch screen, and without the last rule a narrow desktop window would
     still grow the shut drawer under the pointer, behind the scrim. */
  .tj-app[data-nav] .tj-navlabel{display:block}
  .tj-app[data-nav] .tj-navlink{justify-content:flex-start;padding:11px 12px}
  .tj-app[data-nav] .nv-tx{position:static;margin:0;background:none;border:0;padding:0;
    font-size:14px;box-shadow:none;opacity:1}
  .tj-app[data-nav="icons"]:not([data-navlock]) .tj-side:hover{width:min(272px,82vw);padding:14px 12px}
  .tj-navlock{display:none}

  /* ---- topbar ----
     Ten controls do not fit across 390px, so the bar keeps the ones that get used on a phone —
     the menu, search, and the avatar (the way out and Change password are in its menu) — and drops
     the rest. The business name and the language toggle are not lost: the name is on every
     screen's header, and the language is in Settings.

     Search is written as .tj-topbar .tj-search because the page-level .tj-search further down the
     file re-declares display:flex and was overriding the old "hide it below 820px" rule — so the
     one control that had been told to go was the one taking the whole bar. */
  /* The avatar stays: it is the way to Change password on a phone. */
  .tj-brand>div,div.tj-sync,.tj-bizchip,.tj-langtog{display:none}
  .tj-acct-menu{top:62px;inset-inline-end:10px}
  .tj-app .grow{display:none}   /* the slack belongs to the search box, not to a spacer */
  .tj-topbar .tj-search{display:flex;flex:1;min-width:0;margin:0;padding:7px 12px}
  /* The results hang below the search box, and on a phone the bar clips whatever overflows it —
     they were there, and invisible. Fixed to the window instead, the screen's width less its
     gutters, like the avatar's menu. */
  .tj-topbar .tj-gsr{position:fixed;top:62px;inset-inline:10px;width:auto;max-height:calc(100dvh - 80px)}

  /* ---- page ---- */
  /* A widget carries its width as an inline `grid-column:span N` in twelfths of a desktop row. On
     a phone there are two columns: a tile (span 2 or 3) goes two across, and everything wider — a
     chart, an ageing breakdown, a ranking — takes the row, because half a phone is too narrow for
     any of them. !important is the only thing that outranks the inline style, and matching on it
     is why these read as attribute substrings ("span 2" does not match "span 12"). */
  .tj-dashgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tj-dashgrid>.tj-widget{grid-column:span 2!important;min-width:0}
  .tj-dashgrid>.tj-widget[style*="span 2"],
  .tj-dashgrid>.tj-widget[style*="span 3"]{grid-column:span 1!important}
  .tj-dashgrid .tj-table{min-width:0}
  .tj-dashgrid .tj-tablewrap{overflow-x:auto}
  /* A 560-unit chart drawn across a phone is painted at about 0.6, which turns a 10px day label
     into 6px. The text is inside the drawing, so it cannot be told to stay put the way a stroke
     can — it has to be written bigger here to land at a readable size there. */
  svg[viewBox="0 0 560 180"] .cxt,svg[viewBox="0 0 560 360"] .cxt{font-size:17px}
  svg[viewBox="0 0 560 180"] .cxt.s,svg[viewBox="0 0 560 360"] .cxt.s{font-size:15px}
  /* minmax(160px,1fr) cannot go below 160px even when the screen has less to give, and a KPI whose
     figure will not wrap (a long plan name on Subscription) takes the track past the edge with it.
     min(160px,100%) lets the track shrink; min-width:0 lets the card inside it do the same. */
  .tj-kpis{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
  .tj-kpis>*{min-width:0}
  .tj-kpi .val,.tj-kpi .lbl{overflow-wrap:anywhere}
  .tj-row2{grid-template-columns:minmax(0,1fr)}
  .tj-formgrid{grid-template-columns:minmax(0,1fr)!important}
  .tj-formgrid>*,.tj-row2>*{min-width:0}
  .tj-head h1{font-size:19px}
  .tj-card{padding:15px}
  .tj-overlay{padding:10px}
  .tj-modal{max-width:100%;max-height:calc(100dvh - 20px)}
  .tj-mhead,.tj-mbody,.tj-mfoot{padding-inline:14px}
  .tj-mfoot .tj-btn,.tj-mfoot button.ghost,.tj-mfoot a.ghost{flex:1;justify-content:center}
  /* A settings row is "what it does" beside its control. At this width that leaves the control at
     its 170px floor and the sentence on four lines, one overlapping the other. Stacked, both fit. */
  .tj-setrow{flex-direction:column;align-items:stretch;gap:9px}
  .tj-setrow>.switch{align-self:flex-start}
  .tj-setrow select,.tj-setrow input[type=text],.tj-setrow input[type=number]{width:100%;min-width:0}
  .set-page .tj-card,.tj-card{max-width:100%}
  /* iOS zooms the whole page in whenever a focused control's text is under 16px, and then leaves it
     zoomed. Only the fields people actually type into — table cells stay compact. */
  .tj-field input,.tj-field select,.tj-field textarea,
  .tj-mbody input,.tj-mbody select,.tj-search input{font-size:16px}
}

/* The last thing to go. Two KPIs across still read at 390px — one across would make the strip
   longer than the list it is describing — so only the guide button leaves. */
@media (max-width:560px){ .tj-guidebtn{display:none} }

/* Between a phone and a desktop the topbar is still one item too full — on a 1024px laptop the
   language toggle was being clipped mid-word. The wordmark goes first: the logo next to it is
   already saying the same thing. */
@media (max-width:1100px){ .tj-brand>div{display:none} }

/* Print — clean invoice / ledger, app chrome hidden */
.print-only{display:none}
.tj-printhead{margin:0 0 16px}
.tj-printhead h2{margin:0;font-size:20px}
.tj-printhead div{color:var(--muted);font-size:13px;margin-top:2px}
@media print{
  .tj-topbar,.tj-side,.tj-langtog,.tj-sync,.tj-icbtn,.tj-avatar,.tj-search,.tj-tabs,.tj-act,.tj-overlay,nav,.tj-alert,.no-print,button,a.ghost{display:none!important}
  .tj-app{display:block!important;background:#fff!important;color:#000!important}
  .tj-main{overflow:visible!important;padding:0!important}
  .tj-page,.tj-head{padding:0!important}
  .tj-head{border:0;margin-bottom:10px}
  .print-only{display:block!important}
  .tj-card{box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid;max-width:100%!important}
  .tj-table th,.tj-table td,.tj-sum,.tj-head h1,.tj-head p{color:#000!important}
  a{text-decoration:none!important;color:#000!important}
  @page{margin:14mm}
}

/* Item page → Where it came from: the shelf by whose lot it is, and the sources by kind. */
.item-sources{--src1:#2f6fb3;--src2:#1f7a4d;--src3:#b0672a;--src4:#7a55a8;--src5:#7d8794;--src-hatch:#c3c9d2}
:root[data-theme="dark"] .item-sources{--src1:#6aa6e6;--src2:#55c08a;--src3:#e0a06a;--src4:#b094dc;--src5:#8c96a4;--src-hatch:#465061}
.src-shelf{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}
.src-shelf-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;margin-bottom:8px}
.src-bar{display:flex;gap:2px;height:22px;border-radius:7px;overflow:hidden}
.src-bar i{display:block;min-width:4px}
.src-c0{background:var(--src1)} .src-c1{background:var(--src2)} .src-c2{background:var(--src3)} .src-c3{background:var(--src4)} .src-c4{background:var(--src5)}
.src-hatch{background:repeating-linear-gradient(45deg,var(--src-hatch) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px var(--src-hatch)}
.src-legend{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:9px;font-size:12.5px}
.src-legend span{display:inline-flex;align-items:center;gap:6px}
.src-dot{width:10px;height:10px;border-radius:3px;flex:none}
.src-table td{white-space:nowrap}
.src-table td small{margin-inline-start:4px}
.src-table .src-spark + small{display:block;margin:0}
.src-share{display:inline-flex;align-items:center;gap:8px}
.src-share b{font-weight:600;min-width:34px;text-align:end;font-variant-numeric:tabular-nums}
.src-trk{width:64px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;display:inline-block}
.src-trk i{display:block;height:100%;background:var(--accent)}
.tj-chip.src-cheap,.tj-chip.src-chg{font-size:10.5px;padding:1px 7px;margin-inline-start:6px;white-space:nowrap}
.tj-chip.src-up{background:var(--neg-soft,rgba(192,57,43,.14));color:var(--neg)}
.src-spark{width:84px;height:22px;display:inline-block;vertical-align:middle;stroke:var(--muted)}
.src-spark.up{stroke:var(--neg)} .src-spark.down{stroke:var(--pos)}
.src-val{display:block}
/* The stock ledger's page: what was on the shelf before its first line and after its last. */
.tj-table tr.led-carry td{background:var(--surface-2);font-size:12.5px}
.src-more{display:block;width:100%;margin-top:8px;padding:7px 12px;border:1px dashed var(--border);border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.src-more:hover{color:var(--text);border-color:var(--accent)}