/* Qivity Accounts — styles.
 *
 * The design tokens are copied VERBATIM from Qivity CRM / Qivity CSM so the
 * products read as one platform: same font, radii, accent and dark/light
 * palettes. Do not invent a colour here — use an existing token.
 *
 * Copied rather than imported: each product deploys independently and must
 * not fetch its appearance from another host at runtime.
 */

:root{--font:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;--r:10px;--rlg:14px;--rsm:7px;--tr:.18s cubic-bezier(.4,0,.2,1)}
/* Fills for bars: light tints of the status colours. The status colours
   themselves are deep shades in the light theme (they are text and badge
   colours), and as solid bars they read heavy. Same tints on both themes.
   Used through QAC.barTint(). */
:root{--bar-gr:#6ee7b7;--bar-am:#fcd34d;--bar-rd:#fca5a5;--bar-ac:#a5b4fc;--bar-bl:#93c5fd;--bar-t3:#cbd5e1}

[data-theme="dark"]{
  --bg:#0c0c11;--bg2:#131318;--bg3:#1e1e28;--bg4:#252530;--surf:#2e2e3a;
  --b:rgba(255,255,255,.08);--b2:rgba(255,255,255,.15);--b3:rgba(255,255,255,.26);
  --t:#eeeef8;--t2:#b0b0c8;--t3:#808098;
  --ac:#7c6fff;--ac2:#c4bcff;--acb:rgba(124,111,255,.16);--acbr:rgba(124,111,255,.42);
  --gr:#34d399;--grb:rgba(52,211,153,.14);--grbr:rgba(52,211,153,.38);
  --am:#fbbf24;--amb:rgba(251,191,36,.14);--ambr:rgba(251,191,36,.35);
  --rd:#f87171;--rdb:rgba(248,113,113,.14);--rdbr:rgba(248,113,113,.35);
  --bl:#60a5fa;--blb:rgba(96,165,250,.14);
  --cg:rgba(255,255,255,.08);--ch:rgba(255,255,255,.04);
  --sh:0 4px 24px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f0f0f7;--bg2:#ffffff;--bg3:#e8e8f2;--bg4:#dddde8;--surf:#d4d4e0;
  --b:rgba(0,0,0,.08);--b2:rgba(0,0,0,.15);--b3:rgba(0,0,0,.26);
  --t:#141428;--t2:#484860;--t3:#62627a;
  --ac:#5e52e0;--ac2:#3d33c0;--acb:rgba(94,82,224,.1);--acbr:rgba(94,82,224,.32);
  --gr:#047857;--grb:rgba(5,150,105,.09);--grbr:rgba(5,150,105,.28);
  --am:#b45309;--amb:rgba(217,119,6,.09);--ambr:rgba(217,119,6,.28);
  --rd:#dc2626;--rdb:rgba(220,38,38,.09);--rdbr:rgba(220,38,38,.28);
  --bl:#2563eb;--blb:rgba(37,99,235,.09);
  --cg:rgba(0,0,0,.06);--ch:rgba(0,0,0,.025);
  --sh:0 4px 24px rgba(0,0,0,.1);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--font);font-size:13.5px;line-height:1.5;color:var(--t);background:var(--bg);overflow:hidden}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--bl);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea{font-family:var(--font)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surf);border-radius:3px}

/* Visible focus on every interactive element. Removing an outline without
   replacing it makes the product unusable by keyboard, which is not a
   trade-off anyone consented to. */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}

/* Motion is decoration; people who ask the OS for less of it get none. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── layout ──────────────────────────────────────────────────────────────── */

.shell{display:flex;height:100vh;height:100dvh;overflow:hidden}

.sidebar{width:224px;min-width:224px;background:var(--bg2);border-inline-end:1px solid var(--b);
  display:flex;flex-direction:column;padding:18px 10px;height:100vh;overflow:hidden}
/* The nav scrolls; the brand above it does not. The sidebar scrolling as a
   whole took the product name off-screen as soon as the nav was taller than
   the viewport. */
.nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.brand{position:relative;padding:0 4px 16px;margin-bottom:8px}
/* The whole block is the switcher: mark, product, organization, chevron. A
   chevron alone beside a title is a target people do not see. */
.brand-switch{display:flex;align-items:center;gap:10px;inline-size:100%;
  padding:6px;border:1px solid transparent;border-radius:10px;
  background:none;color:var(--t);cursor:pointer;text-align:start;
  transition:background .12s,border-color .12s}
.brand-switch:hover{background:var(--bg3);border-color:var(--b)}
.brand-switch[aria-expanded="true"]{background:var(--acb);border-color:var(--acbr)}
.brand-text{min-inline-size:0;flex:1}
.brand-switch>svg{flex-shrink:0;opacity:.5}

.app-menu{position:absolute;inset-inline:4px;inset-block-start:calc(100% - 8px);
  z-index:9000;padding:6px;background:var(--bg2);border:1px solid var(--b2);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.app-menu-head{font-size:10px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--t3);padding:5px 8px 6px;font-weight:600}
.app-menu-note{font-size:11.5px;color:var(--t2);padding:9px 8px;line-height:1.5}
.app-item{display:flex;align-items:center;gap:9px;inline-size:100%;
  padding:8px 9px;border-radius:8px;font-size:12.5px;color:var(--t);
  text-decoration:none;cursor:pointer}
.app-item:hover{background:var(--acb);color:var(--ac2)}
.app-dot{inline-size:7px;block-size:7px;border-radius:50%;flex-shrink:0;
  background:var(--ac)}
.is-current{color:var(--t2);cursor:default}
.is-current:hover{background:none;color:var(--t2)}
.is-current .app-dot{background:var(--gr)}
.app-here{margin-inline-start:auto;font-size:10px;color:var(--t3)}

