/* Navigate ERP — one stylesheet, no build step.
   Palette: acacia green (primary), marigold (signal), ink, paper. */
:root {
  --ink: #15212b;
  --ink-2: #33424c;
  --muted: #5d6b66;
  --line: #dce2dd;
  --line-2: #eaeee9;
  --paper: #f5f6f2;
  --surface: #ffffff;
  --acacia: #1e6b57;
  --acacia-deep: #154d3f;
  --acacia-tint: #e3efe9;
  --marigold: #e3a33b;
  --marigold-tint: #fbf0dc;
  --danger: #b3412f;
  --danger-tint: #f8e5e1;
  --info: #2d5f8b;
  --info-tint: #e3ecf5;
  --radius: 6px;
  --radius-lg: 10px;
  --font: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: clamp(14px, calc(11.2px + 0.25vw), 16px); }
body { margin: 0; font: 0.9rem/1.5 var(--font); color: var(--ink); background: var(--paper); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.45rem; font-weight: 700; }
h2 { font-size: 1.12rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--acacia); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acacia-deep); }
:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: .86em; }
code { background: var(--line-2); padding: .1em .35em; border-radius: 4px; word-break: break-all; }
pre { background: var(--ink); color: #e8efe9; padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; font: 0.8125rem/1.5 var(--mono); }
pre code { background: none; padding: 0; color: inherit; }
small, .small { font-size: .86rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; font: 600 0.875rem/1 var(--font); padding: 10px 16px; border-radius: var(--radius);
  border: 1px solid var(--acacia); background: var(--acacia); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--acacia-deep); border-color: var(--acacia-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--acacia); }
.btn.ghost:hover { background: var(--acacia-tint); color: var(--acacia-deep); }
.btn.plain { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.plain:hover { border-color: var(--ink-2); }
.btn.danger { background: var(--surface); color: var(--danger); border-color: #e3bdb5; }
.btn.danger:hover { background: var(--danger-tint); }
.btn.sm { padding: 6px 10px; font-size: 0.8125rem; }
.btn.lg { padding: 11px 18px; font-size: 0.9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--acacia); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: 0.8438rem; margin-bottom: 5px; color: var(--ink-2); }
.field { margin-bottom: 14px; }
.field .hint { font-size: 0.7812rem; color: var(--muted); margin-top: 4px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=tel], input[type=search], input[type=url], input[type=file], select, textarea {
  width: 100%; font: 0.9375rem/1.4 var(--font); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acacia); box-shadow: 0 0 0 3px var(--acacia-tint); }
