/* ── Contacts module (Phase 1) ─────────────────────────────────────── */
.contacts-table th,
.contacts-table td { vertical-align: middle; }

/* ── Lookup field option rows + hover preview popup ──
   Lookup fields render the same .contact-address-select trigger +
   popover the State / Searchable picklist fields use, but each
   option row is a two-line cell (label + sub) and gets a fixed-
   position preview popup on hover so users can disambiguate without
   committing the pick. */
.contact-lookup-opt {
  align-items: flex-start;
}
.contact-lookup-opt-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.contact-lookup-opt-text strong {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-lookup-opt-text .muted {
  font-size: 0.75rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lookup-preview-popup {
  position: fixed;
  width: 280px;
  background: #fff;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 0.7rem 0.85rem;
  z-index: 100000;
  font-size: 0.85rem;
  pointer-events: none;
  animation: fade-in 0.12s ease;
}
.lookup-preview-popup-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #eef3f0;
}
.lookup-preview-popup-title strong {
  font-size: 0.92rem;
  word-break: break-word;
}
.lookup-preview-popup-title .muted {
  font-size: 0.72rem;
  white-space: nowrap;
}
.lookup-preview-popup-rows {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.55rem;
}
.lookup-preview-popup-rows dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  align-self: start;
}
.lookup-preview-popup-rows dd {
  margin: 0;
  font-size: 0.85rem;
  word-break: break-word;
}
.lookup-preview-popup-empty {
  margin: 0;
  font-size: 0.78rem;
}
.contacts-table tbody tr:hover { background: #f3f7f5; cursor: default; }

/* ── Related records panel (cross-module back-references) ──
   Sits beneath the user sections inside .contact-detail-card. One
   group card per (sourceModule, fieldId), each with a clickable row
   list that navigates into the source record. Hidden entirely when
   the walker returns no refs (no empty-state noise). */
.contact-detail-related {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line, #d6dfdb);
}
.contact-detail-related-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.contact-detail-related-head h4 {
  font-size: 0.95rem;
  font-weight: 600;
}
.contact-detail-related-group {
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.contact-detail-related-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: #f3f7f5;
  border-bottom: 1px solid var(--line, #d6dfdb);
  font-size: 0.85rem;
}
.contact-detail-related-table {
  width: 100%;
  border-collapse: collapse;
}
.contact-detail-related-table tr.contact-detail-related-row {
  cursor: pointer;
  border-bottom: 1px solid #eef3f0;
}
.contact-detail-related-table tr.contact-detail-related-row:last-child {
  border-bottom: none;
}
.contact-detail-related-table tr.contact-detail-related-row:hover {
  background: #f3f7f5;
}
.contact-detail-related-table td {
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
}
.contact-detail-related-context {
  display: block;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}
.contact-detail-related-chevron {
  text-align: right;
  width: 1.2rem;
  color: var(--muted, #6c8076);
  font-size: 1rem;
}
/* User-defined sections render their fields as label-on-top cells
   inside a CSS grid. The column count comes from the schema's
   section.columns (1 / 2 / 3) via a data-cols attribute on the
   container so we don't need a class per layout. */
.contact-detail-card .contact-detail-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin-top: 0.6rem;
}

/* ── Portal Account panel ──────────────────────────────────────────
   Borrower-only top-of-detail panel showing portal-login lifecycle
   state + the Activate / Deactivate / View Portal / Refresh Zoho /
   Delete buttons that used to live in the legacy Borrower Accounts
   table. Sits between the contact header and the user-defined
   sections. */
.portal-account-panel {
  margin-top: 0.8rem;
  border: 1px solid #d8dfe7;
  background: #f7f9fc;
}
.portal-account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.portal-account-head .chip { flex: 0 0 auto; }
.portal-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.7rem;
}
.portal-account-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.portal-account-row-wide { grid-column: 1 / -1; }
.portal-account-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.portal-account-value {
  font-size: 0.92rem;
  word-break: break-word;
}
.portal-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e3e8ef;
}
.portal-account-panel-empty .portal-account-empty-msg {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.contact-detail-tabs {
  margin: 0.5rem 0 0.6rem;
}

/* ── Loans-module full-page tabbed detail ─────────────────────────
   Mirrors the loan-detail modal popup's tab list (Overview / Details
   / Activity / To-dos) but as a top-level page rather than a modal.
   Opens from the list-view row click; the kanban-card click still
   opens the modal. */
.module-detail-tabs {
  margin: 0 0 0.7rem;
}
.module-detail-tab-body {
  min-height: 200px;
}

/* ── Loan-detail modal: Details tab summary ───────────────────────
   Read-only summary of the schema-driven body. The modal can't host
   the live editable inputs (the existing global handler-binding pass
   ran before the modal rendered), so this view shows a compact
   sectioned grid of field labels + display values, plus an "Open
   full record" button that closes the modal and routes to the full
   page. */
.loan-detail-details-pane {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.loan-detail-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  background: #f7f9fc;
  border: 1px solid #d8dfe7;
  border-radius: 6px;
}
.loan-detail-details-section {
  margin: 0;
}
.loan-detail-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
}
.loan-detail-details-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.loan-detail-details-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loan-detail-details-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.loan-detail-details-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.loan-detail-details-value {
  font-size: 0.92rem;
  word-break: break-word;
}
@media (max-width: 720px) {
  .loan-detail-details-grid,
  .loan-detail-details-grid[data-cols="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .portal-account-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-account-row-wide { grid-column: 1; }
}
.contact-detail-card .contact-detail-body[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.contact-detail-card .contact-detail-body[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-detail-card .contact-detail-body[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .contact-detail-card .contact-detail-body[data-cols="2"],
  .contact-detail-card .contact-detail-body[data-cols="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contact-detail-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
/* Every editable control inside a section cell stretches the full
   width of its grid column so layouts look uniform regardless of the
   browser's default control width.
   Note: the input is wrapped in a `<span class="contact-detail-value">`,
   so the rules below use descendant selectors and we promote that
   wrapper span to a block-level container. */
.contact-detail-cell .contact-detail-value {
  display: block;
  width: 100%;
}
.contact-detail-cell input,
.contact-detail-cell select,
.contact-detail-cell textarea,
.contact-detail-cell .contact-inline-display,
.contact-detail-cell .contact-inline-edit {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.contact-detail-cell .contact-inline-edit {
  display: flex;
}
.contact-detail-cell .contact-inline-edit input,
.contact-detail-cell .contact-inline-edit select,
.contact-detail-cell .contact-inline-edit textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
/* Checkboxes are the one exception — they shouldn't stretch. */
.contact-detail-cell input[type="checkbox"],
.contact-detail-cell input[type="radio"] {
  width: auto;
  max-width: none;
}
.contact-detail-row {
  display: contents;   /* legacy — used only by Identity grid */
}
.contact-detail-label {
  align-self: start;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #4d6058);
  white-space: nowrap;
}
.contact-detail-value { font-size: 0.92rem; }
.contact-detail-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.contact-detail-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.contact-detail-form input,
.contact-detail-form select,
.contact-detail-form textarea {
  font-size: 0.9rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  font-family: inherit;
  font-weight: 400;
}
/* Subsection dropzone — the inner <ul> wrapping a subsection's
   children doubles as a drop target for the schema-editor dragger,
   so dragging a field anywhere into the subsection (including its
   empty space below the last row, or onto its empty-state message)
   appends it to that subsection. The dragger adds .is-drop-target
   to whichever element the cursor is over. */
.contact-schema-subsection-dropzone {
  min-height: 1.4rem;
  padding: 0.15rem 0;
  transition: background 0.08s ease, outline 0.08s ease;
}
.contact-schema-subsection-dropzone.is-drop-target {
  background: #e9f4ef;
  outline: 2px dashed #0f8b70;
  outline-offset: -2px;
  border-radius: 6px;
}
.contact-schema-subsection-dropzone-empty.is-drop-target {
  background: #e9f4ef;
  outline: 2px dashed #0f8b70;
  outline-offset: -2px;
  border-radius: 6px;
  color: #0f5d4a;
}

/* Auto-calc chip — small pill next to a field's label showing the
   value is computed (e.g. lock-expiration = lock-date + lock-term).
   Renders inside the muted label, so it inherits muted text color
   but gets an outlined pill shape to read as metadata. */
.contact-detail-autocalc-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid #b3dac3;
  border-radius: 999px;
  background: #f3faf6;
  color: #0f5d4a;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Subsection — labeled mini-block nested inside a section. Renders
   like a smaller section: bold title, then its own column grid of
   field cells. Visually distinguished from the parent with a thin
   left rule + slight indent so the hierarchy reads at a glance. */
.contact-detail-subsection {
  margin: 0.6rem 0 0.4rem;
  padding: 0.55rem 0.7rem 0.4rem 0.85rem;
  border-left: 3px solid #d4ead8;
  background: rgba(228, 240, 232, 0.35);
  border-radius: 6px;
}
.contact-detail-subsection-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #114030;
}
.contact-detail-subsection-empty {
  margin: 0;
  font-size: 0.82rem;
}

/* Name field — composite of First + Last text inputs in a single
   row. Both inputs flex equally so they share the available width. */
.contact-name-input {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
}
.contact-detail-cell .contact-name-input > input[type="text"],
.contact-name-input > input[type="text"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Phone field — composite of a number input + a type select. Lays
   them out side-by-side on a single row, with the type select fixed-
   width so the number input takes the rest. The selectors below are
   intentionally specific (.contact-detail-cell .contact-phone-input)
   so they outrank the generic `.contact-detail-cell input/select {
   width: 100% }` rule above; without that, both children would each
   try to claim 100% width and the number input collapsed to a sliver. */
.contact-phone-input {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
}
.contact-detail-cell .contact-phone-input > input[type="tel"],
.contact-phone-input > input[type="tel"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.contact-detail-cell .contact-phone-input > .contact-phone-type-select,
.contact-phone-input > .contact-phone-type-select {
  flex: 0 0 auto;
  width: 7rem;
  font: inherit;
  font-size: 0.85rem;
}
.contact-phone-type-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 999px;
  background: #f3f7f5;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Percentage field input — number control with a "%" suffix glyph
   visually attached to the right edge. The input itself keeps the
   shared border/padding from above; the wrap is just a positioning
   container for the suffix span. */
.contact-pct-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.contact-pct-input-wrap .contact-pct-input {
  width: 100%;
  padding-right: 1.6rem;
}
.contact-pct-input-wrap .contact-pct-suffix {
  position: absolute;
  right: 0.6rem;
  pointer-events: none;
  color: var(--muted, #6c8076);
  font-size: 0.85rem;
  font-weight: 500;
}
/* Section-nav chip bar — sticky to viewport top while the contact
   detail card is in view. Negative left/right margins counter the
   parent .panel-card's 0.85rem padding so the bar spans flush with
   the card edges. Top margin is tuned so the bar sits flush with the
   card's top border when stuck. */
.contact-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  margin: 0.2rem -0.85rem 0.7rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel, #fdfefc);
  border-bottom: 1px solid var(--line, #d6dfdb);
  /* A subtle shadow appears under the bar when it's stuck so the
     transition is obvious. The shadow is always on; the bar sits
     flush with the card top in its natural position so it reads as
     part of the card edge there too. */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.contact-section-nav-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted, #4d6058);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.contact-section-nav-btn:hover {
  background: #f3f7f5;
  color: var(--ink, #10231d);
}
.contact-section-nav-btn.is-active {
  background: #d4ead8;
  color: #0a6a54;
  border-color: #b3dac3;
}

/* Click-to-edit cell — Zoho/Salesforce style. The display button
   looks like plain text with a faint hover hint that says "this is
   editable." Click → swaps to an inline input with ✓ / ✕ controls. */
.contact-inline-display {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  padding: 0.25rem 0.45rem;
  margin: -0.25rem -0.45rem;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  cursor: text;
  font-weight: 400;
  /* Stretch across the entire value column so clicking anywhere in
     the row triggers edit (no dead zone past the natural text width). */
  display: block;
  width: 100%;
  white-space: pre-wrap;
  min-height: 1.6em;
}
/* The contact-detail-value cell needs to be a block container too,
   otherwise the inline-default span doesn't allow a width:100% child
   to fill the grid cell. */
.contact-detail-row .contact-detail-value {
  display: block;
  width: 100%;
}
.contact-inline-display:hover {
  background: #f3f7f5;
  border-color: var(--line, #d6dfdb);
}
.contact-inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}
.contact-inline-edit input,
.contact-inline-edit textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--accent, #1d8f60);
  background: #fff;
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 360px;
  outline: 2px solid rgba(29, 143, 96, 0.18);
}
.contact-inline-commit,
.contact-inline-cancel {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
}
.contact-inline-commit {
  background: #e9f5ee;
  border-color: #b3dac3;
  color: #0a6a54;
}
.contact-inline-commit:hover { background: #d4ead8; }
.contact-inline-cancel:hover { background: #f3f7f5; }

/* Inline auto-save pill in the contact detail header. */
.contacts-autosave-status {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.contacts-autosave-status.is-saving { opacity: 1; color: var(--muted, #4d6058); }
.contacts-autosave-status.is-saved {
  opacity: 1;
  color: #1d8f60;
}
.contacts-autosave-status.is-saved::before { content: "✓ "; }
.contacts-autosave-status.is-error { opacity: 1; color: #b42318; }

.contact-detail-section { margin-top: 1rem; }
.contact-detail-section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--ink, #10231d);
  border-bottom: 1px solid var(--line, #d6dfdb);
  padding-bottom: 0.3rem;
}
.contact-detail-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.contact-detail-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.contact-detail-row span input,
.contact-detail-row span select,
.contact-detail-row span textarea {
  font-size: 0.9rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  width: 100%;
  max-width: 360px;
  font-family: inherit;
}
/* Clickable list row — entire row opens the record on click. Links
   and buttons inside (e.g. mailto:, sort headers) keep their own
   semantics; the row handler skips when the click is on those. */
.contacts-table tr.record-row { cursor: pointer; }
.contacts-table tr.record-row:hover { background: #f3f7f5; }

/* Filter toolbar — single button row above the table that opens the
   filter popup and the saved-views dropdown. Keeps the page
   uncluttered when no filters are active. */
.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.7rem 0 0.5rem;
  flex-wrap: wrap;
  position: relative;
}
.filter-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.filter-toolbar-btn:hover {
  background: #f3f7f5;
  border-color: #c5d3cb;
}
.filter-toolbar-btn.has-active {
  background: #d4ead8;
  border-color: #b3dac3;
  color: #0a6a54;
}
.filter-toolbar-icon {
  flex-shrink: 0;
}
.filter-toolbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  background: #0a6a54;
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Views dropdown — text trigger that opens a vertical menu of
   saved views with per-row 3-dot menus. */
.views-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.views-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.views-dropdown-trigger:hover,
.views-dropdown-wrap.is-open .views-dropdown-trigger {
  background: #f3f7f5;
  border-color: var(--line, #d6dfdb);
}
.views-dropdown-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.views-dropdown-current {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.views-dropdown-caret {
  font-size: 0.75rem;
  color: var(--muted, #4d6058);
}
.views-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  min-width: 22rem;
  max-width: 28rem;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 30, 25, 0.16);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.views-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.86rem;
  position: relative;
}
.views-dropdown-item:hover { background: #f3f7f5; }
.views-dropdown-item.is-active {
  background: #d4ead8;
  font-weight: 600;
}
.views-dropdown-item-name {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.views-dropdown-default-tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.views-dropdown-check {
  color: #0a6a54;
  font-weight: 700;
  flex-shrink: 0;
}
.views-dropdown-menu-btn {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  color: var(--muted, #4d6058);
  flex-shrink: 0;
}
.views-dropdown-menu-btn:hover {
  background: #e5edea;
  color: var(--ink, #10231d);
}
.views-dropdown-menu-pop {
  /* Default fallback positioning — JS replaces these with viewport-
     fixed coords on open so the submenu escapes the dropdown's
     overflow clip and opens off to the right (Zoho pattern). */
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 4px;
  z-index: 100;
  min-width: 16rem;
  background: #fff;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(20, 30, 25, 0.18);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}
.views-dropdown-menu-pop button {
  appearance: none;
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
}
.views-dropdown-menu-pop button:hover { background: #f3f7f5; }
.views-dropdown-menu-pop button.is-danger { color: #b42318; }
.views-dropdown-menu-pop button.is-danger:hover { background: #fbf3f2; }
.views-dropdown-divider {
  height: 1px;
  background: #ecf0ee;
  margin: 0.2rem 0;
  list-style: none;
}
.views-dropdown-action {
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 600;
  color: #0a6a54;
}
.views-dropdown-action:hover { background: #d4ead8; }

.contact-views-modified {
  font-size: 0.78rem;
  color: #b06b00;
  font-weight: 600;
}

/* Delete-confirm dialog options — full-width pickable rows with
   strong title + description. Hard delete row gets a danger tint. */
.delete-dialog-options { list-style: none; }
.delete-dialog-option button {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.delete-dialog-option button strong {
  font-size: 0.95rem;
}
.delete-dialog-option button .muted {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
}
.delete-dialog-option button:hover {
  background: #f3f7f5;
  border-color: #c5d3cb;
}
.delete-dialog-option button.delete-dialog-hard {
  color: #b42318;
}
.delete-dialog-option button.delete-dialog-hard strong {
  color: #b42318;
}
.delete-dialog-option button.delete-dialog-hard:hover {
  background: #fbf3f2;
  border-color: #f0c4c0;
}

/* Filter popup — slightly wider modal for the criterion editor.
   The popup re-renders on every criterion add/remove/edit (the app
   replaces the DOM wholesale), which would re-trigger the modal's
   default fade-in animation and feel like a page flash. Disable
   the animation here so subsequent renders are instant. */
.filter-popup-modal { animation: none !important; }
.filter-popup-card { padding: 1rem; }

/* Sortable column header — looks like a normal th text but is a
   button with an arrow indicator when active. */
.contact-sort-th {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.contact-sort-th:hover { color: #0a6a54; }
.contact-sort-th.is-active { color: #0a6a54; }

/* Compact ⚏ icon at the right edge of the table header that opens
   the column picker. Body rows have a matching empty <td> so the
   layout doesn't shift. */
th.contact-columns-icon-th,
td.contact-columns-icon-td {
  width: 2rem;
  text-align: right;
  padding: 0.25rem 0.4rem !important;
}
.contact-columns-icon-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #4d6058);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.contact-columns-icon-btn:hover {
  background: #f3f7f5;
  border-color: var(--line, #d6dfdb);
  color: var(--ink, #10231d);
}

/* Column-picker popover — opens via the ⚏ Columns button in the
   list header. Lets admins toggle which fields show as columns. */
.contact-column-picker-search-wrap {
  margin: 0.45rem 0 0.4rem;
}
.contact-column-picker-search {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #d7e3de;
  border-radius: 6px;
  background: #fff;
}
.contact-column-picker-empty {
  list-style: none;
}
.contact-column-picker {
  margin: 0.5rem 0 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 30, 25, 0.06);
}
.contact-column-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.contact-column-picker-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 320px;
  overflow-y: auto;
}
.contact-column-picker-row {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.contact-column-picker-row:hover { background: #f3f7f5; }
.contact-column-picker-row.is-active { background: #fbfdfc; }
.contact-column-picker-row.is-active:hover { background: #f0f6f3; }
.contact-column-picker-row.is-dragging { opacity: 0.55; border-style: dashed; }
.contact-column-picker-row.is-drop-target {
  border-color: var(--accent, #1d8f60);
  box-shadow: 0 0 0 2px rgba(29, 143, 96, 0.18);
}
.contact-column-picker-handle {
  color: var(--muted, #4d6058);
  font-size: 0.85rem;
  letter-spacing: -0.1em;
  cursor: grab;
  user-select: none;
  text-align: center;
}
.contact-column-picker-row[draggable="true"]:active .contact-column-picker-handle {
  cursor: grabbing;
}
.contact-column-picker-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  min-width: 0;
}
.contact-column-picker-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}
.contact-column-picker-opt span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-column-picker-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.contact-column-picker-divider {
  list-style: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #4d6058);
  padding: 0.5rem 0.45rem 0.2rem;
  border-top: 1px solid #ecf0ee;
  margin-top: 0.3rem;
}

/* Salesforce/Zoho-style filter editor — recursive group + criterion
   tree. Used on every list view (Contacts + custom modules). */
.contact-filter-editor {
  margin: 0.7rem 0 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 10px;
  background: #fbfdfc;
}
/* Filter Logic / Pattern strip — boolean expression preview that
   updates live as the user adds, removes, or rearranges criteria.
   Each token is a criterion's number; nested groups wrap in parens. */
.contact-filter-logic {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.1rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  background: #eef3f0;
  border: 1px solid #dde6e1;
  border-radius: 8px;
  flex-wrap: wrap;
}
.contact-filter-logic-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4d6058;
  flex-shrink: 0;
}
.contact-filter-logic-expr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: #10231d;
  background: transparent;
  word-break: break-word;
  min-width: 0;
}
/* Number badge on each criterion row matching the Filter Logic
   tokens. Salesforce shows these on the left so users can map row
   ↔ expression token at a glance. */
.contact-filter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 50%;
  background: #d4ead8;
  color: #0a6a54;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.contact-filter-editor.is-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
}
.contact-filter-group {
  margin: 0.1rem 0;
}
.contact-filter-group:not(.is-root) {
  border-left: 2px solid #c5d3cb;
  padding-left: 0.6rem;
  margin-top: 0.5rem;
}
.contact-filter-group-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.contact-filter-group-head select.contact-filter-combinator {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
}
.contact-filter-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.contact-filter-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem;
  background: #fff;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
}
.contact-filter-row.is-missing {
  border-color: #f0c4c0;
  background: #fbf3f2;
}
.contact-filter-row select.contact-filter-field,
.contact-filter-row select.contact-filter-operator {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  min-width: 9rem;
}
/* Searchable field-selector popover (replaces the criterion <select>). */
.contact-filter-field-wrap {
  position: relative;
  min-width: 11rem;
}
.contact-filter-field-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.contact-filter-field-trigger.is-missing { color: #b42318; }
.contact-filter-field-caret {
  font-size: 0.75rem;
  color: #4a5b55;
}
.contact-filter-field-popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  width: max(16rem, 100%);
  max-width: 22rem;
  background: #fff;
  border: 1px solid #d7e3de;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 35, 29, 0.12);
  padding: 0.45rem;
}
.contact-filter-field-search {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #d7e3de;
  background: #fff;
  margin-bottom: 0.3rem;
}
.contact-filter-field-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.contact-filter-field-list li { margin: 0; }
.contact-filter-field-option {
  width: 100%;
  display: block;
  padding: 0.35rem 0.55rem;
  font-size: 0.86rem;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
}
.contact-filter-field-option:hover { background: #f3f7f5; }
.contact-filter-field-option.is-active {
  background: #e6f1eb;
  color: #1f5841;
  font-weight: 500;
}
.contact-filter-field-empty {
  padding: 0.5rem 0.55rem;
  font-size: 0.83rem;
}

/* URL field display — wraps long URLs and prevents the truncated
   label from blowing the cell width when the host string itself is
   long. Inline-block so the title attr / hover still works on the
   full link. */
.contact-url-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  word-break: break-all;
}

/* ── Topbar settings (gear) menu ─────────────────────────────────── */
.topbar-settings { position: relative; display: inline-flex; }
.topbar-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0.45rem;
  border-radius: 8px;
  cursor: pointer;
  color: #4a5b55;
  transition: background 0.12s, color 0.12s;
}
.topbar-settings-btn:hover { background: #eef2ee; color: #1f5841; }
.topbar-settings-icon {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
}
.topbar-settings-menu {
  /* Mount point only — the actual modal markup is rendered inside
     this element via renderTopbarSettings(). Position fixed so the
     overlay covers the whole viewport regardless of where the gear
     button sits in the document. */
  position: static;
}
/* ── Settings popup (Zoho-style) ─────────────────────────────────── */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 35, 29, 0.45);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 2vw 2vh;
  overflow-y: auto;
}
.settings-modal-card-wrap {
  background: #f3f6f4;
  border: 1px solid #d7e3de;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(16, 35, 29, 0.22);
  width: min(1180px, 96vw);
  padding: 1.2rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.settings-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d7e3de;
  padding-bottom: 0.7rem;
}
.settings-modal-head h3 { margin: 0; font-size: 1.15rem; }
.settings-modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #10231d;
  cursor: pointer;
  padding: 0.1rem 0.55rem;
  border-radius: 6px;
}
.settings-modal-close:hover { background: #e6ece8; }
.settings-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}
.settings-modal-card {
  background: #fff;
  border: 1px solid #d7e3de;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.settings-modal-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.settings-modal-card-head h4 { margin: 0; font-size: 0.95rem; }
.settings-modal-card-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.settings-modal-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-modal-card-list li { margin: 0; padding: 0; }
.settings-modal-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  color: #10231d;
}
.settings-modal-item:hover { background: #f3f7f5; }
.settings-modal-item.is-active { background: #e6f1eb; color: #1f5841; font-weight: 500; }
/* `display: flex` above defeats the [hidden] attribute the browser
   would normally honor with `display: none`. Re-assert it so the
   menu only shows when the JS un-hides it. Same trick for the
   wrapper itself. */
.topbar-settings[hidden],
.topbar-settings-menu[hidden] { display: none !important; }
.topbar-settings-item {
  display: block;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  color: #10231d;
}
.topbar-settings-item:hover { background: #f3f7f5; }
.topbar-settings-item.is-active { background: #e6f1eb; color: #1f5841; font-weight: 500; }

/* ── Module list/kanban view toggle ─────────────────────────────── */
.module-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #eef2ee;
  border-radius: 8px;
}
.module-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0.3rem 0.45rem;
  border-radius: 5px;
  cursor: pointer;
  color: #4a5b55;
  line-height: 0;
}
.module-view-toggle-btn:hover { color: #1f5841; }
.module-view-toggle-btn.is-active {
  background: #fff;
  color: #1f5841;
  box-shadow: 0 1px 2px rgba(16, 35, 29, 0.08);
}

/* ── Kanban board ───────────────────────────────────────────────── */
.module-kanban-toolbar {
  margin: 0.7rem 0 0.5rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.module-kanban-group-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.module-kanban-group-select {
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #d7e3de;
  background: #fff;
}
.module-kanban-board {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding: 0.5rem 0.1rem 1rem;
  align-items: flex-start;
}
.module-kanban-column {
  flex: 0 0 280px;
  background: #f6fbf8;
  border: 1px solid #d7e3de;
  border-radius: 10px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: calc(100vh - 240px);
}
.module-kanban-column.is-empty-bucket {
  background: #f7f8f9;
  border-style: dashed;
}
.module-kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #2d4c42;
  padding: 0.15rem 0.2rem;
}
.module-kanban-col-count {
  font-size: 0.78rem;
  background: #e6f1eb;
  color: #1f5841;
  padding: 0 0.45rem;
  border-radius: 999px;
}
.module-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow-y: auto;
  padding-right: 2px;
}
.module-kanban-card {
  display: block;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid #d7e3de;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.05s, box-shadow 0.12s;
  color: inherit;
}
.module-kanban-card:hover {
  border-color: #1f5841;
  box-shadow: 0 2px 6px rgba(16, 35, 29, 0.08);
}
.module-kanban-card:active { transform: translateY(1px); }
.module-kanban-card-title {
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.25;
  color: #10231d;
}
.module-kanban-card-owner {
  font-size: 0.76rem;
  margin-top: 0.2rem;
}
.module-kanban-empty {
  margin: 0;
  padding: 0.5rem 0.4rem;
  font-size: 0.8rem;
}
.contact-filter-row .contact-filter-value-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}
.contact-filter-row .contact-filter-value {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  flex: 1 1 8rem;
  min-width: 6rem;
}
.contact-filter-row .contact-filter-value-multi {
  flex: 1 1 12rem;
  min-height: 2rem;
}
.contact-filter-row button.contact-filter-remove {
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  font-size: 1rem;
  line-height: 1;
}
.contact-filter-controls {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.contact-filter-controls .ghost-btn {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
}
.contact-filter-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #dfe7e2;
}

/* Multi-select picklist — dropdown with checkbox options. The
   trigger looks like a select; clicking it reveals the menu below.
   Closes on click-outside (handler in app.js). */
.contact-multipick {
  position: relative;
  width: 100%;
}
.contact-multipick-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.4rem;
  font: inherit;
  font-weight: 400;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: inherit;
  box-sizing: border-box;
}
.contact-multipick-trigger:hover { border-color: #c5d3cb; }
.contact-multipick-trigger.has-selection {
  border-color: #b3dac3;
  background: #f3faf6;
}
.contact-multipick-trigger-text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}
.contact-multipick-caret {
  font-size: 0.7rem;
  color: var(--muted, #4d6058);
  flex-shrink: 0;
}
.contact-multipick-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  background: #fff;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 25, 0.14);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Inside a modal, render the menu in-flow so it pushes the modal's
   action buttons down (not over them) and the modal's own scrollbar
   handles vertical overflow. Keeps the picker usable when the option
   list is long. */
.modal-card .contact-multipick-menu {
  position: relative;
  top: auto;
  margin-top: 4px;
  max-height: 260px;
  box-shadow: 0 2px 6px rgba(20, 30, 25, 0.08);
  z-index: 1;
}
.contact-multipick-search-wrap {
  padding: 0.45rem 0.5rem 0.35rem;
  border-bottom: 1px solid #ecf0ee;
  background: #f7faf8;
  flex-shrink: 0;
}
.contact-multipick-search {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
}
.contact-multipick-search:focus {
  outline: none;
  border-color: #0f8b70;
  box-shadow: 0 0 0 2px rgba(15, 139, 112, 0.15);
}
.contact-multipick-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem;
}
/* Specificity bump — `.contact-detail-form label` has (0,2,0) and
   forces column-flex on every <label> inside the contact form. We
   need (0,2,0) or higher and `display: grid` to win for the option
   rows so the checkbox + label sit side-by-side. */
.contact-multipick-menu .contact-multipick-opt,
.contact-detail-form .contact-multipick-opt {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.3;
  user-select: none;
  flex-direction: row;
  margin: 0;
  gap: 0;
  column-gap: 0.55rem;
}
.contact-multipick-menu .contact-multipick-opt:hover,
.contact-detail-form .contact-multipick-opt:hover { background: #f3f7f5; }
.contact-multipick-menu .contact-multipick-opt input[type="checkbox"],
.contact-detail-form .contact-multipick-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  max-width: 16px;
  margin: 0;
  cursor: pointer;
  justify-self: center;
}
.contact-multipick-menu .contact-multipick-opt span,
.contact-detail-form .contact-multipick-opt span {
  word-break: break-word;
  min-width: 0;
  text-align: left;
}
/* Sub-field picker option layout: label on the left, type pill on
   the right. The pill is a subtle uppercase tag so the type reads
   as metadata, distinct from the field label itself. */
.contact-multipick-opt-text {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.contact-multipick-opt-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.contact-multipick-opt-type {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6e67;
  background: #eef3f0;
  border: 1px solid #dde6e1;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Schema editor */
.contact-schema-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.contact-schema-section {
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 10px;
  background: #fff;
  padding: 0.5rem 0.7rem;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s;
}
.contact-schema-section.is-dragging {
  opacity: 0.55;
  border-style: dashed;
}
.contact-schema-section.is-drop-target {
  border-color: var(--accent, #1d8f60);
  box-shadow: 0 0 0 2px rgba(29, 143, 96, 0.18);
  transform: translateY(-1px);
}
.contact-schema-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
}
.contact-schema-section.is-collapsed .contact-schema-section-head {
  /* Collapsed sections feel a touch more compact. */
  padding: 0.1rem 0;
}
.contact-schema-toggle-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: 22px;
  height: 22px;
  justify-content: center;
  border-radius: 4px;
  color: var(--muted, #4d6058);
}
.contact-schema-toggle-btn:hover { background: #f3f7f5; color: var(--ink, #10231d); }
.contact-schema-section-summary {
  font-size: 0.78rem;
  margin-left: 0.4rem;
  flex: 1 1 auto;
}
.contact-schema-drag-handle {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: var(--muted, #4d6058);
  font-size: 0.95rem;
  letter-spacing: -2px;
  padding: 0 0.3rem 0 0;
  user-select: none;
}
.contact-schema-section[draggable="true"]:active .contact-schema-drag-handle {
  cursor: grabbing;
}
.contact-schema-section-actions {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.contact-schema-section-actions .ghost-btn,
.contact-schema-field-actions .ghost-btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}
.contact-schema-field-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.contact-schema-field-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #f9fbfa;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s;
}
/* Top-level field rows (and subform tiles) get a leading drag handle
   column so the row can be picked up. Subform child rows don't get
   the handle (they aren't draggable from this view), so they keep
   the original 3-column template. */
.contact-schema-field-row[draggable="true"] {
  grid-template-columns: auto 1fr auto auto;
}
/* Subform + subsection rows have an extra collapse-toggle button
   between the drag handle and the label, so they need a 5-column
   template (handle, toggle, label, meta, actions). Without this the
   actions wrap onto a second implicit grid row. */
.contact-schema-field-row.contact-schema-subform-row[draggable="true"],
.contact-schema-field-row.contact-schema-subsection-row[draggable="true"] {
  grid-template-columns: auto auto 1fr auto auto;
}
.contact-schema-field-row.is-dragging {
  opacity: 0.55;
  border-style: dashed;
}
.contact-schema-field-row.is-drop-target {
  border-color: var(--accent, #1d8f60);
  box-shadow: 0 0 0 2px rgba(29, 143, 96, 0.18);
  transform: translateY(-1px);
}
/* Section-level drop target — fires when dragging a field into a
   different section's body (anywhere not on a specific row). Dashed
   outline around the whole section's child list so it's clear the
   field will be appended at the end. */
.contact-schema-field-list.is-schema-drop-target {
  outline: 2px dashed rgba(29, 143, 96, 0.55);
  outline-offset: 4px;
  background: rgba(29, 143, 96, 0.05);
  border-radius: 8px;
}
.contact-schema-empty.is-drop-target {
  background: rgba(29, 143, 96, 0.08);
  color: #1d8f60;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.contact-schema-field-drag-handle {
  font-size: 0.85rem;
  padding: 0 0.2rem 0 0;
}
.contact-schema-field-row[draggable="true"]:active .contact-schema-field-drag-handle {
  cursor: grabbing;
}
.contact-schema-field-label { font-weight: 600; font-size: 0.88rem; }
.contact-schema-field-meta {
  font-size: 0.75rem;
  white-space: nowrap;
}
.contact-schema-empty {
  list-style: none;
  font-size: 0.85rem;
  padding: 0.4rem 0;
}
.contact-field-editor-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.25rem 0;
  line-height: 1.35;
}
/* Override the global `input { width: 100%; }` rule so checkboxes in
   the field-editor stay at their natural size and the label sits
   right next to them. Without this the checkbox claims the full
   flex column and the label gets pushed to the far right.
   Targets ANY checkbox inside the field-editor form so the per-
   half required toggles (firstRequired / lastRequired) for the name
   composite render correctly too. */
#contacts-field-editor-form input[type="checkbox"],
.contact-field-editor-row input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 3px 0 0 0;
  flex: 0 0 auto;
}
/* The label spans the rest of the row. Headings + helper text inside
   stack as expected (e.g. the Encrypt-this-field row's <small>). */
.contact-field-editor-row > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* Section editor — column-count layout picker. */
.contact-section-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.contact-section-layout-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  font-size: 0.8rem;
  text-align: center;
  transition: background 0.12s, border-color 0.12s;
}
.contact-section-layout-opt:hover { background: #f3f7f5; }
.contact-section-layout-opt:has(input[type="radio"]:checked) {
  background: #d4ead8;
  border-color: #b3dac3;
}
.contact-section-layout-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-section-layout-opt-glyph {
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: var(--muted, #4d6058);
}
.contact-section-layout-opt:has(input[type="radio"]:checked) .contact-section-layout-opt-glyph {
  color: var(--ink, #10231d);
}
.contact-section-layout-opt-label { font-weight: 600; }
.contact-section-layout-opt-hint { font-size: 0.72rem; }

/* Inline layout pill on each schema section card. */
.contact-schema-layout-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 999px;
  background: #f3f7f5;
  color: var(--ink, #10231d);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.contact-schema-layout-pill:hover {
  background: #d4ead8;
  border-color: #b3dac3;
}

/* Subform editor — checkbox list of eligible sub-fields. */
.contact-subform-fieldlist {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #f9fbfa;
}
.contact-schema-subform-row {
  background: #f4f8ff;
  border-color: #c7d6ee;
}
/* Nested sub-field list inside a subform row in the schema editor.
   Indented + a left rule to visually tie it back to its parent
   subform. */
.contact-schema-subform-children-wrap {
  list-style: none;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}
.contact-schema-subform-fields {
  margin: 0.25rem 0 0.25rem 1.4rem !important;
  padding-left: 0.5rem !important;
  border-left: 2px solid #c7d6ee;
}

/* Subform tables in the contact detail view. */
.contact-detail-subform {
  margin-top: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #f9fbfa;
}
.contact-detail-subform-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.contact-subform-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.contact-subform-table th,
.contact-subform-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line, #d6dfdb);
  text-align: left;
  vertical-align: middle;
}
.contact-subform-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #4d6058);
  background: #f3f7f5;
}
.contact-subform-table input,
.contact-subform-table select,
.contact-subform-table textarea {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--line, #d6dfdb);
  background: #fff;
  font-family: inherit;
}
.contact-detail-subform-empty {
  font-size: 0.85rem;
  margin: 0;
}

/* Lookup field input + picker modal. */
.contact-lookup-input {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.contact-lookup-current { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.contact-lookup-remove {
  margin-left: 0.3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 0.78rem;
}
.contact-lookup-picker-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
}
.contact-lookup-picker-list li {
  border-bottom: 1px solid var(--line, #d6dfdb);
}
.contact-lookup-picker-list li:last-child { border-bottom: none; }
.contact-lookup-picker-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}
.contact-lookup-picker-row:hover { background: #f3f7f5; }
.contact-lookup-picker-row strong { font-size: 0.9rem; }

/* File field chips + uploader. */
/* Address composite field. Stacked rows: street (full), then city /
   state / zip on one row, then country (full). All sub-inputs
   stretch to fill their slot regardless of grid column count. */
.contact-address-input {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}
.contact-address-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
}
.contact-address-input input,
.contact-address-input select {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 540px) {
  .contact-address-row { grid-template-columns: minmax(0, 1fr); }
}

/* Searchable single-select dropdown for the State / Country sub-
   inputs. Mirrors the multipick visual but picks a single value and
   closes on selection. */
.contact-address-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.contact-address-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: inherit;
  box-sizing: border-box;
  min-height: 2.4rem;
}
.contact-address-select-trigger:hover { border-color: #c5d3cb; }
.contact-address-select-trigger.has-selection {
  border-color: #b3dac3;
  background: #f3faf6;
}
.contact-address-select-trigger-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-address-select-trigger-text.is-placeholder {
  /* Match the native input placeholder color used by the City /
     ZIP / Street inputs in the same row. Browsers default to roughly
     #757575 with reduced contrast on light backgrounds. */
  color: #757575;
  opacity: 0.85;
}
.contact-address-select-caret {
  font-size: 0.7rem;
  color: var(--muted, #4d6058);
  flex-shrink: 0;
}
.contact-address-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 220px;
  max-height: 320px;
  background: #fff;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 25, 0.14);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Inside a modal, same in-flow pattern as the multipick menu so the
   modal's submit/cancel buttons stay reachable. */
.modal-card .contact-address-select-menu {
  position: relative;
  top: auto;
  margin-top: 4px;
  max-height: 260px;
  box-shadow: 0 2px 6px rgba(20, 30, 25, 0.08);
  z-index: 1;
}
.contact-address-select-search-wrap {
  padding: 0.45rem 0.5rem 0.35rem;
  border-bottom: 1px solid #ecf0ee;
  background: #f7faf8;
  flex-shrink: 0;
}
.contact-address-select-search {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
}
.contact-address-select-search:focus {
  outline: none;
  border-color: #0f8b70;
  box-shadow: 0 0 0 2px rgba(15, 139, 112, 0.15);
}
.contact-address-select-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.contact-address-select-opt {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.contact-address-select-opt:hover { background: #f3f7f5; }
.contact-address-select-opt.is-selected {
  background: #d4ead8;
  font-weight: 600;
}
.contact-address-select-check {
  color: #0a6a54;
  font-size: 0.75rem;
}

.contact-file-input { display: flex; flex-direction: column; gap: 0.3rem; }
.contact-file-display {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.contact-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  background: #f3f7f5;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  font-size: 0.85rem;
}
.contact-file-name { font-weight: 600; }
.contact-file-meta { font-size: 0.78rem; }
.contact-file-download {
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  text-decoration: none;
}
.contact-file-remove {
  background: transparent;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0;
}
.contact-file-remove:hover { background: #fff; }

:root {
  --bg: #eaf2ef;
  --bg-strong: #d6e8e2;
  --panel: #fdfefc;
  --ink: #10231d;
  --muted: #4d6058;
  --accent: #0f8b70;
  --accent-deep: #0a6a54;
  --accent-warm: #d66f22;
  --line: #d6dfdb;
  --danger: #b53f4e;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow: 0 18px 45px rgba(16, 35, 29, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Manrope", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: linear-gradient(145deg, var(--bg), var(--bg-strong));
}

.hidden {
  display: none !important;
}

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.auth-card {
  width: min(470px, 100%);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.auth-brand {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.auth-brand h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
}

.auth-brand p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-tabs {
  margin-top: 1rem;
  border: 1px solid #d7e5df;
  background: #eef5f2;
  border-radius: 12px;
  padding: 0.2rem;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-tab {
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  color: #2a4c44;
}

.auth-tab.is-active {
  background: linear-gradient(120deg, #d8ece5, #f5ede4);
}

.auth-form {
  margin-top: 0.9rem;
}

/* Borrower / Broker multi-select on the create-account form. Two
   stacked checkboxes inside a fieldset, styled to blend with the
   other auth-form labels (no native fieldset border / padding). */
.create-contact-type-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 0;
  padding: 0;
  margin: 0.2rem 0 0.2rem;
}
.create-contact-type-fieldset legend {
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 0.25rem;
}
.create-contact-type-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid #d8dfe7;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.92rem;
}
.create-contact-type-option input[type="checkbox"] {
  accent-color: #0f8b70;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

/* System-field multi-checkbox (used by systemContactType). Stacks
   the checkboxes vertically inside the same cell width as a normal
   field. Each option uses a chip-style hit area. */
.contact-system-multipick {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.contact-system-multipick-opt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid #d8dfe7;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-size: 0.88rem;
}
.contact-system-multipick-opt input[type="checkbox"] {
  accent-color: #0f8b70;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}

.auth-message {
  min-height: 1.2rem;
  margin: 0.7rem 0 0;
  color: var(--danger);
  font-weight: 600;
  font-size: 0.83rem;
}

/* Inline real-time validation hint under an auth-form input. */
.auth-inline-error {
  margin: 0.3rem 0 0;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}
.auth-input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 1px var(--danger);
}

.forgot-link {
  margin: 0;
  text-align: center;
  font-size: 0.83rem;
}

.forgot-link a {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 600;
}

.forgot-link a:hover {
  text-decoration: underline;
}

.zoho-sso-btn {
  background: linear-gradient(120deg, #e8822a, #f0a05e);
  color: white;
  border-color: transparent;
}

.zoho-sso-btn:hover {
  filter: brightness(0.96);
}

.orb {
  position: fixed;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  filter: blur(16px);
  z-index: 0;
  opacity: 0.35;
}

.orb-left {
  left: -140px;
  top: -80px;
  background: radial-gradient(circle at center, #b8ddd2, transparent 75%);
}

.orb-right {
  right: -100px;
  bottom: -100px;
  background: radial-gradient(circle at center, #f2cfb4, transparent 75%);
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1rem;
  /* Cap the shell at 1640px instead of 1280px so the main pane gets ~360px
     more horizontal room. Tables (Condition Review, All Loans, Vendors,
     Pipeline kanban) breathe; sidebar stays fixed at 270px. */
  max-width: 1640px;
  margin: 1.2rem auto;
  padding: 0 1rem;
}

.sidebar {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2.4rem);
}

.brand-wrap {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.brand-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(130deg, var(--accent), #7acbb8);
  color: white;
  font-weight: 700;
}

.brand-wrap h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
}

.brand-wrap p {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.nav-list {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nav-btn {
  border: 0;
  border-radius: 12px;
  text-align: left;
  padding: 0.7rem 0.8rem;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-btn:hover {
  background: #e8f3ef;
  transform: translateX(2px);
}

.nav-btn.is-active {
  background: linear-gradient(120deg, #d8ece5, #f5ede4);
  color: var(--accent-deep);
}

.nav-btn span {
  font-size: 0.75rem;
  color: var(--muted);
}

.side-footer {
  margin-top: auto;
  background: #f6faf8;
  border: 1px dashed #c7d7d1;
  border-radius: var(--radius-md);
  padding: 0.8rem;
}

.side-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.side-footer a {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 700;
}

.main-panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.topbar h2 {
  margin: 0.2rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
}

.health-pill {
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  background: #def4ed;
  border: 1px solid #b8e6d9;
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 0.83rem;
}

.dashboard-layout {
  display: grid;
  gap: 0.8rem;
}

.dashboard-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.8rem;
}

.dashboard-welcome h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7rem;
}

.dashboard-quick-links h3 {
  margin-bottom: 0.7rem;
}

.quick-link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.quick-link-btn {
  border: 1px solid #d6e4df;
  background: #f7faf9;
  border-radius: 10px;
  padding: 0.7rem 0.6rem;
  font-weight: 700;
  color: #24463e;
  cursor: pointer;
}

.quick-link-btn:hover {
  background: #edf6f2;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.dashboard-stat-card {
  text-align: center;
}

.dashboard-stat-card p {
  margin: 0.4rem 0 0;
  font-size: 2rem;
  font-weight: 700;
}

.dashboard-section-card h3 {
  margin-bottom: 0.7rem;
}

.dashboard-alert {
  border-radius: 10px;
  padding: 0.75rem;
}

.dashboard-alert p {
  margin: 0;
  font-weight: 600;
}

.dashboard-alert.success {
  background: #e8f7f1;
  border: 1px solid #bee4d7;
  color: #1f5d4d;
}

.dashboard-alert.warning {
  background: #fff4e8;
  border: 1px solid #f3d5b3;
  color: #84501d;
}

.dashboard-alert.info {
  background: #e9f1fb;
  border: 1px solid #c8dff8;
  color: #1d4f84;
}

.dashboard-todo-summary {
  border: 1px solid #d4dcda;
  border-radius: 10px;
  overflow: hidden;
}

.dashboard-todo-row {
  background: #f3f4f5;
  border-top: 1px solid #e4e8e7;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem;
}

.dashboard-todo-row p {
  margin: 0;
  color: #23302c;
  font-weight: 600;
}

.dashboard-plus {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: white;
  background: #545a5d;
}

.dashboard-count-badge {
  border: 1px solid #ea8b84;
  background: #fff;
  color: #d04a42;
  border-radius: 8px;
  padding: 0 0.35rem;
  font-weight: 700;
}

.view-all-todos {
  margin-left: auto;
  white-space: nowrap;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.admin-metric-card p {
  margin: 0.45rem 0 0;
  font-size: 1.9rem;
  font-weight: 700;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.metric-card,
.panel-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

.metric-card h3,
.panel-card h3,
.section-title {
  margin: 0;
  font-size: 0.95rem;
}

.metric-card p {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

.split-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0.8rem;
}

.timeline {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.timeline li {
  border-left: 3px solid #cce6de;
  padding: 0.35rem 0.6rem;
  background: #fbfdfc;
}

.timeline strong {
  display: block;
  font-size: 0.92rem;
}

.stack {
  display: grid;
  gap: 0.7rem;
}

.loan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  background: #fdfffd;
}

.loan-selected {
  border-color: #94cabd;
  box-shadow: inset 0 0 0 1px #cde8e0;
}

.loan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.chip {
  border-radius: 999px;
  padding: 0.2rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.chip.good {
  background: #def4ed;
  color: var(--accent-deep);
}

.chip.warn {
  background: #fae9d9;
  color: #8a4f1f;
}

.chip.bad, .chip.danger {
  background: #f9dfe3;
  color: var(--danger);
}

.text-danger {
  color: var(--danger);
}

.chip.neutral {
  background: #edf2f0;
  color: #3f504a;
}

.chip.status-required {
  background: #fff1da;
  color: #92510f;
}

.chip.status-awaiting-signature {
  background: #fff7d6;
  color: #855b06;
}

.chip.status-on-hold {
  background: #f1eaf7;
  color: #5a3782;
  border: 1px solid #d8c2ec;
}

.chip.status-in-progress {
  background: #e4f0ff;
  color: #1f5296;
}

.chip.status-in-review {
  background: #efe8ff;
  color: #5b3f95;
}

.chip.status-additional-info-needed {
  background: #ffe6db;
  color: #9a3f14;
}

.chip.status-approved {
  background: #dff6e9;
  color: #0b6f43;
}

.chip.status-rejected {
  background: #fce2e8;
  color: #ab1f47;
}

.progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e4ece9;
  overflow: hidden;
  margin: 0.6rem 0;
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #8bcdbd);
}

.loan-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  font-size: 0.84rem;
}

.loan-metrics div {
  background: #f6faf7;
  border: 1px solid #dfebe5;
  border-radius: 10px;
  padding: 0.45rem;
}

.loan-stage-panel {
  margin-top: 0.85rem;
  border: 1px solid #dce7e2;
  border-radius: 12px;
  background: #f8fcfa;
  padding: 0.8rem;
}

.loan-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.loan-stage-head h4 {
  margin: 0;
  font-size: 0.95rem;
}

.loan-stage-track {
  position: relative;
  margin-top: 0.65rem;
  padding-top: 0.1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.1rem;
}

.loan-stage-track::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 12px;
  border-top: 2px solid #cfded8;
}

.loan-stage-step {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.loan-stage-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  margin: 0 auto;
  display: block;
  border: 2px solid #9fb3ab;
  background: #fff;
}

.loan-stage-label {
  margin-top: 0.35rem;
  display: block;
  font-size: 0.68rem;
  color: #445752;
  font-weight: 600;
  line-height: 1.2;
}

.loan-stage-step.completed .loan-stage-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.loan-stage-step.current .loan-stage-dot {
  background: #fff;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 4px rgba(214, 111, 34, 0.16);
}

.loan-stage-step.current .loan-stage-label {
  color: #1b302b;
}

.loan-stage-step.upcoming .loan-stage-dot {
  background: #f4f8f6;
}

.loan-summary-sections {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.loan-summary-section {
  border: 1px solid #dce7e2;
  border-radius: 12px;
  background: #fbfdfc;
  overflow: hidden;
}

.loan-summary-section h4 {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #deebe6;
  background: #f4f8f6;
  font-size: 0.95rem;
}

.loan-summary-table td {
  padding: 0.45rem 0.65rem;
  font-size: 0.84rem;
}

.loan-summary-table td:first-child {
  color: #395148;
  width: 54%;
}

.loan-summary-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: #1a2f2a;
}

@media (max-width: 1080px) {
  .loan-summary-sections {
    grid-template-columns: 1fr;
  }
}

.loan-actions {
  margin-top: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
}
.loan-pills {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.loan-detail-wrap {
  display: grid;
  gap: 0.8rem;
}

.loan-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.text-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: #2a4c44;
  font-weight: 700;
  cursor: pointer;
}

.open-upload-task strong {
  color: #0a6a54;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.loan-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
}

.loan-subtabs {
  border: 1px solid #d7e5df;
  background: #f4f7f6;
  border-radius: 12px;
  padding: 0.25rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.loan-tab {
  border: 0;
  border-radius: 9px;
  padding: 0.5rem 0.8rem;
  background: transparent;
  color: #446058;
  font-weight: 700;
  cursor: pointer;
}

.loan-tab.is-active {
  background: #fff;
  color: #132723;
  border: 1px solid #d7e3df;
}

.todo-box {
  border: 1px solid #cad6d2;
  border-radius: 12px;
  padding: 0.85rem;
  background: #fdfefd;
}

.todo-box h3 {
  margin: 0 0 0.65rem;
}

.todo-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.todo-empty {
  border: 1px solid #bfe4d7;
  background: #e8f7f1;
  border-radius: 10px;
  padding: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.todo-empty p {
  margin: 0;
  color: #1f5d4d;
  font-weight: 600;
}

.todo-subsections {
  display: grid;
  gap: 0.75rem;
}

.todo-subsection {
  border: 1px solid #d8e2de;
  border-radius: 10px;
  padding: 0.65rem;
  background: #ffffff;
}

.todo-subsection h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}

/* Lock the to-do tables to a fixed column layout so all sections
   (Loan / Borrower / Property / Insurance / Entity Related) align
   their Status / Due In / Actions columns at the same x-positions
   regardless of how long the longest task name in any one section
   happens to be. */
.todo-section-table,
.loan-detail-todos-table {
  table-layout: fixed;
  width: 100%;
}
.todo-section-table .col-status,
.loan-detail-todos-table .col-status   { width: 180px; }
.todo-section-table .col-due,
.loan-detail-todos-table .col-due      { width: 260px; }
.loan-detail-todos-table .col-review   { width: 110px; }
/* Superadmin inline status override — keep the pill UI but overlay an
   invisible native <select> so clicking the pill opens the picker.
   The chip provides all the visible styling; the select is sized to
   the chip and gets opacity:0 + cursor:pointer so the affordance reads
   as "click the pill". */
.loan-detail-todos-table .status-pill-edit {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.loan-detail-todos-table .status-pill-edit .chip {
  cursor: pointer;
}
.loan-detail-todos-table .loan-detail-task-status-superadmin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.loan-detail-todos-table .status-pill-edit:hover .chip {
  filter: brightness(0.96);
}
/* Keep status pills on a single line so multi-word values like
   "Cleared (External)" don't wrap inside their pill. */
.todo-section-table td:nth-child(2) .chip,
.loan-detail-todos-table td:nth-child(2) .chip {
  white-space: nowrap;
}
.todo-section-table .col-title,
.loan-detail-todos-table .col-title    { width: auto; }
.todo-section-table th,
.todo-section-table td,
.loan-detail-todos-table th,
.loan-detail-todos-table td {
  vertical-align: top;
  word-break: break-word;
}
/* Center the Status / Due In / Completed Date columns (cols 2 and 3)
   so their pills/dates sit in the middle of the column instead of
   hugging the left edge. Title (col 1) stays left-aligned. */
.todo-section-table th:nth-child(2),
.todo-section-table th:nth-child(3),
.todo-section-table td:nth-child(2),
.todo-section-table td:nth-child(3),
.loan-detail-todos-table th:nth-child(2),
.loan-detail-todos-table th:nth-child(3),
.loan-detail-todos-table td:nth-child(2),
.loan-detail-todos-table td:nth-child(3) {
  text-align: center;
}
.todo-section-table tr.todo-row.is-clickable,
.loan-detail-todos-table tr.todo-row.is-clickable {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.todo-section-table tr.todo-row.is-clickable:hover,
.loan-detail-todos-table tr.todo-row.is-clickable:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.todo-section-table tr.todo-row.is-clickable:focus-visible,
.loan-detail-todos-table tr.todo-row.is-clickable:focus-visible {
  outline: 2px solid var(--accent, #2c8a6c);
  outline-offset: -2px;
}
.todo-section-table tr.todo-row.is-pending-link td { opacity: 0.65; }
@media (max-width: 900px) {
  .todo-section-table .col-status,
  .loan-detail-todos-table .col-status   { width: 150px; }
  .todo-section-table .col-due,
  .loan-detail-todos-table .col-due      { width: 200px; }
}
@media (max-width: 680px) {
  .todo-section-table,
  .loan-detail-todos-table { table-layout: auto; }
  .todo-section-table .col-status,
  .todo-section-table .col-due,
  .todo-section-table .col-title,
  .loan-detail-todos-table .col-status,
  .loan-detail-todos-table .col-due,
  .loan-detail-todos-table .col-title { width: auto; }
}

.task-list {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.6rem;
}

.task-item {
  border: 1px solid #dde8e4;
  background: #fcfefd;
  border-radius: 12px;
  padding: 0.7rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}

.task-meta {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.task-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loan-task-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  background: #fdfffd;
}

.primary-btn,
.ghost-btn {
  border: 0;
  border-radius: 11px;
  padding: 0.62rem 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.danger-btn {
  background: #fbe8eb;
  color: #8d2737;
}

.account-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.account-actions-cell {
  min-width: 210px;
}

/* Account Management — separate scrollable panels with their own filters. */
.accounts-management-stack > .accounts-section + .accounts-section {
  margin-top: 1rem;
}
.accounts-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0 0 0.6rem;
}
.accounts-section-head h3 { margin: 0; }
.accounts-count {
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}
.accounts-filter-bar {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.accounts-filter-bar .accounts-search {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.accounts-filter-bar select {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.accounts-table-scroll {
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.accounts-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}
.accounts-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.accounts-table-scroll th,
.accounts-table-scroll td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.accounts-table-scroll tr:last-child td { border-bottom: 0; }
.accounts-table-scroll tr.staff-row.is-clickable {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.accounts-table-scroll tr.staff-row.is-clickable:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.accounts-table-scroll tr.staff-row.is-clickable:focus-visible {
  outline: 2px solid var(--accent, #2c8a6c);
  outline-offset: -2px;
}

.zoho-contact-cell {
  min-width: 220px;
  display: grid;
  gap: 0.35rem;
}

.zoho-contact-cell code {
  width: fit-content;
  background: #f1f6f3;
  border: 1px solid #d9e5df;
  border-radius: 8px;
  padding: 0.2rem 0.35rem;
  font-size: 0.78rem;
}

.primary-btn {
  background: linear-gradient(120deg, var(--accent), #75c7b4);
  color: white;
}

.ghost-btn {
  background: #ecf2ef;
  color: #25403b;
}

.primary-btn:hover,
.ghost-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.55rem;
}

th,
td {
  text-align: left;
  padding: 0.62rem;
  border-bottom: 1px solid #e3ebe8;
  font-size: 0.86rem;
}

th {
  color: var(--muted);
  font-weight: 700;
}

.support-feed {
  border: 1px solid var(--line);
  background: #fcfefd;
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: grid;
  gap: 0.65rem;
  max-height: 300px;
  overflow-y: auto;
}

.msg {
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  max-width: 80%;
}

.task-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.info-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.info-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.info-tooltip-icon::after {
  content: "?";
}
.info-tooltip-wrap:hover .info-tooltip-icon {
  background: var(--accent);
  color: #fff;
}

.info-tooltip-text {
  display: none;
  position: fixed;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  width: 280px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-style: normal;
  font-weight: 400;
  pointer-events: none;
}

.info-tooltip-wrap:hover .info-tooltip-text {
  display: block;
}


.loan-app-download {
  margin-bottom: 0.75rem;
}
.loan-app-download .primary-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.sample-link {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}
.sample-link:hover {
  color: var(--accent-deep);
}

.task-modal-instructions {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.45rem;
  line-height: 1.5;
  background: var(--bg);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}

.msg.borrower {
  margin-left: auto;
  background: #dcf1ea;
}

.msg.servicer {
  background: #eef2f0;
}

.msg small {
  display: block;
  color: var(--muted);
  margin-top: 0.3rem;
}

form {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.65rem;
}

label {
  display: grid;
  gap: 0.26rem;
  font-weight: 600;
  font-size: 0.84rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #cedcd6;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 4.35rem;
}

.password-toggle {
  border: 0;
  background: transparent;
  color: #2a4c44;
  font-weight: 700;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
}

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

.row, .form-row {
  display: flex;
  gap: 0.65rem;
}

.row > *, .form-row > * {
  flex: 1;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 23, 20, 0.52);
  z-index: 20;
  padding: 0.8rem;
}

/* Delete confirmation dialog stacks above any other open modal so the
   Soft / Hard chooser is visible when the user triggers it from inside
   a task / record / detail modal. */
#delete-dialog-modal {
  z-index: 200;
}

.modal.is-open {
  display: flex;
  animation: fade-in 0.2s ease;
}

.modal-card {
  width: min(470px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid #d7e3de;
  box-shadow: var(--shadow);
  padding: 1rem;
}

#task-upload-list {
  max-height: 65vh;
  overflow-y: auto;
}

.upload-modal-card {
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  padding: 1rem 1.2rem 1.2rem;
  overflow-y: auto;
}

.prefilled-template-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #cfe3d7;
  background: #f1faf5;
  border-radius: 8px;
}

.prefilled-template-row .muted {
  font-size: 0.8rem;
  line-height: 1.25;
}

.riv-unit-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.riv-unit-card {
  border: 1px solid #d7e3de;
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  background: #fbfdfc;
}

/* Per-unit comments block — sits inside each unit card under the
   upload form. Slightly subdued so it reads as secondary to the
   primary upload action. */
.riv-unit-comments {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e3ebe7;
}
.riv-unit-comments h5 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  color: #1a3b32;
}
.riv-unit-comments-list { margin-bottom: 0.6rem; }
.riv-unit-comment-form textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
}
.riv-unit-comment-form .actions { margin-top: 0.4rem; }

.riv-unit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e3ebe7;
}

.riv-unit-head h4 {
  margin: 0;
  font-size: 1.1rem;
}

.riv-upload-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.riv-upload-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.8fr) minmax(120px, 0.9fr) minmax(150px, 1.1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  background: white;
  border: 1px solid #e3ebe7;
  border-radius: 10px;
  font-size: 0.92rem;
}

.riv-upload-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.riv-upload-actions {
  display: inline-flex;
  gap: 0.35rem;
}

.riv-empty {
  padding: 0.75rem 0.85rem;
  font-size: 0.92rem;
  background: white;
  border: 1px dashed #d7e3de;
  border-radius: 10px;
}

.riv-unit-upload-form {
  display: flex;
  align-items: end;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding-top: 0.55rem;
  border-top: 1px solid #eef3f1;
  margin-top: 0.25rem;
}

.riv-unit-upload-form label {
  flex: 1 1 280px;
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #4a5b55;
  font-weight: 500;
}

.riv-unit-upload-form label input[type="file"] {
  padding: 0.45rem 0.3rem;
}

@media (max-width: 700px) {
  .riv-upload-row {
    grid-template-columns: 1fr;
  }
}

.form-modal-card {
  width: min(1180px, 96vw);
  /* Was a fixed `height: min(860px, 92vh)` with the body row capped at
     `minmax(0, 1fr)`. When the Status row grew tall (send-back textareas +
     mirror toggle + Complete Review button), the 1fr body could shrink to
     zero and the Comments column would render invisibly. Cap the card at
     92vh, let it scroll vertically when content overflows, and give the
     body row a sane minimum so it never collapses below ~360px. */
  max-height: min(860px, 92vh);
  display: grid;
  grid-template-rows: auto auto auto minmax(360px, 1fr);
  gap: 0.65rem;
  overflow-y: auto;
}
/* Pin the body to the 1fr row regardless of how many auto-row siblings are
   visible. Without this, when the admin status section is hidden the body
   slides up into an auto row and doesn't fill remaining height. */
.form-modal-card > .form-modal-body { grid-row: 4; }

.form-modal-body {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
  gap: 0.7rem;
}

.form-modal-main {
  min-height: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-modal-main iframe {
  width: 100%;
  /* iframes don't naturally fill flex space; force explicit height + 0
     basis so it grows to fill the column down to the bottom of the modal. */
  flex: 1 1 0;
  height: 100%;
  min-height: 320px;
  border: 1px solid #dbe7e2;
  border-radius: 12px;
  background: #fff;
}

.form-modal-main.is-disabled iframe {
  opacity: 0.55;
  filter: grayscale(0.2);
}

.form-disabled-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0.5rem + 40px);
  height: auto;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(219, 231, 226, 0.95);
  border-bottom: none;
  color: #1f5a4e;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  pointer-events: none;
}

.form-disabled-note {
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid #ecd5b7;
  border-radius: 10px;
  background: #fff7ec;
  color: #7b4d16;
  font-size: 0.82rem;
  font-weight: 700;
}

.form-modal-comments {
  margin-top: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.form-modal-comments .task-comments-list {
  max-height: none;
}

@media (max-width: 1100px) {
  .form-modal-card {
    width: min(1180px, 98vw);
    max-height: min(860px, 95vh);
  }

  .form-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 1fr) auto;
  }

  .form-modal-main iframe {
    min-height: 420px;
  }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.modal-head h3 {
  margin: 0;
}

.task-modal-section {
  margin-top: 0.7rem;
}

.track-record-card {
  width: min(1200px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.2rem 1.2rem;
}

/* Rent Free Letter form */
.rent-free-letter-form { display: flex; flex-direction: column; gap: 1rem; }
.rfl-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 1rem 1rem;
  background: var(--panel);
}
.rfl-fieldset legend {
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0 0.35rem;
  color: var(--ink);
}
.rfl-fieldset label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.6rem;
}
.rfl-fieldset input[type="text"],
.rfl-fieldset input[type="email"],
.rfl-fieldset input[type="tel"],
.rfl-fieldset select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--bg);
  font-family: inherit;
}
.rfl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.rfl-three-col { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem; }
.rfl-help { margin: 0.25rem 0 0.5rem; font-size: 0.8rem; }
.rfl-terms {
  background: var(--bg);
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
  margin: 0.5rem 0;
}
.rfl-agree {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.9rem !important;
  color: var(--ink) !important;
  margin-top: 0.75rem !important;
}
.rfl-agree input[type="checkbox"] { width: 16px; height: 16px; }
.rent-free-letter-form.is-readonly input,
.rent-free-letter-form.is-readonly select,
.rent-free-letter-form.is-readonly textarea { pointer-events: none; opacity: 0.75; }
.rfl-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rfl-actions .primary-btn,
.rfl-actions .ghost-btn { font-size: 0.92rem; }
.rfl-submit-help {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.45;
}
.rfl-submit-help li { margin: 0.25rem 0; }
.rfl-upload-section {
  margin-top: 1rem;
  background: var(--bg);
}
.rfl-upload-section input[type="file"] {
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.track-record-body {
  overflow-y: auto;
  padding-right: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.track-record-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.track-record-header-field {
  display: grid;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.track-record-header-field input {
  font-weight: 400;
}

.track-record-rows-wrap {
  border: 1px solid #d7e3de;
  border-radius: 10px;
  padding: 0.7rem;
  background: #fbfdfc;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.track-record-rows {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.track-record-row {
  border: 1px solid #e3ebe7;
  border-radius: 10px;
  padding: 0.65rem 0.75rem 0.75rem;
  background: #ffffff;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem 0.6rem;
  position: relative;
}

.track-record-row .row-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #2d4c42;
}

.track-record-row .row-remove {
  background: transparent;
  border: none;
  color: #a1524f;
  cursor: pointer;
  font-size: 0.85rem;
}

.track-record-row .row-remove:hover {
  text-decoration: underline;
}

.track-record-row label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: #4a5b55;
  font-weight: 500;
}

.track-record-row label input,
.track-record-row label select {
  font-size: 0.9rem;
  padding: 0.45rem 0.55rem;
}

.track-record-row .col-address { grid-column: span 6; }
.track-record-row .col-entity  { grid-column: span 6; }
.track-record-row .col-city    { grid-column: span 4; }
.track-record-row .col-state   { grid-column: span 2; }
.track-record-row .col-zip     { grid-column: span 2; }
.track-record-row .col-type    { grid-column: span 4; }
.track-record-row .col-purchase-price    { grid-column: span 3; }
.track-record-row .col-purchase-date     { grid-column: span 3; }
.track-record-row .col-reno-budget       { grid-column: span 2; }
.track-record-row .col-sale-price        { grid-column: span 2; }
.track-record-row .col-sale-date         { grid-column: span 2; }

@media (max-width: 900px) {
  .track-record-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .track-record-row > label { grid-column: span 2; }
  .track-record-row .col-city,
  .track-record-row .col-state,
  .track-record-row .col-zip,
  .track-record-row .col-purchase-price,
  .track-record-row .col-purchase-date,
  .track-record-row .col-reno-budget,
  .track-record-row .col-sale-price,
  .track-record-row .col-sale-date {
    grid-column: span 1;
  }
}

.track-record-hint {
  margin: 0;
  font-size: 0.8rem;
}

.track-record-submitted {
  border: 1px solid #cfe3d7;
  background: #f1faf5;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.task-modal-section h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}

.task-comments-list {
  border: 1px solid #dbe5e1;
  border-radius: 10px;
  background: #fcfefd;
  padding: 0.55rem;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 0.45rem;
}

.task-comment {
  border: 1px solid #e2ece8;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: #fff;
}

.task-comment-head {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  max-width: min(92vw, 780px);
  background: #10231d;
  color: white;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
  white-space: normal;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.admin-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}

.admin-filter-bar input,
.admin-filter-bar select {
  flex: 1;
  min-width: 150px;
  max-width: 280px;
}

.overdue-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #fce2e8;
  color: #ab1f47;
  border: 1px solid #f0b4c0;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── Impersonation Banner ── */
.impersonation-banner {
  background: #fff4e8;
  border: 1px solid #f3d5b3;
  color: #84501d;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.impersonation-banner .ghost-btn {
  white-space: nowrap;
  background: #84501d;
  color: #fff;
  border: none;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-weight: 600;
}
.impersonation-banner .ghost-btn:hover {
  background: #6b3f14;
}

/* ── Impersonation Read-Only ── */
.is-impersonating .message-form,
.is-impersonating .chat-widget-form,
.is-impersonating #upload-task-form,
.is-impersonating #task-comment-form,
.is-impersonating #settlement-task-comment-form,
.is-impersonating #profile-form {
  display: none !important;
}
/* Quick Links stay visible in impersonation as a read-only preview so
   admins can see what the borrower sees, but click-through is disabled. */
.is-impersonating .quick-link-btn {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}
.is-impersonating .task-upload-download {
  pointer-events: none;
  opacity: 0.5;
}
.is-impersonating #settlement-form-main {
  position: relative;
  pointer-events: none;
}
.is-impersonating #settlement-form-main::after {
  content: "Read-only preview";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 10;
}

/* ── Admin Inline Task Editor ── */
.admin-task-expand-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
.admin-task-expand {
  background: var(--bg);
  padding: 0.75rem 1rem;
}
.admin-task-expand h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.admin-task-inline-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-task-inline-table th,
.admin-task-inline-table td {
  padding: 0.5rem 0.5rem;
  text-align: left;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--line);
}
.admin-task-inline-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.78rem;
}
.admin-task-inline-table select,
.admin-task-inline-table input[type="date"] {
  font: inherit;
  font-size: 0.84rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

/* ── Admin Table Row Spacing ── */
.admin-filter-bar + .table-wrap td {
  padding: 0.85rem 0.62rem;
  line-height: 1.5;
}

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

  .dashboard-top-grid,
  .dashboard-bottom-grid,
  .admin-metrics {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

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

  .split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .metric-grid,
  .dashboard-stat-grid {
    grid-template-columns: 1fr;
  }

  .loan-metrics,
  .row,
  .actions {
    display: grid;
  }

  .actions {
    justify-content: stretch;
  }

  .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .loan-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .task-item,
  .loan-actions,
  .task-actions,
  .dashboard-todo-row {
    flex-direction: column;
    align-items: stretch;
  }

  .view-all-todos {
    margin-left: 0;
  }
}

/* ── Floating Chat Widget ── */
.chat-widget {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-widget.hidden { display: none; }

.chat-widget-toggle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 35, 29, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.chat-widget-toggle:hover {
  background: var(--accent-deep);
  transform: scale(1.06);
}
.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e53e3e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.chat-badge.hidden { display: none; }

.chat-widget-panel {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 380px;
  max-height: 500px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(16, 35, 29, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-widget-panel.hidden { display: none; }

.chat-widget-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.chat-widget-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
}
.chat-widget-header select {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.chat-widget-header button {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 0.2rem;
}
.chat-widget-header button:hover { color: var(--ink); }

/* Custom loan picker (replaces the native <select> so options can carry
   a notification badge dot alongside the address). */
.chat-widget-loan-picker {
  position: relative;
  flex: 1;
  min-width: 0;
}
.chat-widget-loan-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--ink);
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
}
.chat-widget-loan-trigger:hover { border-color: var(--accent); }
.chat-widget-loan-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-widget-loan-caret {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.chat-widget-loan-picker.is-open .chat-widget-loan-caret { transform: rotate(180deg); }

.chat-widget-loan-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 220px;
  overflow-y: auto;
}
.chat-widget-loan-menu.hidden { display: none; }
.chat-widget-loan-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.chat-widget-loan-option:hover { background: var(--bg); }
.chat-widget-loan-option.is-selected { background: var(--bg); font-weight: 600; }
.chat-widget-loan-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-widget-loan-option-check {
  flex-shrink: 0;
  color: var(--accent, #1d8f60);
  width: 12px;
  text-align: center;
  font-size: 0.85rem;
}

/* Notification-style badge used inside the loan picker (both on the
   trigger for the currently-selected loan and next to each option). */
.chat-loan-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.chat-loan-badge.hidden { display: none; }

.chat-widget-panel .support-feed {
  flex: 1;
  max-height: none;
  border: none;
  border-radius: 0;
  min-height: 180px;
  max-height: 320px;
}

.chat-widget-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--line);
  background: var(--panel);
  align-items: flex-end;
}
.chat-widget-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.88rem;
  min-height: 2.2rem;
}
.chat-widget-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.chat-widget-form .primary-btn {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* @mention picker — sits above the textarea and shows matching teammates
   as the borrower types `@query`. */
.chat-widget-textarea-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.chat-widget-textarea-wrap textarea { width: 100%; }
.chat-widget-mention-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 30;
}
.chat-widget-mention-menu.hidden { display: none; }
.chat-widget-mention-option {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.chat-widget-mention-option:hover,
.chat-widget-mention-option.is-active { background: var(--bg); }
.chat-widget-mention-option-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.chat-widget-mention-option-email {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Styled @mention pill inside rendered messages. */
.chat-mention {
  display: inline-block;
  padding: 0 0.3rem;
  background: rgba(29, 143, 96, 0.12);
  color: var(--accent-deep, #166c48);
  border-radius: 4px;
  font-weight: 600;
}

@media (max-width: 500px) {
  .chat-widget-panel {
    width: calc(100vw - 1.5rem);
    right: -0.5rem;
  }
}

/* ── Resources Tab ── */
.resource-card { margin-top: 0; }

.resource-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.resource-tile {
  background: white;
  border: 1px solid #d7e3de;
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font: inherit;
  color: inherit;
}

.resource-tile:hover {
  border-color: #8fbfa8;
  box-shadow: 0 4px 14px rgba(29, 68, 53, 0.08);
}

.resource-tile:active { transform: translateY(1px); }

.resource-tile h4 {
  margin: 0;
  font-size: 1.05rem;
}

.resource-tile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.resource-tile-cta {
  margin-top: 0.3rem;
  color: var(--accent, #1a7a4e);
  font-weight: 600;
  font-size: 0.88rem;
}

.resource-detail-head {
  margin-bottom: 0.6rem;
}

/* ── Admin Audit Log ── */
.audit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.audit-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem 0.8rem;
  align-items: end;
  padding: 0.7rem 0.85rem;
  background: #f6fbf8;
  border: 1px solid #d7e3de;
  border-radius: 10px;
  margin-bottom: 0.9rem;
}

.audit-filter-bar label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #4a5b55;
}

.audit-filter-bar input,
.audit-filter-bar select {
  font-size: 0.88rem;
  padding: 0.4rem 0.5rem;
}

.audit-filter-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
}

.audit-table {
  font-size: 0.88rem;
  width: 100%;
}

.audit-table th,
.audit-table td {
  vertical-align: top;
  padding: 0.55rem 0.6rem;
}

.audit-when {
  white-space: nowrap;
  color: #4a5b55;
  font-variant-numeric: tabular-nums;
}

.audit-actor-name { line-height: 1.15; }
.audit-actor-email { font-size: 0.78rem; }
.audit-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.audit-role {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.7rem;
  border-radius: 999px;
  background: #e6f1eb;
  color: #1f5841;
}
/* Coarse account-type tinting on the canonical role chip. */
.audit-role-borrower { background: #e5eff9; color: #1f4e8a; }
.audit-role-staff    { background: #e6f1eb; color: #1f5841; }
.audit-role-system   { background: #ece6f4; color: #3a275f; }
/* Job title vs access profile pills sit alongside the role chip. */
.audit-role-job      { background: #f2efe6; color: #5a4a1a; }
.audit-role-profile  { background: #faeae0; color: #7a3919; }
/* Device-class chip — derived from User-Agent, shows alongside the
   actor's role. Color-coded: Mobile and Tablet share the warm blue
   palette; Desktop uses neutral gray; Bot/API and Unknown stand out. */
.audit-role-device                   { background: #eef2f5; color: #2c3a45; }
.audit-role-device-desktop           { background: #eef2f5; color: #2c3a45; }
.audit-role-device-mobile            { background: #e0eef9; color: #1f4e8a; }
.audit-role-device-tablet            { background: #e0eef9; color: #1f4e8a; }
.audit-role-device-bot               { background: #fbe5e2; color: #b42318; }
.audit-role-device-unknown           { background: #f3eedf; color: #7a5a1a; }
.audit-impersonation { font-size: 0.75rem; margin-top: 2px; }

.audit-status {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  font-size: 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.audit-status-error { background: #fbe5e2; color: #b42318; }
.audit-status-info  { background: #e5eff9; color: #1f4e8a; }

.audit-target { color: #2d4c42; }
.audit-borrower-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 3px;
}
.audit-borrower-chip {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.72rem;
  background: #e0eef9;
  color: #1f4e8a;
  border-radius: 999px;
}
.audit-target-summary { font-size: 0.85rem; }

.audit-actions-col { width: 90px; text-align: right; white-space: nowrap; }

.audit-details-panel {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: #f3f7f5;
  border: 1px solid #d7e3de;
  border-radius: 8px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}

.audit-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

/* Condition Review tab — UW queue */
.condition-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0.85rem;
}
.condition-status-chip {
  font-size: 0.82rem;
  font-family: inherit;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.condition-status-chip:hover { border-color: var(--accent, #1d8f60); }
.condition-status-chip.is-active {
  background: var(--accent, #1d8f60);
  color: #fff;
  border-color: var(--accent, #1d8f60);
}
.condition-filter-bar { margin-bottom: 0.5rem; }

/* Inputs inside the Condition Review loan filter popover must NOT inherit
   the .admin-filter-bar input rule (flex:1; min-width:150px) — that rule
   would blow checkboxes out of their 18px grid cell and stretch the
   in-popover search input. Reset them here. */
.condition-filter-bar .duedates-multiselect-option input[type="checkbox"] {
  flex: initial;
  min-width: 0;
  max-width: none;
  width: 16px;
  height: 16px;
}
.condition-filter-bar .duedates-multiselect-search {
  flex: initial;
  min-width: 0;
  max-width: none;
  width: 100%;
}
/* The trigger button itself is also an inline-flex container — the inner
   text + caret get the input rule otherwise. Keep it sized like a normal
   filter control. */
.condition-filter-bar .duedates-multiselect {
  flex: 0 0 auto;
}
.condition-filter-bar .duedates-multiselect-trigger {
  min-width: 180px;
  max-width: 280px;
}
.condition-date-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}
/* Group From + To so they always sit on the same line in the
   Condition Review filter bar — without this they could wrap apart
   when the row got tight. The whole group still wraps as a unit if
   needed. */
.condition-date-range {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.condition-date-label input[type="date"] {
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.condition-queue-table th,
.condition-queue-table td { vertical-align: top; }
.condition-queue-table tbody tr { border-top: 1px solid var(--line); }
.condition-queue-table tbody tr.condition-review-row { cursor: pointer; transition: background-color 0.12s ease; }
.condition-queue-table tbody tr.condition-review-row:hover { background-color: var(--surface-2, rgba(0, 0, 0, 0.03)); }
.condition-queue-table tbody tr.condition-review-row:focus-visible { outline: 2px solid var(--accent, #2c8a6c); outline-offset: -2px; }
.task-type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.task-type-badge.task-type-form { background: #efe8ff; color: #5b3f95; border-color: #d8c8ff; }
.task-type-badge.task-type-upload { background: #e4f0ff; color: #1f5296; border-color: #c3d8f5; }
.task-type-badge.task-type-esign { background: #dff6e9; color: #0b6f43; border-color: #b3e2c6; }
.task-type-badge.task-type-link { background: #fff1da; color: #92510f; border-color: #f5d9aa; }
.condition-review-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

/* ----- Condition Review v2 ----- */

.condition-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.condition-review-header h3 { margin: 0; }

/* Scope chips (My Queue / Unassigned / Team) */
.condition-scope-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
}
.condition-scope-chip {
  font-size: 0.82rem;
  font-family: inherit;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.condition-scope-chip:hover { border-color: #1f5296; }
.condition-scope-chip.is-active {
  background: #1f5296;
  color: #fff;
  border-color: #1f5296;
}

/* Borrower Loans page filter chips (Active / All / Past). */
.borrower-loan-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.6rem;
}
.borrower-loan-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.borrower-loan-filter-chip:hover { border-color: var(--accent, #2c8a6c); }
.borrower-loan-filter-chip.is-active {
  background: var(--accent, #2c8a6c);
  border-color: var(--accent, #2c8a6c);
  color: #fff;
}
.borrower-loan-filter-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  text-align: center;
}
.borrower-loan-filter-chip.is-active .borrower-loan-filter-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Aging pill — color-coded by SLA bracket */
.aging-pill {
  display: inline-block;
  position: relative;        /* anchor for ::after tooltip */
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Instant CSS tooltip — replaces the slow native title= popup. Reads from
   data-tooltip on the pill so the same markup carries both the visual
   tooltip and the (separately wired) aria-label for screen readers. */
.aging-pill[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2520;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.35;
  padding: 0.55rem 0.8rem;
  border-radius: 7px;
  /* Size the box to its widest line so a 16-char tooltip doesn't break
     into 4 lines just because the parent pill is narrow. max-width caps
     it for genuinely long multi-line content. */
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  max-width: 320px;
  white-space: pre-line;     /* keep \n line breaks for multi-line tips */
  text-align: left;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  animation: aging-pill-tooltip-in 0.1s ease-out;
}
@keyframes aging-pill-tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(3px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.aging-pill-green { background: #e9f7ee; color: #117a3a; border-color: #b9e3c7; }
.aging-pill-amber { background: #fff7e0; color: #8a5a00; border-color: #f1d27a; }
.aging-pill-none  { background: var(--bg); color: var(--muted); border-color: var(--line); }

/* Breach state — solid red, white bold, pulsing halo, ⚠ prefix. */
.aging-pill-red {
  background: #c81e1e;
  color: #ffffff;
  border-color: #a51717;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 0 rgba(200, 30, 30, 0.55);
  animation: aging-pulse 1.3s ease-out infinite;
}
.aging-pill-red::before {
  content: "\26A0  "; /* warning sign */
  margin-right: 0.18rem;
  font-weight: 700;
}
@keyframes aging-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 30, 30, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(200, 30, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 30, 30, 0); }
}

/* Breached row — stronger tint + left-edge accent so it's visible at a glance. */
.condition-queue-table tbody tr.is-breached {
  background: #fff0ef;
  box-shadow: inset 3px 0 0 0 #c81e1e;
}
.condition-queue-table tbody tr.is-breached td:first-child {
  /* keep the inset accent visible even with cell padding */
  position: relative;
}

/* Assignee chip */
.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem 0.15rem 0.2rem;
  border-radius: 999px;
  background: #eef2f7;
  border: 1px solid #d2dae5;
  color: #1f2a3b;
}
.assignee-chip-empty {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--line);
  padding: 0.15rem 0.5rem;
  font-style: italic;
}
.assignee-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #1f5296;
  color: #fff;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}
.assignee-chip-name { font-weight: 600; }
.assignee-chip-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.condition-row-actions {
  white-space: nowrap;
}
.condition-row-actions > * + * { margin-left: 0.35rem; }

/* Assignment row inside the task modal */
.task-assignment-row {
  margin: 0 0 0.4rem;
}
.task-assignment-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* Comment composer — unified textarea + mic button + voice-attachment
   chip. Admin-only (the JS gate doesn't render this for borrowers).
   Inspired by chat composers like Claude's: a clean rounded shell, a
   compact mic button at the bottom-left, and the Post button at the
   bottom-right. Recording state replaces the textarea with a pulsing
   indicator. Recorded audio appears as an inline attachment chip.   */
.voice-note-mount { margin-top: 0.7rem; }
.comment-composer {
  border: 1px solid var(--line, #d8e3dc);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.6rem 0.7rem 0.55rem;
  box-shadow: 0 1px 2px rgba(16, 35, 29, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.comment-composer:focus-within {
  border-color: #1d8f60;
  box-shadow: 0 1px 3px rgba(29, 143, 96, 0.18);
}
.comment-composer.is-recording {
  border-color: #e2a4a0;
  background: #fff8f7;
}
.comment-composer-text {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.comment-composer-text:disabled { background: transparent; opacity: 0.6; }
.comment-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.comment-composer-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line, #d8e3dc);
  background: #f3f7f5;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.comment-composer-mic:hover:not(:disabled) {
  background: #e8efeb;
  border-color: #c5d3cb;
}
.comment-composer-mic:active:not(:disabled) {
  transform: scale(0.95);
}
.comment-composer-mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.comment-composer-post {
  min-width: 76px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
}
.comment-composer-post:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Live-recording state — sits above the textarea (which is disabled). */
.comment-composer-recording {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  background: #fff5f5;
  border: 1px solid #f0c4c4;
  font-size: 0.85rem;
}
.comment-composer-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d63b3b;
  animation: comment-composer-pulse 1s ease-in-out infinite;
}
@keyframes comment-composer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.comment-composer-rec-label { font-weight: 600; color: #ab1f47; }
.comment-composer-rec-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: auto;
}
.comment-composer-rec-stop { padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.comment-composer-rec-hint { font-size: 0.75rem; }

/* Attachment chip — appears between the textarea and the action row
   after a recording is captured but before the user posts. */
.comment-composer-attachment {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.45rem 0 0.25rem;
  padding: 0.4rem 0.55rem;
  background: #f4f8ff;
  border: 1px solid #c7d6ee;
  border-radius: 8px;
}
.comment-composer-audio {
  height: 32px;
  max-width: 240px;
  flex: 1 1 200px;
}
.comment-composer-attachment-meta {
  font-size: 0.78rem;
  flex: 0 0 auto;
}
.comment-composer-attachment-remove {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #c7d6ee;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comment-composer-attachment-remove:hover { background: #eef2fa; }

/* Inline <audio> player on posted comments that have a voice note. */
.task-comment-audio {
  display: block;
  margin-top: 0.4rem;
  height: 32px;
  max-width: 320px;
}

/* Inline voice recorder attached to a send-back textarea (Comment to
   staff / Comment to borrower in the Condition Status section). It
   doesn't post on its own — the recording is held until the parent
   form submits. Sits directly below the matching textarea. */
.voice-attach-mount {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.15rem;  /* tuck up against the textarea */
  margin-bottom: 0.45rem;
  min-height: 32px;
  flex-wrap: wrap;
}
.voice-attach-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line, #d8e3dc);
  background: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.voice-attach-mic:hover:not(:disabled) {
  background: #eef3f0;
  border-color: #c5d3cb;
}
.voice-attach-mic:active:not(:disabled) { transform: scale(0.95); }
.voice-attach-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d63b3b;
  display: inline-block;
  animation: comment-composer-pulse 1s ease-in-out infinite;
}
.voice-attach-rec-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #ab1f47;
}
.voice-attach-rec-timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
}
.voice-attach-stop { padding: 0.2rem 0.55rem; font-size: 0.78rem; }
.voice-attach-audio {
  height: 28px;
  max-width: 220px;
  flex: 1 1 180px;
}
.voice-attach-meta {
  font-size: 0.75rem;
}
.voice-attach-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line, #d8e3dc);
  background: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.voice-attach-remove:hover { background: #f3f7f5; }
.voice-attach-unsupported {
  font-size: 0.78rem;
}

/* Send-back extra fields (mirror toggle + staff/borrower comments). The
   container is themed by the picked Condition Status: red for send-back
   (Rejected / AIN), neutral blue for Waived. The base rule supplies the
   send-back theme; .is-waived swaps it. */
.task-sendback-extra {
  margin-top: 0.55rem;
  padding: 0.7rem;
  border-radius: 6px;
  background: #fff7f6;
  border: 1px solid #f4b9b6;
}
.task-sendback-extra.is-waived {
  background: #f4f8ff;
  border-color: #c7d6ee;
}
.task-sendback-extra .form-row { gap: 0.6rem; }
.task-sendback-mirror-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0.4rem;
}
.task-sendback-mirror-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.task-sendback-comment-label {
  display: block;
  margin-top: 0.55rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.task-sendback-staff-label textarea {
  background: #fffaf0;  /* slightly warmer tint to distinguish private staff note */
}
.task-sendback-comment-label textarea {
  width: 100%;
  margin-top: 0.25rem;
  font-family: inherit;
}

/* Decision history */
.task-decision-history {
  margin-top: 0.85rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.5rem;
}
.task-decision-history > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
}
.decision-history-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
}
.decision-history-list > li {
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.decision-history-list > li:first-child { border-top: 0; }
.decision-history-comment { margin-top: 0.2rem; }

/* Assignment popover (queue + modal share this) */
.assignment-popover {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20, 30, 50, 0.12);
  width: 240px;
  max-height: 360px;
  overflow-y: auto;
  font-size: 0.85rem;
}
.assignment-popover-header {
  padding: 0.45rem 0.6rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.assignment-popover-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.assignment-popover-list .assignment-popover-divider {
  padding: 0.3rem 0.6rem 0.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.assignment-popover-option {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.4rem 0.6rem;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}
.assignment-popover-option:hover { background: #f0f4fa; }

/* Settings sub-view */
.condition-settings-section {
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.condition-settings-section h4 { margin: 0 0 0.4rem; }
.condition-settings-section textarea {
  width: 100%;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}
.condition-settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 0.4rem 0;
}
.condition-settings-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.condition-uw-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.35rem;
  margin: 0.4rem 0;
}
.condition-uw-pool-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
}

.condition-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.condition-settings-toggle > input[type="checkbox"] {
  width: 16px;
  flex: 0 0 auto;
}

/* ── Verification of Rent (VOR) modal ── */
.vor-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vor-state {
  padding: 0;
}
.vor-state.hidden { display: none; }

/* Compact landlord-email gate (sits above the iframe; mirrors BPO feel). */
.vor-init-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.vor-init-bar.hidden { display: none; }
.vor-init-label {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.vor-init-label > input {
  margin-top: 0.18rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
}
.vor-init-bar > .primary-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* Landlord-info collection form (shown after borrower signs). */
.vor-landlord-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.vor-landlord-form .form-row { gap: 0.6rem; }
.vor-landlord-form .actions { margin-top: 0.6rem; }
#vor-pdf-iframe-needs-landlord {
  display: block;
  width: 100%;
  height: 60vh;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

#vor-sign-iframe {
  display: block;
  width: 100%;
  height: 80vh;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.vor-waiting-card {
  text-align: center;
  padding: 1.25rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.vor-waiting-card h4 {
  margin: 0 0 0.55rem;
  font-size: 1.1rem;
  color: #117a3a;
}
.vor-waiting-card p {
  margin: 0.4rem auto;
  max-width: 580px;
  line-height: 1.45;
}

/* Waiting / complete banner — sits above the signed PDF iframe so the
   borrower can read the status while still seeing the doc that was sent. */
.vor-waiting-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
  background: #e9f7ee;
  color: #0d4f29;
  border: 1px solid #b9e3c7;
  border-radius: 8px;
  line-height: 1.45;
  font-size: 0.92rem;
}
.vor-waiting-banner.vor-waiting-banner-complete {
  background: #eef4fb;
  color: #0f3a6a;
  border-color: #c2d8ee;
}
.vor-waiting-icon {
  font-size: 1.2rem;
  flex: 0 0 auto;
  line-height: 1.2;
}

#vor-pdf-iframe,
#vor-pdf-iframe-complete,
#vor-pdf-iframe-needs-landlord,
#rent-free-letter-waiting-iframe {
  display: block;
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

/* Admin: E-Sign Documents view */
.esign-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.esign-table thead th {
  background: #f0f5f3;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  text-align: left;
  font-weight: 600;
  color: #1a3b32;
  white-space: nowrap;
}
.esign-table tbody td {
  border-bottom: 1px solid #ecf0ee;
  padding: 0.6rem 0.7rem;
  vertical-align: top;
}
.esign-table tbody tr:hover { background: #f9fcfb; }
.esign-doc-name { font-weight: 600; color: #10231d; }
.esign-recipient-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.4rem;
}
.esign-recipient-name { font-weight: 600; color: #10231d; font-size: 0.86rem; }
.esign-recipient-meta { font-size: 0.78rem; color: #5a6c63; }
.esign-recipient-row .chip { align-self: flex-start; font-size: 0.72rem; padding: 0.1rem 0.5rem; }
.esign-cc-line, .esign-decline-line { font-size: 0.78rem; margin-top: 0.25rem; }
.esign-actions-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 110px;
}
.esign-row-action { font-size: 0.78rem; padding: 0.35rem 0.55rem; }
.esign-row-action.danger { color: #ab1f47; border-color: #f0c8d2; }
.esign-row-action.danger:hover { background: #fce2e8; }
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.admin-toolbar input[type="text"] {
  flex: 1 1 240px;
  min-width: 180px;
}
.admin-toolbar select {
  flex: 0 1 200px;
  min-width: 140px;
}
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.admin-section-head h2 { margin: 0 0 0.25rem; }
.admin-section-head { margin-bottom: 0.85rem; }

/* E-Sign top-level tab bar (Documents / Settings) */
.esign-top-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 1rem;
}
.esign-tab {
  background: none;
  border: none;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-weight: 600;
  color: #5a6c63;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}
.esign-tab:hover { color: #10231d; }
.esign-tab.is-active {
  color: var(--accent, #0f8b70);
  border-bottom-color: var(--accent, #0f8b70);
}

/* Settings sub-tabs (PDF Templates / User Permissions) */
.esign-settings-subtabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  background: #f0f5f3;
  padding: 0.25rem;
  border-radius: 8px;
  width: fit-content;
}
.esign-subtab {
  background: none;
  border: none;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.88rem;
  color: #1a3b32;
  cursor: pointer;
  border-radius: 6px;
}
.esign-subtab.is-active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--accent, #0f8b70);
  font-weight: 600;
}
.esign-settings-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.esign-perm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: #1a3b32;
}
.esign-perm-list li { margin-bottom: 0.15rem; }

/* User Permissions table — checkbox per permission per user. Compact
   centered cells so the matrix reads at a glance. */
.esign-perm-table .esign-perm-col {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a3b32;
  white-space: nowrap;
}
.esign-perm-cell {
  text-align: center;
  padding: 0.4rem 0.55rem !important;
}
.esign-perm-toggle {
  display: inline-block;
}
.esign-perm-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent, #0f8b70);
}
.esign-perm-toggle input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Visibility modal — wider than the default 470px modal-card so the
   to-do + borrower lists have room to breathe. */
#esign-vis-modal .modal-card {
  width: min(780px, 100%);
}


/* Visibility modal — sections + grids of checkboxes. */
.esign-vis-section {
  margin: 1rem 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.esign-vis-section:first-of-type { border-top: none; padding-top: 0; }
.esign-vis-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
  gap: 0.7rem;
}
.esign-vis-head h4 { margin: 0; font-size: 0.95rem; }
.esign-vis-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.esign-vis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.25rem 0.85rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.6rem 0.7rem;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.esign-vis-grid-tall { max-height: 280px; }
.esign-vis-grid.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  background: #f0f0f0;
}
/* Each row: checkbox in a fixed-width column, label fills the rest. Grid
   layout keeps the checkbox + label tightly aligned regardless of how
   wide the grid cell ends up being. */
.esign-vis-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 0.55rem;
  align-items: start;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.1rem;
}
.esign-vis-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  margin-top: 0.18rem;
  accent-color: var(--accent, #0f8b70);
}
.esign-vis-option-label {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0; /* allow long names to wrap */
  line-height: 1.3;
}
.esign-vis-option-label .muted { font-size: 0.75rem; }

/* Reminders settings panel */
.esign-reminders-form { padding: 1rem 1.1rem; }
.esign-reminder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem 0.95rem;
  margin-bottom: 0.85rem;
}
.esign-reminder-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #1a3b32;
}
.esign-reminder-grid input[type="text"],
.esign-reminder-grid input[type="number"],
.esign-reminder-grid select {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.esign-reminder-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  cursor: pointer;
}
.esign-reminder-toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #0f8b70);
}
.esign-reminder-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.esign-reminder-tpl-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0.7rem 0.9rem;
}
.esign-reminder-tpl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}
.esign-reminder-tpl-name { font-weight: 600; color: #10231d; }
.esign-reminder-tpl-actions { flex-shrink: 0; }
.esign-reminder-tpl-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #ecf0ee;
}
.esign-reminder-tpl-body label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.esign-reminder-tpl-body input[type="text"],
.esign-reminder-tpl-body input[type="number"] {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 320px;
}

/* ── Due Dates admin section ──────────────────────────────────────── */

.duedates-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.duedates-tabs { margin-bottom: 0.4rem; }

/* Two-pane Rules editor (matches e-sign notifications shell layout) */
.duedates-rules-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 920px) {
  .duedates-rules-shell { grid-template-columns: 1fr; }
}

.duedates-tasks-rail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.duedates-rail-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7a73;
  padding: 0.35rem 0.55rem;
  font-weight: 700;
}
.duedates-task-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.duedates-task-row:hover { background: #f3f7f5; }
.duedates-task-row.is-selected {
  background: #e9f4ef;
  border-color: #b8dccb;
}
.duedates-task-row-name {
  font-size: 0.88rem;
  font-weight: 600;
}
.duedates-task-row-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #6b7a73;
}
.duedates-task-rule-count {
  display: inline-flex;
  align-items: center;
  background: #ecf0ee;
  color: #4a5852;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.65rem;
}
.duedates-task-rule-count.has-rules { background: #d6e4dc; color: #2c4339; }
.duedates-task-rule-count.is-empty { background: #f1f4f3; color: #8c9892; }
.duedates-task-inflight {
  background: #fde9c5;
  color: #815f1a;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.duedates-task-row-fallback {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #ecf0ee;
}

/* Right pane: rule editor */
.duedates-rules-editor {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 320px;
}
.duedates-rules-editor-head h4 { margin: 0; }
.duedates-rules-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.duedates-rule-card {
  border: 1px solid #d6e4dc;
  border-radius: 9px;
  padding: 0.75rem 0.9rem;
  background: #fbfdfc;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.duedates-rule-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.duedates-rule-num {
  background: #0f8b70;
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.duedates-rule-enabled {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #4a5852;
}
.duedates-rule-remove { margin-left: auto; font-size: 0.78rem; }
.duedates-rule-body {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 0.7rem;
  align-items: end;
}
.duedates-rule-body > .duedates-rule-field-checkbox { grid-column: 1 / -1; }
.duedates-rule-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: #2c4339;
  font-weight: 600;
}
.duedates-rule-field input,
.duedates-rule-field select {
  font: inherit;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.duedates-rule-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
}
.duedates-rule-field-checkbox input { margin: 0; }

.duedates-add-rule {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #ecf0ee;
  font-size: 0.85rem;
  color: #4a5852;
  align-items: center;
}
.duedates-add-rule span { font-weight: 600; margin-right: 0.2rem; }
.duedates-add-rule-btn { font-size: 0.78rem; }

/* Sticky action bar */
.duedates-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.95rem;
  margin-top: 0.5rem;
  border-radius: 9px;
  background: #f3f7f5;
  border: 1px solid #e3ebe6;
}
.duedates-actions-bar.is-dirty {
  background: #fef5e3;
  border-color: #e6c577;
}
.duedates-dirty-label {
  font-size: 0.85rem;
  color: #4a5852;
  font-weight: 600;
}
.duedates-actions-bar.is-dirty .duedates-dirty-label { color: #815f1a; }
.duedates-actions-bar .actions { display: flex; gap: 0.45rem; }

/* ── Due Dates Dashboard tab ──────────────────────────────────────── */

.duedates-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.duedates-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  background: #f7faf8;
  border: 1px solid #e3ebe6;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
}
.duedates-filters input,
.duedates-filters select {
  font: inherit;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.duedates-filters input[type="search"] { min-width: 220px; }

/* Multiselect dropdown for the taskType filter — looks like a select but
   opens a checkbox popover so admins can pick multiple. */
.duedates-multiselect {
  position: relative;
  display: inline-block;
}
.duedates-multiselect-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font: inherit;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  min-width: 180px;
  text-align: left;
  color: inherit;
}
.duedates-multiselect-trigger:hover { border-color: #c5d3cb; }
.duedates-multiselect-trigger.has-selection {
  border-color: #0f8b70;
  background: #f3faf6;
}
.duedates-multiselect-trigger-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duedates-multiselect-caret {
  font-size: 0.7rem;
  color: #6b7a73;
}
.duedates-multiselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;              /* fixed width — predictable + room for long names */
  max-width: calc(100vw - 32px);
  max-height: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 25, 0.16);
  z-index: 50;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.duedates-multiselect-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #ecf0ee;
  background: #f7faf8;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.duedates-multiselect-head .ghost-btn { font-size: 0.75rem; padding: 0.2rem 0.55rem; white-space: nowrap; }
.duedates-multiselect-search-wrap {
  padding: 0.5rem 0.5rem 0;
  flex-shrink: 0;
}
.duedates-multiselect-search {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
}
.duedates-multiselect-search:focus {
  outline: none;
  border-color: #0f8b70;
  box-shadow: 0 0 0 2px rgba(15, 139, 112, 0.15);
}
.duedates-multiselect-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.3rem;
}
.duedates-multiselect-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.3;
  user-select: none;
}
.duedates-multiselect-option:hover { background: #f3f7f5; }
.duedates-multiselect-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.duedates-multiselect-option span {
  word-break: break-word;
  min-width: 0;
}

.duedates-dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .duedates-dashboard-shell { grid-template-columns: 1fr; }
}

/* Calendar */
.duedates-dashboard-cal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.duedates-cal-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.duedates-cal-head h4 { margin: 0; flex: 1; text-align: center; font-size: 1rem; }
.duedates-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.duedates-cal-dows .duedates-cal-dow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a73;
  text-align: center;
  padding: 0.3rem 0;
}
.duedates-cal-day {
  aspect-ratio: 1 / 1;
  background: #fbfdfc;
  border: 1px solid #ecf0ee;
  border-radius: 7px;
  position: relative;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.3rem 0.4rem;
}
.duedates-cal-day.is-blank { background: transparent; border: none; cursor: default; }
.duedates-cal-day:hover:not(.is-blank) { background: #f3f7f5; }
.duedates-cal-day.is-today {
  outline: 2px solid #0f8b70;
  outline-offset: -2px;
}
.duedates-cal-day.is-selected {
  background: #e9f4ef;
  border-color: #0f8b70;
}
.duedates-cal-day-num {
  font-size: 0.78rem;
  font-weight: 600;
  color: #2c4339;
}
.duedates-cal-day-count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #0f8b70;
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.duedates-cal-day.is-past-with-tasks .duedates-cal-day-count {
  background: #c92a2a;
}
.duedates-cal-day.is-today.has-tasks .duedates-cal-day-count {
  background: #f08c00;
}

.duedates-counts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.duedates-count {
  background: #f7faf8;
  border: 1px solid #e3ebe6;
  border-radius: 7px;
  padding: 0.5rem 0.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.duedates-count .n { font-size: 1.1rem; font-weight: 700; color: #10231d; }
.duedates-count span:not(.n) { font-size: 0.7rem; color: #6b7a73; text-transform: uppercase; letter-spacing: 0.04em; }
.duedates-count.is-overdue { background: #fdecec; border-color: #e8b4b4; }
.duedates-count.is-overdue .n { color: #c92a2a; }
.duedates-count.is-today { background: #fff4e6; border-color: #ecc585; }
.duedates-count.is-today .n { color: #b35c00; }

/* Bucket list */
.duedates-dashboard-buckets {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* Focused "tasks on selected date" section sits above the regular buckets.
   Uses a mint-green header so it visually reads as a drill-in pin without
   shouting like a warning. */
.duedates-bucket-focus {
  border: 1px solid #b8dccb !important;
}
.duedates-bucket-focus .duedates-bucket-header {
  background: #e9f4ef !important;
  border-bottom-color: #b8dccb !important;
}
.duedates-bucket-focus .duedates-bucket-count {
  background: #0f8b70 !important;
  color: #fff !important;
}
.duedates-bucket-clear-link {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f8b70;
  text-decoration: none;
}
.duedates-bucket-clear-link:hover { text-decoration: underline; }

.duedates-bucket-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.duedates-bucket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: #f7faf8;
  border-bottom: 1px solid #ecf0ee;
}
.duedates-bucket-name { font-weight: 700; font-size: 0.92rem; }
.duedates-bucket-count {
  background: #ecf0ee;
  color: #4a5852;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
}
.duedates-bucket-overdue .duedates-bucket-header { background: #fdecec; border-bottom-color: #e8b4b4; }
.duedates-bucket-overdue .duedates-bucket-count { background: #c92a2a; color: #fff; }
.duedates-bucket-today .duedates-bucket-header { background: #fff4e6; border-bottom-color: #ecc585; }
.duedates-bucket-today .duedates-bucket-count { background: #f08c00; color: #fff; }
.duedates-bucket-thisweek .duedates-bucket-header { background: #fff9e6; border-bottom-color: #e8d685; }
.duedates-bucket-empty { padding: 0.85rem; margin: 0; font-size: 0.85rem; }

/* Task entry */
.duedates-task-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid #ecf0ee;
  border-left: 4px solid transparent;
  align-items: start;
}
.duedates-task-entry:first-child { border-top: none; }
.duedates-task-entry.is-overdue { border-left-color: #c92a2a; }
.duedates-task-entry.is-today { border-left-color: #f08c00; }
.duedates-task-entry.is-thisweek { border-left-color: #f0c000; }
.duedates-task-entry-main {
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}
.duedates-task-entry-line1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
}
.duedates-task-entry-due {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  background: #ecf0ee;
  color: #2c4339;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-weight: 700;
}
.duedates-task-entry-name { font-weight: 600; }
.duedates-task-entry-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #fde9c5;
  color: #815f1a;
}
.duedates-task-entry-line2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.78rem;
}
.duedates-task-entry-source {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  color: #6b7a73;
  background: #f1f4f3;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
}
.duedates-task-edit-btn { font-size: 0.78rem; align-self: start; }

.duedates-inline-override {
  grid-column: 1 / -1;
  background: #f7faf8;
  border: 1px solid #d6e4dc;
  border-radius: 7px;
  padding: 0.55rem 0.7rem;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.duedates-inline-override-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.55rem;
}
.duedates-inline-override-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2c4339;
}
.duedates-inline-override-row input {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.duedates-inline-override-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

/* Warnings table */
.duedates-warnings-table {
  width: 100%;
  border-collapse: collapse;
}
.duedates-warnings-table th,
.duedates-warnings-table td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #ecf0ee;
  font-size: 0.85rem;
}
.duedates-warnings-table thead th {
  background: #f7faf8;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a73;
}
.duedates-warnings-table code {
  background: #fef5e3;
  color: #815f1a;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.78rem;
}
.duedates-warnings-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.duedates-missing-input {
  display: inline-block;
  background: #fef5e3;
  color: #815f1a;
  border: 1px solid #e6c577;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Loan card warning chip */
.duedates-loan-warn-chip {
  display: inline-block;
  margin-top: 0.3rem;
  background: #fef5e3;
  color: #815f1a;
  border: 1px solid #e6c577;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.duedates-loan-warn-chip:hover { background: #fae0a3; }

/* ── Task modal: due-date override panel ──────────────────────────── */
.task-due-date-meta {
  margin-top: 0.3rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: #f7faf8;
  border: 1px solid #e3ebe6;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.84rem;
}
.task-due-date-meta.hidden { display: none; }
.task-due-date-meta-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.task-due-date-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.task-due-date-badge.is-auto {
  background: #d6e4dc;
  color: #2c4339;
}
.task-due-date-badge.is-overridden {
  background: #fde9c5;
  color: #815f1a;
}
.task-due-date-source {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: #4a5852;
  background: #ecf0ee;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}
.task-due-date-warning {
  background: #fef5e3;
  border-left: 3px solid #e6c577;
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  color: #6b5217;
}
.task-due-date-override-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #4a5852;
  border-top: 1px dashed #ecf0ee;
  padding-top: 0.5rem;
}
.task-due-date-reason-input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
  margin-top: 0.3rem;
}
.task-due-date-reason-input input {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ── Processor Workspace (Phase 1) ───────────────────────────────────── */

.processing-shell { display: flex; flex-direction: column; gap: 0.75rem; }
.processing-tabs { gap: 0.1rem; }

.processing-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: #f7faf8;
  border: 1px solid #e3ebe6;
  border-radius: 9px;
  margin-bottom: 0.5rem;
}
.processing-scope-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.processing-scope-btn {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  color: #4a5852;
}
.processing-scope-btn:hover { background: #f3f7f5; }
.processing-scope-btn.is-active { background: #0f8b70; color: #fff; }

/* Auto-fallback banner shown when "Mine" scope returns nothing. */
.processing-fallback-banner {
  background: #fef5e3;
  border: 1px solid #e6c577;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.86rem;
  color: #6b5217;
  margin-bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.processing-fallback-banner strong { color: #815f1a; }
.processing-fallback-banner .text-btn { color: #0f8b70; font-weight: 600; }

/* Pipeline (Kanban) */
.processing-pipeline-shell { display: flex; flex-direction: column; gap: 0.5rem; }
.pipeline-board {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: flex-start;
}
.pipeline-column {
  flex: 0 0 240px;
  background: #f7faf8;
  border: 1px solid #e3ebe6;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}
.pipeline-column.is-drop-target { background: #e9f4ef; border-color: #0f8b70; }
.pipeline-column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #e3ebe6;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2c4339;
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.pipeline-column-name { letter-spacing: 0.01em; }
.pipeline-column-count {
  background: #ecf0ee;
  color: #4a5852;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.pipeline-column-body {
  padding: 0.4rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pipeline-column-empty { padding: 0.4rem; margin: 0; font-size: 0.82rem; }
.pipeline-column-unstaged { background: #fef5e3; border-color: #e6c577; }

.pipeline-card {
  background: #fff;
  border: 1px solid #e3ebe6;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: box-shadow 0.12s, transform 0.06s;
}
.pipeline-card:hover { box-shadow: 0 2px 8px rgba(20, 30, 25, 0.1); }
.pipeline-card.is-dragging { opacity: 0.55; transform: rotate(-1deg); }
.pipeline-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.pipeline-card-address {
  font-weight: 600;
  font-size: 0.85rem;
  color: #10231d;
  flex: 1;
  word-break: break-word;
}
.pipeline-card-processor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #0f8b70;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pipeline-card-borrower { font-size: 0.78rem; color: #4a5852; }
.pipeline-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.72rem;
}
.pipeline-card-closing { color: #6b7a73; }
.pipeline-card-pending {
  background: #ecf0ee;
  color: #4a5852;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
}
.pipeline-card-overdue {
  background: #fdecec;
  color: #c92a2a;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
}

/* Activity feed */
.processing-activity-shell { display: flex; flex-direction: column; gap: 0.5rem; }
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
}
.activity-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  background: #fbfcfb;
  border: 1px solid #ecf0ee;
}
.activity-row:hover { background: #f7faf8; }
.activity-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: #f3f7f5;
  border-radius: 50%;
  flex-shrink: 0;
}
.activity-title { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.activity-kind-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #ecf0ee;
  color: #4a5852;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}
.activity-title-text { font-weight: 600; font-size: 0.88rem; color: #10231d; }
.activity-text {
  font-size: 0.85rem;
  color: #4a5852;
  margin-top: 0.2rem;
  line-height: 1.4;
  white-space: pre-wrap;
}
.activity-meta {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.72rem;
  color: #6b7a73;
  margin-top: 0.3rem;
}
.activity-meta .text-btn { font-size: 0.72rem; }

/* Vendors table */
.vendors-table { width: 100%; border-collapse: collapse; }
.vendors-table th, .vendors-table td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #ecf0ee;
  font-size: 0.85rem;
}
.vendors-table thead th {
  background: #f7faf8;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a73;
}
.vendors-table tr.is-stuck { background: #fdecec; }
.vendor-status-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.vendor-status-ordered      { background: #e4f0ff; color: #1f5296; }
.vendor-status-in-progress  { background: #fff7e0; color: #8a5a00; }
.vendor-status-received     { background: #e9f7ee; color: #117a3a; }
.vendor-status-issue        { background: #fdecec; color: #c92a2a; }
.vendor-status-cancelled    { background: #ecf0ee; color: #6b7a73; text-decoration: line-through; }

/* Processing Settings shell */
.processing-settings-shell { display: flex; flex-direction: column; gap: 0.7rem; }

/* Processor pool list */
.processor-pool-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
}
.processor-pool-member {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}
.processor-pool-member:hover { background: #f3f7f5; }
.processor-pool-checkbox { margin: 0; }
.processor-pool-member-name { font-weight: 600; font-size: 0.88rem; }

/* ── Loan Detail modal ─────────────────────────────────────────────── */

.loan-detail-card {
  width: min(1000px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.loan-detail-head { padding-bottom: 0.6rem; }
.loan-detail-tabs {
  display: flex;
  gap: 0.1rem;
  border-bottom: 1px solid #ecf0ee;
  padding: 0 1rem;
}
.loan-detail-tab {
  background: transparent;
  border: none;
  padding: 0.6rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #6b7a73;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.loan-detail-tab:hover { color: #2c4339; }
.loan-detail-tab.is-active {
  color: #0f8b70;
  border-bottom-color: #0f8b70;
}
.loan-detail-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

.loan-detail-overview { display: flex; flex-direction: column; gap: 1.1rem; }
.loan-detail-overview-section { background: #fff; border: 1px solid #ecf0ee; border-radius: 9px; padding: 0.85rem 1rem; }
.loan-detail-overview-section h4 { margin: 0 0 0.55rem; font-size: 0.95rem; }
.loan-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.loan-detail-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: #2c4339; }
.loan-detail-field input,
.loan-detail-field select {
  font: inherit;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.loan-detail-readonly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1.2rem;
  font-size: 0.85rem;
}
.loan-detail-readonly-grid > div { display: flex; flex-direction: column; gap: 0.15rem; }
.loan-detail-readonly-grid .muted { font-size: 0.72rem; }
.loan-detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Activity composer inside Loan Detail */
.loan-detail-composer {
  background: #fbfdfc;
  border: 1px solid #d6e4dc;
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.8rem;
}
.loan-detail-composer-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.loan-detail-composer-tab {
  background: #ecf0ee;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  color: #4a5852;
}
.loan-detail-composer-tab.is-active { background: #0f8b70; color: #fff; }
.loan-detail-composer-body { display: flex; flex-direction: column; gap: 0.45rem; }
.loan-detail-composer-body input[type="text"],
.loan-detail-composer-body textarea {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}
.loan-detail-composer-call-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.loan-detail-composer-call-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; font-weight: 600; }
.loan-detail-composer-call-fields select,
.loan-detail-composer-call-fields input { font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; }
.loan-detail-composer-actions { display: flex; justify-content: flex-end; }

.loan-detail-vendors-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }

.loan-detail-todos { display: flex; flex-direction: column; gap: 0.6rem; }
.loan-detail-todos-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.loan-detail-todos-table th, .loan-detail-todos-table td { padding: 0.5rem 0.55rem; border-bottom: 1px solid #ecf0ee; text-align: left; }
.loan-detail-todos-table thead th { font-size: 0.7rem; text-transform: uppercase; color: #6b7a73; letter-spacing: 0.04em; }

.vendor-status-select {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

/* Settings panel header (for template list panels) */
.settings-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

/* ── Template editor modal (vendor or email) ────────────────────────── */
.template-editor-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.template-editor-body {
  padding: 0.85rem 1rem 1rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ── Compose Email modal ─────────────────────────────────────────────── */

.compose-email-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.compose-email-body {
  padding: 0.85rem 1rem 1rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.compose-email-row { display: flex; gap: 0.6rem; align-items: stretch; }
.compose-email-row > label { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: #2c4339; }
.compose-email-row input,
.compose-email-row select,
.compose-email-row textarea {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}
.compose-email-row textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; }
.compose-email-suggestions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.compose-email-suggestion-btn { font-size: 0.76rem; padding: 0.2rem 0.55rem; }
.compose-email-actions { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.4rem; }

/* ── Vendor Order modal ─────────────────────────────────────────────── */

.vendor-order-card {
  width: min(680px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.vendor-order-body {
  padding: 0.85rem 1rem 1rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vendor-order-send-email-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-top: 0.2rem;
}

/* ── Phase 3: Staff bell-icon notifications ─────────────────────────── */

.staff-notif-bell {
  position: relative;
  display: inline-block;
  margin-right: 0.4rem;
}
.staff-notif-bell-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 1.1rem;
  transition: background 0.15s, border-color 0.15s;
}
.staff-notif-bell-btn:hover { background: #f3f7f5; border-color: #d6e4dc; }
.staff-notif-bell-btn.has-unread { background: #e9f4ef; border-color: #b8dccb; }
.staff-notif-bell-icon {
  display: inline-block;
  filter: grayscale(0.1);
  transform-origin: 50% 0;
}
/* Bell-ring animation: a back-and-forth wobble that decays over ~1s. */
@keyframes staff-notif-bell-ring {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(18deg); }
  20%  { transform: rotate(-15deg); }
  30%  { transform: rotate(12deg); }
  40%  { transform: rotate(-9deg); }
  50%  { transform: rotate(7deg); }
  60%  { transform: rotate(-5deg); }
  70%  { transform: rotate(3deg); }
  80%  { transform: rotate(-2deg); }
  90%  { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
.staff-notif-bell-btn.is-ringing .staff-notif-bell-icon {
  animation: staff-notif-bell-ring 1s ease-in-out;
}
@keyframes staff-notif-badge-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.staff-notif-bell-btn.is-ringing .staff-notif-bell-count {
  animation: staff-notif-badge-pop 0.55s ease-out;
}
/* Match the chat-badge styling in the borrower portal so the unread count
   reads consistently across the app. */
.staff-notif-bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e53e3e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.staff-notif-bell-count[hidden] { display: none; }
.staff-notif-bell-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 30, 25, 0.16);
  z-index: 100;
}
.staff-notif-dropdown-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid #ecf0ee;
  background: #fbfcfb;
  position: sticky;
  top: 0;
  z-index: 1;
}
.staff-notif-dropdown-head strong { font-size: 0.95rem; }
.staff-notif-dropdown-body { padding: 0.4rem; }
.staff-notif-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  border-left: 3px solid transparent;
}
.staff-notif-row:hover { background: #f3f7f5; }
.staff-notif-row.is-unread { border-left-color: #0f8b70; background: #f6faf8; }
.staff-notif-row.is-unread:hover { background: #ecf4f0; }
.staff-notif-row-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: #10231d;
  margin-bottom: 0.2rem;
}
.staff-notif-row-text {
  font-size: 0.8rem;
  color: #4a5852;
  line-height: 1.35;
}
.staff-notif-row-meta {
  font-size: 0.7rem;
  color: #8c9892;
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}
.staff-notif-row-clear {
  background: transparent;
  border: none;
  color: #a4afa8;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  align-self: start;
}
.staff-notif-row-clear:hover { background: #fbe9e3; color: #a85a4a; }

/* ── Phase 3: Staff profile (My Profile) form ─────────────────────────── */
.staff-profile-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
@media (max-width: 700px) {
  .staff-profile-form .row { grid-template-columns: 1fr; }
}
.staff-profile-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2c4339;
}
.staff-profile-form input {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.staff-profile-form input:disabled {
  background: #f3f7f5;
  color: #6b7a73;
}

/* SMS-channel "config required" hint in the notifications panel */
.esign-notif-channel-cell.is-config-required {
  position: relative;
}
.esign-notif-channel-cell.is-config-required::after {
  content: "config";
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #fde9c5;
  color: #815f1a;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.15rem;
}
/* Override the "soon" badge from is-coming-soon — Phase 3 cells aren't coming soon. */
.esign-notif-channel-cell.is-coming-soon::after {
  content: "soon";
}
.esign-notif-channel-cell.is-config-required.is-coming-soon::after {
  content: "config";
}

/* ── E-Sign Notifications panel (rebuilt: two-pane rules engine) ─────── */

.esign-notif-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 0.75rem;
}
@media (max-width: 880px) {
  .esign-notif-shell { grid-template-columns: 1fr; }
}

/* Left rail: events list */
.esign-notif-events-rail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: sticky;
  top: 0.75rem;
}
.esign-notif-rail-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7a73;
  padding: 0.35rem 0.55rem;
  font-weight: 700;
}
.esign-notif-event-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.esign-notif-event-row:hover { background: #f3f7f5; }
.esign-notif-event-row.is-selected {
  background: #e9f4ef;
  border-color: #b8dccb;
}
.esign-notif-event-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.85rem;
  color: #fff;
}
.esign-notif-event-toggle.is-on  { background: #0f8b70; }
.esign-notif-event-toggle.is-off { background: #b8c2bd; }
.esign-notif-event-label {
  font-size: 0.92rem;
  font-weight: 600;
}
.esign-notif-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #ecf0ee;
  color: #4a5852;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.esign-notif-badge.muted { background: #f1f4f3; color: #8c9892; }
.esign-notif-badge.has-override { background: #fde9c5; color: #815f1a; }

/* Right pane: editor */
.esign-notif-editor {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 320px;
}
.esign-notif-template-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #ecf0ee;
}
.esign-notif-template-pill {
  background: #f3f7f5;
  border: 1px solid transparent;
  color: #2c4339;
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.esign-notif-template-pill:hover { background: #e6efea; }
.esign-notif-template-pill.is-active {
  background: #0f8b70;
  color: #fff;
  border-color: #0a6c57;
}
.esign-notif-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.esign-notif-editor-head-actions {
  display: flex;
  gap: 0.4rem;
}
.esign-notif-tpl-banner {
  background: #f8fbfa;
  border: 1px dashed #c8d8d0;
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.86rem;
}
.esign-notif-tpl-banner.is-override {
  background: #fef5e3;
  border-color: #e6c577;
  border-style: solid;
}
.esign-notif-editor-body.is-readonly {
  opacity: 0.65;
  pointer-events: none;
}
.esign-notif-master-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.4rem 0.6rem;
  background: #f7faf8;
  border-radius: 7px;
  border: 1px solid #e3ebe6;
  margin-bottom: 0.4rem;
}

/* Recipient table */
.esign-notif-recipient-section { display: flex; flex-direction: column; gap: 0.5rem; }
.esign-notif-recipient-section-head h5 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.esign-notif-recipient-table {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.4rem;
  background: #fbfcfb;
  border: 1px solid #ecf0ee;
  border-radius: 8px;
  min-height: 50px;
}
.esign-notif-recipient-row {
  background: #fff;
  border: 1px solid #e3ebe6;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.esign-notif-recipient-row.is-builtin {
  background: #f6faf8;
  border-color: #d6e4dc;
}
.esign-notif-recipient-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.esign-notif-recipient-label {
  font-weight: 700;
  font-size: 0.9rem;
}
.esign-notif-recipient-group {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #ecf0ee;
  color: #4a5852;
  padding: 0.14rem 0.4rem;
  border-radius: 4px;
}
.esign-notif-recipient-remove {
  margin-left: auto;
  background: transparent;
  color: #a85a4a;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.esign-notif-recipient-remove:hover { background: #fbe9e3; border-color: #e8b5a4; }
.esign-notif-channels {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding-left: 0.05rem;
}
.esign-notif-channel-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.esign-notif-channel-cell input[type="checkbox"] { cursor: pointer; }
.esign-notif-channel-cell.is-coming-soon {
  color: #a4afa8;
  cursor: not-allowed;
}
.esign-notif-channel-cell.is-coming-soon::after {
  content: "soon";
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #f1f4f3;
  color: #8c9892;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.15rem;
}

/* Add recipient menu */
.esign-notif-add-recipient { position: relative; align-self: flex-start; }
.esign-notif-add-trigger {
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
}
.esign-notif-add-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem;
  box-shadow: 0 6px 18px rgba(20, 30, 25, 0.12);
  min-width: 240px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 30;
}
.esign-notif-add-group + .esign-notif-add-group { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #ecf0ee; }
.esign-notif-add-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a73;
  padding: 0.2rem 0.4rem;
}
.esign-notif-add-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.4rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  color: inherit;
}
.esign-notif-add-item:hover { background: #f3f7f5; }
.esign-notif-add-item.is-disabled,
.esign-notif-add-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Stuck-tier cards */
.esign-notif-tier-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.esign-notif-tier-card {
  border: 1px solid #d6e4dc;
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  background: #fbfdfc;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.esign-notif-tier-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.esign-notif-tier-title {
  font-weight: 700;
  font-size: 0.95rem;
  background: #0f8b70;
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.esign-notif-tier-days {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.esign-notif-tier-days-input {
  width: 60px;
  padding: 0.32rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  text-align: center;
}
.esign-notif-tier-remove { margin-left: auto; }

/* Sticky bottom save bar */
.esign-notif-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.95rem;
  margin-top: 0.85rem;
  border-radius: 9px;
  background: #f3f7f5;
  border: 1px solid #e3ebe6;
}
.esign-notif-actions-bar.is-dirty {
  background: #fef5e3;
  border-color: #e6c577;
}
.esign-notif-dirty-label {
  font-size: 0.85rem;
  color: #4a5852;
  font-weight: 600;
}
.esign-notif-actions-bar.is-dirty .esign-notif-dirty-label { color: #815f1a; }
.esign-notif-actions-bar .actions { display: flex; gap: 0.45rem; }

/* Credit Authorization modal — terms scroll box + photo preview + sign
   iframe. Reuses the rfl-fieldset / vor-state visual styles already
   defined elsewhere; only credit-auth-specific bits live here. */
.credit-auth-terms-box {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf8;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #333;
}
.credit-auth-photo-preview {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fafbfa;
}
.credit-auth-photo-preview.hidden { display: none; }
#credit-auth-photo-preview-img {
  max-width: 96px;
  max-height: 64px;
  border-radius: 4px;
  object-fit: cover;
  background: #fff;
}

/* Credit/Background Auth pay phase — fee summary + Square card iframe
   container + error/paid banners. The Square SDK injects its own
   iframe inside .credit-auth-card-container; we just give it a clean
   bordered box with consistent padding so it lines up with the rest
   of the form-modal's controls. */
.credit-auth-pay-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #f7faf8;
  margin-bottom: 0.5rem;
}
.credit-auth-pay-amount {
  font-weight: 700;
  font-size: 1.1rem;
  color: #114030;
}
.credit-auth-card-container {
  border: 1px solid var(--line, #d6dfdb);
  border-radius: 8px;
  background: #fff;
  padding: 0.6rem 0.7rem;
  min-height: 76px;
  margin-bottom: 0.5rem;
}
.credit-auth-pay-error {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  background: #fdecec;
  color: #b42318;
  font-size: 0.85rem;
  border: 1px solid #f5c2c2;
}
.credit-auth-pay-error.hidden { display: none; }
.credit-auth-pay-paid-banner {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  background: #ddf3e3;
  color: #0f5d4a;
  font-size: 0.85rem;
  border: 1px solid #b3dac3;
}
.credit-auth-pay-paid-banner.hidden { display: none; }
#credit-auth-sign-iframe,
#credit-auth-complete-iframe {
  display: block;
  width: 100%;
  height: 75vh;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

/* PDF-mode help bullets sit between the action row and the upload
   fieldset. Same compact treatment as the RFL submit-help list. */
.vor-pdf-help {
  margin: 0.4rem 0 0.85rem;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.vor-pdf-help li { margin: 0.15rem 0; }

/* Reminder action row above the waiting iframe (VOR + RFL). */
.vor-waiting-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.5rem 0 0.7rem;
}
.vor-remind-meta {
  font-size: 0.82rem;
  color: #5a6c63;
}

/* RFL mode-bar above the form: shows current mode + Switch link. */
.rfl-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.85rem;
  background: #eaf6f0;
  border: 1px solid #b9e3c7;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #0d4f29;
}
.rfl-mode-bar.hidden { display: none; }
.rfl-mode-label { font-weight: 600; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent, #0f8b70);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: #0d6f59; }

/* Chooser shown the first time a borrower opens VOR — pick e-sign vs.
   download-and-print delivery. */
.vor-chooser-state { padding: 0.25rem 0; }
.vor-chooser-header { margin-bottom: 0.85rem; }
.vor-chooser-header h4 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.vor-chooser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .vor-chooser-grid { grid-template-columns: 1fr; }
}
.vor-chooser-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1rem 1.05rem;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  font-family: inherit;
  color: inherit;
}
.vor-chooser-card:hover,
.vor-chooser-card:focus-visible {
  border-color: var(--accent, #0f8b70);
  box-shadow: 0 4px 12px rgba(15, 139, 112, 0.12);
  transform: translateY(-1px);
  outline: none;
}
.vor-chooser-icon { font-size: 1.6rem; line-height: 1; }
.vor-chooser-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #10231d;
}
.vor-chooser-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #54665e;
}

/* PDF-delivery mode: actions sit above the preview iframe. */
.vor-pdf-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.65rem 0;
}

/* Manual-refresh toolbar above the signing iframe — gives the borrower
   a way to advance past Zoho's blank "thank you" screen if the webhook
   is slow or never fires (local dev / network blip). */
.vor-signing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.55rem;
  background: #fff7e0;
  border: 1px solid #f1d27a;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #6a4500;
}
.vor-signing-toolbar .ghost-btn {
  white-space: nowrap;
}

/* Structured editor tables (SLA, reason codes) */
.condition-settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.condition-settings-table th,
.condition-settings-table td {
  padding: 0.45rem 0.5rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.condition-settings-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg);
  border-top: 0;
}
.condition-settings-table input[type="text"],
.condition-settings-table input[type="number"],
.condition-settings-table select {
  width: 100%;
  padding: 0.3rem 0.45rem;
  font-size: 0.88rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
}
.condition-settings-table td:nth-child(2),
.condition-settings-table td:nth-child(3) {
  width: 130px;
}
.condition-settings-table td:last-child {
  width: 90px;
  text-align: right;
}

/* Canned response cards — one card per response with Label + Body + filters */
#condition-canned-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.condition-canned-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
}
.condition-canned-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}
.condition-canned-row > label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--muted);
  flex: 1 1 200px;
}
.condition-canned-row > label > input {
  margin-top: 0.2rem;
  padding: 0.32rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.9rem;
  color: var(--ink);
  font-family: inherit;
}
.condition-canned-remove {
  align-self: flex-end;
  color: #b42318;
}
.condition-canned-body-label {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.condition-canned-body-label > textarea {
  width: 100%;
  margin-top: 0.2rem;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
.condition-canned-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.55rem;
}
.condition-canned-multi > details {
  flex: 1 1 280px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  background: var(--panel);
}
.condition-canned-multi > details > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  list-style: revert;
}
.condition-canned-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.25rem 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
}
.condition-canned-checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Nav button count pill — used by Condition Review tab. */
.nav-badge {
  display: inline-block;
  margin-left: 0.4rem;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.nav-badge.hidden,
.nav-badge:empty { display: none; }

.resource-state-selector {
  margin-bottom: 1rem;
  max-width: 320px;
}

.state-guide {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 0.75rem;
}
.state-guide h4 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.guide-badge {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

.guide-steps {
  margin: 1rem 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.55rem;
}
.guide-steps li {
  font-size: 0.9rem;
  line-height: 1.55;
}
.guide-steps li a {
  color: var(--accent);
  font-weight: 600;
}

.guide-note {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--panel);
  border-left: 3px solid var(--accent);
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* Loan Application — in-browser signature pad */
.loan-app-sign-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: #ecf6f1;
  border: 1px solid #cfe7dc;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.loan-app-sign-bar .muted {
  font-size: 0.88rem;
}

.signature-pad-card {
  width: min(640px, 95vw);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.signature-pad-canvas-wrap {
  position: relative;
  width: 100%;
  border: 2px dashed #b9d2c8;
  border-radius: 10px;
  background: #fafdfc;
  height: 240px;
  overflow: hidden;
}
.signature-pad-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  display: block;
}
.signature-pad-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #94a8a0;
  pointer-events: none;
  font-style: italic;
}
.signature-pad-canvas-wrap.has-signature .signature-pad-placeholder {
  display: none;
}
.signature-pad-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.signature-pad-actions-right {
  display: flex;
  gap: 0.5rem;
}

/* Loan Application — required questions form below the iframe */
.loan-app-required-form {
  margin-top: 0.6rem;
  background: #f7faf9;
  border: 1px solid #d6e4df;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Fill the modal's available vertical space below the header so the
     borrower can see as many questions as fit before scrolling. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.loan-app-required-form h4 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
}
.loan-app-required-form .muted {
  margin: 0;
  font-size: 0.85rem;
}
.loan-app-fieldset {
  border: 1px solid #d6e4df;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.loan-app-fieldset legend {
  padding: 0 0.4rem;
  font-weight: 700;
  color: #1f5a4e;
  font-size: 0.92rem;
}
.loan-app-question {
  margin: 0.2rem 0 0.1rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.loan-app-fieldset label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  margin: 0;
}
.loan-app-fieldset label input[type="radio"],
.loan-app-fieldset label input[type="checkbox"] {
  accent-color: var(--accent);
  /* Override the global input { width: 100% } so radios/checkboxes don't
     stretch across the row and shove the text label to the far right. */
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.loan-app-fieldset label.loan-app-text-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.loan-app-fieldset label.loan-app-text-row input,
.loan-app-fieldset select,
.loan-app-fieldset input[type="text"],
.loan-app-fieldset input[type="date"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid #c7d7d1;
  border-radius: 8px;
  background: #fdfefc;
  font-size: 0.92rem;
}
.loan-app-conditional {
  margin-left: 1rem;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  background: #ecf6f1;
  border: 1px dashed #b7d6cb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.loan-app-conditional label {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.85rem;
}
/* Labels that wrap a radio / checkbox should stay row-flex so the control
   sits next to its text instead of stacked above it. */
.loan-app-conditional label:has(input[type="radio"]),
.loan-app-conditional label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
}

/* Loan Application — review banner (stage 2) */
.loan-app-review-banner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(120deg, #d8ece5, #f5ede4);
  border: 1px solid #b9d2c8;
  border-radius: 12px;
}
.loan-app-review-banner strong {
  font-size: 1rem;
  color: #1f5a4e;
}
.loan-app-review-banner .muted {
  margin: 0;
  font-size: 0.88rem;
}
.loan-app-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.loan-app-questions-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

/* Indented date-of-service follow-up inside the Section 7 conditional */
.loan-app-conditional-inline {
  margin-left: 1.5rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.loan-app-conditional-inline label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Loan App — Section 1a address-duration inputs */
.loan-app-duration-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.loan-app-duration-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.loan-app-three-col {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.5rem;
}
.loan-app-three-col label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.loan-app-fieldset .loan-app-conditional input[type="number"],
.loan-app-fieldset .loan-app-conditional input[type="text"],
.loan-app-fieldset .loan-app-conditional select {
  padding: 0.45rem 0.6rem;
  border: 1px solid #c7d7d1;
  border-radius: 8px;
  background: #fdfefc;
  font-size: 0.92rem;
  width: 100%;
}
.loan-app-fieldset input[type="number"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid #c7d7d1;
  border-radius: 8px;
  background: #fdfefc;
  font-size: 0.92rem;
  width: 100%;
}

/* Cursive script font used for the typed-signature preview + render. */
@font-face {
  font-family: "Sacramento";
  src: url("/fonts/Sacramento-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Signature pad — draw vs type mode tabs */
.signature-pad-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.2rem;
  background: #eef5f2;
  border: 1px solid #d7e5df;
  border-radius: 12px;
}
.signature-pad-mode-tab {
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  font-weight: 700;
  color: #2a4c44;
  cursor: pointer;
}
.signature-pad-mode-tab.is-active {
  background: linear-gradient(120deg, #d8ece5, #f5ede4);
  color: var(--accent-deep);
}
.signature-pad-mode-panel { display: block; }
.signature-pad-mode-panel.hidden { display: none; }
.signature-pad-type-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}
.signature-pad-type-label input {
  padding: 0.55rem 0.7rem;
  border: 1px solid #c7d7d1;
  border-radius: 10px;
  background: #fdfefc;
  font-size: 1rem;
}
.signature-pad-typed-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}
.signature-pad-typed-render {
  width: 100%;
  text-align: center;
  font-family: "Sacramento", "Brush Script MT", cursive;
  font-size: 56px;
  line-height: 1;
  color: #10231d;
  padding: 1rem 0.5rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.signature-pad-typed-render.is-empty {
  color: #94a8a0;
  font-style: italic;
  font-size: 1rem;
  font-family: inherit;
}

/* ── Permissions settings (superadmin-only) ────────────────────────── */
.permissions-page { padding: 1.1rem 1.2rem; }
/* Account-Management Permissions tab — two-side grid (Borrower vs
   Staff actions) inside the existing permissions-layout. */
.am-perm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
@media (max-width: 900px) {
  .am-perm-grid { grid-template-columns: 1fr; }
}
.am-perm-side { padding: 0.85rem 1rem; }
.am-perm-side-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.4rem; }
.am-perm-side-head h4 { margin: 0; }
.am-perm-list { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.15rem; }
/* Two-column grid keeps the toggle / label / "requires" hint vertically
   aligned across every row. Column 1 = checkbox + label (left-grown,
   single-line), column 2 = the muted "requires X" hint pinned right. */
.am-perm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}
.am-perm-row + .am-perm-row { border-top: 1px solid #eef2ee; }
.am-perm-row.is-disabled { opacity: 0.5; }
.am-perm-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}
/* Override the global `input { width: 100%; }` so the checkbox
   doesn't claim the full flex column and shove the label sideways. */
.am-perm-toggle input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
.am-perm-row.is-disabled .am-perm-toggle { cursor: not-allowed; }
.am-perm-label { font-size: 0.9rem; line-height: 1.25; }
.am-perm-parent { font-size: 0.72rem; white-space: nowrap; color: #6b7a73; }
.accounts-tabs { margin-bottom: 0.7rem; }
/* AM Permissions tab — Profile vs Role mode switcher. */
.am-perm-mode-bar {
  display: inline-flex;
  gap: 4px;
  margin: 0.4rem 0 0.8rem;
  padding: 4px;
  background: #eef2ee;
  border-radius: 8px;
}
.am-perm-mode-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.88rem;
  color: #2d4c42;
}
.am-perm-mode-btn.is-active { background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
/* Role-mode tri-state row: Inherit / Allow / Deny segmented control. */
.am-perm-tristate {
  display: inline-flex;
  gap: 2px;
  border-radius: 6px;
  background: #eef2ee;
  padding: 2px;
}
.am-perm-tri-btn {
  border: none;
  background: transparent;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  color: #4a5b55;
}
.am-perm-tri-btn.is-active { background: white; box-shadow: 0 1px 1px rgba(0,0,0,0.07); color: #1f5841; font-weight: 500; }
.am-perm-tri-btn[data-am-perm-tri="deny"].is-active { color: #b42318; }
.am-perm-tri-btn[data-am-perm-tri="allow"].is-active { color: #1f5841; }
.am-perm-master-block { margin: 0.4rem 0 0.6rem; }
.am-perm-master-block summary { cursor: pointer; font-size: 0.84rem; color: #4a5b55; font-weight: 500; padding: 0.15rem 0; }
.am-perm-section-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #4a5b55; margin: 0.5rem 0 0.25rem; }

/* ── Sharing module ───────────────────────────────────────────── */
.sharing-page { padding: 1.1rem 1.2rem; }
.sharing-org-default {
  border: 1px solid #d7e3de;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  background: #f6fbf8;
}
.sharing-org-default legend { padding: 0 0.4rem; font-weight: 500; color: #2d4c42; }
.sharing-org-radio { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.sharing-rules-editor { margin-top: 0.5rem; }
.sharing-rule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d7e3de;
  border-radius: 8px;
  background: #fafdfb;
  margin-bottom: 0.4rem;
}
.sharing-rule-row select { font-size: 0.85rem; padding: 0.3rem 0.45rem; }
/* Multi-select target popover — reuses the .contact-multipick widget
   so the trigger + chip + searchable popover match the rest of the
   app. Constrain trigger width so a single rule row stays compact
   while still showing selected chips inline. */
.sharing-rule-row .sharing-rule-multipick { min-width: 11rem; }
.sharing-rule-row .sharing-rule-multipick .contact-multipick-trigger {
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}
.sharing-rule-row .sharing-rule-multipick .contact-multipick-menu {
  min-width: 14rem;
}
/* Share dialog */
.share-dialog { width: min(560px, 96vw); padding: 1rem 1.2rem; }
.share-dialog-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  align-items: end;
  border: 1px solid #d7e3de;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  background: #f6fbf8;
  margin: 0.5rem 0;
}
.share-dialog-add label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: #4a5b55; }
.share-dialog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.share-dialog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e3eae6;
  border-radius: 6px;
  background: #fff;
}
.share-record-btn { color: #1f5841; }

/* Owner picklist — system field rendered on every record's detail
   header / list row. Visually different from the schema picklists so
   it reads as a system control. */
.record-owner-picklist {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #4a5b55;
  background: #f3f7f4;
  border: 1px solid #d7e3de;
  border-radius: 6px;
  padding: 2px 4px 2px 8px;
}
.record-owner-label {
  font-weight: 500;
  color: #2d4c42;
  letter-spacing: 0.01em;
}
.record-owner-select {
  font-size: 0.82rem;
  border: none;
  background: transparent;
  padding: 0.15rem 0.25rem;
  max-width: 180px;
}
.record-owner-select:disabled { color: #4a5b55; cursor: not-allowed; }
.record-owner-picklist.is-compact { padding: 1px 4px 1px 6px; font-size: 0.74rem; }
.record-owner-picklist.is-compact .record-owner-select { font-size: 0.76rem; max-width: 140px; }
.permissions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
  flex-wrap: wrap;
}
.permissions-header h3 { margin: 0; }
.permissions-header p { margin: 0.2rem 0 0; }
.permissions-header-actions { display: flex; align-items: center; gap: 0.5rem; }

.permissions-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: 1rem;
  margin-top: 0.6rem;
}
@media (max-width: 800px) {
  .permissions-layout { grid-template-columns: 1fr; }
}

.permissions-profile-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
  background: var(--bg);
  height: fit-content;
}
.permissions-profile-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.permissions-profile-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.permissions-profile-item.is-active {
  background: var(--panel);
  border-color: var(--accent, #2c8a6c);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.permissions-profile-name { font-weight: 600; font-size: 0.9rem; }
.permissions-profile-hint { font-size: 0.72rem; }

.permissions-editor {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--panel);
}
.permissions-editor.is-locked { opacity: 0.85; }
.permissions-section-title { margin: 0 0 0.6rem; font-size: 1.1rem; }
.permissions-section { margin-top: 0.6rem; }
.permissions-section h5 {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.permissions-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 110px 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.permissions-row:last-child { border-bottom: 0; }
.permissions-row-label strong { font-weight: 600; font-size: 0.92rem; }
.permissions-row-summary { font-size: 0.82rem; }

.permissions-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.permissions-toggle input { position: absolute; left: -9999px; }
.permissions-toggle-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d8e2de;
  position: relative;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}
.permissions-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 999px;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.permissions-toggle input:checked + .permissions-toggle-track {
  background: var(--accent, #2c8a6c);
}
.permissions-toggle input:checked + .permissions-toggle-track::after {
  transform: translateX(16px);
}
.permissions-toggle input:disabled + .permissions-toggle-track {
  opacity: 0.55;
  cursor: not-allowed;
}
.permissions-toggle-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 24px;
}

.permissions-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.permissions-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  font-size: 0.78rem;
  user-select: none;
}
.permissions-action-chip input {
  margin: 0;
  accent-color: var(--accent, #2c8a6c);
}
.permissions-action-chip:has(input:checked) {
  background: var(--accent, #2c8a6c);
  border-color: var(--accent, #2c8a6c);
  color: #fff;
}
.permissions-action-chip:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .permissions-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}