/* CW Client Success — internal prototype styles */
:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --ink: #16212e;
  --muted: #5d6b7d;
  --faint: #8d99a8;
  --line: #e2e7ee;
  --line-soft: #edf0f5;

  --green: #15803d;     --green-bg: #e4f5ea;  --green-line: #b9e4c8;
  --amber: #b45309;     --amber-bg: #fdf0d9;  --amber-line: #f3d9a4;
  --red: #c02626;       --red-bg: #fce8e8;    --red-line: #f1bcbc;
  --blue: #2458c5;      --blue-bg: #e8effc;   --blue-line: #c2d4f4;
  --grey-bg: #eef1f5;

  --sidebar: #111a28;
  --sidebar-ink: #aeb9c9;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 33, 46, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
/* clients list "Last contact": a week or more without contact reads as stale */
.lc-stale { color: var(--red); font-weight: 700; }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 222px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; flex-direction: column; gap: 9px; align-items: center; padding: 22px 16px 16px; }
.brand-logo { display: block; width: 158px; height: auto; }
.brand-sub {
  font-size: 9.5px; font-weight: 700; color: #6b7a8e;
  text-transform: uppercase; letter-spacing: .22em;
}

.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-ink); font-weight: 600; font-size: 13px;
  padding: 9px 10px; border-radius: 8px;
}
.nav a svg { width: 16px; height: 16px; fill: currentColor; opacity: .75; flex: none; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #e7ecf3; }
.nav a.active { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a.active svg { opacity: 1; }
.nav .count {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #d7dee8;
  border-radius: 99px; padding: 1px 7px; min-width: 16px; text-align: center;
}
.nav .count.warn { background: #b4530933; color: #f6c98c; }
.nav .count:empty { display: none; }

.sidebar-foot { padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.foot-note { font-size: 10.5px; color: #5d6b7d; margin-top: 8px; line-height: 1.45; }

/* shared-database sync indicator (cloud mode only) */
.sync-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #8b98a9; line-height: 1.4; }
.sync-status[hidden] { display: none; }
.sync-status .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #5d6b7d; flex: none; }
.sync-status.synced .sync-dot { background: #3ec57a; }
.sync-status.saving .sync-dot { background: #e3b341; animation: sync-pulse 1.1s infinite; }
.sync-status.retrying .sync-dot, .sync-status.error .sync-dot { background: #e36868; animation: sync-pulse 1.1s infinite; }
.sync-status.offline .sync-dot { background: #e36868; }
.sync-status.retrying, .sync-status.error, .sync-status.offline { color: #e8a9a9; }
@keyframes sync-pulse { 50% { opacity: .35; } }

.main { min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px 0;
}
.topbar h1 { font-size: 19px; font-weight: 750; letter-spacing: -.2px; }
.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.topbar-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.topbar-name { font-weight: 650; color: var(--ink); }
.topbar-role { font-size: 11px; color: var(--muted); }

/* clickable profile picture in the top bar — shows the photo, or initials as a
   fallback, with a camera hint on hover (and a small remove badge once set) */
.topbar-avatar { position: relative; width: 36px; height: 36px; flex: none; }
.topbar-avatar-btn {
  width: 100%; height: 100%; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line); background: #3b4d63 center/cover no-repeat;
  color: #fff; font-weight: 700; font-size: 12.5px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s;
}
.topbar-avatar-btn:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.topbar-avatar.has-photo .topbar-avatar-initials { display: none; }
.topbar-avatar-cam {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 28, 38, .5); opacity: 0; transition: opacity .15s; pointer-events: none;
}
.topbar-avatar-btn:hover .topbar-avatar-cam, .topbar-avatar-btn:focus-visible .topbar-avatar-cam { opacity: 1; }
.topbar-avatar-cam svg { width: 16px; height: 16px; fill: #fff; }

/* ---------- profile-picture crop popup ---------- */
.avatar-modal {
  position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;   /* short / landscape phones: let a tall card scroll into reach */
  background: rgba(12, 18, 27, .55);
}
.avatar-modal[hidden] { display: none; }
.avatar-modal-card {
  width: 100%; max-width: 340px; margin: auto; background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(8, 14, 22, .35);
  padding: 20px 20px 16px; text-align: center;
}
.avatar-modal-card h3 { font-size: 16px; font-weight: 750; margin: 0 0 14px; }

/* square crop viewport with a circular mask (the avatar renders round). width caps
   to the card on small screens; aspect-ratio keeps the height in step so the mask —
   and the crop maths, which read the live size — stay true on a phone. */
.cropper-stage {
  position: relative; width: 260px; aspect-ratio: 1 / 1; max-width: 100%;
  margin: 0 auto; border-radius: 10px; overflow: hidden;
  background: #1d2733; cursor: grab; touch-action: none; user-select: none;
}
.cropper-stage:active { cursor: grabbing; }
.cropper-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.cropper-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 22, 31, .55), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.cropper-empty {
  width: 260px; height: 200px; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--line); border-radius: 10px; color: var(--faint);
}
/* an explicit display: above beats the UA [hidden] rule, so re-assert it */
.cropper-stage[hidden], .cropper-empty[hidden], .cropper-zoom[hidden], .cropper-hint[hidden] { display: none; }
.cropper-empty svg { width: 34px; height: 34px; fill: currentColor; opacity: .7; }
.cropper-empty p { margin: 0; font-size: 13px; }
.cropper-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 6px 0; }
.cropper-zoom input[type="range"] { flex: 1; accent-color: var(--blue); }
.cropper-zoom-ico { color: var(--faint); font-weight: 700; width: 12px; }
.cropper-hint { margin: 8px 0 0; font-size: 11px; color: var(--faint); }
.avatar-modal-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.avatar-modal-choose { width: 100%; justify-content: center; }
.avatar-modal-row { display: flex; align-items: center; gap: 8px; }
.avatar-modal-spacer { flex: 1; }
/* tiny phones: trim the modal chrome so the square crop box keeps as much size as it can */
@media (max-width: 380px) {
  .avatar-modal { padding: 12px; }
  .avatar-modal-card { padding: 16px 16px 14px; }
}
/* ---- top-bar Quick Log trigger ----
   a compact pill in the top bar so logging an interaction or adding a task is one
   click from any view, not a walk into a client profile first. */
.quicklog-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--blue);
  background: var(--blue-bg); border: 1px solid var(--blue-line);
  border-radius: 999px; padding: 6px 13px 6px 10px; cursor: pointer;
  transition: box-shadow .12s, background .12s;
}
.quicklog-btn:hover { background: #dde8fb; box-shadow: 0 0 0 3px rgba(36, 88, 197, .10); }
.quicklog-btn svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 640px) { .quicklog-btn span { display: none; } .quicklog-btn { padding: 6px 9px; } }

/* ---- Quick Log overlay (centered modal, shared interaction + task forms) ---- */
.ql-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 18, 27, .5); }
.ql-modal {
  /* anchored to the same spot and width as the quick-create task modal
     (js/tasks.js), so flipping between its tabs never moves the card */
  position: fixed; z-index: 61; top: 64px; left: 50%; transform: translateX(-50%);
  width: 500px; max-width: 92vw; max-height: calc(100vh - 88px);
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(8, 14, 22, .34);
}
.ql-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft);
}
.ql-tabs { display: inline-flex; gap: 4px; background: var(--line-soft); border-radius: 9px; padding: 3px; }
.ql-tab {
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted);
  background: none; border: none; border-radius: 7px; padding: 6px 13px; cursor: pointer;
}
.ql-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 33, 46, .12); }
.ql-x { font-size: 16px; line-height: 1; color: var(--muted); }
.ql-body { padding: 16px; overflow-y: auto; }
.ql-form { display: flex; flex-direction: column; gap: 14px; }
.ql-field { display: block; }
.ql-lbl { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.ql-field .select { width: 100%; }
.ql-ta { width: 100%; resize: vertical; }
.ql-int-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ql-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.ql-actions .btn.primary { min-width: 96px; justify-content: center; }
@media (max-width: 380px) { .ql-modal { border-radius: 12px; } .ql-body { padding: 14px; } }

/* ---- Export data modal (sidebar "Export data" button) ---- */
.foot-btn.ex-open { border-color: var(--blue); }        /* the button glows while its modal is open */
.ex-modal { top: 48px; width: 920px; max-width: 94vw; max-height: calc(100vh - 76px); overflow: hidden; }
.ex-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--line-soft); flex: none;
}
.ex-head h3 { font-size: 16px; font-weight: 750; }
.ex-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }

.ex-presets { display: flex; gap: 8px; padding: 14px 20px 0; flex: none; }
.ex-preset {
  flex: 1; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
}
.ex-preset:hover { border-color: var(--blue-line); }
.ex-preset.on { background: var(--blue-bg); border-color: var(--blue-line); }
.ex-preset-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ex-preset.on .ex-preset-title { color: var(--blue); }
.ex-preset-meta { font-size: 11px; color: var(--faint); margin-top: 1px; }

.ex-body { display: grid; grid-template-columns: 390px 1fr; flex: 1; min-height: 0; overflow: hidden; margin-top: 14px; }
.ex-config { padding: 2px 20px 18px; overflow-y: auto; border-right: 1px solid var(--line-soft); }
.ex-sec { font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 16px 0 7px; }
.ex-config > .ex-sec:first-child { margin-top: 0; }
.ex-sec-note { font-weight: 400; color: var(--faint); }