/* Search moved to the trailing edge, beside the controls it belongs with. */
.topbar-end{margin-inline-start:auto;gap:10px}
/* No background fill: the mark is a transparent PNG that carries its own
   colour, and painting --ac behind it would box the logo in a purple square. */
.brand-mark{width:32px;height:32px;border-radius:8px;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
/* Matches the CRM's lockup, so moving between the two products the brand
   block does not change shape. */
.brand-name{font-size:15px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.brand-sub{font-size:10.5px;color:var(--t3)}

/* An area (Sales, Purchases …): one heading row that opens its pages beneath
   it. Written in ordinary case, like every other label — the old 9px
   ALL-CAPS headings read as shouting and were the hardest text to scan. */
.ng{margin-top:2px}
.ng-head{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--rsm);
  color:var(--t2);font-size:12.5px;font-weight:400;width:100%;text-align:start;border:1px solid transparent;
  background:none;cursor:pointer;transition:all var(--tr)}
.ng-head:hover{background:var(--bg3);color:var(--t)}
.ng-head .ic{flex-shrink:0}
/* Quiet: the arrow only hints that the row opens; the area name is the point. */
.ng-chev{margin-inline-start:auto;display:inline-flex;color:var(--t3);opacity:.45;
  transition:transform var(--tr),opacity var(--tr)}
.ng-chev .ic{stroke-width:1.4}
.ng-head:hover .ng-chev{opacity:.75}
.ng.open>.ng-head{color:var(--t)}
.ng.open .ng-chev{transform:rotate(180deg)}
/* Collapsed but holding the page you are on: the area name says so. */
.ng.has-active:not(.open)>.ng-head{color:var(--ac2)}
.ng-items{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;
  margin-inline-start:15px;padding-inline-start:8px;border-inline-start:1px solid var(--b2)}
.ng-items[hidden]{display:none}
.nb-sub{font-size:12px;padding-block:6px}
.nb{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--rsm);
  color:var(--t2);font-size:12.5px;width:100%;text-align:start;transition:all var(--tr);
  border:1px solid transparent;background:none;cursor:pointer}
.nb:hover{background:var(--bg3);color:var(--t);text-decoration:none}
/* The accent bar on the start edge is the CRM's most recognisable navigation
   cue, and its absence here was the clearest sign the two were different
   products. The transparent border above reserves the same box on every item,
   so gaining one does not shift the row. */
.nb.active{background:var(--acb);color:var(--ac2);font-weight:500;
  border-color:var(--acbr);border-inline-start:3px solid var(--ac);padding-inline-start:6px}
.nb[disabled]{opacity:.42;cursor:not-allowed}
.nb[disabled]:hover{background:none;color:var(--t2)}
.nb .ic{flex-shrink:0}
.nb-soon{margin-inline-start:auto;font-size:9px;color:var(--t3);border:1px solid var(--b2);
  border-radius:10px;padding:0 5px}

.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:56px;min-height:56px;border-bottom:1px solid var(--b);display:flex;
  align-items:center;justify-content:space-between;gap:16px;padding:0 22px;background:var(--bg2)}
/* Both halves may shrink: without min-width:0 a long company name pushed the
   bell and the account menu off the right edge of a phone. */
.topbar>.row{min-width:0}
.topbar-end{flex-shrink:0}
.content{flex:1;overflow-y:auto;padding:22px}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-title{font-size:19px;font-weight:600}
.page-sub{font-size:12px;color:var(--t2);margin-top:2px}

/* ── components ──────────────────────────────────────────────────────────── */

.card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);padding:16px}
.card + .card{margin-top:14px}
.card-title{font-size:13px;font-weight:600;margin-bottom:12px}

.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.stat{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:16px}
.stat-label{font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:.04em}
.stat-value{font-size:26px;font-weight:600;margin-top:6px;line-height:1.1}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--rsm);
  font-size:12.5px;font-weight:500;transition:all var(--tr);border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-p{background:var(--ac);color:#fff}
.btn-p:hover{filter:brightness(1.08)}
.btn-s{background:var(--bg3);color:var(--t);border-color:var(--b2)}
.btn-s:hover{background:var(--bg4);border-color:var(--b3)}
.btn-ghost{color:var(--t2);background:transparent;padding:6px 9px}
.btn-ghost:hover{background:var(--bg3);color:var(--t)}
.btn-danger{background:var(--rdb);color:var(--rd);border-color:var(--rdbr)}
.btn-icon{padding:7px;border-radius:var(--rsm);background:var(--bg3);border:1px solid var(--b2);
  color:var(--t2);display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--bg4);color:var(--t)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
  font-size:10.5px;font-weight:500;background:var(--bg3);color:var(--t2);border:1px solid transparent}
.badge-ac{background:var(--acb);color:var(--ac2);border-color:var(--acbr)}
.badge-gr{background:var(--grb);color:var(--gr);border-color:var(--grbr)}
.badge-am{background:var(--amb);color:var(--am);border-color:var(--ambr)}
.badge-rd{background:var(--rdb);color:var(--rd);border-color:var(--rdbr)}
.badge-bl{background:var(--blb);color:var(--bl)}

.inp,.sel{background:var(--bg3);border:1px solid var(--b2);color:var(--t);border-radius:var(--rsm);
  padding:8px 12px;font-size:13px;width:100%;transition:border-color var(--tr)}
.inp:focus,.sel:focus{border-color:var(--acbr);outline:none}
.inp::placeholder{color:var(--t3)}
textarea.inp{resize:vertical;min-height:80px}
.field{margin-bottom:12px}
.field label{display:block;font-size:11.5px;color:var(--t2);margin-bottom:5px;font-weight:500}
.field-err{color:var(--rd);font-size:11px;margin-top:4px}
.inp.is-invalid,.sel.is-invalid{border-color:var(--rd)}
/* A focused field must be unmistakable: the border tint alone was too faint
   on the light theme. */
