/* Additions for the Laravel build only. public/assets/css/app.css is the prototype's
   stylesheet, copied verbatim; nothing here changes it. Tokens come from app.css. */

/* user menu (sidebar footer, styled as the Collapse sidebar button; opens upwards) */
.umenu{position:relative}
.umenu-btn{display:flex;align-items:center;gap:var(--s3);min-height:36px;padding:0 var(--s3);border:none;background:none;border-radius:var(--r);color:var(--ink-2);cursor:pointer;width:100%;font:inherit;text-align:left}
.umenu-btn:hover{background:var(--surface-2);color:var(--ink)}
.umenu-btn .av{width:22px;height:22px;font-size:11px}
.umenu-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.app.collapsed .umenu-btn .lbl{display:none}
.app.collapsed .umenu-btn{justify-content:center;padding:0}
@media (max-width:1024px){.app:not(.expanded) .umenu-btn .lbl{display:none}.app:not(.expanded) .umenu-btn{justify-content:center;padding:0}}
@media (max-width:760px){.app .umenu-btn .lbl{display:revert!important}.app .umenu-btn{justify-content:flex-start!important;padding:0 var(--s3)!important}}
.umenu-pop{position:absolute;left:0;bottom:calc(100% + 6px);width:min(300px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:var(--s2);z-index:55;display:flex;flex-direction:column;gap:var(--s1)}
.umenu-who{padding:var(--s2) var(--s2) var(--s3);border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px}
.umenu-who b{font-weight:600;color:var(--ink)}
.umenu-sec{padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2);border-bottom:1px solid var(--line-soft)}
.umenu-a{display:block;width:100%;text-align:left;padding:var(--s2);border:none;background:none;border-radius:var(--r);color:var(--ink);text-decoration:none;font:inherit;cursor:pointer}
.umenu-a:hover{background:var(--surface-2)}

/* sign-in pages */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--s5) var(--s4);background:var(--bg)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s8) var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.auth-brand{display:flex;align-items:center;gap:var(--s3)}
.auth-brand img{width:40px;height:40px;border-radius:var(--r)}
.auth-brand .brand-t{display:flex;flex-direction:column;gap:2px}
.auth-card h1{font-family:var(--f-head);font-size:var(--t-section);line-height:var(--lh-section);font-weight:700;letter-spacing:var(--ls-head)}
.auth-card .btn{width:100%}
.auth-card form{display:flex;flex-direction:column;gap:var(--s4)}
.auth-links{display:flex;justify-content:space-between;gap:var(--s3);font-size:13px}
.auth-links a{color:var(--brand)}
.check{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--ink-2)}
.qr{display:grid;place-items:center;padding:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r);width:max-content}
.qr svg{width:180px;height:180px}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}

/* Archive: left clients. Record details and Restore stack in the last column, which stays in
   view at the right of the table, so Restore is never hidden past the card's edge (the firm's
   decision, 29 October 2026: in the prototype the wide table scrolled the buttons out of view). */
@media (min-width:761px){
  body[data-route="archive"] #view .tbox td:last-child .btns{flex-direction:column;align-items:stretch}
  body[data-route="archive"] #view .tbox th:last-child,body[data-route="archive"] #view .tbox td:last-child{position:sticky;right:0;z-index:1;background:var(--surface);box-shadow:-1px 0 0 var(--line-soft)}
  body[data-route="archive"] #view .tbox th:last-child{background:var(--surface-2);z-index:2}
  body[data-route="archive"] #view .tbox tr.rowlink:hover td:last-child{background:color-mix(in srgb,var(--surface-2) 70%,var(--surface))}
}

/* VAT Returns Due and MTD Obligations Due (the firm's request of 29 Oct 2026): month cards, existing tokens only */
.due-mod{border-top:3px solid var(--line)}
.due-mod.vat{border-top-color:var(--brand)}
.due-mod.mtd{border-top-color:var(--ok)}
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--s3);padding:var(--s4) var(--s5)}
.mcard{display:flex;flex-direction:column;gap:6px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:inherit;text-decoration:none;min-width:0}
.mcard:hover,.mcard:focus-visible{background:var(--surface-2);border-color:var(--ink-2)}
.mcard.now{box-shadow:inset 0 0 0 1px var(--brand)}
.mcard .mt{font-family:var(--f-head);font-weight:600;font-size:13px}
.mcard .mv{font-family:var(--f-head);font-weight:700;font-size:24px;line-height:28px;font-variant-numeric:tabular-nums}
.mcard dl{display:grid;grid-template-columns:1fr auto;gap:2px var(--s2);margin:0;font-size:12px;line-height:16px}
.mcard dt{color:var(--muted)}
.mcard dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.mcard dd.bad{font-weight:600}
.due-links{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s5) var(--s4)}
.due-filters{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end}