.ex-datasets { display: flex; flex-direction: column; gap: 5px; }
.ex-ds {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.ex-ds:hover { border-color: var(--blue-line); }
.ex-ds.on { background: #f6f9ff; border-color: var(--blue-line); }
.ex-check {
  width: 16px; height: 16px; border-radius: 4.5px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #c8d2de; background: var(--surface);
}
.ex-ds.on .ex-check { background: var(--blue); border-color: var(--blue); }
.ex-check svg { width: 11px; height: 11px; fill: #fff; }
.ex-ds-text { min-width: 0; flex: 1; }
.ex-ds-label { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.ex-ds-hint { display: block; font-size: 11px; color: var(--faint); line-height: 1.45; }
.ex-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--grey-bg); border-radius: 9px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}

.ex-range { display: flex; align-items: center; gap: 8px; }
.ex-range .select { flex: 1; min-width: 0; }
.ex-range-arrow { color: var(--faint); flex: none; }

.ex-privacy {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit;
  margin-top: 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #f8fafc; cursor: pointer;
}
.ex-switch { width: 32px; height: 19px; border-radius: 99px; flex: none; margin-top: 1px; position: relative; transition: background .15s; background: #c8d2de; }
.ex-switch.on { background: var(--blue); }
.ex-knob {
  position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(22, 33, 46, .25); transition: left .15s;
}
.ex-switch.on .ex-knob { left: 15.5px; }
.ex-fmt-note { font-size: 11px; color: var(--faint); margin-top: 7px; line-height: 1.5; }

.ex-preview { background: #f8fafc; padding: 2px 20px 18px; overflow-y: auto; min-width: 0; }
.ex-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ex-preview-head .ex-sec { margin: 0; }
.ex-cap { font-size: 11px; color: var(--faint); }
.ex-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.ex-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600;
  cursor: pointer; border-radius: 7px; padding: 4px 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.ex-chip.on { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue); }
.ex-table-card { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ex-table-scroll { overflow-x: auto; }
.ex-table-card table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.ex-table-card th {
  text-align: left; font-size: 10px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.ex-table-card td {
  padding: 6px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap;
  color: var(--ink); font-variant-numeric: tabular-nums;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.ex-table-foot { padding: 7px 12px; font-size: 11px; color: var(--faint); background: #fbfcfe; }
.ex-empty {
  border: 1.5px dashed var(--line); border-radius: 9px; padding: 36px 20px;
  text-align: center; color: var(--faint); font-size: 12.5px;
}

.ex-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--line-soft); flex: none; background: var(--surface);
}
.ex-foot-info { min-width: 0; }
.ex-summary { font-size: 12px; color: var(--muted); }
.ex-history { font-size: 11px; color: var(--faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-foot-btns { display: flex; gap: 8px; flex: none; }
.ex-run { min-width: 128px; justify-content: center; gap: 7px; padding: 8px 18px; }
.btn.primary.ex-run:disabled { background: #a8b6cc; border-color: #a8b6cc; cursor: default; }
.ex-spin {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: ex-spin .7s linear infinite;
}
@keyframes ex-spin { to { transform: rotate(360deg); } }

.ex-done { padding: 44px 32px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow-y: auto; }
.ex-done-check {
  width: 52px; height: 52px; border-radius: 50%; color: var(--green);
  background: var(--green-bg); border: 1px solid var(--green-line);
  display: flex; align-items: center; justify-content: center;
}
.ex-done-check svg { width: 26px; height: 26px; fill: currentColor; }
.ex-done-title { font-size: 16px; font-weight: 750; margin-top: 14px; }
.ex-done-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ex-file {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; max-width: 100%; min-width: 340px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; text-align: left;
}
.ex-file-badge {
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  background: var(--blue-bg); border: 1px solid var(--blue-line); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.ex-file-info { min-width: 0; }
.ex-file-name {
  font-weight: 700; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-file-meta { font-size: 11.5px; color: var(--faint); }
.ex-done-actions { display: flex; gap: 8px; margin-top: 24px; }

@media (max-width: 860px) {
  .ex-modal { top: 24px; max-height: calc(100vh - 40px); }
  .ex-body { display: block; overflow-y: auto; }
  .ex-config { border-right: 0; overflow-y: visible; }
  .ex-preview { overflow-y: visible; }
  .ex-presets { flex-direction: column; }
  .ex-file { min-width: 0; width: 100%; }
}

.view { padding: 16px 26px 40px; max-width: 1560px; }

/* the client profile has no page title (the name lives in the card below), so
   the topbar's left side is empty while the user block on the right sets its
   height. Float just the "← Clients" link up into that empty band — using
   position:relative so it doesn't drag the card with it — and cancel the row
   of height it would otherwise reserve, so the card stays tucked just under
   the topbar instead of dropping below an empty line. Keep the empty heading
   in the layout: it's the left flex child that holds the user block on the
   right (space-between would otherwise slide it across). */
body[data-view="client"] .topbar { padding-top: 14px; padding-bottom: 0; }
/* take the back link out of flow so the card tucks right under the topbar, and
   sit the link up in the empty left band, vertically centred on the user block
   on the right (rather than jammed to the very top edge). */
body[data-view="client"] .view { padding-top: 16px; position: relative; }
body[data-view="client"] .back { position: absolute; top: -24px; left: 26px; margin: 0; }
@media (max-width: 760px) {
  body[data-view="client"] .view { padding-top: 10px; }
  body[data-view="client"] .back { position: static; top: 0; left: 0; margin: 0 0 8px; }
}

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
}
.card-head h2 { font-size: 13.5px; font-weight: 700; }
.card-head .sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.card-body { padding: 14px 16px; }
.card-body.flush { padding: 0; }
/* lightweight "+ Add" action in a card header; reveals a collapsed add-form */
.add-link {
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--blue);
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; margin: -4px -4px -4px 0; border-radius: 6px;
  transition: background .12s;
}
.add-link:hover { background: var(--blue-bg); }
/* the revealed add-form sits above the list, set off by a hairline */
.add-form { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }


/* ---------- dashboard (morning briefing) ---------- */
/* two columns: the work (hero · focus · payments) and a 340px pulse rail */
.dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* greeting hero — replaces the old serif greeting block + six stat cards */
.dash-hero {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 20px 24px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dash-day { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; color: var(--faint); text-transform: uppercase; }
.dash-hello {
  font-family: Georgia, "Times New Roman", "Times", serif;
  font-size: 30px; font-weight: 500; letter-spacing: -.2px; color: var(--ink); margin-top: 6px;
}
/* the "what needs you" callouts, one per line, each deep-linking to its view */
.dash-hero-lines { display: flex; flex-direction: column; gap: 7px; flex: none; }
.dash-hero-line { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.dash-hero-line.static { cursor: default; }
.dash-hero-line:not(.static):hover { text-decoration: underline; }

/* briefing cards — the .card surface with the design's 12px radius / roomier head */
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 15px 18px 12px; }
.dash-card-head h2 { font-size: 14.5px; font-weight: 700; }
.dash-card-head .sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.dash-card-head .meta { font-size: 12px; color: var(--muted); }
.dash-card-head .meta b { color: var(--ink); font-size: 13.5px; }
.dash-card-head.rail { padding: 14px 18px 10px; }
.dash-card-head.rail h2 { font-size: 14px; }
.dash-card-head.rail .meta { font-size: 11.5px; color: var(--faint); }
.dash-card-body { padding: 2px 14px 16px; }
.dash-more { display: block; font-size: 11.5px; color: var(--blue); padding: 2px 4px 0; }
.dash-more:hover { text-decoration: underline; }
/* brief ring when the hero's payments callout brings the card into view */
.dash-card.flash { animation: dash-flash 1.4s ease; }
@keyframes dash-flash {
  0% { box-shadow: 0 0 0 3px var(--blue-line); }
  100% { box-shadow: var(--shadow); }
}

/* payments due rows — the border colour encodes urgency (red overdue / amber today) */
.dash-pays { display: flex; flex-direction: column; gap: 8px; }
.dash-payrow {
  display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}
.dash-paycheck { flex: none; width: 18px; height: 18px; border-radius: 50%; background: none; border: 1.5px solid #c8d2de; padding: 0; cursor: pointer; }
.dash-paymain { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.dash-payname { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.dash-paymeta { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-paychip { flex: none; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 2px 9px; }
.dash-paychip.red { color: var(--red); background: var(--red-bg); border: 1px solid var(--red-line); }
.dash-paychip.amber { color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); }
.dash-payamt { flex: none; width: 80px; text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* right-rail dark month-cash card, clicking through to Revenue */
.dash-cash { display: block; background: var(--sidebar); border-radius: 12px; padding: 16px 20px 15px; cursor: pointer; }
.dash-cash-label { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); }
.dash-cash-value { font-size: 30px; font-weight: 700; letter-spacing: -.8px; color: #fff; line-height: 1.15; margin-top: 6px; }
.dash-cash-sub { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.dash-cash-bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-top: 14px; }
.dash-cash-months { display: flex; gap: 6px; margin-top: 6px; }

/* right-rail lists: last week's check-ins and clients gone quiet */
.dash-rail-body { padding: 0 18px 14px; display: flex; flex-direction: column; }
.dash-rail-body.kins { gap: 11px; }
.dash-rail-body.quiet { gap: 8px; }
.dash-kin { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.dash-kin-name { font-size: 12.5px; color: var(--ink); }
.dash-kin-streak { color: var(--amber); font-weight: 600; }
.dash-kin-sum { font-size: 11.5px; color: var(--muted); }
.dash-quiet { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; cursor: pointer; }
.dash-quiet-name { color: var(--ink); font-weight: 600; }
.dash-quiet-days { font-weight: 700; }
.dash-rail-body.onb { gap: 8px; }
.dash-onb { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; cursor: pointer; }
.dash-onb-name { color: var(--ink); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-onb-day { color: var(--faint); font-size: 11.5px; flex: none; }
.dash-onb-pct { font-weight: 700; flex: none; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.dash-onb-pct.green { color: var(--green); }
.dash-onb-pct.amber { color: var(--amber); }
.dash-onb-pct.red { color: var(--red); }

/* below ~1100px the rail folds under the main column */
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* ---------- stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; flex: none; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); cursor: pointer; display: block; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.stat:hover { border-color: #c8d2de; box-shadow: 0 2px 8px rgba(15, 30, 50, .08); }
.stat .label { font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: 24px; font-weight: 780; letter-spacing: -.5px; margin-top: 2px; }
.stat .hint { font-size: 11px; color: var(--faint); }
.trend { font-weight: 700; }
.trend.down { color: var(--red); }
.trend.up { color: var(--green); }
.stat.green .value { color: var(--green); }
.stat.amber .value { color: var(--amber); }
.stat.red .value { color: var(--red); }
.stat.blue .value { color: var(--blue); }

/* ---------- revenue analytics ---------- */
/* generic segmented control — grey track (per-panel measure toggles) */
.seg { display: inline-flex; align-items: center; gap: 2px; background: var(--grey-bg); border-radius: 9px; padding: 3px; }
.seg-opt {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 6px 14px; border-radius: 7px; text-decoration: none;
  transition: background .12s, color .12s, box-shadow .12s;
}
.seg-opt:hover { color: var(--ink); }
.seg-opt.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(22, 33, 46, .14); }
.seg.seg-sm { padding: 2px; border-radius: 7px; gap: 1px; }
.seg.seg-sm .seg-opt { font-size: 11px; padding: 4px 10px; border-radius: 5px; }
.seg.seg-sm .seg-opt.on { font-weight: 700; box-shadow: 0 1px 2px rgba(22, 33, 46, .08); }

/* framed (white) segmented controls in the revenue header row */
.seg.seg-frame { background: var(--surface); border: 1px solid var(--line); }
.seg-frame .seg-opt:not(.on):hover { background: var(--grey-bg); }
.seg-frame .seg-opt.on { background: var(--ink); color: #fff; font-weight: 700; box-shadow: none; }
.seg-frame .seg-opt.on:hover { color: #fff; }
.seg-count { font-size: 11px; font-weight: 700; background: var(--grey-bg); border-radius: 9px; padding: 1px 7px; margin-left: 6px; }
.seg-opt.on .seg-count { background: #fff; }
.seg-count.warn { background: var(--red-bg, #fdecea); color: var(--red, #c0392b); }
.seg-opt.on .seg-count.warn { background: #fff; }
/* on the framed control the active pill is ink, so count chips flip to stay legible */
.seg-frame .seg-opt.on .seg-count { background: rgba(255, 255, 255, .18); color: #fff; }
.seg-frame .seg-opt.on .seg-count.warn { background: #fff; color: var(--red); }

/* the header row: period presets + "Showing …" caption, tab switcher opposite */
.rev-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
/* keep the tab switcher pinned right even when the period control is hidden
   (the Due tab shows everything outstanding, so it has no period to pick) */
.rev-controls .rev-tabswitch { margin-left: auto; }
.rev-range-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-range-now { font-size: 12.5px; color: var(--faint); }
.rev-range-now strong { color: var(--ink); font-weight: 700; }
/* From → To month range picker */
.rev-period { display: inline-flex; align-items: center; gap: 7px; }
.rev-period-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.rev-period.active .rev-period-lbl { color: var(--blue); }
.rev-period-sep { color: var(--faint); font-weight: 700; }
.rev-period select { font-size: 12.5px; font-weight: 600; padding: 7px 10px; }
.rev-period.active select { border-color: var(--blue-line); }
.trend.flat { color: var(--faint); }
.kpi-vs { color: var(--faint); font-weight: 600; }

/* KPI row — the dark cash-collected hero beside five calm stat cards */
.rev-kpis { display: grid; grid-template-columns: 340px 1fr; gap: 14px; margin-bottom: 18px; }
.rev-hero {
  background: var(--sidebar); border-radius: 12px; padding: 16px 22px 14px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.rev-hero-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.rev-hero-value { font-size: 38px; font-weight: 700; letter-spacing: -1px; color: #fff; line-height: 1; }
.rev-hero-sub { font-size: 12px; color: var(--faint); margin-top: 6px; }
.rev-statgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rev-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0;
}
.rev-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
.rev-stat-value { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.rev-stat-value.green { color: var(--green); }
.rev-stat-sub { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* "Cash collected by month" — comparable columns; in-range months carry the full
   colour, months outside the period read quieter, the running month is partial */
.rev-chart { padding: 20px 24px 18px; border-radius: 12px; }
.rev-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rev-chart-head h2 { font-size: 15px; font-weight: 700; }
.rev-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--muted); }
.rl-key { display: inline-flex; align-items: center; gap: 6px; }
.rl-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--green); flex: none; }
.rl-sw-plan { background: var(--green-line); }
.rl-sw-out { opacity: .35; }
.rl-sw-best { background: var(--surface); box-shadow: inset 0 0 0 2px var(--green); }
.trend-chart { display: flex; align-items: flex-end; gap: 26px; height: 170px; padding: 0 6px; }
.tcol { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.tcol-val { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tcol-bar {
  width: 100%; min-height: 3px; background: var(--green); border-radius: 6px 6px 3px 3px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: height .45s cubic-bezier(.22, .61, .36, 1), opacity .15s;
}
/* the cap on top is payment-plan income; the solid base below it is new cash */
.tcol-plan { flex: none; width: 100%; background: var(--green-line); }
.tcol:not(.on) .tcol-bar { opacity: .35; }
.tcol:not(.on) .tcol-val { color: var(--faint); }
.tcol:hover .tcol-bar { opacity: .85; }
.tcol:not(.on):hover .tcol-bar { opacity: .55; }
.tcol.best .tcol-bar { outline: 2px solid var(--green); outline-offset: 2px; }
.tcol.best .tcol-val { color: var(--green); font-size: 12px; font-weight: 800; }
/* the running month reads as partial — unless it's the focused selection
   (a single-month period, e.g. its bar was clicked), where the full
   "selected" colour must win so the focus is visible */
.tcol.partial:not(.sel) .tcol-bar { opacity: .55; }
.tcol.partial:not(.sel) .tcol-val { color: var(--faint); }
.trend-labels { display: flex; gap: 26px; margin-top: 10px; padding: 10px 6px 0; border-top: 1px solid var(--line-soft); }
.trend-labels span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.trend-labels span:not(.on) { color: var(--faint); }
.trend-labels span.best { color: var(--green); font-weight: 800; }
.trend-labels span.partial { color: var(--faint); }
.trend-labels .ty { margin-left: 2px; font-size: 9px; opacity: .7; }

/* ranked breakdown panels — name · inline bar · amount per row */
.rev-breakdowns { gap: 14px; }
.bd-card { padding: 20px 24px; border-radius: 12px; margin-bottom: 0; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.bd-head h2 { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-body { display: flex; flex-direction: column; gap: 11px; }
.bd-row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 12px; }
.bd-offer .bd-row { grid-template-columns: 170px 1fr 70px; }
.bd-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-track { height: 8px; background: var(--grey-bg); border-radius: 4px; }
.bd-fill { height: 100%; border-radius: 4px; min-width: 2px; transition: width .45s cubic-bezier(.22, .61, .36, 1); }
.bd-lead .bd-fill { background: var(--blue); }
.bd-lead .bd-fill.lt { background: #8fb0e8; }
.bd-offer .bd-fill { background: var(--green); }
.bd-offer .bd-fill.lt { background: #7cbf97; }
.bd-val { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.bd-other .bd-name { color: var(--muted); font-style: italic; }
.bd-empty { color: var(--muted); font-size: 12.5px; padding: 16px 2px; text-align: center; line-height: 1.55; }
.bd-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* "Entries" ledger header (range-scoped) */
.rev-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.rev-section .section-title { margin: 0; font-size: 15px; font-weight: 700; }
.rev-section-sub { font-size: 13px; font-weight: 400; color: var(--faint); }
.btn.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; padding: 8px 16px; font-weight: 700; }
.btn.btn-ink:hover { background: #223146; border-color: #223146; }
/* the single ledger table */
.rev-ledger { border-radius: 10px; overflow: hidden; }
.tbl.rev th { background: #f8fafc; padding: 10px 20px; letter-spacing: .6px; }
.tbl.rev td { padding: 11px 20px; }
.tbl.rev tbody tr:not(.rev-month-row):hover td { background: #fbfcfd; }
.tbl.rev td.rev-date, .tbl.rev td.rev-offer { font-size: 12.5px; color: var(--muted); }
.tbl.rev td.rev-net { font-size: 13px; font-weight: 700; color: var(--ink); }
.tbl.rev td.rev-value { font-size: 12.5px; color: var(--muted); }
.rev-dash { color: #c9d1dc; }
/* month divider rows: month + collected total + entry count */
.tbl.rev .rev-month-row td, .tbl.rev tbody tr.rev-month-row:hover td {
  background: var(--bg); font-weight: 800; font-size: 12px; color: var(--ink);
  padding: 8px 20px; border-bottom: 1px solid var(--line); border-top: 0;
}
.rm-meta { font-size: 11.5px; font-weight: 400; color: var(--faint); margin-left: 8px; }
/* payment pills (FULL / N INSTALMENTS / INSTALMENT) */
.rev-pill {
  display: inline-block; border-radius: 5px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap;
}
.rev-pill.green { background: var(--green-bg); color: var(--green); }
.rev-pill.blue { background: var(--blue-bg); color: var(--blue); }
.rev-pill.grey { background: var(--grey-bg); color: var(--muted); }
/* "PLAN n/m" tag after the customer name on instalment entries */
.rev-planbadge {
  display: inline-block; margin-left: 4px; background: var(--grey-bg); color: var(--faint);
  border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; vertical-align: 1px;
}

@media (max-width: 1240px) {
  .rev-kpis { grid-template-columns: 1fr; }
  .rev-hero { min-height: 108px; }
}
@media (max-width: 1100px) {
  .rev-statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trend-chart, .trend-labels { gap: 12px; }
}
@media (max-width: 760px) {
  .rev-controls { align-items: stretch; }
  .rev-range-group { width: 100%; }
  .rev-range { flex: 1; }
  .rev-range .seg-opt { flex: 1; text-align: center; }
  .rev-period { width: 100%; }
  .rev-period select { flex: 1; min-width: 0; }
  .rev-tabswitch { width: 100%; }
  .rev-tabswitch .seg-opt { flex: 1; text-align: center; }
  .rev-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rev-hero-value { font-size: 30px; }
  .rev-stat-value { font-size: 20px; }
  /* let a panel's title sit above its measure toggle when space is tight */
  .bd-head { flex-wrap: wrap; }
  .bd-head .seg { margin-left: auto; }
  .bd-card { padding: 16px; }
  .bd-row, .bd-offer .bd-row { grid-template-columns: 104px 1fr 70px; gap: 8px; }
  /* trend chart: tighter bars, drop the per-bar value labels so months still fit */
  .rev-chart { padding: 16px 14px 14px; }
  .trend-chart { gap: 5px; height: 120px; padding: 0; }
  .tcol-val { display: none; }
  .trend-labels { gap: 5px; padding: 8px 0 0; }
  .trend-labels span { font-size: 9.5px; }
  .trend-labels .ty { display: none; }
}

/* ---------- badges, pills, dots ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; border-radius: 99px;
  padding: 2px 9px; white-space: nowrap; border: 1px solid transparent;
}
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.green { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }
.badge.amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.badge.red   { background: var(--red-bg);   color: var(--red);   border-color: var(--red-line); }
.badge.blue  { background: var(--blue-bg);  color: var(--blue);  border-color: var(--blue-line); }
.badge.grey  { background: var(--grey-bg);  color: var(--muted); border-color: var(--line); }
.badge.outline { background: transparent; border-color: var(--line); color: var(--muted); }
.badge.streak { background: var(--amber-bg); color: #c2410c; border-color: var(--amber-line); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; border-radius: 99px; padding: 3px 10px;
  background: var(--grey-bg); color: var(--muted);
}
.pill.ghost { background: rgba(255, 255, 255, .08); color: #93a1b3; }

.due { font-weight: 650; white-space: nowrap; }
.due.overdue { color: var(--red); }
.due.today { color: var(--amber); }
.due.soon { color: var(--blue); }
.due.later { color: var(--muted); font-weight: 500; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
/* the clients list carries an inline, editable status pill; its popover would be
   clipped by the wrapper's scroll box, so when the table actually fits its card
   the wrapper is let overflow and the dropdown escapes. A breakpoint can't decide
   this — the table's width depends on the data — so app.js measures it after each
   render/resize and stamps .tbl-fits only when nothing would bleed out. Without
   the stamp the wrapper keeps its own scroll box, so an oversized table scrolls
   inside the card instead of pushing the whole page sideways. (Below 700px the
   card layout already sets these wrappers to overflow: visible.) */
.tbl-wrap.tbl-fits { overflow: visible; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--faint); font-weight: 700; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap;
  /* z-index keeps positioned row content (the status pill's .pill-edit wrapper)
     from painting over the stuck header; open popovers (z-index 30) still win */
  position: sticky; top: 0; z-index: 2;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.rowlink { cursor: pointer; }
.tbl tr.rowlink:hover td { background: #f7f9fc; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--ink); }
.tbl th .arrow { font-size: 9px; }
.tbl .name-cell { font-weight: 650; white-space: nowrap; }
.tbl .name-cell .niche { display: block; font-size: 11px; color: var(--faint); font-weight: 450; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* revenue ledger: the row itself no longer navigates — only the client's name does,
   so it's the single clickable affordance on the row */
.tbl .name-link { color: inherit; text-decoration: none; display: inline-block; }
.tbl .name-link:hover .name-cell { color: var(--blue); text-decoration: underline; }
.tbl .name-link:hover .name-cell .niche { color: var(--blue); text-decoration: none; }
.tbl td.trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding: 28px; text-align: center; color: var(--faint); font-size: 13px; }

/* revenue ledger: fixed column widths — Date · Customer (flexible) · Offer ·
   Payment · Net · Deal value · edit */
table.tbl.rev { table-layout: fixed; min-width: 860px; }
.tbl.rev td { overflow: hidden; text-overflow: ellipsis; }
.tbl.rev col.c-date { width: 110px; }
.tbl.rev col.c-offer { width: 180px; }
.tbl.rev col.c-payment { width: 150px; }
.tbl.rev col.c-net { width: 110px; }
.tbl.rev col.c-value { width: 110px; }
.tbl.rev col.c-act { width: 70px; }
.tbl.rev td.card-act { padding-left: 6px; padding-right: 14px; text-align: right; }

/* client profile · "Revenue entries" disclosure (Payments tab): a card whose header
   toggles the raw entries open. Reuses the Revenue table, but scoped to one client —
   so the Customer column is redundant; collapse it on desktop and let the table fit
   the narrower profile column instead of forcing a horizontal scroll. */
.rev-disc { margin-top: 14px; overflow: hidden; }
.rev-disc-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.rev-disc.is-open .rev-disc-head { border-bottom: 1px solid var(--line); }
.rev-disc-head:hover { background: var(--blue-bg); }
.rev-disc-caret { color: var(--muted); font-size: 11px; flex: 0 0 12px; }
.rev-disc-title { font-weight: 650; font-size: 14px; }
.rev-disc-count {
  font-size: 11.5px; font-weight: 650; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.rev-disc-empty { margin: 0; }
.rev-disc-add { padding: 12px 16px; }
.rev-disc table.tbl.rev { min-width: 0; }
@media (min-width: 701px) {
  .rev-disc .tbl.rev col.c-customer { width: 1px; }
  .rev-disc .tbl.rev thead th:nth-child(2),
  .rev-disc .tbl.rev tbody td.card-title { padding-left: 0; padding-right: 0; overflow: hidden; white-space: nowrap; }
}

/* tick / cross */
.tick { font-weight: 700; }
.tick.yes { color: var(--green); }
.tick.no { color: #c9d2dd; }

/* ---------- filter bar ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.input, .select {
  font: inherit; font-size: 12.8px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; outline: none;
}
.input:focus, .select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.input.search { width: 240px; }
.select { padding-right: 26px; }
.chip {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 8px; padding: 7px 12px;
}
.chip:hover { border-color: #c8d2de; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on.warnchip { background: var(--red); border-color: var(--red); }
.btn-link { background: none; border: none; font: inherit; font-size: 12px; color: var(--blue); cursor: pointer; padding: 6px 4px; }
/* the Missing-info chip's gap count + the per-row badges naming the blank fields */
.chip .chip-n { font-size: 11px; font-weight: 700; background: var(--grey-bg); border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.chip.on .chip-n { background: rgba(255, 255, 255, .22); }
.miss-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; }
.miss-badge { font-size: 10.5px; font-weight: 600; color: var(--amber); background: var(--amber-bg); border-radius: 8px; padding: 1px 7px; white-space: nowrap; }
.result-count { font-size: 12px; color: var(--faint); margin-left: auto; }

/* ---- multi-select filter dropdowns (Stage / Status on the clients list) ----
   a button styled like .select that opens a small popover of checkboxes so you
   can tick any combination of options. */
.msel { position: relative; display: inline-flex; }
.msel-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 116px; max-width: 260px; font: inherit; font-size: 12.8px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; white-space: nowrap;
}
.msel-trigger > span { overflow: hidden; text-overflow: ellipsis; }
.msel-trigger:hover { border-color: #c8d2de; }
.msel-trigger:focus-visible, .msel.open .msel-trigger {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg);
}
.msel-caret { width: 11px; height: 11px; flex: none; color: var(--faint); transition: transform .15s; }
.msel-caret path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msel.open .msel-caret { transform: rotate(180deg); }
.msel-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; flex-direction: column; padding: 5px; min-width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(22, 33, 46, .14), 0 2px 6px rgba(22, 33, 46, .06);
  animation: pill-pop-in .14s ease-out;
}
.msel-opt {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px; border-radius: 7px; font-size: 12.8px; white-space: nowrap;
  transition: background .1s;
}
.msel-opt:hover { background: var(--grey-bg); }
.msel-opt input { width: 14px; height: 14px; flex: none; accent-color: var(--blue); cursor: pointer; margin: 0; }
.msel-actions { display: flex; gap: 4px; margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line); }
.msel-actions .btn-link { padding: 4px 8px; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab {
  font: inherit; font-size: 12.8px; font-weight: 650; color: var(--muted);
  background: none; border: none; cursor: pointer;
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.tab .n { font-size: 11px; font-weight: 700; background: var(--grey-bg); border-radius: 99px; padding: 1px 7px; margin-left: 5px; color: var(--muted); }
.tab.on .n { background: var(--ink); color: #fff; }
a.tab { text-decoration: none; }
/* On the profile, the tabs are their own block sitting beneath the summary card
   (not boxed inside it), so the card and the navigation read as separate elements. */
.profile-tabs { margin: 0 0 16px; padding: 0 8px; border-top: none; border-bottom: 1px solid var(--line); }

/* ---------- progress bars ---------- */
.bar { height: 6px; background: var(--line-soft); border-radius: 99px; overflow: hidden; min-width: 60px; }
.bar .fill { height: 100%; border-radius: 99px; background: var(--blue); }
.bar .fill.green { background: var(--green); }
.bar .fill.amber { background: var(--amber); }
.bar .fill.red { background: var(--red); }

/* ---------- dashboard grid ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-23 { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .grid-2, .grid-23 { grid-template-columns: 1fr; } }

/* ---------- onboarding cards ---------- */
/* align-items:start keeps closed cards compact when a neighbour's checklist is
   open — stretched cards read as broken empty boxes */
.onb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.onb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.onb-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 4px; }
.onb-name { font-weight: 700; font-size: 13.5px; }
.onb-meta { font-size: 11.5px; color: var(--faint); margin-bottom: 10px; }
.onb-pct { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.onb-pct .bar { flex: 1; }
.onb-pct .n { font-size: 12px; font-weight: 750; min-width: 34px; text-align: right; }
/* collapsed cards show a one-line summary; the full checklist reveals on toggle */
.onb-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: none; padding: 6px 0 0; margin: 0;
  font: inherit; font-size: 11.8px; color: var(--muted); text-align: left; cursor: pointer;
}
.onb-toggle:hover { color: var(--ink); }
.onb-sum b { font-weight: 650; color: var(--ink); }
.onb-sum.complete { color: var(--green); font-weight: 650; }
.onb-chev { width: 14px; height: 14px; fill: currentColor; flex: none; transition: transform .15s; }
.onb-card.open .onb-chev { transform: rotate(180deg); }
/* one column so step labels never wrap mid-phrase */
.onb-items {
  display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 11.8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.onb-items label { display: flex; gap: 6px; align-items: baseline; color: var(--muted); cursor: pointer; }
.onb-items label.done { color: var(--ink); }
.onb-items input[type=checkbox] { accent-color: var(--green); cursor: pointer; }
/* checklist complete → one-click graduation to the Active stage (.btn.onb-grad
   beats the base .btn rule declared further down) */
.btn.onb-grad {
  width: 100%; justify-content: center; margin-top: 10px; font-weight: 700;
  background: var(--green-bg); border-color: var(--green-line); color: var(--green);
}
.btn.onb-grad:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- profile ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; cursor: pointer; color: var(--muted); background: none; border: none; padding: 0; }
.back:hover { color: var(--ink); }

/* the header and the KPI strip share one card, split by a hairline; the tab bar
   sits below as its own block */
.profile-card { margin-bottom: 14px; }
.profile-head { display: flex; gap: 18px; align-items: center; padding: 18px 20px 14px; flex-wrap: wrap; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff; background: #3b4d63;
  border: 3px solid var(--line);
}
.avatar.green { border-color: #5fc183; } .avatar.amber { border-color: #e3aa54; } .avatar.red { border-color: #de7d7d; }
.profile-id { flex: 1; min-width: 220px; }
.profile-id h2 { font-size: 18px; font-weight: 780; letter-spacing: -.2px; }
/* the name is click-to-edit, like every other profile field */
.profile-id .editable-name { display: inline-block; cursor: pointer; border-radius: 7px; padding: 0 7px; margin-left: -7px; transition: background .12s; }
.profile-id .editable-name:hover { background: var(--grey-bg); }
.profile-id .editable-name:focus-visible { outline: none; background: var(--grey-bg); box-shadow: 0 0 0 2px var(--blue-line) inset; }
.profile-id .name-edit { margin: 0; }
.profile-id .name-edit .input { font-size: 18px; font-weight: 780; letter-spacing: -.2px; padding: 1px 7px; width: 100%; max-width: 460px; }
.profile-id .niche { color: var(--muted); font-size: 12.5px; margin: 1px 0 7px; }
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- live presence: teammates currently on this same client ----
   a subtle chip row under the badges; "viewing" is calm grey, "editing" warns amber */
.presence-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.presence-bar[hidden] { display: none; }
.presence-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  color: var(--muted); background: var(--grey-bg);
  border: 1px solid var(--line);
}
.presence-chip.editing {
  color: #92400e; background: #fff7ed; border-color: #fed7aa;
}

/* ---- click-to-edit stage / status pills in the profile head ----
   the current value is a badge with a caret; clicking opens a popover that
   previews every option as the badge it will become. */
.pill-edit { position: relative; display: inline-flex; }
.pill-trigger {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: transparent; padding: 2px; margin: -2px;
  border-radius: 99px; cursor: pointer; font: inherit;
  transition: background .12s, box-shadow .12s;
}
.pill-trigger:hover { background: var(--grey-bg); }
.pill-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue-line); }
.pill-caret { width: 10px; height: 10px; flex: none; margin-right: 2px; color: var(--faint); opacity: .8; transition: transform .15s; }
.pill-caret path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pill-edit.open .pill-caret { transform: rotate(180deg); }
.pill-edit.open .pill-trigger { background: var(--grey-bg); }

.pill-pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(22, 33, 46, .14), 0 2px 6px rgba(22, 33, 46, .06);
  min-width: max-content; animation: pill-pop-in .14s ease-out;
}
@keyframes pill-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
/* little pointer connecting the popover to its pill */
.pill-pop::before {
  content: ""; position: absolute; bottom: 100%; left: 14px;
  border: 6px solid transparent; border-bottom-color: var(--line);
}
.pill-pop::after {
  content: ""; position: absolute; bottom: calc(100% - 1px); left: 15px;
  border: 5px solid transparent; border-bottom-color: var(--surface);
}
.pill-opt {
  display: flex; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 5px 8px; padding-right: 10px; border-radius: 8px; text-align: left;
  transition: background .1s;
}
.pill-opt:hover, .pill-opt:focus-visible { outline: none; background: var(--grey-bg); }
.pill-opt .pill-check { width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--muted); }
.pill-opt .pill-check path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-opt.sel { background: var(--grey-bg); }

/* head actions: Add task / Log interaction, with a save-state line beneath */
.profile-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.profile-actions-btns { display: flex; gap: 10px; }
.save-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.save-state .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); transition: background .2s; }
.save-state.is-saving .dot { background: var(--amber); }

/* KPI strip sits below the header in the same card, divided by a hairline */
.profile-kpis { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.pk { min-width: 86px; }
.pk .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); font-weight: 700; }
.pk .v { font-size: 13.5px; font-weight: 700; margin-top: 1px; }
.pk .v .sub { font-size: 11px; color: var(--faint); font-weight: 500; }

/* main content takes the room it needs; the Details sidebar is a slim, fixed
   rail that persists across every tab */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
/* let the columns shrink below their content so wide tables scroll inside their
   card instead of forcing the whole column (and page) wider than the viewport */
.profile-grid > * { min-width: 0; }
/* keep the Details rail in view as you scroll through a long tab */
.profile-side { position: sticky; top: 16px; }
@media (max-width: 1100px) { .profile-grid { grid-template-columns: 1fr; } .profile-side { position: static; } }

/* ---- click-to-edit rows: hover greys the row; clicking the value turns it into
   an inline editor in place (no buttons) that autosaves on blur / Enter / change.
   Used by the profile overview (Details + Goals & Focus). ---- */
/* discoverability cue only — resting cards stay clean, the hint fades in on hover */
.edit-hint { font-size: 11px; color: var(--faint); font-weight: 500; opacity: 0; transition: opacity .15s; }
.card:hover .edit-hint, .card:focus-within .edit-hint { opacity: 1; }

.detail-group { margin-bottom: 14px; }
.detail-group:last-of-type { margin-bottom: 0; }
.detail-group-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; color: var(--faint); margin-bottom: 2px;
}

.kv-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; align-items: center;
  font-size: 12.8px; padding: 7px 10px; margin: 0 -10px;
  border-radius: 8px; cursor: pointer; transition: background .12s;
}
.kv-row:hover { background: var(--grey-bg); }
.kv-row:focus-visible { outline: none; background: var(--grey-bg); box-shadow: 0 0 0 2px var(--blue-line) inset; }
.kv-row .kv-k { color: var(--faint); font-weight: 600; }
.kv-row .kv-v { font-weight: 550; word-break: break-word; }
.kv-row.editing, .kv-row.editing:hover { cursor: default; background: var(--grey-bg); }

/* the editor sits exactly where the value text was — a compact, inline control */
.inline-edit { margin: 0; display: block; }
.inline-edit .input, .inline-edit .select { width: 100%; font-size: 12.8px; padding: 4px 8px; font-weight: 500; }
.inline-edit .select { padding-right: 26px; } /* keep room for the native dropdown arrow */

.del-link {
  display: block; width: 100%; margin-top: 16px; padding: 7px 10px;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 12px; font-weight: 650; color: var(--red);
  cursor: pointer; text-align: center;
  transition: background .12s, border-color .12s;
}
.del-link:hover { background: var(--red-bg); border-color: var(--red-line); }

.focus-list { display: grid; gap: 0; }
.card-body.focus-list { padding-top: 7px; padding-bottom: 7px; }
.focus-item {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 10px; margin: 0 -10px; border-radius: 8px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background .12s;
}
.focus-list > .focus-item:last-child { border-bottom: none; }
.focus-item:hover { background: var(--grey-bg); }
.focus-item:focus-visible { outline: none; background: var(--grey-bg); box-shadow: 0 0 0 2px var(--blue-line) inset; }
.focus-item.editing, .focus-item.editing:hover { cursor: default; background: var(--grey-bg); }
.focus-item.editing .focus-text { width: 100%; }
.focus-item.editing .fv { margin-top: 3px; }
.focus-ic {
  flex: none; width: 27px; height: 27px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.focus-ic svg { width: 15px; height: 15px; fill: currentColor; }
.focus-ic.green { background: var(--green-bg); color: var(--green); }
.focus-ic.amber { background: var(--amber-bg); color: var(--amber); }
.focus-ic.blue  { background: var(--blue-bg);  color: var(--blue); }
.focus-text { min-width: 0; }
.focus-item .fk { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.focus-item .fv { font-size: 12.5px; color: var(--muted); }

.offer-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.offer-row:last-of-type { border-bottom: none; }
.offer-row .o-name { font-weight: 600; font-size: 12.8px; }
.offer-row .o-meta { font-size: 11.5px; color: var(--muted); }

.hist-item { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hist-item:last-child { border-bottom: none; }
.hist-item .hist-meta { font-size: 11.3px; color: var(--faint); margin-bottom: 2px; }
.hist-item .hist-meta b { color: var(--muted); }
.hist-item .hist-from { font-size: 12.3px; color: var(--faint); text-decoration: line-through; }
.hist-item .hist-to { font-size: 12.8px; }

/* weekly check-in reflections — her written win / challenge / help-needed,
   grouped by week below the metrics table */
.checkin-refl .refl-week { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.checkin-refl .refl-week:first-child { padding-top: 0; }
.checkin-refl .refl-week:last-child { border-bottom: none; padding-bottom: 0; }
.checkin-refl .refl-when { font-size: 11.3px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.checkin-refl .refl-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 3px 0; }
.checkin-refl .refl-lbl { font-size: 11.5px; color: var(--faint); }
.checkin-refl .refl-txt { font-size: 12.8px; white-space: pre-wrap; }

.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12.6px; }
.checklist label { display: flex; gap: 7px; align-items: baseline; cursor: pointer; }
.checklist label.pending { color: var(--faint); }
.checklist input[type=checkbox] { accent-color: var(--green); cursor: pointer; }

.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.tl-item:last-child { border-bottom: none; }
.tl-icon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grey-bg);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.tl-body { min-width: 0; }
.tl-body .tl-meta { font-size: 11.3px; color: var(--faint); }
.tl-body .tl-meta b { color: var(--ink); font-weight: 650; }
/* break long unbroken strings (e.g. pasted URLs) instead of forcing the
   timeline — and the whole page — wider than the viewport */
.tl-body .tl-meta, .tl-body .tl-text { overflow-wrap: anywhere; }
.tl-body .tl-text { font-size: 12.8px; line-height: 1.45; margin-top: 1px; }

/* ============ Interactions tab — redesigned timeline (tlx-*) ============ */
/* cadence header: title + "N logged", and a coloured dot + last-contact line */
.tlx-head h2 { font-size: 15px; font-weight: 700; }
.tlx-cad { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tlx-caddot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* always-on composer, on a faint strip directly under the header */
.tlx-composer-strip { padding: 12px 16px; background: #fafbfc; border-bottom: 1px solid var(--line-soft); }
.tlx-composer {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.tlx-composer.is-active { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-bg); }
.tlx-composer-ta {
  width: 100%; border: 0; outline: none; resize: vertical; background: transparent;
  font: inherit; font-size: 13.3px; line-height: 1.45; color: var(--ink); min-height: 40px;
}
.tlx-composer-ta::placeholder { color: var(--faint); }
.tlx-composer-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* channel <select>: colour dot + native select + a clearly-visible caret */
.ch-select { position: relative; display: inline-flex; align-items: center; }
.ch-select .ch-dot { position: absolute; left: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--ch, var(--muted)); pointer-events: none; }
.ch-native {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 30px 7px 26px; cursor: pointer;
}
.ch-native:focus { outline: none; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-bg); }
.ch-select .ch-caret { position: absolute; right: 10px; font-size: 13px; line-height: 1; color: var(--muted); pointer-events: none; }

/* "Log it" — dark when there's text, disabled grey when empty */
.tlx-log {
  margin-left: auto; white-space: nowrap; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 650; padding: 8px 16px;
  background: var(--ink); color: #fff;
}
.tlx-log:disabled { background: #eef1f5; color: var(--faint); cursor: default; }

/* filter / search bar */
.tlx-bar { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.tlx-sort, .tlx-imp-toggle {
  border: 1px solid var(--line); background: #fff; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 6px 11px; border-radius: 99px;
}
.tlx-sort:hover, .tlx-imp-toggle:hover { color: var(--ink); border-color: var(--line); background: var(--grey-bg); }
.tlx-imp-toggle.on { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.tlx-search { position: relative; margin-left: auto; display: inline-flex; align-items: center; }
.tlx-search-ic { position: absolute; left: 10px; font-size: 14px; color: var(--faint); pointer-events: none; }
.tlx-search-in {
  width: 170px; border: 1px solid var(--line); border-radius: 99px; background: #fff;
  font: inherit; font-size: 12.5px; color: var(--ink); padding: 6px 12px 6px 28px;
}
.tlx-search-in:focus { outline: none; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-bg); }
.tlx-search-in::placeholder { color: var(--faint); }

/* quiet-alert banner (>14 days since last contact) */
.tlx-alert {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--amber-line); background: var(--amber-bg);
  color: var(--amber); font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 16px;
}
.tlx-alert-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }

/* timeline body: date-grouped, railed */
.tlx-body { padding-top: 6px; }
.tlx-group { margin-bottom: 6px; }
.tlx-ghead { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.tlx-ghead span:first-child {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--faint);
}
.tlx-rule { flex: 1; height: 1px; background: var(--line-soft); }
.tlx-items { position: relative; padding-left: 28px; }
.tlx-items::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line-soft); }

.tlx-row { position: relative; padding: 9px 84px 9px 0; border-radius: 8px; }
.tlx-row.is-note { background: #fbfcfd; }
.tlx-row:hover { background: #f5f8fc; }
.tlx-row:hover .tlx-actions { opacity: 1; pointer-events: auto; }
.tlx-node {
  position: absolute; left: -28px; top: 12px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ch, var(--muted));
}
.tlx-node::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ch, var(--muted)); }
.tlx-main { min-width: 0; }
.tlx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--faint); }
.tlx-ch { font-size: 10.5px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.tlx-when { color: var(--faint); }
.tlx-imp {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line);
  padding: 1px 7px; border-radius: 99px;
}
.tlx-text { font-size: 13.3px; line-height: 1.45; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; }
.tlx-by { font-size: 11px; color: var(--faint); margin-top: 3px; }

/* hover actions */
.tlx-actions {
  position: absolute; top: 7px; right: 6px; display: inline-flex; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.tlx-actions .icon-btn.on { color: var(--amber); }

/* ≥14-day quiet gap divider */
.tlx-gap { display: flex; align-items: center; margin: 6px 0; }
.tlx-gap span {
  font-size: 10.5px; font-weight: 600; color: var(--amber);
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  padding: 2px 9px; border-radius: 99px;
}

.tlx-empty { padding: 18px 0; font-size: 12.5px; color: var(--faint); }

/* inline edit form on the rail (blue-ringed card, keeps the node) */
.tlx-row-edit { padding-right: 0; }
.tlx-row-edit:hover { background: transparent; }
.tlx-card { background: #fff; border: 1px solid var(--blue-line); box-shadow: 0 0 0 3px var(--blue-bg); border-radius: 10px; padding: 10px; }
.tlx-edit .tlx-ta {
  width: 100%; border: 0; outline: none; resize: vertical; background: transparent;
  font: inherit; font-size: 13.3px; line-height: 1.45; color: var(--ink); min-height: 40px;
}
.tlx-edit-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tlx-date { width: auto; font-size: 12.5px; padding: 7px 10px; }
@media (max-width: 640px) {
  .tlx-row { padding-right: 0; }
  .tlx-actions { position: static; opacity: 1; pointer-events: auto; margin-top: 6px; }
  /* the filter bar can't fit two pills + a 170px search on a phone: let it wrap
     and drop the search onto its own full-width row */
  .tlx-bar { flex-wrap: wrap; }
  .tlx-search { margin-left: 0; flex: 1 1 100%; }
  .tlx-search-in { width: 100%; }
  /* once the composer row wraps, a full-width "Log it" beats one stranded right */
  .tlx-composer-row .tlx-log { margin-left: 0; flex: 1 1 100%; }
}

.task-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.task-row:last-child { border-bottom: none; }
.task-row input[type=checkbox] { accent-color: var(--green); width: 15px; height: 15px; cursor: pointer; position: relative; top: 2px; }
.task-row .t-title { font-weight: 600; font-size: 12.8px; }
.task-row.done .t-title { text-decoration: line-through; color: var(--faint); font-weight: 500; }
.task-row .t-meta { font-size: 11.5px; color: var(--faint); }

/* ---------- task sign-off / review ---------- */
/* small pill next to a task title */
.task-tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 99px; margin-left: 8px;
  background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line);
}
/* static dot used as the lead control while a task awaits sign-off */
.task-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none;
  vertical-align: middle; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg);
}
.task-row .task-dot { position: relative; top: 4px; }
/* desktop tasks-table checkboxes (mobile sizing is handled in the media block) */
.cards-tasks td.card-check input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }
.signoff-check { accent-color: var(--amber) !important; }

/* contained panel holding a reply form or a submitted reply + review actions */
.review-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--amber-line); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px;
}
.review-panel .rp-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--faint); margin-bottom: 7px;
}
.review-panel .rp-text { font-size: 13px; font-weight: 400; color: var(--ink); white-space: pre-wrap; margin: 0 0 11px; }
.review-panel .rp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.review-panel textarea.input { margin-bottom: 10px; }
/* slim amber note on a task that was sent back for changes */
.review-note { font-size: 12px; color: var(--amber); margin-top: 6px; }
.review-note b { font-weight: 700; }

/* tasks table: the panel lives in a full-width detail row under its task */
.tbl tr.task-sub td { padding: 0 12px 12px; border-bottom: 1px solid var(--line-soft); }
.tbl tr.task-row-main > td { border-bottom: none; }
.review-note + .review-panel { margin-top: 10px; }

.section-title { font-size: 14px; font-weight: 750; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-title:first-child { margin-top: 0; }

.win-quote { font-size: 12.6px; padding: 9px 0 9px 12px; border-left: 3px solid var(--green-line); margin-bottom: 8px; }
.win-quote .who { font-weight: 700; }
.win-quote .what { color: var(--muted); }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 7px 14px; white-space: nowrap;
}
.btn:hover { border-color: #c8d2de; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: #1d4aab; }
.btn.danger { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }

.icon-btn {
  font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
  background: none; border: none; color: var(--faint);
  padding: 2px 6px; border-radius: 5px;
}
.icon-btn:hover { color: var(--ink); background: var(--grey-bg); }
.icon-btn.danger:hover { color: var(--red); background: var(--red-bg); }

/* ---------------- payments card (profile) ---------------- */
/* "Mark paid" on the dashboard's Payments Due list */
.icon-btn.pay-confirm { color: var(--green); }
.icon-btn.pay-confirm:hover { color: var(--green); background: var(--green-bg); }

.pay-wrap { display: flex; flex-direction: column; gap: 12px; }

/* shared soft-card look for the stat header + each section (matches .card) */
.pay-statbox, .pay-section, .pay-addbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* 3-up stat header — tuned to the app's KPI scale (matches the .pk profile stats) */
.pay-statbox { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
.pay-statcol { padding: 13px 16px; }
.pay-statnext, .pay-statout { border-left: 1px solid var(--line-soft); }
.pay-statlabel { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.pay-progamt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pay-progamt b { font-size: 18px; font-weight: 750; color: var(--ink); letter-spacing: -.2px; }
.pay-progunit { font-weight: 600; }
.pay-progof { color: var(--faint); }
.pay-bar { height: 6px; border-radius: 99px; background: var(--grey-bg); overflow: hidden; }
.pay-bar-fill { height: 100%; border-radius: 99px; background: var(--green); transition: width .35s ease; }
.pay-statsub { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pay-nextrow { display: flex; align-items: center; gap: 10px; }
.pay-cal { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--blue-bg); color: var(--blue); flex: none; }
.pay-cal svg { width: 16px; height: 16px; }
.pay-nextdate { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pay-nextsub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pay-nextsub .od { color: var(--red); font-weight: 600; }
.pay-nextsub .soon { color: var(--blue); font-weight: 600; }
.pay-allset { font-size: 13.5px; font-weight: 700; color: var(--green); }
.pay-outamt { font-size: 18px; font-weight: 750; letter-spacing: -.2px; color: var(--ink); }
.pay-outamt.has { color: var(--red); }

/* sections (overflow visible so the actions menu can spill past the box) */
.pay-section { overflow: visible; }
.pay-section-head { font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 13px 16px 2px; }
.pay-settled .pay-section-head { background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 11px; }
.pay-table { width: 100%; border-collapse: collapse; }
.pay-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--faint); padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
}
.pay-table th.pay-th-act { text-align: right; }
.pay-table td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pay-table tbody tr:last-child td { border-bottom: 0; }

/* checkbox */
.pay-c-check { width: 38px; }
.pay-cb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #97a3b4; border-radius: 5px; cursor: pointer; position: relative; vertical-align: middle; transition: background .12s, border-color .12s; }
.pay-cb:hover { border-color: var(--blue); }
.pay-cb:checked { background: var(--green); border-color: var(--green); }
.pay-cb:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pay-cb-static { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; }

/* row cells */
.pay-c-date .pay-date { font-size: 12.8px; font-weight: 600; color: var(--ink); }
.pay-rel { font-size: 11px; font-weight: 600; margin-top: 1px; }
.pay-rel.od { color: var(--red); }
.pay-rel.soon { color: var(--blue); }
.pay-rel.mut { color: var(--faint); }
.pay-c-amt { font-size: 12.8px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-c-inst { font-size: 12.8px; color: var(--ink); }
.pay-note { font-size: 11px; color: var(--faint); margin-top: 2px; }
.pay-auto-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .4px; color: var(--muted);
  background: var(--grey-bg); border: 1px solid var(--line); vertical-align: 1px;
}
.pay-tr.is-paid .pay-date, .pay-tr.is-paid .pay-c-amt, .pay-tr.is-paid .pay-c-inst { color: var(--muted); }

/* status pills (match the app's .badge scale) */
.pay-c-status { white-space: nowrap; }
.pay-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.pay-pill.overdue { background: var(--red-bg); color: var(--red); }
.pay-pill.today { background: var(--amber-bg); color: var(--amber); }
.pay-pill.soon { background: var(--blue-bg); color: var(--blue); }
.pay-pill.upcoming { background: var(--grey-bg); color: var(--muted); }
.pay-pill.paid { background: var(--green-bg); color: var(--green); }

/* actions: kebab button + dropdown */
.pay-c-act { width: 58px; text-align: right; }
.pay-kebab-wrap { position: relative; display: inline-block; }
.pay-kebab { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font: inherit; font-size: 16px; line-height: 1; color: var(--muted); background: none; border: 1px solid #aab3c0; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.pay-kebab:hover { border-color: var(--blue); color: var(--ink); }
.pay-kebab.open { background: var(--grey-bg); border-color: var(--blue); color: var(--ink); }
.pay-menu { position: absolute; right: 0; top: 31px; z-index: 30; min-width: 132px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 4px; }
.pay-menu-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.pay-menu-item:hover { background: var(--grey-bg); }
.pay-menu-item.danger { color: var(--red); }
.pay-menu-item.danger:hover { background: var(--red-bg); }

/* add row + inline forms */
.pay-addrow { text-align: center; padding: 2px 0; }
.pay-addrow .add-link, .pay-empty .add-link { font-size: 12.5px; }
.pay-addbox { padding: 14px 16px; }
.pay-edit-row td { padding: 6px 14px; background: var(--blue-bg); }
.pay-empty { padding: 26px 18px; text-align: center; }
.pay-empty-text { color: var(--muted); font-size: 12.8px; margin-bottom: 11px; line-height: 1.55; }

/* fixed column widths keep the two tables (Upcoming / Settled) perfectly aligned;
   desktop only — on mobile the table falls back to auto so it can squish to fit */
@media (min-width: 721px) {
  .pay-table { table-layout: fixed; }
  .pay-table .pc-check { width: 42px; }
  .pay-table .pc-date { width: 160px; }
  .pay-table .pc-amt { width: 110px; }
  .pay-table .pc-status { width: 126px; }
  .pay-table .pc-act { width: 84px; }
}

@media (max-width: 720px) {
  .pay-statbox { grid-template-columns: 1fr; }
  .pay-statnext, .pay-statout { border-left: 0; border-top: 1px solid var(--line-soft); }
  .pay-table th, .pay-table td { padding-left: 11px; padding-right: 11px; }
  .pay-c-check { width: 32px; }
  .pay-c-act { width: 44px; }
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; margin-bottom: 10px; }

.field label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--faint); font-weight: 700; margin-bottom: 3px;
}
.field .input, .field .select { width: 100%; }
/* the Payment picker's "Custom…" free-text input, revealed under the select */
.field .pay-custom { margin-top: 6px; }
.pay-custom[hidden] { display: none; }
textarea.input { width: 100%; resize: vertical; font: inherit; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

.inline-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.inline-form .field { min-width: 0; }
.inline-form .field .input, .inline-form .field .select { width: auto; }

/* revenue entry form: 12-col grid so the fields line up in tidy rows */
.deal-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.deal-form .field { min-width: 0; }
.deal-form .f-3 { grid-column: span 3; }
.deal-form .f-4 { grid-column: span 4; }
.deal-form .f-6 { grid-column: span 6; }
.deal-form .f-12 { grid-column: 1 / -1; }
.deal-form .form-actions { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 1100px) {
  .deal-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .deal-form .f-4 { grid-column: span 3; }
  .deal-form .f-6 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .deal-form .f-3, .deal-form .f-4, .deal-form .f-6 { grid-column: 1 / -1; }
}
.form-note {
  display: flex; gap: 8px; align-items: baseline;
  margin: 0 0 14px; padding: 8px 12px; font-size: 12.5px;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 8px; color: var(--amber);
}

/* ---------- Add Client page (sectioned card) ---------- */
.nc-back { display: inline-block; font-size: 12.5px; margin-bottom: 12px; }
.nc-back:hover { text-decoration: underline; }
.nc-card { max-width: 840px; border-radius: 12px; overflow: hidden; }
.nc-head { padding: 20px 26px 18px; border-bottom: 1px solid var(--line-soft); }
.nc-head h2 { font-size: 16px; font-weight: 750; letter-spacing: -.1px; }
.nc-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.nc-draft-note { font-style: italic; }
.nc-draft-note button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}
.nc-section {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 22px 26px; border-bottom: 1px solid var(--line-soft);
}
.nc-side h3, .nc-payhead h3 { font-size: 13.5px; font-weight: 750; }
.nc-side p, .nc-payhead p { margin: 4px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.nc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.nc-fields-1 { grid-template-columns: 1fr; gap: 14px; }
.nc-fields .f-full { grid-column: 1 / -1; }
.nc-card .field label, .dealx-modal .field label { letter-spacing: .45px; margin-bottom: 5px; }
.req { color: var(--red); }
.field-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--faint); }

/* first payment — opt-in via the toggle switch */
.nc-paysec { padding: 20px 26px 22px; border-bottom: 1px solid var(--line-soft); }
.nc-payhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nc-paybody { margin-top: 16px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.nc-paybody[hidden] { display: none; }
.nc-paynote {
  margin: 0; font-size: 12px; color: var(--amber); line-height: 1.5;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 8px; padding: 8px 10px;
}
.nc-carry { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--faint); }
.nc-carry b { color: var(--muted); }

.switch {
  position: relative; width: 38px; height: 21px; border-radius: 99px;
  border: none; cursor: pointer; background: #cdd6e0; flex: none; padding: 0;
}
.switch.on { background: var(--blue); }
.switch-knob {
  position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.switch.on .switch-knob { left: 19.5px; }

.nc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 26px; background: #fafbfd;
}
.nc-foot-note { font-size: 12px; color: var(--faint); }
.nc-foot-btns { display: flex; gap: 8px; flex: none; margin-left: auto; }
.nc-foot .btn { padding: 8px 16px; }
.nc-foot .btn.primary { padding: 8px 18px; }

/* € prefix inputs (Add Client first payment + Add Entry amounts) */
.eur-wrap { position: relative; }
.eur-wrap .eur {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 13px; pointer-events: none;
}
.eur-wrap .input { padding-left: 24px; }

@media (max-width: 760px) {
  .nc-section, .nc-paybody { grid-template-columns: 1fr; gap: 14px; }
  .nc-fields { grid-template-columns: 1fr; }
  .nc-head, .nc-section, .nc-paysec, .nc-foot { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Add / Edit revenue entry modal ---------- */
.dealx-modal { top: 56px; width: 540px; max-height: calc(100vh - 80px); }
.dealx-form { display: flex; flex-direction: column; min-height: 0; }
.dealx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 0; }
.dealx-head h3 { font-size: 15px; font-weight: 750; }
.dealx-type { padding: 12px 18px 14px; border-bottom: 1px solid var(--line-soft); }
.dealx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--line-soft); border-radius: 9px; padding: 3px; }
.dealx-seg-opt {
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted);
  background: none; border: none; border-radius: 7px; padding: 7px 13px; cursor: pointer;
}
.dealx-seg-opt.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 33, 46, .12); }
.dealx-hint { margin: 8px 2px 0; font-size: 12px; color: var(--faint); }
.dealx-body {
  padding: 16px 18px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 14px; min-height: 0;
}
.dealx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dealx-grid .f-full { grid-column: 1 / -1; }
.dealx-amounts { background: #f7f9fc; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; }
.dealx-salesnote { margin: -6px 2px 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.dealx-salesnote[hidden] { display: none; }
.dealx-value-note { display: flex; align-items: end; }
.dealx-value-note[hidden] { display: none; }
.dealx-value-note p { margin: 0 0 8px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.dealx-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--line-soft);
  background: #fafbfd; border-radius: 0 0 14px 14px;
}
.dealx-summary { font-size: 12px; color: var(--faint); }
.dealx-foot-btns { display: flex; gap: 8px; flex: none; margin-left: auto; }
.dealx-foot .btn.primary { padding-left: 18px; padding-right: 18px; }

/* a card that is only a head (e.g. the collapsed add-entry bar) */
.card > .card-head:last-child { border-bottom: none; }
.stack-form { margin-bottom: 12px; }
.check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.check-label input { accent-color: var(--blue); }

/* group toggle pills (Settings → add person); admin-only fields show once Admin is picked */
.group-pick { display: flex; gap: 6px; }
.group-pick .chip { display: inline-flex; align-items: center; }
.group-pick .chip input { display: none; }
.group-pick .chip:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-act="add-person"]:not(:has([name="gAdmin"]:checked)) .admin-only { display: none; }

/* notes */
.note-item { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.note-item:last-child { border-bottom: none; }
.note-item.pinned { background: #fffdf3; margin: 0 -8px; padding: 9px 8px; border-radius: 7px; }
.note-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11.3px; color: var(--faint); margin-bottom: 2px; }
.note-actions { display: inline-flex; gap: 2px; }
.note-text { font-size: 12.8px; white-space: pre-wrap; }

/* sidebar footer actions */
.foot-actions { display: flex; gap: 6px; margin-top: 10px; }
.foot-btn {
  font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: #93a1b3;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; padding: 5px 10px;
}
.foot-btn:hover { color: #e7ecf3; border-color: rgba(255, 255, 255, .25); }

/* ---------- login screen ---------- */
body.booting .shell { display: none; }

.login-screen { display: none; }
.login-screen.show {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 50;
  background: var(--sidebar);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(8, 14, 22, .35);
  padding: 26px 24px;
}
.login-brand { display: flex; flex-direction: column; gap: 9px; align-items: center; margin: 8px 0 2px; }
.login-logo { display: block; width: 190px; height: auto; }
.login-sub {
  font-size: 10px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .22em;
}
.login-lead { color: var(--muted); font-size: 13px; margin: 14px 0 18px; text-align: center; }
.login-row { margin-bottom: 12px; }
.login-row label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--faint); font-weight: 700; margin-bottom: 4px;
}
.login-row .input { width: 100%; font-size: 13.5px; padding: 9px 11px; }
.login-error { color: var(--red); font-size: 12px; min-height: 16px; margin-bottom: 6px; }
.login-error.ok { color: var(--green); }
.login-card .btn-link { display: block; margin: 10px auto 0; }
.login-btn { width: 100%; justify-content: center; padding: 10px; font-size: 13.5px; }
.login-btn:disabled { opacity: .6; cursor: default; }

/* ---------- notification bell & toasts ---------- */
.notif { position: relative; }
.notif-bell {
  position: relative; width: 32px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
}
.notif-bell:hover { color: var(--ink); border-color: #c8d2de; }
.notif-bell svg { width: 16px; height: 16px; fill: currentColor; }
.notif-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 99px; padding: 1px 5px; min-width: 16px; text-align: center;
}
.notif-count:empty { display: none; }
.notif-menu {
  position: absolute; right: 0; top: 38px; width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(22, 33, 46, .14); z-index: 30;
}
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  font-weight: 700; font-size: 12.5px;
}
.notif-item {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; position: relative;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  padding: 10px 14px 10px 28px;
}
.notif-item:hover { background: #f7f9fc; }
.notif-item:last-child { border-bottom: none; }
.notif-item .n-title { font-weight: 650; font-size: 12.6px; }
.notif-item .n-meta { font-size: 11.3px; color: var(--faint); }
.notif-item.unread::before {
  content: ""; position: absolute; left: 12px; top: 16px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
.notif-empty { padding: 22px 14px; text-align: center; color: var(--faint); font-size: 12.5px; }

#toasts { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast {
  background: var(--ink); color: #eef2f7; border-radius: 10px; padding: 11px 14px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 8px 30px rgba(8, 14, 22, .3);
  cursor: pointer; animation: toast-in .25s ease;
}
.toast b { color: #fff; }
.toast.hide { opacity: 0; transition: opacity .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- local-only mode banner ---------- */
.cloud-banner {
  position: fixed; left: 14px; bottom: 14px; z-index: 40; max-width: 360px;
  background: var(--ink); color: #eef2f7; font-size: 12px; line-height: 1.5;
  border-radius: 10px; padding: 11px 38px 11px 14px; box-shadow: var(--shadow);
}
.cloud-banner strong { color: #fff; }
.cloud-banner button {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: #aeb9c9; font-size: 18px; line-height: 1; cursor: pointer;
}
.cloud-banner button:hover { color: #fff; }

/* ---------- responsive ---------- */
/* smoother momentum scrolling for the horizontally-scrolling tables on touch */
.tbl-wrap { -webkit-overflow-scrolling: touch; }

/* tablet / small laptop: sidebar collapses to a stacked top bar */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  /* min-width:0 lets this grid item shrink to the viewport; without it the
     horizontal nav's min-content width blows the whole grid column out wider
     than the screen and forces page-level horizontal scrolling */
  .sidebar { position: static; height: auto; min-width: 0; }
  /* compact horizontal brand so the nav row sits high on the page */
  .brand { flex-direction: row; align-items: center; gap: 9px; padding: 10px 14px 6px; }
  .brand-logo { width: 124px; }
  .brand-sub { display: none; }
  .nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 8px 8px; }
  .nav a { white-space: nowrap; }
  /* keep export / sign-out reachable instead of hiding the whole footer */
  .sidebar-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .foot-note { display: none; }
  .foot-actions { margin-top: 0; }
  .view, .topbar { padding-left: 14px; padding-right: 14px; }
}

/* ============ phone: native-app shell ============
   A fixed bottom tab bar (reusing the sidebar nav), a sticky frosted top app
   bar, and the dense list tables re-flowed into tappable cards. */
@media (max-width: 700px) {
  /* the sidebar is now just the fixed bottom bar, so drop the shell grid —
     otherwise its empty (stretched) row pushes the content down on short pages */
  .shell { display: block; }

  /* ---- sticky frosted top app bar ---- */
  .topbar {
    position: sticky; top: 0; z-index: 30; min-height: 52px;
    padding: 11px 14px;
    background: rgba(243, 245, 248, .82);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
  }
  .topbar h1 { font-size: 18px; }
  .topbar-user { display: none; }   /* name/role non-essential on a phone */

  /* ---- bottom tab bar (reuses the sidebar nav markup) ---- */
  .brand, .sidebar-foot { display: none; }
  .sidebar { background: none; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    flex-direction: row; justify-content: space-around; align-items: stretch;
    gap: 0; overflow: visible;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    background: rgba(17, 26, 40, .94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .nav a {
    flex: 1 1 0; flex-direction: column; gap: 3px;
    align-items: center; justify-content: flex-start;
    padding: 5px 2px; border-radius: 12px; position: relative;
    font-size: 9.5px; font-weight: 600; letter-spacing: .1px;
    color: #8b98a9; text-align: center; white-space: nowrap;
  }
  .nav a svg { width: 22px; height: 22px; opacity: .85; }
  .nav a:hover { background: none; color: #8b98a9; }
  .nav a.active { background: rgba(255, 255, 255, .1); color: #fff; }
  .nav a.active svg { opacity: 1; }
  /* only the "needs attention" (warn) badge shows as a corner bubble; the
     informational client/onboarding counts are hidden on the compact bar */
  .nav .count { display: none; }
  .nav .count.warn:not(:empty) {
    position: absolute; top: 0; left: calc(50% + 3px);
    display: flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    font-size: 9.5px; font-weight: 800;
    color: #fff; background: var(--red); border: 1.5px solid #111a28; border-radius: 99px;
  }
  /* the login overlay must sit above the fixed bottom bar */
  .login-screen.show { z-index: 60; }

  /* content clears the fixed bottom bar */
  .view { padding: 12px 12px calc(82px + env(safe-area-inset-bottom)); }

  /* ---- scaled type & single-column layouts ---- */
  /* the greeting hero stacks: callouts drop below the serif greeting */
  .dash-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 16px; }
  .dash-hello { font-size: 27px; }
  /* !important overrides the inline 6-column grid the revenue view sets, which
     would otherwise stay 6-up and spill its values off-screen on a phone. */
  .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; gap: 8px; }
  .grid-2, .grid-23, .onb-grid { grid-template-columns: 1fr; }
  .checklist, .onb-items { grid-template-columns: 1fr; }

  /* filters fill the width */
  .filters .input.search { width: 100%; }
  .filters .input, .filters .select, .filters .msel { flex: 1 1 140px; }
  .filters .msel-trigger { width: 100%; min-width: 0; }
  .result-count { margin-left: 0; width: 100%; }
  /* the primary CTA (New Task / Add Client) spans the row as a clear tap target */
  .filters .btn.primary { flex: 1 1 100%; justify-content: center; }

  /* tab bars (client profile, tasks page) scroll sideways instead of overflowing
     the viewport and forcing page-level horizontal scroll */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; }

  /* ---- touch targets ---- */
  .btn, .select, .input, .chip, .msel-trigger, .dealx-seg-opt { min-height: 44px; }
  .tab { min-height: 44px; display: inline-flex; align-items: center; }
  .icon-btn { min-height: 34px; padding: 6px 10px; }
  input[type=checkbox] { width: 20px; height: 20px; }

  /* iOS Safari zooms the whole page in when a focused field's font-size is
     under 16px — and leaves it zoomed until you pinch back out. Every
     text-entry control gets 16px on phones; !important beats the per-component
     sizes set above (12.5–13.5px). */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; }

  /* spacing / profile */
  .card-head { padding: 12px 14px; }
  .card-body { padding: 13px 14px; }
  .profile-head { padding: 14px; gap: 12px; }
  .profile-kpis { gap: 14px 18px; padding: 14px; }
  .profile-actions { align-items: stretch; width: 100%; }
  .profile-actions-btns { width: 100%; }
  .profile-actions-btns .btn { flex: 1; justify-content: center; }
  .kv-row { grid-template-columns: 96px 1fr; gap: 4px 10px; }
  .section-title { margin: 18px 0 8px; }

  /* ---- dense list tables → cards ----
     .tbl--cards  : standalone lists (clients, tasks) — strip the outer card so
                    each row becomes its own card on the page background.
     .tbl--rows   : lists that live inside a headed card (revenue months, the
                    dashboard "needs attention" widget) — keep the outer card,
                    render rows as divider-separated blocks. */
  .card:has(.tbl--cards) { border: none; background: none; box-shadow: none; margin-bottom: 0; }
  .card:has(.tbl--cards) > .card-body { padding: 0; }
  .tbl-wrap:has(.tbl--cards), .tbl-wrap:has(.tbl--rows) { overflow: visible; }
  /* the revenue table is fixed to 960px on desktop; let it reflow on a phone */
  .tbl--cards, .tbl--rows { min-width: 0 !important; }

  .tbl--cards, .tbl--cards tbody,
  .tbl--rows, .tbl--rows tbody { display: block; width: 100%; }
  .tbl--cards thead, .tbl--rows thead { display: none; }

  .tbl--cards tr {
    display: block; position: relative;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--shadow);
    padding: 13px 15px; margin: 0 0 10px;
  }
  /* rows lay out as a flex column so the title can lead regardless of column
     order; horizontal padding lines the content up with the card header */
  .tbl--rows tr {
    display: flex; flex-direction: column; position: relative;
    padding: 12px 15px 13px; border-top: 1px solid var(--line-soft);
  }
  .tbl--rows tbody tr:first-child { border-top: none; }
  .tbl--cards tr.rowlink:active, .tbl--rows tr.rowlink:active { background: #f7f9fc; }

  .tbl--cards td, .tbl--rows td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 4px 0; border: none; max-width: none;
    white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px;
  }
  .tbl--cards td::before, .tbl--rows td::before {
    content: attr(data-label); flex: none;
    color: var(--faint); font-weight: 700; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .4px;
  }
  /* transactional lists (revenue, needs-attention) read as a left-aligned
     definition list — label then value — instead of values flung to the far
     right, and the title leads the card */
  .tbl--rows td { justify-content: flex-start; gap: 12px; align-items: baseline; padding: 3px 0; text-align: left; }
  .tbl--rows td::before { flex: 0 0 84px; text-align: left; }
  .tbl--rows td.card-title { order: -1; }
  .tbl--rows td.na-hide { display: none; }
  /* title row: name, prominent, no label, full width.
     .tbl.tbl--… raises specificity above `.tbl tr:last-child td` so the divider
     under the title still shows on the last card/entry in a list */
  .tbl.tbl--cards td.card-title, .tbl.tbl--rows td.card-title {
    display: block; padding: 0 0 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft); font-size: 15px; font-weight: 650;
  }
  .tbl--cards td.card-title::before, .tbl--rows td.card-title::before { display: none; }
  .tbl--cards td.card-title .name-cell, .tbl--rows td.card-title .name-cell { white-space: normal; }
  .tbl--cards td.card-title .niche, .tbl--rows td.card-title .niche { max-width: none; font-size: 12px; }
  /* empty-state + inline edit form span the full width with no label */
  .tbl--cards td.empty, .tbl--rows td.empty,
  .tbl--cards td[colspan], .tbl--rows td[colspan] { display: block; text-align: center; }
  .tbl--cards td.card-form, .tbl--rows td.card-form { text-align: left; }
  .tbl--cards td.empty::before, .tbl--rows td.empty::before,
  .tbl--cards td[colspan]::before, .tbl--rows td[colspan]::before { display: none; }

  /* a row whose only content is its title (e.g. a revenue "Details: —") stays tidy */
  .tbl--rows td.card-act { position: absolute; right: 14px; top: 12px; padding: 0; display: block; }
  .tbl--rows td.card-act::before { display: none; }
  .tbl--rows tr:has(.card-act) { padding-right: 62px; }

  /* clients: keep the card tight — drop the lower-value columns */
  .cards-clients td[data-label="Joined"],
  .cards-clients td[data-label="Member for"],
  .cards-clients td[data-label="CSM"] { display: none; }
  /* program name and days-left each get their own card row (e.g. "Program  DWY" / "Days left  4 months left") */
  .cards-clients td[data-label="Program"] { text-align: right; }
  .cards-clients td[data-label="Program"] .name-cell { white-space: normal; }

  /* tasks: a roomier card — checkbox + title lead; the trash only needs to
     clear the title, so meta rows use the full width and breathe more */
  .cards-tasks tr { padding: 16px 16px 17px 50px; min-height: 58px; }
  .cards-tasks td { padding: 6px 0; }
  .tbl.cards-tasks td.card-title { padding: 0 40px 12px 0; margin-bottom: 11px; line-height: 1.35; }
  .cards-tasks td.card-check { position: absolute; left: 16px; top: 17px; padding: 0; display: block; }
  .cards-tasks td.card-check::before { display: none; }
  .cards-tasks td.card-check input { width: 22px !important; height: 22px !important; }
  .cards-tasks td.card-act { position: absolute; right: 11px; top: 13px; padding: 0; display: block; }
  .cards-tasks td.card-act::before { display: none; }
  .cards-tasks td.card-act .icon-btn {
    width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0; color: var(--faint); background: none;
  }
  .cards-tasks td.card-act .icon-btn::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .cards-tasks td.card-act .icon-btn:active { color: var(--red); background: var(--red-bg); }

  /* a task and its review/reply detail row read as one continuous card */
  .tbl--cards tr.task-row-main { margin-bottom: 0; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .tbl--cards tr.task-sub { margin-top: 0; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; padding: 0 16px 16px; min-height: 0; }
  .tbl--cards tr.task-sub td { display: block; padding: 0; border-bottom: none; }
  .tbl--cards tr.task-sub td::before { display: none; }

  /* ---- task rows (dashboard focus, profile Tasks tab, Tasks view) ----
     The desktop row is a single flex line whose fixed cells (due · divider ·
     avatars · chevron) leave the title a strip a few words wide. Let the row
     wrap: checkbox + priority + title share the top line, due + avatars drop
     to a second line. !important beats the templates' inline styles. */
  .tr-row, .tr-row .tr-main { flex-wrap: wrap; row-gap: 5px; }
  .tr-row .tr-titlecell { flex: 1 1 55% !important; }
  /* the ::after element is a forced line break: everything ordered after it —
     due · done stamp · In Progress pill · avatars — always forms the meta line,
     whether or not a short title left room beside it */
  .tr-row::after, .tr-row .tr-main::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .tr-row .ts-due, .tr-row .ts-done, .tr-row .tr-ip, .tr-row .tr-who { order: 2; }
  .tr-row .ts-due { width: auto !important; justify-content: flex-start !important; margin-left: 30px; }
  .tr-row .ts-done { margin-left: 30px; }
  .tr-row .ts-donesep, .tr-row .tr-ipsep, .tr-row .tr-divider, .tr-row .tr-chev { display: none !important; }
  .tr-row .tr-who { width: auto !important; margin-left: auto; }

  /* ---- dashboard "Payments due" rows ----
     name + amount lead; the truncated plan label and the urgency chip get a
     full-width second line instead of squeezing the name into a two-line wrap.
     The ::after element is the forced line break between the two. */
  .dash-payrow { flex-wrap: wrap; row-gap: 5px; }
  .dash-payrow::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .dash-paymain { order: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .dash-paymeta { white-space: normal; }
  .dash-payamt { order: 2; width: auto; margin-left: auto; }
  .dash-paychip { order: 4; margin-left: 29px; }

  /* ---- payment schedules (profile Payments tab, Revenue → Due) ----
     The 6-column table reflows into stacked blocks: date + amount lead, the
     instalment label gets its own line, status + actions close the row. As a
     table it forces page-level sideways panning and puts the ⋯ menu (and the
     Due tab's trailing columns) out of reach. */
  .pay-table, .pay-table tbody { display: block; width: 100%; }
  .pay-table colgroup, .pay-table thead { display: none; }
  .pay-table tr { display: block; border-bottom: 1px solid var(--line-soft); }
  .pay-table tbody tr:last-child { border-bottom: 0; }
  .pay-table tr.pay-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 11px 14px; }
  .pay-table td { display: block; border: none; padding: 0; }
  .pay-table .pay-c-check { order: 0; flex: none; width: auto; }
  .pay-table .pay-c-date { order: 1; flex: 1; min-width: 0; }
  .pay-table .pay-c-amt { order: 2; margin-left: auto; font-weight: 700; }
  .pay-table .pay-c-client { order: 3; flex-basis: 100%; padding-left: 30px; }
  .pay-table .pay-c-inst { order: 4; flex-basis: 100%; padding-left: 30px; }
  .pay-table .pay-c-status { order: 5; padding-left: 30px; }
  .pay-table .pay-c-act { order: 6; margin-left: auto; width: auto; }
  /* month dividers, the inline edit form and empty states span the full width */
  .pay-table .rev-month-row td, .pay-table .pay-edit-row td, .pay-table td.empty { padding: 9px 14px; }
  .pay-table .rev-month-row td { background: var(--bg); font-weight: 800; font-size: 12px; }
  .pay-table .pay-edit-row td { background: var(--blue-bg); }
  .pay-table td.empty { text-align: center; }

  /* toasts / banners span the viewport; lift the local-mode banner above the bar */
  #toasts { left: 10px; right: 10px; max-width: none; }
  .cloud-banner { left: 10px; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: none; }
  .notif-menu { width: calc(100vw - 28px); right: -8px; }
}