.inp:focus-visible,.sel:focus-visible{outline:2px solid var(--acbr);outline-offset:0;border-color:var(--ac)}

table.tw{width:100%;border-collapse:collapse;font-size:12.5px}
table.tw th{text-align:start;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--t3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--b);white-space:nowrap}
table.tw td{padding:10px;border-bottom:1px solid var(--b);vertical-align:middle}
table.tw tbody tr{cursor:pointer;transition:background var(--tr)}
table.tw tbody tr:hover{background:var(--ch)}
table.tw tbody tr[tabindex]:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;background:var(--ch)}
/* Wide tables scroll inside their own container; the page body never does. */
.table-wrap{overflow-x:auto;border:1px solid var(--b);border-radius:var(--rlg);background:var(--bg2);
  -webkit-overflow-scrolling:touch}
/* A shadow on the edge that has more columns behind it. The two "local"
   layers scroll with the content and cover the shadows at each end. */
.table-wrap,.lines-wrap{
  background:linear-gradient(to right,var(--bg2) 30%,transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left,var(--bg2) 30%,transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) right center / 12px 100% no-repeat scroll,
    var(--bg2)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--b);margin-bottom:18px;overflow-x:auto}
.tab{padding:9px 14px;font-size:12.5px;color:var(--t2);border-bottom:2px solid transparent;
  white-space:nowrap;background:none;border-top:none;border-inline:none;cursor:pointer}
.tab:hover{color:var(--t)}
.tab.active{color:var(--ac2);border-bottom-color:var(--ac)}
.tab:focus-visible{outline-offset:-2px}

.empty{text-align:center;padding:44px 20px;color:var(--t3)}
.empty-title{font-size:13.5px;color:var(--t2);margin:10px 0 4px;font-weight:500}
.empty-text{font-size:12px;max-width:420px;margin:0 auto}

.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);
  font-size:12.5px;border:1px solid var(--b2);background:var(--bg3);margin-bottom:14px}
.banner-info{background:var(--acb);border-color:var(--acbr);color:var(--ac2)}
.banner-success{background:var(--grb);border-color:var(--grbr);color:var(--gr)}
.banner-warning{background:var(--amb);border-color:var(--ambr);color:var(--am)}
.banner-neutral{background:var(--bg3);border-color:var(--b2);color:var(--t2)}
.banner-title{font-weight:600;display:block;margin-bottom:2px}

.timeline{position:relative;padding-inline-start:22px}
.timeline::before{content:'';position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:1px;background:var(--b2)}
.tl-item{position:relative;padding-bottom:18px}
.tl-dot{position:absolute;inset-inline-start:-21px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--bg2);border:2px solid var(--ac)}
.tl-title{font-size:12.5px;font-weight:500}
.tl-meta{font-size:11px;color:var(--t3);margin-top:1px}
.tl-body{font-size:12px;color:var(--t2);margin-top:5px;white-space:pre-wrap}

.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;
  justify-content:center;z-index:9000;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);box-shadow:var(--sh);
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--b)}
.modal-title{font-size:14px;font-weight:600}
.modal-body{padding:18px;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--b);flex-wrap:wrap}

.toast-wrap{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:9600;
  display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r);box-shadow:var(--sh);
  padding:11px 14px;font-size:12.5px;display:flex;align-items:flex-start;gap:10px}
.toast-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-x{flex-shrink:0;color:inherit;opacity:.7;padding:2px;border-radius:4px;line-height:0}
.toast-x:hover{opacity:1}
.toast-err{border-color:var(--rdbr);color:var(--rd)}
.toast-ok{border-color:var(--grbr);color:var(--gr)}

.search-wrap{position:relative;flex:1;max-width:420px}
.search-results{position:absolute;inset-inline:0;top:calc(100% + 6px);background:var(--bg2);
  border:1px solid var(--b2);border-radius:var(--r);box-shadow:var(--sh);max-height:340px;
  overflow-y:auto;z-index:9500}
.search-item{display:block;width:100%;text-align:start;padding:9px 12px;font-size:12.5px;
  color:var(--t);border:none;background:none;cursor:pointer}
.search-item:hover{background:var(--bg3);text-decoration:none}
.search-item small{display:block;color:var(--t3);font-size:11px}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;
  font-size:12px;color:var(--t2)}

.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:12.5px}
.kv dt{color:var(--t3)}
.kv dd{color:var(--t)}

.journey{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:4px 0 2px}
.journey-step{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3)}
.journey-step .dot{width:9px;height:9px;border-radius:50%;background:var(--bg4);border:1px solid var(--b2)}
.journey-step.done .dot{background:var(--ac);border-color:var(--ac)}
.journey-step.done{color:var(--t2)}
.journey-step.current{color:var(--ac2);font-weight:600}
.journey-sep{width:18px;height:1px;background:var(--b2);margin:0 6px}

.relmap{width:100%;min-height:280px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--b)}