/* Info cards on Today and Practice overview (the firm's request of 4 Nov 2026): separate cards, each in
   its own colour (a soft tint, a side accent and the figure in the colour), using the theme's status
   colours so they also work in dark mode. */
.tone-err{--tc:var(--err);--tb:var(--err-bg)}
.tone-warn{--tc:var(--warn);--tb:var(--warn-bg)}
.tone-info{--tc:var(--info);--tb:var(--info-bg)}
.tone-ok{--tc:var(--ok);--tb:var(--ok-bg)}
.tone-brand{--tc:var(--brand);--tb:var(--brand-tint)}
.tone-gold{--tc:#8A6420;--tb:#F8F0E0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tone-gold{--tc:#E6C98F;--tb:#3A3020}}
:root[data-theme="dark"] .tone-gold{--tc:#E6C98F;--tb:#3A3020}
.kstrip.tones{background:none;border:0;border-radius:0;overflow:visible;gap:var(--s3)}
.kstrip.tones .kpi{position:relative;overflow:hidden;background:var(--tb);border:1px solid color-mix(in srgb,var(--tc) 20%,transparent);border-radius:var(--r-lg);padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px);transition:transform .15s ease,box-shadow .15s ease}
.kstrip.tones .kpi:last-child{border-right:1px solid color-mix(in srgb,var(--tc) 20%,transparent)}
.kstrip.tones .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.kstrip.tones .kpi:hover{background:var(--tb);transform:translateY(-1px);box-shadow:0 8px 18px -12px color-mix(in srgb,var(--tc) 70%,transparent)}
.kstrip.tones .kpi:focus-visible{outline:2px solid var(--tc);outline-offset:2px}
.kstrip.tones .kpi .l{color:var(--tc)}
.kstrip.tones .kpi .v{color:var(--tc)}
.kstrip.tones .kpi .m{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.kstrip.tones .kpi{transition:none}.kstrip.tones .kpi:hover{transform:none}}

/* ---------- Receivables (after the Imperium invoicing project, 4 Nov 2026) ---------- */
.rv-c0{--rc:var(--info)}.rv-c1{--rc:var(--ok)}.rv-c2{--rc:#D4A72C}.rv-c3{--rc:#C2620E}.rv-c4{--rc:var(--err)}
.rv-welcome{display:grid;grid-template-columns:minmax(200px,auto) 1fr;gap:var(--s3)}
.rv-wstat{display:flex;flex-direction:column;gap:4px;padding:var(--s4) var(--s5);background:var(--brand);color:var(--on-brand);border-radius:var(--r-lg);text-decoration:none}
.rv-wstat span{font-size:13px;opacity:.85}
.rv-wstat b{font-family:var(--f-head);font-size:28px;line-height:34px;font-weight:700;font-variant-numeric:tabular-nums}
.rv-wstat.grow{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.rv-wstat.grow span{color:var(--muted);opacity:1}
.rv-wbar{display:flex;align-items:center;gap:var(--s3);margin-top:8px}
.rv-wbar>span{flex:1;height:12px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.rv-wbar>span i{display:block;height:100%;background:linear-gradient(90deg,var(--warn),var(--err));border-radius:99px}
.rv-wbar b{font-size:22px;line-height:28px;color:var(--err)}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.rv-grid>.card{min-width:0}
@media (max-width:1100px){.rv-grid{grid-template-columns:1fr}.rv-welcome{grid-template-columns:1fr}}
.rv-stack{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--surface-2);gap:2px}
.rv-seg{display:block;height:100%;background:var(--rc)}
.rv-seg.rv-empty{background:var(--surface-2)}
.rv-legend{display:flex;flex-direction:column;gap:2px;margin-top:var(--s3);max-width:560px}
.rv-leg{display:grid;grid-template-columns:12px 1fr auto 52px;align-items:center;gap:var(--s2);padding:6px 4px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:13px}
.rv-leg:hover{background:var(--surface-2)}
.rv-leg i{width:12px;height:12px;border-radius:3px;background:var(--rc)}
.rv-leg b{font-variant-numeric:tabular-nums;font-weight:600}
.rv-leg .meta{text-align:right}
.rv-list li{align-items:center}
.rv-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:none}
.rv-r .pill{white-space:nowrap}
.rv-meter{display:block;height:6px;border-radius:99px;background:var(--surface-2);margin-top:6px;overflow:hidden}
.rv-meter i{display:block;height:100%;background:var(--brand);border-radius:99px}
.rv-bars{display:flex;align-items:flex-end;gap:var(--s2);height:210px;padding-top:var(--s2)}
.rv-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;min-width:0}
.rv-col{width:100%;max-width:46px;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--brand) 35%,var(--surface-2))}
.rv-bar.last .rv-col{background:var(--brand)}
.rv-bv{font-size:11px;line-height:14px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-bar.last .rv-bv{color:var(--ink);font-weight:600}
.rv-bl{font-size:12px;color:var(--muted)}
.rv-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.rv-qa{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;font:inherit;transition:border-color .15s ease,background-color .15s ease}
.rv-qa:hover{border-color:var(--brand);background:var(--brand-tint)}
.rv-qa svg{width:22px;height:22px;flex:none;stroke:var(--brand);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rv-qa>span{display:flex;flex-direction:column;gap:2px}
.rv-sum{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:flex-end;padding:var(--s3) var(--s5);border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.rv-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.rv-ledger .rv-bf td{background:var(--surface-2)}
.rv-ledger .rv-memo td{color:var(--muted);font-size:12px;background:color-mix(in srgb,var(--surface-2) 50%,transparent)}
table.rv-aging{width:100%}
.rv-aging td,.rv-aging th{white-space:nowrap}
.rv-aging td:first-child{white-space:normal;min-width:260px}
.rv-exp{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.rv-chev{display:inline-block;width:12px;color:var(--muted);transition:transform .15s ease}
.rv-ag.open .rv-chev{transform:rotate(90deg)}
.rv-ind{display:block;padding-left:18px}
.rv-ag-item td{background:var(--surface-2);font-size:13px}
.rv-ind2{padding-left:30px!important}
.rv-aging tfoot td,.rv-ledger tfoot td{background:var(--surface-2);border-top:1px solid var(--line)}
.rv-pct td{color:var(--muted);font-size:12px}
.rv-reports{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s4);align-items:start}
.rv-rep-nav{display:flex;flex-direction:column;padding:var(--s2);position:sticky;top:var(--s4)}
.rv-rep{display:block;padding:8px var(--s3);border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-size:14px}
.rv-rep:hover{background:var(--surface-2);color:var(--ink)}
.rv-rep.on{background:var(--brand-tint);color:var(--brand);font-weight:600}
.rv-rep-h{font-size:12px;color:var(--faint);font-weight:600;padding:var(--s3) var(--s3) 4px;border-top:1px solid var(--line-soft);margin-top:var(--s2)}
.rv-rep-body{min-width:0}
.rv-rep-body tfoot td{background:var(--surface-2)}
@media (max-width:900px){.rv-reports{grid-template-columns:1fr}.rv-rep-nav{position:static}}
.infoc{color:var(--info)}

/* Client header: status pills across the card with Mark as left on the right (5 Nov 2026) */
.ws-statusrow{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);margin-top:calc(-1 * var(--s2))}
.ws-statusrow .ws-status{margin-top:0}
.btn.danger-outline{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
.btn.danger-outline:hover:not(:disabled){background:var(--err-bg);border-color:var(--err)}

/* My details (account/show) */
.acc-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.acc-pair .field .opt,.stack-s .field .opt{font-weight:400;color:var(--muted);font-size:12px}
@media (max-width:560px){.acc-pair{grid-template-columns:1fr}}

/* ---------- Sidebar (the firm's request of 4 Nov 2026) ----------
   ChatGPT-style: the toggle sits beside the logo; collapsed, a narrow rail keeps the logo and icons
   and pointing at the logo shows the toggle. Only the menu scrolls, with a thin scrollbar that
   shows on hover; the logo row and the account button stay put. */
:root{--side-w:264px}
.app{transition:grid-template-columns .2s ease}
.side{overflow:hidden;padding:var(--s3) var(--s3) var(--s3);gap:var(--s3)}
.side-head{position:relative;display:flex;align-items:center;gap:var(--s2);min-height:48px;flex:none}
.side-head .brand{flex:1;min-width:0;min-height:48px;gap:10px;padding:0 var(--s1);border-radius:var(--r)}
.brand-logo{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden}
.side .brand .brand-logo img{width:100%;height:100%;object-fit:contain;padding:1px;border:0;border-radius:0;background:none}
.side .brand-t{gap:1px}
.side .brand-t .app-title{font-size:17px;line-height:22px;letter-spacing:-.01em}
.side .brand-t #firmName{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:15px}
.side-toggle{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r);background:none;color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease,opacity .15s ease}
.side-toggle:hover{background:var(--surface-2);color:var(--ink)}
.side-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.side-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.side-nav{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--s4);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0 calc(-1 * var(--s2));padding:0 var(--s2) var(--s2)}
.side-nav::-webkit-scrollbar{width:5px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.side-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:5px}
.side-nav:hover::-webkit-scrollbar-thumb,.side-nav:focus-within::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 20%,transparent)}
.side-nav::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 35%,transparent)}
/* Firefox has no ::-webkit-scrollbar: its own thin scrollbar instead */
@supports not selector(::-webkit-scrollbar){
  .side-nav{scrollbar-width:thin;scrollbar-color:transparent transparent}
  .side-nav:hover,.side-nav:focus-within{scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}
}
.side-foot{flex:none;margin-top:0;padding-top:var(--s2);border-top:1px solid var(--line-soft)}

