:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --sidebar-bg: #0f172a;
  --sidebar-fg: #cbd5e1;
  --sidebar-fg-active: #ffffff;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --radius: 10px;
}

* { box-sizing: border-box; }
/* The HTML `hidden` attribute must win over component display rules (e.g. the
   command-palette overlay and the notification badge both set a display value
   that would otherwise keep them visible/click-intercepting while hidden). */
[hidden] { display: none !important; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

#app-shell { display: flex; min-height: 100vh; }
#app-shell.hidden { display: none; }

/* ---- Sidebar ---- */
/* Sticky, self-scrolling sidebar: pins to the viewport and scrolls its own
   links when the screen is too short to show them all, instead of running off
   the bottom with no way to reach the lower items. */
#sidebar { width: 240px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; padding: 16px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
/* Auto-hiding scrollbar: the bar stays invisible and only fades in when you
   hover the sidebar (and only exists at all when the links actually overflow).
   Firefox uses scrollbar-color; WebKit/Chromium uses the ::-webkit rules. The
   track keeps a fixed thin gutter so nothing shifts when the thumb appears. */
#sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#sidebar:hover { scrollbar-color: rgba(255,255,255,.28) transparent; }
#sidebar::-webkit-scrollbar { width: 7px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 7px; transition: background .2s; }
#sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
#sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }
#sidebar .brand { padding: 0 20px 16px; font-weight: 700; font-size: 18px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
#sidebar .brand small { display: block; font-weight: 400; font-size: 12px; color: var(--sidebar-fg); opacity: .7; margin-top: 2px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--sidebar-fg); font-size: 14px; border-left: 3px solid transparent; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: rgba(37,99,235,.18); color: var(--sidebar-fg-active); border-left-color: var(--accent); }
.nav-section-label { padding: 16px 20px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.4); }

/* ---- Main column ---- */
#main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
#topbar .left { display: flex; align-items: center; gap: 12px; min-width: 0; }
#topbar .title { font-size: 16px; font-weight: 600; }
#topbar .right { display: flex; align-items: center; gap: 12px; }

/* Compact, single-purpose controls so the top bar reads clean: a Links icon,
   a small status dot, and an avatar that opens name/role/log-out. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 16px; color: var(--text); }
.icon-btn:hover { background: #f1f5f9; }

/* Quick-launch buttons for enabled connected systems (CWPOS/CWPAY). Icon+label
   on desktop; the label (.lbl) is hidden on ≤1080 so they become icon-only. */