.skel{background:var(--bg3);border-radius:6px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.mut{color:var(--t2)}
.dim{color:var(--t3)}
.small{font-size:11.5px}
.row{display:flex;align-items:center;gap:8px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.mt{margin-top:14px}
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* The scrim behind an open drawer. Declared outside the media query so the
   element can exist at any width and simply never be shown above it. */
.side-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:7999}
.side-scrim.on{display:block}

/* Below 860px the sidebar becomes a drawer — the SAME width the CRM switches
   at. They used to differ (900 here, 860 there), which meant a tablet in
   landscape showed a drawer in one product and a sidebar in the other. */
@media (max-width:860px){
  /* dvh, not vh: a mobile browser counts the collapsing URL bar in vh, which
     leaves the bottom of the drawer unreachable. */
  .shell{height:100dvh}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:8000;
    height:100dvh;width:252px;min-width:252px;
    transform:translateX(-110%);transition:transform var(--tr);box-shadow:var(--sh)}
  .sidebar.open{transform:none}
  [dir="rtl"] .sidebar{transform:translateX(110%)}
  [dir="rtl"] .sidebar.open{transform:none}
  .content{padding:16px}
  .topbar{padding:0 14px;gap:10px}
  .kv{grid-template-columns:1fr}
  /* 16px stops iOS zooming into every field it focuses. */
  .inp,.sel,textarea.inp,.lines .inp,.lines .sel{font-size:16px}
  /* Touch targets: 40px is the smallest a thumb hits reliably. */
  .btn,.btn-icon,.nb,.ng-head,.tab,.user-chip,.search-item,.user-item,.app-item,.bell-item{min-height:40px}
  .btn-icon{min-width:40px}
  .inp,.sel{min-height:40px}
  .check{min-height:36px}
  .page-title,.doc-title{font-size:17px}
}
@media (min-width:861px){
  .menu-btn{display:none}
  /* Never over the desktop layout, whatever state the drawer was left in when
     the window was widened. */
  .side-scrim{display:none!important}
}

/* ── the icon rail (the CRM's model) ───────────────────────────────────────
   `.rail` is set by QAC.shell.syncRail: automatically at 861-1180px (a small
   laptop, a tablet in landscape), or at any desktop width by the chevron, whose
   choice is remembered. It used to open over the page on hover instead, which
   is not what the CRM does, so the same person moving between the two products
   met two different sidebars. Below 860px the drawer takes over (above).

   Labels are moved out of sight, not removed: a screen reader still announces
   them and `title` gives a pointer the same text. */
.brand{display:flex;align-items:center;gap:4px}
.brand-switch{flex:1;min-inline-size:0}
.rail-toggle{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--rsm);border:1px solid transparent;
  background:none;color:var(--t3);cursor:pointer;transition:all var(--tr)}
.rail-toggle:hover{background:var(--bg3);color:var(--t);border-color:var(--b2)}
@media (max-width:860px){ .rail-toggle{display:none} }
@media (min-width:861px){
  .sidebar.rail{width:60px;min-width:60px;padding-inline:8px;overflow:visible}
  .sidebar.rail .brand{flex-direction:column;gap:6px;padding-inline:0}
  .sidebar.rail .brand-switch{justify-content:center;padding:4px}
  .sidebar.rail .brand-text,.sidebar.rail .nb-soon{display:none}
  .sidebar.rail .rail-toggle{width:100%}
  /* The chevron points the way the sidebar will go. */
  .sidebar.rail .rail-toggle svg{transform:scaleX(-1)}
  .sidebar.rail .nb>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .sidebar.rail .nb{justify-content:center;padding:9px 0;gap:0}
  /* The start bar has nowhere to sit on a centred icon, so the active state is
     carried by the fill and the accent ring instead. */
  .sidebar.rail .nb.active{border-inline-start-width:1px;padding-inline-start:0;
    box-shadow:inset 0 0 0 1px var(--acbr)}
  /* An area is its icon; its open pages are icons too, set apart by a rule
     instead of an indent, which 60px has no room for. */
  .sidebar.rail .ng-head{justify-content:center;padding:9px 0;gap:0}
  .sidebar.rail .ng-head>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .sidebar.rail .ng.open>.ng-head,.sidebar.rail .ng.has-active>.ng-head{background:var(--bg3)}
  .sidebar.rail .ng-items{margin:2px 0 6px;padding:4px 0;border-inline-start:none;
    border-block:1px solid var(--b)}
  /* The product menu opens BESIDE a rail: inside 60px it would be unreadable. */
  .sidebar.rail .app-menu{inset-inline-start:calc(100% + 6px);inset-inline-end:auto;
    inset-block-start:0;width:240px}
}

/* ── the account menu ───────────────────────────────────────────────────────
   A chip that is visibly pressable, and one place behind it for the things
   that are about YOU rather than about an account. The initials used to sit in
   the topbar doing nothing, beside a theme button and a logout arrow — so the
   one thing people go looking for had nowhere to click. */
.user-wrap{position:relative}
.user-chip{display:flex;align-items:center;gap:5px;padding:3px 7px 3px 3px;
  border-radius:20px;border:1px solid var(--b2);background:var(--bg2);
  color:var(--t2);cursor:pointer;transition:border-color .12s,background .12s}
.user-chip:hover{border-color:var(--acbr);background:var(--acb)}
.user-chip[aria-expanded="true"]{border-color:var(--acbr);background:var(--acb)}
.user-av{inline-size:24px;block-size:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;letter-spacing:.3px;
  background:var(--ac);color:#fff}

.user-menu{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);
  min-inline-size:224px;z-index:9000;padding:8px;
  background:var(--bg2);border:1px solid var(--b2);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.26)}
.user-head{padding:6px 8px 8px}
.user-name{font-size:13px;font-weight:600}
.user-mail{font-size:11.5px;color:var(--t2);word-break:break-all;
  margin-block-start:1px}
.user-org{display:flex;align-items:center;gap:5px;margin-block-start:5px;
  font-size:11px;color:var(--t3)}
.user-sep{block-size:1px;background:var(--b);margin:6px 0}
.user-item{display:flex;align-items:center;gap:9px;inline-size:100%;
  padding:8px 9px;border:0;border-radius:8px;background:none;color:var(--t);
  font-size:12.5px;text-align:start;cursor:pointer;text-decoration:none}
