/* ══════════════════════════════════════════════════════════════════════════
   PaySight
   Soft shadows, one accent, quiet chrome. The accent is the tenant's own
   colour, handed in by sight-ui as --sight-primary; nothing here names a
   client.
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Neutrals — clean greys on white */
  --bg:        #f3f4f6;
  --bg2:       #f9fafb;
  --surface:   #ffffff;
  --surface2:  #f6f7f9;
  --head-tint: #f1f2f4;   /* the band behind a card's header row */
  --line:      #e2e4e8;
  --line2:     #eceef1;
  --text:      #1f2933;
  --text2:     #4b5563;
  --text3:     #8a8a90;
  --ink:       var(--sight-primary, #1f2937);  /* the tenant's colour — primary buttons, active nav */
  --ink-deep:  var(--sight-primary-dark, #111827);

  /* The single accent — the tenant's colour, handed in by sight-core as
     --sight-primary (see sight-ui.js applyBranding()). #dc3a3a is only the
     fallback for the rare page painted before boot sets the tenant vars. */
  --accent:      var(--sight-primary, #dc3a3a);
  --accent-deep: var(--sight-primary-dark, #111827);
  --accent-soft: var(--sight-primary-soft, #eef2f7);

  /* Functional */
  --blue:   #2563eb;
  --green:  #1a9b5e;
  --red:    #b42318;
  --amber:  #b45309;
  --purple: #6b7280;
  --teal:   #0e7490;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.07);
  --shadow:    0 4px 12px rgba(17,24,39,.07), 0 2px 4px rgba(17,24,39,.05);
  --shadow-lg: 0 18px 50px rgba(17,24,39,.16);

  --radius: 14px;
  --radius-sm: 9px;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --sidebar-w: 236px;
  /* The shared top bar's real height. This was a hardcoded 56px against a
     60px bar, so the sidebar and the page content sat four pixels under it. */
  --topbar-h: var(--s-bar-h, 60px);
  /* Where PaySight's own chrome starts: under the shared bar, and under the
     notch when the page runs edge to edge (viewport-fit=cover). The inset is
     zero in an ordinary browser tab, so on a desktop this is the bar height. */
  --ps-top: calc(var(--s-bar-h, 60px) + env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* body grows with the page (min-height, not height): the shared top bar is
   sticky inside body, and a body held to one screen's height carried the bar
   off the top as soon as a long page scrolled past that screen. */
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; -webkit-text-size-adjust: 100%; }
@media (min-width: 1024px) { html { zoom: 0.95; } }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
svg.li { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
#toast-container { position: fixed; top: 18px; right: 18px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1f2933; color: #fff; padding: 11px 16px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; max-width: 340px;
  animation: toastIn .22s cubic-bezier(.22,1,.36,1);
}
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-wrap { display: flex; align-items: center; justify-content: center; height: 240px; }

/* ══════════════════════════════════════════════════════════════════════════
   Sign-in is the platform's screen, not this one's. These styles are kept for
   the few arrival-style panels PaySight still draws.
   ══════════════════════════════════════════════════════════════════════════ */
#login-screen { position: fixed; inset: 0; z-index: 2000; }
.auth-grid { display: grid; grid-template-columns: 1.1fr 1fr; height: 100%; }
.auth-visual {
  position: relative; overflow: hidden; padding: 54px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(145deg, #6e1b13 0%, #9e2424 55%, #c62f2f 100%);
  color: #fff;
}
.auth-visual::before {
  content: ''; position: absolute; top: -80px; right: -60px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 70%);
  filter: blur(48px); pointer-events: none;
}
.a-logo { position: relative; align-self: flex-start; background: #fff; border-radius: 14px; padding: 16px 22px; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.a-logo img { display: block; height: 52px; }
.a-copy { position: relative; }
.a-copy h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.a-copy p { margin-top: 14px; max-width: 440px; color: rgba(255,255,255,.72); font-size: 16px; }
.a-foot { position: relative; color: rgba(255,255,255,.6); font-size: 13px; }

.auth-form-side { display: flex; align-items: center; justify-content: center; background: var(--bg2); padding: 40px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form .mobile-logo { display: none; margin-bottom: 20px; }
.auth-form h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.auth-form .sub { color: var(--text2); margin: 6px 0 26px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.auth-err { color: var(--red); font-size: 13px; font-weight: 500; margin: 12px 0; min-height: 18px; }
.auth-powered { margin-top: 34px; text-align: center; color: var(--text3); font-size: 12px; }
.auth-powered img { height: 39px; margin-top: 6px; opacity: .85; }

@media (max-width: 860px) {
  .auth-grid { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form .mobile-logo { display: block; }
}

/* ── Inputs & buttons ─────────────────────────────────────────────────────── */
.input, textarea.input, select.input {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 14px; transition: border-color .12s;
}
.input:focus, textarea.input:focus, select.input:focus { outline: none; border-color: var(--accent); }
textarea.input { resize: vertical; min-height: 74px; }
label.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.req::after { content: ' *'; color: var(--accent-deep); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.btn:hover { border-color: var(--text3); }
.btn .li { width: 16px; height: 16px; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-deep); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-deep); }
.btn.danger { color: var(--red); border-color: #f0c9c5; }
.btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════════════════ */
#app { min-height: 100%; }
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 900;
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--bg2); border-bottom: 1px solid var(--line);
}
#menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text2); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 30px; }
.brand .divider { width: 1px; height: 22px; background: var(--line); }
.brand .co-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
#topbar .spacer { flex: 1; }
#page-title { font-weight: 600; font-size: 15px; color: var(--text2); }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-user .u-meta { text-align: right; line-height: 1.15; }
.topbar-user .u-name { font-size: 13px; font-weight: 600; }
.topbar-user .u-role { font-size: 11px; color: var(--text3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.logout-btn { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; }
.logout-btn:hover { border-color: var(--red); color: var(--red); }
.logout-btn svg { width: 15px; height: 15px; }

#sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 800;
  background: var(--bg2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 12px;
}
.sidebar-section { margin-bottom: 6px; }
.sidebar-section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); padding: 12px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text2); cursor: pointer; transition: all .12s; margin-bottom: 2px;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item:focus { outline: none; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-item.active { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.nav-item.active .nav-icon svg { stroke: #fff; }
.nav-icon { display: flex; }
.nav-icon svg { width: 18px; height: 18px; stroke: currentColor; }
/* The nav scrolls, the workspace label and the VBA footer do not. Grouped
   sections made these lists long enough to run past the fold on a laptop —
   Stock alone is 16 items under four headers — and a sidebar you cannot reach
   the bottom of hides whole sections of the app. min-height:0 is what actually
   lets a flex child scroll instead of stretching its parent. */
#sidebar-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 2px; }
#sidebar-nav::-webkit-scrollbar { width: 6px; }
#sidebar-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--text3); }
#sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* First header sits flush with the workspace label above it. */
#sidebar-nav > .sidebar-section-label:first-child { padding-top: 2px; }

.sidebar-foot { flex-shrink: 0; padding: 14px 10px 4px; border-top: 1px solid var(--line2); }
.powered { color: var(--text3); font-size: 11px; text-align: center; }
.powered img { height: 33px; margin-top: 5px; opacity: .8; }

#sidebar-overlay { display: none; }

#main-wrap { margin-left: var(--sidebar-w); padding-top: var(--topbar-h); min-height: 100vh; }
#content { padding: 22px 26px 60px; max-width: 1500px; }

/* Below 980px the sidebar is a drawer behind the menu button in the page bar
   (the same breakpoint the page bar uses, so the two can never disagree about
   whether the sidebar is showing). Closed, it is hidden outright rather than
   only slid off-screen, so its shadow does not peek in at the edge and a
   screen reader does not walk through links nobody can see. It closes after
   a navigation, on the backdrop and on Escape — see app.js. */
@media (max-width: 980px) {
  #sidebar {
    width: min(300px, 86vw); top: var(--ps-top);
    padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-right: 0; box-shadow: none; transform: translateX(-100%); visibility: hidden;
    overscroll-behavior: contain;
    transition: transform .22s cubic-bezier(.22,1,.36,1), visibility 0s linear .22s;
  }
  #sidebar.open { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .22s cubic-bezier(.22,1,.36,1); }
  #main-wrap { margin-left: 0; }
  #sidebar-overlay {
    display: block; position: fixed; inset: 0; top: var(--ps-top); z-index: 750;
    background: rgba(17,24,39,.35); opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility 0s linear .2s;
  }
  #sidebar-overlay.open { opacity: 1; visibility: visible; transition: opacity .2s; }
  #sidebar .nav-item { min-height: 44px; }
  /* The root only: locking body as well makes body its own scroll container,
     and the sticky bars then sit at the top of the document — off screen on
     a page that was scrolled down. */
  html.ps-nav-open { overflow: hidden; }
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.page-head .ph-sub { color: var(--text2); font-size: 13.5px; margin-top: 3px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Panels / cards ───────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel.pad { padding: 18px; }

/* KPI stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.stat .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat .ic svg { width: 22px; height: 22px; }
.stat .s-val { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.stat .s-lbl { font-size: 12px; color: var(--text3); margin-top: 4px; font-weight: 500; }

/* ── Badges & pills ───────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.badge.grey { background: #eef0f2; color: #4b5563; }
.badge.orange { background: var(--accent-soft); color: var(--accent-deep); }
.badge.navy { background: var(--accent-soft); color: var(--ink-deep); }
.badge.green { background: #e3f5ec; color: #1f7a52; }
.badge.red { background: #fbe6e4; color: #b23129; }
.status-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); font-weight: 700; padding: 10px 12px; background: var(--surface2); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface2); }
.data-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow: visible; min-height: 280px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.row-actions { display: flex; gap: 6px; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 7px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); }
.icon-btn:hover { border-color: var(--text3); color: var(--text); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }
.icon-btn svg { width: 15px; height: 15px; }

.empty { text-align: center; padding: 50px 20px; color: var(--text3); }
.empty strong { display: block; margin-bottom: 4px; color: var(--text2); }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; }

/* ── Segmented control ────────────────────────────────────────────────────── */
.seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button { background: none; border: none; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--text2); border-radius: 7px; cursor: pointer; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ── Modals ───────────────────────────────────────────────────────────────── */
#modal-host { position: fixed; inset: 0; z-index: 3000; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; background: rgba(17,24,39,.42); }
#modal-host.open { display: flex; }
.confirm-host { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(17,24,39,.42); }
.confirm-modal { max-width: 440px; }
.confirm-body { color: var(--text2); font-size: 14px; line-height: 1.55; padding-top: 10px; }
.confirm-body p + p { margin-top: 8px; }
.btn.danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger-solid:hover { background: #8f1f1f; border-color: #8f1f1f; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; animation: modalIn .2s cubic-bezier(.22,1,.36,1); }
.modal.wide { max-width: 760px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 0; }
.modal-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.modal-sub { padding: 2px 22px 0; color: var(--text3); font-size: 12.5px; }
.modal-x { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 22px; line-height: 1; padding: 0 4px; }
.modal-x:hover { color: var(--text); }
.modal-body { padding: 18px 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 22px 20px; }
/* A view with nothing to do (a reversed journal) draws no empty bar. */
.modal-actions:empty { display: none; }

/* ── Full-screen form (openPage) ─────────────────────────────────────────────
   The same modalShell() markup as a dialog, laid out as a page. Capped at a
   working width so a two-column form doesn't stretch inputs across a wide
   monitor; the action bar sticks to the bottom so Save is always reachable
   on a long card without scrolling back down. ─────────────────────────── */
.page-form { max-width: 1100px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); animation: pageIn .18s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-form .modal-head { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 14px; padding: 18px 26px 0; }
.page-form .modal-head h3 { font-size: 22px; letter-spacing: -.02em; }
.page-form .page-back { flex-shrink: 0; }
.page-form .modal-sub { padding: 4px 26px 0; font-size: 13px; }
.page-form .modal-body { padding: 22px 26px 26px; }
.page-form .modal-actions {
  position: sticky; bottom: 0; z-index: 60;
  padding: 14px 26px; margin: 0;
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
@media (max-width: 720px) {
  .page-form .modal-head { padding: 14px 16px 0; }
  .page-form .modal-head h3 { font-size: 19px; }
  .page-form .modal-sub { padding: 4px 16px 0; }
  .page-form .modal-body { padding: 16px; }
  .page-form .modal-actions { padding: 12px 16px; flex-wrap: wrap; }
}
/* minmax(0, …) rather than 1fr: an input's intrinsic width (about 20
   characters) is otherwise the column's floor, and two of them side by side
   push a narrow screen sideways. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }

/* Tabbed sections inside a wide modal (e.g. customer Details/Addresses/Contacts) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab-btn { background: none; border: none; cursor: pointer; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab-pane.hidden { display: none; }
.fld { margin-bottom: 2px; }

/* ── Autocomplete ─────────────────────────────────────────────────────────── */
.ac-wrap { position: relative; }
.ac-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; z-index: 20; margin-top: 4px; }
.ac-item { padding: 9px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--line2); }
.ac-item:hover, .ac-item.active { background: var(--accent-soft); }
.ac-item .ac-name { font-weight: 600; }
.ac-item .ac-meta { font-size: 11.5px; color: var(--text3); }

/* ── Chips (assistant plumbers multiselect) ───────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--line); border-radius: 99px; padding: 4px 6px 4px 11px; font-size: 12px; font-weight: 500; }
.chip button { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════
   HOME LAUNCHER — dark brand panel + a card per workspace
   ══════════════════════════════════════════════════════════════════════════ */
#app.home-mode #sidebar, #app.home-mode #sidebar-overlay { display: none; }
#app.home-mode { height: 100%; overflow: hidden; }
#app.home-mode #main-wrap { margin-left: 0; min-height: 0; height: calc(100% - var(--topbar-h)); padding-top: 0; margin-top: var(--topbar-h); overflow: hidden; }
#app.home-mode #content { padding: 0; max-width: none; height: 100%; }
#app.home-mode #topbar-brand, #app.home-mode .home-btn { display: none; }
#app:not(.home-mode) #topbar-powered { display: none; }

.topbar-powered {
  display: flex; align-items: center; gap: 8px; color: var(--text3);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; flex-wrap: nowrap; margin-left: 20px;
}
.topbar-powered img { height: 30px; }
.home-btn { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; }
.home-btn svg { width: 15px; height: 15px; }

.home-shell { display: grid; grid-template-columns: 35% 65%; height: 100%; }
.home-left {
  background: linear-gradient(145deg, #6e1b13 0%, #9e2424 55%, #c62f2f 100%);
  position: relative; overflow: hidden; padding: 44px 36px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
.home-left::before { content: ''; position: absolute; top: -80px; right: -190px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 70%); filter: blur(48px); }
.home-logo { position: relative; align-self: flex-start; background: #fff; border-radius: 24px; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0,0,0,.2); animation: homeFade .5s ease both; }
.home-logo img { display: block; max-width: 88%; max-height: 88%; object-fit: contain; }
.home-welcome { position: relative; animation: homeFade .5s .08s ease both; }
.home-welcome h1 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.home-welcome p { margin-top: 10px; color: rgba(255,255,255,.72); font-size: 15px; }
.home-foot { position: relative; color: rgba(255,255,255,.55); font-size: 12px; animation: homeFade .5s .14s ease both; }
@keyframes homeFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.home-right { padding: 40px; overflow-y: auto; }
.ws-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; max-width: 1100px; }
.ws-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; box-shadow: var(--shadow-sm); animation: swoopIn .45s cubic-bezier(.22,1,.36,1) both;
}
.ws-card-link { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: all .12s; }
.ws-card-link:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }
.ws-card-link .li { width: 15px; height: 15px; }
.ws-ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ws-ic svg { width: 26px; height: 26px; }
.ws-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.ws-card p { font-size: 13.5px; color: var(--text2); margin-top: 6px; line-height: 1.5; }
.ws-card { cursor: pointer; }
.ws-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.ws-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }
.ws-open .li { width: 15px; height: 15px; transition: transform .15s; }
.ws-card:hover .ws-open .li { transform: translateX(3px); }

.ws-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.ws-sub { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: all .12s; }
.ws-sub:hover { background: var(--accent-soft); border-color: var(--accent); }
.ws-sub-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text2); }
.ws-sub-ic svg { width: 15px; height: 15px; }
.ws-sub-text { display: flex; flex-direction: column; min-width: 0; }
.ws-sub-text strong { font-size: 12.5px; font-weight: 700; }
.ws-sub-text small { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes swoopIn { from { opacity: 0; transform: scale(.9) translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .home-shell { grid-template-columns: 1fr; }
  .home-left { padding: 30px 24px; }
  .home-right { padding: 24px; }
  .ws-sub-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE DASHBOARD (crew board)
   ══════════════════════════════════════════════════════════════════════════ */
.crew-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.crew-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; font-size: 13px; }
.crew-card .cc-top { padding: 8px 12px; color: #fff; display: flex; align-items: center; justify-content: space-between; }
.crew-card .cc-top h3 { font-size: 13.5px; font-weight: 700; margin: 0; line-height: 1.2; }
.crew-card .cc-top .cc-lead { font-size: 11px; opacity: .9; }
.crew-card .cc-body { padding: 10px 12px; }
.cc-progress { height: 5px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin: 6px 0 10px; }
.cc-progress > span { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.cc-now { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 9px; background: var(--surface2); margin-bottom: 8px; }
.cc-now .lab { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text3); margin-bottom: 2px; }
.cc-now .job { font-weight: 600; font-size: 12.5px; }
.cc-now .meta { font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.cc-timeleft { font-family: var(--mono); font-weight: 600; color: var(--accent-deep); }
.cc-mini { font-size: 11.5px; color: var(--text2); display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px dashed var(--line2); }

/* ══════════════════════════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════════════════════════ */
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { font-size: 16px; font-weight: 700; min-width: 200px; }
.cal-grid-month { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.cal-dow { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); background: var(--surface2); border-bottom: 1px solid var(--line); }
.cal-cell { min-height: 116px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 6px; cursor: pointer; position: relative; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.out { background: var(--surface2); }
.cal-cell.today .cal-daynum { background: var(--accent); color: #fff; }
.cal-daynum { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 600; padding: 0 5px; }
.cal-chip { display: block; font-size: 11px; font-weight: 600; color: #fff; border-radius: 5px; padding: 2px 6px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cal-more { font-size: 10.5px; color: var(--text3); margin-top: 3px; font-weight: 600; }

/* Week/day time-grid */
.cal-timegrid { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); max-height: 72vh; overflow-y: auto; }
.ctg-head { display: contents; }
.ctg-col-head { padding: 8px; text-align: center; font-size: 12px; font-weight: 700; background: var(--surface2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.ctg-hour { font-size: 11px; color: var(--text3); text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); font-family: var(--mono); }
.ctg-slot { border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); min-height: 46px; padding: 2px; }
.ctg-slot:last-child { border-right: none; }
.ctg-event { font-size: 11px; color: #fff; border-radius: 5px; padding: 3px 6px; margin-bottom: 2px; cursor: pointer; }
.ctg-event .ev-t { font-weight: 700; }
.allday-row { background: var(--accent-soft); }

/* Backlog / unscheduled strip */
.backlog { margin-top: 16px; }
.backlog h4 { font-size: 12.5px; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.backlog-items { display: flex; gap: 8px; flex-wrap: wrap; }
.backlog-chip { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-sm); }
.backlog-chip .bc-no { font-family: var(--mono); font-weight: 600; color: var(--accent-deep); }

/* colour swatch grid (crew/status editors) */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.swatch { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.swatch.sel { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }

.mini-note { font-size: 12px; color: var(--text3); margin-top: 6px; }

/* The statement template, offered as a card of its own beside the file picker:
   what it is, what it holds, and a button — not a link lost in a sentence. A
   whole outline, so it reads as a thing you can take. */
.ps-template {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
  background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ps-template-icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent);
}
.ps-template-icon svg { width: 20px; height: 20px; }
.ps-template-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ps-template-text b { font-size: 13.5px; color: var(--text); }
.ps-template-text span { font-size: 12px; color: var(--text3); }
.ps-template .btn { flex: none; text-decoration: none; }
@media (max-width: 520px) {
  .ps-template { flex-wrap: wrap; }
  .ps-template .btn { width: 100%; justify-content: center; }
}
.inline-status { display: inline-flex; align-items: center; gap: 6px; }
.hr { height: 1px; background: var(--line2); margin: 16px 0; border: none; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .two-col, .form-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   TICK MULTI-SELECT DROPDOWN (crew / case-manager filters)
   ══════════════════════════════════════════════════════════════════════════ */
.tick-dd { position: relative; display: inline-block; }

/* Field-app presence phone beside a plumber's name (AppPresence in app.js). */
.select-dd-suffix { margin-left: auto; display: inline-flex; align-items: center; padding-left: 8px; }
.select-dd-btn .select-dd-suffix + .chevron { margin-left: 8px; }
.app-phone { display: inline-flex; width: 18px; height: 18px; }
.app-phone svg { width: 100%; height: 100%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-phone.online svg { stroke: #1f9d55; }
.app-phone.online svg rect { fill: rgba(31,157,85,.14); }
.app-phone.access svg { stroke: #d4a106; }
.app-phone.access svg rect { fill: rgba(234,179,8,.16); }
.app-phone.none svg { stroke: #d1493f; }
.app-phone.none svg .x { stroke-width: 2.4; }

/* Job status pill as a control, and its menu (JobStatusMenu in app.js). */
.status-pill-btn { border: 0; cursor: pointer; gap: 5px; font-family: inherit; line-height: 1.4; white-space: nowrap; transition: filter .12s, box-shadow .12s; }
.status-pill-btn svg { width: 8px; height: 6px; opacity: .85; }
.status-pill-btn:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.status-pill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-menu { position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; min-width: 170px; animation: ddIn .14s cubic-bezier(.22,1,.36,1); }
.status-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 7px; cursor: pointer; font-family: inherit; }
.status-menu-item:hover { background: var(--surface2); }
.status-menu-tick { color: var(--accent-deep); font-weight: 700; font-size: 12px; }
.ctg-event .ev-status { margin-top: 4px; }
.ctg-event .ev-status .status-pill { font-size: 9.5px; padding: 1px 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.tick-dd-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px dashed var(--line); border-radius: 99px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; transition: all .12s;
}
.tick-dd-btn:hover { border-color: var(--text3); }
.tick-dd-btn.active { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.tick-dd-btn .li { width: 14px; height: 14px; }
.tick-dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); min-width: 230px; max-height: 300px; padding: 6px;
  animation: ddIn .14s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
}
.tick-dd-list {
  overflow-y: auto;
  flex: 1;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tick-dd-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.tick-dd-item:hover { background: var(--surface2); }
.tick-dd-item input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.tick-dd-foot { display: flex; justify-content: space-between; padding: 6px 8px 2px; border-top: 1px solid var(--line2); margin-top: 4px; }
.tick-dd-foot button { background: none; border: none; color: var(--accent-deep); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 3px; }
.tick-dd-foot button:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   JOB TABLE — division/crew grouping
   ══════════════════════════════════════════════════════════════════════════ */
.tbl-div-row td { background: var(--surface2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 9px 12px; border-top: 3px solid var(--line); color: var(--text2); }
.tbl-div-row:first-child td { border-top: none; }
.tbl-row-click { cursor: pointer; }
.tbl-lead { display: inline-flex; align-items: center; gap: 7px; }
.tbl-lead .app-phone { width: 16px; height: 16px; flex-shrink: 0; }
.tbl-row-click:hover td { background: var(--surface2); }
.tbl-crew-row td { font-weight: 700; font-size: 12.5px; padding: 6px 12px; color: var(--text); border-bottom: 1px solid var(--line2); }

/* ══════════════════════════════════════════════════════════════════════════
   LIVE DASHBOARD — divisions, click-through, live indicator, map, TV mode
   ══════════════════════════════════════════════════════════════════════════ */
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: livePulse 1.8s infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(47,158,107,.5); }
  70% { box-shadow: 0 0 0 8px rgba(47,158,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,158,107,0); }
}

.clickable { cursor: pointer; transition: background .12s; }
.clickable:hover { background: var(--accent-soft) !important; }

.div-section { margin-bottom: 20px; }
.div-section-head {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  padding: 7px 0 7px 10px; border-left: 4px solid; margin-bottom: 10px;
}

.map-pop { min-width: 190px; font-size: 12.5px; }
.map-pop .mp-crew { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.map-pop .mp-lead { color: var(--text2); margin-top: 2px; }
.map-pop .mp-job { font-weight: 600; margin-top: 5px; }
.map-pop .mp-addr { color: var(--text3); margin-top: 3px; font-size: 11.5px; }

/* Leaflet popup restyle — rounded card + pop-in animation */
.mapboxgl-popup-content { border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-family: var(--sans); }
.mapboxgl-popup { animation: popIn .16s cubic-bezier(.22,1,.36,1); }
.mapboxgl-ctrl-group { border-radius: 9px !important; box-shadow: var(--shadow-sm) !important; }
.map-pin { display: flex; align-items: center; justify-content: center; color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(17,24,39,.35); cursor: pointer; font-weight: 700; font-size: 12px; }
.map-pin-home { width: 28px; height: 28px; background: var(--ink); }
.map-pin-crew { width: 34px; height: 34px; border-width: 3px; }
.map-pin-crew svg { width: 16px; height: 16px; }
.map-pin-stop { width: 22px; height: 22px; font-size: 11px; }
.map-pin-live { width: 22px; height: 22px; background: #1f9d55; }
.map-pin-live svg { width: 12px; height: 12px; }
@keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(4px); } to { opacity: 1; transform: none; } }

/* Fullscreen "TV mode" — hides chrome, enlarges the board for a wall display */
body.tv-mode,
body.tv-mode #main-wrap,
body.tv-mode #content,
body.tv-mode #dash-root {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
body.tv-mode #topbar, body.tv-mode #sidebar, body.tv-mode #sidebar-overlay { display: none !important; }
body.tv-mode #main-wrap { margin-left: 0; padding-top: 0; }
body.tv-mode #content { padding: 16px 24px; max-width: none; }
body.tv-mode .page-head h1 { font-size: 26px; }
body.tv-mode .stat { padding: 12px 16px; }
body.tv-mode .stat .s-val { font-size: 26px; }
body.tv-mode .stat .s-lbl { font-size: 12px; }
body.tv-mode .crew-card .cc-top h3 { font-size: 16px; }
body.tv-mode .crew-card .job { font-size: 14px; }
body.tv-mode .crew-card .meta { font-size: 12px; }
body.tv-mode .div-section-head { font-size: 15px; }

.dash-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}
.dash-left {
  display: flex;
  flex-direction: column;
}
.dash-left .panel {
  height: 480px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.dash-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dash-right #crew-board-wrap {
  height: 480px;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .dash-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .crew-board {
    grid-template-columns: 1fr;
  }
}

/* Dynamic height fitting to screen */
body.tv-mode #dash-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 32px);
  box-sizing: border-box;
}
body.tv-mode #dash-root > .page-head,
body.tv-mode #dash-root > .stat-grid {
  flex-shrink: 0;
}
body.tv-mode .dash-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  min-height: 0;
  margin-bottom: 0;
  align-items: stretch;
}
body.tv-mode .dash-left,
body.tv-mode .dash-right {
  height: 100%;
  min-height: 0;
}
body.tv-mode .dash-left .panel {
  height: 100%;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}
body.tv-mode #crew-map {
  flex: 1 !important;
  height: auto !important;
}
body.tv-mode .dash-right #crew-board-wrap {
  overflow-y: auto;
  height: 100%;
  padding: 10px;
}

/* ── Custom Single-Select Dropdowns ────────────────────────────────────────── */
.select-dd { position: relative; display: block; width: 100%; }
.select-dd-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 7px;
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .12s;
  color: var(--text); box-sizing: border-box;
}
.select-dd-btn:hover { border-color: var(--text3); }
.select-dd-btn .chevron { color: var(--text3); display: flex; align-items: center; transform: rotate(90deg); margin-left: auto; }
.select-dd-btn .chevron svg { width: 12px; height: 12px; }
.select-dd-btn .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }

.select-dd-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 70;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 220px; overflow-y: auto; padding: 4px;
  animation: ddIn .14s cubic-bezier(.22,1,.36,1); box-sizing: border-box;
}
/* Opened upwards when there is no room below (SelectDD._place). */
.select-dd-panel.up { top: auto; bottom: calc(100% + 4px); }
.select-dd-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px;
  cursor: pointer; font-size: 13.5px; color: var(--text); box-sizing: border-box;
}
.select-dd-item:hover { background: var(--surface2); }
.select-dd-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.select-dd-item .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.select-dd-search-wrap {
  padding: 4px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 4px;
}
.select-dd-search-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface2);
  color: var(--text);
  box-sizing: border-box;
}
.select-dd-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.select-dd-item.hidden {
  display: none !important;
}
/* What a list offers at its foot ("+ New account"), kept in view under a
   rule while the list scrolls. No border: the rule is its own line. */
.select-dd-foot { position: sticky; bottom: -4px; background: var(--surface); padding-bottom: 2px; margin-top: 4px; }
.select-dd-rule { height: 1px; background: var(--line2); margin: 0 4px 4px; }
.select-dd-add {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: 5px;
  background: none; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); cursor: pointer; text-align: left;
}
.select-dd-add:hover, .select-dd-add:focus-visible { background: var(--surface2); }

/* ── Pulsing animations for active dashboard division and pins ───────────── */
@keyframes pulseTile {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--pulse-color, rgba(0,0,0,0.3)); }
  55% { transform: scale(1.015); box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.crew-card.pulse {
  animation: pulseTile 2s infinite ease-in-out;
  border: 2px solid var(--border-color) !important;
}

@keyframes pulsePin {
  0% { box-shadow: 0 0 0 0 var(--pulse-color); transform: scale(1); }
  55% { box-shadow: 0 0 0 16px rgba(0,0,0,0); transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: scale(1); }
}
.pulse-pin {
  animation: pulsePin 1.6s infinite ease-in-out;
}

.quick-add-btn {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s ease;
  line-height: 1.2;
}
.quick-add-btn:hover {
  background: var(--surface2);
  border-color: var(--ink-deep);
  color: var(--ink-deep);
}



/* ══════════════════════════════════════════════════════════════════════════
   JOB PAGE — one job, five tabs (job.js)
   ══════════════════════════════════════════════════════════════════════════ */
.page-form.job-page { max-width: 1180px; }
.job-head { display: flex; flex-direction: column; gap: 14px; margin: -6px 0 18px; }
.job-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.job-pills a.badge { cursor: pointer; }
.job-head-cm { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.job-head-cm-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 700; white-space: nowrap; }
.job-head-cm .select-dd { min-width: 190px; }
.job-head-cm .select-dd-btn { padding-top: 6px; padding-bottom: 6px; font-weight: 600; }
.job-head-cm + .job-share-btn { margin-left: 0; }

/* Details tab: Customer / Crew / Notes as three distinct groups. */
.job-groups { display: flex; flex-direction: column; gap: 16px; }
.job-group { border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--surface); padding: 14px 18px 18px; }
.job-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); font-weight: 700; }
.job-group-title .li { width: 15px; height: 15px; color: var(--accent-deep); }
.job-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--radius-sm); }
.job-kv > div { padding: 10px 14px; min-width: 0; border-left: 1px solid var(--line2); }
.job-kv > div:first-child { border-left: none; }
.job-kv dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 700; margin-bottom: 3px; }
.job-kv dd { font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-kv dd .dot { vertical-align: -1px; margin-right: 2px; }
.muted { color: var(--text3); font-weight: 400; }
.job-tabs { margin-bottom: 20px; }
.job-tabs .tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; }
.tab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--surface2); color: var(--text2); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tab-btn.active .tab-count { background: var(--ink); color: #fff; }
.tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.job-pane { min-height: 320px; }
.job-actions { display: flex; gap: 10px; align-items: center; width: 100%; }
.job-actions .mini-note { margin: 0; }
.job-section { margin-bottom: 26px; }
.job-section:last-child { margin-bottom: 0; }
.job-section > h4, .job-section-head h4 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.job-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.job-section-head .mini-note { margin: 0; }
.job-subhead { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); font-weight: 700; padding-top: 8px; border-top: 1px solid var(--line2); }
.job-empty { padding: 18px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--text3); font-size: 13px; text-align: center; }
.job-empty svg { width: 22px; height: 22px; opacity: .5; display: block; margin: 0 auto 6px; }
.table-wrap.slim { min-height: 0; }
.table-wrap.slim .data-table th { position: static; }
tr.clickable { cursor: pointer; }
.lbl-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lbl-row .lbl { margin-bottom: 0; }
.addr-state { font-size: 12px; margin-top: 6px; min-height: 16px; }
.addr-state .ok { color: var(--green); font-weight: 600; }
.addr-state .warn { color: var(--accent-deep); font-weight: 600; }
.addr-state .li, .site-pin-readout .li { width: 13px; height: 13px; vertical-align: -2px; }
.ac-item .li { width: 13px; height: 13px; color: var(--text3); vertical-align: -2px; margin-right: 4px; }
/* Site pin (job-details.js): locate, place, confirm. */
.site-pin { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.site-pin-map { height: 300px; background: var(--surface2); }
.site-pin-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line2); }
.site-pin-readout { flex: 1; min-width: 200px; font-size: 13px; }
.site-pin-readout .ok { color: var(--green); }
.site-pin-hint { margin: 0; padding: 0 12px 10px; }
.site-pin-manual { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; color: var(--text2); font-size: 13px; }
.site-pin-manual .li { width: 22px; height: 22px; opacity: .6; }
.site-pin-manual-row { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.addr-state svg { width: 13px; height: 13px; }
.quick-add { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--radius-sm); }
.quick-add strong { font-size: 12.5px; white-space: nowrap; }
.quick-add .input { flex: 1; }
.job-new .job-section { padding-bottom: 22px; border-bottom: 1px solid var(--line2); }
.job-new .job-section:last-child { border-bottom: none; padding-bottom: 0; }
.job-new .job-section > h4 { margin-bottom: 12px; }

