/* Auth gate — blocks the app shell until the gateway session is verified. */
.auth-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-background-primary);
}
.auth-gate-card {
  text-align: center; max-width: 320px; padding: 2rem;
}
.auth-gate-mark {
  font-size: 2rem; font-weight: 700; color: var(--accent);
  margin-bottom: 1rem; letter-spacing: 0.02em;
}
.auth-gate-status {
  color: var(--color-text-secondary); font-size: 14px; margin-bottom: 1.5rem;
}
.auth-gate-btn {
  display: inline-block; padding: 0.6rem 2rem; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--color-background-primary);
  font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer;
}
.auth-gate-btn:hover { opacity: 0.9; }
.auth-gate[hidden] { display: none; }
.auth-gate-progress {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 1rem;
}
.auth-gate-progress .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: 0.25;
  animation: ag-pulse 1.2s ease-in-out infinite;
}
.auth-gate-progress .dot:nth-child(2) { animation-delay: 0.2s; }
.auth-gate-progress .dot:nth-child(3) { animation-delay: 0.4s; }
.auth-gate-progress[hidden] { display: none; }
@keyframes ag-pulse { 0%,100%{opacity:.25} 50%{opacity:1} }

/* App shell + shared components. Mirrors the mockup's flat, small-type aesthetic. */
* { box-sizing: border-box; }
body {
  background: var(--color-background-primary); color: var(--color-text-primary);
  font-family: var(--font-sans); font-size: 13px; margin: 0;
  padding: 20px; max-width: 1180px; margin: 0 auto;
}
.app-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
#brand { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
#tagline { color: var(--color-text-tertiary); font-size: 12px; }
.jobno { margin-left: auto; font-size: 11px; color: var(--color-text-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: 100px; padding: 2px 10px; }
.jobno b { color: var(--color-text-info); }
.private-badge { font-size: 10px; color: var(--color-text-tertiary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 100px; padding: 2px 8px; }

#conn-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.conn { font-size: 10px; padding: 2px 8px; border-radius: 100px; border: 0.5px solid var(--color-border-tertiary); color: var(--color-text-tertiary); }
.conn.live { color: var(--color-text-success); border-color: var(--color-text-success); }
.conn.stub { color: var(--color-text-warn); border-color: var(--color-text-warn); }

.tabs { display: flex; gap: 22px; border-bottom: 0.5px solid var(--color-border-tertiary);
  padding: 0 0 8px; align-items: center; margin: 12px 0 16px; }
.tab { font-size: 14px; color: var(--color-text-tertiary); cursor: pointer; padding: 4px 0;
  border-bottom: 2px solid transparent; user-select: none; }
.tab.active { color: var(--color-text-primary); font-weight: 500; border-bottom-color: var(--color-text-info); }

/* status dots + badges (shared) */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; }
.dot.done { background: var(--st-done); } .dot.active { background: var(--st-active); }
.dot.next { background: var(--st-next); } .dot.blocked { background: var(--st-blocked); }
.dot.planned { border: 1.5px solid var(--st-planned); background: transparent; }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 100px; border: 0.5px solid; white-space: nowrap; }
.badge.done { color: var(--st-done); border-color: var(--st-done); }
.badge.active { color: var(--st-active); border-color: var(--st-active); }
.badge.next { color: var(--st-next); border-color: var(--st-next); }
.badge.blocked { color: var(--st-blocked); border-color: var(--st-blocked); }
.badge.planned { color: var(--st-planned); border-color: var(--st-planned); }

.flag { font-size: 10px; padding: 2px 7px; border-radius: 4px; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.flag.warn { background: var(--color-background-warn); color: var(--color-text-warn); }
.flag.info { background: var(--color-background-info); color: var(--color-text-info); }
.flag-clear {
  background: none; border: none; padding: 0 0 0 5px; margin: 0; cursor: pointer;
  color: inherit; font-size: 12px; line-height: 1; opacity: 0.6; vertical-align: middle;
}
.flag-clear:hover { opacity: 1; }
/* Activity-signal badge (S21.6) — dashed outline reads as a live signal, visually distinct from
   the solid pipeline-stage chips so "Quote pending" (activity) isn't mistaken for a stage. */
.flag.act-flag { background: transparent; border: 1px dashed var(--color-border-secondary); color: var(--color-text-secondary); }
.flag.act-flag.info { border-color: var(--color-text-info); }
.flag.act-flag.warn { border-color: var(--color-text-warn); }
.act-lead { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); margin-right: 4px; }

