/* The screen every nvisin tool shares: colours, sidebar, buttons, cards, tables, tags, dialogs, the sign-in page, phone and print.
   Edit it here (packages/ui/tool.css), then run node scripts/sync-ui.mjs: each tool serves its own copy as /tool.css.
   Colours, fonts, corners, cards and spacing are variables. theme.js sets them from the company's style (chosen at signup,
   changed under Settings → Look), so write new rules with the variables, never fixed colours: they must work on the dark
   background too. A tool's own screens add a short <style> after this file. */
:root {
  --bg: #F6F7FB; --surface: #fff; --surface-2: #EEF1F7; --ink: #15192A; --ink-2: #5A6178; --ink-3: #8A90A6; --line: #E3E6EF;
  --brand: #1F3F8F; --accent: #2F6BFF; --accent-soft: #E6EEFF; --green: #12925F; --green-soft: #DDF3E8;
  --amber: #B7740F; --amber-soft: #FFF0D2; --red: #C7362F; --red-soft: #FDE4E2;
  --f-head: 'Funnel Display', system-ui, sans-serif; --f-body: 'Funnel Sans', system-ui, sans-serif;
  /* set by theme.js from the company's style (Settings → Look); these defaults are the plain nvisin look */
  --f-num: var(--f-head); --f-cell: var(--f-body); --on-brand: #fff; --field: #fff; --hover: #FAFBFE; --line-2: #F1F3F8;
  --r: 16px; --r-lg: 18px; --r-md: 12px; --r-sm: 10px; --r-xs: 8px; --pill: 999px;
  --card-border: var(--line); --card-shadow: none; --pad: 18px; --cell-y: 9px; --main-pad: 26px 30px 60px; --fs: 15px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs)/1.45 var(--f-body); }