.user-item:hover{background:var(--acb);color:var(--ac2)}
.user-danger{color:var(--rd)}
.user-danger:hover{background:var(--rdb);color:var(--rd)}


/* ── Accounts additions ─────────────────────────────────────────────────────
   Everything below is specific to an accounting product: numbers that line up,
   forms laid out in a grid, document line editors, statement layouts. Built
   only from the shared tokens above. */

.num,td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;white-space:nowrap}
.pos{color:var(--gr)}
.neg{color:var(--rd)}
.strong{font-weight:600}
.muted-row td{color:var(--t3)}
tr.total-row td{font-weight:600;border-top:2px solid var(--b2)}
tr.group-row td{font-weight:600;background:var(--bg3);color:var(--t2);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em}
tr.indent-1 td:first-child{padding-inline-start:26px}
tr.indent-2 td:first-child{padding-inline-start:42px}
tr.indent-3 td:first-child{padding-inline-start:58px}
table.tw.static tbody tr{cursor:default}
table.tw.compact td{padding:6px 10px}

/* The company picker in the top bar. */
.co-pick{display:flex;align-items:center;gap:6px;color:var(--t2);min-width:0}
.co-pick .sel{width:auto;min-width:180px;max-width:280px;padding:6px 10px;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Toolbar above a list: search, filters, actions. */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .inp,.toolbar .sel{width:auto;min-width:160px}
.toolbar .grow{flex:1;min-width:200px;max-width:360px}

/* Forms laid out on a grid; `span-2` takes a full row. */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.form-grid .span-2{grid-column:1 / -1}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-section{grid-column:1 / -1;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t3);font-weight:600;margin:10px 0 8px;padding-top:8px;border-top:1px solid var(--b)}
.form-section:first-child{border-top:none;padding-top:0;margin-top:0}
.check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t);cursor:pointer}
.check input{accent-color:var(--ac)}
.field-help{font-size:11px;color:var(--t3);margin-top:4px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 12px}

/* Document line editor (invoices, bills, journals). */
.lines{width:100%;border-collapse:collapse;font-size:12.5px}
.lines th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);
  text-align:start;padding:6px;border-bottom:1px solid var(--b);font-weight:600;white-space:nowrap}
.lines td{padding:4px;border-bottom:1px solid var(--b);vertical-align:top}
.lines .inp,.lines .sel{padding:6px 8px;font-size:12.5px}
.lines .num .inp{text-align:end}
.lines td.act{width:34px;text-align:center}
.lines-wrap{overflow-x:auto;border:1px solid var(--b);border-radius:var(--r);background:var(--bg2)}
@media (min-width:641px){.lines{min-width:760px}}
.totals{margin-inline-start:auto;min-width:280px;max-width:360px}
.totals .t-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:12.5px}
.totals .t-row.grand{font-size:15px;font-weight:600;border-top:1px solid var(--b2);
  padding-top:8px;margin-top:4px}

/* Under a line editor: notes beside the totals; stacked on a narrow screen,
   where the totals come first (they are what people check). */
.editor-foot{display:flex;align-items:flex-start;gap:16px;margin-top:12px}
.editor-notes{flex:1;min-width:0}
@media (max-width:860px){
  .editor-foot{flex-direction:column-reverse;align-items:stretch}
}

/* A document header: number, party, status, dates. */
.doc-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.doc-title{font-size:19px;font-weight:600;display:flex;align-items:center;gap:10px}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.doc-meta .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.doc-meta .v{font-size:13px;margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Stat tiles on the dashboard and report headers. */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:14px}
.tile{background:var(--bg2);border:1px solid var(--b);border-radius:12px;padding:14px 16px;
  border-inline-start:3px solid var(--th,var(--ac))}
.tile-k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:600}
.tile-v{font-size:22px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.2}
.tile-m{font-size:11.5px;color:var(--t2);margin-top:3px}
.chart-box{position:relative;height:260px}

/* Notifications dropdown. */
.bell-wrap{position:relative}
.bell-count{position:absolute;top:-4px;inset-inline-end:-4px;min-width:16px;height:16px;border-radius:8px;
  background:var(--rd);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;
  justify-content:center;padding:0 4px}
.bell-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:340px;max-height:440px;
  overflow-y:auto;z-index:9000;background:var(--bg2);border:1px solid var(--b2);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.26);padding:6px}
.bell-item{display:block;width:100%;text-align:start;padding:9px 10px;border-radius:8px;cursor:pointer;
  border:none;background:none;color:var(--t)}
.bell-item:hover{background:var(--bg3)}
.bell-item.unread{background:var(--acb)}
.bell-item .t{font-size:12.5px;font-weight:500}
.bell-item .b{font-size:11.5px;color:var(--t2);margin-top:2px}
.bell-item .d{font-size:10.5px;color:var(--t3);margin-top:3px}

/* Settings: a left rail of sections beside the section body. */
.settings{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
@media (max-width:860px){
  .settings{grid-template-columns:1fr}
  .settings-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;position:static;padding-bottom:4px}
  .settings-nav .nb{width:auto;white-space:nowrap}
  .form-grid.cols-3,.form-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-pick .sel{min-width:0;max-width:40vw}
  .bell-menu{width:min(340px,calc(100vw - 24px))}
  .user-menu{max-width:calc(100vw - 24px)}
  .totals{min-width:0;width:100%;max-width:none}
}