fieldset { min-width: 0; }   /* browsers size a fieldset to its widest content by default — a wide table then pushes the page sideways */
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 0.875rem; color: var(--ink); }
.check input { margin-top: 3px; accent-color: var(--acacia); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.error { color: var(--danger); font-size: 0.8125rem; margin-top: 4px; }
.is-invalid { border-color: var(--danger) !important; }

/* ---------- alerts & badges ---------- */
.alert { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid; font-size: 0.875rem; }
.alert.success { background: var(--acacia-tint); border-color: #b9d6c9; color: var(--acacia-deep); }
.alert.error { background: var(--danger-tint); border-color: #e6c2ba; color: #7c2c20; }
.alert.info { background: var(--info-tint); border-color: #c3d4e6; color: #1f4467; }
.alert.warn { background: var(--marigold-tint); border-color: #efd29f; color: #6d4a0e; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.badge.green, .badge.active, .badge.connected, .badge.success { background: var(--acacia-tint); color: var(--acacia-deep); }
.badge.amber, .badge.pending, .badge.draft, .badge.sandbox { background: var(--marigold-tint); color: #7a520f; }
.badge.red, .badge.suspended, .badge.rejected, .badge.failed, .badge.disabled, .badge.cancelled { background: var(--danger-tint); color: var(--danger); }
.badge.blue, .badge.live { background: var(--info-tint); color: var(--info); }

/* ---------- surfaces ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-body { padding: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .stack-sm { grid-template-columns: minmax(0, 1fr) !important; } }   /* layouts whose columns are set inline: one column on a phone */

/* stats: a strip, not a card per number */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat { padding: 16px 20px; border-right: 1px solid var(--line-2); }
.stat:last-child { border-right: 0; }
.stat .v { font: 700 1.3rem/1.15 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.stat .l { font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }
.stat.alert-stat .v { color: #9a6410; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th { text-align: left; font-weight: 600; font-size: 0.7812rem; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #fafbf8; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcfa; }
td .sub { display: block; font-size: 0.7812rem; color: var(--muted); }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }

/* ---------- tabs ---------- */
/* section tabs as keyboard keys (as the action strips): a green line above the row, each tab a raised key with a green stripe
   on top; the open tab and the one under the pointer are green keys; pressed, a key goes down onto its edge */
.tabs { display: flex; flex-wrap: wrap; gap: 8px 6px; border-top: 3px solid var(--acacia); padding: 10px 0 4px; margin-bottom: 18px; }
.tabs a { padding: 5px 12px 6px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.8rem; line-height: 1.2; white-space: nowrap;
  border: 1px solid #c3d4cb; border-top: 3px solid var(--acacia); border-radius: 7px; background: linear-gradient(180deg, #ffffff 0%, #eef5f1 100%);
  box-shadow: 0 3px 0 #b4c9be, 0 4px 5px rgba(21,33,43,.10), inset 0 1px 0 #fff; transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.tabs a:hover, .tabs a:focus-visible, .tabs a.on { background: linear-gradient(180deg, #24806a 0%, var(--acacia) 100%); border-color: var(--acacia-deep); border-top-color: #0f3a2f; color: #fff;
  box-shadow: 0 3px 0 #0f3a2f, 0 4px 7px rgba(21,33,43,.2), inset 0 1px 0 rgba(255,255,255,.18); }
.tabs a:hover, .tabs a:focus-visible { transform: translateY(-1px); outline: none; }
.tabs a:active { background: linear-gradient(180deg, var(--acacia) 0%, var(--acacia-deep) 100%); box-shadow: 0 0 0 #0f3a2f, inset 0 2px 3px rgba(0,0,0,.22); transform: translateY(3px); transition-duration: .05s; }
@media (max-width: 760px) { .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .tabs::-webkit-scrollbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .tabs a, .tabs a:hover { transition: none; transform: none; } }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--acacia); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 18px; height: 18px; }
.brand-name { font: 700 0.95rem/1.1 var(--display); letter-spacing: -.01em; }
.brand-name small { display: block; font: 500 0.7188rem/1.3 var(--font); color: var(--muted); letter-spacing: 0; margin-top: 3px; }
.nav-group { margin-top: 14px; }
.nav-group > span, .nav-head span { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.nav-group > span { padding: 0 10px 4px; }
.nav-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; margin: 0; padding: 2px 10px 4px; cursor: pointer; border-radius: 6px; font: inherit; text-align: left; }
.nav-head:hover span, .nav-head:focus-visible span { color: var(--ink); }
.nav-head:focus-visible { outline: 2px solid var(--acacia); outline-offset: 1px; }
.nav-chev { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; flex: 0 0 auto; }
.nav-group.collapsed .nav-chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-items { display: none; }
.nav-group.has-on > .nav-head span { color: var(--acacia); }
/* the workspace menu: a very light shade of the theme, fading as it goes down; a thin themed line from top to bottom */
.side { background: linear-gradient(to bottom, color-mix(in srgb, var(--acacia) 7%, var(--surface)) 0%, color-mix(in srgb, var(--acacia) 3%, var(--surface)) 45%, var(--surface) 100%); }
.side .nav { position: relative; padding-left: 10px; }
.side .nav::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, var(--acacia), color-mix(in srgb, var(--acacia) 35%, transparent)); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.nav a svg { width: 17px; height: 17px; flex: none; stroke: currentColor; opacity: .75; }
.nav a:hover { background: var(--paper); color: var(--ink); }
.nav a.on { background: var(--acacia-tint); color: var(--acacia-deep); font-weight: 600; }
.nav a.on svg { opacity: 1; }
.nav a .soon { margin-left: auto; font-size: 0.6875rem; color: var(--muted); font-weight: 500; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 60; }   /* above the module ribbon (.mega-bar, 50): the bell and menus open over it */
.topbar .org { font-weight: 600; }
.topbar .who { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--acacia-tint); color: var(--acacia-deep); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; }
.content { padding: 26px clamp(18px, 2.2vw, 44px) 60px; max-width: none; width: 100%; box-sizing: border-box; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.menu-toggle { display: none; }
.platform .side { background: var(--ink); border-color: var(--ink); }
.platform .brand, .platform .nav a { color: #d7e1dc; }
.platform .brand-name small, .platform .nav-group > span, .platform .nav-head span { color: #8fa19a; } .platform .nav-chev { stroke: #8fa19a; }
.platform .nav a:hover { background: #22323d; color: #fff; }
.platform .nav a.on { background: #243a33; color: #fff; }
.platform .brand-mark { background: var(--marigold); }

/* ---------- checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-2); counter-increment: step; }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before { content: counter(step); flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 0.7812rem; font-weight: 700; color: var(--muted); }
.checklist li.done::before { content: "✓"; background: var(--acacia); border-color: var(--acacia); color: #fff; }
.checklist li.done a { color: var(--muted); }
.checklist .t { font-weight: 600; }
.progress { height: 6px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--marigold); border-radius: 99px; }

/* ---------- permission matrix ---------- */
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix td input { width: 18px; height: 18px; accent-color: var(--acacia); cursor: pointer; }
.matrix td.na { color: var(--line); }
.matrix .rowtoggle { font-size: 0.75rem; }

/* ---------- integration list ---------- */
.int-list { list-style: none; margin: 0; padding: 0; }
.int-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.int-list li:last-child { border-bottom: 0; }
.int-list .name { font-weight: 650; font-size: 0.9688rem; }
.int-list .meta { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.int-list .cat { font-size: 0.75rem; color: var(--muted); }
.secret-box { font: 0.875rem var(--mono); background: var(--ink); color: #f1e2c4; padding: 12px 14px; border-radius: var(--radius); word-break: break-all; }

/* ---------- dialog ---------- */
dialog { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); color: var(--ink); box-shadow: 0 24px 60px rgba(21,33,43,.25); overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(21, 33, 43, .45); }
dialog .panel-head { background: #fafbf8; flex: none; padding: 16px 22px; }
dialog .panel-head h3 { font-size: 1.1rem; }
dialog .panel-head > .btn, dialog > form > .row:last-child > .btn { flex: none; width: auto; }
dialog > form > .row:last-child > .btn { min-width: 110px; justify-content: center; }
dialog .panel-head .sub { font-size: 0.7812rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
/* Body scrolls; the last button row becomes a fixed footer bar */
dialog > form, dialog > form.stack { margin: 0; padding: 20px 22px 0; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; }
dialog > form > .row:last-child, dialog > form > .dlg-foot { position: sticky; bottom: 0; margin: 8px -22px 0; padding: 14px 22px; background: #fafbf8; border-top: 1px solid var(--line-2); justify-content: flex-end; gap: 10px; z-index: 2; }
dialog > form.stack > * + * { margin-top: 0; }
dialog .field { margin-bottom: 14px; min-width: 0; }
dialog textarea { min-height: 76px; }
dialog .check { margin: 2px 0 14px; }
dialog p.small, dialog p.hint { margin: 0 0 14px; }
.dlg-wide { width: min(720px, calc(100vw - 32px)); }
.dlg-mid { width: min(620px, calc(100vw - 32px)); }
/* Form sections inside dialogs and pages */
.form-section { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.form-section + .form-section { border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 2px; }
.form-section > legend, .form-section > .legend { display: block; padding: 0; margin: 0 0 12px; font-size: 0.7188rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* a floated legend sits inside the section, so the divider runs full width above every heading (not through it) */
.form-section > legend { float: left; width: 100%; }
.form-section > legend ~ * { clear: both; }
.req { color: var(--danger); margin-left: 2px; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--paper); color: var(--muted); font-size: 0.8125rem; }
.input-prefix > input { border-radius: 0 var(--radius) var(--radius) 0; }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix > input { border-radius: var(--radius) 0 0 var(--radius); }
.input-suffix > span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper); color: var(--muted); font-size: 0.8125rem; }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
[data-show-if][hidden] { display: none !important; }
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  dialog > form { padding: 16px 16px 0; }
  dialog > form > .row:last-child, dialog > form > .dlg-foot { margin: 8px -16px 0; padding: 12px 16px; }
}

/* ---------- auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-side { background: var(--acacia-deep); color: #e6efe9; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side .brand { color: #fff; padding: 0; }
.auth-side .brand-mark { background: var(--marigold); }
.auth-side blockquote { font: 600 1.6rem/1.3 var(--display); margin: 0; max-width: 26ch; color: #fff; }
.auth-side ul { list-style: none; padding: 0; margin: 20px 0 0; font-size: 0.9062rem; }
.auth-side li { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.12); }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: min(420px, 100%); }
.auth-card h1 { font-size: 1.9rem; }
/* sign-in page: "New to Navigate?" divider and the quiet links underneath */
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; color: var(--muted); font-size: .86rem; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* registration: live preview of the workspace address */
.ws-preview { border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); padding: 10px 12px; }
.ws-preview .ws-url { margin-top: 2px; font-size: 1rem; word-break: break-all; }
.ws-preview .ws-url .mono { color: var(--acacia-deep); font-weight: 600; }
.ws-preview [data-sub-msg].ok { color: var(--acacia); }
.ws-pick [data-ws-editor] { margin-top: 10px; }
.auth-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; font-size: .86rem; color: var(--muted); text-align: center; }

/* ---------- wizard ---------- */
.wizard-steps { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; flex-wrap: wrap; }
.wizard-steps li { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 6px 12px 6px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); display: flex; gap: 6px; align-items: center; }
.wizard-steps li b { width: 20px; height: 20px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; font-size: 0.7188rem; }
.wizard-steps li.on { border-color: var(--acacia); color: var(--acacia-deep); }
.wizard-steps li.on b { background: var(--acacia); color: #fff; }
.wizard-steps li.done b { background: var(--acacia-tint); color: var(--acacia-deep); }
.step[hidden] { display: none; }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.plan-pick label { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; cursor: pointer; background: var(--surface); font-weight: 500; }
.plan-pick label:has(input:checked) { border-color: var(--acacia); box-shadow: 0 0 0 3px var(--acacia-tint); }
.plan-pick input { accent-color: var(--acacia); }
.plan-pick .pn { font: 700 1.05rem var(--display); display: block; margin: 4px 0 2px; color: var(--ink); }

/* ---------- landing ---------- */
.site-head { display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(20px, 5vw, 64px); background: var(--paper); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid transparent; }
.site-head nav { display: flex; gap: 22px; align-items: center; font-size: 0.9062rem; }
.site-head nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-head nav a:not(.btn):hover { color: var(--ink); }
.wrap { padding: 0 clamp(20px, 5vw, 64px); max-width: 1280px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(36px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 96px); }   /* top and bottom only: the page's side margins stay */
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 750; margin-bottom: .35em; max-width: 14ch; }
.hero .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 44ch; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero .fine { font-size: 0.8438rem; color: var(--muted); margin-top: 14px; }

.brief { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.brief-head { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line-2); font-size: 0.8438rem; color: var(--muted); }
.brief-head b { color: var(--ink); font-weight: 650; }
.brief dl { margin: 0; }
.brief .q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 20px; border-bottom: 1px solid var(--line-2); }
.brief .q:last-child { border-bottom: 0; }
.brief dt { font-size: 0.9062rem; color: var(--ink-2); }
.brief dd { margin: 0; font: 700 1.2rem/1 var(--display); letter-spacing: -.01em; text-align: right; font-variant-numeric: tabular-nums; }
.brief dd small { display: block; font: 500 0.75rem/1.4 var(--font); color: var(--muted); letter-spacing: 0; margin-top: 3px; }
.brief .q.attn { background: var(--marigold-tint); }
.brief .q.attn dd { color: #8a5a0c; }
.brief .up { color: var(--acacia); }
@media (prefers-reduced-motion: no-preference) {
  .brief .q { animation: rise .5s both; }
  .brief .q:nth-child(2) { animation-delay: .06s } .brief .q:nth-child(3) { animation-delay: .12s } .brief .q:nth-child(4) { animation-delay: .18s }
  .brief .q:nth-child(5) { animation-delay: .24s } .brief .q:nth-child(6) { animation-delay: .3s } .brief .q:nth-child(7) { animation-delay: .36s } .brief .q:nth-child(8) { animation-delay: .42s }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.band { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.band.alt { background: var(--surface); }
.band h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.025em; max-width: 22ch; }
.band .intro { color: var(--ink-2); max-width: 60ch; font-size: 1.05rem; margin-bottom: 32px; }
.flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.flow h3 { font-size: 1.1rem; }
.flow ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: f; }
.flow li { counter-increment: f; display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-2); font-weight: 500; }
.flow li::before { content: counter(f); font: 700 0.8125rem var(--display); color: var(--acacia); width: 18px; flex: none; }
.flow li:last-child { color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.flow li:last-child::before { content: "↳"; color: var(--marigold); }
.mods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.mods h3 { font-size: .95rem; color: var(--acacia-deep); border-bottom: 2px solid var(--acacia); padding-bottom: 8px; }
.mods ul { list-style: none; padding: 0; margin: 0; }
.mods li { padding: 7px 0; font-size: 0.9062rem; border-bottom: 1px solid var(--line-2); }
.mods li span { display: block; font-size: 0.8125rem; color: var(--muted); }
.ints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ints .it { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ints .it b { font-family: var(--display); font-size: 1.02rem; }
.ints .it p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.plan { padding: 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.plan:last-child { border-right: 0; }
.plan.featured { background: var(--acacia-deep); color: #e5efe9; }
.plan.featured h3, .plan.featured .price { color: #fff; }
.plan .price { font: 750 2rem/1 var(--display); letter-spacing: -.02em; margin: 12px 0 4px; }
.plan .price small { font: 500 0.875rem var(--font); color: var(--muted); letter-spacing: 0; }
.plan.featured .price small, .plan.featured .muted { color: #a9c3b8; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; font-size: 0.875rem; flex: 1; }
.plan li { padding: 5px 0; }
.plan li::before { content: "✓ "; color: var(--acacia); font-weight: 700; }
.plan.featured li::before { color: var(--marigold); }
.plan.featured .btn { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }
/* the package ladder: four to a row, ruled by the grid gap */
.plans.ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.plans.ladder .plan { border-right: 0; background: var(--surface); padding: 22px; }
.plans.ladder .plan.featured { background: var(--acacia-deep); }
.plans.ladder .plan .price { font-size: 1.6rem; }
.plan li.allow { color: var(--muted); }
.plan li.allow::before { content: "• "; color: var(--muted); }
.plan.featured li.allow { color: #a9c3b8; }
@media (max-width: 1200px) { .plans.ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plans.ladder { grid-template-columns: 1fr; } }
.site-foot { padding: 36px 0; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero, .split, .auth { grid-template-columns: 1fr; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flows, .plans, .ints { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-side { padding: 28px; }
  .auth-side blockquote { font-size: 1.3rem; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .side { transform: none; box-shadow: 0 0 0 100vmax rgba(21,33,43,.4); }
  .menu-toggle { display: inline-flex; }
  .content { padding: 20px 16px 48px; }
  .topbar { padding: 10px 16px; gap: 8px; }
  /* phones: the organisation name shortens, and the signed-in person shows as their initial (name in its tooltip) */
  .topbar > .row { min-width: 0; flex-wrap: nowrap; gap: 8px; }
  .topbar .org { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > .row .badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; }
  .topbar .who { gap: 8px; flex: none; }
  .topbar .who > span:not(.avatar) { display: none; }
  .grid-2, .grid-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }   /* minmax(0,…): one long word or wide field can't stretch the column off the screen */
  .site-head nav a:not(.btn) { display: none; }
  .ints .it { grid-template-columns: 1fr; gap: 4px; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line-2); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- sales & payments ---- */
.badge.sent, .badge.confirmed, .badge.issued, .badge.posted { background: #e6eef8; color: #1d4f8a; }
.badge.accepted, .badge.paid, .badge.signed, .badge.converted, .badge.invoiced { background: var(--acacia-tint); color: var(--acacia-deep); }
.badge.partially_paid, .badge.pending_approval, .badge.overdue { background: var(--marigold-tint); color: #8a5a0c; }
.badge.declined, .badge.void, .badge.credited { background: #f3e6e4; color: #8f2f22; }
.lines-table td { padding: 6px 6px; vertical-align: top; }
.lines-table input, .lines-table select { padding: 7px 8px; font-size: 0.875rem; }
.lines-table .num { width: 96px; text-align: right; }
.lines-table .narrow { width: 72px; }
.lines-table .amt { text-align: right; white-space: nowrap; padding-top: 14px; font-variant-numeric: tabular-nums; }
.totals { margin-left: auto; width: min(340px, 100%); }
.totals div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.totals div.grand { font: 700 1.2rem var(--display); border-bottom: 0; padding-top: 10px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.doc-actions form { display: inline; }
.neg { color: #b3261e; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 14px 22px; }
.meta-grid .k { font-size: 0.7812rem; color: var(--muted); }
.flow-chain { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.8438rem; }
.flow-chain span.sep { color: var(--muted); }
.ageing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .ageing { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lines-table .num { width: 70px; } }

/* printable documents */
.print-doc { max-width: 820px; margin: 24px auto; background: #fff; padding: 40px; border: 1px solid var(--line); }
.print-doc table { width: 100%; }
.print-doc h1 { font-size: 1.8rem; margin: 0; }
.print-bar { max-width: 820px; margin: 16px auto 0; display: flex; gap: 8px; justify-content: flex-end; }
@media print {
  .print-bar, .no-print { display: none !important; }
  body { background: #fff; }
  .print-doc { border: 0; margin: 0; padding: 0; max-width: none; }
}

/* "New document" menu */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(21,33,43,.14); padding: 6px; }
.menu-list a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--paper); }
.menu-list .code { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font: 700 0.6875rem var(--mono, monospace); background: var(--acacia-tint); color: var(--acacia-deep); }
.menu-list strong { display: block; font-size: 0.9062rem; }
.menu-list span.d { font-size: 0.7812rem; color: var(--muted); }
.doc-type { font-size: 0.75rem; color: var(--muted); }

/* Website-style action menu (top of each module) */
.action-menu { margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.action-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 30px; }
.action-menu ul::-webkit-scrollbar { display: none; }
.action-menu li { position: relative; flex: none; display: flex; }
.action-menu a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 0 9px; font: 700 0.75rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; white-space: nowrap; }
.action-menu a:hover, .action-menu a:focus-visible { color: var(--acacia); border-bottom-color: var(--acacia); outline: none; }
.action-menu a.on { color: var(--acacia); border-bottom-color: var(--acacia); }
.action-menu .sep { align-items: center; color: var(--muted); font-size: 1.0625rem; margin: 0 -14px; }
.action-menu .pill { font-style: normal; font-size: 0.6562rem; letter-spacing: 0; padding: 2px 7px; border-radius: 999px; background: var(--marigold); color: var(--ink); }
.action-menu .tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 0.7812rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(21,33,43,.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s .1s, transform .15s .1s, visibility 0s .25s; pointer-events: none; }
.action-menu .tip::before { content: ''; position: absolute; left: 16px; top: -5px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); }
.action-menu .tip.flip { left: auto; right: 0; } .action-menu .tip.flip::before { left: auto; right: 16px; }   /* near the right edge: opens leftwards (app.js) */
.action-menu li:hover .tip, .action-menu a:focus-visible + .tip { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.action-menu { position: relative; }
@media (hover: none) { .action-menu .tip { display: none; } }
/* the same actions as compact buttons in the theme colour: an icon, a green strip on the left and a light green background;
   the main one is filled */
.action-menu.buttons { border-bottom: 0; margin-bottom: 14px; }
.action-menu.buttons ul { column-gap: 6px; row-gap: 6px; }
.action-menu.buttons a { --am: var(--acacia); --am-bg: #f1f7f4; --am-hover: var(--acacia-tint);
  gap: 6px; padding: 6px 11px 6px 9px; margin: 0; border: 1px solid #cfe0d7; border-left: 3px solid var(--am); border-radius: var(--radius);
  background: var(--am-bg); color: var(--ink); font: 600 0.7812rem/1.1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(21,33,43,.06); transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.action-menu.buttons .am-ico { flex: none; width: 14px; height: 14px; color: var(--am); transition: color .15s; }
/* hover, pressed and the current page: filled deep green like the main action */
.action-menu.buttons a:hover, .action-menu.buttons a:focus-visible, .action-menu.buttons a.on, .action-menu.buttons a:active { background: var(--acacia); border-color: var(--acacia); border-left-color: var(--acacia-deep); color: #fff; }
.action-menu.buttons a:hover .am-ico, .action-menu.buttons a:focus-visible .am-ico, .action-menu.buttons a.on .am-ico, .action-menu.buttons a:active .am-ico { color: #fff; }
.action-menu.buttons a:hover, .action-menu.buttons a:focus-visible { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(21,33,43,.14); }
.action-menu.buttons a:active, .action-menu.buttons a.primary:active { background: var(--acacia-deep); border-color: var(--acacia-deep); transform: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.action-menu.buttons a:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; }
.action-menu.buttons a.primary { --am: var(--acacia-deep); background: var(--acacia); border-color: var(--acacia); border-left-color: var(--acacia-deep); color: #fff; }
.action-menu.buttons a.primary .am-ico { color: #fff; }
.action-menu.buttons a.primary:hover, .action-menu.buttons a.primary:focus-visible { background: var(--acacia-deep); border-color: var(--acacia-deep); color: #fff; }
.action-menu.buttons .sep { margin: 0 -4px; }
/* keyboard keys: a raised key with a darker bottom edge; pressed, it goes down onto its edge */
/* a straight green line across the page above the keys, the colour of their stripes */
.action-menu.keys { border-top: 3px solid var(--acacia); padding-top: 12px; }
.action-menu.keys ul { column-gap: 8px; row-gap: 10px; padding-bottom: 4px; }
.action-menu.keys a { padding: 7px 13px; border: 1px solid #c3d4cb; border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #eef5f1 100%); color: var(--ink);
  box-shadow: 0 4px 0 #b4c9be, 0 5px 6px rgba(21,33,43,.12), inset 0 1px 0 #fff; transform: none; }
.action-menu.keys a:hover, .action-menu.keys a:focus-visible, .action-menu.keys a.on {
  background: linear-gradient(180deg, #24806a 0%, var(--acacia) 100%); border-color: var(--acacia-deep); color: #fff;
  box-shadow: 0 4px 0 #0f3a2f, 0 5px 8px rgba(21,33,43,.22), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-1px); }
.action-menu.keys a:active { background: linear-gradient(180deg, var(--acacia) 0%, var(--acacia-deep) 100%); border-color: var(--acacia-deep); color: #fff;
  box-shadow: 0 0 0 #0f3a2f, 0 1px 2px rgba(21,33,43,.2), inset 0 2px 3px rgba(0,0,0,.22); transform: translateY(4px); transition-duration: .05s; }
.action-menu.keys .sep { margin: 0 -2px; padding-bottom: 4px; }
/* a green stripe across the top of each key (darker on the green keys) */
.action-menu.keys a { border-top: 3px solid var(--acacia); padding-top: 5px; }
.action-menu.keys a:hover, .action-menu.keys a:focus-visible, .action-menu.keys a.on, .action-menu.keys a:active,
.action-menu.keys a.primary, .action-menu.keys a.primary:hover, .action-menu.keys a.primary:active { border-top-color: #0f3a2f; }
.action-menu.keys a.primary, .action-menu.keys a.primary:hover, .action-menu.keys a.primary:focus-visible {
  background: linear-gradient(180deg, #24806a 0%, var(--acacia) 100%); border-color: var(--acacia-deep); color: #fff;
  box-shadow: 0 4px 0 #0f3a2f, 0 5px 8px rgba(21,33,43,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.action-menu.keys a.primary:hover, .action-menu.keys a.primary:focus-visible { background: linear-gradient(180deg, var(--acacia) 0%, var(--acacia-deep) 100%); transform: translateY(-1px); }
.action-menu.keys a.primary:active { background: linear-gradient(180deg, var(--acacia) 0%, var(--acacia-deep) 100%);
  box-shadow: 0 0 0 #0f3a2f, 0 1px 2px rgba(21,33,43,.2), inset 0 2px 3px rgba(0,0,0,.22); transform: translateY(4px); transition-duration: .05s; }

/* action buttons everywhere (page headers, form save bars, panels, dialogs, table rows) as the same raised keys, with an action icon (public/js/app.js); "plain" buttons stay flat */
:is(body, .page-head) .btn { border: 1px solid #c3d4cb; border-radius: 7px; background: linear-gradient(180deg, #ffffff 0%, #eef5f1 100%); color: var(--acacia-deep);
  box-shadow: 0 4px 0 #b4c9be, 0 5px 6px rgba(21,33,43,.12), inset 0 1px 0 #fff; margin-bottom: 4px; transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
:is(body, .page-head) .btn:where(:not(.ghost, .plain, .danger)) { background: linear-gradient(180deg, #24806a 0%, var(--acacia) 100%); border-color: var(--acacia-deep); color: #fff;
  box-shadow: 0 4px 0 #0f3a2f, 0 5px 8px rgba(21,33,43,.22), inset 0 1px 0 rgba(255,255,255,.18); }
:is(body, .page-head) .btn:hover, :is(body, .page-head) .btn:focus-visible {
  background: linear-gradient(180deg, var(--acacia) 0%, var(--acacia-deep) 100%); border-color: var(--acacia-deep); color: #fff;
  box-shadow: 0 4px 0 #0f3a2f, 0 5px 8px rgba(21,33,43,.22), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-1px); }
:is(body, .page-head) .btn:active { box-shadow: 0 0 0 #0f3a2f, 0 1px 2px rgba(21,33,43,.2), inset 0 2px 3px rgba(0,0,0,.22); transform: translateY(4px); transition-duration: .05s; }
:is(body, .page-head) .btn.sm { box-shadow: 0 3px 0 #b4c9be, 0 4px 5px rgba(21,33,43,.10), inset 0 1px 0 #fff; margin-bottom: 3px; }
:is(body, .page-head) .btn.sm:hover, :is(body, .page-head) .btn.sm:focus-visible { box-shadow: 0 3px 0 #0f3a2f, 0 4px 6px rgba(21,33,43,.2); }
:is(body, .page-head) .btn.sm:active { transform: translateY(3px); box-shadow: 0 0 0 #0f3a2f, inset 0 2px 3px rgba(0,0,0,.22); }
:is(body, .page-head) .btn.danger { color: var(--danger); border-color: #e3bdb5; background: linear-gradient(180deg, #ffffff 0%, #fbefec 100%); box-shadow: 0 4px 0 #e0b4ab, 0 5px 6px rgba(21,33,43,.10), inset 0 1px 0 #fff; }
:is(body, .page-head) .btn.danger:hover, :is(body, .page-head) .btn.danger:focus-visible { background: linear-gradient(180deg, #c2513e 0%, var(--danger) 100%); border-color: #7d2a1e; color: #fff; box-shadow: 0 4px 0 #7d2a1e, 0 5px 8px rgba(21,33,43,.2); }
:is(body, .page-head) .btn[disabled], :is(body, .page-head) .btn[disabled]:hover { transform: none; }
:is(body, .page-head) .btn { border-top: 3px solid var(--acacia); }
:is(body, .page-head) .btn:where(:not(.ghost, .plain, .danger)), :is(body, .page-head) .btn:hover, :is(body, .page-head) .btn:focus-visible { border-top-color: #0f3a2f; }
:is(body, .page-head) .btn.danger { border-top-color: var(--danger); }
:is(body, .page-head) .btn.danger:hover, :is(body, .page-head) .btn.danger:focus-visible { border-top-color: #7d2a1e; }
@media (prefers-reduced-motion: reduce) { .action-menu.buttons a, .action-menu.buttons a:hover, :is(body, .page-head) .btn, :is(body, .page-head) .btn:hover { transition: none; transform: none; } }
@media (max-width: 760px) { .action-menu ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; column-gap: 22px; } .action-menu .sep { margin: 0 -10px; } .action-menu.buttons ul { column-gap: 6px; padding-bottom: 2px; } }

/* ---- Sales mega-menu (adapted from the Navigate sales menu sample) ---- */
.mega-bar { height: 56px; margin: -8px 0 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); position: relative; z-index: 50; }
.mega-item { position: relative; height: 100%; display: flex; align-items: center; }
.mega-link { height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 14px; color: var(--acacia); text-decoration: none; font: 700 0.9375rem var(--display); position: relative; }
.mega-link::after { content: ""; position: absolute; bottom: 0; left: 12px; right: 12px; height: 3px; background: var(--acacia); border-radius: 3px 3px 0 0; }
.mega-link .chevron { font-size: 0.5625rem; transition: transform .2s ease; }
.mega-item:hover .chevron, .mega-item.open .chevron { transform: rotate(180deg); }
.mega-crumb { color: var(--muted); margin: 0 6px 0 2px; }
.mega-current { font-weight: 600; font-size: 0.85rem; }
.mega-drop { position: absolute; top: 56px; left: -13px; width: 760px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 14px 35px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.mega-item:hover .mega-drop, .mega-item:focus-within .mega-drop, .mega-item.open .mega-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-head { padding: 16px 22px; border-bottom: 1px solid var(--line-2); background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mega-head h3 { font-size: 1rem; margin: 0 0 3px; }
.mega-head p { font-size: 0.7812rem; color: var(--muted); margin: 0; }
.mega-groups { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px; gap: 16px; }
.mega-group h4 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; padding-left: 8px; }
.mega-group a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--ink); transition: background .15s ease, color .15s ease, transform .15s ease; }
.mega-group a:hover, .mega-group a:focus-visible { background: var(--acacia-tint); color: var(--acacia-deep); transform: translateX(3px); outline: none; }
.mega-group a.on { background: var(--acacia-tint); color: var(--acacia-deep); }
.mega-group .icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #f1f3f1; border-radius: 7px; font: 700 0.6562rem/1 var(--mono, monospace); color: var(--ink); transition: background .15s ease; }
.mega-group a:hover .icon, .mega-group a.on .icon { background: var(--acacia); color: #fff; }
.mega-group .l { display: block; font-size: 0.8438rem; font-weight: 600; }
.mega-group .d { display: block; font-size: 0.7188rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 760px) {
  .mega-bar { padding: 0 6px; }
  .mega-drop { left: -7px; width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; }
  .mega-groups { grid-template-columns: 1fr; gap: 8px; }
  .mega-current { display: none; }
}
/* opportunity board */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }
.board-col { background: #eef0ec; border-radius: 12px; padding: 10px; min-height: 180px; }
.board-col h3 { font-size: 0.8125rem; margin: 2px 4px 8px; display: flex; justify-content: space-between; }
.deal { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.deal .t { font-weight: 600; font-size: 0.875rem; }
.deal .m { font-size: 0.75rem; color: var(--muted); }
.deal .row { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bar { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--acacia); border-radius: 99px; }
.bar i.over { background: var(--marigold); }

/* platform: create organisation (form + guidance panel) */
.create-org { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; max-width: 1120px; }
@media (max-width: 1000px) { .create-org { grid-template-columns: 1fr; } }

.badge.unconfirmed { background: var(--marigold-tint); color: #8a5a0c; }

/* ---------- analytics dashboard ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.periods { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.periods a { padding: 7px 12px; border-radius: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.periods a.on { background: var(--acacia); color: #fff; }
.shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
/* the action bar, right: POS · Quote · Invoice · Analytics · Location */
.dash-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.shortcuts .dash-actions a { border: 0; border-radius: 7px; padding: 7px 12px; font-weight: 600; background: transparent; }
.shortcuts .dash-actions a:hover { background: var(--line-2, #f1f3f2); color: var(--acacia); }
.shortcuts .dash-actions a.sc-main { background: var(--acacia); color: #fff; } .shortcuts .dash-actions a.sc-main:hover { filter: brightness(1.08); color: #fff; }
.dash-actions .dash-loc-form { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 4px; padding-left: 8px; border-left: 1px solid var(--line); }
.dash-actions .dash-loc-label { margin: 0; font-size: .9rem; } .dash-actions .dash-loc { border: 0; background-color: transparent; font-weight: 600; padding-right: 26px; }
.dash-actions .dash-loc.on { color: var(--acacia); }
.shortcuts .dash-actions a.sc-add { font-weight: 500; font-size: .75rem; color: var(--acacia); }
@media (max-width: 760px) { .dash-actions { margin-left: 0; width: 100%; justify-content: space-between; } }
.shortcuts a { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.8125rem; color: var(--ink); text-decoration: none; }
.shortcuts a:hover { border-color: var(--acacia); color: var(--acacia); }
.shortcuts .pbar { width: 46px; height: 6px; border-radius: 9px; background: var(--line-2); overflow: hidden; display: inline-block; }
.shortcuts .pbar i { display: block; height: 100%; background: var(--acacia); }
.kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.kpis > .kpi { flex: 1 1 calc(16.66% - 12px); min-width: 160px; }
.kpis > .kpi .k-v { font-size: clamp(1.05rem, 1.35vw, 1.35rem); }
@media (max-width: 1100px) { .kpis > .kpi { flex-basis: calc(33.33% - 12px); } }
@media (max-width: 640px) { .kpis > .kpi { flex-basis: calc(50% - 12px); min-width: 0; } }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.kpi .k-l { font-size: 0.7812rem; color: var(--muted); font-weight: 600; }
.kpi .k-v { font: 700 1.45rem/1.15 var(--display); margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .k-s { font-size: 0.7812rem; color: var(--muted); }
.kpi .up { color: #1e7a4c; font-weight: 700; } .kpi .down { color: #b3261e; font-weight: 700; }
.kpi.pending { background: repeating-linear-gradient(135deg, #fff, #fff 10px, #fafbf8 10px, #fafbf8 20px); }
.kpi.pending .k-v { color: var(--muted); font-size: 1.05rem; white-space: normal; }
.kpi.kpi-main { border-color: var(--acacia); box-shadow: 0 0 0 1px var(--acacia) inset; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-grid.four { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
@media (max-width: 1000px) { .dash-grid, .dash-grid.even { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.card h2 { font-size: 1rem; margin: 0 0 2px; }
.card .c-sub { font-size: 0.7812rem; color: var(--muted); margin: 0 0 12px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart .axis { font-size: 0.6875rem; fill: var(--muted); }
.chart .bar { fill: color-mix(in srgb, var(--acacia) 55%, #fff); } .chart .bar.now { fill: var(--acacia); }
.chart .line { fill: none; stroke: var(--marigold); stroke-width: 2.5; stroke-linejoin: round; }
.chart .dot { fill: #fff; stroke: var(--marigold); stroke-width: 2; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.7812rem; margin-top: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.bar, .sw.cash { background: var(--acacia); } .sw.line, .sw.credit { background: var(--marigold); } .sw.other { background: #c9cfc6; }
.hbars .hb { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.hbars .hb-l { font-size: 0.8438rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbars .hb-bar { height: 12px; background: var(--line-2); border-radius: 9px; overflow: hidden; }
.hbars .hb-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--acacia) 50%, #fff); border-radius: 9px; } .hbars .hb-bar i.top { background: var(--acacia); }
.hbars .hb-v { font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut .track { fill: none; stroke: var(--line-2); stroke-width: 18; }
.donut .seg { fill: none; stroke-width: 18; } .donut .seg.cash { stroke: var(--acacia); } .donut .seg.credit { stroke: var(--marigold); } .donut .seg.other { stroke: #c9cfc6; }
.donut .d-big { font: 700 0.9375rem var(--display); fill: var(--ink); } .donut .d-small { font-size: 0.625rem; fill: var(--muted); }
.d-legend { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; flex: 1; min-width: 170px; }
.d-legend li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.d-legend li strong { grid-column: 2; font-variant-numeric: tabular-nums; } .d-legend li .muted { grid-column: 3; grid-row: 1 / span 2; }
.lb { width: 100%; border-collapse: collapse; font-size: 0.8438rem; }
.lb td { padding: 7px 4px; border-bottom: 1px solid var(--line-2); } .lb tr:last-child td { border-bottom: 0; }
.lb .rank { width: 30px; } .lb .rank span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line-2); font-weight: 700; font-size: 0.75rem; }
.lb tr:nth-child(1) .rank span { background: #f3c14b; } .lb tr:nth-child(2) .rank span { background: #d6dbd4; } .lb tr:nth-child(3) .rank span { background: #e4b58a; }
.alist { list-style: none; margin: 0; padding: 0; } .alist li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 0.8438rem; }
.alist li:last-child { border-bottom: 0; } .alist .muted { font-size: 0.75rem; }
.big-n { font: 700 1.6rem var(--display); } .ring { display: flex; gap: 14px; align-items: center; }
.conv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .conv { grid-template-columns: 1fr; } }
.conv .cv { text-align: center; padding: 8px; }
.conv .cv .pct { font: 700 1.7rem var(--display); color: var(--acacia); }
.gauge { height: 8px; border-radius: 9px; background: var(--line-2); overflow: hidden; margin: 6px 0; } .gauge i { display: block; height: 100%; background: var(--acacia); }

/* ---------- cockpit ---------- */
.cockpit { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(21,33,43,.18); }
.cockpit .inst { background: radial-gradient(120% 140% at 0% 0%, #213544 0%, #15212b 60%); color: #e9eef1; padding: 18px 20px; min-width: 0; position: relative; }
.cockpit .inst-sales { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acacia) 85%, #15212b) 0%, color-mix(in srgb, var(--acacia) 45%, #15212b) 55%, #15212b 100%); }
.cockpit .i-l { font-size: 0.7188rem; letter-spacing: .06em; text-transform: uppercase; color: #9fb3bd; font-weight: 700; }
.cockpit .i-v { font: 700 clamp(1.4rem, 2.2vw, 2rem)/1.1 var(--display); margin: 8px 0 6px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cockpit .i-s { font-size: 0.7812rem; color: #c3d0d6; } .cockpit .i-s.center { text-align: center; margin-top: -2px; }
.cockpit .dim { color: #8ea3ad; font-size: 0.7188rem; }
.cockpit .up { color: #6fe0b0; font-weight: 700; } .cockpit .down { color: #ff9a86; font-weight: 700; } .cockpit .flat { color: #8ea3ad; }
.cockpit a { color: #9fe3c8; }
.cockpit .i-spark { margin-top: 12px; display: flex; align-items: flex-end; gap: 8px; } .cockpit .i-spark span { font-size: 0.6875rem; color: #8ea3ad; white-space: nowrap; }
.cockpit .spark { width: 100%; height: 40px; display: block; }
.cockpit .gauge-svg { width: 100%; max-width: 190px; height: auto; display: block; margin: 6px auto 4px; }
.cockpit .i-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8125rem; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); color: #c3d0d6; }
.cockpit .i-row strong { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cockpit .i-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cockpit .i-row strong.warn { color: #ffb4a5; }
@media (max-width: 1200px) { .cockpit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cockpit { grid-template-columns: 1fr; } }
.sc-primary { background: var(--acacia) !important; color: #fff !important; border-color: var(--acacia) !important; font-weight: 700; }
.mini-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
.mini-stats > div { background: var(--paper); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.mini-stats span { display: block; font-size: 0.7188rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stats strong { font-size: 0.8438rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-stats .up { color: #1e7a4c; } .mini-stats .down { color: #b3261e; } .mini-stats .flat { color: var(--muted); }
@media (max-width: 760px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sw.dash { background: repeating-linear-gradient(90deg, #8a96a0 0 5px, transparent 5px 8px); height: 3px; border-radius: 0; vertical-align: 3px; width: 18px; }
.sw.today { background: #e3a33b; width: 2px; height: 12px; border-radius: 0; }
.ytd-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 0 10px; }
.kpi .flat { color: var(--muted); }
@media (max-width: 640px) {
  .dash-head .periods { width: 100%; } .dash-head .periods a { flex: 1; text-align: center; padding: 7px 6px; }
  .card { padding: 14px; } .hbars .hb { grid-template-columns: minmax(80px, 38%) 1fr; } .hbars .hb-v { grid-column: 2; font-size: 0.75rem; }
}

/* ---------- branding ---------- */
.brand-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.theme-card { position: relative; display: block; border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; background: #fff; }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:checked) { border-color: var(--acacia); box-shadow: 0 0 0 2px var(--acacia); }
.theme-card .sw-row { display: flex; height: 38px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.theme-card .sw-row i { flex: 1; } .theme-card .sw-row i:first-child { flex: 2.2; }
.theme-card .t-name { font-size: 0.8125rem; font-weight: 700; } .theme-card .t-sub { font-size: 0.7188rem; color: var(--muted); }
.brand-upload { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.brand-upload .preview { width: 120px; height: 120px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; background: repeating-conic-gradient(#f3f4f1 0 25%, #fff 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.brand-upload .preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-upload .preview.fav { width: 64px; height: 64px; }
.brand-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.brand-preview .bp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; }
.brand-preview .bp-body { padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--paper); }
.doc-social { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.6875rem; color: #555; margin-top: 6px; }
@media (max-width: 640px) { .brand-upload { grid-template-columns: 1fr; } }

/* document lists */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; }
.filters input[type=search] { flex: 1 1 220px; max-width: 320px; }
.filters select { width: auto; max-width: 200px; }
.filters input[type=date] { width: auto; }
.doc-list td { vertical-align: top; }
.doc-list .row-actions { white-space: nowrap; }
.doc-list .row-actions .btn { padding: 4px 9px; }
.doc-list tbody tr:hover { background: var(--acacia-tint); }

/* compact document table: one value per column, one line per row */
.doc-list.compact { font-size: 0.7812rem; width: 100%; }
.doc-list.compact th, .doc-list.compact td { padding: 6px 6px; white-space: nowrap; vertical-align: middle; }
.doc-list.compact thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); font-size: 0.6562rem; text-transform: uppercase; letter-spacing: .02em; }
.doc-list.compact td.clip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.doc-list.compact td.clip.narrow { max-width: 100px; }
.doc-list.compact td.right, .doc-list.compact th.right { text-align: right; font-variant-numeric: tabular-nums; }
.doc-list.compact .strong { font-weight: 700; }
.doc-list.compact .badge { font-size: 0.6875rem; padding: 2px 7px; }
.doc-list.compact .row-actions a { display: inline-grid; place-items: center; width: 26px; height: 24px; padding: 0; margin-left: 2px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--acacia); background: #fff; }
.doc-list.compact .row-actions a:hover { border-color: var(--acacia); background: var(--acacia-tint); }
.doc-list.compact tbody tr:nth-child(even) { background: #fafbf8; }
.doc-list.compact tbody tr:hover { background: var(--acacia-tint); }
.doc-scroll { max-height: calc(100vh - 220px); overflow: auto; }
.doc-list.compact td.clip.narrow { max-width: 96px; }
/* keep the document number visible while scrolling sideways */
.doc-list.compact th:first-child, .doc-list.compact td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line-2); }
.doc-list.compact thead th:first-child { z-index: 2; }
.doc-list.compact tbody tr:nth-child(even) td:first-child { background: #fafbf8; }
.doc-list.compact tbody tr:hover td:first-child { background: var(--acacia-tint); }
.doc-list.compact .row-actions .icon-btn { display: inline-grid; place-items: center; width: 26px; height: 24px; padding: 0; margin-left: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--acacia); cursor: pointer; }
.doc-list.compact .row-actions .icon-btn:hover { border-color: var(--acacia); background: var(--acacia-tint); }

/* receipt allocation summary */
.pay-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2); }
.pay-summary > div { background: #fff; padding: 10px 14px; }
.pay-summary span { display: block; font-size: 0.75rem; color: var(--muted); }
.pay-summary strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pay-summary .highlight { background: var(--acacia-tint); }
@media (max-width: 700px) { .pay-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* promotions & pricing controls in the line editor */
.promo-line td { background: #f3faf6; }
.promo-tag { font-size: 0.6875rem; font-weight: 700; color: var(--acacia); margin-top: 3px; }
.price-warn { font-size: 0.7188rem; color: #b3261e; margin-top: 3px; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; }
.bulk-bar select, .bulk-bar input { width: auto; }
.promo-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; margin-bottom: 16px; }
.promo-type { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; }
.promo-type:hover { border-color: var(--acacia); background: var(--acacia-tint); }
.promo-type strong { display: block; color: var(--acacia-deep); }
.promo-type span { display: block; font-size: 0.7812rem; color: var(--muted); margin-top: 3px; }
.tier-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; max-width: 420px; }
.promo-preview { padding: 10px 12px; border-radius: 10px; background: var(--acacia-tint); font-weight: 600; }
.promo-panel { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.promo-list { margin: 0; padding-left: 18px; flex-basis: 100%; font-size: 0.8125rem; }
.group-pick { display: flex; gap: 6px; align-items: center; }
.group-pick select { flex: 1; min-width: 0; }
/* headings in a row with an action link take the free width instead of wrapping early */
.row.between > h2, .row.between > h3, .panel-head > h2, .panel-head > h3 { flex: 1 1 auto; min-width: 0; }
.row.between > a, .panel-head > a { flex: none; }
.how-to-pay { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; line-height: 1.6; }
.how-to-pay > strong { display: block; margin-bottom: 2px; }
.lb th { padding: 4px 4px 6px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lb td { white-space: nowrap; }
/* ---------------- point of sale ---------------- */
.counter-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.counter-pick label { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.counter-pick label:has(input:checked) { border-color: var(--acacia); background: var(--acacia-tint); }
.counter-pick label.busy { opacity: .6; cursor: not-allowed; }
.counter-pick input { position: absolute; opacity: 0; }
.counter-pick .pn { font-weight: 700; }
.pos { display: flex; flex-direction: column; gap: 10px; }
.pos-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pos-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 12px; height: calc(100vh - 190px); min-height: 520px; }
.pos-items, .pos-cart { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pos-scan input { width: 100%; font-size: 1.05rem; padding: 12px 14px; border: 2px solid var(--acacia); border-radius: 10px; }
.pos-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; flex: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.pos-cats::-webkit-scrollbar { display: none; }
.pos-cats button, .pos-methods button, .pos-quick button { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .8rem; cursor: pointer; }
.pos-cats button.on, .pos-methods button.on { background: var(--acacia); border-color: var(--acacia); color: #fff; }
.pos-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 8px; overflow-y: auto; align-content: start; }
.pos-tile { display: grid; gap: 2px; text-align: left; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; min-height: 84px; }
.pos-tile:hover, .pos-tile:focus-visible { border-color: var(--acacia); background: var(--acacia-tint); }
.pos-tile .n { font-weight: 700; font-size: .8rem; line-height: 1.2; }
.pos-tile .s { font-size: .68rem; color: var(--muted); }
.pos-tile .p { font-weight: 700; color: var(--acacia-deep); margin-top: auto; }
.pos-tile .q { font-size: .7rem; color: var(--muted); }
/* the cart: a clear numbered list with large quantity controls */
.pos-cart-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pos-lines-head, .pos-line { display: grid; grid-template-columns: 20px minmax(0, 1fr) 108px 84px 54px 58px 92px 30px; gap: 6px; align-items: center; }
.pos[data-discount="0"] .pos-lines-head, .pos[data-discount="0"] .pos-line { grid-template-columns: 20px minmax(0, 1fr) 108px 84px 58px 92px 30px; }
.pos-lines-head { padding: 0 8px 4px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid var(--line); }
.pos-lines-head .c { text-align: center; } .pos-lines-head .r { text-align: right; }
.pos-lines { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 120px; }
.pos-empty { padding: 36px 0; text-align: center; }
.pos-line { padding: 7px 8px; border-bottom: 1px solid var(--line-2); font-size: .9rem; border-radius: 8px; transition: background .4s; }
.pos-line:nth-child(even) { background: #fafbf8; }
.pos-line.hit { background: var(--acacia-tint); box-shadow: inset 3px 0 0 var(--acacia); }
.pos-line .no { color: var(--muted); font-size: .75rem; text-align: right; }
.pos-line .nm { display: flex; flex-direction: column; min-width: 0; } .pos-line .nm strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.25; }   /* up to two lines: the full name, without widening the row */ .pos-line .nm span { font-size: .72rem; }
.pos-line .qt { display: flex; align-items: center; justify-content: center; }
.pos-line .qt button { width: 30px; height: 32px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--acacia-deep); }
.pos-line .qt button:first-child { border-radius: 8px 0 0 8px; } .pos-line .qt button:last-child { border-radius: 0 8px 8px 0; }
.pos-line .qt button:hover { background: var(--acacia-tint); }
.pos-line .qt input { width: 48px; height: 32px; text-align: center; padding: 4px; border-left: 0; border-right: 0; border-radius: 0; font-weight: 700; }
.pos-line .pr, .pos-line .ds { padding: 6px; text-align: right; height: 32px; min-width: 0; width: 100%; } .pos-line .pr[readonly] { border-color: transparent; background: transparent; }
.pos-line .lt { text-align: right; font-variant-numeric: tabular-nums; }
.pos-line .rm { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--danger); cursor: pointer; font-size: .95rem; }
.pos-line .rm:hover { border-color: var(--danger); background: #fff5f4; }
/* totals and payment side by side, so the list keeps the height */
.pos-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pos-totals > div { display: flex; justify-content: space-between; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pos-totals .grand { font-size: 1.25rem; margin-top: 4px; }
.pos-pay { display: grid; gap: 8px; }
.pos-methods, .pos-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.pos-due { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: var(--paper); font-size: 1.05rem; }
.pos-due.change { background: var(--acacia-tint); color: var(--acacia-deep); }
.pos-msg { min-height: 1.2em; font-size: .82rem; color: var(--acacia-deep); } .pos-msg.bad { color: var(--danger); }
.pos-recent { font-size: .8rem; } .pos-recent .row { padding: 3px 0; }
@media (max-width: 1100px) { .pos-grid { grid-template-columns: 1fr; height: auto; } .pos-lines { max-height: 50vh; } .pos-tiles { max-height: 45vh; } .pos-foot { grid-template-columns: 1fr; } }
:fullscreen .shell { grid-template-columns: 0 1fr; } :fullscreen .sidebar, :fullscreen .topbar { display: none; }
span.pr { text-align: right; font-variant-numeric: tabular-nums; padding: 0 6px; }
.product-image { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; }
.pi-preview { width: 96px; height: 96px; flex: none; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.pi-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.p-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); display: block; background: #fff; }
.p-thumb.none { background: var(--paper); }
.pos-tile .im { width: 100%; height: 72px; object-fit: contain; border-radius: 6px; background: #fff; margin-bottom: 2px; }
.product-image { display: flex; gap: 14px; align-items: flex-start; }
.pi-preview { width: 96px; height: 96px; flex: none; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.pi-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.p-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); display: block; background: #fff; }
.pos-tile .im { width: 100%; height: 72px; object-fit: contain; border-radius: 6px; background: #fff; margin-bottom: 2px; }
.coa-statement { margin: 18px 0 8px; font-size: 1.05rem; }
.coa-group { margin-bottom: 12px; }
.coa-group .panel-head h3 { margin: 0; font-size: .95rem; }
.statement tr.void td { color: var(--muted); text-decoration: line-through; }
.statement tr.strong td { background: var(--paper); }
/* product list: pictures as thumbnails or as links; rows below the minimum stock level in red */
.pic-cell .pic-link { display: none; }
.pics-as-links .pic-cell .p-thumb { display: none; }
.pics-as-links .pic-cell .pic-link { display: inline; }
.seg { display: inline-flex; align-items: center; gap: 0; }
.seg > span { margin-right: 8px; }
.seg button { padding: 6px 12px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .78rem; cursor: pointer; }
.seg button:first-of-type { border-radius: 8px 0 0 8px; } .seg button:last-of-type { border-radius: 0 8px 8px 0; border-left: 0; }
.seg button.on { background: var(--acacia); border-color: var(--acacia); color: #fff; }
tr.below-min td { background: #fdecea !important; }
tr.below-min td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.qty-low { color: var(--danger); font-weight: 700; }
table tfoot tr.totals td { font-weight: 700; background: var(--paper); border-top: 2px solid var(--line); position: sticky; bottom: 0; }
.pos.no-pics .pos-tile .im { display: none; }
.pos.no-pics .pos-tile { min-height: 64px; }
.stock-total { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr)); gap: 14px; align-items: center; margin-top: 10px; padding: 12px 16px; }
.stock-total .st-val { display: flex; flex-direction: column; text-align: right; }
.stock-total .st-val span { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.stock-total .st-val strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.stock-total.st5 { grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(100px, 1fr)); }   /* five figures (attendance) */
@media (max-width: 800px) { .stock-total, .stock-total.st5 { grid-template-columns: 1fr 1fr; } .stock-total .st-label { grid-column: 1 / -1; } }
.ready-links { display: grid; gap: 8px; }
.ready-link { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; }
.ready-link:hover { border-color: var(--acacia); background: var(--acacia-tint); }
.ready-link strong { color: var(--acacia-deep); }
/* ---------------- organised forms: header, sections, side column, pinned action bar ---------------- */
.page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-head > .doc-actions, .page-head > .btn { flex: 0 1 auto; max-width: 100%; min-width: 0; }   /* the buttons wrap onto more lines on a phone instead of running off the screen */
.page-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 16px; align-items: start; }
.form-layout > .action-bar { grid-column: 1 / -1; }
.form-card { display: flex; flex-direction: column; gap: 12px; }
.card-title { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.grid-4 .span-3 { grid-column: span 3; } .grid-4 .span-2 { grid-column: span 2; }
.grid-2 > .field, .grid-3 > .field, .grid-4 > .field, .grid-4 > div { min-width: 0; }
.label-like { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.readout { padding: 9px 11px; border: 1px dashed var(--line); border-radius: 8px; background: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; }
.readout.neg { color: var(--danger); }
.group-pick { display: flex; gap: 6px; align-items: center; } .group-pick select { flex: 1; min-width: 0; } .group-pick .btn { flex: none; }
.props-table { width: 100%; } .props-table input { width: 100%; }
.form-options { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--line); }
.form-options .promo-note { font-size: .78rem; color: var(--muted); }
.action-bar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-top: 4px; background: rgba(255, 255, 255, .97); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -6px 20px rgba(16, 24, 20, .07); }
.action-bar .note { font-size: .8rem; color: var(--muted); flex: 1 1 260px; min-width: 0; }
.action-bar .buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .form-layout { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 .span-3 { grid-column: span 2; } }
@media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr; } .grid-4 .span-3, .grid-4 .span-2 { grid-column: auto; } }
.form-options .check { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .form-options .check { white-space: normal; } }
.form-options .promo-panel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; border: 0; padding: 0; margin: 0; background: none; }
.grid-2 select, .grid-3 select, .grid-4 select, .grid-2 input, .grid-3 input, .grid-4 input { width: 100%; min-width: 0; max-width: 100%; }
/* …but never a tick box or radio: stretched to the row's width, it pushes its label aside (anywhere inside a grid) */
.grid-2 input[type=checkbox], .grid-3 input[type=checkbox], .grid-4 input[type=checkbox],
.grid-2 input[type=radio], .grid-3 input[type=radio], .grid-4 input[type=radio] { width: auto; flex: none; }
.action-bar .buttons { flex-wrap: nowrap; flex: none; }
@media (max-width: 760px) {   /* phones: the reason box takes the width and the buttons wrap under it */
  .action-bar .buttons { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
  .action-bar .buttons input { min-width: 0 !important; flex: 1 1 100%; }
}
.form-side .product-image { flex-direction: column; align-items: stretch; }
.form-side .pi-preview { width: 100%; height: 150px; }
.form-side input[type=file] { width: 100%; }
.serial-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 4px 12px; max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
[data-stock-form] textarea[data-serials] { font-family: var(--mono, ui-monospace, monospace); }
.serial-btn { display: block; margin-top: 4px; font-size: .75rem; }
.serial-btn.incomplete { color: var(--danger); }
.journal-panel .panel-head .badge { margin-left: auto; }
.pending-item summary { cursor: pointer; list-style: none; }
.pending-item[open] summary { margin-bottom: 8px; }
.je-lines select, .je-lines input { width: 100%; }
.tb tr.tb-statement td { background: var(--acacia-tint); font-weight: 700; font-size: .78rem; letter-spacing: .03em; }
.tb tr.tb-group td { font-weight: 600; color: var(--acacia-deep); padding-top: 10px; }
.tb tr.tb-sub td { border-top: 1px solid var(--line); font-weight: 600; font-size: .8rem; color: var(--muted); }
details.journal-panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
details.journal-panel > summary::-webkit-details-marker { display: none; }
details.journal-panel > summary h2 { margin: 0; }
details.journal-panel .journal-sum { flex: 1 1 auto; }
details.journal-panel .journal-toggle { color: var(--acacia-deep); font-weight: 600; }
details.journal-panel .when-open, details.journal-panel[open] .when-closed { display: none; }
details.journal-panel[open] .when-open { display: inline; }
@media print { details.journal-panel { display: none; } }
a.strike { text-decoration: line-through; }
/* ---------------- accounting ---------------- */
.acc-tabs { margin-bottom: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 3px; }
.kpi-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.kpi-value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-chg.up { color: var(--acacia-deep); } .kpi-chg.down { color: var(--danger); }
.trend { width: 100%; min-width: 560px; height: auto; }
.trend .axis { stroke: var(--line); } .trend .tick { font-size: 10px; fill: var(--muted); }
.trend .b-rev { fill: #9cc5b8; } .trend .b-gp { fill: var(--acacia, #1e6b57); } .trend .l-pr { stroke: #d08a1c; stroke-width: 2.5; } .trend .d-pr { fill: #d08a1c; }
.legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
.legend .lg.rev { background: #9cc5b8; } .legend .lg.gp { background: var(--acacia, #1e6b57); } .legend .lg.pr { background: #d08a1c; border-radius: 50%; }
.ratio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 12px; }
.ratio-card h3, .dash-3 h3 { margin: 0 0 8px; font-size: .95rem; }
.ratio-card td.good { color: var(--acacia-deep); } .ratio-card td.bad { color: var(--danger); }
.ratio-card { min-width: 0; overflow-x: auto; } .ratio-card td.small { white-space: normal; min-width: 160px; }   /* the explanation wraps; figures stay on one line */
.dash-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.barline { display: block; height: 8px; border-radius: 4px; background: #9cc5b8; min-width: 2px; } .barline.late { background: #e0a458; }
table.fin tr.fin-section td { background: var(--acacia-tint); font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }
table.fin tr.fin-group td { font-weight: 700; padding-top: 12px; color: var(--acacia-deep); }
table.fin tr.fin-line td:nth-child(2) { padding-left: 22px; }
table.fin tr.fin-subtotal td { font-weight: 600; border-top: 1px solid var(--line); }
table.fin tr.fin-total td { font-weight: 700; border-top: 1px solid var(--ink, #333); background: #fafbf8; }
table.fin tr.fin-grand td { font-weight: 800; border-top: 2px solid var(--ink, #333); border-bottom: 3px double var(--ink, #333); background: #f3f6f2; }
.budget-grid input.num { width: 96px; }
.budget-grid tr.bg-group td { background: var(--acacia-tint); font-weight: 700; font-size: .78rem; }
/* ---------------- subscription: renew, extension, expiry flag ---------------- */
.renew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.cycle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.cycle { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.cycle.on { border-color: var(--acacia); background: var(--acacia-tint); }
.expiry-flag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #b42318; color: #fff; padding: 9px 16px; font-weight: 600; font-size: .88rem; }
.expiry-flag a.btn { background: #fff; color: #b42318; border-color: #fff; }

/* purchasing: serial / batch entry on purchase lines */
.track-box { margin-top: 6px; }
.track-box textarea { width: 100%; min-width: 200px; }

/* small action forms (e.g. Activate / Deactivate) sit inline with the row's buttons */
.row-actions form, form.inline { display: inline; }

/* ---------------- compact record forms (customer, supplier): one card, sections with the title on the left ---------------- */
.rec-form { max-width: 1040px; background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rec-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 22px; background: var(--acacia-tint); border-bottom: 1px solid var(--line); font-size: .86rem; }
.rec-status.off { background: #fdf3f2; }
.rec-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 28px; padding: 16px 22px 6px; }
.rec-sec + .rec-sec { border-top: 1px solid var(--line); }
.rec-sec > header h3 { margin: 2px 0 0; font-size: .92rem; }
.rec-sec > header p { margin: 3px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.rec-grid > .w2 { grid-column: span 2; } .rec-grid > .w3 { grid-column: 1 / -1; }
.rec-form .field { margin: 0 0 12px; }
.rec-form .field .hint { font-size: .74rem; margin-top: 3px; }
.rec-form .opt-row { display: flex; gap: 18px; align-items: center; min-height: 40px; flex-wrap: wrap; }
.rec-form .group-pick { display: flex; gap: 6px; align-items: center; }
.rec-form .group-pick select { flex: 1 1 auto; min-width: 0; width: auto; }
.rec-form .group-pick .btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
.rec-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); background: #fafbf8; position: sticky; bottom: 0; }
.rec-actions .buttons { display: flex; gap: 8px; }
.rec-below { max-width: 1040px; margin-top: 12px; }
@media (max-width: 820px) { .rec-sec { grid-template-columns: minmax(0, 1fr); } .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rec-grid { grid-template-columns: minmax(0, 1fr); } .rec-grid > .w2 { grid-column: auto; } }

/* ---------------- document line grid (sales, purchasing, journals): a structured table — fields fill their cells ---------------- */
table.line-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
table.line-grid th { padding: 9px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #f7f8f5;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.line-grid th.right { text-align: right; }
table.line-grid td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; background: #fff; }
table.line-grid th:last-child, table.line-grid td:last-child { border-right: 0; }
table.line-grid td input, table.line-grid td select, table.line-grid td textarea { display: block; width: 100%; min-width: 0; height: 38px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: .88rem; }
table.line-grid td select { padding-right: 24px; text-overflow: ellipsis; }
table.line-grid td input:focus, table.line-grid td select:focus, table.line-grid td textarea:focus { outline: 2px solid var(--acacia); outline-offset: -2px; box-shadow: none; background: #fff; }
table.line-grid td.num input { text-align: right; font-variant-numeric: tabular-nums; }
table.line-grid td.amount { padding: 0 10px; line-height: 38px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fbfbf9; }
table.line-grid td.act { text-align: center; }
table.line-grid .rm { width: 100%; height: 38px; border: 0; background: none; color: var(--muted); font-size: 1.05rem; cursor: pointer; }
table.line-grid .rm:hover { color: var(--danger); background: #fdf3f2; }
table.line-grid tbody tr:hover td:not(.amount) { background: #fcfdfb; }
table.line-grid td input[type=hidden] { display: none !important; }
table.line-grid .stack-cell > [data-f=account_id], table.line-grid .stack-cell > .track-box { border-top: 1px dashed var(--line); }
table.line-grid .track-box { padding: 6px 10px 8px; }
table.line-grid .track-box textarea { height: auto; min-height: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
table.line-grid .track-box.track-batch { display: flex; gap: 8px; }
table.line-grid .track-box label { flex: 1; display: flex; flex-direction: column; gap: 3px; }
table.line-grid .track-box label input { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

table.line-grid td .promo-tag, table.line-grid td .price-warn, table.line-grid td .serial-btn { display: block; margin: 0; padding: 5px 10px; border-top: 1px dashed var(--line); font-size: .78rem; text-align: left; }
table.line-grid td .serial-btn { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; }
table.line-grid tr.promo-line td { background: #f6faf7; }

table.line-grid tfoot td { padding: 8px 10px; background: #f7f8f5; font-weight: 700; border-right: 0; font-variant-numeric: tabular-nums; }
table.line-grid tfoot td.right { text-align: right; }

/* ---------------- compact document header (sales, purchasing, journals): normal fields, tight 4-column grid ---------------- */
.doc-head-card { padding: 14px 18px 10px; gap: 8px; }
.doc-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: start; }
.doc-head .field { margin: 0; min-width: 0; }
.doc-head .field > label, .doc-head .field > .label { font-size: .8rem; margin-bottom: 4px; }
.doc-head input:not([type=checkbox]):not([type=radio]), .doc-head select { height: 38px; padding-top: 0; padding-bottom: 0; min-width: 0; text-overflow: ellipsis; }
.doc-head .hint { font-size: .74rem; margin-top: 3px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-head .hint:empty { display: none; }
.doc-head .head-static { min-height: 38px; display: flex; align-items: center; font-size: .9rem; }
.doc-head-card .form-options { margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); gap: 6px 22px; }
@media (max-width: 900px) { .doc-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .doc-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- searchable drop-down (document line pickers) ---------------- */
.combo { display: block; position: relative; }
.combo > select.combo-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.combo > input.combo-input { cursor: pointer; padding-right: 30px; text-overflow: ellipsis; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }   /* a drop-down you can also type into */
.combo > input.combo-input[aria-expanded="true"] { cursor: text; }
.combo > input.combo-input.combo-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .15); }
table.line-grid td .combo-input { padding-right: 26px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 9px center; text-overflow: ellipsis; }
table.line-grid td .combo-input::placeholder { color: var(--muted); }
.combo-pop { position: fixed; z-index: 1000; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: 4px; font-size: .88rem; }
.combo-item.combo-create { color: var(--primary, #1e6b57); font-weight: 600; border-top: 1px solid var(--line, #e3e6e4); margin-top: 2px; }
.combo-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item.muted { color: var(--muted); font-style: italic; }
.combo-item.current { font-weight: 600; }
.combo-item.active, .combo-item:hover { background: var(--acacia-tint); }
.combo-group { padding: 8px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.combo-none { padding: 8px 10px; color: var(--muted); font-size: .82rem; }

.costing-options { display: grid; gap: 8px; }
.costing-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.costing-option.on { border-color: var(--acacia); background: var(--acacia-tint); }
.costing-option input { margin-top: 3px; }

/* ---------------- record forms, compact (products, customers, suppliers): smaller type and fields ---------------- */
.rec-sec { padding: 12px 20px 2px; gap: 2px 24px; grid-template-columns: 180px minmax(0, 1fr); }
.rec-sec > header h3 { font-size: .86rem; }
.rec-sec > header p { font-size: .74rem; }
.rec-form .field { margin: 0 0 10px; }
.rec-form .field > label, .rec-form .field > .label-like, .rec-form .field > span.small { font-size: .76rem; margin-bottom: 3px; }
.rec-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .rec-form select, .rec-form textarea { font-size: .88rem; }
.rec-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .rec-form select { height: 36px; padding-top: 0; padding-bottom: 0; }
.rec-form .field .hint { font-size: .72rem; }
.rec-form .readout { min-height: 36px; display: flex; align-items: center; font-size: .9rem; font-weight: 600; }
.rec-form .group-pick .icon-pick { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: .95rem; line-height: 1; }
.rec-form .props-table { width: 100%; }
.rec-form .props-table th { font-size: .72rem; }
.rec-form .product-image { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.rec-status label.check { font-size: .84rem; }
@media (max-width: 820px) { .rec-sec { grid-template-columns: minmax(0, 1fr); } }

table.line-grid td.ro-cell { padding: 6px 10px; font-size: .84rem; background: #fbfbf9; line-height: 1.3; }

.ser-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.ser-row { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ser-row:hover { background: var(--acacia-tint); }
.ser-row .muted { margin-left: auto; }
.pos-line .ser-chosen { display: block; color: var(--muted); line-height: 1.3; white-space: normal; }

table.count-grid td.ro-cell.neg { color: var(--danger); font-weight: 600; }
table.count-grid td.ro-cell.pos { color: var(--acacia); font-weight: 600; }
table.count-grid { min-width: 720px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar .fb-search { flex: 1 1 240px; max-width: 320px; }
.filter-bar select { width: auto; max-width: 190px; height: 36px; font-size: .86rem; }
.filter-bar select.on { border-color: var(--acacia); background-color: var(--acacia-tint); font-weight: 600; }

.dash-loc { width: auto; height: 34px; font-size: .86rem; }
.dash-loc.on { border-color: var(--acacia); background-color: var(--acacia-tint); font-weight: 600; }

.dash-loc-form { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dash-loc-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dash-loc-form .dash-loc { border: 0; background-color: transparent; font-weight: 600; }
.dash-loc-form:focus-within { border-color: var(--acacia); }

/* the Location control as a shortcut pill (after "+ New invoice") */
.shortcuts .dash-loc-form { gap: 6px; padding: 0 4px 0 12px; border-radius: 999px; font-size: .8125rem; }
.shortcuts .dash-loc-label { font-size: .72rem; }
.shortcuts .dash-loc-form .dash-loc { height: 32px; padding: 0 26px 0 6px; font-size: .8125rem; width: auto; }
.shortcuts .dash-loc-form a { border: 0; padding: 0 8px 0 2px; background: none; }

.tg-table td { vertical-align: middle; }
.tg-table .tg-input { width: 160px; height: 34px; text-align: right; }
.tg-table .tg-input.sm { width: 130px; height: 30px; font-size: .85rem; }
.tg-badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-right: 4px; vertical-align: 1px; }
.tg-b-organisation { background: #e6f1ee; color: var(--acacia); }
.tg-b-branch { background: #eef1f8; color: #3c4f7a; }
.tg-b-staff { background: #f4f1ea; color: #6b5a2e; }
.tg-row.tg-organisation td { background: #fafbf8; }
.tg-sub-row td { border-top: 0 !important; }
.tg-sub summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.tg-sub[open] summary { color: var(--acacia); }
.tg-sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 4px; }
.tg-sub-table th { font-size: .7rem; }
.tg-over { color: var(--danger); font-weight: 600; }
@media (max-width: 900px) { .tg-sub-grid { grid-template-columns: minmax(0, 1fr); } }

.cc-set { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; }
.cc-set legend { font-size: .78rem; font-weight: 700; padding: 0 4px; }
.cc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin-top: 4px; }

.dim-rules select { height: 32px; font-size: .84rem; }
.dim-rules .cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#dlg-acc { max-width: min(960px, 96vw); }

.dims-cell { vertical-align: middle !important; }
.line-dims { padding: 4px 6px; }
.dims-btn { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 3px 6px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; }
.dims-btn:hover, .dims-btn:focus-visible { border-color: var(--acacia); background: var(--acacia-tint); }
.dims-ico { color: var(--acacia); font-size: .9rem; }
[data-dims-sum] { display: flex; flex-wrap: wrap; gap: 3px; }
.dc { font: 600 .68rem/1.5 var(--mono, ui-monospace, monospace); padding: 0 5px; border-radius: 5px; }
.dc.pick { background: var(--acacia); color: #fff; }
.dc.auto { background: var(--acacia-tint); color: var(--acacia); border: 1px dotted var(--acacia); }
.dc.none { color: var(--muted); font-weight: 500; font-family: inherit; font-size: .76rem; }
.dlg-dims { width: min(560px, 94vw); padding: 0; border: 0; border-radius: 16px; overflow: hidden; }
.dims-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); background: var(--paper, #fafaf7); }
.dims-head h3 { margin: 0 0 2px; }
.dims-item { font-size: .84rem; color: var(--muted); }
.dims-body { padding: 14px 22px 4px; display: grid; gap: 8px; }
.dims-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 12px; margin: 0; }
.dims-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.dims-code { font: 700 .68rem/1.6 var(--mono, ui-monospace, monospace); color: var(--acacia); background: var(--acacia-tint); padding: 0 6px; border-radius: 5px; min-width: 38px; text-align: center; }
.dims-row select { width: 100%; height: 38px; }
.dims-hint { margin: 6px 0 4px; font-size: .78rem; color: var(--muted); }
.dims-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; }
@media (max-width: 560px) { .dims-row { grid-template-columns: 1fr; gap: 4px; } }

.ledger-group { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; width: 100%; margin-top: 4px; }
[data-ledger-filter] select.on { border-color: var(--acacia); background-color: var(--acacia-tint); font-weight: 600; }

.je-lines .je-status { white-space: nowrap; font-weight: 600; }
.je-lines .je-status.neg { color: var(--danger); }
.je-hint { color: var(--muted); margin-right: 10px; align-self: center; }

.acct-na { display: block; padding: 10px 10px; font-size: .8rem; color: var(--muted); }
.purchase-grid { table-layout: fixed; }

.exp-grid { table-layout: fixed; }
.exp-grid .gl-cell [data-gl] { display: block; padding: 10px; font-size: .8rem; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); }
.exp-grid .att-cell { padding: 4px 6px !important; }
.exp-grid .att-cell .att-in { height: auto !important; padding: 4px 0 !important; border: 0 !important; font-size: .74rem; }
.exp-grid .att-name { display: block; font-size: .74rem; }
.head-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.head-fields .span-2 { grid-column: span 2; }
@media (max-width: 900px) { .head-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.walkin { position: relative; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--acacia); border-radius: 12px; background: var(--acacia-tint); }
.walkin-head { margin-bottom: 8px; }
.walkin-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 10px 14px; }
.walkin-found { margin-top: 6px; color: var(--acacia); }
.walkin-list { position: absolute; z-index: 30; left: 14px; right: 14px; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.12); max-height: 260px; overflow: auto; }
.walkin-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.walkin-list li:hover { background: var(--acacia-tint); }
.walkin-list li span { grid-column: 1; font-size: .8rem; color: var(--muted); }
.walkin-list li em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .74rem; color: var(--muted); font-style: normal; }
@media (max-width: 760px) { .walkin-grid { grid-template-columns: 1fr; } }

.sn-pick { padding: 4px 10px 6px; }
.sn-pick .sn-list { font-family: var(--mono, ui-monospace, monospace); font-size: .72rem; word-break: break-all; }
.sn-pick .badge.red { background: var(--danger-tint, #fde8e8); color: var(--danger, #b42318); }
.sn-dlg { width: min(640px, 94vw); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.facts .k { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
h2.sec { font-size: 1rem; margin: 0 0 10px; }
.org-chart { overflow-x: auto; padding: 6px 0 10px; }
.org-chart ul { list-style: none; margin: 0; padding-left: 22px; position: relative; }
.org-chart > ul { padding-left: 0; }
.org-chart li { position: relative; padding: 6px 0 0 14px; }
.org-chart ul ul li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.org-chart ul ul li::after { content: ''; position: absolute; left: 0; top: 22px; width: 12px; border-top: 1px solid var(--line); }
.org-chart ul ul li:last-child::before { bottom: auto; height: 22px; }
.org-node { display: inline-grid; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 180px; }
.org-node span { font-size: .8rem; color: var(--muted); }
.org-node em { font-size: .72rem; color: var(--acacia); font-style: normal; }
.st-val.on { outline: 2px solid var(--acacia); border-radius: 8px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* Reports & Analytics (own class names: .kpis / .kpi belong to the main dashboard) */
.rkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rkpi { display: grid; gap: 3px; align-content: start; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.rkpi[href]:hover { border-color: var(--acacia); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.rkpi .k-n { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rkpi .k-v { font-family: 'Bricolage Grotesque', var(--font, sans-serif); font-size: 1.4rem; line-height: 1.2; white-space: nowrap; }
.rkpi .k-p { color: var(--muted); }
.rkpi .k-go { color: var(--acacia); margin-top: 2px; }
.up { color: #1b7f4b; } .down { color: #b42318; }
.rfilters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.rfilters .field { margin: 0; min-width: 150px; }
.rbars { display: grid; gap: 7px; }
.rbar { display: grid; grid-template-columns: minmax(120px, 32%) 1fr auto; gap: 10px; align-items: center; color: inherit; text-decoration: none; font-size: .86rem; }
a.rbar[href]:hover .rb-l { color: var(--acacia); text-decoration: underline; }
.rb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-t { position: relative; height: 16px; background: #eef0ea; border-radius: 6px; overflow: hidden; }
.rb-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.rb-v { background: var(--acacia); opacity: .88; } .rb-v.neg { background: #b42318; }
.rb-p { background: transparent; border: 2px dashed rgba(0,0,0,.3); box-sizing: border-box; }
.rb-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-n em { font-style: normal; font-size: .76rem; margin-left: 4px; }
.rb-n em.up { color: #1b7f4b; } .rb-n em.down { color: #b42318; }
.rline { width: 100%; height: auto; display: block; }
.rline .grid { stroke: #e6e8e2; } .rline .zero { stroke: #9aa093; } .rline .ax { fill: #7a8075; font-size: 11px; }
.rline polyline.s { fill: none; stroke-width: 2.4; }
.rline circle.s { stroke: none; }
.rline polyline.s1 { stroke: var(--acacia); } .rline circle.s1 { fill: var(--acacia); }
.rline polyline.s2 { stroke: #c98a1b; } .rline circle.s2 { fill: #c98a1b; }
.rline polyline.s3 { stroke: #5b6ee1; } .rline circle.s3 { fill: #5b6ee1; }
.rline .hit { fill: transparent; cursor: pointer; } .rline .hit:hover { fill: rgba(0,0,0,.05); }
.rlegend { display: flex; gap: 14px; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.rlegend i { display: inline-block; width: 12px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.rlegend .s1 { background: var(--acacia); } .rlegend .s2 { background: #c98a1b; } .rlegend .s3 { background: #5b6ee1; }
.rcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--acacia-tint); color: var(--acacia); font-size: .8rem; text-decoration: none; }
.chip:hover { background: #ffe9e6; color: #b42318; }
.rcat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.rcat h3 { font-size: .92rem; margin: 0 0 6px; }
.rcat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.rcat .badge { font-size: .66rem; }
@media (max-width: 1100px) { .rkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rcat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rkpis, .rcat { grid-template-columns: 1fr; } .rbar { grid-template-columns: 1fr; } }

.svc-steps { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; counter-reset: s; }
.svc-steps li { flex: 1 1 0; min-width: 90px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2, #f1f3f2); color: var(--muted, #667); font-size: .74rem; text-align: center; }
.svc-steps li.done { background: color-mix(in srgb, var(--primary, #1e6b57) 14%, transparent); color: var(--primary, #1e6b57); }
.svc-steps li.on { background: var(--primary, #1e6b57); color: #fff; font-weight: 600; }
dl.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; margin: 0; } dl.kv dt { color: var(--muted, #667); } dl.kv dd { margin: 0; }

.recon-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: flex-end; padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3e6e4); border-radius: 10px; font-size: .9rem; }

.trk-steps { display: flex; list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.trk-steps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 15px; height: 3px; background: var(--line, #e3e6e4); }
.trk-steps li { flex: 1; text-align: center; position: relative; z-index: 1; }
.trk-steps li.done::after { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: var(--primary, #1e6b57); z-index: -1; }
.trk-steps li:last-child::after { display: none; }
.trk-steps .d { width: 32px; height: 32px; margin: 0 auto 4px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: #e9ecea; color: #9aa39e; border: 2px solid var(--surface, #fff); }
.trk-steps li.done .d, .trk-steps li.now .d { background: var(--primary, #1e6b57); color: #fff; }
.trk-steps li.now .d { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary, #1e6b57) 18%, transparent); }
.trk-steps .l { font-size: .75rem; color: var(--muted, #6a756f); } .trk-steps li.done .l, .trk-steps li.now .l { color: inherit; font-weight: 600; }
/* part-way: partially dispatched / partially delivered — amber until all of it is through */
.trk-steps li.part .d { background: #e3a33b; color: #fff; box-shadow: 0 0 0 5px rgba(227, 163, 59, .2); }
.trk-steps li.part .l { color: #8a5a00; font-weight: 600; }
.trk-steps li.part::after { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: #e3a33b; z-index: -1; }

.nav-count { margin-left: auto; background: var(--accent, #e3a33b); color: #1d2421; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 7px; line-height: 1.5; }

.dlg-wide { width: min(760px, calc(100vw - 32px)); }
.brand-form { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.bp-logo { display: flex; flex-direction: column; align-items: center; }
.logo-box { width: 140px; height: 110px; border: 1px dashed var(--line, #d7dcd9); border-radius: 12px; background: #fafbfa; display: grid; place-items: center; overflow: hidden; color: var(--muted, #8a948f); font-weight: 700; }
.logo-box img { max-width: 92%; max-height: 92%; object-fit: contain; }
.logo-box.sm { width: 88px; height: 70px; flex: none; border-style: solid; font-size: 1.1rem; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; }
.brand-card { display: flex; gap: 14px; align-items: center; }
@media (max-width: 640px) { .brand-form { grid-template-columns: 1fr; } .bp-logo { margin-bottom: 10px; } }

/* Public header: the Help Center's face, just before the menu */
.site-head nav a.site-help { display: inline-flex; align-items: center; gap: 9px; padding: 3px 14px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); text-decoration: none; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); transition: box-shadow .2s, border-color .2s, transform .2s; }
.site-head nav a.site-help:hover { border-color: color-mix(in srgb, var(--acacia) 45%, var(--line)); box-shadow: 0 4px 14px rgba(16, 24, 40, .12); transform: translateY(-1px); }
.site-help img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.site-help span { display: flex; flex-direction: column; line-height: 1.15; }
.site-help b { font-size: .82rem; } .site-help small { font-size: .7rem; color: var(--muted); }
/* …and the marketplace beside it: the icon breathes in and out to draw the eye */
.site-head nav a.site-market { display: inline-flex; align-items: center; gap: 9px; padding: 3px 14px 3px 3px; border: 1px solid color-mix(in srgb, #f5a623 45%, var(--line)); border-radius: 999px;
  background: linear-gradient(90deg, #fff7e8, #fff); color: var(--ink); text-decoration: none; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); transition: box-shadow .2s, transform .2s; }
.site-head nav a.site-market:hover { box-shadow: 0 4px 14px rgba(245, 166, 35, .35); transform: translateY(-1px); }
.site-market span:not(.sm-ic) { display: flex; flex-direction: column; line-height: 1.15; }
.site-market b { font-size: .82rem; } .site-market small { font-size: .7rem; color: var(--muted); }
.sm-ic { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #f3dcae; animation: sm-breathe 1.8s ease-in-out infinite; }
.sm-ic::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #f5a623; animation: sm-ring 1.8s ease-out infinite; }
.sm-ic svg { width: 24px; height: 24px; }
.site-market:hover .sm-ic { animation-play-state: paused; }
@keyframes sm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); box-shadow: 0 0 0 4px rgba(245, 166, 35, .18); } }
@keyframes sm-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sm-ic, .sm-ic::after { animation: none; } }
/* …and the reseller programme */
.site-head nav a.site-reseller { display: inline-flex; align-items: center; gap: 9px; padding: 3px 14px 3px 3px; border: 1px solid color-mix(in srgb, #2f7bf5 35%, var(--line)); border-radius: 999px;
  background: linear-gradient(90deg, #eef4ff, #fff); color: var(--ink); text-decoration: none; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); transition: box-shadow .2s, transform .2s; }
.site-head nav a.site-reseller:hover { box-shadow: 0 4px 14px rgba(47, 123, 245, .28); transform: translateY(-1px); }
.site-reseller span:not(.sr-ic) { display: flex; flex-direction: column; line-height: 1.15; }
.site-reseller b { font-size: .82rem; } .site-reseller small { font-size: .7rem; color: var(--muted); }
.sr-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #cfe0fd; }
.sr-ic svg { width: 24px; height: 24px; }
@media (max-width: 760px) {
  .site-head nav a.site-help, .site-head nav a.site-market, .site-head nav a.site-reseller { display: inline-flex; padding: 3px; }   /* phones: the icons only */
  .site-help span, .site-market span:not(.sm-ic), .site-reseller span:not(.sr-ic) { display: none; }
}
@media (max-width: 480px) {   /* small phones: the icons and the main button go under the logo when they don't fit beside it */
  .site-head { gap: 8px 10px; padding-left: 16px; padding-right: 16px; flex-wrap: wrap; }
  .site-head nav { gap: 6px; min-width: 0; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .site-head nav .btn { padding: 8px 11px; font-size: .82rem; white-space: nowrap; }
  .site-head .brand { min-width: 0; }
}

/* Reseller application */
.rs-steps { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rs-steps li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; }
.rs-steps b { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--acacia); color: #fff; font-size: .8rem; }
.rs-steps span { font-weight: 700; font-size: .9rem; } .rs-steps small { color: var(--muted); font-size: .74rem; line-height: 1.25; }
.rs-type { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-type legend { font-weight: 700; margin-bottom: 8px; }
.rs-type-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.rs-type-opt:has(input:checked) { border-color: var(--acacia); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acacia) 15%, transparent); }
.rs-type-opt input { margin-top: 4px; accent-color: var(--acacia); }
.rs-type-opt span { display: flex; flex-direction: column; gap: 2px; } .rs-type-opt small { color: var(--muted); font-size: .78rem; }
@media (max-width: 640px) { .rs-steps, .rs-type { grid-template-columns: 1fr; } }

/* Reseller portal and admin: badge chips and progress */
.rbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .78rem; border: 1px solid transparent; }
.rbadge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.rbadge.bronze { color: #8a5a2b; background: #f6ebe0; border-color: #e6cfb6; }
.rbadge.silver { color: #5d6b74; background: #eef1f3; border-color: #d4dbe0; }
.rbadge.gold { color: #9a7400; background: #fff6d6; border-color: #f0dc8e; }
.rbadge.platinum { color: #3d4f8a; background: #eaeefb; border-color: #c6d0f2; }
.rs-progress { display: grid; gap: 10px; }
.rs-progress .bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rs-progress .bar i { display: block; height: 100%; background: var(--acacia); border-radius: 99px; }
.rs-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 10px; margin-bottom: 16px; }
.rs-kpis .k { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.rs-kpis .k .n { font-size: 1.45rem; font-weight: 800; } .rs-kpis .k .l { font-size: .78rem; color: var(--muted); }
.rs-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.rs-filters .field { margin: 0; min-width: 140px; }

/* Landing: the industry banner — one system, from the boardroom to the shop counter */
.ind-banner { position: relative; padding: clamp(18px, 3vw, 34px) 0 6px; overflow: hidden;
  background: radial-gradient(1200px 260px at 15% 0%, color-mix(in srgb, var(--acacia) 14%, transparent), transparent 70%),
              radial-gradient(900px 240px at 90% 10%, color-mix(in srgb, var(--marigold) 18%, transparent), transparent 70%); }
.ind-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px 40px; align-items: end; margin-bottom: 18px; }
.ind-head h2 { grid-column: 1; margin: 6px 0 0; font-size: clamp(1.4rem, 2.6vw, 2.15rem); letter-spacing: -.02em; line-height: 1.1; }
.ind-head h2 em { font-style: normal; background: linear-gradient(90deg, var(--acacia), #2a8a70, var(--marigold), var(--acacia)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ib-hue 9s ease-in-out infinite; }
.ind-head p { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--ink-2); font-size: 1rem; max-width: 48ch; }
.ind-kicker { grid-column: 1; display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acacia); }
.ind-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acacia); box-shadow: 0 0 0 0 color-mix(in srgb, var(--acacia) 50%, transparent); animation: ib-ping 2.2s infinite; }
.ind-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ind-track { display: flex; width: max-content; animation: ib-marquee 70s linear infinite; }
.ind-viewport:hover .ind-track, .ind-viewport:focus-within .ind-track { animation-play-state: paused; }
.ind-row { display: flex; gap: 16px; padding: 6px 8px 14px; }
.ind-card { margin: 0; width: clamp(230px, 22vw, 300px); flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 33, 43, .05), 0 8px 24px -14px rgba(21, 33, 43, .25); transition: transform .35s ease, box-shadow .35s ease; }
.ind-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 2px 4px rgba(21, 33, 43, .06), 0 20px 40px -18px rgba(21, 33, 43, .4); }
.ind-art { position: relative; aspect-ratio: 320 / 190; background: var(--paper); overflow: hidden; }
.ind-art svg, .ind-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ind-card:hover .ind-art svg, .ind-card:hover .ind-art img { transform: scale(1.04); }
.ind-art svg, .ind-art img { transition: transform .8s ease; }
.ind-chip { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: .72rem; font-weight: 700;
  background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(21, 33, 43, .35); backdrop-filter: blur(4px); }
.ind-pulse { width: 7px; height: 7px; border-radius: 50%; background: #2fa36f; animation: ib-ping 1.8s infinite; }
.ind-card figcaption { padding: 11px 14px 13px; display: grid; gap: 2px; }
.ind-card figcaption b { font-family: var(--display); font-size: 1rem; letter-spacing: -.01em; }
.ind-card figcaption span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.ind-banner + .hero { padding-top: clamp(20px, 3.5vw, 44px); }
/* the flow: sales → stock → purchasing → money → people → reports, an arrow travelling it (6 steps, 7.2 s a lap) */
.ind-flow { --lap: 7.2s; position: relative; padding: 14px 0 6px; }
.if-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.if-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.if-ic { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; background: #fff; border: 1px solid #e3eaf6;
  box-shadow: 0 2px 6px -2px rgba(21, 70, 160, .18); animation: if-hit var(--lap) ease-out infinite; animation-delay: calc(var(--i) * var(--lap) / 5); }
.if-ic svg { width: 44px; height: 44px; overflow: visible; }
.if-steps b { font: 700 1rem/1.1 var(--display); color: #173a7a; letter-spacing: -.01em; animation: if-label var(--lap) ease-out infinite; animation-delay: calc(var(--i) * var(--lap) / 5); }
.if-track { position: absolute; z-index: 0; left: calc(100% / 12); right: calc(100% / 12); top: calc(14px + 31px); height: 3px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #c9d7ee 0 7px, transparent 7px 13px); background-size: 26px 3px; animation: if-dots 1s linear infinite; }
.if-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2f7bf5, #22c55e, #f5a623); animation: if-fill var(--lap) linear infinite; }
.if-arrow { position: absolute; top: 50%; left: 0; width: 28px; height: 20px; color: #2f7bf5; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(47, 123, 245, .55)); animation: if-move var(--lap) linear infinite; }
.if-arrow svg { width: 100%; height: 100%; display: block; }
/* each icon breathes on its own */
.if-trend { stroke-dasharray: 60; animation: if-draw 3.6s ease-in-out infinite; }
.if-boxes { animation: if-bob 2.4s ease-in-out infinite; }
.if-check { transform-box: fill-box; transform-origin: center; animation: if-pop 3s ease-in-out infinite; }
.if-coin { transform-box: fill-box; transform-origin: center; animation: if-flip 4s ease-in-out infinite; }
.if-lead { animation: if-bob 3s ease-in-out infinite; } .if-side { animation: if-bob 3s ease-in-out infinite .4s; }
.if-bar { transform-box: fill-box; transform-origin: bottom; animation: if-grow 3.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes if-move { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes if-fill { 0% { width: 0; opacity: .9; } 96% { width: 100%; opacity: .9; } 100% { width: 100%; opacity: 0; } }
@keyframes if-dots { to { background-position: 26px 0; } }
@keyframes if-hit { 0% { transform: translateY(0) scale(1); } 5% { transform: translateY(-5px) scale(1.12); box-shadow: 0 10px 22px -8px rgba(47, 123, 245, .55); border-color: #9cc0ff; } 16%, 100% { transform: none; } }
@keyframes if-label { 0% { color: #173a7a; } 5% { color: #2f7bf5; } 16%, 100% { color: #173a7a; } }
@keyframes if-draw { 0% { stroke-dashoffset: 60; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes if-bob { 50% { transform: translateY(-2px); } }
@keyframes if-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } }
@keyframes if-flip { 0%, 60%, 100% { transform: scaleX(1); } 70% { transform: scaleX(-1); } 80% { transform: scaleX(1); } }
@keyframes if-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@media (max-width: 760px) {
  .if-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .if-track { display: none; }
  .if-ic { width: 54px; height: 54px; } .if-ic svg { width: 38px; height: 38px; }
}
/* the scenes breathe */
.mv-win { animation: ib-blink 4.2s ease-in-out infinite; }
.mv-cloud { animation: ib-drift 18s ease-in-out infinite alternate; }
.mv-sun { animation: ib-glow 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mv-ring { animation: ib-ring 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mv-screen { animation: ib-blink 2.6s ease-in-out infinite; }
.mv-shine { animation: ib-sweep 5s ease-in-out infinite; }
.mv-car { animation: ib-bob 3s ease-in-out infinite; }
.mv-scan { animation: ib-scan 2.8s ease-in-out infinite; }
.mv-smoke { animation: ib-smoke 4s ease-in-out infinite; }
.mv-belt { animation: ib-belt 4s linear infinite; }
.mv-gear { animation: ib-spin 6s linear infinite; }
.mv-crane { animation: ib-swing 6s ease-in-out infinite alternate; }
.mv-fork { animation: ib-fork 7s ease-in-out infinite alternate; }
.mv-truck { animation: ib-drive 9s linear infinite; }
.mv-dash { animation: ib-dash 1.2s linear infinite; }
.mv-pin { animation: ib-pin 2.4s ease-in-out infinite; }
/* motorcycle & tricycle dealers: bikes hop on their plinths, a tuk-tuk drives by, bicycles pass the other way, wheels turning */
.mv-hop { animation: ib-hop 2.4s cubic-bezier(.3, .7, .4, 1) infinite; transform-box: fill-box; transform-origin: 15% 100%; }
.mv-tuk { animation: ib-tuk 10s linear infinite; }
.mv-cycle { animation: ib-cycle 14s linear infinite; }
.mv-pedal { animation: ib-bob .5s ease-in-out infinite; }
.mv-wheel { animation: ib-spin .7s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ib-hop { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-13px) rotate(-7deg); } 32% { transform: translateY(-11px) rotate(-3deg); } 45% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-2px); } }
@keyframes ib-tuk { from { transform: translateX(-80px); } to { transform: translateX(340px); } }
@keyframes ib-cycle { from { transform: translateX(370px); } to { transform: translateX(-50px); } }
/* pharmacies & health: the cross glows, the monitor beats; professional firms: the clock ticks, hours grow, files fly, the meeting talks */
.mv-ecg { stroke-dasharray: 90 110; animation: ib-draw 2.4s linear infinite; }
.mv-cross { animation: ib-glow 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mv-hand { animation: ib-spin 6s linear infinite; transform-box: view-box; }
.mv-hand.slow { animation-duration: 60s; }
.mv-grow { animation: ib-grow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.mv-paper { opacity: 0; animation: ib-file 3.6s ease-in-out infinite; }
.mv-bubble { opacity: 0; animation: ib-pop 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 100%; }
@keyframes ib-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes ib-grow { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes ib-file { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 65% { transform: translate(28px, -18px) rotate(12deg); opacity: 1; } 90%, 100% { transform: translate(52px, 4px) rotate(22deg); opacity: 0; } }
@keyframes ib-pop { 0%, 50%, 100% { transform: scale(.2); opacity: 0; } 8%, 42% { transform: scale(1); opacity: 1; } }
@keyframes ib-marquee { to { transform: translateX(-50%); } }
@keyframes ib-hue { 50% { background-position: 100% 0; } }
@keyframes ib-ping { 0% { box-shadow: 0 0 0 0 rgba(47, 163, 111, .5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(47, 163, 111, 0); } }
@keyframes ib-flow { to { background-position: -200% 0; } }
@keyframes ib-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ib-drift { to { transform: translateX(40px); } }
@keyframes ib-glow { 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ib-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes ib-sweep { 0%, 40% { transform: translateX(0); } 100% { transform: translateX(420px); } }
@keyframes ib-bob { 50% { transform: translateY(-1.5px); } }
@keyframes ib-scan { 50% { transform: translateY(-34px); } }
@keyframes ib-smoke { 0% { transform: translateY(6px); opacity: .3; } 50% { opacity: 1; } 100% { transform: translate(8px, -10px); opacity: 0; } }
@keyframes ib-belt { to { transform: translateX(64px); } }
@keyframes ib-spin { to { transform: rotate(360deg); } }
@keyframes ib-swing { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes ib-fork { from { transform: translateX(-10px); } to { transform: translateX(230px); } }
@keyframes ib-drive { from { transform: translateX(-150px); } to { transform: translateX(330px); } }
@keyframes ib-dash { to { transform: translateX(-34px); } }
@keyframes ib-pin { 50% { transform: translateY(-6px); } }
@media (max-width: 760px) {
  .ind-head { grid-template-columns: 1fr; }
  .ind-head p { grid-column: 1; grid-row: auto; font-size: .92rem; }
  .ind-track { animation-duration: 50s; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-track { animation: none; }
  .ind-viewport { overflow-x: auto; }
  .ind-row[aria-hidden="true"] { display: none; }
  .ind-banner *, .ind-banner *::before { animation: none !important; transition: none !important; }
}

/* Serial numbers on a document's page: what is selected, and change it */
.sn-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Price list file: download / upload */
.pl-file { display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; padding: 14px 18px; }
.pl-file > div:first-child { flex: 1 1 320px; min-width: 0; }
.pl-file input[type=file] { max-width: 240px; }

/* User-defined fields (UDFs) */
.dlg-lead { width: min(820px, calc(100vw - 32px)); }
.udf-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.udf-card .form-section:first-of-type { margin-top: 4px; }
.udf-th { white-space: nowrap; }
.udf-cell input:not([type=checkbox]), .udf-cell select { width: 100%; min-width: 0; }
.udf-cell input[type=checkbox] { display: block; margin: 0 auto; }
.udf-shown { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 10px 18px; padding: 12px 16px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.udf-shown .k { font-size: 0.7188rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.udf-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.udf-hub a.panel { display: block; color: inherit; text-decoration: none; padding: 16px; }
.udf-hub a.panel:hover { border-color: var(--primary, #1e6b57); }
.udf-hub .n { font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }

/* last in the file: the hidden attribute always hides — even on elements whose class sets a display (e.g. .serial-btn) */
[hidden] { display: none !important; }

/* Settings: the set-up pages that live in the modules, grouped in drop-downs after Branding */
.settings-more { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: -12px 0 18px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.settings-more-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-right: 6px; }
.tab-drop { position: relative; display: inline-block; }
.tab-drop > summary { list-style: none; cursor: pointer; padding: 6px 12px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.tab-drop > summary::-webkit-details-marker { display: none; }
.tab-drop > summary span { font-size: .7rem; opacity: .7; }
.tab-drop[open] > summary, .tab-drop > summary:hover { color: var(--acacia); border-color: var(--acacia); }
.tab-drop-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(16, 32, 26, .14); padding: 6px; display: grid; }
.tab-drop-menu a { display: block; text-decoration: none; color: var(--ink-2); font-size: .8125rem; padding: 8px 10px; border-radius: 7px; border: 0; font-weight: 500; white-space: nowrap; }
.tab-drop-menu a:hover { background: var(--acacia-tint); color: var(--acacia-deep); }
.locked, input.locked { background: var(--bg-2, #f3f4f1); color: var(--ink); cursor: not-allowed; }
tr.picked td { background: var(--acacia-tint, #eef6f2); }
/* Search everything */
.gsearch { position: relative; flex: 1 1 260px; min-width: 150px; max-width: 560px; }
.gs-box { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--acacia); border-radius: 12px; padding: 5px 6px 5px 7px; margin: 0; cursor: text; box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: box-shadow .15s, border-color .15s; }
.gs-box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acacia) 16%, transparent); border-color: color-mix(in srgb, var(--acacia) 45%, var(--line)); border-left-color: var(--acacia); }
.gs-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--acacia) 12%, #fff); }
.gs-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--acacia); stroke-width: 2.4; stroke-linecap: round; }
.gs-box input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; padding: 4px 0 !important; height: auto !important; background: transparent; font-size: .92rem; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.gs-box input::placeholder { color: #9aa3ab; }
.gs-box input::-webkit-search-cancel-button { display: none; }
.gs-kbd { flex: 0 0 auto; font: 600 .75rem/1 ui-monospace, monospace; color: var(--muted); background: #f5f6f7; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 5px 8px; }
.gs-results { position: absolute; z-index: 60; left: 0; right: 0; min-width: min(460px, 92vw); top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.14); max-height: 420px; overflow: auto; }
.gs-results li a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.gs-results li[aria-selected="true"] a { background: color-mix(in srgb, var(--acacia) 9%, #fff); }
.gs-t { font-weight: 600; font-size: .9rem; } .gs-t mark { background: none; color: var(--acacia); font-weight: 700; padding: 0; }
.gs-p { font-size: .75rem; color: var(--muted); }
.gs-none { padding: 10px; color: var(--muted); font-size: .85rem; }
/* the dashboard's shortcut row on one line: go-live, recent activity, the search (the rest of the row), the action bar */
.shortcuts > a { white-space: nowrap; flex: 0 0 auto; }
.shortcuts .dash-actions { flex: 0 0 auto; flex-wrap: nowrap; }
.shortcuts .dash-actions a { padding: 6px 9px; font-size: .8125rem; white-space: nowrap; }
.shortcuts .dash-loc { max-width: 220px; text-overflow: ellipsis; }
.gsearch.narrow .gs-kbd { display: none; }
@media (min-width: 1100px) { .shortcuts { flex-wrap: nowrap; } }
.shortcuts .dash-actions a { padding: 6px 8px; font-size: .8rem; }
@media (max-width: 760px) {   /* phones: the shortcut bar and the location picker wrap instead of running off the screen */
  .shortcuts .dash-actions { flex: 1 1 100%; flex-wrap: wrap; max-width: 100%; }
  .shortcuts .dash-actions .dash-loc-form { margin-left: 0; padding-left: 0; border-left: 0; min-width: 0; }
  .shortcuts .dash-loc { max-width: 55vw; }
}
@media (max-width: 1400px) { .shortcuts > a .pbar { display: none; } }
/* the results are a list, not the shortcut row's pills */
.shortcuts .gs-results li a { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font-size: inherit; color: inherit; white-space: normal; }
.shortcuts .gs-results li a:hover { color: inherit; }
.shortcuts .gs-results li[aria-selected="true"] a { background: color-mix(in srgb, var(--acacia) 9%, #fff); }
/* ===================== Help Center ===================== */
/* the launcher: a small avatar at the top of the menu that expands on hover */
.help-launch { display: flex; align-items: center; gap: 10px; width: 40px; height: 40px; padding: 3px; margin: 2px 0 10px 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; overflow: hidden; white-space: nowrap; box-shadow: 0 1px 3px rgba(16,24,40,.08); transition: width .22s ease, box-shadow .2s, border-color .2s; }
.help-launch img { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.help-launch-t { display: flex; flex-direction: column; text-align: left; line-height: 1.15; opacity: 0; transition: opacity .15s ease; }
.help-launch-t b { font-size: .82rem; color: var(--ink); } .help-launch-t small { font-size: .7rem; color: var(--muted); }
.help-launch:hover, .help-launch:focus-visible { width: 178px; border-color: color-mix(in srgb, var(--acacia) 45%, var(--line)); box-shadow: 0 4px 14px rgba(16,24,40,.12); }
.help-launch:hover .help-launch-t, .help-launch:focus-visible .help-launch-t { opacity: 1; transition-delay: .06s; }
.help-launch:focus-visible { outline: 2px solid var(--acacia); outline-offset: 2px; }
/* the in-app panel */
.help-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.28); z-index: 90; }
.help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; z-index: 91; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(16,24,40,.18); transform: translateX(100%); transition: transform .2s ease; }
.help-drawer.on { transform: none; }
.hd-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #0f2f52, #174a7a); color: #fff; }
.hd-head img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.hd-head b { display: block; font-size: 1rem; } .hd-head small { opacity: .85; font-size: .78rem; }
.hd-x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 6px; border-radius: 6px; } .hd-x:hover { background: rgba(255,255,255,.15); }
.hd-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
.hd-tabs button { background: none; border: 0; padding: 8px 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.hd-tabs button.on { color: var(--acacia); border-bottom-color: var(--acacia); }
.hd-pane { flex: 1 1 auto; overflow: auto; padding: 12px; display: flex; flex-direction: column; }
.hd-pane[hidden] { display: none; }
.hd-q { width: 100%; margin-bottom: 10px; }
.hd-res { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.hd-res:hover { border-color: var(--acacia); } .hd-res span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .hd-res b { display: block; margin: 2px 0; } .hd-res small { color: var(--muted); }
.hd-foot { padding: 10px 16px; border-top: 1px solid var(--line); text-align: center; font-weight: 600; }
/* Ask (chat) */
.hchat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 380px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafb; overflow: hidden; }
.help-drawer .hchat { border: 0; background: none; min-height: 0; }
.hchat-log { flex: 1 1 auto; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 520px; }
.help-drawer .hchat-log { max-height: none; }
.hmsg { display: flex; gap: 8px; align-items: flex-start; } .hmsg.me { justify-content: flex-end; }
.hmsg-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.hmsg-b { max-width: 88%; background: #fff; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; font-size: .9rem; line-height: 1.45; }
.hmsg.me .hmsg-b { background: var(--acacia); color: #fff; border-color: var(--acacia); border-radius: 14px 4px 14px 14px; }
.hmsg-b p { margin: 0 0 6px; } .hmsg-b p:last-child { margin-bottom: 0; }
.hans-t { font-weight: 700; }
.hsteps { margin: 6px 0 8px; padding-left: 20px; } .hsteps li { margin: 3px 0; }
.hnote { background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 8px; padding: 7px 9px; font-size: .84rem; margin: 6px 0; }
.hacts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.hrel-t { font-weight: 600; font-size: .8rem; color: var(--muted); margin-top: 8px !important; }
.hrel { margin: 2px 0 0; padding-left: 18px; font-size: .86rem; } .hrel span { color: var(--muted); font-size: .72rem; }
.hfb { margin-top: 8px; font-size: .82rem; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hfb button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: .8rem; }
.hchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hchips button { border: 1px solid color-mix(in srgb, var(--acacia) 40%, var(--line)); color: var(--acacia); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: .8rem; cursor: pointer; }
.hchips button:hover { background: color-mix(in srgb, var(--acacia) 8%, #fff); }
.hchat-in { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; } .hchat-in input { flex: 1 1 auto; }
.hdots { display: flex; gap: 4px; } .hdots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: hdot 1s infinite ease-in-out; } .hdots span:nth-child(2) { animation-delay: .15s; } .hdots span:nth-child(3) { animation-delay: .3s; }
@keyframes hdot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* the Help Center pages */
.hc-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: linear-gradient(135deg, #0f2f52 0%, #174a7a 100%); color: #fff; border-radius: 18px; overflow: hidden; margin-bottom: 16px; min-height: 300px; }
.hc-hero-text { padding: 34px 34px 28px; }
.hc-kicker { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; opacity: .8; }
.hc-hero h1 { margin: 0 0 8px; font-size: 2rem; color: #fff; } .hc-sub { margin: 0 0 18px; opacity: .9; max-width: 560px; }
.hc-hero-img { background: var(--hero) center 30% / cover no-repeat; min-height: 260px; }
.hc-search { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 6px 6px 6px 8px; max-width: 620px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.hc-search input { flex: 1 1 auto; border: 0 !important; box-shadow: none !important; outline: 0; font-size: 1rem; padding: 8px 4px !important; min-width: 0; }
.hc-pop { margin-top: 12px; font-size: .82rem; opacity: .95; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hc-pop a { color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px 10px; text-decoration: none; } .hc-pop a:hover { background: rgba(255,255,255,.26); }
.hc-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.hc-way { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: inherit; text-decoration: none; }
.hc-way:hover { border-color: var(--acacia); } .hc-way > span { font-size: 1.5rem; } .hc-way b { display: block; } .hc-way small { color: var(--muted); }
.hc-sec { margin-bottom: 22px; } .hc-sec h2 { font-size: 1.1rem; margin: 0 0 10px; }
.hc-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .hc-sec-head h2 { margin: 0; }
.hc-start { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hc-start a { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; }
.hc-start a:hover { border-color: var(--acacia); } .hc-start span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--acacia) 12%, #fff); color: var(--acacia); font-size: .8rem; }
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.hc-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.hc-card:hover { border-color: var(--acacia); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.08); }
.hc-card small { color: var(--muted); line-height: 1.4; } .hc-card em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: .75rem; color: var(--acacia); font-weight: 600; }
.hc-ic { font-size: 1.5rem; } .hc-ic.big { font-size: 2.4rem; }
.hc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hc-faq-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hc-faq-cats button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: .8rem; cursor: pointer; } .hc-faq-cats button.on { background: var(--acacia); color: #fff; border-color: var(--acacia); }
.hc-faq { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; margin-bottom: 8px; }
.hc-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; } .hc-faq[open] { padding-bottom: 12px; } .hc-faq ol { padding-left: 20px; margin: 6px 0; } .hc-faq[hidden] { display: none; }
.hc-contact { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--acacia); border-radius: 14px; padding: 14px 18px; }
.hc-contact img { width: 56px; height: 56px; border-radius: 50%; } .hc-contact p { margin: 2px 0 0; color: var(--muted); }
.hc-res { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.hc-res:hover { border-color: var(--acacia); } .hc-res b { display: block; margin: 2px 0; } .hc-res small { color: var(--muted); }
.hc-type { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: #eef2f6; color: #44546a; }
.hc-type.t-faq { background: #e8f1fd; color: #1d5fb8; } .hc-type.t-troubleshoot { background: #fdecec; color: #b42318; } .hc-type.t-tip { background: #fff4dc; color: #8a5a00; } .hc-type.t-guide { background: #e7f5ee; color: #12724a; }
.hc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hc-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 1.05rem; } .hc-brand img { width: 38px; height: 38px; border-radius: 50%; }
.hc-mini { display: flex; gap: 6px; } .hc-mini input { width: 280px; }
.hc-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.hc-cat-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .hc-cat-head h1 { margin: 0; }
.hc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.hc-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; position: sticky; top: 12px; }
.hc-side h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2px 4px 8px; }
.hc-side a { display: block; padding: 6px 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: .88rem; } .hc-side a:hover, .hc-side a.on { background: color-mix(in srgb, var(--acacia) 9%, #fff); color: var(--acacia); }
.hc-side-all { font-weight: 600; margin-top: 6px; }
.hc-article { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; }
.hc-article h1 { margin: 8px 0 6px; } .hc-article h2 { font-size: 1rem; margin: 20px 0 8px; }
.hc-lead { font-size: 1.02rem; color: #3d4a5c; }
.hc-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.hc-steps li { counter-increment: s; position: relative; padding: 8px 0 8px 40px; border-bottom: 1px dashed var(--line); line-height: 1.5; }
.hc-steps li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 26px; height: 26px; border-radius: 50%; background: var(--acacia); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.hc-note { background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.hc-fb { display: flex; gap: 8px; align-items: center; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 1000px) { .hc-hero, .hc-two, .hc-layout { grid-template-columns: 1fr; } .hc-hero-img { min-height: 200px; } .hc-start { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-ways { grid-template-columns: 1fr; } }
/* the search in the menu, under the Help Center */
.side .gsearch { flex: none; min-width: 0; max-width: none; width: 100%; margin: 0 0 12px; }
.side .gs-box { padding: 4px 5px 4px 5px; border-radius: 10px; gap: 7px; }
.side .gs-icon { width: 26px; height: 26px; border-radius: 7px; }
.side .gs-box input { font-size: .85rem; }
.gs-results.gs-float { position: fixed; right: auto; z-index: 95; min-width: 0; }
/* the Help Center label always showing (hover just lifts it) */
.help-launch { width: 100%; margin: 2px 0 10px; padding: 3px 12px 3px 3px; }
.help-launch .help-launch-t { opacity: 1; }
.help-launch:hover, .help-launch:focus-visible { width: 100%; }
/* the top of the menu stays put — the logo, the Help Center, the search and Dashboard; the sections scroll beneath */
.side-head { position: sticky; top: -18px; z-index: 6; margin: -18px -12px 0; padding: 18px 12px 6px; background: color-mix(in srgb, var(--acacia) 7%, var(--surface)); transition: box-shadow .15s ease; }
.side-head.scrolled { box-shadow: 0 8px 12px -10px rgba(16,24,40,.35); }
.side-head .nav-top { margin-bottom: 2px; }
.side-head + .nav { padding-top: 4px; }
.platform .side-head { background: var(--ink); }
/* Payroll */
.py-conf { font-size: .78rem; color: #7a4b00; background: #fff6e0; border: 1px solid #f1d9a0; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.py-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.py-est { position: sticky; top: 12px; }
.py-bd { width: 100%; border-collapse: collapse; font-size: .86rem; }
.py-bd td { padding: 5px 4px; border-bottom: 1px solid var(--line-2, #eef0f1); vertical-align: top; } .py-bd td:last-child { text-align: right; white-space: nowrap; }
.py-bd tr.sec td { font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: var(--muted); padding-top: 12px; border-bottom: 0; }
.py-bd tr.tot td { font-weight: 700; } .py-bd tr.net td { font-weight: 800; font-size: 1rem; background: color-mix(in srgb, var(--acacia) 8%, #fff); } .py-bd tr.er td { color: var(--muted); font-size: .8rem; }
.py-slip { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; max-width: 760px; }
.py-slip header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--acacia); padding-bottom: 10px; margin-bottom: 12px; }
.py-conf-tag { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: #b42318; border: 1px solid #f3b8b3; border-radius: 6px; padding: 3px 8px; }
.py-slip-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 12px; } .py-slip-who span { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 1100px) { .py-grid { grid-template-columns: 1fr; } .py-est { position: static; } }
@media print { .side, .top, .no-print, .py-conf { display: none !important; } .py-slip { border: 0; padding: 0; max-width: none; } }

.brand-img { height: 34px; max-width: 120px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; }

/* registration guide on the form and the home page */
.step-guide { background: color-mix(in srgb, var(--acacia) 7%, #fff); border: 1px solid color-mix(in srgb, var(--acacia) 25%, var(--line)); border-radius: 10px; padding: 9px 12px; margin: 2px 0 6px; font-size: .9rem; }
.reg-strip { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.reg-strip a { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; color: inherit; text-decoration: none; height: 100%; }
.reg-strip a:hover { border-color: var(--acacia); } .reg-strip b { width: 30px; height: 30px; border-radius: 50%; background: var(--acacia); color: #fff; display: grid; place-items: center; }
@media (max-width: 800px) { .reg-strip { grid-template-columns: 1fr 1fr; } }
/* a help link with the Help Center's icon (the agent), as on the launcher */
.help-chip { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 2px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 600; line-height: 1; vertical-align: middle; transition: border-color .15s, box-shadow .15s; white-space: nowrap; }
.help-chip img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.help-chip.md { padding: 3px 14px 3px 3px; font-size: .92rem; } .help-chip.md img { width: 32px; height: 32px; }
a.help-chip:hover, a.help-chip:focus-visible { border-color: color-mix(in srgb, var(--acacia) 45%, var(--line)); box-shadow: 0 3px 10px rgba(16,24,40,.10); color: var(--ink); }
.help-chip.as-badge { text-transform: none; letter-spacing: 0; color: var(--ink); }
.guide-tip { display: flex; gap: 8px; align-items: flex-start; } .guide-tip .tip-av { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px; }

/* home page: what it covers, mobile money and regional tax, then the tagline on its own line */
.hero-points { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; max-width: 48ch; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
.hp-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--acacia) 10%, #fff); font-size: 1rem; }
.hero-tag { margin: 18px 0 0; padding-left: 12px; border-left: 3px solid var(--acacia); font-weight: 700; font-size: 1.05rem; color: var(--ink); max-width: 44ch; }

/* support tickets */
.hd-foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .hd-sep { width: 1px; height: 14px; background: var(--line); }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } @media (max-width: 1000px) { .tk-grid { grid-template-columns: 1fr; } }
.tk-body { white-space: pre-line; line-height: 1.55; }
.tk-files { display: flex; gap: 10px; flex-wrap: wrap; } .tk-file { display: flex; flex-direction: column; gap: 4px; width: 150px; font-size: .8rem; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; overflow-wrap: anywhere; }
.tk-file img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; background: var(--line-2, #eef0f1); }
.tk-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tk-m { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .tk-m.tk-agent { border-left: 4px solid var(--acacia); } .tk-m.tk-internal { background: #fff8e6; border-color: #f1d9a0; }
.tk-m.tk-system { background: transparent; border: 0; padding: 0 4px; font-size: .84rem; color: var(--ink-2); } .tk-who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tk-resolved { background: color-mix(in srgb, var(--acacia) 8%, #fff); border: 1px solid color-mix(in srgb, var(--acacia) 30%, var(--line)); }
.tk-dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 0 0 10px; font-size: .9rem; } .tk-dl dt { color: var(--muted); } .tk-dl dd { margin: 0; }
.tk-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .tk-prev { width: 120px; font-size: .75rem; overflow-wrap: anywhere; } .tk-prev img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.tk-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; } .tk-kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.tk-kpi b { font-size: 1.5rem; } .tk-kpi span { font-size: .8rem; color: var(--ink-2); } .tk-kpi.on { border-color: var(--acacia); box-shadow: 0 0 0 1px var(--acacia) inset; }
.badge.tk-open { background: #e8f1fb; color: #1f5f99; } .badge.tk-assigned, .badge.tk-in_progress { background: #eef6f2; color: var(--acacia); } .badge.tk-awaiting_user { background: #fff3d6; color: #8a5a00; } .badge.tk-resolved { background: #e6f4ea; color: #1f7a4a; } .badge.tk-closed { background: #eef0f1; color: #5b6770; }

.coa-options { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .coa-options .check { margin: 0; } td.neg, td.neg a { color: var(--danger, #b42318); }

.totals .hd-row { align-items: center; } .totals .hd-row input, .totals .hd-row select { padding: 4px 6px; }

.master-links { margin-top: 4px; } .line-master { margin-left: 4px; text-decoration: none; font-weight: 700; } .line-avail { margin-top: 3px; } .line-avail.neg { color: var(--danger, #b42318); } .line-split { margin-top: 2px; white-space: nowrap; }
.line-meta { margin-top: 3px; line-height: 1.35; } .line-meta .line-master { margin-left: 0; font-weight: 600; white-space: nowrap; }

/* the chosen product: its code as a link (new tab), ✎ to change it; the list keeps code · name · stock */
.stack-cell .picked-away { display: none !important; }
.line-chosen { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.line-code { font-weight: 700; font-family: var(--mono, ui-monospace, monospace); color: var(--ink); text-decoration: none; border-bottom: 1px dashed transparent; }
.line-code:hover, .line-code:focus-visible { color: var(--acacia); border-bottom-color: currentColor; }
.line-change { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 6px; } .line-change:hover { background: var(--tint, #eef4f1); color: var(--ink); }

.line-chosen { padding-left: 10px; }

/* line tables: a little tighter so every column fits */
table.line-grid th { padding: 8px 7px; letter-spacing: .03em; }
table.line-grid td input, table.line-grid td select, table.line-grid td textarea { padding: 0 7px; }
table.line-grid td select { padding-right: 20px; }
table.line-grid td.amount { padding: 0 7px; }
.th-sub { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); }
/* Market Place page */
.shop-links { display: flex; gap: 6px; align-items: center; } .shop-links a { font-weight: 600; } .linkbtn { background: none; border: 0; padding: 0; color: var(--acacia); cursor: pointer; font: inherit; text-decoration: underline; }
.k-v.warn { color: #8a5a00; }
.shop-steps ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.shop-steps li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.shop-steps li .n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: #eef0f1; color: var(--ink-2); }
.shop-steps li.ok { background: color-mix(in srgb, var(--acacia) 6%, #fff); border-color: color-mix(in srgb, var(--acacia) 30%, var(--line)); } .shop-steps li.ok .n { background: var(--acacia); color: #fff; }
.shop-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } @media (max-width: 900px) { .shop-plan { grid-template-columns: 1fr; } }
.shop-buy { display: flex; flex-direction: column; gap: 12px; } .shop-buy select { flex: 1; min-width: 0; } .shop-buy label { display: block; margin-bottom: 4px; }
.usage { height: 8px; border-radius: 6px; background: #eef0f1; overflow: hidden; margin: 6px 0; max-width: 360px; } .usage i { display: block; height: 100%; background: var(--acacia); }

/* period close */
.month-close-grid { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 12px; } @media (max-width: 760px) { .month-close-grid { grid-template-columns: 1fr; } }
.me-check { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; } .me-check ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; } .me-check li { font-size: .9rem; }
.me-reopen { gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); flex-wrap: wrap; } .me-history { margin-top: 12px; } .me-history summary { cursor: pointer; margin-bottom: 6px; }

/* chart of accounts: every group lines up */
table.coa-table { table-layout: fixed; width: 100%; min-width: 1060px; } table.coa-table td, table.coa-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.coa-table td:nth-child(2) { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; line-height: 1.3; }   /* account names wrap rather than being cut */
table.coa-table th { white-space: normal; text-overflow: clip; line-height: 1.25; vertical-align: bottom; }   /* headings wrap rather than being cut */

.rec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px 10px; border-bottom: 1px solid var(--line); } .rec-head h2 { font-size: 1.05rem; }
.rec-grid > .check { margin: 4px 0 12px; display: flex; gap: 8px; align-items: flex-start; } .rec-grid > .check input { margin-top: 3px; }
/* bank withdrawal lines: a document table */
[data-wd-lines] td .wd-type-acct { display: block; padding: 0 10px; line-height: 38px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-total { display: flex; justify-content: flex-end; gap: 24px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 1rem; } .wd-total b { min-width: 120px; text-align: right; }

.dep-is-late td { opacity: .55; } .dep-late { color: #8a5a00; font-weight: 600; }

.coa-find { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .coa-find [data-coa-q] { flex: 1 1 360px; min-width: 0; } .coa-find .check { margin: 0; white-space: nowrap; }

.dep-holds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.dep-hold { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .dep-hold b { font-size: 1.1rem; }
.dep-hold.over { border-color: var(--danger, #b42318); background: #fdf0ee; } .dep-hold.over [data-ticked] { color: var(--danger, #b42318); font-weight: 700; }
/* approvals */
.ap-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.ap-steps li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.ap-steps li.done { border-color: color-mix(in srgb, var(--acacia) 40%, var(--line)); background: color-mix(in srgb, var(--acacia) 6%, #fff); } .ap-steps li.now { border-color: #e3a33b; background: #fff8e8; } .ap-steps li.no { border-color: var(--danger, #b42318); background: #fdf0ee; }
.ap-top { font-weight: 700; }

.ap-later { opacity: .6; } .ap-later .panel-head { border-bottom: 0; }

/* the bell, and signatures on approvals */
.bell { position: relative; } .bell summary { list-style: none; cursor: pointer; font-size: 1.15rem; position: relative; padding: 2px 6px; } .bell summary::-webkit-details-marker { display: none; }
.bell-n { position: absolute; top: -6px; right: -8px; background: #c0392b; color: #fff; border-radius: 10px; font-size: .68rem; font-weight: 800; padding: 1px 6px; }
.bell-pop { position: absolute; right: 0; top: 34px; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 8px; z-index: 60; display: flex; flex-direction: column; }
.bell-pop a, .bell-empty { padding: 7px 8px; border-radius: 8px; font-size: .88rem; color: inherit; text-decoration: none; } .bell-pop a:hover { background: var(--tint, #eef4f1); } .bell-empty { color: var(--muted); }
.bell-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 2px; font-weight: 700; } .bell-all { margin-top: 4px; border-top: 1px solid var(--line); font-weight: 700; }
.ap-sig { display: block; max-height: 46px; max-width: 160px; margin-top: 4px; object-fit: contain; } .ap-act { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ap-approve { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .ap-approve > input[name=note] { flex: 1; min-width: 180px; } .ap-sign { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }

/* POS: tax per line, the Credit method */
.pos-line .tx { font-size: .78rem; color: var(--muted); white-space: nowrap; text-align: right; } .pos-line select.tx { max-width: 100%; padding: 2px 4px; }
.pos-credit-btn.on { background: var(--acacia); color: #fff; border-color: var(--acacia); } .pos-credit-btn:disabled { opacity: .45; cursor: not-allowed; }
.masked { color: var(--muted, #8a948f); letter-spacing: 1px; cursor: help; }
select.locked, input.locked { pointer-events: none; background: #f4f6f5; }

/* POS and side menu: thin, quiet scrollbars where a list is longer than its panel */
.pos-lines, .pos-tiles, .side { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pos-lines::-webkit-scrollbar, .pos-tiles::-webkit-scrollbar, .side::-webkit-scrollbar { width: 8px; }
.pos-lines::-webkit-scrollbar-thumb, .pos-tiles::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.pos-lines::-webkit-scrollbar-track, .pos-tiles::-webkit-scrollbar-track, .side::-webkit-scrollbar-track { background: transparent; }

/* Platform › Coupons: the code to give customers, easy to read out and copy */
.coupon-give { display: inline-flex; align-items: center; gap: 8px; }
.coupon-give b { font-size: 1.05rem; letter-spacing: .06em; padding: 3px 10px; border: 1.5px dashed color-mix(in srgb, var(--acacia) 55%, var(--line)); border-radius: 8px;
  background: color-mix(in srgb, var(--acacia) 7%, #fff); color: var(--acacia); white-space: nowrap; }

/* Agreements: the viewer, the accept-and-sign block, the signature pad, and the admin category cards */
.agr-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 10px; }
.agr-box { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--acacia) 3%, #fff); }
.agr-box:empty { display: none; }
.agr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.agr-reader .agr-frame { height: 420px; margin-top: 0; }
.agr-lock.error { color: var(--danger, #b3412f); font-weight: 600; }
.agr-accept { font-size: .86rem; line-height: 1.45; }
.agr-typed { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.15rem; }
.sigpad { position: relative; border: 1.5px dashed var(--line); border-radius: 10px; background: #fff; max-width: 560px; touch-action: none; }
.sigpad canvas { display: block; width: 100%; height: auto; aspect-ratio: 560 / 160; cursor: crosshair; touch-action: none; }
.sigpad [data-sig-clear] { position: absolute; top: 6px; right: 10px; }
.sigpad .sig-line { position: absolute; left: 24px; right: 24px; bottom: 34px; border-bottom: 1px solid #c9cfd3; pointer-events: none; }
.sig-value { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.agr-signed { display: grid; gap: 4px; max-width: 420px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.agr-typed-sig { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.5rem; }
.agr-signed img { max-width: 100%; height: auto; border-top: 1px solid var(--line); }
tr.on td { background: color-mix(in srgb, var(--acacia) 6%, transparent); }

/* Platform › Agreements dashboard: a stats strip, then one card per agreement link */
.agr-stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 16px; }
.agr-stat { display: flex; flex-direction: column; justify-content: center; min-width: 96px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.agr-stat .n { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.agr-stat .l { font-size: .74rem; color: var(--muted); }
.agr-stat.ok .n { color: var(--acacia); }
.agr-stat.dim .n { color: var(--muted); }
.agr-stat.warn { border-color: #efd29f; background: var(--marigold-tint); }
.agr-stat-sep { width: 1px; background: var(--line); margin: 4px 4px; }
.agr-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.agr-cat { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .2s, transform .2s; }
.agr-cat:hover { box-shadow: 0 8px 24px -12px rgba(16, 24, 40, .25); transform: translateY(-2px); }
.agr-cat.is-off { background: repeating-linear-gradient(135deg, #fff, #fff 10px, #fafaf7 10px, #fafaf7 20px); }
.agr-cat-head { display: flex; align-items: center; gap: 10px; }
.agr-cat-head .grow { flex: 1; }
.agr-cat-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.agr-cat-ic.customer { background: var(--acacia-tint); color: var(--acacia); }
.agr-cat-ic.reseller { background: #eef4ff; color: #2f7bf5; }
.agr-cat-ic svg { width: 20px; height: 20px; }
.agr-cat-kind { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.agr-cat-name { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
.agr-cat-name:hover { color: var(--acacia); text-decoration: underline; }
.agr-cat-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--paper, #f6f4ef); }
.agr-cat-facts dt { font-size: .7rem; color: var(--muted); }
.agr-cat-facts dd { margin: 0; font-size: .86rem; font-weight: 600; }
.agr-cat-note { margin: 0; font-size: .8rem; color: var(--muted); }
.agr-cat-note.warn { color: #6d4a0e; font-weight: 600; }
.agr-cat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2, var(--line)); }

/* Settings › Document layouts: the template list and the designer (controls left, live preview right) */
.dl-groups { display: grid; gap: 14px; }
.dl-tpl { padding: 4px 0; } .dl-tpl + .dl-tpl { border-top: 1px dashed var(--line); }
.dl-tpl .badge { margin-left: 4px; }
.ld { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ld-side { display: grid; gap: 12px; max-height: calc(100vh - 120px); overflow: auto; padding-right: 4px; position: sticky; top: 70px; }
.ld-card { padding: 12px 14px; margin: 0; }
.ld-h { margin: 0 0 8px; font-size: .95rem; }
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ld-grid .field { margin-bottom: 8px; }
.ld-sections { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ld-sec { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ld-sec.off { opacity: .55; background: #fafaf7; }
.ld-sec.dragging { opacity: .4; } .ld-sec.drop { box-shadow: 0 -3px 0 var(--acacia); }
.ld-sec-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.ld-grip { cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; }
.ld-sec-name { flex: 1; text-align: left; background: none; border: 0; padding: 2px 4px; cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--ink); display: flex; flex-direction: column; }
.ld-sec-name small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.ld-sec.open .ld-sec-head { border-bottom: 1px solid var(--line); }
.ld-sec-body { padding: 10px 12px; display: grid; gap: 6px; }
.ld-sec-body .field { margin: 0; }
.ld-cols { display: inline-flex; gap: 2px; }
.ld-ib { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 1px 6px; font-size: .78rem; cursor: pointer; line-height: 1.5; color: var(--ink); }
.ld-ib.on { background: var(--acacia); color: #fff; border-color: var(--acacia); }
.ld-ib:disabled { cursor: default; opacity: .6; }
.ld-fields { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; }
.ld-fields li { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; background: var(--paper, #f6f4ef); font-size: .82rem; }
.ld-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-mini { font-size: .8rem !important; padding: 3px 6px !important; min-height: 0 !important; }
.ld-fields .ld-mini { width: 110px; } .ld-fields .ld-w { width: 58px; }
.ld-ver { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2, var(--line)); }
.ld-main { position: sticky; top: 70px; }
.ld-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ld-toolbar .grow { flex: 1; }
.ld-frame { width: 100%; height: calc(100vh - 150px); min-height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #e9ece9; }
@media (max-width: 1100px) { .ld { grid-template-columns: 1fr; } .ld-side, .ld-main { position: static; max-height: none; } .ld-frame { height: 80vh; } }

/* Lease & rentals: the fleet board and its screens */
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; padding: 12px 16px 16px; }
.fleet-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.fleet-card:hover { box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .3); transform: translateY(-1px); }
.fleet-card .badge { align-self: flex-start; }
.fleet-card b { font-size: .9rem; } .fleet-card small { color: var(--muted); font-size: .75rem; }
.fleet-card.st-available { border-left-color: #2fa36f; } .fleet-card.st-reserved { border-left-color: #2f7bf5; } .fleet-card.st-on_hire { border-left-color: #e3a33b; }
.fleet-card.st-maintenance, .fleet-card.st-inspection { border-left-color: #b3412f; } .fleet-card.st-unavailable { border-left-color: #9aa6a0; }
.fleet-card.st-allocated { border-left-color: #2f7bf5; } .fleet-card.st-on_trip { border-left-color: #e3a33b; } .fleet-card.st-retired { border-left-color: #c9d0cc; opacity: .7; }
.lm-list { margin: 0; padding-left: 18px; columns: 1; } .lm-list li { margin: 2px 0; }
table.line-grid.lf-items { min-width: 1180px; }
tr.sub-row > td { background: var(--paper, #f6f4ef); padding-top: 4px; padding-bottom: 6px; }
.alloc-assets { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; max-height: 220px; overflow: auto; }
.neg { color: var(--danger, #b3412f); }

/* ---------- onboarding CRM (platform and reseller portal) ---------- */
.crm-pipeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(118px, 100%), 1fr)); gap: 8px; }
.crm-stage { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.crm-stage b { font-size: 1.3rem; } .crm-stage span { font-size: .75rem; color: var(--muted); }
.crm-stage.on { border-color: var(--acacia); box-shadow: 0 0 0 2px var(--acacia-tint); } .crm-stage.closed { background: var(--line-2); }
.crm-signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.crm-sig { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.crm-sig > span { font-weight: 800; color: var(--muted); } .crm-sig.done { border-style: solid; background: var(--acacia-tint); } .crm-sig.done > span { color: var(--acacia-deep); }
.crm-sig small { display: block; color: var(--muted); font-size: .72rem; }
.crm-timeline { list-style: none; margin: 0; padding: 0; } .crm-timeline li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.crm-timeline li.stage { opacity: .85; } .crm-ic { font-size: 1.1rem; width: 26px; text-align: center; } .crm-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crm-text { margin: 4px 0 0; white-space: pre-line; }

/* ---------- platform settings: password security ---------- */
.ps-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-bottom: 16px; }
.ps-summary > div { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ps-summary small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ps-summary b { font-size: .86rem; font-weight: 600; line-height: 1.35; } .ps-ic { font-size: 1.2rem; line-height: 1; margin-top: 2px; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ps-col { display: grid; gap: 16px; }
.ps-lead { margin: -4px 0 12px; }
.ps-label { margin: 14px 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ps-opts { display: grid; gap: 6px; }
label.ps-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; color: var(--ink); transition: border-color .15s, background .15s; }
label.ps-opt input { width: 16px; height: 16px; margin: 2px 0 0; padding: 0; accent-color: var(--acacia); }
label.ps-opt b { display: block; font-weight: 600; font-size: .875rem; } label.ps-opt small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }
label.ps-opt:hover { border-color: var(--acacia); } label.ps-opt:has(input:checked) { border-color: var(--acacia); background: var(--acacia-tint); }
.ps-unit { display: flex; align-items: center; gap: 8px; } .ps-unit input { max-width: 110px; } .ps-unit span { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.ps-narrow { max-width: 360px; }
.ps-save { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -6px 18px -14px rgba(16, 24, 40, .35); }
@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; } .ps-save { position: static; flex-direction: column; align-items: stretch; box-shadow: none; } }

/* ── Transfer requests and stock availability ───────────────── */
.trq-views { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.trq-views a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 600; color: inherit; text-decoration: none; background: var(--card, #fff); }
.trq-views a.on { background: var(--acacia); border-color: var(--acacia); color: #fff; }
.trq-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .trq-grid { grid-template-columns: 1fr; } }
.trq-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: .88rem; }
.trq-facts dt { color: var(--muted); }
.trq-facts dd { margin: 0; }
.trq-link { padding: 4px 0; }
.trq-decide { margin-bottom: 16px; border-left: 4px solid var(--acacia); }
.trq-history { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.trq-history li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.trq-history li:last-child { border-bottom: 0; }
.trq-av-title { font-size: .95rem; margin: 4px 0 8px; }
tr.trq-mine td { background: color-mix(in srgb, var(--acacia) 6%, transparent); }
.line-avail { border: 0; background: none; cursor: pointer; font-size: .78rem; color: var(--acacia); padding: 0 4px; font-weight: 600; }
.ua-branches { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ua-branches legend { padding: 0 4px; }
.ua-branches .check { margin: 0; }

/* ── Platform team: levels, groups, assignments ─────────────── */
.tm-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.tm-level { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); color: inherit; text-decoration: none; position: relative; }
.tm-level b { font: 700 1.3rem/1.1 var(--display); }
.tm-level small { color: var(--muted); font-size: .78rem; }
.tm-level.on, .tm-level:not(.static):hover { border-color: var(--acacia); box-shadow: 0 0 0 1px var(--acacia) inset; }
.tm-level.warn b { color: #b3261e; }
.tm-level.static b.tm-role { font: 600 .78rem/1.4 inherit; align-self: flex-start; }
.tm-rank { position: absolute; top: 8px; right: 10px; font-size: .7rem; color: var(--muted); font-weight: 700; }
.tm-role { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: #eef2f0; color: #33433d; vertical-align: middle; }
.tm-superuser { background: #1e2b3a; color: #fff; }
.tm-administrator { background: #e3eefc; color: #1d4f91; }
.tm-supervisor { background: #fdf0d8; color: #8a5a00; }
.tm-agent { background: #e3f3ec; color: #1e6b57; }
.tm-form .panel { margin-bottom: 14px; }
.tm-role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.tm-role-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; margin: 0; }
.tm-role-card input { width: auto; margin-top: 3px; }
.tm-role-card span small { display: block; color: var(--muted); font-size: .78rem; margin-top: 6px; font-weight: 400; }
.tm-role-card:has(input:checked) { border-color: var(--acacia); box-shadow: 0 0 0 1px var(--acacia) inset; }
.tm-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tm-checks .check, .tm-orgs .check { margin: 0; }
.tm-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 4px 16px; max-height: 300px; overflow-y: auto; padding: 8px; border: 1px solid var(--line-2, #eee); border-radius: 10px; }
.tm-matrix td.center, .tm-matrix th.center { text-align: center; }
.tm-matrix select.tm-cell { width: auto; min-width: 72px; padding: 3px 6px; font-size: .78rem; }
.tm-matrix tr.tm-area-start td { border-top: 2px solid var(--line); }
.tm-def { display: inline-block; width: 14px; color: var(--muted); font-weight: 700; }
.tm-def.on { color: var(--acacia); }
.tm-perm-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-perm { font-size: .78rem; padding: 3px 8px; background: #f3f5f4; border-radius: 8px; }
.tm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.tm-group-card { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); color: inherit; text-decoration: none; }
.tm-group-card:hover { border-color: var(--acacia); }
.tm-mini { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.tm-mini b { color: var(--ink, #15212b); }
.tm-mini .neg b { color: #b3261e; }
.tm-assignbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; position: sticky; top: 0; z-index: 3; }
.tm-assignbar select, .tm-assignbar input { width: auto; flex: 1; min-width: 140px; }
.tm-assignee { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin: 2px 4px 2px 0; border-radius: 999px; font-size: .76rem; background: #f0f2f1; }
.tm-assignee.lead { background: #e3eefc; color: #1d4f91; font-weight: 600; }
.tm-assignee.paused { opacity: .55; text-decoration: line-through; }
.tm-assignee .linkbtn { padding: 0 2px; }
.tm-funnel { display: flex; gap: 4px; margin-top: 14px; min-height: 54px; }
.tm-stage { display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: #15212b; background: #eef2f0; min-width: 70px; overflow: hidden; }
.tm-stage b { font-size: 1.05rem; }
.tm-stage span { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-stage.blue { background: #e3eefc; } .tm-stage.pending, .tm-stage.amber { background: #fdf0d8; } .tm-stage.paid { background: #dff1e7; } .tm-stage.overdue { background: #fbe1df; } .tm-stage.disabled { background: #eceeed; color: #6b7570; }
.crm-assignees { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; padding: 10px 14px; }
@media (max-width: 700px) { .tm-funnel { flex-wrap: wrap; } .tm-stage { flex: 1 1 40% !important; } }

/* ── Owner reports ─────────────────────────────────────────── */
.or-status { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); align-items: center; }
.or-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c9cfcb; margin-right: 6px; }
.or-dot.on { background: #1e8a5a; }
.or-template { white-space: pre-wrap; font-size: .82rem; background: #f5f6f2; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; }
.or-report { max-width: 900px; overflow-x: auto; }   /* the report is email markup (fixed tables): on a phone it scrolls inside its panel */
@media print { .or-report { border: 0; box-shadow: none; } }

/* ── Opening balances ──────────────────────────────────────── */
.ob-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.ob-flow-step { position: relative; padding: 12px 12px 12px 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.ob-flow-step span { position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--acacia); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.ob-flow-step b { display: block; font-size: .88rem; }
.ob-flow-step small { color: var(--muted); font-size: .75rem; }
.ob-meter { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: #e3e6df; vertical-align: middle; overflow: hidden; }
.ob-meter.big { width: 120px; height: 9px; }
.ob-meter i { display: block; height: 100%; background: var(--acacia); }
.ob-steps a { white-space: nowrap; }
.ob-checks { list-style: none; margin: 12px 0 0; padding: 0; }
.ob-checks li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2, #eee); }
.ob-checks li:last-child { border-bottom: 0; }
.ob-checks small { display: block; color: var(--muted); font-size: .78rem; }
.ob-tick { flex: none; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #fbe1df; color: #b3261e; font-weight: 700; font-size: .75rem; display: grid; place-items: center; }
.ob-checks li.ok .ob-tick { background: #dff1e7; color: #1e6b57; }
.ob-rules { margin: 0; padding-left: 18px; font-size: .88rem; line-height: 1.5; }
.ob-rules li { margin-bottom: 6px; }
.ob-scope { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 8px; }
.ob-scope-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; margin: 0; }
.ob-scope-card input[type=checkbox] { width: auto; margin-top: 3px; }
.ob-scope-card small { display: block; color: var(--muted); font-size: .76rem; }
.ob-scope-card:has(input:checked) { border-color: var(--acacia); box-shadow: 0 0 0 1px var(--acacia) inset; }
.ob-method { margin-top: 6px; font-size: .78rem; padding: 4px 6px; }
.ob-ledgers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.ob-ledger.on { border-color: var(--acacia); }
.ob-ledger-fig { margin-top: 8px; font-size: 1.05rem; }
.ob-file { max-width: 170px; font-size: .75rem; }
tr.ob-err td { background: #fff4f3; }
.ob-except summary { cursor: pointer; color: var(--acacia); }
.ob-except input { font-size: .8rem; padding: 4px 6px; }
/* opening balances — page furniture */
.ob-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ob-head h1 { margin: 2px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-eyebrow { font-size: .78rem; color: var(--muted); }
.ob-eyebrow a { color: var(--muted); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, #fff); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ob-chip small { font-weight: 500; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ob-chip.muted-chip { background: transparent; color: var(--muted); }
.ob-stepper { display: flex; align-items: stretch; gap: 6px; margin: 4px 0 16px; overflow-x: auto; padding-bottom: 2px; }
.ob-st, .ob-st-side { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #15212b); text-decoration: none; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.ob-st { flex: 1 1 0; min-width: 150px; }
.ob-st-side { color: var(--muted); }
.ob-st-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; background: #eef2f0; color: var(--muted); }
.ob-st.done .ob-st-n { background: #dff1e7; color: #1e6b57; }
.ob-st.on, .ob-st-side.on { border-color: var(--acacia); box-shadow: 0 0 0 1px var(--acacia) inset; color: var(--ink, #15212b); }
.ob-st.on .ob-st-n { background: var(--acacia); color: #fff; }
.ob-st-ring { font-size: .72rem; padding: 2px 7px; border-radius: 999px; background: #eef2f0; }
.ob-progress { height: 8px; border-radius: 4px; background: #e3e6df; overflow: hidden; margin: 10px 0 4px; }
.ob-progress i { display: block; height: 100%; background: var(--acacia); }
.ob-tick { background: #fdf0d8; color: #8a5a00; }
.ob-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f3f7f5; font-size: .86rem; }
.ob-grid-side { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 960px) { .ob-grid-side { grid-template-columns: 1fr; } }
.ob-filemeta { font-size: .86rem; margin: -2px 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; }
.ob-kpis > div { padding: 12px 14px; border-radius: 12px; background: #f5f6f2; border: 1px solid transparent; }
.ob-kpis small { display: block; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ob-kpis b { display: block; font: 700 1.15rem/1.3 var(--display); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ob-kpis em { display: block; font-style: normal; font-size: .76rem; color: var(--muted); }
.ob-kpis .good { background: #eef8f2; border-color: #cfe9da; }
.ob-kpis .good em { color: #1e6b57; }
.ob-kpis .bad { background: #fff1ef; border-color: #f4cfca; }
.ob-kpis .bad b, .ob-kpis .bad em { color: #b3261e; }
.ob-kpis.wide { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.ob-upload { display: flex; flex-direction: column; gap: 10px; }
.ob-drop { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border: 2px dashed #c8d3cd; border-radius: 12px; background: #fafbf8; cursor: pointer; margin: 0; transition: border-color .15s, background .15s; }
.ob-drop:hover, .ob-drop.over { border-color: var(--acacia); background: #f1f7f4; }
.ob-drop.chosen { border-style: solid; border-color: var(--acacia); background: #eef8f2; }
.ob-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ob-drop-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #e3efe9; color: var(--acacia); font-size: 1.2rem; font-weight: 700; }
.ob-drop-text b { display: block; font-size: .9rem; word-break: break-all; }
.ob-drop-text small { color: var(--muted); font-size: .76rem; }
.ob-upload-actions { display: flex; justify-content: space-between; gap: 8px; }
.ob-upload.compact .ob-drop { padding: 12px; }
.ob-upload.compact .ob-drop-icon { width: 30px; height: 30px; font-size: 1rem; }
.ob-code { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #eef2f0; font: 600 .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #33433d; white-space: nowrap; }
.ob-code.alt { background: #e3eefc; color: #1d4f91; }
.ob-side { font-size: .72rem; font-weight: 700; color: var(--muted); margin-left: 2px; }
.ob-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.ob-pill.ok { background: #dff1e7; color: #1e6b57; }
.ob-pill.warn { background: #fdf0d8; color: #8a5a00; }
.ob-pill.bad { background: #fbe1df; color: #b3261e; }
.ob-pill.muted { background: #eef0ef; color: #6b7570; }
.ob-msg { font-size: .76rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }
tr.ob-err .ob-msg { color: #b3261e; }
.ob-table td.num, .ob-table th.right { font-variant-numeric: tabular-nums; }
.ob-table td { vertical-align: middle; }
.ob-table .ob-row { width: 44px; color: var(--muted); font-size: .78rem; }
.ob-table select { min-width: 0; width: 100%; }
.ob-filter { display: inline-flex; padding: 3px; border-radius: 999px; background: #eef2f0; gap: 2px; }
.ob-filter a { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.ob-filter a.on { background: #fff; color: var(--ink, #15212b); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ob-lead { padding: 0 16px; margin: 0 0 12px; font-size: .84rem; color: var(--muted); }
.ob-banner { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdf6e6; border: 1px solid #f1dfb5; font-size: .86rem; }
.ob-banner ul { margin: 6px 0 0; padding-left: 18px; }
.ob-banner.bad { background: #fff1ef; border-color: #f4cfca; color: #8c1d18; }
.ob-banner.good { background: #eef8f2; border-color: #cfe9da; color: #1e6b57; }
section > .ob-banner { margin: 0 16px 12px; }
.ob-ledger { display: flex; flex-direction: column; gap: 8px; border-top: 4px solid #d9dfdb; }
.ob-ledger.good { border-top-color: #3bb58a; }
.ob-ledger.bad { border-top-color: #e0654f; }
.ob-ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ob-ledger-desc { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.ob-ledger-fig b { display: block; font: 700 1.15rem/1.3 var(--display); }
.ob-ledger-fig span { font-size: .78rem; color: var(--muted); }
.ob-cta { width: 100%; justify-content: center; padding: 12px; font-size: .95rem; }
.ob-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #e3e6df; }
.ob-timeline li { position: relative; padding: 0 0 12px 10px; font-size: .86rem; }
.ob-timeline li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--acacia); border: 2px solid #fff; }
.ob-when { display: block; font-size: .74rem; color: var(--muted); }
.ob-except summary { font-size: .8rem; }
/* opening balances — fit the stepper and the figure tiles on one row */
.ob-st { min-width: 0; padding: 8px 10px; }
.ob-st-l { overflow: hidden; text-overflow: ellipsis; }
.ob-st-side { flex: none; padding: 8px 12px; }
.ob-kpis { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
.ob-kpis b { font-size: 1.05rem; }
/* tabs straight above an action strip: one green line for both */
.tabs + .action-menu.keys { border-top: 0; padding-top: 2px; }

/* KPI cards, everywhere the same: a stripe of the theme colour on the left (dashboards, reports, document figures, migration).
   The figure strips (.stats) become cards too. A warning figure keeps its own colour on the stripe. */
.kpi, .panel.kpi, .rkpi, .rs-kpis .k, .ob-kpis > div, .stats > .stat { border-left: 4px solid var(--acacia); }
.kpi.kpi-main { border-left-color: var(--acacia-deep); }
.kpi.pending { border-left-color: var(--line); }
.ob-kpis .bad { border-left-color: var(--danger); }
.ob-kpis > div:not(.good):not(.bad) { border-left-color: var(--acacia); }
.stats { background: none; border: 0; border-radius: 0; gap: 12px; }
.stats > .stat { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--acacia); border-radius: 12px; padding: 14px 16px; }
.stats > .stat:last-child { border-right: 1px solid var(--line); }
.stats > .stat.alert-stat { border-left-color: var(--marigold); }
a.rkpi:hover, a.rkpi:focus-visible { border-left-color: var(--acacia-deep); }
/* plain buttons (a dialog's ✕, "Clear", inline links styled as buttons) stay flat */
:is(body, .page-head) .btn.plain, :is(body, .page-head) .btn.plain:hover, :is(body, .page-head) .btn.plain:focus-visible, :is(body, .page-head) .btn.plain:active {
  background: transparent; border-color: transparent; border-top-width: 1px; box-shadow: none; transform: none; margin-bottom: 0; color: var(--ink-2); }
:is(body, .page-head) .btn.plain:hover { color: var(--acacia-deep); text-decoration: underline; }
/* the action icon in front of a button's label */
.btn > .btn-ico { flex: none; width: 15px; height: 15px; margin-left: -2px; }
.btn.sm > .btn-ico { width: 13px; height: 13px; }
/* the interface language picker (dashboard) */
.lang-pick { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lang-pick label { margin: 0; white-space: nowrap; }
.lang-pick select { width: auto; padding: 5px 28px 5px 10px; font-size: .8125rem; }

/* key suppliers: stock status chips (per branch, or the status only) */
.bchip { display: inline-block; margin: 1px 4px 2px 0; padding: 1px 7px; border-radius: 999px; font-size: .74rem; white-space: nowrap; background: #eef1ef; color: #4a554f; }
.bchip.available { background: #e3f2e9; color: #1d6b3f; } .bchip.low-stock { background: #fdf0d8; color: #8a5a00; } .bchip.out-of-stock { background: #fde8e6; color: #9b2c22; }
.bchip.on-order { background: #e3edf8; color: #1f5f99; } .bchip.not-stocked, .bchip.discontinued { background: #f0f0f0; color: #8a8f8c; }
.bmore { display: inline; } .bmore summary { display: inline; cursor: pointer; color: var(--primary, #1e6b57); font-size: .74rem; } .bmore[open] summary { display: block; }

/* a reseller's own coupon, on its page */
.rs-own { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fbfcfa; }

/* the reseller's own details and coupon, on its dashboard */
.rs-me { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-bottom: 14px; }
.rs-me > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-me-code { border-left: 1px solid var(--line); padding-left: 18px; }
.rs-code { font-size: 1.5rem; letter-spacing: .04em; }
.rs-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; flex: 1 1 200px; }
@media (max-width: 760px) { .rs-me { grid-template-columns: 1fr; } .rs-me-code { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } }

/* SACCO: a loan's steps */
[data-loan-steps] li.done { opacity: .75; } [data-loan-steps] li.done b { background: var(--success, #1e7a4f); }
[data-loan-steps] li.on { border-color: var(--accent, #1e6b57); box-shadow: 0 0 0 2px rgba(30,107,87,.15); } [data-loan-steps] li:not(.done):not(.on) b { background: #c9ceca; }
@media (max-width: 760px) { [data-loan-steps] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---- Approvals dashboard ---- */
.shortcuts .dash-actions a.sc-approvals { background: #24577f; } .shortcuts .dash-actions a.sc-approvals.has-n { background: #b45309; }
.sc-n { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 9px; background: #fff; color: #b45309; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }
.ap-kpis { margin-bottom: 14px; }
.rkpi.ap-k-mine { border-color: color-mix(in srgb, #e3a33b 60%, var(--line)); background: #fffaf0; }
.rkpi.ap-k-late { border-color: color-mix(in srgb, var(--danger, #b42318) 50%, var(--line)); } .rkpi.ap-k-late .k-v { color: var(--danger, #b42318); }
.ap-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ap-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ap-flow li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 99px; border: 1px solid var(--line); font-size: .72rem; background: #fff; white-space: nowrap; }
.ap-flow li + li::before { content: ''; width: 8px; height: 1px; background: var(--line); margin: 0 3px 0 -6px; }
.ap-f-dot { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--line-2, #eef1ef); font-weight: 700; font-size: .66rem; }
.ap-flow .ap-f-done { border-color: color-mix(in srgb, var(--acacia) 45%, var(--line)); } .ap-flow .ap-f-done .ap-f-dot { background: var(--acacia); color: #fff; }
.ap-flow .ap-f-current { border-color: #e3a33b; background: #fff8e8; } .ap-flow .ap-f-current .ap-f-dot { background: #e3a33b; color: #fff; }
.ap-flow .ap-f-rejected { border-color: var(--danger, #b42318); background: #fdf0ee; } .ap-flow .ap-f-rejected .ap-f-dot { background: var(--danger, #b42318); color: #fff; }
.ap-flow .ap-f-upcoming, .ap-flow .ap-f-skipped { color: var(--muted); } .ap-flow .ap-f-skipped { opacity: .6; }
.ap-list tr.ap-late td:first-child { box-shadow: inset 3px 0 0 var(--danger, #b42318); }
.ap-review > td { background: #fbfcfb; }
.ap-review-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 14px; align-items: start; }
.ap-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ap-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 12px; }
.ap-timeline li { position: relative; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; gap: 3px; }
.ap-timeline li::before { content: ''; position: absolute; left: -26px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); border: 2px solid #fff; }
.ap-timeline .ap-t-done::before { background: var(--acacia); } .ap-timeline .ap-t-current { border-color: #e3a33b; background: #fff8e8; } .ap-timeline .ap-t-current::before { background: #e3a33b; }
.ap-timeline .ap-t-rejected { border-color: var(--danger, #b42318); background: #fdf0ee; } .ap-timeline .ap-t-rejected::before { background: var(--danger, #b42318); }
.ap-timeline .ap-t-skipped { opacity: .6; }
@media (max-width: 1100px) { .ap-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ap-board, .ap-review-grid, .ap-act { grid-template-columns: 1fr; } .ap-kpis { grid-template-columns: 1fr 1fr; } }

/* ---- Dashboard: a specific date or a range ---- */
.periods .dash-dates { position: relative; display: inline-block; }
.periods .dash-dates > summary { list-style: none; cursor: pointer; }
.periods .dash-dates > summary::-webkit-details-marker { display: none; }
.dash-dates-pop { position: absolute; right: 0; z-index: 20; margin-top: 6px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; gap: 10px; min-width: 260px; }
.dash-dates-pop label { display: grid; gap: 2px; }
@media (max-width: 640px) { .dash-dates-pop { right: auto; left: 0; } }

/* ---- Holding company: the company switcher ---- */
.co-switch { position: relative; }
.co-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); }
.co-switch > summary::-webkit-details-marker { display: none; }
.co-switch > summary:hover, .co-switch[open] > summary { background: var(--line-2, #f1f3f2); }
.co-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 8px; display: grid; gap: 4px; }
.co-pop form { margin: 0; }
.co-item { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; }
.co-item:hover:not(:disabled), .co-item:focus-visible { background: var(--line-2, #f1f3f2); outline: none; }
.co-item.on { cursor: default; background: color-mix(in srgb, var(--acacia) 8%, #fff); }

/* language switch on the public pages; prices in the visitor's currency */
.region-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 5px 11px; font: 600 .78rem/1 var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.region-btn:hover { border-color: var(--acacia); color: var(--acacia); }
@media (max-width: 760px) { .region-btn span { display: none; } }   /* phones: the flag and the language only */
.auth-lang { position: absolute; top: 14px; right: 16px; z-index: 5; }
/* a package price in the visitor's own currency, under the price it is converted from */
.price-approx { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.fx-credit { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 10px; } .fx-credit a { color: inherit; }
/* the country & language dialog: centred, saves as you choose */
dialog.region-dlg { width: min(520px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 24px)); border: 0; border-radius: 20px; padding: 0;
  box-shadow: 0 24px 64px rgba(16, 32, 26, .28), 0 2px 8px rgba(16, 32, 26, .08); overflow: hidden; }
dialog.region-dlg[open] { display: flex; flex-direction: column; animation: rg-in .16s ease-out; }
dialog.region-dlg::backdrop { background: rgba(15, 26, 22, .5); backdrop-filter: blur(3px); }
@keyframes rg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.rg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 12px; }
.rg-head h3 { margin: 0; font-size: 1.2rem; } .rg-head p { margin: 4px 0 0; font-size: .82rem; color: var(--muted); }
.rg-x { border: 0; background: var(--line-2, #f1f3f2); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .9rem; color: var(--ink-2); flex: none; }
.rg-x:hover { background: var(--line); }
.rg-langs { display: flex; gap: 6px; padding: 0 22px 14px; margin: 0; }
.rg-lang { flex: 1; position: relative; text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: 9px 6px; cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--ink-2); transition: border-color .12s, background .12s; }
.rg-lang input { position: absolute; opacity: 0; pointer-events: none; }
.rg-lang:hover { border-color: var(--acacia); } .rg-lang.on { border-color: var(--acacia); background: var(--acacia-tint); color: var(--acacia-deep); }
.rg-lang:has(input:focus-visible) { outline: 2px solid var(--acacia); outline-offset: 2px; }
.rg-body { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; border-top: 1px solid var(--line); }
.rg-search { margin: 12px 22px 8px; width: auto; border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); background: #f7f8f5; font-size: .9rem; }
.rg-search:focus { background: #fff; border-color: var(--acacia); outline: none; box-shadow: 0 0 0 3px var(--acacia-tint); }
.rg-list { overflow-y: auto; padding: 0 12px 10px; flex: 1; min-height: 0; overscroll-behavior: contain; }
.rg-group { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px; }
.rg-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.rg-item:hover, .rg-item:focus-visible { background: #f3f6f2; outline: none; }
.rg-item.on { background: var(--acacia-tint); } .rg-item.on .rg-name { font-weight: 700; color: var(--acacia-deep); }
.rg-flag { flex: none; width: 36px; height: 28px; border-radius: 8px; background: #f1f3f2; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }   /* a flag where the system has flag emoji (phones, Mac); the code, as a badge, on Windows */
.rg-name { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rg-name small { font-size: .75rem; color: var(--muted); font-weight: 400; }
.rg-cur { font: 600 .72rem/1 var(--mono, monospace); color: var(--muted); background: #f1f3f2; border-radius: 6px; padding: 4px 6px; }
.rg-tick { color: var(--acacia); font-weight: 800; }
.rg-none { text-align: center; color: var(--muted); font-size: .85rem; padding: 18px 0; margin: 0; }
.rg-foot { margin: 0; padding: 10px 22px 14px; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line); background: #fafbf8; }
/* the dialog's two forms are not the usual padded, scrolling dialog form (dialog > form) */
dialog.region-dlg > form.rg-langs { flex: none; flex-direction: row; overflow: visible; padding: 0 22px 14px; gap: 6px; }
dialog.region-dlg > form.rg-body { flex: 1 1 auto; overflow: hidden; padding: 0; gap: 0; }
dialog.region-dlg .rg-search { width: auto; align-self: stretch; box-sizing: border-box; max-width: none; }
.rg-head h3:focus { outline: none; }
@media (max-width: 480px) { .rg-head { padding: 16px 16px 10px; } dialog.region-dlg > form.rg-langs { padding: 0 16px 12px; } .rg-search { margin: 10px 16px 6px; } .rg-list { padding: 0 6px 8px; } .rg-foot { padding: 10px 16px 12px; } }
/* what someone is charged, wherever prices are shown (partials.billing-tag) */
.billing-tag { display: flex; gap: 8px; align-items: flex-start; width: fit-content; max-width: 100%; margin: 0 0 16px; padding: 8px 14px; border-radius: 999px;
  background: var(--acacia-tint); color: var(--acacia-deep); border: 1px solid color-mix(in srgb, var(--acacia) 25%, transparent); font-size: .84rem; line-height: 1.4; }
.billing-tag b { font-weight: 700; } .billing-tag small { color: var(--muted); font-size: .78rem; } .billing-tag a { color: inherit; }
.bt-i { font-weight: 700; flex: none; }
@media (max-width: 640px) { .billing-tag { border-radius: 14px; } }