.muted { color: var(--color-text-tertiary); font-size: 12px; }
.error { color: var(--color-text-danger); font-size: 13px; }
.filter-bar { margin-bottom: 10px; }
.filter-bar input { width: 100%; padding: 5px 9px; border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }
.btn { font-size: 11px; padding: 4px 10px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: var(--color-text-primary); cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--color-background-secondary); }
.edit-btn { margin-left: auto; }
.ef { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.ef span { color: var(--color-text-secondary); }
.ef input, .ef select, .ef textarea { flex: 0 1 260px; padding: 5px 9px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }
.ef textarea { resize: vertical; }
.ef-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ef-inline { display: flex; gap: 6px; flex: 0 1 260px; }
.ef-grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.ef-grid .ef input, .ef-grid .ef textarea { flex: 1; width: 100%; max-width: none; }

/* Compliance module */
.comp-form { padding: 12px 0; }
.comp-form-head { margin-bottom: 14px; }
.comp-type-sel { padding: 6px 10px; border: 1px solid var(--color-border-secondary); border-radius: 8px; background: transparent; color: inherit; font-size: 13px; font-family: inherit; }
.ef-inline input { flex: 1; min-width: 0; padding: 5px 9px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }

/* Lead/Job cockpit (rich detail pane) */
.detail-meta a { color: var(--color-text-info, #4a8fd6); text-decoration: none; }
.detail-meta a:hover { text-decoration: underline; }
.money-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.money-cell { background: var(--color-background-secondary); border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 8px 6px; text-align: center; }
.mc-n { font-size: 15px; font-weight: 600; }
.mc-n.overdue { color: var(--color-text-danger, #e05555); }
.mc-l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); margin-top: 2px; }
.quick-actions { display: flex; gap: 6px; align-items: center; margin: 10px 0; }
.quick-actions select { padding: 5px 8px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }
.log-add { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.log-add input { flex: 1; padding: 5px 9px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }
.log-add #note-input { flex: 1 1 140px; }
.log-add .when-input { flex: 0 0 auto; }
.log-add .when-btn { flex: 0 0 auto; background: transparent; border: 0.5px dashed var(--color-border-secondary); color: var(--color-text-secondary); border-radius: var(--border-radius-md); font-size: 11px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.log-add .when-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); }
.log-add select { padding: 5px 7px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }
/* Due-date badge (leads + proposals) — overdue red, ≤3d amber, else neutral. */
.due-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.due-badge.overdue { background: #d24b5a22; color: #e0697a; border: 1px solid #d24b5a55; }
.due-badge.soon { background: #e8902a22; color: #f0a850; border: 1px solid #e8902a55; }
.due-badge.future { background: var(--surface-2, #2a2f3a); color: var(--color-text-secondary); border: 1px solid var(--color-border-secondary); }
.timeline { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.tl-item { display: flex; gap: 8px; align-items: flex-start; }
.tl-kind { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; text-transform: uppercase; line-height: 1.5; }
.tl-kind.next { background: var(--color-background-info); color: var(--color-text-info); }
.tl-kind.info { background: var(--color-background-info); color: var(--color-text-info); }
.tl-kind.active { background: var(--color-background-warn); color: var(--color-text-warn); }
.tl-kind.planned { background: var(--color-background-secondary); color: var(--color-text-tertiary); }
.tl-body { flex: 1; min-width: 0; }
.tl-text { font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.tl-meta { font-size: 10px; margin-top: 2px; }
.tl-jumps { margin-left: 6px; display: inline-flex; gap: 6px; }
.tl-jump { color: var(--accent, #4a8fd6); text-decoration: none; font-weight: 600; white-space: nowrap; }
.tl-jump:hover { text-decoration: underline; }
.tl-opts { display: flex; gap: 5px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tl-filter { font-size: 10px; padding: 2px 9px; border: 0.5px solid var(--color-border-secondary); border-radius: 999px; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-family: inherit; }
.tl-filter:hover { background: var(--color-background-secondary); }
.tl-filter.active { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-text-info); }
.tl-count { margin-left: auto; font-size: 10px; }
.tl-scroll { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding-right: 4px; }

/* Source-system deep links */
.src-link { font-size: 10px; color: var(--color-text-info, #4a8fd6); text-decoration: none; white-space: nowrap; }
.src-link:hover { text-decoration: underline; }
a.flag.info { text-decoration: none; }

/* Money module tables */
.money-scroll { max-height: 240px; overflow-y: auto; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); overscroll-behavior: contain; }
.money-scroll .money-tbl { margin-top: 0; }
.money-scroll .money-tbl thead th { position: sticky; top: 0; background: var(--color-background-primary, #10171f); z-index: 1; }
/* Sortable table headers */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--color-text-primary, #e6edf3); }
th.th-sort::after { content: ''; display: inline-block; width: 10px; opacity: 0.3; font-style: normal; }
th.th-sort[data-sort-dir="asc"]::after  { content: ' ▲'; opacity: 1; }
th.th-sort[data-sort-dir="desc"]::after { content: ' ▼'; opacity: 1; }
.money-river-hd { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.cf-range-bar { display: flex; gap: 4px; }
.cf-range-btn { background: none; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-tertiary); border-radius: 5px; padding: 2px 7px; font-size: 10px; cursor: pointer; font-family: inherit; }
.cf-range-btn.active { border-color: var(--color-text-info, #4b9cf5); color: var(--color-text-info, #4b9cf5); }
.money-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.money-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); padding: 4px 8px; border-bottom: 0.5px solid var(--color-border-secondary); }
.money-tbl td { padding: 5px 8px; border-bottom: 0.5px solid var(--color-border-secondary); }
.money-tbl .r { text-align: right; }
.money-tbl td.od { color: var(--color-text-danger, #e05555); font-weight: 600; }
.money-cell.clickable { cursor: pointer; }
.money-cell.clickable:hover { border-color: var(--color-text-tertiary); }
.money-cell.kpi-active { outline: 1px solid var(--color-text-info); }
.ms-row { cursor: pointer; }
.ms-row:hover td { background: var(--color-background-secondary); }
.ms-row.active td { background: var(--selected-bg); }
.ms-row.active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cf-head { display: flex; align-items: center; margin-bottom: 10px; font-size: 12px; }

/* Comms color-coding + detail */
.cm-card { cursor: pointer; }
.cm-card:hover { border-color: var(--color-text-tertiary); }
.cm-card.selected { outline: 1px solid var(--color-text-info); }
.cm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.cm-badge { font-size: 9px; padding: 1px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cm-daysep { position: sticky; top: 0; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); background: var(--bg); padding: 6px 4px 4px; border-bottom: 1px solid var(--color-border-secondary); margin-top: 4px; }
.cm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.cm-jumps { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.cm-fulltext { font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow-y: auto; }
.cm-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--color-text-secondary); user-select: none; margin-left: 8px; }
.cm-toggle-label { font-weight: 600; }
.cm-toggle-track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--color-border-secondary); transition: background 0.2s; flex: 0 0 auto; }
.cm-toggle-track.on { background: var(--accent); }
.cm-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-text-primary); transition: left 0.2s; }
.cm-toggle-track.on .cm-toggle-thumb { left: 18px; }

/* ============================ DESIGN UPGRADE (polished dark) ============================ */
html { background: var(--bg); }
body { background: var(--bg-grad); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 1280px; padding: 22px 26px 64px; }

.app-head { align-items: center; gap: 11px; margin-bottom: 2px; }
#brand { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(92deg, var(--color-text-primary) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#tagline { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.jobno, .private-badge { background: var(--surface-1); border-color: var(--color-border-secondary); }
#conn-bar { margin: 0; }
.conn { background: var(--surface-1); border-color: var(--color-border-tertiary); }

/* tab strip — scrollable, sleek */
.tabs { gap: 1px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; border-bottom: 1px solid var(--color-border-tertiary); padding: 0; margin: 14px 0 20px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { height: 0; }
.tab { font-size: 12.5px; padding: 8px 13px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; transition: color .12s, background .12s, border-color .12s; }
.tab:hover { color: var(--color-text-secondary); background: var(--surface-1); }
.tab.active { color: var(--color-text-primary); font-weight: 600; border-bottom-color: var(--accent); background: linear-gradient(180deg, transparent, var(--accent-dim)); }

/* buttons */
.btn { background: var(--surface-2); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-3); }
.btn-primary { background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent); border-radius: var(--border-radius-md); font-weight: 600; cursor: pointer; font-family: inherit; font-size: 11px; padding: 5px 12px; transition: filter .12s; }
.btn-primary:hover { filter: brightness(1.08); }

/* inputs / focus */
input, select, textarea { background: var(--surface-2); border: 1px solid var(--color-border-secondary); color: var(--color-text-primary); transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

/* badges — filled-subtle */
.badge { border: 1px solid transparent; font-weight: 600; }
.badge.done { color: var(--st-done); background: var(--st-done-bg); }
.badge.active { color: var(--st-active); background: var(--st-active-bg); }
.badge.next { color: var(--st-next); background: var(--st-next-bg); }
.badge.blocked { color: var(--st-blocked); background: var(--st-blocked-bg); }
.badge.planned { color: var(--st-planned); background: var(--st-planned-bg); }
.badge.test { color: var(--color-text-warn); background: var(--st-planned-bg); border-color: currentColor; }
.flag.info { background: var(--st-next-bg); color: var(--st-next); }
.flag.warn { background: var(--st-active-bg); color: var(--st-active); }

/* filter chips → pills */
.filter-btn { background: var(--surface-1); border: 1px solid var(--color-border-tertiary); border-radius: 999px; padding: 4px 12px; font-size: 11px; color: var(--color-text-secondary); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.filter-btn:hover { background: var(--surface-2); color: var(--color-text-primary); }
.filter-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.proj-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

/* cards & surfaces */
.dq-card, .ov-card, .money-cell, .cfg-card { background: var(--surface-1); border-color: var(--color-border-tertiary); }
.dq-card, .ov-card { transition: border-color .12s, transform .08s; }
.dq-card:hover, .ov-card:hover { border-color: var(--color-border-secondary); }
.log-jump { background: none; border: none; color: var(--color-text-tertiary); cursor: pointer; font-size: 12px; padding: 1px 4px; border-radius: var(--border-radius-sm); flex-shrink: 0; }
.log-jump:hover { color: var(--accent); background: var(--surface-3); }
.detail { background: var(--surface-1); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 16px; }
.detail-title { font-weight: 700; letter-spacing: -0.01em; }
.job-row { border-radius: var(--border-radius-md); transition: background .1s; padding: 6px 8px; }
.job-row:hover { background: var(--surface-1); }
.job-row.selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--accent); }
.sect { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-tertiary); font-weight: 600; margin: 16px 0 7px; }
.pipeline { background: var(--surface-1); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 6px 10px; }
.money-cell { box-shadow: var(--shadow-1); }

/* Pipeline's big control panel (double-click a row) — same .detail family,
   laid out as a section-jump rail + two content columns since it has the
   room the sidebar doesn't. */
.bp-panel { border: none; padding: 0; background: none; }
.bp-body { display: flex; gap: 20px; margin-top: 10px; align-items: flex-start; }
.bp-rail { display: flex; flex-direction: column; gap: 2px; flex: 0 0 130px; position: sticky; top: 0; }
.bp-rail-btn { text-align: left; background: none; border: none; border-radius: var(--border-radius-md); padding: 7px 10px; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; font-family: inherit; }
.bp-rail-btn:hover { background: var(--surface-2); color: var(--color-text-primary); }
.bp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; min-width: 0; }
.bp-col .tl-scroll { max-height: 58vh; }
@media (max-width: 900px) { .bp-cols { grid-template-columns: 1fr; } .bp-body { flex-direction: column; } .bp-rail { flex-direction: row; flex-wrap: wrap; position: static; } }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2e333d; }
::-webkit-scrollbar-track { background: transparent; }

/* Entity focus bar (Overview) */
.focus-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-tertiary); }
.focus-chip { background: var(--surface-1); border: 1px solid var(--color-border-tertiary); border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.focus-chip:hover { background: var(--surface-2); color: var(--color-text-primary); }
.focus-chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }

/* Large text → always scrollable panes */
.digest { max-height: 300px; overflow-y: auto; }
.dec-text { max-height: 340px; overflow-y: auto; }
.dq-desc { max-height: 200px; overflow-y: auto; }

/* Overview module */
.digest { font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 10px 0 2px; font-family: var(--font-mono, ui-monospace, monospace); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ov-card { border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 10px 12px; background: var(--color-background-secondary); cursor: pointer; }
.ov-card:hover { border-color: var(--color-text-tertiary); }
.ov-head { display: flex; align-items: center; gap: 7px; }
.ov-name { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-pct { font-size: 11px; color: var(--color-text-tertiary); }
.ov-bar { height: 4px; border-radius: 2px; background: var(--color-border-secondary); margin: 7px 0; overflow: hidden; }
.ov-fill { height: 100%; border-radius: 2px; background: var(--color-text-info, #4a8fd6); }
.ov-fill.done { background: #2ecc9a; } .ov-fill.active { background: #d4922a; } .ov-fill.blocked { background: #c94f5f; }
.ov-sub { font-size: 10px; margin-bottom: 3px; }
.ov-next { font-size: 11px; line-height: 1.4; }

/* Plan module */
.plan-tasks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.plan-task { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.pt-name { flex: 1; min-width: 0; }
.pt-who { font-size: 10px; white-space: nowrap; }
.pt-status { font-size: 11px; padding: 3px 6px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; }

.plan-sprint-summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: default; }
.plan-sprint-summary::-webkit-details-marker { display: none; }
details.plan-sprint > summary::before { content: '▸ '; font-size: 10px; }
details.plan-sprint[open] > summary::before { content: '▾ '; }
.plan-sprint-name { font-weight: 500; }
.plan-sprint-meta { font-size: 11px; margin-right: auto; }
.plan-sprint-active > summary .plan-sprint-name::before { content: '◉ '; color: var(--color-text-info, #4b9cf5); font-size: 10px; }
.plan-sprint-active { border-color: var(--color-text-info, #4b9cf5) !important; }

.plan-pin-btn, .plan-launch-btn {
  background: none; border: 0.5px solid var(--color-border-secondary); border-radius: 5px;
  color: var(--color-text-tertiary); cursor: pointer; font-size: 11px; padding: 2px 7px;
  font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.plan-pin-btn:hover, .plan-launch-btn:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); }
.plan-pin-btn.active { color: var(--color-text-info, #4b9cf5); border-color: var(--color-text-info, #4b9cf5); }
.plan-launch-btn { color: var(--color-text-info, #4b9cf5); border-color: var(--color-text-info, #4b9cf5); }
.plan-launch-btn:hover { background: rgba(75,156,245,.1); }

.plan-launch-panel { margin: 8px 0 4px; padding: 10px 12px; background: var(--surface-2, #1b2128); border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); }
.plp-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.plp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.plp-label { font-size: 11px; color: var(--color-text-tertiary); flex: 0 0 120px; }
.plp-btn { background: none; border: 0.5px solid var(--color-border-secondary); border-radius: 5px; color: var(--color-text-secondary); cursor: pointer; font-size: 11px; padding: 3px 10px; font-family: inherit; text-decoration: none; display: inline-block; }
.plp-btn:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.plp-pre { font-size: 10px; line-height: 1.5; background: var(--color-background-primary, #10171f); border: 0.5px solid var(--color-border-tertiary); border-radius: 4px; padding: 8px 10px; margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow-y: auto; color: var(--color-text-secondary); }

/* Tasks (Todoist) module */
.td-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.td-task { display: flex; gap: 9px; align-items: flex-start; }
.td-task.td-sub { margin-left: 22px; }
.td-check { flex: none; width: 18px; height: 18px; padding: 0; border: 0.5px solid var(--color-border-secondary); border-radius: 50%; background: transparent; color: var(--color-text-tertiary); cursor: pointer; font-size: 11px; line-height: 1; }
.td-check:hover { color: #2ecc9a; border-color: #2ecc9a; }
.td-body { flex: 1; min-width: 0; }
.td-content { font-size: 12px; line-height: 1.4; }
.td-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 10px; }
.td-label { font-size: 9px; padding: 1px 6px; border-radius: 3px; background: var(--color-background-secondary); color: var(--color-text-tertiary); }
.td-task { cursor: pointer; padding: 4px 6px; border-radius: var(--border-radius-md); }
.td-task:hover { background: var(--color-background-secondary); }
.td-task.selected { background: var(--color-background-info); }
.filter-btn.sm { font-size: 10px; padding: 2px 8px; }
.td-quickadd { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.td-quickadd input, .td-quickadd select { padding: 5px 8px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; }
.td-quickadd #qa-content { flex: 1; min-width: 160px; }
/* Task detail */
.td-detail .td-title-input { width: 100%; font-size: 15px; font-weight: 600; padding: 6px 8px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; margin-bottom: 10px; }
.td-row { display: flex; gap: 10px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.td-lbl { font-size: 11px; color: var(--color-text-tertiary); width: 64px; flex: none; }
.td-pbtn { font-size: 10px; padding: 3px 9px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; cursor: pointer; color: var(--color-text-secondary); font-family: inherit; }
.td-pbtn.on { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-text-info); }
.td-dueq { font-size: 10px; padding: 3px 8px; }
.td-due, .td-prio, .td-labels { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.td-due input[type=date] { padding: 4px 6px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 11px; }
.td-label.edit { cursor: pointer; }
.td-desc { width: 100%; padding: 6px 8px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-family: inherit; font-size: 12px; resize: vertical; margin-bottom: 6px; }
.td-subs { display: flex; flex-direction: column; gap: 4px; }
.td-subrow { display: flex; gap: 7px; align-items: center; font-size: 12px; }
.td-cmts { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.td-cmt { border-left: 2px solid var(--color-border-secondary); padding: 3px 9px; }

/* Clickable funnel counters (Leads) */
.pl-stage.clickable { cursor: pointer; border-radius: var(--border-radius-md); padding: 4px 8px; transition: background 0.1s; }
.pl-stage.clickable:hover { background: var(--color-background-secondary); }
.pl-stage.active { background: var(--color-background-info); outline: 1px solid var(--color-text-info); }

.act-callout { display: flex; align-items: center; gap: 8px; margin: 9px 0; padding: 7px 10px; background: var(--surface-2); border-radius: var(--border-radius-md); font-size: 11px; line-height: 1.4; }

/* Shared task modal — z-index must beat #app-detail-ov (100000, see detail.js). ui.confirm/prompt
 * are routinely opened FROM WITHIN a detail panel (e.g. merge.js's "Merge into survivor" confirm);
 * at the old z-index:200 that confirm rendered invisibly behind the still-open detail panel — the
 * click never reached it, so nothing happened. Real bug, not user error (found 2026-08-05). */
.modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 200000; backdrop-filter: blur(2px); }
.modal { background: var(--surface-1); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-lg); padding: 16px; width: 440px; max-width: 92vw; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 8px; }
.modal-h { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.modal textarea, .modal input, .modal select { width: 100%; padding: 7px 9px; border-radius: var(--border-radius-md); font-family: inherit; font-size: 13px; }
.modal .tm-anchor { font-size: 11px; margin: -4px 0 4px; }
.modal .ui-ask-msg { font-size: 13px; color: var(--color-text-secondary); white-space: pre-line; margin-bottom: 2px; }

/* Skeleton loading rows (vk.skeleton — L2). Shimmer via background-position; tokens only. */
.vk-skel-list { padding: 4px 2px; }
.vk-skel-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.vk-skel { display: inline-block; height: 12px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: vk-shimmer 1.4s linear infinite; }
.vk-skel-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vk-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vk-skel-sub { height: 9px; opacity: 0.6; }
.vk-skel-pill { width: 52px; height: 16px; border-radius: 999px; flex: none; }
@keyframes vk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vk-skel { animation: none; } }
.vk-skel-note { text-align: center; padding: 8px 0 4px; font-size: 12px; color: var(--color-text-secondary); animation: vk-note-in 0.3s ease; }
@keyframes vk-note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Shared load-failure card (vk.errorCard) — the standard "couldn't load, try again" state. */
.vk-err { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 32px 20px; color: var(--color-text-secondary); }
.vk-err-compact { padding: 22px 14px; gap: 8px; }
.vk-err-icon { font-size: 22px; line-height: 1; color: var(--color-text-warn); }
.vk-err-msg { max-width: 42ch; font-size: 13.5px; line-height: 1.5; color: var(--color-text-primary); }
.vk-err-retry { padding: 6px 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-secondary); background: var(--surface-2); color: var(--color-text-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.vk-err-retry:hover { background: var(--surface-3); }
.vk-err-retry:active { transform: translateY(1px); }

/* Stale-data overlay — grays painted content, floats error banner on top.
   Data stays visible and readable; overlay signals "not live" without destroying context. */
.vk-stale > *:not(.vk-stale-overlay) { opacity: 0.35; pointer-events: none; filter: grayscale(0.5); transition: opacity 0.3s, filter 0.3s; }
.vk-stale-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 32px; z-index: 10; pointer-events: none; }
.vk-stale-banner { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--border-radius-lg); background: var(--surface-2); border: 1px solid var(--color-border-secondary); box-shadow: var(--shadow-2); font-size: 13px; color: var(--color-text-secondary); animation: vk-note-in 0.3s ease; }
.vk-stale-icon { font-size: 16px; flex: 0 0 auto; }
.vk-stale-msg { flex: 1; }

/* Friendly date field (vk.dateField) — free-type text + native picker button; canonical ISO on the
   hidden native input. Type "7/4", "Jul 4", or "today"; 📅 opens the calendar. */
.vk-df-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.vk-df-text { flex: 1; min-width: 0; }
.vk-df-native { position: absolute; left: 8px; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; }
.vk-df-text.vk-df-bad { border-color: var(--color-text-danger) !important; }
.vk-df-cal { flex: none; padding: 5px 9px; border: 1px solid var(--color-border-secondary); background: var(--surface-2); color: var(--color-text-primary); border-radius: var(--border-radius-md); cursor: pointer; font-size: 14px; line-height: 1; }
.vk-df-cal:hover { background: var(--surface-3); }
.vk-df-cal:active { transform: translateY(1px); }
/* Cross-module CRM jump chips (window.APP.crm.jumpChipsHtml) — lead/job → its client account/contact. */
.crm-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.crm-jump { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-border-secondary); background: var(--surface-2); color: var(--color-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.crm-jump:hover { background: var(--surface-3); color: var(--color-text-primary); border-color: var(--accent); }
.crm-jump:active { transform: translateY(1px); }
.tm-ok { color: #2ecc9a; font-weight: 600; }
.tm-err { color: #d24b5a; font-weight: 600; }
#app-toasts { position: fixed; bottom: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.app-toast { background: #1f2a24; color: #2ecc9a; border: 1px solid #2ecc9a55; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-2, 0 4px 14px rgba(0,0,0,.4)); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast.undo-toast { display: flex; align-items: center; gap: 12px; color: var(--color-text-primary); background: var(--surface-1, #1f2a33); border-color: var(--color-border-secondary); }
.undo-btn { pointer-events: auto; background: transparent; border: 1px solid var(--accent, #4a8fd6); color: var(--accent, #4a8fd6); border-radius: 6px; padding: 3px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.undo-btn:hover { background: var(--accent, #4a8fd6); color: #fff; }
.undo-btn:disabled { opacity: 0.7; cursor: default; }
.prop-form .pf-l { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin: 8px 0 3px; }
.prop-form input, .prop-form select { width: 100%; padding: 7px 9px; border-radius: var(--border-radius-md); font-family: inherit; font-size: 13px; }
.prop-form .tm-row { display: flex; gap: 8px; }
.pf-total { margin: 10px 0 2px; font-size: 14px; }
.pf-total b { font-size: 18px; }
/* Autofilled / system-derived values (contract total, synced) — muted & lighter, like MileageCricket. */
.autofilled { color: var(--color-text-tertiary, #6b7280); font-weight: 400; opacity: 0.78; }
.mc-n.autofilled { font-weight: 500; }
input.autofilled, .prop-form input.autofilled { color: var(--color-text-tertiary, #7a8294); }
.pf-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-steps .btn.active { background: var(--accent, #4a8fd6); color: #fff; border-color: transparent; }
.btn.danger { color: #d24b5a; border-color: #d24b5a55; }
.btn.danger:hover { background: #d24b5a18; }
.flag.src-docuseal { background: #b8932a22; color: #c8a33a; border-color: #b8932a55; }
.flag.src-servicem8 { background: #4a8fd622; color: #5a9fe6; border-color: #4a8fd655; }
.flag.src-dropboxsign { background: #2ecc9a22; color: #2ecc9a; border-color: #2ecc9a55; }
.flag.src-email { background: #9b5fc922; color: #b07fd9; border-color: #9b5fc955; }
.prop-card.superseded { opacity: 0.55; }
.li-list { display: flex; flex-direction: column; gap: 2px; }
.li-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--color-border-secondary); }
.li-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .tm-row { display: flex; gap: 8px; }
.modal .tm-row #tm-due { flex: 1; }
.modal-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

.stage-arrow { padding: 4px 8px; font-size: 10px; }

/* Proposals — collapsible groups by entity (client/job) */
.pg-group { margin-bottom: 4px; }
.pg-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; border-radius: var(--border-radius-md); }
.pg-head:hover { background: var(--surface-1); }
.pg-caret { font-size: 10px; color: var(--color-text-secondary); width: 10px; flex: 0 0 auto; }
.pg-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-meta { font-size: 11px; margin-left: auto; flex: 0 0 auto; }
.pg-items { padding-left: 12px; border-left: 1px solid var(--color-border-secondary); margin: 2px 0 6px 9px; display: flex; flex-direction: column; gap: 6px; }

.pg-head .pg-actions { display: none; gap: 6px; margin-left: 8px; }
.pg-head:hover .pg-actions { display: inline-flex; }
.pg-act { background: transparent; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); border-radius: 5px; font-size: 10px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.pg-act:hover { color: var(--color-text-primary); border-color: var(--color-text-info, #4a8fd6); }

/* Per-proposal manual Right-to-Cancel trigger (compact select + button on the card) */
.pg-rtc { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pg-rtc-type { flex: 1 1 auto; min-width: 0; background: transparent; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); border-radius: 5px; font-size: 10px; padding: 3px 6px; font-family: inherit; }
.pg-rtc-send { background: transparent; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); border-radius: 5px; font-size: 10px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.pg-rtc-send:hover { color: var(--color-text-primary); border-color: var(--color-text-info, #4a8fd6); }
.pg-rtc-send:disabled { opacity: 0.5; cursor: default; }

/* Proposal linked-record section */
.pg-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; margin-bottom: 6px; }
.pg-link-label { color: var(--color-text-secondary); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.pg-link-jump { color: var(--accent); cursor: pointer; text-decoration: none; }
.pg-link-jump:hover { text-decoration: underline; }

/* Global search omnibox (⌘K) */
#omni { position: relative; margin-left: 14px; }
#omni-input { width: 200px; padding: 5px 12px; border: 0.5px solid var(--color-border-secondary); border-radius: 999px; background: transparent; color: inherit; font-size: 12px; font-family: inherit; transition: width .15s, border-color .15s; }
#omni-input:focus { width: 280px; border-color: var(--color-text-info, #4a8fd6); outline: none; }
#omni-results { display: none; position: absolute; top: 32px; right: 0; width: 380px; max-height: 62vh; overflow: auto; background: var(--surface-1, #1b2128); border: 1px solid var(--color-border-secondary); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 9998; padding: 4px; }
#omni.open #omni-results { display: block; }
.omni-row { display: flex; align-items: baseline; gap: 9px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.omni-row:hover { background: var(--surface-2, #252c35); }
.omni-type { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-info, #4a8fd6); flex: 0 0 56px; font-weight: 700; }
.omni-title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-sub { font-size: 11px; margin-left: auto; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 0 auto; }
.omni-empty { padding: 12px; color: var(--color-text-tertiary); font-size: 12px; }

/* ViewKit standard toolbar (search + sort + group + view-mode) — shared across modules */
.vk-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.vk-toolbar .vk-search { flex: 1 1 160px; min-width: 120px; padding: 5px 9px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-size: 12px; font-family: inherit; }
.vk-toolbar select { padding: 5px 8px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-size: 11px; font-family: inherit; cursor: pointer; }

/* ViewKit universal combobox (vk.combobox) — filter-as-you-type searchable select, one widget
   for every such list on the platform (cost codes, jobs, anywhere a plain <select> would otherwise
   go). Arrows move the highlight, Enter commits, Esc reverts — same vocabulary everywhere. */
.vk-combo { position: relative; }
.vk-combo-input { width: 100%; box-sizing: border-box; background: var(--surface-3); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); padding: 5px 8px; font-size: 13px; font-family: inherit; color: var(--color-text-primary); }
.vk-combo-input:focus { outline: none; border-color: var(--accent); }
.vk-combo-list { position: absolute; z-index: 20; top: calc(100% + 3px); left: 0; right: 0; max-height: 220px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface-2); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); box-shadow: var(--shadow-2); }
.vk-combo-opt { padding: 6px 8px; font-size: 12.5px; border-radius: var(--border-radius-sm); cursor: pointer; color: var(--color-text-primary); }
.vk-combo-opt.hl, .vk-combo-opt:hover { background: var(--surface-3); }
.vk-combo-group { padding: 6px 8px 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); }
.vk-combo-empty { padding: 8px; font-size: 12.5px; }

/* ViewKit render window — "show more" controls appended by vk.window() on long lists */
.vk-more-wrap { display: flex; gap: 8px; justify-content: center; align-items: center; width: 100%; padding: 10px 0 6px; }
.vk-more { background: var(--surface-2); border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); border-radius: 999px; font-size: 11px; padding: 4px 14px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.vk-more:hover { color: var(--color-text-primary); }

/* Documentation / deliverables command center */
.doc-roll { display: flex; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.doc-roll-cell { flex: 1 1 0; min-width: 90px; text-align: center; padding: 8px 6px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); }
.drc-n { font-size: 20px; font-weight: 700; line-height: 1; }
.drc-n.done { color: #2ecc9a; } .drc-n.next { color: #4a8fd6; } .drc-n.warn { color: #e8902a; } .drc-n.planned { color: #7a8294; }
.drc-l { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-tertiary); margin-top: 3px; }
.doc-group { margin-bottom: 6px; }
.doc-items { padding: 2px 0 6px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 26px; font-size: 12px; }
.doc-row:hover { background: var(--surface-2, #252c35); }
.doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-row .badge { flex: 0 0 64px; text-align: center; }
.doc-open, .doc-act { font-size: 10px; padding: 2px 8px; }
.doc-status { flex: 0 0 88px; font-size: 10px; padding: 2px 4px; border-radius: 5px; border: 0.5px solid var(--color-border-secondary); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
.doc-status.done { color: #2ecc9a; border-color: #2ecc9a66; } .doc-status.next { color: #4a8fd6; border-color: #4a8fd666; }
.doc-status.warn { color: #e8902a; border-color: #e8902a66; } .doc-status.planned { color: #7a8294; }
.doc-status.manual { box-shadow: inset 2px 0 0 var(--color-text-info, #4a8fd6); }
.doc-link { font-size: 11px; padding: 2px 7px; }


/* Documentation — domain consolidation (Proposals / Billing / Compliance / Project) */
.doc-cv { margin-left: 6px; font-size: 11px; }
.doc-domroll { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.doc-dom { background: transparent; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); border-radius: 999px; font-size: 11px; padding: 3px 11px; cursor: pointer; }
.doc-dom:hover { color: var(--color-text-primary); }
.doc-dom.active { border-color: var(--color-text-info, #4a8fd6); color: var(--color-text-primary); }
.doc-dom b { font-weight: 700; } .doc-dom b.warn { color: #e8902a; }
.vk-toolbar .vk-domain { padding: 5px 8px; border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: transparent; color: inherit; font-size: 11px; font-family: inherit; cursor: pointer; }
.doc-cat { margin: 2px 0 6px; }
.doc-cat-head { padding: 4px 10px 3px 22px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-tertiary); display: flex; gap: 8px; align-items: baseline; border-top: 0.5px solid var(--color-border-secondary); }
.doc-cat-name { font-weight: 700; color: var(--color-text-secondary); }
.doc-cat-head .badge { font-size: 9px; padding: 0 5px; }


/* Global Sync button (header) */
#syncwrap { margin-left: 10px; display: inline-flex; align-items: center; }
#sync-btn { background: transparent; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); border-radius: 999px; font-size: 11px; padding: 4px 12px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .15s, border-color .15s; }
#sync-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-info, #4a8fd6); }
#sync-btn.busy { color: var(--color-text-secondary); opacity: .75; }
#sync-btn.ok { color: #2ecc9a; border-color: #2ecc9a66; }
#sync-btn.warn { color: #e8902a; border-color: #e8902a66; }
#sync-btn.err { color: #d24b5a; border-color: #d24b5a66; }


/* Lead view — linked estimates / proposals with data points + Estimator jump */
.est-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; flex-wrap: wrap; }
.est-ref { font-weight: 600; }
.est-dp { flex: 1; min-width: 120px; }


/* Scrollable list containers (proposals .dq-list, pipeline .job-rows, comms .cm-list) */
.dq-list { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
.job-rows { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.cm-list  { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }

/* System module — connections + rail health + accounts */
.sys-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 8px; }
.sys-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 5px 8px; font-size: 12px; border-bottom: 0.5px solid var(--color-border-secondary); }
.sys-row:hover { background: var(--surface-2, #252c35); }
.sys-row .badge { flex: 0 0 76px; text-align: center; }
.sys-name { flex: 1; }
.sys-meta { flex: 0 0 auto; font-size: 11px; }
/* last_error detail (rail_health.last_error) — wraps to its own line, error-colored,
   full message on hover title (S70-SYNC §22: sync-gate troubleshooting surface). */
.sys-err { flex-basis: 100%; font-size: 11px; color: var(--color-text-error, #f85149); padding-left: 86px; }

/* ---- Button variants ---- */
.btn-secondary { background: transparent; border-color: var(--color-border-secondary); color: var(--color-text-secondary); }
.btn-secondary:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); }
.btn-danger { background: #b91c1c; color: #fff; border-color: #b91c1c; font-weight: 600; }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }
.btn-danger-outline { border-color: #b91c1c; color: #b91c1c; background: transparent; }
.btn-danger-outline:hover { background: #fef2f2; }

/* ---- Delete confirmation panel ---- */
.del-confirm-panel { padding: 16px 0; }
.del-name { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.del-scope { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 14px; background: var(--surface-2); border-radius: var(--border-radius-md); border: 1px solid var(--color-border-secondary); }
.del-scope-row ul { margin: 4px 0 0 0; padding-left: 18px; }
.del-scope-row ul li { margin-bottom: 2px; }
.del-removes strong { color: #b91c1c; }
.del-keeps strong { color: var(--color-text-success); }

/* ---- Mobile responsiveness (max-width: 680px) ---- */
@media (max-width: 680px) {
  /* App shell */
  main#panel { padding: 10px 10px 80px; }
  .app-head { padding: 8px 10px; }
  #omni-input { width: 120px; }
  #omni-input:focus { width: 180px; }
  #omni-results { width: 100vw; right: -10px; max-height: 55vh; }

  /* Tabs — horizontal scroll */
  .tabs { padding: 0 6px; }
  .tab { font-size: 11px; padding: 7px 8px; white-space: nowrap; }

  /* KPI cards — 2 columns on mobile */
  .money-row { flex-wrap: wrap; }
  .money-cell { flex: 1 1 calc(50% - 8px); min-width: 100px; }

  /* Overview grid — 2 columns */
  .ov-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pipeline / jobs — single column (override jobs.css). minmax(0,1fr) + min-width:0 lets the
     track shrink below its content's min-content width (a fr track won't, so a wide row was forcing
     the grid ~18px past the viewport → sideways body scroll on Proposals/master-detail on phones). */
  .jobs-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .jobs-list, .jobs-grid > * { min-width: 0; }
  .job-rows { max-height: 36vh; }
  .jobs-detail { display: none; }
  .jobs-detail.show { display: block; }

  /* Pipeline funnel bar — scroll */
  .pipeline { overflow-x: auto; padding-bottom: 4px; }
  .pl-stage { min-width: 60px; }

  /* Tables — compact */
  .money-tbl th, .money-tbl td { padding: 5px 4px; font-size: 11px; }
  .mock-table th, .mock-table td { padding: 5px 4px; font-size: 11px; }

  /* Form fields — full width */
  .ef { flex-wrap: wrap; }
  .ef input, .ef select, .ef textarea { flex: 1 1 100%; max-width: none; }
  .ef-grid .ef input, .ef-grid .ef textarea { max-width: none; }

  /* Plan sprints */
  .plan-sprint-summary { flex-wrap: wrap; gap: 4px; }

  /* Detail pane */
  .detail-head { flex-wrap: wrap; gap: 4px; }
  .detail-meta { font-size: 11px; }

  /* Money module */
  .money-scroll { max-height: 40vh; }
  .cf-range-bar { display: none; }

  /* Decisions */
  .dq-list { max-height: 36vh; }
}

@media (max-width: 400px) {
  .ov-grid { grid-template-columns: 1fr; }
  .money-cell { flex: 1 1 100%; }
  .tab { font-size: 10px; padding: 6px 6px; }
}