/* ── phones (≤600px) ─────────────────────────────────────────────────────── */
@media (max-width:600px){
  .content{padding:12px}
  .card{padding:12px;border-radius:var(--r)}
  .form-grid,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr}
  .page-head{gap:10px;margin-bottom:14px}
  .page-head>.actions,.doc-head>.actions{width:100%}
  .toolbar .inp,.toolbar .sel,.toolbar .grow{min-width:0;max-width:none;flex:1 1 100%}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{padding:10px 12px}
  .tile-v{font-size:17px;overflow-wrap:anywhere}
  .doc-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
  /* Columns marked priority:'low' give way first. */
  table.tw .lo{display:none}
  /* The first column (number, name) stays put while the rest scroll. */
  table.tw th:first-child,table.tw td:first-child{position:sticky;inset-inline-start:0;
    background:var(--bg2);z-index:1}
  table.tw tbody tr:hover td:first-child{background:var(--bg3)}
  .pager{flex-wrap:wrap}
  /* Dialogs become full-screen sheets with the buttons always in reach. */
  .modal-back{padding:0;align-items:stretch}
  .modal{max-width:none!important;max-height:none;height:100dvh;border-radius:0;border:0}
  .modal-body{flex:1}
  .modal-foot{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1 1 auto;justify-content:center}
  .toast-wrap{inset-inline:12px;inset-block-end:calc(12px + env(safe-area-inset-bottom));max-width:none}
  .co-pick>svg{display:none}
}

/* Line editors on a phone: each line is a card, every field labelled. */
@media (max-width:640px){
  .lines-wrap{overflow:visible;border:0;background:none}
  .lines,.lines tbody,.lines tr,.lines td{display:block;width:100%!important}
  .lines thead{display:none}
  .lines tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;
    padding:10px;margin-bottom:10px;border:1px solid var(--b);border-radius:var(--r);background:var(--bg2)}
  .lines td{padding:0;border:0}
  .lines td.wide{grid-column:1 / -1}
  .lines td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.04em;color:var(--t3);margin-bottom:3px;text-align:start}
  .lines td.act{grid-column:1 / -1;text-align:end;border-top:1px solid var(--b);padding-top:6px}
  .lines td.act .btn-ghost{min-height:40px;min-width:40px}
}

/* ── small phones (≤400px) ──────────────────────────────────────────────── */
@media (max-width:400px){
  .tiles,.doc-meta{grid-template-columns:1fr}
  .topbar{padding:0 10px}
  .user-chip>svg{display:none}
}