/* Schedule */
.job-schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.js-fields { margin-top: 10px; }
/* Schedule day/time pickers (job-schedule.js). */
.dtp { position: relative; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dtp-col { display: flex; flex-direction: column; }
.dtp-arrow { color: var(--text3); padding-bottom: 11px; font-size: 15px; }
.dtp-field { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; min-width: 170px; transition: border-color .12s, box-shadow .12s; font-variant-numeric: tabular-nums; }
.dtp-field.dtp-time { min-width: 118px; }
.dtp-field .li { width: 16px; height: 16px; color: var(--text3); flex-shrink: 0; }
.dtp-field:hover:not(:disabled) { border-color: var(--text3); }
.dtp-field:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dtp-field:disabled { background: var(--surface2); cursor: default; }
.dtp-len { font-size: 11.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); padding: 1px 7px; border-radius: 99px; margin-left: 2px; }
.dtp-pop { position: absolute; top: calc(100% + 6px); z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); animation: ddIn .14s cubic-bezier(.22,1,.36,1); }
.dtp-cal { width: 292px; padding: 10px; }
.dtp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dtp-cal-head strong { font-size: 14px; }
.dtp-dow, .dtp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-dow span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; padding: 4px 0; }
.dtp-day { height: 36px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-day:hover { background: var(--surface2); }
.dtp-day.past { color: var(--text2); font-weight: 500; }
.dtp-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dtp-day.active { background: var(--accent); color: #fff; box-shadow: none; }
.dtp-cal-foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
.dtp-cal-foot button, .dtp-quick button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; }
.dtp-cal-foot button:hover, .dtp-quick button:hover { border-color: var(--text3); color: var(--text); }
.dtp-times { width: 190px; max-height: 280px; overflow-y: auto; padding: 5px; }
.dtp-slot { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-slot.hour span { font-weight: 700; }
.dtp-slot em { font-style: normal; font-size: 11.5px; color: var(--text3); }
.dtp-slot:hover { background: var(--surface2); }
.dtp-slot.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.dtp-slot.active em { color: var(--accent-deep); }
.dtp-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dtp-quick button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.js-day { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.js-dayhead { padding: 8px 12px; background: var(--surface2); font-size: 12px; font-weight: 700; color: var(--text2); border-bottom: 1px solid var(--line2); }
.js-slot { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line2); font-size: 13px; cursor: pointer; }
.js-slot:last-child { border-bottom: none; }
.js-slot:hover { background: var(--surface2); }
.js-slot.mine { background: var(--accent-soft); font-weight: 600; cursor: default; }
.js-slot.clash { background: #fbe6e4; }
.js-time { font-family: var(--mono); font-size: 12px; color: var(--text2); min-width: 92px; }
.js-day .mini-note { padding: 10px 12px; margin: 0; }

/* Materials & tools */
.jm-search { margin-top: 12px; }
.jm-banner { display: flex; gap: 10px; align-items: flex-start; background: #f6f7f9; border: 1px solid #e2e4e8; color: var(--text2); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; }
.jm-banner strong { color: var(--text); }
.jm-banner .li { width: 17px; height: 17px; color: var(--accent-deep); flex-shrink: 0; margin-top: 1px; }
.jm-tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-tool-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 13px; }
.jm-tool-chip .li { width: 14px; height: 14px; color: var(--text3); }
.jm-tool-chip .mono { font-size: 11.5px; color: var(--text2); }
.jm-tool-chip .muted { font-size: 12px; }
.jm-tool-chip button { border: 0; background: var(--surface2); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; color: var(--text2); line-height: 1; font-size: 14px; }
.jm-tool-chip button:hover { background: #fbe6e4; color: var(--red); }
.jm-used { background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 14px 16px; }
.jm-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); font-weight: 700; margin: 14px 0 8px; }
.jm-used .job-section-head + .jm-sub { margin-top: 4px; }
.jm-pick-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jm-pick-row .input { width: auto; }
.jm-pick-row .select-dd { min-width: 200px; }
.jm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.jm-check input { accent-color: var(--ink); }
.jm-qty { display: flex; align-items: center; gap: 8px; }
.jm-qty .input { width: 90px; padding: 6px 8px; }
.jm-history { margin-top: 8px; font-size: 12.5px; }
.jm-history summary { cursor: pointer; color: var(--text2); font-weight: 600; }
.jm-hist-row { padding: 5px 0; border-bottom: 1px solid var(--line2); }

/* Field */
/* Field tab (job-field.js): status, the clock, card | photos + safety, timeline. */
.jf-wrap { display: flex; flex-direction: column; gap: 16px; }
.jf-state { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text2); }
.jf-warn { display: flex; align-items: center; gap: 8px; background: #fbe6e4; color: #b23129; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; }
.jf-warn .li { width: 16px; height: 16px; flex-shrink: 0; }
.jf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--surface2); }
.jf-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; min-width: 0; border-left: 1px solid var(--line2); }
.jf-stat:first-child { border-left: none; }
.jf-stat-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 700; }
.jf-stat strong { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.jf-stat-sub { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.jf-stat .input { max-width: 150px; height: 34px; font-size: 15px; font-weight: 600; }
.jf-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(47,158,107,.18); }
.jf-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jf-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.jf-panel { border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--surface); padding: 14px 16px 16px; min-width: 0; }
.jf-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line2); }
.jf-panel-head h4 { font-size: 14px; font-weight: 700; margin: 0; }
.jf-panel-head .mini-note { margin: 0; }
.jf-kv { display: flex; flex-direction: column; }
.jf-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line2); }
.jf-row:first-child { border-top: none; padding-top: 0; }
.jf-lbl { font-size: 12px; font-weight: 600; color: var(--text3); padding-top: 2px; }
.jf-val { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.jf-row .input { width: 100%; }
.jf-stock { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
.jf-stock ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.jf-stock li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.jf-stock .mono { font-size: 12px; }
.jf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.jf-shot { margin: 0; min-width: 0; }
.jf-shot img, .jf-shot video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #111827; display: block; }
.jf-shot a:hover img { filter: brightness(1.05); box-shadow: 0 0 0 2px var(--accent); }
.jf-shot figcaption { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
.jf-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.jf-cap { font-size: 12px; color: var(--text3); line-height: 1.3; }
.jf-sig-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
.jf-sig { height: 84px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; display: block; }
.jf-check { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; padding: 3px 0; line-height: 1.4; }
.jf-check .li { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.jf-check.ok .li { color: var(--green); }
.jf-check.flag .li { color: var(--accent-deep); }
.jf-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.jf-ev { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--line2); font-size: 13px; }
.jf-ev:last-child { padding-bottom: 0; border-left-color: transparent; }
.jf-ev::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.jf-ev.ok::before { border-color: var(--green); background: var(--green); }
.jf-ev.warn::before { border-color: var(--accent); }
.jf-ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jf-ev-head strong { font-weight: 600; }
.jf-ev-time { margin-left: auto; font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jf-ev-body { margin-top: 3px; color: var(--text2); line-height: 1.45; }
.jf-ev-loc { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; color: var(--text3); text-decoration: none; }
.jf-ev-loc:hover { color: var(--accent-deep); text-decoration: underline; }
.jf-ev-loc .li { width: 12px; height: 12px; }
.jf-ev audio { margin-top: 6px; width: 100%; max-width: 320px; }

/* Money */
.jy-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.jy-totals > div { padding: 14px 16px; background: var(--surface2); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 3px; }
.jy-totals strong { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.jy-totals .owing strong { color: var(--accent-deep); }
.jy-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.jy-link { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jy-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.jy-link strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jy-link .muted { font-size: 12px; }

/* Selection, caret and focus carry the brand too. */
.page-form ::selection { background: var(--accent-soft); color: var(--text); }
.page-form .input { caret-color: var(--accent); }
.page-form .input:focus-visible, .page-form .btn:focus-visible, .page-form .tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.data-table td.mono { font-family: var(--mono); font-size: 12.5px; }
.data-table td { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .job-kv { grid-template-columns: 1fr 1fr; }
  .job-kv > div { border-left: none; border-top: 1px solid var(--line2); }
  .job-kv > div:nth-child(-n+2) { border-top: none; }
  .job-schedule, .jf-cols, .jy-totals { grid-template-columns: 1fr; }
  .jf-stats { grid-template-columns: 1fr 1fr; }
  .jf-stat:nth-child(3) { border-left: none; }
  .jf-stat:nth-child(n+3) { border-top: 1px solid var(--line2); }
  .jf-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Customer link */
.job-share-btn { margin-left: auto; }
.job-share { display: flex; flex-direction: column; gap: 12px; }
.job-share .input { font-family: var(--mono); font-size: 12.5px; }
.job-share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.job-share-row a.btn { display: inline-flex; align-items: center; gap: 6px; }
.job-share-block { display: flex; flex-direction: column; gap: 8px; }
.job-share-block + .job-share-block { padding-top: 12px; border-top: 1px solid var(--line2); }
.job-share .job-share-msg { font-family: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical; white-space: pre-wrap; }

/* Trip sheets */
.ts-sheet { display: flex; flex-direction: column; gap: 16px; }
.ts-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ts-facts > div { padding: 12px 14px; min-width: 0; border-left: 1px solid var(--line2); }
.ts-facts > div:first-child { border-left: none; }
.ts-facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 700; margin-bottom: 3px; }
.ts-facts dd { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ts-totals > div { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ts-totals span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 700; }
.ts-totals span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.ts-totals strong { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ts-totals .ot strong { color: var(--accent-deep); }
.ts-table td { vertical-align: top; }
.ts-prod { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-prod .lbl { margin: 0 6px 0 0; }
@media (max-width: 1100px) { .ts-facts { grid-template-columns: repeat(3, 1fr); } .ts-facts > div:nth-child(4) { border-left: none; } }

/* Customer form — contacts edited in place (customers.js CustomerForm). */
.cu-contacts { display: flex; flex-direction: column; gap: 8px; }
.cu-contact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--surface); }
.cu-contact.primary { border-color: #e2e4e8; background: #fafafa; }
.cu-contact.editing { display: block; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cu-contact-main { flex: 1; min-width: 0; }
.cu-contact-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cu-contact-meta { font-size: 13px; color: var(--text2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-contact-flags { display: flex; gap: 5px; margin-top: 6px; }
.cu-contact-flags:empty { display: none; }
.cu-contact-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cu-contact-checks { display: flex; gap: 18px; flex-wrap: wrap; }
.cu-contact-checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.cu-contact-checks input { accent-color: var(--accent); width: 15px; height: 15px; }
.cu-contact-formactions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

/* ── Invoice & quote documents (doc-editor.js) ────────────────────────────
   The on-screen invoice is drawn the way the PDF prints it
   (server/pdf/document-pdf.js): navy band, accreditations, / INVOICE,
   Bill to · From, the job strip, a navy-headed items table, notes and EFT
   beside a tinted totals box, navy footer. Set in Avenir where the device has
   it, else Nunito Sans (the PDF's typeface). */
.doc-ed { display: flex; flex-direction: column; gap: 14px; --doc-font: 'Inter', system-ui, sans-serif; --deep: #1f2933; --tint: #f4f5f7; --lab: #6b7280; }
.doc-statusbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
.doc-statusbar-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); }
.doc-statusbar .status-pill { font-size: 12px; padding: 4px 11px; }
.doc-statusbar .muted { font-size: 12px; }
.doc-banner { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-deep); font-size: 13px; font-weight: 500; }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0; text-transform: none; }
.link-btn:hover { text-decoration: underline; }

.doc-paper { font-family: var(--doc-font); color: #1f2933; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 14px 40px rgba(31,41,55,.09); max-width: 980px; width: 100%; margin: 0 auto; font-variant-numeric: tabular-nums; }
.doc-paper input, .doc-paper textarea, .doc-paper button, .doc-paper .select-dd, .doc-paper .select-dd-panel { font-family: var(--doc-font); }
.dp-muted { color: #9ca3af; font-weight: 400; }
/* The paper is often narrower than the window (the sidebar, a split pane), so
   the header also answers to the paper's own width: below ~820px the trade
   line gives way and the emergency line keeps its words whole. */
.doc-paper { container-type: inline-size; }
@container (max-width: 820px) {
  .dp-band { gap: 18px; padding: 18px 24px; }
  .dp-trade { display: none; }
  .dp-emerg { margin-left: auto; margin-right: 34px; padding-left: 18px; }
  .dp-emerg b { letter-spacing: .16em; white-space: nowrap; }
  .dp-title-row, .dp-parties { padding-left: 24px; padding-right: 24px; }
  .dp-certs { padding-left: 24px; padding-right: 24px; }
}
/* Band */
.dp-band { position: relative; display: flex; align-items: center; gap: 30px; background: var(--deep); padding: 22px 40px; min-height: 112px; overflow: hidden; }
.dp-band::after { content: ''; position: absolute; right: 0; bottom: 0; width: 70px; height: 70px; background: linear-gradient(135deg, transparent 0 58%, var(--accent) 58% 72%, transparent 72%); }
.dp-logo { height: 66px; width: auto; display: block; }
.dp-trade { flex: 1; color: #c7cad1; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; }
.dp-trade i { font-style: normal; margin: 0 .6em; opacity: .7; }
.dp-emerg { display: flex; flex-direction: column; gap: 5px; border-left: 1px solid #4b5563; padding-left: 24px; margin-right: 30px; }
.dp-emerg b { color: #fff; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; }
.dp-emerg span { color: #c7cad1; font-size: 12.5px; white-space: pre; }
.dp-emerg em { display: block; width: 40px; height: 2px; background: var(--accent); margin-top: 6px; }
/* Accreditations */
.dp-certs { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 40px; border-bottom: 1px solid #e2e4e8; }
.dp-certs img { width: auto; display: block; height: 34px; }
.dp-certs .c-best-of-durban { height: 22px; }
.dp-certs .c-nhbrc, .dp-certs .c-mbsa { height: 38px; }
.dp-certs .c-emergency-24-7 { height: 42px; }
/* Title + details */
.dp-title-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; padding: 30px 40px 8px; }
/* The title wraps rather than running under the details: PROFORMA INVOICE
   takes two lines, and the slash hangs so the second line aligns with the first.
   The size follows the title column so one long word still fits a narrow paper. */
.dp-title-row > div:first-child { min-width: 0; container-type: inline-size; }
.dp-title { position: relative; margin: 6px 0 0; padding-left: .72em; font-size: min(44px, 13cqi); line-height: 1.08; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--deep); text-wrap: balance; }
.dp-title span { position: absolute; left: 0; top: 0; color: var(--accent); letter-spacing: 0; }
.dp-title-note { display: inline-block; margin: 12px 0 0 calc(min(44px, 13cqi) * .72); padding: 4px 11px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dp-meta { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; row-gap: 7px; margin: 0; }
.dp-meta dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--lab); font-weight: 700; }
.dp-meta dd { margin: 0; font-size: 15px; color: #1f2933; }
.dp-meta dd strong { font-weight: 800; }
.editing .dp-meta { row-gap: 5px; }
.editing .dp-meta .datepick-btn { height: 34px; font-size: 13.5px; font-family: var(--doc-font); }
.editing .dp-meta .select-dd-btn { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
/* Parties */
.dp-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 250px); gap: 30px; padding: 22px 40px 18px; }
.dp-h { position: relative; margin: 0 0 12px; padding-top: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--deep); }
.dp-h::before { content: ''; position: absolute; left: 0; top: 0; width: 38px; height: 2px; background: var(--accent); }
.dp-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.dp-addr { font-size: 13px; line-height: 1.6; color: #4a5568; overflow-wrap: anywhere; }
.dp-kv { margin-top: 12px; font-size: 13px; color: #1f2933; line-height: 1.5; }
.dp-kv span { display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--lab); font-weight: 700; }
.dp-gap { margin: 6px 0 8px; }
.dp-contacts { list-style: none; margin: 0; padding: 4px 0 0 24px; border-left: 1px solid #e2e4e8; display: flex; flex-direction: column; gap: 16px; }
.dp-contacts li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #1f2933; overflow-wrap: anywhere; }
.dp-contacts svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
/* Job strip */
.dp-strip { display: grid; grid-template-columns: 2.2fr 1fr 1.2fr 1.3fr 1.2fr; gap: 16px; background: var(--tint); margin: 0 40px; padding: 14px 20px; align-items: start; }
.dp-strip > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dp-strip span { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--lab); font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.dp-strip b { font-size: 13.5px; font-weight: 700; color: #1f2933; align-self: flex-start; max-width: 100%; }
.dp-strip .gp-pill { background: #fff; border-color: var(--accent); color: var(--accent-deep); font-family: var(--doc-font); font-weight: 700; }
.dp-input { width: 100%; border: 1px solid #d9dce1; background: #fff; border-radius: 6px; padding: 7px 10px; font-size: 13.5px; color: #1f2933; }
.dp-input:focus { outline: none; border-color: var(--accent); }
.dp-strip .select-dd-btn { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.dp-strip .doc-job-sub { display: none; }
/* Items */
.dp-table-wrap { margin: 22px 40px 0; overflow-x: auto; }
.dp-lines { min-width: 680px; font-size: 13.5px; }
.dp-lines col.c-no { width: 54px; }
.dp-lines col.c-qty { width: 96px; }
.dp-lines col.c-rate { width: 130px; }
.dp-lines col.c-amt { width: 140px; }
.dp-lines col.c-x { width: 46px; }
.dp-lines thead tr { background: var(--deep); }
.dp-lines th { background: var(--deep); box-shadow: -1px 0 0 var(--deep), 1px 0 0 var(--deep); color: #fff; font-size: 10.5px; letter-spacing: .22em; font-weight: 700; padding: 15px 12px; border: 0; }
.dp-lines th:first-child { padding-left: 20px; }
.dp-lines td { padding: 14px 12px; border-bottom: 1px solid #e5e7eb; }
.dp-lines td.c-no { color: #4a5568; padding-left: 20px; padding-top: 16px; font-size: 13px; }
.dp-lines td.c-amt { font-weight: 800; color: #1f2933; padding-top: 16px; }
.dp-lines td.num { color: #4a5568; }
.dp-lines.view td.num { padding-top: 16px; }
.dp-lines.view td.c-no, .dp-lines.view td.c-amt { padding-top: 16px; }
.dp-lines .dl-title { font-size: 14px; font-weight: 600; color: #1f2933; }
.dp-lines .dl-text { font-size: 12.5px; color: #4a5568; margin-top: 3px; line-height: 1.5; }
.dp-lines tbody tr:hover { background: #fafafa; }
.dp-lines .dl-item { font-size: 14px; font-weight: 600; }
.dp-lines .dl-desc { font-size: 12.5px; }
.dp-add { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; font-size: 12px; color: var(--lab); }
/* Notes · EFT · totals */
.dp-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 36px; padding: 28px 40px 30px; align-items: start; }
.dp-notes { font-size: 13px; color: #4a5568; line-height: 1.6; white-space: pre-wrap; }
.dp-notes-in { resize: vertical; min-height: 70px; line-height: 1.5; }
.dp-eft { margin-top: 24px; }
.dp-eft p { margin: 0 0 12px; font-size: 12.5px; color: #4a5568; }
.dp-bank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.dp-bank div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-bank .wide { grid-column: 1 / -1; }
.dp-bank span { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--lab); font-weight: 700; }
.dp-bank b { font-size: 13.5px; font-weight: 800; color: #1f2933; overflow-wrap: anywhere; }
.dp-bank b.free { font-weight: 500; white-space: pre-wrap; }
.dp-bank .ref span, .dp-bank .ref b { color: var(--accent-deep); }
.dp-bank .ref b { font-size: 15px; }
.dp-extra { margin-top: 18px; }
.dp-totals { background: var(--tint); padding: 22px 26px 18px; }
.dp-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.dp-trow span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--lab); font-weight: 700; }
.dp-trow b { font-size: 14px; font-weight: 500; color: #1f2933; white-space: nowrap; }
.dp-trow.neg b, .dp-trow b.neg { color: var(--red); }
.dp-trow.due span, .dp-trow.due b { color: var(--accent-deep); font-weight: 800; }
.dp-discount { flex-wrap: nowrap; }
.dp-discount .dl-num.boxed { width: 64px; }
.dp-discount .doc-discount-in { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dp-discount b { min-width: 78px; text-align: right; }
.dp-total { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px -26px 4px; padding: 16px 26px; border-top: 1px solid #c4cee0; }
.dp-total::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--accent); }
.dp-total span { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--deep); font-weight: 800; }
.dp-total b { font-size: 26px; font-weight: 800; color: var(--deep); letter-spacing: -.01em; white-space: nowrap; }
.dp-tnote { font-size: 11px; color: var(--lab); line-height: 1.45; margin-top: 4px; }
/* Terms and conditions */
.dp-terms { padding: 4px 40px 30px; }
.dp-terms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.dp-terms-head .dp-h { margin: 0; }
.dp-terms-actions { display: flex; gap: 8px; align-items: center; }
.dp-terms-add { min-width: 300px; }
.dp-terms-empty { font-size: 13px; color: var(--lab); padding: 14px 16px; border: 1px dashed #d9dce1; border-radius: 6px; }
.dp-term { border-top: 1px solid #e5e7eb; }
.dp-term:last-child { border-bottom: 1px solid #e5e7eb; }
.dp-term-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-term-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 11px 0; cursor: pointer; text-align: left; color: #1f2933; }
.dp-term-toggle svg { width: 10px; height: 7px; color: var(--lab); transform: rotate(-90deg); transition: transform .15s; flex-shrink: 0; }
.dp-term.open .dp-term-toggle svg { transform: none; }
.dp-term-toggle b { font-size: 14px; font-weight: 700; }
.dp-term-tag { font-size: 10.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); border-radius: 99px; padding: 1px 8px; }
.dp-term-head .icon-btn { width: 28px; height: 28px; font-size: 13px; }
.dp-term-head .icon-btn:disabled { opacity: .35; cursor: default; }
.dp-term-body { display: none; padding: 0 0 14px 20px; }
.dp-term.open .dp-term-body { display: block; }
.dp-term-name { font-size: 14px; font-weight: 700; color: var(--deep); padding: 12px 0 6px; }
.doc-paper:not(.editing) .dp-term-body { padding-left: 0; }
.terms-body { font-size: 12.5px; line-height: 1.55; color: #4a5568; }
.terms-body .tl { margin: 1px 0; }
.terms-body .tl-gap { height: 8px; }
.terms-body .tl-h { font-weight: 700; color: #1f2933; margin-top: 4px; }
.terms-body .tl-in { padding-left: 26px; }
.terms-body .tl-li { display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.terms-body .tl-li b { font-weight: 700; color: #1f2933; }
.terms-body .tl-sub { padding-left: 22px; grid-template-columns: 30px minmax(0, 1fr); }
.terms-body .tl-lead span { font-weight: 700; color: #1f2933; }

/* Footer */
.dp-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--deep); padding: 22px 40px 22px 56px; overflow: hidden; }
.dp-foot::before { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 56px; background: linear-gradient(45deg, transparent 0 30%, var(--accent) 30% 46%, transparent 46%); }
.dp-foot > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dp-foot b { color: #fff; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 800; }
.dp-foot span { color: #c7cad1; font-size: 12px; }
.dp-foot span i { font-style: normal; margin: 0 .8em; opacity: .6; }
.dp-foot-r { border-left: 1px solid #4b5563; padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.dp-foot-r em { display: block; width: 40px; height: 2px; background: var(--accent); }

/* Items table cells (editor inputs, shared with the view) */
.doc-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.doc-lines th.num, .doc-lines td.num { text-align: right; }
.doc-lines th { text-align: left; text-transform: uppercase; }
.doc-lines td { vertical-align: top; }
.doc-lines td.c-x { padding-top: 10px; text-align: right; }
.doc-lines td.c-x .icon-btn { width: 26px; height: 26px; }
.doc-lines td.c-x .icon-btn:disabled { opacity: .35; cursor: default; }
/* Cells: borderless until hovered or focused, so the table reads as a table. */
.doc-lines .dl-item, .doc-lines .dl-desc, .doc-lines .dl-num {
  display: block; width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px;
  color: #1f2933; padding: 5px 7px; margin: -6px -8px 0; width: calc(100% + 16px); transition: border-color .12s, background .12s;
}
.doc-lines .dl-desc { resize: none; overflow: hidden; min-height: 28px; line-height: 1.45; color: #4a5568; margin-top: 1px; }
.doc-lines .dl-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; }
/* The line's VAT code, quiet under the rate: most lines stay standard rated. */
.doc-lines .dl-tax { display: block; margin: 4px -4px 0 auto; max-width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; color: #6b7280; font: inherit; font-size: 11.5px; text-align: right; text-align-last: right; padding: 2px 4px; cursor: pointer; }
.doc-lines .dl-tax:hover, .doc-lines .dl-tax:focus { border-color: var(--line); background: #fff; color: #1f2933; }
.doc-lines .dl-item:hover, .doc-lines .dl-desc:hover, .doc-lines .dl-num:hover { border-color: var(--line); background: #fff; }
.doc-lines .dl-item:focus, .doc-lines .dl-desc:focus, .doc-lines .dl-num:focus { outline: none; border-color: var(--accent); background: #fff; }
.doc-lines .dl-item::placeholder, .doc-lines .dl-desc::placeholder { color: #c0c4cc; font-weight: 400; }
.doc-lines .dl-qty { display: flex; align-items: center; gap: 2px; }
.doc-lines .dl-unit { font-size: 11px; color: var(--text3); flex-shrink: 0; margin-top: -6px; }
.doc-lines .dl-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-lines .dl-vatnote { font-size: 10.5px; font-weight: 500; color: var(--text3); }

@media (max-width: 900px) {
  .dp-band { padding: 18px 20px; gap: 16px; }
  .dp-trade { display: none; }
  .dp-emerg { margin-right: 20px; }
  .dp-certs { padding: 10px 20px; flex-wrap: wrap; justify-content: center; }
  .dp-title-row, .dp-bottom { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .dp-title { font-size: 30px; }
  .dp-title-note { margin-left: calc(30px * .72); }
  .dp-parties { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .dp-contacts { border-left: 0; padding-left: 0; }
  .dp-strip { grid-template-columns: 1fr 1fr; margin: 0 20px; }
  .dp-strip .wide { grid-column: 1 / -1; }
  .dp-table-wrap { margin: 18px 20px 0; }
  .dp-foot { flex-direction: column; align-items: flex-start; padding: 18px 20px 18px 40px; }
}

/* Status menu, job pills, discount controls */
.status-menu.doc-status-menu { min-width: 260px; }
.doc-status-menu .status-menu-item { justify-content: flex-start; }
.doc-status-menu .status-menu-note { flex: 1; text-align: left; font-size: 11.5px; color: var(--text3); }
.doc-status-menu .status-menu-tick { width: 12px; text-align: right; }
.doc-status-menu .status-menu-item.inert { cursor: default; opacity: .55; }
.doc-status-menu .status-menu-item.inert:hover { background: none; }
.gp-pill, .sdd-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; line-height: 1.5; }
.select-dd-label.sdd-pill { flex: 0 0 auto; }
.doc-job-sub { color: var(--text3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.select-dd-btn .doc-job-sub { max-width: 260px; }
.doc-job-dd .select-dd-btn .select-dd-suffix { margin-left: 0; flex: 1; min-width: 0; padding-left: 10px; }
.doc-job-dd .select-dd-btn .select-dd-suffix + .chevron { margin-left: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: #fff; }
.dl-num.boxed { width: 76px; border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 13px; text-align: right; background: var(--surface); color: var(--text); }
.dl-num.boxed:focus { outline: none; border-color: var(--accent); }
/* DatePick in forms: a full-width field */
.datepick { position: relative; }
.datepick .datepick-btn { width: 100%; min-width: 0; height: 38px; font-size: 13.5px; }
.datepick .datepick-btn .muted { font-weight: 500; }
.datepick .dtp-pop { left: 0; }
.datepick .dtp-pop.up { top: auto; bottom: calc(100% + 6px); }
.datepick .dp-clear { margin-left: auto; color: var(--red) !important; }

/* Case manager's files & comments (job-office-files.js) */
.jo-panel { position: relative; margin-top: 16px; }
.jo-panel.dragging { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.jo-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.jo-files { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jo-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface2); cursor: pointer; color: var(--text2); transition: border-color .12s, background .12s; }
.jo-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.jo-drop input { display: none; }
.jo-drop .li { width: 22px; height: 22px; color: var(--accent-deep); }
.jo-drop span { font-size: 13.5px; }
.jo-drop u { color: var(--ink); text-underline-offset: 2px; font-weight: 600; }
.jo-drop em { flex-basis: 100%; font-style: normal; font-size: 11.5px; color: var(--text3); padding-left: 34px; }
.jo-uploads:empty { display: none; }
.jo-uploads { display: flex; flex-direction: column; gap: 8px; }
.jo-up { border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface); }
.jo-up.failed { border-color: #f0c9c5; background: #fdf3f2; }
.jo-up-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.jo-up-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jo-up-pct { color: var(--text3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.jo-up-track { height: 5px; border-radius: 99px; background: var(--line2); overflow: hidden; margin-top: 6px; }
.jo-up-bar { height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.jo-up-err { font-size: 12px; color: var(--red); margin-top: 4px; }
.jo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.jo-tile { margin: 0; border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.jo-media { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; border: 0; padding: 0; background: var(--surface2); cursor: zoom-in; overflow: hidden; }
.jo-media img, .jo-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jo-media video { background: #000; }
.jo-doc .li { width: 40px; height: 40px; color: var(--text3); }
.jo-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.jo-badge { position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 99px; background: rgba(31,41,55,.82); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.jo-tile figcaption { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jo-cap { display: flex; align-items: flex-start; gap: 6px; min-height: 20px; }
.jo-cap-text { font-size: 13px; font-weight: 600; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.jo-cap-empty { font-size: 12.5px; color: var(--text3); flex: 1; }
.jo-cap-edit { border: 0; background: none; padding: 2px; color: var(--text3); cursor: pointer; flex-shrink: 0; }
.jo-cap-edit:hover { color: var(--ink); }
.jo-cap-edit .li { width: 14px; height: 14px; }
.jo-cap { flex-wrap: wrap; }
.jo-cap-input { font-size: 13px; padding: 6px 8px; min-height: 56px; }
.jo-cap-row { display: flex; justify-content: flex-end; gap: 6px; width: 100%; margin-top: 4px; }
.jo-meta { font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jo-actions { display: flex; gap: 12px; margin-top: 3px; }
.link-btn.danger { color: var(--red); }
.jo-empty { font-size: 13px; color: var(--text3); padding: 12px 2px; }
.jo-comments { min-width: 0; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line2); padding-left: 18px; }
.jo-thread { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.jo-comment { display: flex; gap: 10px; }
.jo-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jo-comment-body { min-width: 0; flex: 1; }
.jo-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.jo-comment-head span { color: var(--text3); font-size: 11.5px; }
.jo-comment-head .link-btn { margin-left: auto; font-size: 11px; }
.jo-comment-text { font-size: 13px; color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; margin-top: 2px; background: var(--surface2); border-radius: 0 10px 10px 10px; padding: 8px 10px; }
.jo-compose textarea { min-height: 72px; font-size: 13.5px; }
.jo-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.jo-compose-row .mini-note { margin: 0; }
@media (max-width: 900px) { .jo-grid { grid-template-columns: 1fr; } .jo-comments { border-left: 0; padding-left: 0; border-top: 1px solid var(--line2); padding-top: 14px; } }

/* Terms & Conditions library */
.terms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.terms-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.terms-card header { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; border-top: 3px solid var(--accent); }
.terms-card h3 { font-family: 'Avenir', 'Avenir Next', 'Nunito Sans', var(--sans); font-size: 16px; font-weight: 700; color: #1f2933; margin-bottom: 6px; }
.terms-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.terms-card .terms-body { padding: 0 18px; font-family: 'Avenir', 'Avenir Next', 'Nunito Sans', var(--sans); flex: 1; }
.terms-card .terms-body.clamp { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.terms-card footer { padding: 10px 18px 14px; font-size: 11.5px; color: var(--text3); }
.terms-textarea { min-height: 260px; font-family: 'Avenir', 'Avenir Next', 'Nunito Sans', var(--sans); font-size: 13px; line-height: 1.55; }
.check-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); cursor: pointer; padding-top: 9px; }
.check-row input { accent-color: var(--accent); width: 15px; height: 15px; }
@media (max-width: 900px) { .dp-terms { padding: 4px 20px 24px; } .dp-terms-add { min-width: 0; flex: 1; } .terms-grid { grid-template-columns: 1fr; } }

/* Company settings */
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; }
.cs-grid .full { grid-column: 1 / -1; }
.cs-card { padding: 20px; max-height: none; }
.cs-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.cs-certs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; padding: 6px 4px; }
.cs-certs img { height: 42px; width: auto; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }

/* ── Admin · Install the App (app-install.js) ───────────────────────────── */
.ai-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1080px; }
.ai-qr-card { padding: 28px 28px 22px; text-align: center; }
.ai-qr { background: #fff; padding: 14px; border-radius: 12px; border: 1px solid var(--line); width: 100%; max-width: 320px; margin: 0 auto; }
.ai-qr svg { display: block; width: 100%; height: auto; }
.ai-qr-caption { margin-top: 14px; font-weight: 600; color: var(--text); }
.ai-expiry { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text3); }
.ai-expiry .li { width: 14px; height: 14px; }
.ai-side { display: grid; gap: 14px; min-width: 0; }
.ai-app { display: flex; align-items: center; gap: 14px; }
.ai-app img { border-radius: 24%; box-shadow: 0 0 0 1px var(--line), 0 4px 10px rgba(47,68,224,.12); flex: none; }
.ai-app-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ai-app-meta { color: var(--text2); font-size: 13px; }
.ai-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ai-row .input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: 12px; }
.ai-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ai-h { font-weight: 700; margin-bottom: 8px; }
.ai-steps { margin: 0 0 12px 18px; color: var(--text2); display: grid; gap: 4px; }
.ai-steps strong { color: var(--text); }
.ai-note { display: flex; gap: 8px; font-size: 13px; color: var(--text2); background: var(--surface2); border-radius: 10px; padding: 10px 12px; }
.ai-note .li { width: 16px; height: 16px; flex: none; margin-top: 2px; }
@media (max-width: 860px) { .ai-grid { grid-template-columns: 1fr; } }

/* ── Card header rows: a tinted band ───────────────────────────────────────
   A header that was only text over a hairline read as part of the card's
   body. Each header now sits on its own tinted band, edge to edge across the
   top of its card (negative margins match the card's own padding). No
   overflow:hidden on the cards: dropdowns and date pickers open inside them. */
.job-group-title { margin: -14px -18px 14px; padding: 11px 18px; background: var(--head-tint); border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.jf-panel-head { margin: -14px -16px 14px; padding: 11px 16px; align-items: center; background: var(--head-tint); border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.terms-card header { background: var(--head-tint); border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.panel > .ai-h:first-child { margin: -18px -18px 12px; padding: 11px 18px; background: var(--head-tint); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }

/* ── Access card (access-card.js) ───────────────────────────────────────── */
.ac-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.ac-head { background: #1f2933; color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.ac-head img { height: 34px; width: auto; }
.ac-head span { width: 1px; height: 26px; background: rgba(255,255,255,.35); }
.ac-head h3 { font-size: 15.5px; font-weight: 700; margin: 0; color: #fff; }
.ac-body { padding: 6px 20px 16px; }
.ac-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.ac-row .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); font-weight: 700; white-space: nowrap; }
.ac-row .v { font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ac-row .v.big { font-family: var(--mono); font-size: 19px; letter-spacing: .05em; color: #1f2933; background: var(--accent-soft); padding: 3px 12px; border-radius: 8px; }
.ac-note { margin-top: 14px; font-size: 12px; color: var(--text2); line-height: 1.5; border-left: 3px solid var(--accent); padding-left: 10px; }
button.gp-pill-link { cursor: pointer; }
button.gp-pill-link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.crm-results { margin-top: 12px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; }
.crm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line2); }
.crm-row:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PaySight additions
   ══════════════════════════════════════════════════════════════════════════ */
html { font-size: 14px; }
.home-logo { width: auto; height: auto; padding: 18px 24px; max-width: 300px; }
.home-logo img { width: 240px; max-width: 100%; max-height: none; }
.a-logo img { height: 64px; }
#topbar .brand img { height: 34px; }
.toast.info { background: #374151; }
.badge.amber { background: #fdf2dc; color: var(--amber); }
.badge.blue { background: #e7efff; color: #1d4ed8; }
.row-muted td { color: var(--text3); }
.banner { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 500; }
.banner.warn { background: #fdf2dc; color: #8a4b06; border: 1px solid #f5d9a3; }
.banner.info { background: var(--surface2); color: var(--text2); border: 1px solid var(--line); }
.banner.danger { background: #fbe6e4; color: #8f1f1f; border: 1px solid #f3c1c1; }
.switch-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.switch-row input { width: 16px; height: 16px; accent-color: var(--ink); }
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; background: var(--surface); }
.role-opt:has(input:checked) { border-color: var(--ink); background: var(--accent-soft); }
.role-opt input { margin-top: 3px; accent-color: var(--ink); }
.role-opt strong { display: block; font-size: 13.5px; }
.role-opt small { display: block; color: var(--text2); font-size: 12px; margin-top: 2px; line-height: 1.4; }
@media (max-width: 640px) { .role-pick { grid-template-columns: 1fr; } }

/* A page header bar, written by the screens through App.setPageHeader(). */
.ss-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 22px 26px 0; max-width: 1500px; }
.ss-head:not([hidden]) + #content { padding-top: 16px; }
@media (max-width: 900px) { .ss-head { padding: 16px 14px 0; } }
.ss-head[hidden] { display: none; }
.ss-head-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; color: var(--text); }
.ss-head-title svg { width: 20px; height: 20px; color: var(--ink); }
.ss-head-sub { color: var(--text2); font-size: 13px; margin-top: 3px; }
.ss-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   PaySight
   ══════════════════════════════════════════════════════════════════════════ */
.page-form { max-width: 1240px; }
.num, th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.bad { color: var(--red); font-weight: 600; }
td.strong, th.strong { font-weight: 700; }
b.amber, .amber { color: var(--amber); }
.row-overdue td { background: #fff8f7; }
.link-btn { font-size: 12px; margin-top: 3px; }
.link-btn.strong { font-size: 13px; }
.spin-sm { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A field told to span three columns (inline, on the journal's memo) would
   otherwise invent a third column in a two-column grid, and a field spanning
   two would invent a second in a one-column grid. */
@media (max-width: 1100px) {
  .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.cols-4 > [style*="span 3"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
  .form-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid > * { grid-column: 1 / -1 !important; }
}

/* Lists */
.ps-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ps-toolbar .seg { flex-wrap: wrap; }
.ps-toolbar .seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--line2); color: var(--text3); font-size: 10.5px; }
.ps-search { position: relative; min-width: 260px; }
.ps-search .li { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text3); }
.ps-search .input { padding-left: 34px; }
.ps-table { min-height: 0; }

/* Cards and editors */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ps-card { padding: 16px 18px; margin-bottom: 14px; }
/* A section waiting to be filled (the cash book's transaction-kind box when
   there is no choice to make) is not drawn as an empty card. */
.ps-card:empty { display: none; }
.page-form .ps-card { box-shadow: none; }
.ps-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ps-card-head h4 { font-size: 14px; font-weight: 700; }
.ps-card .lbl { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.ps-editor { display: flex; flex-direction: column; }
.ps-editor-bottom, .ps-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.ps-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .ps-editor-bottom, .ps-two { grid-template-columns: 1fr; } }
.ps-static { padding: 9px 0; font-weight: 600; }
.ps-checks { display: flex; gap: 22px; flex-wrap: wrap; }
.ps-attach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-warn { margin-top: 10px; color: var(--red); font-size: 12.5px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.num-input { text-align: right; font-variant-numeric: tabular-nums; }
.num-input.big { font-size: 18px; font-weight: 700; }
.input.invalid { border-color: var(--red); background: #fff6f5; }

.ps-lines-wrap { overflow: visible; }
.ps-lines td { vertical-align: top; padding: 8px 6px; }
.ps-lines th { padding: 9px 6px; }
.ps-lines .input { padding: 7px 9px; font-size: 13.5px; }
.ps-line-amt { padding-top: 16px !important; font-weight: 700; }
.ps-line-act { white-space: nowrap; padding-top: 10px !important; }
.ps-line-act .icon-btn { width: 28px; height: 28px; }
.ps-line-details { margin-top: 6px; }
.ps-line-details textarea { min-height: 52px; }
.ps-lines-foot { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ps-itempick { position: relative; }
.ps-item-code { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--ink-deep); border-radius: 5px; padding: 1px 6px; }
.ps-itempick > .ps-item-code { position: absolute; right: 8px; top: 8px; }
.ps-itempick-panel { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px; max-height: 300px; overflow-y: auto; }
.ps-ip-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ps-ip-item:hover, .ps-ip-item.active { background: var(--accent-soft); }
.ps-ip-price { color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ps-discount { margin-bottom: 12px; }
.ps-discount-row { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.ps-totals, #de-totals { display: flex; flex-direction: column; gap: 2px; }
.ps-trow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; color: var(--text2); }
.ps-trow b { color: var(--text); font-variant-numeric: tabular-nums; }
.ps-trow.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; font-size: 16px; color: var(--text); font-weight: 700; }
.ps-trow.total b { font-size: 18px; }
.ps-trow.balance { color: var(--ink-deep); font-weight: 700; }
.ps-trow.balance b { color: var(--ink-deep); font-size: 15px; }
.ps-trow.muted { font-size: 12px; }
.ps-term { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line2); }
.ps-term-text { white-space: pre-wrap; margin: 2px 0 0; }
.ps-term-add { margin-top: 8px; }
.ps-contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 900px) { .ps-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Allocation grid */
.ps-alloc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ps-alloc td .num-input { width: 110px; display: inline-block; padding: 6px 8px; }
.ps-alloc td .link-btn { margin-left: 6px; }
.ps-alloc-foot { display: flex; gap: 20px; justify-content: flex-end; align-items: center; padding: 10px 4px 0; font-size: 13.5px; flex-wrap: wrap; }
.ps-alloc-foot .err { color: var(--red); font-weight: 600; }

/* Views */
.ps-view-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; margin-bottom: 14px; }
@media (max-width: 900px) { .ps-view-head { grid-template-columns: 1fr; } }
.ps-party { background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 14px 16px; }
.ps-party-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-deep); }
.ps-party-name { font-size: 17px; font-weight: 700; margin-top: 3px; }
.ps-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; align-content: start; }
.ps-meta div { display: flex; flex-direction: column; gap: 2px; }
.ps-meta span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text3); }
.ps-meta b { font-weight: 600; font-size: 13.5px; }
.ps-view-lines td { vertical-align: top; }
.ps-line-text { font-size: 12.5px; color: var(--text2); white-space: pre-wrap; margin-top: 3px; line-height: 1.45; }
.ps-view-foot { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 14px; }
@media (max-width: 800px) { .ps-view-foot { grid-template-columns: 1fr; } }
.ps-view-notes .mini-note { margin-top: 8px; }
.ps-history { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text2); padding: 6px 2px 0; }
.ps-history span { display: inline-block; min-width: 90px; font-weight: 700; color: var(--text3); }

/* ── Activity tab: comments, timeline, files ──────────────────────────────
   A divider between rows is a single border-top, never a box on its own —
   the same rule the rest of this stylesheet follows. */
.ps-plainlist { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.ps-plainlist li { padding: 10px 0; border-top: 1px solid var(--line2); }
.ps-plainlist li:first-child { border-top: none; padding-top: 0; }
.ps-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.ps-files { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ps-file { padding: 10px 0; border-top: 1px solid var(--line2); }
.ps-file:first-child { border-top: none; padding-top: 0; }
.ps-file-media { display: block; max-width: 260px; max-height: 180px; border-radius: var(--radius-sm); margin-bottom: 6px; object-fit: cover; }
.ps-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ps-file-row a { font-weight: 600; }
.page-form .banner { margin-bottom: 14px; }
.ps-money-strip, .ps-aging-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px; }
.ps-money-strip div, .ps-aging-strip div { background: var(--surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.ps-money-strip span, .ps-aging-strip span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text3); }
.ps-money-strip b, .ps-aging-strip b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ps-money-strip .hl, .ps-aging-strip .hl { background: var(--accent-soft); }
.ps-money-strip .hl b, .ps-aging-strip .hl b { color: var(--ink-deep); }
.ps-aging-strip .bad b { color: var(--red); }

/* Dashboard */
.ps-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ps-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.ps-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.ps-tile.warn::before { background: var(--ink); }
.ps-tile span { font-size: 12px; font-weight: 600; color: var(--text3); }
.ps-tile b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ps-tile small { font-size: 12px; color: var(--text2); }
.ps-tile.clickable:hover { border-color: var(--accent); }
.ps-agebar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--line2); }
.ps-agebar .age-0, .ps-agebar-legend i.age-0 { background: #9ca3af; }
.ps-agebar .age-1, .ps-agebar-legend i.age-1 { background: #f3b1ac; }
.ps-agebar .age-2, .ps-agebar-legend i.age-2 { background: #e46b64; }
.ps-agebar .age-3, .ps-agebar-legend i.age-3 { background: #c62f2f; }
.ps-agebar .age-4, .ps-agebar-legend i.age-4 { background: #7f1d1d; }
.ps-agebar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--text2); }
.ps-agebar-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.ps-terms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.ps-clamp { max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.data-table tfoot th { background: var(--surface2); border-top: 1px solid var(--line); padding: 10px 12px; font-size: 12.5px; color: var(--text); text-transform: none; letter-spacing: 0; }

/* ── Bank reconciliation ──────────────────────────────────────────────────
   One statement line, with the documents that might explain it underneath. */
.ps-bankline { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.ps-bankline + .ps-bankline { margin-top: 0; }
.ps-bankline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ps-bl-date { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
.ps-bl-desc { font-size: 14px; margin-top: 2px; }
.ps-bl-amount { font-size: 18px; font-weight: 700; white-space: nowrap; }
.ps-bl-amount.in { color: #1f7a52; }
.ps-bl-amount.out { color: var(--accent-deep); }
.ps-bankline-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ps-bankline-actions label { display: flex; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .ps-bankline-head { flex-direction: column; gap: 4px; }
  .ps-bl-amount { font-size: 16px; }
}


/* ── Attached records ─────────────────────────────────────────────────────
   The picker for linking another product's records to an invoice. */

.ps-links .ps-card-head { display: flex; align-items: center; gap: 12px; }
.ps-links .ps-card-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; flex: 1; }

.ps-link-results {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
}
.ps-link-hit {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft, #f1f3f5);
  font: inherit; text-align: left; cursor: pointer;
}
.ps-link-hit:last-child { border-bottom: 0; }
.ps-link-hit:hover { background: var(--accent-soft); }
.ps-link-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ps-link-hit-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ps-link-hit-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }

/* ── Sitting under the shared top bar ─────────────────────────────────────
   This layout was written for a fixed 56px header of its own. sight-ui now
   draws the top bar — sticky, 60px, in normal flow — so the sidebar is offset
   by that instead, and the main column no longer pads for a header that is
   not there. */

#topbar { display: none; }

#sidebar {
  top: var(--ps-top);
  height: auto;
}

#main-wrap {
  padding-top: 0;
  min-height: calc(100vh - var(--ps-top));
}

/* The shared bar, edge to edge: with viewport-fit=cover a phone in landscape
   puts the notch over its first few pixels, and an installed web app puts the
   status bar over its top. Both insets are zero in an ordinary browser tab. */
.sight-topbar {
  height: var(--ps-top);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}

/* PaySight's own slim bar: the mobile menu button and the page name. */
.ps-bar {
  position: sticky;
  top: var(--ps-top);
  z-index: 700;
  display: flex; align-items: center; gap: 10px;
  margin-left: var(--sidebar-w);
  padding: 0 18px;
  height: 44px;
  background: var(--s-surface, #fff);
  border-bottom: 1px solid var(--s-line, #e5e7eb);
  font-size: 13px; color: var(--s-muted, #6b7280);
}
.ps-bar #menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: none; border: 0;
  line-height: 1; color: inherit; cursor: pointer;
  padding: 0; border-radius: 8px;
}
.ps-bar #menu-toggle svg { width: 20px; height: 20px; }
.ps-bar #menu-toggle:hover { background: var(--s-line-soft, #f1f3f5); }
.ps-bar #menu-toggle:focus-visible, .ps-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ps-bar #page-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Back, in the page bar: only on a phone, and only while a full-screen form
   or document is open — there it replaces the form's own Back button, which
   would otherwise scroll away with the form. */
.ps-back {
  display: none; align-items: center; gap: 2px; flex: none;
  height: 36px; padding: 0 10px 0 4px;
  background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.ps-back svg { width: 20px; height: 20px; }
.ps-back:hover { background: var(--s-line-soft, #f1f3f5); }

@media (max-width: 980px) {
  .ps-bar { margin-left: 0; }
  .ps-bar #menu-toggle { display: inline-flex; }
}

/* A wide report (aging, the VAT summary, eight columns of figures) scrolls
   sideways inside its own box on a tablet or a narrow laptop, rather than
   pushing the whole page sideways. On a phone it is stacked instead. */
@media (min-width: 721px) { .table-wrap.ps-wide { overflow-x: auto; } }

/* The action bar's overflow toggle exists only on a phone; see ActionBar in
   app.js. On a wider screen every action is on the bar, as it always was. */
.ps-more { display: none; }
.ps-only-phone { display: none; }

/* The home launcher is the platform's page now, so PaySight never enters it. */
#app.home-mode #sidebar,
#app.home-mode .ps-bar { display: none; }
#app.home-mode #main-wrap { margin-left: 0; }

/* ── The cash book and bank reconciliation (pages/banking.js) ────────────── */
.banner.ok { background: #e3f5ec; color: #1f6b45; border: 1px solid #b7e2c9; }
.bk-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.bk-account { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.bk-account:hover { border-color: var(--accent); }
.bk-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-account-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-account-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.bk-account-balance { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-top: 4px; }
.bk-account-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--text3); margin-top: 2px; }
.bk-account-add { align-items: center; justify-content: center; min-height: 150px; color: var(--text2); font-weight: 600; border-style: dashed; }
.bk-account-add svg { width: 22px; height: 22px; }

.bk-line { padding: 12px 16px; margin-bottom: 10px; }
.bk-line.is-placed { opacity: .78; }
.bk-line-main { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; }
.bk-line-date { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.bk-line-desc { min-width: 0; overflow-wrap: anywhere; }
.bk-line-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-line-amt.in { color: #1f7a52; }
.bk-line-amt.out { color: var(--ink); }
.bk-suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 13px; }
.bk-suggest svg { width: 14px; height: 14px; vertical-align: -2px; }
.bk-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.bk-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 4px; cursor: pointer; }
.bk-pick + .bk-pick { border-top: 1px solid var(--line2); }
#bk-find-list { max-height: 46vh; overflow-y: auto; margin-top: 10px; }
.ps-aging-strip .hl.ok { background: #e3f5ec; }
.ps-aging-strip .hl.ok b { color: #1f6b45; }
.ps-aging-strip .hl.bad { background: #fbe6e4; }
.ps-aging-strip .hl.bad b { color: #8f1f1f; }
tr.row-ticked td { background: var(--surface2); }
.bk-recon-statement .row-group td { font-weight: 700; padding-top: 14px; }
.bk-recon-statement .row-total td { font-weight: 700; }
/* A statement line's reference and VAT, each labelled (S3, S5). */
.bk-line-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 12.5px; color: var(--text2); }
.bk-meta-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); margin-right: 3px; }
/* "4 lines are waiting in batch BT-1": the words, then the way to it. */
.banner.bk-waiting { justify-content: space-between; margin-bottom: 12px; }
.banner.bk-waiting > span { flex: 1; min-width: 0; }
.banner.bk-waiting .btn { flex: none; }
.bk-count { margin-top: 4px; font-weight: 600; }
/* Only when the amount is between R ___ and R ___. */
.bk-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-range .ps-money-field { flex: 1 1 140px; max-width: 220px; }
.bk-range-and { color: var(--text3); font-size: 13px; }
.ps-money-field { position: relative; }
.ps-money-field > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); font-weight: 600; pointer-events: none; }
.ps-money-field > .input { padding-left: 28px; width: 100%; }

/* "What is it for?" — each answer a card with its one line of help (R6). */
.ps-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ps-choice-opt {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; color: var(--text); transition: border-color .12s, background-color .12s;
}
.ps-choice-opt b { font-size: 13.5px; color: var(--ink); }
.ps-choice-opt span { font-size: 12px; line-height: 1.4; color: var(--text2); }
.ps-choice-opt:hover { border-color: var(--text3); }
.ps-choice-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-choice-opt.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (prefers-reduced-motion: reduce) { .ps-choice-opt { transition: none; } }

@media (max-width: 720px) {
  .ps-choice { grid-template-columns: 1fr; }
  .banner.bk-waiting { flex-wrap: wrap; }
  .banner.bk-waiting .btn { width: 100%; justify-content: center; }
  .bk-range .ps-money-field { max-width: none; }
  .bk-line-main { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-line-date { grid-column: 1 / -1; }
  .bk-suggest { flex-direction: column; align-items: stretch; }
  .bk-line-actions .btn { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ON A PHONE
   Designed for 360–390px and still whole at 320px. Everything here is inside
   a media query, so a desktop never sees it; the wider layouts above are
   untouched. Three rules hold throughout:
     · the page itself never scrolls sideways;
     · a boundary is a whole border or none — a row inside a bordered list is
       separated by a single rule, never boxed on one side;
     · anything you tap is at least 40px, and every field is 16px text so iOS
       does not zoom the page on focus.
   ══════════════════════════════════════════════════════════════════════════ */

/* Touch first, whatever the width: a tablet held in landscape is still
   driven by a finger. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .input, textarea.input, select.input, .select-dd-btn, .select-dd-search-input, .dp-input { font-size: 16px; }
  .input, select.input, .select-dd-btn { min-height: 44px; }
  textarea.input { min-height: 88px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .icon-btn, .ps-line-act .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; }
  .seg button { min-height: 40px; padding: 8px 13px; font-size: 13px; }
  .tab-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .select-dd-item { min-height: 44px; font-size: 15px; }
  .select-dd-search-input { min-height: 40px; padding: 8px 10px; }
  .datepick .datepick-btn { height: 44px; font-size: 15px; }
  .dtp-day { height: 40px; font-size: 14.5px; }
  .dtp-cal-foot button { min-height: 36px; }
  .modal-x { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px -10px 0 0; }
  .switch-row { min-height: 40px; }
  .switch-row input, .check-row input, .role-opt input { width: 20px; height: 20px; flex: none; }
  .ps-ip-item { min-height: 44px; }
  .ps-link-hit { min-height: 52px; }
}

@media (max-width: 720px) {
  /* ── Frame ─────────────────────────────────────────────────────────────── */
  .sight-topbar {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  /* The kit opens the app switcher from the button's left edge; near the
     right of a narrow bar that ran it off the screen. */
  .sight-topbar .s-dropdown { max-width: calc(100vw - 24px); }
  .sight-topbar .s-menu[data-menu="apps"] .s-dropdown { left: auto; right: 0; }
  .sight-update { bottom: max(18px, env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); }

  .ps-bar {
    gap: 2px; height: 48px;
    padding: 0 max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px));
  }
  .ps-bar #page-title { padding-left: 4px; font-size: 14px; font-weight: 600; color: var(--text); }
  /* The top bar already says PaySight; the page bar says where in it. */
  .ps-bar .pt-ws { display: none; }
  #app.form-open .ps-back { display: inline-flex; }
  #app.form-open .ps-bar #page-title { font-weight: 500; color: var(--text2); }

  /* No sideways scroll, ever: if something is still too wide it is cut off
     at the edge rather than dragging the whole page with it. clip, unlike
     hidden, makes no scroll container, so the sticky bars still stick. */
  #main-wrap { overflow-x: clip; }
  #content {
    max-width: none;
    padding: 16px max(14px, env(safe-area-inset-right, 0px)) 40px max(14px, env(safe-area-inset-left, 0px));
  }
  #app.form-open #content { padding-bottom: 0; }

  #toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; align-items: stretch;
  }
  .toast { max-width: none; }

  /* ── Page headers ───────────────────────────────────────────────────────
     Title, then the sentence under it, then the actions as one full-width
     row that wraps — the primary keeps its colour wherever it lands. */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; }
  .page-head h1 { font-size: 21px; line-height: 1.25; }
  .page-head h2 { font-size: 20px; }
  .page-head .ph-sub { font-size: 13px; }
  .page-actions { width: 100%; gap: 8px; }
  .page-actions > .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
  .page-actions > .datepick { flex: 1 1 150px; min-width: 0; }
  .page-actions > span:empty { display: none; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; }

  /* ── Cards, tiles, strips ──────────────────────────────────────────────── */
  .ps-card { padding: 14px; margin-bottom: 12px; }
  .ps-card-head { gap: 6px 10px; }
  .cs-card { padding: 16px; }
  .ps-tiles { gap: 10px; margin-bottom: 12px; }
  .ps-tile { padding: 12px 14px; }
  .ps-tile b { font-size: 21px; }
  .ps-two { gap: 0; }
  .ps-money-strip, .ps-aging-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-money-strip > div:last-child:nth-child(odd), .ps-aging-strip > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ps-money-strip div, .ps-aging-strip div { padding: 9px 12px; }
  .ps-money-strip b, .ps-aging-strip b { font-size: 14.5px; overflow-wrap: anywhere; }
  .banner { align-items: flex-start; }
  .banner .li { margin-top: 2px; }
  .empty { padding: 32px 16px; }

  /* ── List toolbar: the filters scroll in their own row, search below ──── */
  .ps-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .ps-toolbar > div:empty { display: none; }
  .ps-toolbar .seg {
    display: flex; flex-wrap: nowrap; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ps-toolbar .seg::-webkit-scrollbar { display: none; }
  .ps-toolbar .seg button { flex: 0 0 auto; white-space: nowrap; }
  .ps-search { min-width: 0; width: 100%; }
  /* A segmented control inside a form (the cash book's payee) shares the row. */
  .ps-card .seg { display: flex; width: 100%; }
  .ps-card .seg button { flex: 1 1 0; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }

  /* ── Documents and accounts, read ──────────────────────────────────────── */
  .ps-view-head { gap: 12px; }
  .ps-party { padding: 12px 14px; overflow-wrap: anywhere; }
  .ps-party-name { font-size: 16px; }
  .ps-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .ps-meta b { overflow-wrap: anywhere; }
  .ps-view-foot { gap: 12px; }
  .ps-trow.total b { font-size: 17px; }
  .ps-history span { display: block; min-width: 0; }
  .ps-history > div { padding: 3px 0; }
  /* A contact: name and role, then email and phone a line each (an address
     needs the width), then the primary switch and the bin. */
  .ps-contact { gap: 8px; padding-bottom: 12px; }
  .ps-contact + .ps-contact { padding-top: 12px; border-top: 1px solid var(--line2); }
  .ps-contact > :nth-child(3), .ps-contact > :nth-child(4) { grid-column: 1 / -1; }
  .ps-contact > .icon-btn { justify-self: end; }
  .ps-bankline { padding: 12px; }
  .ps-bankline-actions .btn { flex: 1 1 auto; }
  .ps-bankline-actions label { flex-wrap: wrap; }
  .ps-file-media { max-width: 100%; }
  input[type="file"] { max-width: 100%; min-width: 0; font-size: 14px; }
  .ps-alloc-foot { justify-content: flex-start; gap: 6px 16px; }
  .dp-terms-add, .ps-term-add .select-dd { min-width: 0; }

  /* ── Tables that become stacked rows ────────────────────────────────────
     A table opts in with class ps-stack. Each cell is labelled from its
     column heading (StackTables in core.js copies the heading onto the cell),
     and a column can name the part it plays in the row with data-m:
       title   the row's name, top left          status  top right
       total   a headline figure, top right      sub     a line of its own
       amount  the figure, bottom right          note    small print, a line of its own
       field   an input, full width              half    an input, half width
       act     the row's buttons                 check   a tick box, before the title
       hide    not on a phone                    (none)  a small labelled detail
     Rows are separated by a rule; the list's own box is the bordered one. */
  .table-wrap, .table-wrap.slim { min-height: 0; }
  table.ps-stack, table.ps-stack > tbody, table.ps-stack > tfoot { display: block; width: 100%; }
  table.ps-stack > thead { display: none; }
  table.ps-stack > tbody > tr, table.ps-stack > tfoot > tr {
    position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 14px; row-gap: 3px; padding: 12px 14px;
    border-top: 1px solid var(--line2);
  }
  table.ps-stack > tbody > tr:first-child { border-top: 0; }
  /* A tinted row at either end keeps to the list's rounded corners. */
  .table-wrap > table.ps-stack > tbody > tr:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
  .table-wrap > table.ps-stack:not(:has(> tfoot)) > tbody > tr:last-child { border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
  .table-wrap > table.ps-stack:not(:has(> tfoot)) > tbody > tr:only-child { border-radius: calc(var(--radius) - 1px); }
  table.ps-stack > tfoot > tr { border-top: 1px solid var(--line); background: var(--surface2); }
  /* A zero-height item that ends the first line: title and status share it,
     everything else starts below. */
  table.ps-stack > tbody > tr::before, table.ps-stack > tfoot > tr::before { content: ''; order: 3; flex: 0 0 100%; height: 0; }
  table.ps-stack > * > tr > td, table.ps-stack > * > tr > th {
    display: block; order: 4; min-width: 0; max-width: 100%;
    margin: 0; padding: 0; border: 0; background: none; position: static;
    text-align: left; text-transform: none; letter-spacing: 0;
    font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--text2);
    overflow-wrap: anywhere;
  }
  table.ps-stack > * > tr > [data-label]:not([data-label=""])::before {
    content: attr(data-label); margin-right: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text3);
  }
  table.ps-stack > * > tr > :empty { display: none; }
  /* "Due —", "Balance —": a labelled nothing is noise on a small screen. */
  table.ps-stack > * > tr > [data-blank]:not([data-m="title"]) { display: none; }
  table.ps-stack > * > tr > [data-m="title"] { order: 1; flex: 1 1 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
  table.ps-stack > * > tr > [data-m="status"] { order: 2; flex: 0 0 auto; margin-left: auto; }
  table.ps-stack > * > tr > [data-m="total"] { order: 2; flex: 0 0 auto; margin-left: auto; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
  table.ps-stack > * > tr > [data-m="sub"] { order: 3; flex: 1 1 100%; font-size: 13.5px; color: var(--text); }
  table.ps-stack > * > tr > [data-m="span"] { order: 3; flex: 1 1 100%; }
  table.ps-stack > * > tr > [data-m="amount"] { order: 6; margin-left: auto; font-size: 15px; font-weight: 700; color: var(--text); text-align: right; white-space: nowrap; }
  table.ps-stack > * > tr > [data-m="note"] { order: 7; flex: 1 1 100%; font-size: 12px; color: var(--text3); }
  table.ps-stack > * > tr > [data-m="act"] { order: 8; flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  table.ps-stack > * > tr > [data-m="check"] { order: 0; flex: 0 0 auto; align-self: center; }
  table.ps-stack > * > tr > [data-m="field"] { order: 5; flex: 1 1 100%; }
  table.ps-stack > * > tr > [data-m="half"] { order: 5; flex: 1 1 calc(50% - 7px); }
  table.ps-stack > * > tr > [data-m="hide"] { display: none; }
  table.ps-stack > * > tr > [data-label]:is([data-m="title"], [data-m="status"], [data-m="sub"], [data-m="span"], [data-m="note"], [data-m="act"], [data-m="check"])::before { content: none; }
  table.ps-stack > * > tr > :is([data-m="field"], [data-m="half"])::before { display: block; margin: 6px 0 5px; }
  table.ps-stack > * > tr > :is([data-m="field"], [data-m="half"]) .input { width: 100%; }
  table.ps-stack > * > tr > [data-m="check"] input { width: 22px; height: 22px; accent-color: var(--ink); }
  /* What the cells said in colour, they still say. */
  table.ps-stack > * > tr > .bad, table.ps-stack > * > tr > * > .bad { color: var(--red); }
  table.ps-stack > * > tr > .strong { font-weight: 700; color: var(--text); }
  table.ps-stack > tbody > tr.row-muted > * { color: var(--text3); }
  table.ps-stack > tbody > tr.row-overdue > td { background: none; }
  table.ps-stack > tbody > tr.row-overdue { background: #fff8f7; }
  table.ps-stack .mini-note { margin: 0; }
  /* A table straight inside a card (the dashboard's lists) already has the
     card's padding either side. */
  .ps-card > table.ps-stack > tbody > tr { padding-left: 0; padding-right: 26px; }
  .ps-card > table.ps-stack > tbody > tr.clickable::after { right: 2px; }
  /* A row that opens something says so. */
  table.ps-stack > tbody > tr.clickable { padding-right: 34px; }
  table.ps-stack > tbody > tr.clickable::after {
    content: '\203A'; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    font-size: 24px; line-height: 1; font-weight: 400; color: var(--text3);
  }
  table.ps-stack > tbody > tr.clickable:active { background: var(--surface2); }
  /* Figures in pairs: a label and its value either side of half the row. */
  table.ps-stack.ps-kv > * > tr > :not([data-m]) {
    flex: 1 1 calc(50% - 7px); display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px;
  }
  /* The allocation box and its "Full" share a line. */
  .ps-alloc table.ps-stack > * > tr > [data-m="field"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
  .ps-alloc table.ps-stack > * > tr > [data-m="field"]::before { flex: 1 1 100%; }
  .ps-alloc table.ps-stack > * > tr > [data-m="field"] .num-input { flex: 1 1 auto; width: auto; }

  /* ── The document editor's lines ────────────────────────────────────────
     Each line is a block: its number and buttons, what it is, the record it
     is for, quantity · unit · price on one row, then VAT and the amount. */
  .ps-lines-wrap { border: 0; background: none; box-shadow: none; border-radius: 0; }
  table.ps-lines, table.ps-lines > tbody { display: block; }
  table.ps-lines > thead { display: none; }
  table.ps-lines > tbody { counter-reset: psline; }
  table.ps-lines tr.ps-line {
    counter-increment: psline;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px;
    grid-template-areas:
      "no no no act act act" "desc desc desc desc desc desc" "rec rec rec rec rec rec"
      "qty qty unit unit price price" "vat vat vat amt amt amt";
    padding: 16px 0; border-top: 1px solid var(--line2);
  }
  table.ps-lines.no-vat tr.ps-line {
    grid-template-areas:
      "no no no act act act" "desc desc desc desc desc desc" "rec rec rec rec rec rec"
      "qty qty unit unit price price" "amt amt amt amt amt amt";
  }
  table.ps-lines tr.ps-line:first-child { border-top: 0; padding-top: 2px; }
  table.ps-lines tr.ps-line:hover { background: none; }
  table.ps-lines tr.ps-line::before {
    content: 'Line ' counter(psline); grid-area: no; align-self: center;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3);
  }
  table.ps-lines tr.ps-line > td { display: block; min-width: 0; padding: 0 !important; border: 0; }
  table.ps-lines .c-desc { grid-area: desc; }
  table.ps-lines .c-rec { grid-area: rec; }
  table.ps-lines .c-rec.is-empty { display: none; }
  table.ps-lines .c-qty { grid-area: qty; }
  table.ps-lines .c-unit { grid-area: unit; }
  table.ps-lines .c-price { grid-area: price; }
  table.ps-lines .c-vat { grid-area: vat; }
  table.ps-lines .ps-line-amt { grid-area: amt; align-self: end; text-align: right; font-size: 17px; line-height: 44px; white-space: nowrap; }
  table.ps-lines .ps-line-act { grid-area: act; justify-self: end; display: flex; gap: 8px; }
  table.ps-lines td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text3);
  }
  table.ps-lines td[data-label]::before { text-align: left; }
  table.ps-lines .ps-line-amt[data-label]::before { line-height: 1.4; text-align: right; }
  table.ps-lines .input { padding: 9px 11px; font-size: 16px; }
  table.ps-lines .num-input { text-align: right; }
  .ps-itempick > .ps-item-code { top: 13px; }
  .ps-itempick:has(> .ps-item-code) .ps-item-in { padding-right: 96px; }
  .ps-itempick-panel { max-height: min(300px, 50vh); }
  .ps-item-in { scroll-margin-top: calc(var(--ps-top) + 60px); }
  .ps-line-details { margin-top: 8px; }
  .ps-lines-foot .btn { flex: 1 1 auto; }

  /* ── Full-screen forms and documents ────────────────────────────────────
     Edge to edge: the sections are the cards, on the page's own grey, and the
     actions are a bar pinned to the bottom of the screen, clear of the home
     indicator. Back lives in the page bar (see .ps-back), so the bar's own
     Cancel — which does exactly what Back does — makes room for the actions. */
  .page-form {
    max-width: none; margin: -16px calc(-1 * max(14px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(14px, env(safe-area-inset-left, 0px)));
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    /* At least a screen tall, so a short form's bar still sits on the bottom
       edge rather than halfway up it. */
    display: flex; flex-direction: column;
    min-height: calc(100vh - var(--ps-top) - 48px);
    min-height: calc(100dvh - var(--ps-top) - 48px);
  }
  .page-form > .modal-body { flex: 1 0 auto; }
  .page-form .modal-head { padding: 14px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); }
  .page-form .modal-head h3 { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
  .page-form .page-back { display: none; }
  .page-form .modal-sub { padding: 4px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); }
  .page-form .modal-body { padding: 12px max(14px, env(safe-area-inset-right, 0px)) 16px max(14px, env(safe-area-inset-left, 0px)); }
  .page-form .modal-actions {
    flex-wrap: wrap; gap: 8px; border-radius: 0;
    padding: 10px max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    /* Edge to edge, so no lone top border: the shadow alone lifts it off the page. */
    border-top: 0; box-shadow: 0 -1px 0 rgba(17,24,39,.06), 0 -6px 16px rgba(17,24,39,.07);
  }
  .page-form .modal-actions > .btn { flex: 1 1 auto; }
  .page-form > .modal-actions > .btn[onclick="goBack()"] { display: none; }
  /* Actions that would take two rows: the primary stays, the rest fold behind
     More and open upwards as a list (ActionBar in app.js decides). The same
     buttons, not copies, so every handler — and every spinner a handler puts
     on its own button — is the one it was. */
  .modal-actions.ps-collapsible > .btn:not(.ps-keep):not(.ps-more) { display: none; }
  .modal-actions.ps-collapsible.open > .btn:not(.ps-keep):not(.ps-more):not([onclick="goBack()"]) {
    display: inline-flex; order: -1; flex: 1 1 100%; justify-content: flex-start; text-align: left;
  }
  .modal-actions.ps-collapsible .ps-more { display: inline-flex; flex: 0 0 auto; }
  .modal-actions .ps-more svg { transition: transform .15s; }
  .modal-actions.open .ps-more svg { transform: rotate(180deg); }
  .modal-actions .ps-keep { flex: 1 1 auto; }
  .ps-only-phone { display: block; }
  .ps-not-phone { display: none; }
  .ps-sticky-actions {
    position: sticky; bottom: 0; z-index: 60; display: flex; gap: 8px;
    margin: 14px calc(-1 * max(14px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(14px, env(safe-area-inset-left, 0px)));
    padding: 10px max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    background: var(--surface); box-shadow: 0 -1px 0 rgba(17,24,39,.06), 0 -6px 16px rgba(17,24,39,.07);
  }
  .ps-sticky-actions .btn { flex: 1 1 auto; }

  /* ── Dialogs: a sheet from the bottom ───────────────────────────────────
     The host still scrolls (so a dropdown near the end can open past the
     sheet), the title and the buttons stick to its top and bottom, and the
     sheet starts at the bottom when short and at the top when tall —
     margin-top:auto, so a tall one can never be pushed off the top. */
  #modal-host { padding: max(12px, env(safe-area-inset-top, 0px)) 0 0; align-items: flex-start; overscroll-behavior: contain; }
  #modal-host > .modal, #modal-host > .modal.wide {
    margin-top: auto; width: 100%; max-width: none; border-radius: 16px 16px 0 0;
    animation: sheetIn .24s cubic-bezier(.22,1,.36,1);
  }
  #modal-host .modal-head {
    position: sticky; top: 0; z-index: 3; align-items: center; gap: 12px;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
    background: var(--surface); border-radius: 16px 16px 0 0;
  }
  #modal-host .modal-head h3 { font-size: 17px; line-height: 1.3; }
  #modal-host .modal-sub { padding: 0 16px; }
  #modal-host .modal-body { padding: 14px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); }
  #modal-host .modal-actions, .confirm-modal .modal-actions {
    position: sticky; bottom: 0; z-index: 3; flex-wrap: wrap; gap: 8px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--surface); border-top: 1px solid var(--line2);
  }
  #modal-host .modal-actions > .btn, .confirm-modal .modal-actions > .btn { flex: 1 1 auto; }
  .confirm-host { padding: 0; align-items: flex-end; }
  .confirm-modal { max-width: none; border-radius: 16px 16px 0 0; animation: sheetIn .24s cubic-bezier(.22,1,.36,1); }

  /* ── Pickers ────────────────────────────────────────────────────────────
     selectdd.js and datepick.js keep these on the screen (they flip upwards
     and shift sideways when there is no room); this keeps them a size a
     thumb can use. */
  .select-dd-panel { max-height: min(340px, 55vh); overscroll-behavior: contain; }
  .dtp-cal { width: min(300px, calc(100vw - 16px)); }
  .tick-dd-panel { max-width: calc(100vw - 16px); }
  .ps-link-results { max-height: 50vh; }
  .ps-link-hit { flex-wrap: wrap; }
}

/* Narrower than the phones this is designed for (a 320px screen): a little
   less air everywhere. */
@media (max-width: 359px) {
  #content { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .page-form { margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px))); }
  .ps-card { padding: 12px; }
  table.ps-stack > tbody > tr, table.ps-stack > tfoot > tr { padding: 11px 12px; column-gap: 10px; }
  table.ps-stack > tbody > tr.clickable { padding-right: 30px; }
  table.ps-stack.ps-kv > * > tr > :not([data-m]) { flex-basis: 100%; }
  .ps-meta { gap: 8px 10px; }
  .ps-tile b { font-size: 19px; }
  .ps-sticky-actions { margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px))); }
  /* The kit's bar has four buttons on the right; at this width the tenant's
     name is squeezed to a letter and an ellipsis, which says nothing. The
     logo stays, and the page bar below says where you are. */
  .sight-topbar .s-brand-text { display: none; }
  table.ps-lines tr.ps-line { column-gap: 8px; }
}

@keyframes sheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Nothing slides, fades or spins for someone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  #sidebar, #sidebar.open, #sidebar-overlay, #sidebar-overlay.open { transition: none; }
  .modal, .confirm-modal, .page-form, .toast, .select-dd-panel, .dtp-pop, .tick-dd-panel, .status-menu { animation: none; }
  .modal-actions .ps-more svg, .btn, .nav-item, .input { transition: none; }
}

/* The reconciliation's sum, one figure under the other (R3), and its tools (R1). */
.bk-recon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 14px; align-items: start; margin-bottom: 14px; }
.bk-recon-grid > .ps-card { margin-bottom: 0; }
.bk-sum-card { margin-bottom: 0; }
.bk-sum { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bk-sum td { padding: 7px 4px; }
.bk-sum td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-sum tr.is-total td { font-weight: 700; border-top: 1px solid var(--line); }
.bk-sum tr.is-diff td { font-weight: 700; font-size: 15px; border-top: 1px solid var(--line); }
.bk-sum tr.is-diff.ok td.num { color: #1f6b45; }
.bk-sum tr.is-diff.bad td.num { color: var(--red); }
.bk-recon-tools { align-items: center; }
.bk-filter { display: flex; align-items: center; gap: 8px; }
.bk-filter-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text3); }
@media (max-width: 760px) { .bk-recon-grid { grid-template-columns: 1fr; } }
.err { color: var(--red); }
.mini-note.err { font-weight: 600; }