:root {
  color-scheme: light;
  --bg: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #0d1521;
  --muted: #667085;
  --line: #e3e6ee;
  --accent: #f37021;
  --accent-strong: #d1590f;
  --accent-soft: #fdece0;
  --accent-2: #8a3d10;
  --gold: #b8860b;
  --gold-soft: #fbf1dc;
  --warn: #b45309;
  --danger: #b42318;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.06), 0 16px 32px rgba(16, 24, 40, 0.09);
  --radius: 10px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --surface: #121a2b;
  --surface-2: #1a2338;
  --text: #f2f4f9;
  --muted: #aab6cc;
  --line: #2e3b5c;
  --accent: #f37021;
  --accent-strong: #ff8c42;
  --accent-soft: #3a2413;
  --accent-2: #f2b183;
  --gold: #e0b23c;
  --gold-soft: #3a2f14;
  --warn: #f2a94e;
  --danger: #f0736a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.6);
}

.themeToggleBtn {
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 60;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.themeToggleBtn:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}

/* --- Notification bell + dropdown ------------------------------------- */
.notifBellBtn {
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: fixed;
  top: 14px;
  right: 62px;
  z-index: 60;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.notifBellBtn:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}
.fuWidgetBtn {
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: fixed;
  top: 14px;
  right: 106px;
  z-index: 60;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.fuWidgetBtn:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}
#fuWidgetPanel.notifPanel {
  right: 62px;
}
.apptWidgetBtn {
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: fixed;
  top: 14px;
  right: 150px;
  z-index: 60;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.apptWidgetBtn:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}
#apptWidgetPanel.notifPanel {
  right: 106px;
}

/* --- Floating assistant (chatbot) — bottom-right, deliberately separate from the
   top-right notif/theme/follow-up cluster since it's opened much less often. --- */
.assistantWidgetBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-hover);
}
.assistantWidgetBtn:hover { filter: brightness(1.08); }
.assistantPanel {
  position: fixed;
  bottom: 84px;
  right: 20px;
  z-index: 60;
  width: min(360px, 92vw);
  height: min(480px, 70vh);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.assistantPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.assistantIconBtn {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 16px;
  min-height: auto;
  padding: 2px 4px;
  cursor: pointer;
}
.assistantIconBtn:hover { color: var(--text); }
.assistantMessages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assistantMessage {
  max-width: 85%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.assistantMessageBot {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
}
.assistantMessageUser {
  align-self: flex-end;
  background: var(--accent);
  color: white;
}
.assistantInputRow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  border-top: 1px solid var(--line);
}
.assistantInputRow textarea {
  min-height: 36px;
  resize: none;
  font-size: 13px;
}
.assistantInputRow button { flex: 0 0 auto; }
.assistantSettingsPanel {
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.assistantSettingsPanel textarea { font-size: 12.5px; }
.notifBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.notifPanel {
  position: fixed;
  top: 56px;
  right: 18px;
  z-index: 60;
  width: min(380px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-hover);
}
.notifPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.notifList { display: flex; flex-direction: column; }
.notifItem {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-size: 12.5px;
}
.notifItem:last-child { border-bottom: none; }
.notifItem:hover { background: var(--surface-2); }
.notifItem.unread { background: var(--accent-soft); }
.notifIcon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.notifItem.unread .notifIcon { background: var(--accent); color: white; }
.notifMessage { color: var(--muted); margin-top: 2px; }
.notifMeta { color: var(--muted); font-size: 11px; margin-top: 3px; }

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100vh;
}

body {
  font-family:
    "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

/* Form fields still need to be selectable/typeable */
input,
textarea,
select {
  -webkit-user-select: text;
  user-select: text;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 7px;
  min-height: 38px;
  padding: 0 13px;
  cursor: pointer;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}

button:hover {
  border-color: var(--accent);
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 1px 2px rgba(211, 84, 0, 0.2);
}

.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  box-shadow: 0 2px 6px rgba(12, 106, 86, 0.25);
}

.ghostBtn {
  background: transparent;
  color: var(--muted);
}

.dangerBtn {
  background: #fef2f1;
  border-color: #f3c6c1;
  color: var(--danger);
}

.dangerBtn:hover {
  border-color: var(--danger);
}

/* --- Document Analysis (case tab) --------------------------------------- */

.analysisSubTabBtn {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 8px 10px;
  font-weight: 700;
  white-space: nowrap;
}

.analysisSubTabBtn.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  background: transparent;
}

.step {
  background: var(--surface);
}

.step .stepNum {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  font-weight: 800;
  font-size: 11px;
  color: var(--accent);
}

.step.done .stepNum {
  background: var(--accent);
  color: #fff;
}