/* the rail: collapsed by choice on wide screens, or by default from 761px to 1024px */
.app.collapsed .side-head .brand{justify-content:center;padding:0}
.app.collapsed .side-toggle{position:absolute;inset:0;margin:auto;width:38px;height:38px;opacity:0;background:var(--surface);color:var(--ink)}
.app.collapsed .side-head:hover .side-toggle,.app.collapsed .side-toggle:focus-visible{opacity:1}
.app.collapsed .side-head:hover .side-toggle{background:var(--surface-2)}
.app.collapsed .navg{border-top:1px solid var(--line-soft);padding-top:var(--s2)}
.app.collapsed .navg:first-child{border-top:0;padding-top:0}
.app.collapsed .side-nav{gap:var(--s2)}
@media (max-width:1024px){
  .app:not(.expanded) .side-head .brand{justify-content:center;padding:0}
  .app:not(.expanded) .brand-t{display:none}
  .app:not(.expanded) .side-toggle{position:absolute;inset:0;margin:auto;width:38px;height:38px;opacity:0;background:var(--surface);color:var(--ink)}
  .app:not(.expanded) .side-head:hover .side-toggle,.app:not(.expanded) .side-toggle:focus-visible{opacity:1}
  .app:not(.expanded) .side-head:hover .side-toggle{background:var(--surface-2)}
  .app.expanded .side{z-index:60}
}
/* phones: the sidebar is a drawer from the menu button; the toggle closes it */
@media (max-width:760px){
  .app .side-head .brand{justify-content:flex-start!important;padding:0 var(--s1)!important}
  .app .side-toggle{position:static!important;opacity:1!important;background:none!important;color:var(--muted)!important}
  .app .navg{border-top:0!important;padding-top:0!important}
  .app .side-nav{gap:var(--s4)!important}
  .app.mobile-open .side{z-index:60}
}
/* Auto-collapse (the firm's request of 4 Nov 2026): the rail opens in full over the page while
   pointed at (.peek, set by app.js) and folds back when the pointer leaves. The rail keeps its
   place in the grid, so the page underneath never moves. Not on phones (the menu is a drawer). */