button, input, select, textarea { font: inherit; color: inherit; }
.proto-bar { background: #15192A; color: #fff; font-size: 13px; padding: 7px 16px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.proto-bar button { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 1px 10px; cursor: pointer; font-size: 12.5px; }
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
aside { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
/* the sidebar is never taller than the screen: it stays put while the page scrolls, and the account links stay pinned at its foot */
aside { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
/* sample mode: the sample bar stays on top and the sidebar fits under it */
@media (min-width: 761px) {
  .proto-bar { position: sticky; top: 0; z-index: 6; min-height: 35px; box-sizing: border-box; }
  body:has(#sampleBar:not([hidden])) aside { top: 35px; height: calc(100dvh - 35px); }
}
.co { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font: 700 16px var(--f-head); }
.co .mark { width: 32px; height: 32px; border-radius: 9px; } .co .mark.logo { width: auto; height: auto; max-width: 100%; border-radius: 0; overflow: hidden; }
.co .mark.logo img { height: auto; max-height: 48px; width: auto; max-width: 100%; }
.co.wide #coName { display: none; }
.navb { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--r-sm); border: 0; background: none; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.navb:hover { background: var(--surface-2); }
.navb[aria-current="page"] { background: var(--accent-soft); color: var(--brand); }
.navgrp { display: contents; } .navgrp[hidden] { display: none; }
.toolsw { display: flex; gap: 2px; padding: 3px; margin: 0 0 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.toolsw[hidden] { display: none; }
.toolsw button { flex: 1; border: 0; background: none; border-radius: var(--r-xs); padding: 6px 4px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.toolsw button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.navb .ct { margin-left: auto; font-size: 12px; background: var(--red-soft); color: var(--red); border-radius: 999px; padding: 0 7px; }
main { padding: var(--main-pad); min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
h1 { font: 700 26px/1.1 var(--f-head); margin: 0; letter-spacing: -.01em; }
h2 { font: 700 17px var(--f-head); margin: 0 0 12px; }
.btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--ink-3); }
.btn.pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.sm { padding: 4px 10px; font-size: 13px; border-radius: var(--r-xs); }
.card { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: var(--r); padding: var(--pad); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: var(--r); padding: calc(var(--pad) - 4px) calc(var(--pad) - 2px); }
.kpi b { display: block; font: 800 26px/1.1 var(--f-num); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.kpi small { color: var(--ink-3); font-size: 12.5px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* nothing may be wider than the screen: long names, addresses and tables shrink or scroll inside their box */
.grid2 > *, .card, .fields > *, label.f { min-width: 0; }
select, input, textarea { max-width: 100%; }
label.f select { width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: var(--cell-y) 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--hover); }
.tablewrap { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: var(--r); overflow-x: auto; }
td.web { text-align: center; } td.web input { width: 18px; height: 18px; cursor: pointer; }
.num { font-family: var(--f-cell); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.muted { color: var(--ink-3); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; border-radius: var(--pill); padding: 2px 9px; white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.t-rent { background: var(--accent-soft); color: var(--brand); }
.t-yard { background: var(--green-soft); color: var(--green); }
.t-out, .t-back { background: var(--amber-soft); color: var(--amber); }
.t-sale { background: #F1E8FF; color: #6A3FC2; }
.t-maint, .t-reserved { background: var(--surface-2); color: var(--ink-2); }
.t-overdue { background: var(--red-soft); color: var(--red); }
.t-sold { background: #ECEAF2; color: #5B5470; }
.t-dealer { background: #E3F4F7; color: #0F6E80; }
.feat { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; margin: 2px 3px 0 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.subhead { font: 700 14px var(--f-head); margin: 4px 0 0; grid-column: 1 / -1; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.minilist { grid-column: 1 / -1; display: grid; gap: 6px; }
.mini { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; }
.mini .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini button { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 13px; font-weight: 600; }
.mini button:hover { color: var(--red); }
.mini a { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 13px; }
.pos { color: var(--green); } .neg { color: var(--red); }
.roichart { width: 100%; height: auto; display: block; }
.roichart text { font-size: 11px; fill: var(--ink-3); font-family: var(--f-body); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: -4px 0 8px; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; min-width: 70px; }
.bar i { display: block; height: 100%; background: var(--green); }
.folder { margin-bottom: 18px; }
.folder h3 { font: 700 15px var(--f-head); margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; }
.linkbox { display: flex; gap: 8px; } .linkbox input { flex: 1; font: 13px ui-monospace, Menlo, monospace; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.banner { background: var(--amber-soft); color: var(--amber); border-radius: var(--r-md); padding: 10px 14px; font-weight: 600; margin-bottom: 14px; }
.banner.plan { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.banner.plan.bad { background: var(--red-soft); color: var(--red); }
.banner.plan a { color: inherit; }
.t-paid { background: var(--green-soft); color: var(--green); }
.t-due { background: var(--amber-soft); color: var(--amber); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters input, .filters select { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 7px 12px; background: var(--surface); }
.filters input { min-width: 220px; }
.pill-btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--pill); padding: 5px 12px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.pill-btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* billing grid */
.bgrid td.m { text-align: center; padding: 6px 4px; }
.cell { width: 100%; min-width: 74px; border: 0; border-radius: var(--r-xs); padding: 6px 4px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cell.paid { background: var(--green-soft); color: var(--green); }
.cell.overdue { background: var(--red-soft); color: var(--red); }
.cell.due { background: var(--amber-soft); color: var(--amber); }
.cell.future { background: var(--surface-2); color: var(--ink-3); }
.cell.na { background: none; color: var(--line); cursor: default; }
.list { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.row .grow { flex: 1; min-width: 0; }
.row .grow b { display: block; }
.row .grow span { color: var(--ink-2); font-size: 13.5px; }
.date { width: 50px; text-align: center; flex: none; }
.date b { display: block; font: 800 20px/1 var(--f-head); }
.date span { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; }
.empty { color: var(--ink-3); padding: 14px; text-align: center; }
dialog { border: 0; border-radius: var(--r-lg); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: hidden; box-shadow: 0 30px 80px rgba(21,25,42,.3); }
.dlg-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-2); font-size: 15px; cursor: pointer; }
.dlg-x:hover { background: var(--line); color: var(--ink); }
dialog::backdrop { background: rgba(21,25,42,.45); }
.dlg { padding: 22px 22px 0; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; }
.dlg h3 { padding-right: 40px; }
.dlg h3 { font: 700 20px var(--f-head); margin: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fields .full { grid-column: 1 / -1; }
label.f { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
label.f input, label.f select, label.f textarea { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--field); font-size: 14.5px; color: var(--ink); }
.dlg .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding: 12px 0 18px; border-top: 1px solid var(--line); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; }
.pager .btn:disabled { opacity: .4; cursor: default; }
.filters input[type=search] { flex: 1 1 220px; }
.dlg .acts .left { margin-right: auto; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: var(--r-md); font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.on { opacity: 1; }
.help { color: var(--ink-2); font-size: 13.5px; margin: 0; }
textarea.csv { width: 100%; min-height: 160px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px; font: 12.5px ui-monospace, Menlo, monospace; }
.menu-btn { display: none; }
.picker { border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--field); overflow: hidden; }
.picker .pk-q { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 12px; font-size: 14px; outline: none; }
.picker .pk-list { max-height: 210px; overflow-y: auto; }
.pk-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 12px; cursor: pointer; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.pk-opt:hover { background: var(--surface-2); } .pk-opt.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--brand); }
.pk-opt .mono { font-weight: 700; } .pk-opt .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pk-opt .tag { font-size: 11px; padding: 1px 7px; }
.pk-none { color: var(--ink-2); font-weight: 600; }
/* sign-in: the form on the left, a look at the tool on the right (hidden on small screens) */
.gate { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 560px) minmax(0, 1fr); background: var(--surface); }
.gate-l { display: flex; flex-direction: column; min-height: 100vh; padding: 28px clamp(20px, 5vw, 72px); }
.gate-top { display: flex; align-items: center; gap: 12px; font: 700 17px var(--f-head); color: var(--ink); min-height: 44px; }
.gate-top.wide .gate-name { display: none; }
.gate-main { flex: 1; display: grid; align-content: center; gap: 16px; width: min(400px, 100%); padding: 40px 0; }
.gate h1 { font: 700 34px/1.08 var(--f-head); letter-spacing: -.02em; margin: 0; }
.gate .help { font-size: 15px; line-height: 1.5; }
.gate form { display: grid; gap: 14px; margin-top: 4px; } .gate label.f { margin: 0; gap: 6px; font-size: 13.5px; }
.gate label.f input { height: 48px; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 0 14px; font-size: 16px; width: 100%; background: var(--field); transition: border-color .15s, box-shadow .15s; }
.gate label.f input:hover { border-color: var(--ink-3); }
.gate label.f input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.gate .btn.pri { height: 50px; border-radius: var(--r-md); font-size: 16px; margin-top: 4px; transition: filter .15s; }
.gate .btn.pri:hover { filter: brightness(1.12); }
.gate .btn.pri:disabled { opacity: .7; cursor: progress; }
.gate .pw { position: relative; display: block; }
.gate label.f .pw input { padding-right: 70px; }
.gate .pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ink-2); font-weight: 600; font-size: 13px; padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; }
.gate .pw button:hover { background: var(--surface-2); color: var(--ink); }
.gate .linkbtn { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; font-size: 14px; justify-self: start; }
.gate .linkbtn:hover { text-decoration: underline; }
.gate .ok { color: var(--green); background: var(--green-soft); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; margin: 0; } .gate .ok:empty { display: none; }
.gate .err { color: var(--red); background: var(--red-soft); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; margin: 0; } .gate .err:empty { display: none; }
.gate-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.gate-foot span { display: inline-flex; align-items: center; gap: 6px; }
.gate-foot svg { width: 14px; height: 14px; }
.gate-foot a { color: inherit; text-decoration: none; } .gate-foot a:hover { color: var(--ink-2); }
.gate-r { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px; padding: 72px 0 0 64px; color: var(--on-brand);
  background: radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%), radial-gradient(circle at -10% 110%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%), var(--brand); }
.gate-pitch { display: grid; gap: 14px; max-width: 620px; padding-right: 48px; }
.gate-pitch b { font: 700 36px/1.1 var(--f-head); letter-spacing: -.02em; }
.gate-pitch p { margin: 0; color: color-mix(in srgb, var(--on-brand) 78%, transparent); font-size: 16px; line-height: 1.5; }
.gate-pitch ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: color-mix(in srgb, var(--on-brand) 90%, transparent); }
.gate-pitch li { display: flex; gap: 10px; align-items: center; }
.gate-pitch li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.shot { flex: 1; min-height: 340px; background: var(--bg); color: var(--ink); border-radius: 18px 0 0 0; padding: 0; box-shadow: 0 30px 80px rgba(6,12,40,.45); border: 1px solid rgba(255,255,255,.25); border-right: 0; border-bottom: 0; font-size: 13px; overflow: hidden; }
.shot { display: grid; grid-template-columns: 170px minmax(0, 1fr); padding: 0; }
.shot-side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px; display: grid; align-content: start; gap: 4px; }
.shot-side .co { display: flex; align-items: center; gap: 8px; font: 700 13px var(--f-head); padding: 0 6px 14px; margin: 0; }
.shot-side .co svg { width: 24px; height: 24px; flex: none; }
.shot-side i { font-style: normal; font-weight: 600; color: var(--ink-2); padding: 7px 8px; border-radius: var(--r-xs); }
.shot-side i:first-of-type { background: var(--accent-soft); color: var(--brand); }
.shot-in { display: grid; gap: 14px; align-content: start; padding: 22px; max-width: 1040px; }
/* big screens: the preview grows with the panel instead of leaving empty space */
@media (min-width: 1500px) { .gate-r > * { zoom: 1.15; } }
@media (min-width: 1800px) { .gate-r > * { zoom: 1.3; } }
.shot-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shot-h b { font: 700 19px var(--f-head); }
.shot-h i { font-style: normal; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; color: var(--ink-3); min-width: 150px; }
.shot-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shot-k div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.shot-k b { display: block; font: 800 22px/1.15 var(--f-head); color: var(--ink); }
.shot-t { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.shot-t div { display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px 92px; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.shot-t div:last-child { border-bottom: 0; }
.shot-t em { width: 30px; height: 30px; border-radius: 7px; display: block; }
.shot-t span { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.shot-t small { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.shot-t u { text-decoration: none; text-align: right; font-variant-numeric: tabular-nums; }
.shot-t .tag { justify-self: end; }
@media (max-width: 960px) { .gate { grid-template-columns: 1fr; } .gate-r { display: none; } .gate h1 { font-size: 30px; } }
/* the company's logo, or the nvisin mark (sign-in page and sidebar) */
.mark { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; overflow: hidden; }
.mark svg { width: 100%; height: 100%; display: block; }
/* a company logo: never taller or wider than its row, whatever size the file is */
.mark.logo { width: auto; height: auto; max-width: 200px; border-radius: 0; overflow: hidden; }
.mark.logo img { height: auto; max-height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.acct { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); position: sticky; bottom: -20px; padding-bottom: 20px; margin-bottom: -20px; background: var(--surface); }
.acct .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct button { justify-self: start; background: none; border: 0; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; }
.acct .help { justify-self: start; color: var(--brand); font-weight: 600; text-decoration: none; }
.acct .help:hover { text-decoration: underline; }
/* Settings: the gear next to who is signed in. Everything you set up (the tool's settings, logo, users, password) is behind it */
.acctrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acctrow .who { flex: 1; min-width: 0; }
.navb.gear { width: 34px; height: 34px; padding: 0; flex: none; justify-content: center; color: var(--ink-2); }
.navb.gear svg { width: 19px; height: 19px; }
.logobox { display: grid; place-items: center; min-height: 96px; padding: 16px; border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.logobox img { max-height: 80px; max-width: 100%; object-fit: contain; }
.sync { display: inline-flex; align-items: center; gap: 6px; }
.sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sync.saving::before { background: var(--amber); }
.sync.error::before { background: var(--red); }
/* welcome card (new companies), guided tour, Download PDF */
.welcome { display: grid; gap: 12px; margin-bottom: 16px; }
.welcome .wtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.welcome h2 { margin: 0 0 2px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.step { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--brand); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.step.done .n { background: var(--green-soft); color: var(--green); }
.step b { font: 700 15px var(--f-head); }
.step.done b { color: var(--ink-3); text-decoration: line-through; }
.step p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.step .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.plain { background: none; border: 0; padding: 0; color: var(--ink-2); font-weight: 600; cursor: pointer; font-size: 13.5px; }
.plain:hover { color: var(--ink); }
.tour { position: fixed; inset: 0; z-index: 50; }
.tour-dim { position: absolute; inset: 0; background: rgba(21,25,42,.45); }
.tour-hole { position: absolute; border-radius: var(--r); box-shadow: 0 0 0 9999px rgba(21,25,42,.45); pointer-events: none; transition: top .2s, left .2s, width .2s, height .2s; }
.tour-pop { position: absolute; width: min(360px, calc(100vw - 24px)); background: var(--surface); border-radius: var(--r); padding: 18px; box-shadow: 0 20px 60px rgba(21,25,42,.3); display: grid; gap: 8px; }
.tour-pop h3 { font: 700 18px var(--f-head); margin: 0; }
.tour-pop p { margin: 0; color: var(--ink-2); font-size: 14px; }
.tour-count { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.tour-acts { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.tour-acts .plain { margin-right: auto; }
.print-head { display: none; }
/* documents (estimates, statements, certificates…) are white paper with dark text on every background */
[data-bg=dark] [class$="-doc"], [data-bg=dark] [class*="-doc "], [data-bg=dark] .crc, [data-bg=dark] .pk { --ink: #15192A; --ink-2: #5A6178; --ink-3: #8A90A6; --line: #E3E6EF; --line-2: #F1F3F8;
  --surface: #fff; --surface-2: #EEF1F7; --field: #fff; --green: #12925F; --green-soft: #DDF3E8; --amber: #B7740F; --amber-soft: #FFF0D2; --red: #C7362F; --red-soft: #FDE4E2;
  color: var(--ink); color-scheme: light; }

/* on the dark background a logo (often dark lettering on a clear background) sits on a white plate, and the nvisin mark gets an edge */
[data-bg=dark] .mark.logo img, [data-bg=dark] .logobox img { background: #fff; border-radius: var(--r-xs); padding: 4px 6px; }
[data-bg=dark] .mark:not(.logo) { box-shadow: 0 0 0 1px var(--line); }

/* Settings → Look (theme.js draws it) */
.lk { display: grid; gap: 12px; align-content: start; }
.lk-body { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.lk-body[disabled] { opacity: .6; }
.lk-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; }
.lk-lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lk-tpls { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-tpl { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 5px 10px 5px 5px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink); }
.lk-tpl[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); }
.lk-sw { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid rgba(0,0,0,.08); }
.lk-sw b { width: 9px; height: 18px; border-radius: 3px; }
.lk-bg-white { background: #fff; } .lk-bg-paper { background: #FBF8F1; } .lk-bg-tint { background: #F3EFE6; } .lk-bg-dark { background: #0D1014; }
.lk-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r-sm); justify-self: start; }
.lk-seg button { border: 0; background: none; border-radius: var(--r-xs); padding: 5px 11px; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.lk-seg button[aria-checked="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.lk-cols, .lk-fonts { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.lk-cols label, .lk-fonts label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lk-cols input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1.5px solid var(--line); border-radius: var(--r-xs); background: var(--field); cursor: pointer; }
.lk-cols input[type=text] { width: 86px; border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 5px 8px; font: 13px ui-monospace, Menlo, monospace; background: var(--field); color: var(--ink); }
.lk-fonts select { border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 5px 8px; background: var(--field); font-size: 13px; color: var(--ink); max-width: 190px; }
.lk-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lk-acts .btn:disabled { opacity: .5; cursor: default; }
.lk-note { margin-left: auto; }
@media (max-width: 760px) { .lk-row { grid-template-columns: 1fr; gap: 4px; } }
@media print {
  @page { margin: 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  .app { display: block; min-height: 0; }
  aside, .toast, dialog, .tour, .welcome, .banner, .filters, .pager, .top .btn, .no-print, [data-pay], [data-done] { display: none !important; }
  main { padding: 0; }
  .print-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 14px; }
  .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card, .kpi, tr { break-inside: avoid; }
  .tablewrap { overflow: visible; }
  .hide-sm { display: table-cell; }
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .acct { margin: 0; padding: 0 0 0 10px; border: 0; border-left: 1px solid var(--line); display: flex; align-items: center; gap: 10px; white-space: nowrap; } .acct .who { display: none; } }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  aside { flex-direction: row; overflow-x: auto; overflow-y: visible; height: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
  .acct { position: static; margin-bottom: 0; padding-bottom: 0; background: none; }
  .co { display: none; } .navb { width: auto; white-space: nowrap; }
  main { padding: 18px 14px 50px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .fields { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}
</style>
<style>
.copick { margin: -8px 0 12px; } .copick select { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; background: var(--surface); font-weight: 600; }
@media (max-width: 760px) { .copick { margin: 0; } .copick select { min-width: 150px; } }