@media print{
  .sidebar,.topbar,.toolbar,.actions,.no-print{display:none!important}
  html,body{overflow:visible;background:#fff;color:#000}
  .content{padding:0}
}

/* ── subscription (85-subscription.js) ─────────────────────────────────── */
.bill-grid{display:grid;gap:14px;margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.bill-plan{display:flex;flex-direction:column;gap:9px}
.bill-plan.is-current{border-color:var(--acbr);background:var(--acb)}
.bill-plan-name{font-weight:640;font-size:15px}
.bill-plan-price{font-size:25px;font-weight:650;line-height:1.15}
.bill-plan-cycle{font-size:12px;color:var(--t3);font-weight:400}
.bill-points{list-style:none;display:grid;gap:5px;font-size:12.5px;color:var(--t2);padding:0;margin:0}
.bill-points li{display:flex;gap:7px;align-items:flex-start}
.bill-points svg{flex:none;margin-top:2px;color:var(--gr)}
.bill-limits{display:grid;gap:3px;padding-top:7px;border-top:1px solid var(--b);font-size:12px}
.bill-limit{display:flex;justify-content:space-between}
.bill-foot{margin-top:auto;padding-top:8px}
.bill-foot .btn{width:100%;justify-content:center}
.bill-seats{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bill-seats .inp{width:110px}
/* The page an organization without a subscription sees instead of the app. */
.bill-standalone{max-width:1080px;margin:0 auto;padding:22px 16px 60px}
.bill-standalone-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bill-standalone-bar .brand-mark{width:34px;height:34px}
.bill-standalone-bar .spacer{flex:1}
.bill-scroll{height:100vh;overflow:auto}
.bill-grid > .card{margin:0}
.chip-row .btn.active{background:var(--acb);border-color:var(--acbr);color:var(--ac2)}

.bill-pack{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--b);flex-wrap:wrap}

/* ── Lilly, the help assistant (95-assistant.js) ───────────────────────── */
/* The CRM's chat box, carried over class for class (#helpbot / .hb-* there) so
   she looks the same in every Qivity product. A docked panel rather than a
   modal: questions are usually asked about the thing on screen.
   Below the modals (9000) and toasts (9600), above the page and the drawer. */
.qa-fab{position:fixed;inset-inline-end:22px;inset-block-end:22px;z-index:8500;width:52px;height:52px;
  border-radius:50%;border:none;background:linear-gradient(145deg,var(--ac),#6f5ae0);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(90,98,170,.42);
  transition:transform .18s ease,box-shadow .18s ease}
.qa-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 30px rgba(90,98,170,.52)}
.qa-fab:active{transform:translateY(-1px) scale(.99)}
.qa-fab[aria-expanded="true"]{transform:scale(.96)}
.qa-panel{position:fixed;inset-inline-end:22px;inset-block-end:80px;z-index:8600;width:380px;
  max-width:calc(100vw - 32px);max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rlg);box-shadow:var(--sh);overflow:hidden}
.qa-panel[hidden]{display:none}
.qa-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--b);
  background:linear-gradient(135deg,var(--ac),#6f5ae0);color:#fff}
/* Her avatar, in the header and beside every reply, so the thread reads as a
   conversation with someone rather than a log of responses. */
.qa-avatar,.qa-av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.qa-avatar{width:30px;height:30px;flex:0 0 30px;background:rgba(255,255,255,.18)}
.qa-titles{flex:1;min-width:0}
.qa-title{font-size:14px;font-weight:700;color:#fff;letter-spacing:.1px}
.qa-sub{font-size:10.5px;color:rgba(255,255,255,.78);margin-top:1px;display:flex;align-items:center;gap:5px}
.qa-dot{width:6px;height:6px;border-radius:50%;background:#5ee3a1;box-shadow:0 0 0 2px rgba(94,227,161,.25)}
.qa-x{margin-inline-start:auto;background:none;border:none;color:rgba(255,255,255,.8);border-radius:7px;
  padding:4px 5px;cursor:pointer;display:inline-flex;line-height:0}
.qa-x:hover{background:rgba(255,255,255,.16);color:#fff}
.qa-log{flex:1;min-height:150px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px;
  background:var(--bg)}
/* One row = avatar + bubble. The avatar column stays on the replies that hide
   it, so consecutive answers stay aligned. */
.qa-row{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.qa-av{width:26px;height:26px;flex:0 0 26px;background:linear-gradient(145deg,var(--ac),#6f5ae0)}
.qa-row.tail .qa-av{visibility:hidden}
.qa-you{align-self:flex-end;max-width:82%;background:linear-gradient(145deg,var(--ac),#6f5ae0);color:#fff;
  border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:12.5px;line-height:1.45;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(90,98,170,.22)}
.qa-bot{min-width:0;max-width:calc(100% - 34px);background:var(--bg2);border:1px solid var(--b);
  border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:12.5px;color:var(--t2);line-height:1.55;
  overflow-wrap:anywhere;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.qa-bot b{color:var(--t);font-weight:650}
.qa-bot p+p,.qa-bot b+p,.qa-bot ol+p{margin-top:6px}
.qa-heading{display:block}
/* Step-by-step answers: <ol> owns the numbering so it can never disagree with
   numbers baked into the text. */
.qa-steps{margin:8px 0 2px;padding-inline-start:20px;display:flex;flex-direction:column;gap:5px}
.qa-steps li{font-size:12.5px;color:var(--t2);line-height:1.5}
.qa-steps li::marker{color:var(--ac);font-weight:600}
.qa-hint{font-size:12px;color:var(--t3);line-height:1.5}
.qa-src{margin-top:7px;border-inline-start:2px solid var(--acbr);padding-inline-start:9px;font-size:11.5px;
  color:var(--t3);line-height:1.5}
.qa-src .qa-steps li{font-size:11.5px;color:var(--t3)}
.qa-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.qa-chip{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--bg2);border:1px solid var(--b2);
  color:var(--t2);font-size:11.5px;cursor:pointer;transition:all .14s}
.qa-chip:hover{background:var(--acb);border-color:var(--acbr);color:var(--t);transform:translateY(-1px)}
/* Three dots, so a slow answer looks like thinking rather than a stall. */
.qa-typing{display:flex;gap:4px;padding:3px 2px}
.qa-typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:qa-bounce 1.2s infinite}
.qa-typing i:nth-child(2){animation-delay:.15s}
.qa-typing i:nth-child(3){animation-delay:.3s}
@keyframes qa-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.qa-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--b);background:var(--bg2)}
.qa-form .inp{flex:1;min-width:0;height:34px;font-size:12.5px;padding:5px 11px;border-radius:999px}
.qa-form .btn{border-radius:999px;padding-inline:14px}
@media (prefers-reduced-motion:reduce){.qa-fab,.qa-chip{transition:none}.qa-typing i{animation:none;opacity:.6}}
@media (max-width:520px){.qa-panel{inset-inline:8px;width:auto;inset-block-end:72px}}
@media print{.qa-fab,.qa-panel{display:none!important}}

/* ── invoice template designer ─────────────────────────────────────────────
   Controls on the left, the real PDF on the right, re-rendered as you edit. */
.tpl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tpl-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.tpl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--b2);background:var(--bg2);color:var(--t2);font-size:12.5px;cursor:pointer;
  transition:all var(--tr)}
.tpl-chip:hover{background:var(--bg3);color:var(--t)}
.tpl-chip.active{background:var(--acb);border-color:var(--acbr);color:var(--t)}
.tpl-chip .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.tpl-chip .badge{font-size:9.5px;padding:1px 6px}
.tpl-grid{display:grid;grid-template-columns:minmax(320px,410px) minmax(0,1fr);gap:16px;align-items:start}
.tpl-grid>.card{margin:0}
.tpl-controls{padding:0;overflow:hidden;--tpl-ac:var(--ac)}
.tpl-head{padding:14px 16px 4px;border-bottom:1px solid var(--b)}
.tpl-sec{border-bottom:1px solid var(--b)}
.tpl-sec>summary,.ed-sec>summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;
  font-weight:600;font-size:12.5px;color:var(--t);user-select:none}
.tpl-sec>summary{padding:12px 16px}
.tpl-sec>summary::-webkit-details-marker,.ed-sec>summary::-webkit-details-marker{display:none}
.tpl-sec>summary:hover{background:var(--bg3)}
.tpl-sec>summary .ic{color:var(--tpl-ac)}
.tpl-chev{margin-inline-start:auto;display:inline-flex;color:var(--t3);transition:transform var(--tr)}
details[open]>summary .tpl-chev{transform:rotate(180deg)}
.tpl-sec-body{padding:4px 16px 14px}
.tpl-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 16px;background:var(--bg2);border-top:1px solid var(--b)}
.tpl-dirty{font-size:11.5px;color:var(--am);margin-inline-end:auto;display:inline-flex;align-items:center;gap:6px}
.tpl-dirty::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--am)}
.tpl-preview{position:sticky;top:0;padding:0;overflow:hidden}
.tpl-pv-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--b);flex-wrap:wrap}
.tpl-pv-tools{display:flex;align-items:center;gap:6px}
.tpl-pv-tools .sel{max-width:240px}