@media (min-width:761px){
  .app.collapsed .side{width:var(--side-w-c);transition:width .18s ease,box-shadow .18s ease}
  .app.peek .side{width:var(--side-w)!important;box-shadow:var(--shadow-pop);z-index:60;border-right-color:var(--line)}
  .app.peek .brand-t,.app.peek .navg-h,.app.peek .nav-a .lbl,.app.peek .nav-a .cnt,.app.peek .umenu-btn .lbl{display:revert!important}
  .app.peek .brand-t{display:flex!important}
  .app.peek .side-head .brand{justify-content:flex-start!important;padding:0 var(--s1)!important}
  .app.peek .nav-a,.app.peek .umenu-btn{justify-content:flex-start!important;padding:0 var(--s3)!important}
  .app.peek .nav-a .cnt.hot{position:static!important;width:auto!important;height:auto!important;background:none!important;font-size:12px!important;display:revert!important}
  .app.peek .side-toggle{position:static!important;opacity:1!important;width:36px!important;height:36px!important;background:none!important;color:var(--muted)!important}
  .app.peek .side-toggle:hover{background:var(--surface-2)!important;color:var(--ink)!important}
  .app.peek .navg{border-top:0!important;padding-top:0!important}
  .app.peek .side-nav{gap:var(--s4)!important}
}
@media (min-width:761px) and (max-width:1024px){
  .app:not(.expanded) .side{width:var(--side-w-c);transition:width .18s ease,box-shadow .18s ease}
}
@media (prefers-reduced-motion:reduce){.app,.side,.side-toggle{transition:none!important}}

/* Job status tracker: the client code before the name, in the same type and colour as the card's labels (e.g. Assigned to). 6 Nov 2026 */
.jc-code{font-size:var(--t-meta);line-height:var(--lh-meta);font-weight:400;color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}

/* Job status tracker: hover preview of a card's comments (6 Nov 2026) */
.jc-peek{position:fixed;z-index:90;width:320px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px 12px;font-size:13px;line-height:18px;pointer-events:none}
.jc-peek-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.jc-peek-h span{font-size:12px;color:var(--muted);white-space:nowrap}
.jc-peek ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.jc-peek .hd{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.jc-peek .hd b{color:var(--ink-2);font-weight:600}
.jc-peek p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.jc-peek-f{margin-top:8px;font-size:12px;color:var(--muted)}