.quick-systems { display: flex; align-items: center; gap: 8px; }
.sys-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text); }
.sys-btn:hover { background: #f1f5f9; }
.sys-btn .ic { font-size: 16px; }

.user-menu { position: relative; }
.user-btn { border: 0; background: transparent; padding: 0; line-height: 0; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.user-menu .user-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 300;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(15,23,42,.14); width: 220px; padding: 14px; }
.user-menu.open .user-panel { display: block; }
.user-menu .user-name { font-weight: 700; font-size: 14px; }
.user-menu .user-role { font-size: 12px; color: var(--text-muted); text-transform: capitalize; margin-top: 2px; }

/* ===== Connectivity on the avatar (replaces the old "Online" pill) ===== */
.user-btn { position: relative; border-radius: 50%; }
.user-btn .avatar { position: relative; z-index: 1; transition: box-shadow .2s; }
/* Solid status ring (a 2px surface gap, then the colour). */
.user-btn[class*="conn-"] .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--conn-color, #94a3b8); }
.user-btn.conn-online     { --conn-color: #16a34a; }
.user-btn.conn-offline    { --conn-color: #94a3b8; }
.user-btn.conn-syncing    { --conn-color: #2563eb; }
.user-btn.conn-sync_error { --conn-color: #d97706; }
/* Heartbeat pulse — ONLY when online. A ring that expands and fades out. */
.user-btn.conn-online::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(22,163,74,.55);
  animation: conn-heartbeat 2.2s ease-out infinite; pointer-events: none; z-index: 0;
}
@keyframes conn-heartbeat {
  0%   { transform: scale(.92); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .user-btn.conn-online::after { animation: none; } }
/* Status line inside the account dropdown (keeps the words readable). */
.user-conn { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.user-conn .user-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--conn-color, #94a3b8); flex-shrink: 0; }
.user-conn.conn-online     { --conn-color: #16a34a; }
.user-conn.conn-offline    { --conn-color: #94a3b8; }
.user-conn.conn-syncing    { --conn-color: #2563eb; }
.user-conn.conn-sync_error { --conn-color: #d97706; }

/* Hamburger — hidden on desktop, shown on narrow screens (see media query). */
.nav-toggle { display: none; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 20px; line-height: 1; padding: 6px 12px; color: var(--text); }
.nav-toggle:hover { background: #f1f5f9; }
.sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 390; }
.ic { font-size: 15px; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-online { background: #dcfce7; color: #166534; }
.status-online .dot { background: #16a34a; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-offline .dot { background: #dc2626; }
.status-syncing { background: #dbeafe; color: #1e40af; }
.status-syncing .dot { background: #2563eb; animation: pulse 1s infinite; }
.status-sync_error { background: #fef3c7; color: #92400e; }
.status-sync_error .dot { background: #d97706; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

#app-view { padding: 24px; overflow-y: auto; flex: 1; }

/* ---- Common components ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow: hidden; }
.stat-tile .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-tile .value { font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1.1; }
.stat-tile .stat-top { display: flex; align-items: center; gap: 8px; }
.stat-tile .stat-ic { font-size: 16px; line-height: 1; }
.stat-tile .stat-sub { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
/* Coloured left accent + subtle tint. */
.stat-tile.accent-green, .stat-tile.accent-blue, .stat-tile.accent-amber { border-left-width: 3px; }
.stat-tile.accent-green { border-left-color: var(--success); }
.stat-tile.accent-blue  { border-left-color: var(--accent); }
.stat-tile.accent-amber { border-left-color: var(--warning); background: #fffbeb; }
/* Clickable tiles/cards (data-nav). */
.stat-tile[data-nav], .attn-card [data-nav], [data-nav][role="button"] { cursor: pointer; }
.stat-tile[data-nav] { transition: box-shadow .12s, transform .12s; }
.stat-tile[data-nav]:hover { box-shadow: 0 4px 14px rgba(15,23,42,.10); transform: translateY(-1px); }

/* Dashboard header (greeting + quick actions). */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-head h2 { font-size: 22px; }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Two-column charts row. */
.dash-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
.dash-cols .card { margin-bottom: 20px; }

/* Attention strip. */
.attn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.attn-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); }
.attn-ic { font-size: 18px; }
.attn-txt { flex: 1; font-size: 13px; color: var(--text); }
.attn-card .btn { white-space: nowrap; }

/* Revenue bar chart (last 14 days). */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding-top: 8px; }
.bar-col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.bar { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--accent), #60a5fa); border-radius: 3px 3px 0 0; transition: opacity .12s; }
.bar-col:hover .bar { opacity: .8; }
.bars-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-muted); }

/* Jobs-by-status horizontal bars. */
.sbar { display: grid; grid-template-columns: 92px 1fr 32px; align-items: center; gap: 10px; margin-bottom: 10px; }
.sbar:last-child { margin-bottom: 0; }
.sbar-l { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.sbar-track { height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.sbar-fill { height: 100%; border-radius: 6px; min-width: 3px; transition: width .3s; }
.sbar-n { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Sync conflict review — field-level diff */
.conflict-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.conflict-card { background: #fffbeb; border-color: #fde68a; }
:root[data-theme="dark"] .conflict-card { background: #2a2410; border-color: #7c5e10; }
.conflict-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
table.conflict-diff { width: 100%; border-collapse: collapse; font-size: 13px; }
table.conflict-diff th, table.conflict-diff td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.conflict-diff th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
table.conflict-diff .cf-key { font-weight: 600; text-transform: capitalize; white-space: nowrap; }
table.conflict-diff .cf-mine { color: var(--accent); }
table.conflict-diff .cf-theirs { color: var(--warning, #d97706); }

/* Dashboard chart tabs (Revenue / Expenses) */
.dash-tabs { display: inline-flex; gap: 4px; background: var(--bg); border-radius: 8px; padding: 3px; }
.dash-tab { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.dash-tab:hover { color: var(--text); }
.dash-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
:root[data-theme="dark"] .dash-tab.active { background: #1e293b; }
.series-sub { font-size: 11px; color: var(--text-muted); margin: -2px 0 10px; }
/* Chart range selector + legend row */
.series-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 12px; }
.dash-range { display: inline-flex; gap: 4px; }
.range-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: all .12s; }
.range-btn:hover { color: var(--text); }
.range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.series-legend { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-muted); }
.series-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.series-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.series-legend .sw-rev { background: var(--accent); }
.series-legend .sw-exp { background: var(--warning, #d97706); }
.series-legend .lg-net { font-weight: 600; color: var(--text); }
/* Expense bars use the warning tone so the two series read differently */
.bar-expense { background: linear-gradient(180deg, var(--warning, #d97706), #fbbf24); }
/* Labeled bars: date under every bar. The bar area has a DEFINITE height so the
   per-bar `height:X%` resolves (a flex:1 wrapper is indefinite → bars collapse). */
.bars-labeled { align-items: flex-end; height: auto; }
/* align-items:stretch is REQUIRED — the base .bar-col sets align-items:flex-end,
   which in this column layout would stop .bar-wrap stretching and collapse it to
   ZERO WIDTH (bars had full height but no width → invisible). */
.bars-labeled .bar-col { flex-direction: column; justify-content: flex-end; align-items: stretch; height: auto; gap: 5px; min-width: 0; }
.bars-labeled .bar-wrap { width: 100%; height: 122px; display: flex; align-items: flex-end; }
.bars-labeled .bar-wrap.cmp { gap: 2px; }
.bars-labeled .bar-wrap.cmp .bar { flex: 1; width: auto; }
.bar-date { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-mon { display: block; font-size: 8.5px; opacity: .75; }
.bars-labeled.dense .bar-date { font-size: 8.5px; }
.bars-labeled.dense .bar-mon { font-size: 7.5px; }
/* Clickable job-status rows */
.sbar-link { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; transition: background .12s; }
.sbar-link:hover { background: var(--bg); }
:root[data-theme="dark"] .sbar-link:hover { background: #0b1120; }
/* Recent activity — collapsible + not full-bleed wide */
.dash-activity { max-width: 1040px; }
.dash-collapse-hdr { cursor: pointer; user-select: none; }
.dash-chev { color: var(--text-muted); font-size: 13px; }

@media (max-width: 1080px) {
  .dash-cols { grid-template-columns: 1fr; }
  .dash-head { align-items: flex-start; }
  .dash-activity { max-width: none; }
}

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.card h2, .card h3 { margin-top: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:last-child td { border-bottom: 0; }
tr:hover td { background: #fafbfe; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; }
/* On desktop the row-action buttons show icons only (Edit/Delete labels live in
   a .lbl span that is hidden here) so a full action row always fits inside the
   card. On the narrow-screen cards below, the labels come back for clarity. */
@media (min-width: 1081px) {
  .cell-actions .lbl { display: none; }
  /* Tighter horizontal padding on desktop list tables keeps a 7-column row
     inside its card without horizontal scrolling. */
  .rtable th, .rtable td { padding-left: 9px; padding-right: 9px; }
}
.cell-actions { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.cell-actions .btn { white-space: nowrap; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; }

/* ---- Responsive tables ----------------------------------------------------
   Any list table (auto-tagged .rtable by app.js) collapses below 760px into
   one labelled card per row, so narrow screens never need horizontal
   scrolling. Each cell shows its column header (from data-label) beside its
   value; the actions cell keeps its buttons together. */
@media (max-width: 1080px) {
  .rtable, .rtable thead, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable thead { position: absolute; left: -9999px; top: -9999px; }
  .rtable tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 12px; padding: 4px 2px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
  .rtable tr:hover td { background: transparent; }
  .rtable td { border: 0; border-bottom: 1px solid #f1f5f9; padding: 9px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; }
  .rtable tr td:last-child { border-bottom: 0; }
  .rtable td::before { content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
  .rtable td.num { white-space: normal; }
  .rtable td.actions { justify-content: flex-end; }
  .rtable td.actions::before, .rtable td:empty::before { content: none; }
  .rtable td:empty { display: none; }
  .rtable .cell-actions { width: 100%; justify-content: stretch; }
  .rtable .cell-actions .btn { flex: 1; justify-content: center; }
}

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: #f1f5f9; }
.btn-danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-pending { background: #f1f5f9; color: #475569; }
.badge-in_progress { background: #dbeafe; color: #1e40af; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-pending-sync { background: #fef3c7; color: #92400e; }

input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text-muted); }
.form-row { margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.empty-state { padding: 40px; text-align: center; color: var(--text-muted); }
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1e293b; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* ---- Login screen ---- */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
#login-screen.hidden { display: none; }
.login-card { width: 360px; background: var(--surface); border-radius: 16px; padding: 32px; box-shadow: 0 10px 40px rgba(15,23,42,.1); }
.login-card h1 { font-size: 20px; margin-bottom: 4px; }
.login-card p.sub { color: var(--text-muted); font-size: 13px; margin-top: 0; margin-bottom: 24px; }
.login-error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 16px; }

/* Above the fullscreen tool viewer (z-index 600) so a Save dialog opened from
   inside a tool is clickable, not trapped behind the iframe. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; z-index: 700; }
.modal { background: var(--surface); border-radius: var(--radius); padding: 24px; width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
/* Print / Document order editor */
.po-lab { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 3px; }
.po-ck { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; cursor: pointer; color: var(--text); }
.po-ck input { flex: 0 0 auto; width: 16px; height: 16px; }

.pending-flag { font-size: 11px; color: var(--warning); margin-left: 6px; }

/* Pagination controls for long lists. */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 4px; flex-wrap: wrap; }
.pager-info { font-size: 13px; color: var(--text-muted); }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* Scroll-to-top button: fixed bottom-right, revealed once scrolled (.show). */
.back-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; line-height: 1;
  box-shadow: 0 4px 14px rgba(15,23,42,.18); display: none; align-items: center; justify-content: center; z-index: 60; }
.back-to-top.show { display: inline-flex; }
.back-to-top:hover { background: #f1f5f9; }
@media (max-width: 1080px) { .back-to-top { right: 14px; bottom: 58px; } }

/* Build/version label, fixed bottom-centre. A faint pill background keeps it
   readable over page content; pointer-events:none so it never blocks clicks. */
.app-version { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 11px; color: var(--text-muted); z-index: 50; pointer-events: none; letter-spacing: .02em;
  background: rgba(255,255,255,.85); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; backdrop-filter: blur(2px); }
/* Compact/mobile mode below 1080px: the sidebar becomes an off-canvas drawer
   (opened by the hamburger) and the header collapses to icons. Matches the
   table-reflow breakpoint above so the whole UI switches to its compact form
   at one width. */
@media (max-width: 1080px) {
  #sidebar { position: fixed; z-index: 400; height: 100vh; transform: translateX(-100%); transition: transform .2s; box-shadow: 2px 0 16px rgba(15,23,42,.2); }
  #sidebar.open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
  .sidebar-scrim.show { display: block; }
  .form-grid { grid-template-columns: 1fr; }

  /* Compact header: collapse verbose text to icons so everything fits and the
     hamburger is never crowded off-screen. The .lbl spans hold the wordy bits
     (button captions, the "Online" text, the full user name); we hide them and
     keep just the icon/dot. */
  #topbar { padding: 10px 12px; gap: 8px; }
  #topbar .left { gap: 8px; flex: 1 1 auto; min-width: 0; }
  #topbar .nav-toggle { flex: 0 0 auto; }         /* never let the hamburger shrink/clip */
  #topbar .right { gap: 8px; flex-wrap: nowrap; flex: 0 0 auto; }
  #topbar .lbl { display: none; }
  #topbar #user-label { display: none; }
  #topbar .status-pill { padding: 5px 8px; }
  #topbar .status-pill .dot { margin: 0; }
  #topbar .sys-btn { padding: 0 9px; }            /* icon-only on mobile */
  #topbar .quick-systems { gap: 6px; }
  #page-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
}
/* Very narrow phones with CWPAY/CWPOS buttons present: relieve the crowding by
   dropping the "Online" word to just its status dot and trimming gaps. */
@media (max-width: 430px) {
  #topbar #connectivity-label { display: none; }
  #topbar .status-pill { padding: 6px; }
  #topbar .right { gap: 6px; }
  #topbar .quick-systems { gap: 4px; }
  #page-title { max-width: 22vw; }
}

/* ---- Tools ---- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tool-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tool-tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(37,99,235,.1); }
.tool-tile .tool-name { font-weight: 600; font-size: 14px; color: var(--text); }
.tool-tile .tool-desc { font-size: 12px; color: var(--text-muted); }

.tool-viewer { position: fixed; inset: 0; z-index: 600; background: var(--bg); display: flex; flex-direction: column; }
.tool-viewer-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.tool-viewer iframe { flex: 1; width: 100%; border: 0; background: #fff; }
/* Shared tool top bar: title truncates instead of wrapping/overlapping the
   buttons; buttons never shrink. */
.tvbar .tvb-title { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvbar .tvb-hint { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tvbar .btn { flex: 0 0 auto; }

/* ---- Quick Links ---- */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.link-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.link-card .link-title { font-weight: 600; font-size: 14px; }
.link-card .link-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.link-card .link-actions { margin-top: 8px; display: flex; gap: 6px; }

/* Top-bar quick-links dropdown */
.ql-menu { position: relative; }
.ql-menu .ql-panel { display: none; position: absolute; right: 0; top: 110%; z-index: 300;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(15,23,42,.14); width: 300px; max-height: 60vh; overflow-y: auto; padding: 8px; }
.ql-menu.open .ql-panel { display: block; }
/* On phones the bell/quick-links panels are anchored to a button that sits in
   the middle of the icon cluster, so an `absolute; right:0` fixed-width panel
   spills off the LEFT edge. Pin them to the viewport instead so they stay a
   clean full-width dropdown that never runs off-screen. */
@media (max-width: 640px) {
  .notif-menu .notif-panel, .ql-menu .ql-panel {
    position: fixed !important; left: 8px !important; right: 8px !important; top: 60px !important;
    width: auto !important; max-width: none !important;
  }
}
.ql-group { padding: 4px 0; }
.ql-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 8px 2px; }
.ql-item { display: block; padding: 7px 8px; font-size: 13px; border-radius: 6px; color: var(--text); }
.ql-item:hover { background: #f1f5f9; }
.ql-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* ==================== v27 enhancements ==================== */

/* Clickable row links (customer/job names -> detail pages). */
.row-link { color: var(--text); font-weight: 600; }
.row-link:hover { color: var(--accent); text-decoration: underline; }
.detail-back { margin-bottom: 12px; }
.detail-back .row-link { font-weight: 600; font-size: 13px; color: var(--text-muted); }
.detail-back .row-link:hover { color: var(--accent); }

/* Search trigger + ⌘K hint in the header. */
.search-trigger { width: auto; padding: 0 10px; gap: 6px; }
.search-trigger .kbd { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
@media (max-width: 1080px) { .search-trigger .kbd { display: none; } }

/* Command palette overlay. */
.cmdk-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 900;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk { width: 560px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 64px rgba(15,23,42,.35); overflow: hidden; }
.cmdk-input, #cmdk-input { width: 100%; border: 0; border-bottom: 1px solid var(--border);
  padding: 18px 20px; font-size: 16px; background: var(--surface); color: var(--text); outline: none; }
.cmdk-results { max-height: 46vh; overflow-y: auto; }
.cmdk-hint { padding: 22px 20px; color: var(--text-muted); font-size: 13px; text-align: center; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; cursor: pointer; }
.cmdk-item.active, .cmdk-item:hover { background: var(--hover); }
.cmdk-ic { font-size: 18px; width: 22px; text-align: center; }
.cmdk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cmdk-foot { padding: 9px 18px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* Notifications bell + dropdown. */
.notif-menu { position: relative; }
.notif-menu .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.notif-menu #notif-toggle { position: relative; overflow: visible; }
.notif-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 300;
  width: 320px; max-width: 88vw; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 32px rgba(15,23,42,.16); overflow: hidden; max-height: 70vh; overflow-y: auto; }
.notif-menu.open .notif-panel { display: block; }
.notif-head { padding: 12px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); }
.notif-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer; color: var(--text); }
.notif-item:hover { background: var(--hover); }
.notif-item .notif-ic { font-size: 16px; }
.notif-txt { display: flex; flex-direction: column; min-width: 0; }
.notif-title { font-weight: 600; font-size: 13px; }
.notif-sub { font-size: 12px; color: var(--text-muted); }
.notif-item.level-danger { border-left: 3px solid var(--danger); }
.notif-item.level-warning { border-left: 3px solid var(--warning); }

/* Table toolbar (filters + CSV). */
.table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar-field { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px; }
.toolbar-field[type="search"] { min-width: 220px; flex: 1; max-width: 320px; }
.toolbar-spacer { flex: 1; }

/* Customer 360 / Job detail heads. */
.profile-head { display: flex; align-items: flex-start; gap: 18px; }
.avatar-lg { width: 60px; height: 60px; font-size: 22px; flex-shrink: 0; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Job timeline. */
.timeline { position: relative; padding-left: 6px; }
.tl-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.tl-body { flex: 1; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tl-top { font-size: 14px; text-transform: capitalize; }
.tl-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Dark mode ---------- */
:root { --hover: #f1f5f9; }
:root[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #131c31;
  --sidebar-bg: #0a0f1d;
  --sidebar-fg: #94a3b8;
  --sidebar-fg-active: #ffffff;
  --accent: #3b82f6;
  --accent-dark: #2563eb;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #26324a;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --hover: #1e293b;
}
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .sys-btn:hover,
:root[data-theme="dark"] .nav-toggle:hover,
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .ql-item:hover,
:root[data-theme="dark"] .back-to-top:hover { background: var(--hover); }
:root[data-theme="dark"] tr:hover td { background: var(--hover); }
:root[data-theme="dark"] .chip { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .badge-pending, :root[data-theme="dark"] .badge-pending { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .stat-tile.accent-amber { background: #2a2413; }
:root[data-theme="dark"] .attn-card { background: #2a2413; border-color: #57451c; }
:root[data-theme="dark"] .attn-card .attn-txt, :root[data-theme="dark"] .attn-ic { color: var(--text); }
:root[data-theme="dark"] .btn-danger { background: var(--surface); }
:root[data-theme="dark"] .btn-danger:hover { background: #3a1e1e; }
:root[data-theme="dark"] .tool-viewer iframe { background: #fff; } /* framed 3rd-party app keeps its own bg */
:root[data-theme="dark"] .sbar-track { background: #0b1120; }
:root[data-theme="dark"] .toast { background: #1e293b; }

/* Job detail — POS code + CWPAY payment link slot. */
.pos-code-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.pos-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px;
  font-weight: 700; letter-spacing: .06em; background: var(--hover); color: var(--text);
  padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--border); }
.pos-code-cta { text-align: right; }
.cwpay-link-box { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--hover); }
.cwpay-url { font-size: 13px; word-break: break-all; }
.cwpay-url a { color: var(--accent); }
@media (max-width: 1080px) { .pos-code-cta { text-align: left; } }

/* Reports hbars with money values need a wider, non-wrapping value column so
   amounts like "JMD $43,470.00" aren't clipped at the card's right edge. */
.sbar.sbar-wide { grid-template-columns: minmax(80px, 150px) 1fr auto; }
.sbar.sbar-wide .sbar-n { white-space: nowrap; padding-left: 10px; font-variant-numeric: tabular-nums; }

/* Documents & Files — category tabs. */
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-tab { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 600; }
.cat-tab:hover { background: var(--hover); }
.cat-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Bulk-select bar + row checkboxes (Customers list) */
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--accent-l, #eff6ff); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.bulk-bar .bulk-count { font-size: 13px; color: var(--text); margin-right: 4px; }
th.chk, td.chk { width: 34px; text-align: center; padding-left: 10px; padding-right: 4px; }
td.chk input[type="checkbox"], th.chk input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.needs-customer-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
:root[data-theme="dark"] .needs-customer-bar { background: #3a2f10; border-color: #6b571c; color: #fde68a; }

/* ===================== PAGE HEAD (shared) ===================== */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h2 { margin: 0; }
.input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }

/* ===================== NOTES ===================== */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.note-card { text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; background: var(--surface); color: var(--text); position: relative; min-height: 120px;
  display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, transform .1s; font: inherit; }
.note-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }
.note-pin { position: absolute; top: 8px; right: 10px; font-size: 13px; }
.note-card-title { font-weight: 700; font-size: 15px; padding-right: 18px; }
.note-card-body { font-size: 13px; color: var(--text-muted); flex: 1; white-space: pre-wrap; overflow: hidden; }
.note-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); }
.note-yellow { background: #fef9c3; border-color: #fde68a; color: #422006; }
.note-green  { background: #dcfce7; border-color: #bbf7d0; color: #052e16; }
.note-blue   { background: #dbeafe; border-color: #bfdbfe; color: #082f49; }
.note-pink   { background: #fce7f3; border-color: #fbcfe8; color: #500724; }
.note-purple { background: #ede9fe; border-color: #ddd6fe; color: #2e1065; }
.note-orange { background: #ffedd5; border-color: #fed7aa; color: #431407; }
.note-yellow .note-card-body, .note-green .note-card-body, .note-blue .note-card-body,
.note-pink .note-card-body, .note-purple .note-card-body, .note-orange .note-card-body,
.note-yellow .note-card-foot, .note-green .note-card-foot, .note-blue .note-card-foot,
.note-pink .note-card-foot, .note-purple .note-card-foot, .note-orange .note-card-foot { color: inherit; opacity: .8; }

.note-editor .note-title-input { flex: 1; font-size: 16px; font-weight: 700; border: none; background: transparent; color: var(--text); outline: none; }
.note-status { font-size: 12px; color: var(--text-muted); min-width: 64px; text-align: right; }
.note-color-select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.note-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); align-items: center; }
.note-toolbar button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 13px; min-width: 32px; }
.note-toolbar button:hover { background: var(--bg); }
.note-toolbar .sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
/* Notepad editing area styled like a real document page: a white sheet with
   letter-page proportions and margins, centered on a muted canvas. */
.note-canvas { flex: 1; overflow-y: auto; background: var(--bg); padding: 28px 16px; }
.note-body { max-width: 816px; margin: 0 auto; min-height: 1056px; background: #ffffff; color: #000000;
  box-shadow: 0 3px 18px rgba(15,23,42,.18); border-radius: 3px; padding: 76px 84px; line-height: 1.7; outline: none; }
.note-body:empty::before { content: 'Start typing…'; color: #94a3b8; }
.note-body h1 { font-size: 26px; margin: 14px 0 8px; }
.note-body h2 { font-size: 21px; margin: 12px 0 6px; }
.note-body h3 { font-size: 17px; margin: 10px 0 6px; }
.note-body ul, .note-body ol { padding-left: 24px; }
.op-todo { display: flex; align-items: flex-start; gap: 4px; }
.op-todo.done .op-txt { text-decoration: line-through; opacity: .6; }
.op-box { cursor: pointer; user-select: none; font-size: 16px; }

/* ===================== WHATSAPP INBOX ===================== */
.wa-wrap { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: calc(100vh - 210px); min-height: 440px; background: var(--surface); }
.wa-threads { width: 320px; border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; }
.wa-thread { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 12px 14px; cursor: pointer; font: inherit; }
.wa-thread:hover { background: var(--bg); }
.wa-thread.active { background: var(--bg); box-shadow: inset 3px 0 0 var(--primary, #16a34a); }
.wa-thread-top { display: flex; justify-content: space-between; gap: 8px; }
.wa-thread-name { font-weight: 600; font-size: 14px; }
.wa-thread-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.wa-thread-prev { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.wa-badge { background: #16a34a; color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; min-width: 18px; text-align: center; }
.wa-convo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wa-placeholder { margin: auto; }
.wa-convo-head { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; background: var(--surface); }
.wa-messages { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.wa-msg { display: flex; }
.wa-msg.out { justify-content: flex-end; }
.wa-bubble { max-width: 74%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.wa-msg.in .wa-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.wa-msg.out .wa-bubble { background: #dcf8c6; color: #0b2e13; border-bottom-right-radius: 3px; }
.wa-meta { font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; }
.wa-caption { margin-top: 4px; }
.wa-doc { font-weight: 600; text-decoration: none; color: inherit; }
.wa-doc:hover { text-decoration: underline; }
.wa-attach-order { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); cursor: pointer; }
.wa-attach-order:hover:not(:disabled) { background: var(--accent); color: #fff; }
.wa-attach-order:disabled { opacity: .7; cursor: default; }
.wa-compose { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.wa-compose #wa-text { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; resize: none; max-height: 140px; line-height: 1.4; }
.wa-attach { cursor: pointer; font-size: 20px; padding: 0 4px; }
.wa-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; background: var(--surface); }
.wa-chip { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 5px 11px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface2, #f8fafc); color: var(--text); cursor: pointer; white-space: nowrap; }
.wa-chip:hover { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
:root[data-theme="dark"] .wa-msg.out .wa-bubble { background: #005c4b; color: #e9edef; }
.wa-convo-head { display: flex; align-items: center; gap: 8px; }
.wa-back { display: none; flex: 0 0 auto; width: 30px; height: 30px; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; }
@media (max-width: 720px) {
  .wa-wrap { flex-direction: column; height: calc(100vh - 190px); min-height: 420px; }
  .wa-threads { width: 100%; border-right: 0; }
  .wa-convo { display: none; }            /* master/detail: list first */
  .wa-wrap.wa-active-convo .wa-threads { display: none; }
  .wa-wrap.wa-active-convo .wa-convo { display: flex; }
  .wa-back { display: inline-flex; }      /* back-to-chats appears on phones */
}

/* Full-screen tool/embed viewer bars (NOT the note editor, which has its own
   single-row icon treatment): let long button rows wrap on small screens
   instead of overflowing off the edge. */
@media (max-width: 640px) {
  .tool-viewer-bar:not(.note-bar) { gap: 6px; padding: 8px 10px; flex-wrap: nowrap; }
  .tool-viewer-bar:not(.note-bar) .btn { padding: 6px 9px; font-size: 12px; }
  /* Icon-only buttons on phones so the title has room and nothing overlaps. */
  .tvbar .tvb-txt { display: none; }
  .tvbar .tvb-hint { display: none; }
  .tvbar .tvb-title { text-align: left; }
}

/* ===================== NOTE EDITOR v54.1 (single-row toolbar + mobile) ===================== */
/* Header: compact icon buttons so it stays on one row down to phone width. */
.note-bar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 10px; }
.note-bar::-webkit-scrollbar { height: 0; }
.note-hbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; }
.note-hbtn:hover { background: var(--bg); }
.note-hbtn.danger { color: var(--danger); border-color: var(--danger); }
.note-bar .note-title-input { flex: 1 1 auto; min-width: 60px; }
.note-bar .note-color-select { flex: 0 0 auto; width: 58px; padding: 6px 4px; }
.note-bar .note-status { flex: 0 0 auto; min-width: 0; }

/* Toolbar: ONE horizontal line, grouped by separators, scrolls sideways on
   narrow screens instead of stacking into many rows. */
.note-toolbar { flex-direction: row; align-items: center; gap: 4px; padding: 6px 10px; overflow: hidden; }
.note-tb-row { display: flex; gap: 3px; flex-wrap: nowrap; align-items: center; overflow-x: auto; width: 100%; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.note-tb-row::-webkit-scrollbar { height: 4px; }
.note-tb-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.note-tb-row > button, .note-tb-row > label { flex: 0 0 auto; }
.note-tb-row select[data-block] { flex: 0 0 auto; width: auto; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.note-color-pick { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; cursor: pointer; font-weight: 700; }
.note-color-pick input[type=color] { width: 20px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; }
.note-foot { padding: 6px 16px; border-top: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text-muted); text-align: right; }
.note-menu { position: relative; }
/* position:fixed (coords set in JS) so the dropdown ISN'T clipped by the
   header bar's overflow-x:auto (which would make it invisible/unclickable). */
.note-menu-panel { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 180px; overflow: hidden; }
.note-menu-panel button { display: block; width: 100%; text-align: left; border: none; background: var(--surface); color: var(--text); padding: 10px 14px; cursor: pointer; font-size: 13px; }
.note-menu-panel button:hover { background: var(--bg); }
.note-body blockquote { border-left: 3px solid #cbd5e1; margin: 8px 0; padding-left: 14px; color: #64748b; }
.note-body code { background: #f1f5f9; color: #0f172a; padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 90%; }
.note-body hr { border: none; border-top: 1px solid #e2e8f0; margin: 14px 0; }
.note-body a { color: #2563eb; }
@media (max-width: 640px) {
  .note-bar { padding: 8px; }
  .note-title-input { font-size: 15px; }
  .note-toolbar { padding: 6px 8px; }
  .note-tb-row > button { min-width: 30px; padding: 5px 7px; }
  .note-foot { padding: 6px 10px; }
  .note-canvas { padding: 0; }
  .note-body { max-width: none; min-height: 100%; margin: 0; border-radius: 0; box-shadow: none; padding: 20px 18px; }
}

/* ===================== INVOICING ===================== */
.inv-summary { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-summary .stat-tile { flex: 1; min-width: 160px; }
.inv-summary .stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.inv-editor .inv-form { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg); }
.inv-editor .inv-form .card { max-width: 900px; margin: 0 auto 16px; }
.inv-items { width: 100%; border-collapse: collapse; }
.inv-items th { font-size: 11px; text-transform: uppercase; color: var(--text-muted); text-align: left; padding: 6px 8px; }
.inv-items td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.inv-items input[type=text], .inv-items input[type=number] { width: 100%; }
.inv-items input[data-k=desc] { min-width: 160px; }
.inv-totals { max-width: 320px; margin-left: auto; margin-top: 10px; }
.inv-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.inv-totals .inv-grand { border-top: 2px solid var(--text); font-weight: 800; font-size: 17px; margin-top: 4px; padding-top: 8px; }
.inv-totals-card .form-grid { max-width: 520px; }

/* Invoice document view — a page sheet like the Notepad */
.inv-view-canvas { flex: 1; overflow-y: auto; background: var(--bg); padding: 28px 16px; }
.inv-doc { max-width: 816px; margin: 0 auto; background: #fff; color: #1f2328; box-shadow: 0 3px 18px rgba(15,23,42,.18);
  border-radius: 3px; padding: 56px 64px; min-height: 60vh; line-height: 1.5; }
.inv-doc-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.inv-biz { font-size: 20px; font-weight: 800; }
.inv-doc .inv-h1 { font-size: 26px; font-weight: 800; letter-spacing: 2px; color: #334155; }
.inv-billto { margin: 12px 0 6px; }
.inv-doc .inv-lbl { font-size: 11px; text-transform: uppercase; color: #64748b; letter-spacing: .05em; }
.inv-doc-items { width: 100%; border-collapse: collapse; margin: 16px 0; }
.inv-doc-items th { text-align: left; font-size: 11px; text-transform: uppercase; color: #64748b; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; }
.inv-doc-items td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; font-size: 14px; color: #1f2328; }
.inv-doc-totals { margin-left: auto; width: 300px; margin-top: 8px; }
.inv-doc-totals > div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.inv-doc-grand { border-top: 2px solid #334155; font-weight: 800; font-size: 16px; margin-top: 4px; padding-top: 8px; }
.inv-doc-notes { margin-top: 22px; color: #475569; font-size: 13px; border-top: 1px solid #e2e8f0; padding-top: 12px; white-space: pre-wrap; }
@media (max-width: 640px) {
  .inv-view-canvas { padding: 0; }
  .inv-doc { max-width: none; border-radius: 0; box-shadow: none; padding: 24px 18px; }
  .inv-doc-top { flex-direction: column; }
  .inv-doc-totals { width: 100%; }
  .inv-editor .inv-form .card { padding: 14px; }
}

/* ===================== CALENDAR ===================== */
.modal-card { background: var(--surface); border-radius: var(--radius); padding: 22px; width: 520px; max-width: 94vw; max-height: 90vh; overflow-y: auto; color: var(--text); }
.cal-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg); border-bottom: 1px solid var(--border); }
.cal-head > div { padding: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); text-align: center; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 104px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px; cursor: pointer; vertical-align: top; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.cal-empty { background: var(--bg); cursor: default; }
.cal-cell.today { background: rgba(37,99,235,.06); }
.cal-cell.today .cal-date { background: var(--accent); color: #fff; }
.cal-date { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.cal-appt { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; background: rgba(37,99,235,.12); color: var(--text);
  font-size: 11px; padding: 3px 5px; margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-appt:hover { background: rgba(37,99,235,.22); }
.cal-appt.cancelled { text-decoration: line-through; opacity: .55; }
.cal-appt .cal-time { font-weight: 700; color: var(--accent); }
@media (max-width: 720px) {
  .cal-cell { min-height: 72px; font-size: 12px; padding: 2px; }
  .cal-appt { font-size: 10px; }
  #cal-label { min-width: 110px !important; font-size: 13px; }
}

/* ===================== NOTEPAD fonts + images (v62) ===================== */
.note-body img { max-width: 100%; height: auto; border-radius: 4px; }
.note-tb-row select[data-font] { flex: 0 0 auto; width: auto; max-width: 130px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.note-tb-row select[data-size] { flex: 0 0 auto; width: auto; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.note-tb-row [data-fontup] { font-weight: 700; }

/* ── Settings tabs (v120) ─────────────────────────────────────────────── */
.set-head{margin-bottom:12px}
.set-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:4px;background:var(--surface2);border:1px solid var(--border);border-radius:12px}
.set-tab{appearance:none;border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.set-tab:hover{color:var(--text);background:rgba(127,127,127,.08)}
.set-tab.on{background:var(--surface,#fff);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.set-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;font-weight:400}
.set-actions{display:flex;justify-content:flex-end;margin-top:8px}
.set-cron{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.set-cron-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-mono{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
@media (max-width:640px){
  .set-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .set-tab{padding:8px 11px}
}

/* ── Connected Systems: collapsible cards (v120) ──────────────────────── */
.int-head{cursor:pointer;user-select:none}
.int-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.int-chev{font-size:13px;color:var(--text-muted);width:16px;text-align:center}
.int-card.int-off:not(.int-open){padding-top:12px;padding-bottom:12px;opacity:.85}
.int-card.int-off:not(.int-open) .int-head{margin-bottom:0;border-bottom:0;padding-bottom:0}
.int-card.int-off:not(.int-open) .int-blurb{display:none}
.int-card.int-off:not(.int-open) h3{font-size:15px}
.int-divider{display:flex;align-items:baseline;gap:10px;margin:22px 2px 10px;color:var(--text-muted)}
.int-divider span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.int-divider small{font-size:12px}
.int-divider::after{content:'';flex:1;border-top:1px solid var(--border);transform:translateY(-3px)}

/* ── Storage page (v121) ─────────────────────────────────────────────── */
.stg-help{color:var(--text-muted);font-size:13px;margin-bottom:10px}
.stg-presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:12px;color:var(--text-muted)}
.chip-btn{appearance:none;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer}
.chip-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Settings: read-only notice, cron status, policy (v122) ───────────── */
.set-ro{display:flex;gap:10px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;color:#78350f;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:13px;line-height:1.5}
.set-ro a{color:inherit;text-decoration:underline}
.set-cron-sum{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px}
.set-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#94a3b8}
.set-dot.active{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.set-dot.warn{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.set-badge{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:auto;white-space:nowrap}
.set-badge.active{background:#d1fae5;color:#047857}
.set-badge.warn{background:#fef3c7;color:#92400e}
.set-badge.stopped{background:#fee2e2;color:#b91c1c}
.set-badge.idle{background:rgba(127,127,127,.12);color:var(--text-muted)}
.set-cron-cfg{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.set-cron-field label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:3px;font-weight:600}
.set-cron-field:first-child .set-mono{width:130px}
.set-cron-foot{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.set-howto{margin-top:10px;font-size:13px}.set-howto summary{cursor:pointer;font-weight:600}
.set-howto ol{margin:8px 0 0;padding-left:20px;line-height:1.7;color:var(--text-muted)}
.set-pol-preview{margin:4px 0 8px}
.set-pol-card{white-space:pre-wrap;font-size:13px;line-height:1.55;background:var(--surface2);border:1px dashed var(--border);border-radius:10px;padding:12px 14px}
@media (max-width:640px){.set-badge{margin-left:0}.set-cron-field,.set-cron-field:first-child .set-mono{width:100%}}

/* ── Email inbox (v123) ───────────────────────────────────────────────── */
.em-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.em-head-act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.em-muted{color:var(--text-muted);font-size:12.5px}
.em-wrap{display:grid;grid-template-columns:340px 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface,#fff);height:calc(100vh - 200px);min-height:480px}
.em-list{display:flex;flex-direction:column;border-right:1px solid var(--border);min-width:0;min-height:0}
.em-tools{padding:10px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.em-tools input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text)}
.em-filters{display:flex;gap:4px}
.em-filters button{flex:1;appearance:none;border:1px solid var(--border);background:transparent;color:var(--text-muted);font:inherit;font-size:12px;font-weight:600;padding:5px 4px;border-radius:7px;cursor:pointer}
.em-filters button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.em-filters button span:not(:empty)::before{content:'· '}
.em-threads{overflow-y:auto;flex:1;min-height:0}
.em-item{display:flex;gap:10px;width:100%;text-align:left;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font:inherit;cursor:pointer}
.em-item:hover{background:rgba(127,127,127,.06)}
.em-item.active{background:rgba(37,99,235,.08);box-shadow:inset 3px 0 0 var(--accent)}
.em-av{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-muted)}
.em-it-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.em-it-top{display:flex;gap:6px;align-items:baseline}
.em-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.em-when{font-size:11.5px;color:var(--text-muted);flex-shrink:0}
.em-subj,.em-prev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.em-prev{color:var(--text-muted)}
.em-item.unread .em-who,.em-item.unread .em-subj{font-weight:700}
.em-item.unread .em-av{background:var(--accent);color:#fff;border-color:var(--accent)}
.em-tag{font-size:10px;font-weight:700;background:#dbeafe;color:#1d4ed8;border-radius:4px;padding:0 4px;margin-right:5px;vertical-align:1px}
.em-you{font-weight:600}
.em-empty{padding:28px 16px;text-align:center;color:var(--text-muted);font-size:13.5px}
.em-pick{margin:auto}
.em-view{display:flex;flex-direction:column;min-width:0;min-height:0}
.em-vhead{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.em-back{display:none}
.em-vtitle{flex:1;min-width:0}
.em-vsubj{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-vact{display:flex;gap:6px;flex-wrap:wrap}
.em-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0}
.em-msg{border:1px solid var(--border);border-radius:10px;padding:10px 14px;background:var(--surface,#fff);max-width:92%}
.em-msg.out{align-self:flex-end;background:rgba(37,99,235,.05);border-color:rgba(37,99,235,.25)}
.em-mhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px;font-size:13px}
.em-text{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.55}
.em-quoted{margin-top:6px}.em-quoted summary{cursor:pointer;color:var(--text-muted);font-size:12px}
.em-quoted .em-text{color:var(--text-muted);border-left:3px solid var(--border);padding-left:10px;margin-top:6px;font-size:13px}
.em-atts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.em-att{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:12.5px;text-decoration:none;color:var(--text);background:var(--surface2)}
.em-att.off{opacity:.7}
.em-reply{border-top:1px solid var(--border);padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.em-reply textarea,.em-compose textarea{width:100%;box-sizing:border-box;resize:vertical;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font:inherit;font-size:14px}
.em-qr{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.em-ract{display:flex;align-items:center;justify-content:space-between;gap:10px}
.em-compose{padding:14px;overflow-y:auto}
.em-linkbox{margin:8px 14px 0;border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface2)}
.em-linkbox input{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--border);border-radius:8px}
.em-cres{display:flex;flex-direction:column;max-height:220px;overflow-y:auto;margin-top:6px}
.em-cres button{text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;cursor:pointer;font:inherit;color:var(--text)}
.em-cres button:hover{background:rgba(127,127,127,.1)}
.nav-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;line-height:1.5}
.qr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.qr-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.qr-main{flex:1;min-width:0}.qr-body{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.qr-act{display:flex;gap:6px;flex-shrink:0}
.qr-form{border:1px dashed var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
@media (max-width:820px){
  .em-wrap{grid-template-columns:1fr;height:calc(100vh - 170px)}
  .em-view{display:none}.em-wrap.show-view .em-view{display:flex}.em-wrap.show-view .em-list{display:none}
  .em-back{display:inline-flex}
  .em-msg{max-width:100%}
}
.form-row label.set-chk,.set-chk{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--text);cursor:pointer;margin:0;font-size:13px}
.set-chk input{width:auto;margin:0;flex-shrink:0}
/* Settings → Business (v125) */
.biz-h{margin:18px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.biz-h:first-child{margin-top:0}
@media (max-width:640px){.biz-x{grid-template-columns:1fr 1fr!important}.biz-x .bx-v{grid-column:1/-1;grid-row:2}}
/* Portal address (v125) */
.pa-now{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.pa-now code{font-size:13px}
.pa-warn{border:1px solid #f59e0b;background:rgba(245,158,11,.08);border-radius:10px;padding:12px 14px;margin:10px 0}
.pa-item{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.pa-item .pa-val{display:flex;gap:6px;margin-top:6px}
.pa-item .pa-val input,.pa-item .pa-val textarea{flex:1;font-family:ui-monospace,monospace;font-size:12px}
.pa-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid #f59e0b;background:rgba(245,158,11,.1);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}
/* Invoice line picker (v126) */
.inv-pick{position:fixed;z-index:3000;max-height:320px;overflow:auto;background:var(--surface,#fff);color:var(--text,#1e293b);border:1px solid var(--border,#e2e8f0);border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.28);padding:4px 0}
.inv-pick-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted,#64748b);padding:8px 12px 4px}
.inv-pick-o{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:7px 12px;cursor:pointer;font-size:14px}
.inv-pick-o:hover,.inv-pick-o.on{background:rgba(37,99,235,.12)}
.inv-pick-o b{white-space:nowrap;font-weight:600}
.inv-pick-o.dim{opacity:.55}
.inv-pick-m{font-size:12px;color:var(--text-muted,#64748b)}
.inv-pick-empty{padding:10px 12px;font-size:13px;color:var(--text-muted,#64748b)}
.inv-jobs-strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px dashed var(--border,#e2e8f0);border-radius:8px;padding:8px 10px;margin:0 0 10px;font-size:13px}