.linkBtn {
  border: none;
  background: none;
  color: var(--accent-2);
  min-height: auto;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.linkBtn:hover {
  text-decoration-color: var(--accent-2);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

/* Explicit disabled styling instead of leaving it to browser defaults — those render
   inconsistently across browsers in dark mode and can end up low-contrast. */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 1;
}

textarea {
  min-height: 76px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fieldLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.checkboxRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0;
}

.checkboxRow input {
  width: auto;
}

/* --- confidentiality / footer --------------------------------------- */

.confidentialBar {
  background: linear-gradient(90deg, #0d2438, var(--accent-2) 55%, #0d2438);
  color: #cddced;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

/* --- Export to PDF (window.print()) ---------------------------------
   Shared app-wide so every page's "Export PDF" button just works: hide the interactive
   chrome (sidebar, notif/assistant/appointment widgets, theme toggle, mobile tab bar,
   toolbars/filter controls, any button), force a plain light/printable look regardless of
   dark mode, and stamp the logo into the confidentiality bar corner Michael asked for. */
@media print {
  .iconNav,
  .notifBellBtn,
  .notifPanel,
  .fuWidgetBtn,
  .apptWidgetBtn,
  .assistantWidgetBtn,
  .assistantPanel,
  .themeToggleBtn,
  .mobileTabBar,
  .mobileMoreSheet,
  .toolbar,
  .brandRow .userChip,
  button {
    display: none !important;
  }
  body.hasIconNav {
    padding-left: 0 !important;
  }
  body,
  main {
    background: #fff !important;
    color: #111 !important;
  }
  .confidentialBar {
    background: none !important;
    color: #111 !important;
    border-bottom: 1px solid #111;
    text-align: left;
    padding-left: 46px;
  }
  .confidentialBar::before {
    content: url("/logo.svg");
    position: absolute;
    left: 8px;
    top: 2px;
    width: 26px;
    height: 26px;
  }
  table {
    break-inside: auto;
  }
  tr {
    break-inside: avoid;
  }
}

.leaderViewBanner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbf1de;
  border: 1px solid #d9a441;
  color: #6b4c14;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.appFooter {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 28px 32px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

/* --- app shell -------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  min-height: calc(100vh - 32px);
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.brandRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.brand p {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.brand span {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 13px;
}

.userChip {
  text-align: right;
  font-size: 12px;
  flex-shrink: 0;
}

.userChipName {
  display: block;
  color: var(--muted);
  margin-bottom: 3px;
  font-weight: 600;
}

.adminTag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sideNav {
  margin-bottom: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sideNav a {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

.sideNav a:hover {
  background: #d7ede7;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.toolbar > * {
  flex: 0 0 auto;
}

.searchWrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
}

#dirCompanyFilter,
#dirAreaFilter {
  width: auto;
  max-width: 200px;
}

/* Project EF & Value's sidebar search, pulled out of .toolbar to sit above the brand row —
   "search first, title after" reads better when you're jumping straight to a project instead
   of scanning past the title every time. */
.sidebarTopSearch {
  margin-bottom: 16px;
}

.searchDropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
}

.searchDropdownItem {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 14px;
}

.searchDropdownItem:last-child {
  border-bottom: none;
}

.searchDropdownItem:hover {
  background: var(--surface-2);
}

.searchDropdownItem span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.stateFilters,
.reviewFilters {
  display: grid;
  gap: 6px;
}

.stateFilters {
  grid-template-columns: repeat(4, 1fr);
}

.reviewFilters {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stateFilters button,
.reviewFilters button {
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.stateFilters .active,
.reviewFilters .active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: white;
}

.projectListHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}

.projectListFooter {
  margin-bottom: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.projectListHeader #projectListCount {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.pageArrows {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pageArrows button {
  min-height: 32px;
  min-width: 32px;
  padding: 0 9px;
  font-size: 13px;
  border-radius: 6px;
}

.pageArrows button:disabled {
  opacity: 0.35;
  cursor: default;
}

.pageArrows button:disabled:hover {
  border-color: var(--line);
}

#pageIndicator {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
}

.projectList {
  display: grid;
  gap: 6px;
  flex: 0 0 auto;
}

.projectCard {
  text-align: left;
  width: 100%;
  height: auto;
  border-radius: 8px;
  padding: 9px 12px 9px 13px;
  background: var(--surface);
  box-shadow: none;
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.projectCard:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.projectCard.active {
  border-color: var(--line);
  border-left-color: var(--accent);
  box-shadow: var(--shadow);
  background: var(--accent-soft);
}

.projectCard strong {
  display: block;
  line-height: 1.3;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.projectCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.projectStats {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  min-height: 22px;
  padding: 0 9px;
  font-weight: 600;
}

.status-complete {
  background: #dcfce7;
  color: #166534;
}

.status-partial {
  background: #fef3c7;
  color: #92400e;
}

.status-limited-source {
  background: #e0f2fe;
  color: #075985;
}

.status-needs-info,
.status-blank-source,
.status-needs-review {
  background: #fee2e2;
  color: #991b1b;
}

.issue-pill {
  background: #fff7ed;
  color: #9a3412;
}

.healthToggle {
  margin-top: 14px;
  width: 100%;
  background: var(--surface-2);
  border-color: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  text-align: left;
}

.auditSummary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 8px;
  box-shadow: var(--shadow);
}

.auditTitle {
  font-weight: 760;
  margin-bottom: 10px;
}

.auditGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.auditGrid div {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 8px;
  border: 1px solid transparent;
  animation: kpiRise 0.35s ease backwards;
}
@keyframes kpiRise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.auditGrid div:nth-child(1) { animation-delay: 0.02s; }
.auditGrid div:nth-child(2) { animation-delay: 0.05s; }
.auditGrid div:nth-child(3) { animation-delay: 0.08s; }
.auditGrid div:nth-child(4) { animation-delay: 0.11s; }
.auditGrid div:nth-child(5) { animation-delay: 0.14s; }
.auditGrid div:nth-child(6) { animation-delay: 0.17s; }
.auditGrid div:nth-child(7) { animation-delay: 0.2s; }
.auditGrid div:nth-child(8) { animation-delay: 0.23s; }
@media (prefers-reduced-motion: reduce) {
  .auditGrid div { animation: none; }
  .themeToggleBtn, .notifBellBtn, .fuWidgetBtn, .apptWidgetBtn { transition: none; }
  .themeToggleBtn:hover, .notifBellBtn:hover, .fuWidgetBtn:hover, .apptWidgetBtn:hover { transform: none; }
}

.auditGrid strong {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.auditGrid span,
.auditNote {
  color: var(--muted);
  font-size: 12px;
}

.auditNote {
  margin-top: 10px;
  line-height: 1.4;
}

.attentionList {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.attentionTitle {
  font-weight: 720;
  font-size: 13px;
}

.attentionItem {
  display: grid;
  gap: 5px;
  height: auto;
  min-height: 0;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
}

.attentionItem strong {
  line-height: 1.25;
}

.attentionItem small {
  color: var(--muted);
  line-height: 1.35;
}

.attentionStatus {
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  font-weight: 720;
}

.quickForm,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.quickForm {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-bottom: 18px;
}

.formTitle {
  font-weight: 760;
}

.grid {
  display: grid;
  gap: 10px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content {
  padding: 28px 32px;
  overflow: auto;
}

.emptyState {
  display: grid;
  align-content: center;
  min-height: calc(100vh - 120px);
  max-width: 680px;
}

.emptyState h1,
.detailHeader h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.emptyState p,
.detailHeader p {
  color: var(--muted);
  margin: 10px 0 0;
}

.detailHeader .reviewLine {
  color: #344255;
  max-width: 900px;
}

.hidden {
  display: none !important;
}

.detailView {
  display: grid;
  gap: 18px;
  /* Without this, a grid item defaults to min-width:auto (its content's intrinsic width),
     so the wide EF comparison table pushed the whole panel wider instead of letting
     .dataTableWrap's own overflow-x:auto clip and scroll just the table. The same applies
     one level down to .tabPanel (the grid item that actually holds the table). */
  min-width: 0;
}

.tabPanel {
  min-width: 0;
}

.detailHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.projectMeta {
  color: var(--accent-2);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.badge {
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 800;
  flex: 0 0 auto;
  padding: 0 12px;
  min-height: 26px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.statusPill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.statusSelect {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 2px 24px 2px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: auto;
}

.statusPill.status-undercon,
.statusSelect.status-undercon {
  background: #fde6c8;
  color: #9a5b0a;
}

.statusPill.status-completed,
.statusSelect.status-completed {
  background: var(--accent-soft);
  color: var(--accent);
}

.statusPill.status-subsales,
.statusSelect.status-subsales {
  background: #e3e1f7;
  color: #4a3f9e;
}

.tabBar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.tabBtn {
  border: none;
  background: transparent;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
  padding: 11px 18px;
  margin-bottom: -1px;
  position: relative;
}

.tabBtn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
}

.tabBtn:hover {
  color: var(--accent-2);
  border-color: transparent;
}

.tabBtn.active {
  background: transparent;
  color: var(--accent-2);
}

.tabBtn.active::after {
  background: var(--accent);
}

.panel {
  padding: 18px;
}

.tabPanel {
  border-top-left-radius: 0;
}

.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 17px;
}

.inlineForm {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.formActions {
  display: flex;
  gap: 8px;
}

.tableList {
  display: grid;
  gap: 10px;
}

.record {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 15px 16px;
  background: var(--surface);
  transition: box-shadow 0.15s ease;
}

.record:hover {
  box-shadow: var(--shadow);
}

.recordTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.recordTopRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recordTitle {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--accent-2);
}

.recordContact {
  color: var(--accent-2);
  font-weight: 700;
}

.editRecordBtn {
  font-size: 12px;
  padding: 0 11px;
  min-height: 30px;
  color: var(--accent-2);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}

.recordGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.recordGrid div {
  min-width: 0;
}

.recordGridMinor {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0.85;
  margin-top: 8px;
}

.recordGridMinor .label {
  font-size: 10px;
}

/* The numbers advisors actually act on — margin & interest — get real visual weight. */
.statRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 6px;
}

.statBox {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 8px 12px;
}

.statLabel {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.statValue {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-2);
  letter-spacing: -0.01em;
}

.efJumpNav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.jumpChip {
  min-height: 32px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--surface);
}

.jumpChip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}

.label {
  display: block;
  color: #344255;
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.notes {
  margin-top: 10px;
  color: #344255;
  line-height: 1.45;
  font-size: 13px;
}

.recordUpdatedAt {
  margin-top: 10px;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- bankers ------------------------------------------------------- */

.bankerList {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bankerRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1 1 200px;
  max-width: calc(25% - 6px);
  min-width: 170px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.bankerRow .bankerInfoBtn,
.bankerRow .bankerEditBtn {
  margin-top: 2px;
}

.bankerRowEmpty {
  color: var(--muted);
  font-size: 13px;
  background: none;
  border: none;
  padding: 6px 0;
}

.addBankerBtn {
  flex: 0 0 auto;
  align-self: flex-start;
}

.bankerName {
  font-weight: 700;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  min-height: auto;
  color: var(--accent);
  position: relative;
}

.bankerName::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.bankerName:hover::after {
  opacity: 0.6;
}

.bankerName:hover {
  border-color: transparent;
}

.bankerNameStatic {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  cursor: default;
}

.bankerContact {
  color: var(--muted);
  font-size: 11.5px;
}

.bankerEmail {
  color: var(--accent-2);
  font-size: 11px;
  text-decoration: underline;
  text-decoration-style: dotted;
  word-break: break-all;
}

.bankerEmail:hover {
  color: var(--accent);
}

.bankerInfoBtn {
  border: none;
  background: none;
  min-height: auto;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.bankerInfoBtn:hover {
  color: var(--accent-2);
}

.bankerStatus {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
}

.bankerStatus.status-moved {
  background: #fef3c7;
  color: #92400e;
}

.bankerStatus.status-resigned {
  background: #fee2e2;
  color: #991b1b;
}

.bankerPickerPanel {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bankerPickerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.bankerPickerAddEmail { font-size: 12.5px; }

.caseModeSwitch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.caseModeBtn {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.caseModeBtn.active {
  background: var(--accent);
  color: white;
}
.guidedProgressPanel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.caseModeFast .guidedProgressPanel { display: none; }
.guidedProgressHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
.guidedProgressHead span { color: var(--muted); }
.guidedStepGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.guidedStep {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 12.5px;
  background: var(--surface-2);
}
.guidedStep span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--line);
  font-size: 11px;
  font-weight: 800;
}
.guidedStep.done span {
  background: var(--accent);
  color: white;
}
.docEmailBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.docEmailBar select {
  max-width: 240px;
}

/* "Email to banker" step hidden per Michael's request (2026-07-17) — not a current priority.
   The feature itself (case.js, app.js) is untouched, just not shown; remove this block to bring
   it back. Select-all + bulk-download stay visible since those are a separate, still-used
   feature that happens to share the same toolbar. */
#docEmailBankSelect,
#docEmailTemplateSelect,
#docEmailCopyBtn,
#docEmailBtn,
#docEmailRecipient,
#docEmailTemplatePanel,
.bankSubDraftEmailBtn {
  display: none !important;
}
/* Resolves right under the email bar the moment a bank is picked — shows a real recipient
   or a fix-it box, instead of only discovering "empty email" after clicking Send. */
#docEmailRecipient {
  padding: 10px;
  margin: -4px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
}
.docEmailRecipientRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.emailTemplatePanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
  margin: -2px 0 12px;
}
.emailTemplateHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.emailTemplateHead strong {
  font-size: 13px;
}
.emailTemplateHead span,
.emailTemplateHint {
  color: var(--muted);
  font-size: 11.5px;
}
.emailTemplatePanel label {
  display: block;
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.emailTemplatePanel textarea {
  min-height: 220px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}
.docRow .docRenameInput {
  font-weight: 700;
}

.bankerEditBtn,
.addBankerBtn {
  font-size: 12px;
  padding: 0 12px;
  min-height: 32px;
}

.addBankerBtn {
  width: fit-content;
  margin-top: 4px;
}

/* --- paste / auto-fill --------------------------------------------- */

.pasteBox {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #9dbcb4;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.pasteBoxLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pasteBox textarea {
  min-height: 60px;
}

.pasteHint {
  font-size: 11.5px;
  color: var(--muted);
}

/* --- toasts ---------------------------------------------------------- */

.toastHost {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: grid;
  gap: 8px;
  z-index: 100;
}

.toast {
  background: var(--text);
  color: white;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: var(--accent-strong);
}

.toast-error {
  background: var(--danger);
}

.toast-info {
  background: var(--accent-2);
}

/* --- edit / banker modal -------------------------------------------- */

.bankerPanel {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.bankerPanelCard {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow: auto;
  padding: 20px;
}

.bankerPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* Lets you check a case's client-facing status page from wherever you spotted it (Cases,
   Leads, Follow-ups) without losing your place in the list — same content as the public
   link, just previewed inline instead of opening a new tab. */
.statusPreviewCard {
  width: min(720px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#statusPreviewFrame {
  flex: 1;
  min-height: 70vh;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* Calendar embedded as a tab inside Cases & Leads (see cases.js switchCasesTab) — full width,
   tall enough for a month grid without its own scrollbar-within-scrollbar. */
.embeddedFrame {
  width: 100%;
  min-height: 1400px;
  border: none;
}
/* The embedded copy of calendar.html (see calendar.js boot()) hides its own confidentiality
   bar and title/user-chip row — the outer Cases & Leads page already shows both, so without
   this the embedded iframe doubled them up right below the real ones. */
body.embeddedInFrame .confidentialBar,
body.embeddedInFrame .brandRow {
  display: none;
}

.bankerPanelHeader h3 {
  margin: 0;
  font-size: 17px;
}

#editPanelClose {
  border: none;
  background: none;
  font-size: 24px;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  color: var(--muted);
  border-radius: 7px;
}
#editPanelClose:hover {
  background: var(--surface-2);
  color: var(--danger);
}

.caseDetailPanelCard { width: min(760px, 94vw); }

/* --- Case table (dense list view) --------------------------------------- */

.staleFilterLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.savedFilterChip {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden;
}
.savedFilterApplyBtn {
  border: none; background: none; padding: 6px 10px; font-size: 12.5px; font-weight: 600;
  color: var(--text); cursor: pointer; min-height: 30px;
}
.savedFilterApplyBtn:hover { color: var(--accent); }
.savedFilterRemoveBtn {
  border: none; background: none; padding: 0 8px; min-height: 30px; min-width: 26px;
  color: var(--muted); font-size: 14px; cursor: pointer;
}
.savedFilterRemoveBtn:hover { color: var(--danger); }

.filterIconWrap { position: relative; }
.iconOnlyBtn {
  position: relative;
  width: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filterActiveBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.filterPopover {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 30;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-hover);
  padding: 12px;
}
.filterPopover .fieldLabel { display: block; margin-top: 8px; }
.filterPopover .fieldLabel:first-child { margin-top: 0; }

.azIndex {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 10px;
}
.azIndex button {
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
  font-size: 11.5px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
}
.azIndex button:hover,
.azIndex button.active {
  color: var(--accent);
  border-color: var(--accent);
}
.azIndex button:disabled {
  opacity: 0.35;
  cursor: default;
}

.tableScrollWrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.caseTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.caseTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.caseTable thead th:hover {
  color: var(--accent);
}
.caseTable thead th .sortArrow {
  margin-left: 4px;
  opacity: 0.6;
}
.caseTable tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: normal;
}
.caseTable tbody tr:last-child td {
  border-bottom: none;
}
.caseTable tbody tr:hover {
  background: var(--surface-2);
  cursor: pointer;
}
.caseTable tbody tr.case-stale-3 { background: var(--gold-soft); }
.caseTable tbody tr.case-stale-5 { background: #fee2e2; }
:root[data-theme="dark"] .caseTable tbody tr.case-stale-5 { background: #3a1e1e; }
.caseTable tbody tr.case-jump-highlight { outline: 2px solid var(--accent); outline-offset: -2px; }

.caseTableClient { font-weight: 700; }
.caseTableSub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.caseTableActions { display: flex; gap: 6px; align-items: center; }
.caseTableActions { gap: 2px; }
.caseTableActions button,
.caseTableActions a {
  border: none;
  background: none;
  padding: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--muted);
  min-height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 7px;
}
.caseTableActions button:hover,
.caseTableActions a:hover {
  color: var(--accent);
  background: var(--surface-2);
}
.caseTableTypeBadge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}
.caseTableSelect {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  min-height: 28px;
}

/* --- Stage color-coding (Excel-style at-a-glance status) ------------- */
.stageSelectTable.stage-new,
.stageStep.stage-new { background: var(--surface-2); color: var(--muted); }
.stageSelectTable.stage-docs_pending,
.stageStep.stage-docs_pending { background: #fef3c7; color: #92400e; }
.stageSelectTable.stage-ready_to_submit,
.stageStep.stage-ready_to_submit { background: #cffafe; color: #155e75; }
.stageSelectTable.stage-submitted,
.stageStep.stage-submitted { background: #dbeafe; color: #1e40af; }
.stageSelectTable.stage-kiv,
.stageStep.stage-kiv { background: #fed7aa; color: #9a3412; }
.stageSelectTable.stage-approved,
.stageStep.stage-approved { background: #dcfce7; color: #166534; }
.stageSelectTable.stage-rejected,
.stageStep.stage-rejected { background: #fee2e2; color: #991b1b; }
.stageSelectTable.stage-lo_signed,
.stageStep.stage-lo_signed { background: #e0e7ff; color: #3730a3; }
.stageSelectTable.stage-mlta_submitted,
.stageStep.stage-mlta_submitted { background: #ede9fe; color: #5b21b6; }
.stageSelectTable.stage-completed,
.stageStep.stage-completed { background: #166534; color: white; }
.stageSelectTable { border: none; font-weight: 700; }

/* --- Bank status chips (compact, inline in the case row) -------------- */
.bankChipRow { display: flex; flex-wrap: wrap; gap: 4px; }
.bankChip {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
}
.bankChip.bank-not-submitted { background: var(--surface-2); color: var(--muted); }
.bankChip.bank-submitted { background: #dbeafe; color: #1e40af; }
.bankChip.bank-pending { background: #fef3c7; color: #92400e; }
.bankChip.bank-kiv { background: #fed7aa; color: #9a3412; }
.bankChip.bank-approved { background: #dcfce7; color: #166534; }
.bankChip.bank-rejected { background: #fee2e2; color: #991b1b; }

/* --- Inline-editable remarks / processor cells ------------------------- */
.caseTableLatestUpdate {
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Processor chips (a case can have more than one) -------------------- */
.processorChipRow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.processorChip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.processorChipRemove {
  border: none; background: none; min-height: 26px; min-width: 26px; padding: 0;
  color: var(--accent-2); opacity: 0.7; font-size: 15px; line-height: 1; cursor: pointer;
}
.processorChipRemove:hover { opacity: 1; color: var(--danger); }
.processorAddSelect {
  font-size: 11px; padding: 2px 6px; border-radius: 999px; min-height: 24px;
  width: auto; color: var(--muted); border: 1px dashed var(--line); background: transparent;
}
/* Compact variant for the case table row — processor isn't the main thing to scan there,
   so it should take as little visual weight as possible while staying legible. */
.processorChipCompact {
  padding: 1px 3px 1px 7px; font-size: 10px; font-weight: 600;
}
.processorChipCompact .processorChipRemove {
  min-height: 18px; min-width: 18px; font-size: 12px;
}
.processorAddSelectCompact {
  font-size: 10px; padding: 1px 4px; min-height: 18px;
}

.agentCell { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.agentWaBtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; border-radius: 999px;
  background: #25d366; color: #fff; text-decoration: none; font-size: 13px; flex: 0 0 auto;
}
.agentWaBtn:hover { filter: brightness(1.08); }

.docRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.docRow:last-child { margin-bottom: 0; }
.docRow.docRowSaved {
  background-color: color-mix(in srgb, var(--success, #1a9c5f) 12%, var(--surface));
  border-color: var(--success, #1a9c5f);
}
.docRow > input[type="checkbox"] { margin-top: 10px; }
.docRowMeta { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.docRowActions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.docRowActions button { white-space: nowrap; }

/* Split view: a compact scrollable list on the left, a detail + inline preview pane on the
   right — replaces one long stacked list that made you scroll the whole page to reach or
   review a specific document. */
.docSplitView {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 14px;
  align-items: start;
}
.docListPane {
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.docListRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.docListRow:last-child { border-bottom: none; }
.docListRow:hover { background: var(--surface-2); }
.docListRow.active {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.docListRowMain { min-width: 0; flex: 1; }
.docListRowName {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docListRowMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.docListRowFilename {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docCheckerPanel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
  margin-top: 14px;
}
.docCheckerStatus {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.docCheckerStatus.review {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}
.docCheckerGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.docCheckerCard {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2);
}
.docCheckerCard.warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}
.docCheckerCard strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
}
.docCheckerCard span,
.docCheckerNote {
  color: var(--muted);
  font-size: 11.5px;
}
.docCheckerColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.docCheckerColumns ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12.5px;
}
.docCheckerColumns li { margin-bottom: 4px; }
.docCheckerTitle {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}
.docCheckerRenameBox {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}
.docCheckerRenameRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}
.docCheckerRenameRow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docMiniBadge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.docMiniBadge.clear {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.docMiniBadge.review,
.docMiniBadge.duplicate {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}
.docIssueBox,
.docRenameSuggestion {
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.docRenameSuggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.docRenameSuggestion span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docPreviewPane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
  min-width: 0;
}
.docPreviewEmbed {
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.docPreviewEmbed img { max-width: 100%; display: block; }
.docPreviewEmbed iframe { width: 100%; height: 560px; border: none; }
.docPreviewUnsupported {
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
@media (max-width: 900px) {
  .docSplitView { grid-template-columns: 1fr; }
  .docListPane { max-height: 240px; }
}

.borrowerList { display: flex; flex-direction: column; }
.borrowerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.borrowerRow:last-child { border-bottom: none; }

.noteItem { padding: 10px 0; border-bottom: 1px solid var(--line); }
.noteItem:last-child { border-bottom: none; }
.noteItemHead { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.noteItemAuthor { font-weight: 700; color: var(--text); }

/* --- Discussion: chat + activity feed, merged into one thread ---------- */
.discussionFeed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 12px;
}
.chatMessage { display: flex; gap: 10px; align-items: flex-start; }
.chatAvatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.chatBubble {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  max-width: 80%;
}
.chatBubbleHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
.chatBubbleHead strong { color: var(--text); }
.noteVisibilityBtn {
  margin-top: 6px;
  border: none;
  background: none;
  padding: 0;
  min-height: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.noteVisibilityBtn:hover { color: var(--text); }
.noteVisibilityBtn.public { color: var(--accent); }
.activityRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding-left: 4px;
}
.activityRowMeta { color: var(--muted); }
.chatInputRow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.chatInputRow textarea {
  min-height: 40px;
  resize: none;
}
.chatInputRow button { flex: 0 0 auto; }
.mentionDropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}
.mentionOption {
  border: none;
  border-radius: 0;
  background: var(--surface);
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  min-height: auto;
}
.mentionOption:hover { background: var(--surface-2); }

.calcRow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.calcRowWithLimit {
  grid-template-columns: 1fr 1fr 1fr auto;
}
.calcRowUtil {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
  margin-top: -4px;
}
/* Shared "boxed" look for a standalone checkbox+label sitting in a grid row next to bordered
   selects/inputs — plain unboxed text there looked visually lighter/misaligned next to its
   neighbors, since it had no border or fixed height to match them. */
.calcInlineCheckbox {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 0 12px;
  min-height: 40px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}
.calcInlineCheckbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.calcResults {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: var(--surface-alt, rgba(47, 111, 79, 0.06));
  border: 1px solid var(--line);
}
.calcResultLabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.calcResultValue { font-size: 22px; font-weight: 800; }
.calcResultValue.warn { color: #c0453c; }

.calcTopBar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.calcAutosaveHint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0;
}
.calcTopBar .ghostBtn {
  flex-shrink: 0;
}
.calcSections {
  display: grid;
  gap: 16px;
}
.calcSectionCard {
  padding: 16px;
}
.calcResultsCard {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.calcResultsCard .calcResults {
  background: var(--surface);
}

.calcBorrowerRow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.calcBorrowerRow input { font-size: 12.5px; padding: 6px 8px; }
.calcBorrowerResult { color: var(--muted); }
@media (max-width: 720px) {
  .calcBorrowerRow { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
}

.bankerProjectRow {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.bankerProjectRow span {
  color: var(--muted);
  font-size: 13px;
}

.bankerEditForm {
  display: grid;
  gap: 6px;
}

.bankerEditForm .formActions {
  margin-top: 8px;
}

/* --- map ------------------------------------------------------------- */

.mapFrame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mapOpenLink {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 13px;
}

/* --- login page -------------------------------------------------------- */

.loginBody {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(160deg, #0b2a3d 0%, #12405a 45%, #0f6e5c 100%);
  padding: 20px;
}

.loginCard {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(2, 12, 27, 0.35);
  padding: 32px 28px 26px;
}

.loginBrand p {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-2);
}

.loginBrand span {
  color: var(--muted);
  font-size: 13px;
}

.confidentialTag {
  display: inline-block;
  margin-top: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
}

.loginStep h1 {
  font-size: 21px;
  margin: 20px 0 6px;
}

.loginHint {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 16px;
  line-height: 1.5;
}

.loginBtn {
  width: 100%;
  margin-top: 10px;
}

.codeInput {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.loginMsg {
  margin-top: 10px;
  font-size: 13px;
  color: var(--accent);
  min-height: 18px;
}

.loginMsg.error {
  color: var(--danger);
}

#backToEmailBtn {
  display: block;
  margin: 12px auto 0;
  text-align: center;
}

.loginDisclaimer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

/* --- admin page -------------------------------------------------------- */

.adminPage {
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.adminHint {
  color: var(--muted);
  margin-bottom: 20px;
  font-size: 13.5px;
}

.adminResult {
  font-size: 13px;
  color: var(--accent);
}

.adminResult.error {
  color: var(--danger);
}

.adminBack {
  margin-top: 20px;
}

.adminBack a {
  color: var(--accent-2);
}

.userRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.userEmail {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

.roleTag {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-left: 6px;
}

.roleTag.role-admin {
  background: var(--accent-soft);
  color: var(--accent);
}

.roleTag.role-senior {
  background: #e0f2fe;
  color: #075985;
}

.roleTag.role-viewer {
  background: var(--surface-2);
  color: var(--muted);
}

.roleTag.role-processor {
  background: var(--gold-soft);
  color: var(--gold);
}

.roleTag.role-director {
  background: #ede9fe;
  color: #5b21b6;
}

.roleTag.role-owner {
  background: var(--danger);
  color: #fff;
}

.roleTag.role-inactive {
  background: var(--surface-2);
  color: var(--muted);
  text-decoration: line-through;
}

.userRow.userRowInactive {
  opacity: 0.6;
}

/* New joiners (viewer role) can look but not touch. */
body.viewOnly #showEfFormBtn,
body.viewOnly #showValuationFormBtn,
body.viewOnly .editRecordBtn,
body.viewOnly .bankerEditBtn,
body.viewOnly .addBankerBtn,
body.viewOnly #saveMapLinkBtn,
body.viewOnly #mapLinkInput {
  display: none !important;
}

/* --- knowledge page ---------------------------------------------------- */

.knowledgePage {
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 24px 60px;
}

/* Cases/Leads outgrew the narrow single-column layout once the table gained
   Processor/Banks/Remarks columns — give it the full width instead of leaving
   large empty gutters on wide screens. */
.knowledgePage.casesPage {
  max-width: 1520px;
}

/* Shared wider shell for other pages with real data density (dashboard, insurance,
   directory, knowledge) — same idea as casesPage, slightly less extreme since these
   don't have a 9-column table to fit. */
.knowledgePage.widePage {
  max-width: 1360px;
}

/* Case Detail specifically asked to "fully utilize the page" — it has real density (rail +
   tab content) that looked cramped with big empty gutters on a wide monitor at the shared
   1360px cap, so it gets its own wider shell. */
.knowledgePage.widePage.casePage {
  max-width: 1680px;
}

/* --- Quick Update (/quick-update.html) — a deliberately narrow, single-column, phone-first
   flow: pick a client, then bank + status + a pasted message, one big button, done. This is
   NOT a shrunk version of the full case page — it only exposes the handful of fields Michael
   actually needs while out and about, so there's nothing to scroll past. Capped narrow even
   on desktop so it never tries to spread out like a normal page. */
.quickUpdatePage {
  max-width: 480px;
}
@media (min-width: 900px) {
  /* This page is deliberately built narrow for one-thumb phone use, but on a wide desktop
     screen that made it look like a broken/unfinished page floating in empty space. Give it
     a light framed backdrop so the narrow column reads as an intentional composed layout. */
  .quickUpdatePage {
    margin: 24px auto 0;
    padding: 28px 28px 40px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 16px;
  }
}
.quHeaderIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.quCard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 14px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.quCard:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.quStep1Card {
  border-width: 1.5px;
}
.quStepLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.quStepLabel em { color: var(--muted); font-weight: 500; font-style: normal; }
.quStepNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--surface);
  position: relative;
  z-index: 1;
}
.quStepLabel-optional .quStepNum { background: var(--muted); }

/* Connects the numbered step cards inside the form with a quiet vertical rail, so the
   4 remaining fields read as one continuous flow rather than unrelated stacked boxes. */
.quStepperWrap {
  position: relative;
}
.quStepperWrap::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}
.quCard select,
.quCard textarea,
.quCard input {
  margin-top: 10px;
  font-size: 15px;
}
.quCard select {
  padding: 12px 10px;
}
.quStageDetails {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.quStageDetails summary {
  cursor: pointer;
  font-weight: 600;
}
.quSelectedChip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.quSelectedChipRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.quSelectedAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex: 0 0 auto;
}
.quSelectedChip strong {
  display: block;
  font-size: 15px;
}
.quSelectedChip span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.quPublicToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.quSubmitBtn {
  width: 100%;
  font-size: 16px;
  padding: 14px;
  min-height: auto;
  font-weight: 700;
  box-shadow: var(--shadow-hover);
}
.quResetBtn {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
}
.quSuccess {
  text-align: center;
  padding: 36px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.quSuccessIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 4px;
}
.quSuccessText {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}
.quSuccess .primary,
.quSuccess .ghostBtn {
  width: 100%;
  max-width: 280px;
  text-align: center;
}

@media (max-width: 1600px) {
  .knowledgePage.casesPage,
  .knowledgePage.widePage {
    max-width: 94vw;
  }
}
@media (max-width: 1760px) {
  .knowledgePage.widePage.casePage {
    max-width: 94vw;
  }
}

/* --- single case page (/case.html) -------------------------------------- */

.caseBackLink {
  display: inline-block;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 4px;
}
.caseBackLink:hover { color: var(--accent); }

/* --- User manual (/help.html) ------------------------------------------- */
.helpSearchWrap {
  margin-bottom: 14px;
}
.helpSearchWrap input {
  width: 100%;
  font-size: 14px;
  padding: 11px 14px;
}
.helpToc {
  margin-bottom: 18px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#helpSections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.helpSection p {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 10px;
}
.helpSection p:last-child { margin-bottom: 0; }
.helpSection code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
}

/* Deliberately small and understated — Michael pointed out this isn't an important action,
   just a convenience, so it shouldn't compete visually with the client name above it. */
.caseSwitcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  transform: scale(0.85);
  transform-origin: left center;
}
.caseSwitcher .iconOnlyBtn {
  min-height: 26px;
  min-width: 26px;
  padding: 0;
  font-size: 12px;
}
.caseSwitcher .searchWrap input {
  min-height: 26px;
  font-size: 12px;
  padding: 0 8px;
}

/* Case Detail layout: a persistent left identity/status rail + a right content column
   (tab bar + panels) — replaces the old top-stacked sticky-bar layout so "where am I, what
   stage, what bank" stays visible no matter which tab or how far down you've scrolled. */
.caseLayout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
.caseRail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.railClientName {
  font-size: 19px;
  font-weight: 800;
  margin: 6px 0 0;
  line-height: 1.25;
}
.railClientSub {
  color: var(--muted);
  font-size: 12.5px;
}
.railStatusCard {
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-blue) 10%, var(--surface-2));
  border: 1px solid var(--line);
}
.railStatusCard[data-tone="green"] { background: color-mix(in srgb, var(--status-green) 12%, var(--surface-2)); }
.railStatusCard[data-tone="gold"] { background: color-mix(in srgb, var(--status-gold) 12%, var(--surface-2)); }
.railStatusCard[data-tone="red"] { background: color-mix(in srgb, var(--status-red) 12%, var(--surface-2)); }
.railStatusTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.5px;
}
.railStatusDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--status-blue);
  flex: 0 0 auto;
}
.railStatusDot[data-tone="green"] { background: var(--status-green); }
.railStatusDot[data-tone="gold"] { background: var(--status-gold); }
.railStatusDot[data-tone="red"] { background: var(--status-red); }
.railStatusMeta {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}
.railStatusSelect {
  margin-top: 10px;
  font-size: 12px;
  min-height: 30px;
}
.railInfoList {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.railInfoHead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 2px;
}
.railInfoRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.railInfoIcon {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: 0.8;
}

.caseTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.caseTopBarRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Case page tabs — one panel visible at a time. Icons + count badges so the busiest tabs
   (documents pending, open discussion/tasks) are scannable without opening each one. */
.caseTabNav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 12px;
}
.caseTabBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.caseTabIcon { font-size: 13px; }
.caseTabCount {
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.caseTabBtn:hover { color: var(--text); background: var(--surface-2); }
.caseTabBtn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.caseTabPanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* Discussion & Tasks tab: tasks/follow-ups/insurance on one side, the discussion feed +
   composer on the other — Michael pointed out these are the same daily workflow, so a
   split view keeps both visible instead of forcing a tab switch between them. */
.discussionTasksSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.discussionTasksCol { min-width: 0; }

/* Case page on a phone: the rail becomes a normal top block instead of a sticky side column,
   and the tab bar / discussion split scroll horizontally or stack instead of squeezing —
   the "very hard to update in phone mode" complaint from earlier feedback. */
@media (max-width: 900px) {
  .caseLayout {
    grid-template-columns: 1fr;
  }
  .caseRail {
    position: static;
  }
  .discussionTasksSplit {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .caseSwitcher .searchWrap {
    flex: 1 1 auto;
  }
  .stageStepper {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .stageStep {
    flex: 0 0 auto;
    min-width: 84px;
  }
  .caseTopBarRight {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 2px;
  }
  .caseTabNav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Overview-as-dashboard: at-a-glance cards (Financial Summary, DSR/NDI, Banks, Tasks,
   Latest Update) sit above the editable Case Info fields, so a quick glance or a quick
   upload never requires switching tabs — only deeper edits/detail work does. */
.ovDashGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ovDashGrid-three {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}
@media (max-width: 900px) {
  .ovDashGrid, .ovDashGrid-three { grid-template-columns: 1fr; }
}
.ovStatGrid-tight { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.ovCard {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 12px 14px;
}
.ovCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 8px;
}
.ovCardHead a { font-size: 11.5px; }
.caseAgentPanel {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 10px;
  background: var(--surface);
  padding: 14px;
  margin-bottom: 16px;
}
.caseAgentHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.caseAgentKicker {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.caseAgentHead strong {
  display: block;
  font-size: 18px;
  margin-top: 2px;
}
.caseAgentPrimary {
  flex: 0 0 auto;
  max-width: 320px;
  white-space: normal;
  line-height: 1.25;
}
.caseAgentStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.caseAgentStats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 9px 10px;
}
.caseAgentStats span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.caseAgentStats strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}
.caseAgentBody {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
}
.caseAgentActions,
.caseAgentFlags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.caseAgentAction {
  min-height: 32px;
  border-radius: 7px;
  font-size: 12px;
  background: var(--surface-2);
}
.caseAgentAction.warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
}
.caseAgentFlag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-size: 11.5px;
  font-weight: 700;
}
.caseAgentFlag.clear {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.caseAgentEmpty,
.caseAgentNote {
  color: var(--muted);
  font-size: 11.5px;
}
.caseAgentNote {
  margin: 10px 0 0;
}
.caseAgentQuickTools,
.docCheckerTools {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}
@media (max-width: 760px) {
  .caseAgentHead,
  .caseAgentBody {
    grid-template-columns: 1fr;
    display: grid;
  }
  .caseAgentStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .caseAgentPrimary {
    max-width: none;
    width: 100%;
  }
}
.ovStatGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.ovStat { display: flex; flex-direction: column; gap: 2px; }
.ovStatLabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ovStatValue { font-size: 15px; font-weight: 700; }
.ovStatInput {
  font-size: 15px;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  padding: 1px 4px;
  min-height: auto;
  border-radius: 5px;
  width: 100%;
}
.ovStatInput:hover { border-color: var(--line); }
.ovStatInput:focus { border-color: var(--accent); background: var(--surface); }
.ovRequiredMark { color: var(--status-red); }
.ovFieldRequired { border-color: color-mix(in srgb, var(--status-red) 45%, var(--line)); }
.ovFieldHelper {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}

/* Case Info fields specifically asked for bigger, easier-to-read text — scoped here so the
   rest of the app's normal density (dense tables, other forms) is untouched. */
#ovCaseInfoWrap .label {
  font-size: 13px;
}
#ovCaseInfoWrap input,
#ovCaseInfoWrap select,
#ovCaseInfoWrap textarea {
  font-size: 15px;
}
#ovCaseInfoWrap .ovFieldHelper {
  font-size: 12px;
}
.ccrisAiCard {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.ccrisAiHead { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.ccrisAiRow { font-size: 12.5px; margin-top: 4px; line-height: 1.4; }
.ovListRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.ovListRow:last-child { border-bottom: none; }
.ovSectionHeading {
  font-size: 13px;
  font-weight: 700;
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ovSectionHeadingToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.ovSectionHeadingToggle:hover { color: var(--accent); }
@keyframes ovCardHighlightPulse {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.ovCardHighlight { animation: ovCardHighlightPulse 1.5s ease; }

/* Rail's "click to edit" rows — same look as the read-only .railInfoRow but as a real button
   so the click affordance (hover/focus) is obvious. */
.railInfoRowClick {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0 -6px;
  color: var(--text);
  cursor: pointer;
  min-height: auto;
}
.railInfoRowClick:hover { background: var(--surface-2); color: var(--accent); }

/* Team fields edit directly in the rail now (no more jump-to-card) — fields stack full-width
   since the rail is only 260px, no side-by-side grid needed here. */
.railTeamEdit {
  margin: 6px 0 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.railTeamEdit .label { margin-top: 0; }
.railTeamEdit input,
.railTeamEdit select {
  font-size: 13px;
}

/* DSR/NDI tab now leads with bank tracking (moved out of its own removed tab) before the
   calculator itself — a bottom border + spacing keeps the two sections visually distinct. */
#banksBody {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* .caseJumpNav / .caseSection below are no longer used by the case detail page itself
   (replaced by .caseTabNav / .caseTabPanel above) but help.html's table-of-contents
   still borrows this same pill-nav + colored-card pattern for its own anchor jumps. */
.caseJumpNav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 2px;
}
.caseJumpTag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.caseJumpTag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-color, var(--accent));
  flex: 0 0 auto;
}
.caseJumpTag:hover { color: var(--text); border-color: var(--tag-color, var(--accent)); }
.caseJumpTag-overview { --tag-color: var(--accent); }
.caseJumpTag-documents { --tag-color: #3b82f6; }
.caseJumpTag-banks { --tag-color: #0e9f6e; }
.caseJumpTag-calculator { --tag-color: #8b5cf6; }
.caseJumpTag-reminders { --tag-color: var(--gold); }
.caseJumpTag-discussion { --tag-color: #64748b; }

.caseSection {
  scroll-margin-top: 128px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tag-color, var(--accent));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.caseSection-overview { --tag-color: var(--accent); }
.caseSection-documents { --tag-color: #3b82f6; }
.caseSection-banks { --tag-color: #0e9f6e; }
.caseSection-calculator { --tag-color: #8b5cf6; }
.caseSection-reminders { --tag-color: var(--gold); }
.caseSection-discussion { --tag-color: #64748b; }

.caseSectionTitle {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--tag-color, var(--text));
}

/* .tableList already reflows every list-based page (followups, directory, insurance,
   bank-doc rules, valuers, partners) into a responsive multi-column grid instead of one
   narrow stacked column, so a wider page shell actually gets used instead of just moving
   the empty space around. Cards keep a sane min-width so text never over-stretches. */
.tableList {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

/* Follow-ups is scanned top-to-bottom in priority order (overdue/due-today first), so a
   multi-column card grid works against it — items that belong next to each other end up in
   different columns. One column, tighter rows, click-to-edit instead of a card per item. */
.fuListView {
  grid-template-columns: 1fr;
  gap: 6px;
}
.fuListView .record {
  padding: 10px 14px;
  cursor: pointer;
}
.fuListView .record.fuEditOpen {
  cursor: default;
}

/* --- Dashboard: jump-to row (internal shortcuts, bypasses the sidebar) -- */
.jumpToRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.jumpToTile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jumpToTile:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* --- Dashboard: quick links row ----------------------------------------- */
.quickLinksRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.quickLinkTile {
  position: relative;
  display: flex;
  align-items: center;
}
.quickLinkTile a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quickLinkTile a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.quickLinkTile img {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.quickLinkRemove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  border: 2px solid var(--bg);
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quickLinkAddTile {
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  text-align: center;
  line-height: 1.3;
}
.quickLinkForm {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.quickLinkForm input {
  width: 180px;
}

/* --- Dashboard (home page) --------------------------------------------- */
.dashHeaderRow { align-items: center; }
.dashHeaderRight { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.dashDateBadge {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.dashKpiGrid {
  display: grid;
  /* Fixed column count (10 KPI cards ÷ 5 = exactly 2 full rows) instead of auto-fit, which let
     the last row stretch 3 cards across the full width with big gaps between them. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.dashKpiCard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashKpiIcon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 4px;
}
.dashKpiCard strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.dashKpiLabel { font-size: 12px; color: var(--muted); }
.dashKpiCard.dashKpiWarn .dashKpiIcon { background: var(--gold-soft); color: var(--warn); }
.dashKpiCard.dashKpiWarn strong { color: var(--warn); }

.dashColumns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.dashCard { padding: 18px 20px; }
.dashCol .sectionHeader { margin-top: 0; }

/* Pipeline donut — plain CSS conic-gradient ring, no charting library, colored per stage using
   the exact same palette as the case-detail stage stepper so a color means one thing app-wide. */
.pipelineDonutWrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pipelineDonut {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pipelineDonut::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--surface);
}
.pipelineDonutCenter {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pipelineDonutCenter strong { font-size: 26px; }
.pipelineDonutCenter span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pipelineLegend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.pipelineLegendRow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pipelineLegendDot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pipelineLegendLabel { color: var(--muted); flex: 1; }
.pipelineLegendCount { font-weight: 700; font-variant-numeric: tabular-nums; }

.pipelineRow { display: grid; grid-template-columns: 140px 1fr 32px; align-items: center; gap: 10px; }
.pipelineLabel { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pipelineBarTrack {
  height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden;
}
.pipelineBar { height: 100%; border-radius: 999px; transition: width 0.2s ease; }
.pipelineBar.workloadBar { background: var(--accent); }
.pipelineCount { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.workloadList { display: flex; flex-direction: column; gap: 12px; }
.workloadRow { display: flex; align-items: center; gap: 10px; }
.workloadRank {
  width: 18px; font-size: 11px; color: var(--muted); font-weight: 700; text-align: center; flex-shrink: 0;
}
.workloadAvatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

.dashAttentionIcon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.dashAttentionIcon.warnMed { background: var(--gold-soft); color: var(--warn); }
.dashAttentionIcon.warnHigh { background: #fde2e1; color: #b42318; }
:root[data-theme="dark"] .dashAttentionIcon.warnHigh { background: #4a1d1a; color: #ff8a80; }

.attentionCard { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.attentionCard:hover { box-shadow: var(--shadow-hover); }

@media (max-width: 860px) {
  .dashColumns { grid-template-columns: 1fr; }
  .dashHeaderRight { margin-left: 0; flex-wrap: wrap; }
}

.timelineItemLink { text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
.timelineItemLink:hover { background: var(--surface-2); }

.knowledgeTabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.knowledgeSection {
  display: grid;
  gap: 14px;
}

.templateBody {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.templateEdit {
  min-height: 100px;
}

.docTypeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.docTypeCard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.docTypeTitle {
  font-weight: 760;
  font-size: 14px;
  margin-bottom: 10px;
}

.docThumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.docThumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.docThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.docDeleteBtn {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  min-height: auto;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.docEmpty {
  grid-column: span 2;
  color: var(--muted);
  font-size: 12px;
  padding: 16px 0;
  text-align: center;
  background: var(--surface-2);
  border-radius: 6px;
}

.docUploadBtn {
  display: block;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
}

.docUploadBtn:hover {
  background: #d7ede7;
}

.docCaptionLabel {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px;
  margin-bottom: 4px;
}

.docCaptionBody {
  font-size: 12.5px;
  user-select: text;
}

@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .content {
    padding: 22px;
  }

  .recordGrid,
  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashKpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mobileMenuBtn {
  display: none;
}

.mobileSidebarBackdrop {
  display: none;
}

@media (max-width: 640px) {
  .sidebar,
  .content {
    padding: 16px;
  }

  .grid.two,
  .grid.three,
  .recordGrid {
    grid-template-columns: 1fr;
  }

  .dashKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bankerRow {
    max-width: 100%;
    flex-basis: 100%;
  }

  .stateFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviewFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auditGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detailHeader {
    display: grid;
  }

  .emptyState h1,
  .detailHeader h1 {
    font-size: 26px;
  }

  /* Mobile: sidebar becomes a slide-in drawer instead of a long stack you scroll past. */
  .mobileMenuBtn {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    color: var(--accent-2);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 16px;
    text-align: left;
    min-height: 46px;
  }

  .mobileSidebarBackdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(13, 21, 33, 0.45);
    z-index: 39;
  }

  .app {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-hover);
  }

  .sidebar.mobileOpen {
    transform: translateX(0);
  }

  .content {
    padding-top: 14px;
  }

  .tabBtn {
    padding: 10px 12px;
    font-size: 12.5px;
  }

  .recordTop {
    flex-wrap: wrap;
  }

  button,
  input,
  select,
  textarea {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
}

/* --- Cases & Leads (Loan Connect V3) ----------------------------------- */

.case-stale-3 { border-left: 4px solid var(--gold, #b8860b); }
.case-stale-5 { border-left: 4px solid #c0453c; }
.case-jump-highlight { box-shadow: 0 0 0 3px var(--accent, #c2570c); transition: box-shadow 0.3s ease; }

.statusSelect2 {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.lcLink { text-decoration: none; font-size: 13px; opacity: 0.8; }
.lcLink:hover { opacity: 1; }

.stageStepper {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  overflow-x: auto;
}
.stageStep {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: none;
  border-bottom: 3px solid var(--line);
  padding: 4px 4px 6px;
  cursor: pointer;
  min-height: auto;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.stageStep:disabled { cursor: default; }
.stageStepDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  flex: 0 0 auto;
}
.stageStepLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stageStep.done { border-bottom-color: var(--gold, #b8860b); color: var(--text); }
.stageStep.done .stageStepDot { background: var(--gold, #b8860b); }
.stageStep.active { border-bottom-color: var(--accent); color: var(--text); }
.stageStep.active .stageStepDot { background: var(--accent); }

.caseTaskList { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.caseTaskItem {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 7px 2px;
  border-bottom: 1px solid var(--line);
}
.caseTaskItem:last-child { border-bottom: none; }
.caseTaskItem .taskCheck,
.caseTaskItem .mergedTaskCheck {
  width: auto; flex: 0 0 auto; padding: 0; margin: 0;
}
.caseTaskItem span { flex: 1; min-width: 0; }
.caseTaskItem.done span { text-decoration: line-through; color: var(--muted); }
.caseTaskItem .taskDeleteBtn,
.caseTaskItem .mergedTaskDeleteBtn {
  margin-left: auto; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 16px; min-height: 30px; min-width: 30px; padding: 0;
  flex: 0 0 auto;
}
.caseTaskItem .taskDeleteBtn:hover,
.caseTaskItem .mergedTaskDeleteBtn:hover { color: var(--danger); }
.caseTaskItem .mergedTaskDateInput {
  flex: 0 0 auto; width: auto; min-height: auto;
  font-size: 12.5px; padding: 3px 6px; color: var(--muted);
}
.caseTaskItem.done .mergedTaskDateInput { opacity: 0.6; }
.caseTaskItem .mergedTaskDateStatic {
  flex: 0 0 auto; font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.addTaskRow { display: flex; gap: 8px; margin-top: 8px; }
.addTaskInput { flex: 1; font-size: 13px; padding: 6px 10px; }
.addTaskBtn { flex: 0 0 auto; font-size: 12.5px; padding: 6px 12px; }

.checklistBox {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.checklistList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.checklistItem { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checklistItem input { width: auto; flex: 0 0 auto; }
.checklistDone { text-decoration: line-through; color: var(--muted); }

.bankSubRow {
  border: 1px solid var(--line);
  border-left: 4px solid var(--status-grey);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
}
/* Status colors are semantic (progress state), independent of the brand accent — a scan-at-a-
   glance signal for "what's the state of this bank," same principle as the DSR/NDI badges. */
:root {
  --status-grey: #9ca3af;
  --status-blue: #3b82f6;
  --status-gold: #b8860b;
  --status-green: #0e9f6e;
  --status-red: #dc2626;
}
:root[data-theme="dark"] {
  --status-grey: #9ca3af;
  --status-blue: #60a5fa;
  --status-gold: #e0b13a;
  --status-green: #34d399;
  --status-red: #f87171;
}
.bankSubRow[data-status-color="grey"] { border-left-color: var(--status-grey); }
.bankSubRow[data-status-color="blue"] { border-left-color: var(--status-blue); }
.bankSubRow[data-status-color="gold"] { border-left-color: var(--status-gold); }
.bankSubRow[data-status-color="green"] { border-left-color: var(--status-green); }
.bankSubRow[data-status-color="red"] { border-left-color: var(--status-red); }
.bankSubHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bankSubBankName { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.bankSubHead select { width: auto; min-width: 140px; }
.bankSubStatusPill { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.bankSubStatusPill[data-status-color="grey"] { background: color-mix(in srgb, var(--status-grey) 18%, transparent); color: var(--status-grey); }
.bankSubStatusPill[data-status-color="blue"] { background: color-mix(in srgb, var(--status-blue) 18%, transparent); color: var(--status-blue); }
.bankSubStatusPill[data-status-color="gold"] { background: color-mix(in srgb, var(--status-gold) 18%, transparent); color: var(--status-gold); }
.bankSubStatusPill[data-status-color="green"] { background: color-mix(in srgb, var(--status-green) 18%, transparent); color: var(--status-green); }
.bankSubStatusPill[data-status-color="red"] { background: color-mix(in srgb, var(--status-red) 18%, transparent); color: var(--status-red); }
.bankSubActions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.dangerLinkBtn { color: var(--danger); margin-left: auto; }
.dangerLinkBtn:hover { text-decoration: underline; }

.lawyerDetailsCard {
  border: 1px solid var(--line);
  border-left: 4px solid var(--status-green);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.lawyerDetailsCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lawyerDetailsCardBody {
  font-size: 13px;
  margin-top: 6px;
}

.warningStrip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.warningStripItem {
  font-size: 12px;
  font-weight: 600;
  color: var(--status-gold, #b8860b);
  background: color-mix(in srgb, var(--status-gold, #b8860b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-gold, #b8860b) 35%, transparent);
  border-radius: 6px;
  padding: 6px 10px;
}

.incomeTallySummary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 8px 10px;
  margin-top: 6px;
  font-size: 12.5px;
}
.incomeTallySummaryRow {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.incomeTallySummaryTotal {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 6px;
  font-weight: 700;
}

.timelineList { display: flex; flex-direction: column; gap: 14px; }

.dashScrollList {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.timelineItem { display: flex; gap: 10px; font-size: 13px; }
.timelineIcon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.timelineMeta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* --- Directory ---------------------------------------------------------- */

.directoryTypeFilters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.contactTypeBadge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}

/* --- Dense comparison tables (Directory, EF / Panel Bankers) ------------
   Real <table> instead of .tableList's card grid — built for scanning many rows
   at once (Directory: 800+ contacts; EF: comparing every bank on a project side
   by side), where a card-per-record layout meant scrolling past one record at a
   time just to compare a couple of fields. */
.dataTableWrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  /* macOS/trackpad scrollbars auto-hide, so a table that's wider than its wrap just looks like
     it's cut off with no signal that there's more to the right — a permanently visible, styled
     scrollbar plus an edge fade (below) makes "this scrolls" obvious without needing JS to
     detect scroll position. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.dataTableWrap::-webkit-scrollbar {
  height: 9px;
}

.dataTableWrap::-webkit-scrollbar-track {
  background: transparent;
}

.dataTableWrap::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.dataTableWrap::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.dataTableWrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 9px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface) 85%);
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dataTable th,
.dataTable td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.dataTable tbody tr:last-child td {
  border-bottom: none;
}

.dataTable tbody tr:hover {
  background: var(--accent-soft);
}

.dataTable thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  z-index: 2;
}

.dataTable th.sortable {
  cursor: pointer;
  user-select: none;
}

.dataTable th.sortable:hover {
  color: var(--accent-2);
}

.dataTable th .sortArrow {
  font-size: 8px;
  opacity: 0.4;
  margin-left: 2px;
}

.dataTable th.sortActive .sortArrow {
  opacity: 1;
  color: var(--accent);
}

.dirTable td.dirNameCell {
  font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
}

.dirTable td.dirTypeBadgeCell,
.dirTable td.dirPhoneCell,
.dirTable td.dirEmailCell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dirTable td.dirNotesCell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.dirTable td.dirActionsCell {
  text-align: right;
  white-space: nowrap;
}

/* Project EF & Value — the panel list is meant to read like a plain Excel sheet: real grid
   lines on every cell, neutral text (no accent-colored bold), zebra rows, and banker names as
   a plain comma-separated line instead of button-chip pills. Scoped to #efList so the shared
   .dataTable look elsewhere (Directory, Cases) is untouched. */
#efList.dataTableWrap {
  border-radius: 0;
}

#efList .dataTable th,
#efList .dataTable td {
  border-right: 1px solid var(--line);
}

#efList .dataTable th:last-child,
#efList .dataTable td:last-child {
  border-right: none;
}

#efList .dataTable tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.efBankTable td.efBankName {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.efBankTable .efUpdatedHint {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.efBankTable td.efStatCell {
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.efBankTable td.efBankersCell {
  min-width: 260px;
  max-width: 340px;
}

/* Plain comma-separated text list, like an Excel cell with several names typed in — not
   button-chip pills. Edit/info icons are still there (same function as before) but only
   reveal on hover of that name, so the default view reads as flat text. */
.bankerChipList {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 0;
  align-items: center;
}

.bankerChipEmpty {
  color: var(--muted);
  font-size: 12.5px;
}

.bankerChip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 100%;
}

.bankerChip:not(:last-child)::after {
  content: ",";
  color: var(--muted);
  margin-right: 5px;
}

.bankerChip-moved .bankerChipName {
  color: #a3730f;
}

.bankerChip-resigned .bankerChipName {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.75;
}

.invitePicker {
  margin-top: 8px;
  font-size: 13px;
}

.invitePicker summary {
  cursor: pointer;
  color: var(--accent, #2563eb);
  font-weight: 500;
  user-select: none;
}

.invitePickerList {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border, #d9dee3);
  border-radius: 8px;
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invitePickerRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  cursor: pointer;
}

.invitePickerRow input {
  width: auto;
  flex: none;
}

.invitePickerEmpty {
  opacity: 0.6;
  font-style: italic;
}

.waInboxLayout {
  display: flex;
  gap: 16px;
  height: calc(100vh - 260px);
  min-height: 420px;
}

.waConvList {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  border: 1px solid var(--border, #d9dee3);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.waConvRow {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: none;
  cursor: pointer;
}

.waConvRow:hover { background: var(--surface-2, #f3f4f6); }
.waConvRow.active { background: var(--surface-2, #eef2ff); }

.waConvRowTop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.waConvRowName {
  font-weight: 600;
  font-size: 13.5px;
}

.waConvRowTime {
  font-size: 11px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.waConvRowPreview {
  font-size: 12.5px;
  color: var(--muted, #6b7280);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waConvRowBadges {
  margin-top: 5px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.waUnreadBadge {
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
}

.waUnassignedTag {
  font-size: 10.5px;
  color: var(--warning, #b45309);
  font-weight: 600;
}

.waThreadPane {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, #d9dee3);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}

.waThreadHeader {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.waThreadMessages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.waBubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.waBubble.in {
  align-self: flex-start;
  background: var(--surface-2, #f3f4f6);
}

.waBubble.out {
  align-self: flex-end;
  background: var(--accent, #2563eb);
  color: #fff;
}

.waBubbleMeta {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 3px;
}

.waReplyBar {
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
}

.waReplyBar textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 100px;
}

.waSendError {
  padding: 0 12px 10px;
  color: var(--danger, #c0392b);
  font-size: 12.5px;
}

.waAssignBar {
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 10px 12px;
  font-size: 12.5px;
  position: relative;
}

.bankerChipRating {
  color: #d99e00;
  font-size: 11px;
  letter-spacing: -1px;
}

.bankerChipComment {
  font-size: 10.5px;
  opacity: 0.7;
}

.bankerChipName {
  font-weight: 400;
  font-size: 12.5px;
  background: none;
  border: none;
  padding: 0;
  min-height: auto;
  color: var(--text);
  /* Some banker names carry a long status note appended ("(currently in OCBC) - updated
     9/1/2026") — nowrap let that run right out of the pill and bleed into the next table
     column instead of wrapping within its own chip. */
  white-space: normal;
  word-break: break-word;
}

.bankerChipName:hover {
  text-decoration: underline;
  color: var(--accent);
}

.bankerChipNameStatic {
  color: var(--text);
  cursor: default;
}

.bankerChipIconBtn {
  display: none;
  background: none;
  border: none;
  min-height: auto;
  padding: 2px 3px;
  font-size: 11px;
  border-radius: 999px;
  opacity: 0.55;
  line-height: 1;
}

.bankerChip:hover .bankerChipIconBtn {
  display: inline-flex;
}

.bankerChipIconBtn:hover {
  opacity: 1;
  background: var(--accent-soft);
}

.efBankTable td.efNotesCell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12.5px;
}

/* --- Icon sidebar (Loan Connect V3) ------------------------------------ */

body.hasIconNav { padding-left: 72px; transition: padding-left 0.18s ease; }
body.hasIconNav:has(.iconNav:not(.collapsed)) { padding-left: 190px; }

.iconNav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 72px;
  background: var(--accent-2, #8a4a1f);
  color: #f2efe6;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  transition: width 0.18s ease;
  overflow: hidden;
}
.iconNav:not(.collapsed) { width: 190px; }

.iconNavBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(242,239,230,0.12);
  white-space: nowrap;
}
.iconNavLogo {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(243, 112, 33, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.iconNavLogo img { display: block; }
.iconNavWordmark { font-weight: 700; font-size: 14.5px; }
.iconNavWordmark em { font-style: normal; color: #f37021; }
.iconNav.collapsed .iconNavWordmark { display: none; }
.iconNav.collapsed .iconNavBrand { justify-content: center; padding: 0 0 16px; }

.iconNavToggle {
  position: absolute;
  top: 22px;
  right: -14px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-2, #8a4a1f);
  border: 1px solid var(--line);
  box-shadow: var(--shadow, 0 1px 4px rgba(0,0,0,0.15));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  min-height: auto;
  padding: 0;
  z-index: 41;
}

.iconNavSectionLabel {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(242,239,230,0.5);
  padding: 4px 16px 8px;
  white-space: nowrap;
}
.iconNav.collapsed .iconNavSectionLabel { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.iconNavItems { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; overflow-y: auto; }

.iconNavItem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  border-radius: 8px;
  color: rgba(242,239,230,0.75);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.iconNavItem:hover { background: rgba(242,239,230,0.08); color: #f2efe6; }
.iconNavItem.active {
  background: rgba(184,134,11,0.18);
  color: var(--gold, #d9a940);
  font-weight: 700;
}
.iconNavIcon { flex: 0 0 auto; display: flex; }
.iconNav.collapsed .iconNavItem { justify-content: center; padding: 10px; }
.iconNav.collapsed .iconNavItem .iconNavLabel { display: none; }
.iconNavDot {
  margin-left: auto; width: 6px; height: 6px; border-radius: 999px;
  background: var(--gold, #d9a940); flex: 0 0 auto;
}
.iconNav.collapsed .iconNavDot { position: absolute; top: 6px; right: 6px; margin-left: 0; }

/* On a phone, the desktop sidebar (however collapsed) is replaced entirely by the fixed
   bottom tab bar below — no more squishing every module into an unreadable scrollable
   row. Only five things live in the bar itself; everything else is one tap away in More. */
@media (max-width: 720px) {
  body.hasIconNav,
  body.hasIconNav:has(.iconNav:not(.collapsed)) { padding-left: 0; padding-top: 0; }
  .iconNav { display: none; }
}

.mobileTabBar { display: none; }
@media (max-width: 720px) {
  body.hasMobileTabBar { padding-bottom: 68px; }
  .mobileTabBar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
    z-index: 40;
    padding: 0 4px;
  }
  .mobileTabItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 9.5px;
    font-family: inherit;
    cursor: pointer;
  }
  .mobileTabItem.active { color: var(--accent); font-weight: 700; }
  .mobileTabItem svg { width: 20px; height: 20px; }
  .mobileTabFab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px; height: 48px;
    margin: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(243, 112, 33, 0.35);
    transform: translateY(-8px);
  }
}

.mobileMoreSheet {
  display: none;
}
@media (max-width: 720px) {
  .mobileMoreSheet {
    display: flex;
    align-items: flex-end;
    position: fixed;
    inset: 0;
    background: rgba(13, 21, 33, 0.45);
    z-index: 50;
  }
  .mobileMoreSheet.hidden { display: none; }
  .mobileMoreSheetCard {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .mobileMoreSheetHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .mobileMoreSheetHead button {
    background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
  }
  .mobileMoreGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .mobileMoreItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-size: 11px;
    text-align: center;
    font-family: inherit;
    cursor: pointer;
  }
  .mobileMoreItem svg { width: 20px; height: 20px; }
}

/* Calendar page */
.calGrid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.calWeekdayRow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg); }
.calWeekday { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.calDaysGrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calDay {
  min-height: 110px; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.calDay:nth-child(7n) { border-right: 1px solid var(--line); }
.calDay:hover { background: var(--accent-soft); }
.calDay-empty { cursor: default; background: var(--bg); }
.calDay-empty:hover { background: var(--bg); }
.calDayNum { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.calDay-today .calDayNum {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 999px; background: var(--accent); color: #fff;
}
.calDayItems { display: flex; flex-direction: column; gap: 3px; }
.calChip {
  font-size: 11px; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border: 1px solid transparent;
}
.calChip-case { background: #e6f0ff; color: #1d4ed8; border-color: #c7dbff; }
.calChip-insurance { background: #fdece0; color: #b45309; border-color: #fbd9b8; }
.calChip-appointment { background: #e9f9ee; color: #15803d; border-color: #c5efd3; }
.calChip-standalone { background: #f1eefe; color: #6d28d9; border-color: #ded6fb; }
.calChip-done { opacity: 0.5; text-decoration: line-through; }
.calChipMore { font-size: 11px; color: var(--muted); padding: 2px 4px; }

:root[data-theme="dark"] .calChip-case { background: #16264a; color: #93b7ff; border-color: #23386b; }
:root[data-theme="dark"] .calChip-insurance { background: #3a2413; color: #f2b183; border-color: #5a3a1c; }
:root[data-theme="dark"] .calChip-appointment { background: #16351f; color: #7fe0a0; border-color: #1f4b2c; }
:root[data-theme="dark"] .calChip-standalone { background: #2a2050; color: #c4b2fb; border-color: #3c2f70; }

@media (max-width: 720px) {
  .calDay { min-height: 76px; }
  .calWeekday { font-size: 10.5px; padding: 6px 2px; }
}

.dashQuickUpdateBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  min-height: 38px;
  padding: 0 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* --- Expenses (phone-first: narrow single column, large touch targets) -------- */
.expensesPage {
  max-width: 520px;
}
.expCategoryBar {
  background: var(--accent);
}
.expScanBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 640px) {
  .expensesPage {
    max-width: 100%;
  }
}