/* Header-style picker: a thumbnail of each letterhead. */
.hs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hs-card{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:7px;border:1px solid var(--b2);
  border-radius:var(--r);background:var(--bg2);color:var(--t2);font-size:11.5px;cursor:pointer;
  transition:all var(--tr);font-family:inherit}
.hs-card:hover{border-color:var(--b3);color:var(--t)}
.hs-card.active{border-color:var(--tpl-ac);box-shadow:0 0 0 2px var(--acb);color:var(--t);font-weight:600}
.hs-mini{position:relative;height:50px;border-radius:5px;background:#fff;border:1px solid var(--b);padding:6px;overflow:hidden}
.hs-mini b,.hs-mini i,.hs-mini u{display:block;border-radius:2px}
.hs-mini b{width:16px;height:9px;background:var(--tpl-ac);opacity:.85}
.hs-mini i{height:3px;background:#cfd3db;margin-top:4px;width:60%}
.hs-mini i.short{width:38%}
.hs-mini u{position:absolute;inset-inline:6px;bottom:7px;height:2px;background:var(--tpl-ac)}
.hs-centered b,.hs-centered i{margin-inline:auto}
.hs-split b{float:left}
.hs-split i{margin-inline-start:auto;width:42%}
.hs-split i.short{width:28%}
.hs-banner{padding:0}
.hs-banner b{width:100%;height:24px;border-radius:0;opacity:1}
.hs-banner i{margin:5px 6px 0}
.hs-banner u{display:none}

.swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatch{width:24px;height:24px;border-radius:7px;border:0;cursor:pointer;transition:transform .12s;
  box-shadow:inset 0 0 0 1px var(--b3)}
.swatch:hover{transform:scale(1.08)}
.swatch.active{outline:2px solid var(--t);outline-offset:2px}
input[type=color]{width:36px;height:32px;padding:2px;border:1px solid var(--b2);border-radius:var(--rsm);
  background:var(--bg3);cursor:pointer}

.img-pick{display:flex;gap:12px;align-items:center}
.img-box{width:132px;height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1.5px dashed var(--b3);border-radius:var(--r);background:#fff;overflow:hidden;cursor:pointer;
  color:#62627a;font-size:11px;font-family:inherit;transition:all var(--tr);padding:6px}
.img-box>span{display:flex;flex-direction:column;align-items:center;gap:4px}
.img-box img{max-width:100%;max-height:100%;object-fit:contain}
.img-box:hover,.img-box.drag{border-color:var(--tpl-ac);background:var(--acb)}
.img-box.busy{opacity:.55;pointer-events:none}
.img-box:disabled{cursor:default}
.img-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.img-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Signature pad: a white "paper" with a baseline, whatever the theme. */
.sig-area{position:relative;height:200px;border:1px solid var(--b2);border-radius:var(--r);background:#fff;
  overflow:hidden;touch-action:none}
.sig-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.sig-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  color:#a0a4ae;font-size:15px;letter-spacing:.02em}
.sig-line{position:absolute;inset-inline:28px;bottom:46px;border-top:1.5px dashed #c7cdd6;pointer-events:none}
.sig-inks{display:flex;gap:6px}
.sig-ink{width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px var(--b3)}
.sig-ink.active{outline:2px solid var(--ac);outline-offset:2px}

.seg{display:inline-flex;border:1px solid var(--b2);border-radius:var(--rsm);overflow:hidden}
.seg button{padding:6px 14px;background:var(--bg3);border:0;color:var(--t2);font-size:12px;cursor:pointer;
  font-family:inherit;transition:all var(--tr)}
.seg button+button{border-inline-start:1px solid var(--b2)}
.seg button.active{background:var(--tpl-ac);color:#fff}
.toggle-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.cf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:6px;margin-bottom:6px}

/* ── PDF viewer (designer and invoice preview) ── */
.pdf-frame{position:relative;height:calc(100vh - 210px);min-height:540px;background:var(--bg3)}
.pdf-frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.pdf-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  background:color-mix(in srgb,var(--bg2) 55%,transparent);font-size:12.5px;color:var(--t2);backdrop-filter:blur(1px)}
.pdf-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--b2);border-top-color:var(--ac);
  animation:pdf-spin .8s linear infinite}
@keyframes pdf-spin{to{transform:rotate(360deg)}}
.pdf-msg{position:absolute;inset-inline:16px;top:16px;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;
  border-radius:var(--r);background:var(--rdb);border:1px solid var(--rdbr);color:var(--rd);font-size:12.5px}
.pdf-mobile{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;color:var(--t3)}
.pdf-modal .banner{margin-bottom:10px}
.pdf-modal .pdf-frame{height:70vh;min-height:420px;border-radius:var(--r);overflow:hidden;border:1px solid var(--b)}

/* Optional groups in the document editor (dispatch details). */
.ed-sec{margin-top:12px;padding:0}
.ed-sec>summary{padding:13px 16px}
.ed-sec>summary .ic{color:var(--ac)}
.ed-sec>summary .small{font-weight:400}
.ed-sec-body{padding:2px 16px 6px}

@media (max-width:1180px){
  .tpl-grid{grid-template-columns:minmax(0,1fr)}
  .tpl-preview{position:static}
  .pdf-frame{height:78vh}
}
@media (max-width:640px){
  .pdf-frame{height:220px;min-height:0}
  .pdf-frame iframe{display:none}
  .pdf-mobile{display:flex}
  .pdf-modal .pdf-frame{height:240px;min-height:0}
  .toggle-list{grid-template-columns:minmax(0,1fr)}
  .hs-cards{gap:6px}
  .img-pick{flex-wrap:wrap}
  .tpl-pv-tools .sel{max-width:170px}
}
@media (prefers-reduced-motion:reduce){.pdf-spin{animation:none}.swatch{transition:none}}