/* Board styling added for the September 2026 go-live changes. Kept separate from
   site.css (a build output that other tooling rewrites) so it cannot be clobbered.
   Loaded after site.css from Shared/Sections/_Styles.cshtml. */

/* ---- Leads board: hours allocated / on site columns ---------------------- */
.crm-lead-board .lead-hours-cell {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .crm-lead-board.lead-mobile-list .lead-hours-cell {
    display: none;
  }
  .crm-lead-board.lead-mobile-list tr.lead-mobile-expanded .lead-hours-cell {
    display: block;
  }
}

/* ---- On Site column: opens the job timer quick editor -------------------- */
.lead-visits-btn {
  background: none;
  border: 0;
  padding: 0.125rem 0.25rem;
  margin: -0.125rem -0.25rem;
  border-radius: 0.375rem;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.lead-visits-btn:hover,
.lead-visits-btn:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.08);
  outline: none;
}
/* A visit: one line (who, team, day, start - end, time, edit / remove). */
.board-visits-heading {
  margin-bottom: 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.board-visits-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.board-visits-row:last-child {
  border-bottom: 0;
}
.board-visits-what {
  flex: 1 1 auto;
  min-width: 0;
}
.board-visits-when {
  color: var(--bs-heading-color);
  font-size: 0.875rem;
  font-weight: 500;
}
.board-visits-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  font-size: 0.75rem;
}
.board-visits-sub:empty {
  display: none;
}
.board-visits-team-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--bs-secondary-color);
}
.board-visits-team-name::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--team-color, var(--bs-secondary));
}
.board-visits-hours {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Editing a visit (or adding one): its times open up under it. */
.board-visits-row.is-editing {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin: 0.5rem 0;
  padding: 0.75rem;
  border: 1px solid var(--bs-primary);
  border-radius: 0.5rem;
}
.board-visits-edit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.board-visits-edit-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
}
/* Total time and each team's (or person's) share, like Monday's time tracking summary. */
.board-visits-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.board-visits-summary-total {
  font-size: 0.9375rem;
}
.board-visits-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--share-color, var(--bs-secondary));
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}
.board-visits-share-time {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.3rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Job Status with two or more teams: a bar of each team's status, like Monday's summary. */
.lead-team-status-bar {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 6.5rem;
  min-height: 2rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.3rem;
  background: var(--bs-secondary-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.lead-team-status-bar:hover,
.lead-team-status-bar:focus-visible,
.lead-team-status-bar[aria-expanded=true] {
  filter: brightness(0.96);
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--bs-secondary) 28%, transparent);
  outline: 0;
}
/* On the board, the same size as the other status cells (Lead Status). */
.crm-lead-board .lead-team-status-bar {
  min-height: 1.55rem;
}
.crm-lead-board .lead-team-status-label {
  padding: 0.1rem 0.55rem 0.1rem 0.7rem;
  font-size: 0.7rem;
  line-height: 1.1;
}
.lead-team-status-part {
  flex: 1 1 0;
  min-width: 0.5rem;
}
.lead-team-status-part + .lead-team-status-part {
  border-left: 2px solid var(--bs-body-bg);
}
.lead-team-status-label {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}
/* Teams in different statuses: just the arrow over the bar's parts. */
.lead-team-status-label.is-mixed {
  justify-content: flex-end;
}
.lead-team-status-label.is-mixed .ti {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
/* The menu under the bar: one Monday-style status cell per team. */
.lead-team-status-menu {
  width: 19rem;
  max-width: calc(100vw - 1rem);
  padding: 0.5rem;
  border-radius: 0.55rem;
}
.lead-team-status-heading {
  padding: 0.15rem 0.4rem 0.45rem;
  color: var(--bs-secondary-color);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lead-team-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.4rem;
}
.lead-team-status-row:hover {
  background: var(--bs-tertiary-bg);
}
.lead-team-status-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--bs-heading-color);
  font-size: 0.8125rem;
  font-weight: 600;
}
.lead-team-status-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in sRGB, var(--team-colour) 22%, transparent);
  color: var(--team-colour);
  box-shadow: inset 0 0 0 1.5px var(--team-colour);
  font-size: 0.7rem;
  font-weight: 700;
}
.lead-team-status-row .monday-status-trigger {
  min-width: 0;
  min-height: 1.85rem;
}
.lead-team-status-pill {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--team-colour);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.lead-team-status-note {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.4rem 0.15rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: normal;
}
.lead-team-status-note .ti {
  margin-top: 0.1rem;
}
.board-visits-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
}
.board-visits-row .board-visits-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}
@media (max-width: 575.98px) {
  .board-visits-edit-times {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Actions column pinned to the right edge, like Client on the left ------- */
/* !important for the same reasons as the pinned Client column (site.css). */
.crm-lead-board:not(.lead-mobile-list) thead > tr > th:last-child,
.crm-lead-board:not(.lead-mobile-list) tbody > tr > td.lead-action-cell {
  position: sticky !important;
  inset-inline-end: 0;
  z-index: 2;
  background-color: var(--bs-paper-bg) !important;
  background-clip: padding-box;
}
.crm-lead-board:not(.lead-mobile-list) thead > tr > th:last-child {
  z-index: 3;
}
/* Just wide enough for the ⋮ button under the "Actions" heading (the theme's
   13rem is for a row of buttons). */
.crm-lead-board:not(.lead-mobile-list) thead > tr > th:last-child,
.crm-lead-board:not(.lead-mobile-list) tbody > tr > td.lead-action-cell {
  width: 1%;
  min-width: 0;
  padding-inline: 0.75rem;
  white-space: nowrap;
  text-align: center !important;
}
.crm-lead-board:not(.lead-mobile-list) tbody > tr > td.lead-action-cell .dropdown {
  display: inline-block;
}
.crm-lead-board:not(.lead-mobile-list) tbody > tr:hover > td.lead-action-cell {
  background-color: color-mix(in srgb, var(--bs-paper-bg) 92%, var(--bs-body-color)) !important;
}
/* Shadow on its left edge while columns are still hidden behind it. */
.crm-lead-board-wrap.has-more-right .crm-lead-board:not(.lead-mobile-list) thead > tr > th:last-child,
.crm-lead-board-wrap.has-more-right .crm-lead-board:not(.lead-mobile-list) tbody > tr > td.lead-action-cell {
  box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.35);
}
/* The right-edge fade would sit on top of the pinned column; the shadow replaces it. */
.crm-lead-board-wrap.has-more-right::after {
  opacity: 0;
}
/* With the fade gone, show a slim scrollbar so it's clear the board scrolls
   sideways (site.css hides it). Drag-to-pan still works. */
.crm-lead-board-wrap .table-responsive,
.crm-lead-board-wrap .dt-layout-full {
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--bs-body-color) 25%, transparent) transparent;
}
.crm-lead-board-wrap .table-responsive::-webkit-scrollbar,
.crm-lead-board-wrap .dt-layout-full::-webkit-scrollbar {
  display: block;
  height: 8px;
}
.crm-lead-board-wrap .table-responsive::-webkit-scrollbar-thumb,
.crm-lead-board-wrap .dt-layout-full::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-body-color) 25%, transparent);
}

/* ---- Resizable columns: drag the heading's right edge ----------------------- */
/* A resized Client column overrides site.css's fixed width. */
.crm-lead-board th:first-child[style*="max-width"],
.crm-lead-board td:first-child[style*="max-width"] {
  min-width: var(--lead-client-width);
  max-width: var(--lead-client-width);
}

/* ---- Client column: name + conversation bubble in one pinned cell ---------- */
.crm-lead-board th:first-child,
.crm-lead-board td:first-child {
  min-width: 12.5rem;
  max-width: 12.5rem;
}
.lead-client-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.lead-client-cell > .text-truncate {
  flex: 1 1 auto;
  min-width: 0;
}
.lead-client-cell > .btn-lead-thread {
  flex-shrink: 0;
}
/* The pinned-column shadow now belongs to Client (the bubble column is gone). */
.crm-lead-board-wrap.is-scrolled-x .crm-lead-board thead > tr > th:first-child,
.crm-lead-board-wrap.is-scrolled-x .crm-lead-board tbody > tr > td:first-child {
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.35);
}
.crm-lead-board td:first-child {
  border-inline-end: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
  .crm-lead-board.lead-mobile-list td:first-child {
    border-inline-end: 0;
  }
}
.crm-lead-board th.board-col-resizable {
  position: relative;
}
.board-col-resize {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -4px;
  width: 9px;
  cursor: col-resize;
  z-index: 4;
  user-select: none;
  touch-action: none;
}
.board-col-resize::after {
  content: "";
  position: absolute;
  inset-block: 25%;
  inset-inline-start: 4px;
  width: 1px;
  background: var(--bs-border-color);
  transition: background 0.15s ease, inset-block 0.15s ease;
}
.board-col-resize:hover::after,
.board-col-resizing .board-col-resize::after {
  inset-block: 10%;
  background: var(--bs-primary);
}
body.board-col-resizing,
body.board-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.crm-lead-board th.board-col-resizable .dt-column-title {
  padding-inline-end: 0.25rem;
}
/* Resized cells clip their text rather than stretching the column back out. */
.crm-lead-board td[style*="max-width"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Job Card column: completed job card PDF, opens the preview popup ----- */
.crm-lead-board th.lead-pdf-col,
.crm-lead-board td.lead-pdf-cell {
  width: 6.5rem;
  text-align: center;
  white-space: nowrap;
}
.lead-pdf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0.25rem;
  border-radius: 0.375rem;
  color: var(--lead-pdf-color, var(--bs-danger));
  cursor: pointer;
}
.lead-pdf-btn:hover,
.lead-pdf-btn:focus-visible {
  background: color-mix(in srgb, var(--lead-pdf-color, var(--bs-danger)) 12%, transparent);
  outline: none;
}
.lead-pdf-count {
  position: absolute;
  inset-block-start: -0.2rem;
  inset-inline-end: -0.45rem;
  min-width: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--lead-pdf-color, var(--bs-danger));
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.05rem;
}
.crm-lead-board.lead-mobile-list td.lead-pdf-cell {
  width: 100%;
}
.crm-lead-board.lead-mobile-list .lead-pdf-cell-empty {
  display: none;
}

/* Preview popup. The theme's modal header / footer have no padding towards the
   body (it expects a padded body), so the edge-to-edge PDF needs its own. */
.board-pdf-header {
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--bs-border-color);
}
.board-pdf-nav {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  padding-inline-end: 1rem;
  border-inline-end: 1px solid var(--bs-border-color);
}
.board-pdf-nav.d-none {
  display: none !important;
}
.board-pdf-nav #board-pdf-position {
  min-width: 3rem;
  text-align: center;
}
/* Id-scoped: the theme's `.modal .modal-footer` padding would otherwise win. */
#board-pdf-modal .board-pdf-footer {
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-block-start: 1px solid var(--bs-border-color);
}
.board-pdf-footer > * {
  margin: 0;
}
.board-pdf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.board-pdf-actions > .btn {
  margin: 0;
  padding-inline: 1.25rem;
}
.board-pdf-decision > .btn {
  min-width: 9rem;
}
/* Approve / reject dialogs opened over the preview. */
.board-pdf-dialog-actions {
  gap: 1rem;
}
.board-pdf-dialog-actions > .btn {
  margin: 0;
  min-width: 7rem;
}
.board-pdf-body {
  display: flex;
  flex-direction: column;
}
.board-pdf-stage {
  position: relative;
  height: min(78vh, 60rem);
  background: var(--bs-tertiary-bg);
}
.board-pdf-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.board-pdf-loading,
.board-pdf-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.board-pdf-loading {
  z-index: 1;
  background: var(--bs-tertiary-bg);
}
.board-pdf-loading.d-none,
.board-pdf-fallback.d-none {
  display: none !important;
}
@media (max-width: 767.98px) {
  .board-pdf-stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 60vh;
  }
  .board-pdf-actions {
    width: 100%;
  }
  .board-pdf-actions > .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .board-pdf-decision:not(:has(.btn:not(.d-none))) {
    display: none;
  }
  /* Full screen here: keep the theme's corner-hanging close button on screen. */
  #board-pdf-modal .modal-header .btn-close {
    transform: none;
  }
}

/* ---- Column filter menu (app-datatable-column-filters.js) ------------------ */
/* The funnel button is styled in site.scss; the popup it opens never was, so
   it rendered as unstyled text at the bottom of the page. */
.dt-column-filter-menu {
  position: fixed;
  z-index: 1080;
  width: 16rem;
  max-width: calc(100vw - 1rem);
  display: flex;
  flex-direction: column;
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--bs-body-color);
  cursor: default;
}
.dt-column-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem 0.4rem 0.9rem;
  font-size: 0.875rem;
}
.dt-column-filter-search {
  position: relative;
  padding: 0 0.75rem 0.5rem;
}
.dt-column-filter-search .icon-base {
  position: absolute;
  inset-inline-start: 1.35rem;
  top: 50%;
  transform: translateY(calc(-50% - 0.25rem));
  color: var(--bs-secondary-color);
  pointer-events: none;
}
.dt-column-filter-search .form-control {
  padding-inline-start: 2rem;
}
.dt-column-filter-selection {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-block: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}
.dt-column-filter-values {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.35rem 0.5rem;
}
.dt-column-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.4rem;
  border-radius: 0.375rem;
  cursor: pointer;
  min-width: 0;
}
.dt-column-filter-option:hover {
  background: rgba(var(--bs-primary-rgb), 0.08);
}
.dt-column-filter-option .form-check-input {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.dt-column-filter-option .form-check-label {
  min-width: 0;
  cursor: pointer;
}
.dt-column-filter-option[hidden] {
  display: none;
}
.dt-column-filter-empty {
  padding: 0.75rem 0.4rem;
  text-align: center;
}
.dt-column-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-block-start: 1px solid var(--bs-border-color);
}

/* ---- List view groups: no blank band between the rows and "Add Lead" ------ */
.lead-list-group-body .dt-container .dt-layout-row {
  margin: 0;
}

.lead-list-group-body .dt-container .dt-layout-row:not(.dt-layout-table):empty,
.lead-list-group-body .dt-container .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell:empty {
  display: none;
}

.lead-list-group-body .card-datatable,
.lead-list-group-body .crm-lead-board-wrap,
.lead-list-group-body .crm-lead-board-wrap .table-responsive,
.lead-list-group-body .dt-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.lead-list-group-body .crm-lead-board {
  margin-bottom: 0 !important;
}

.lead-list-group-body .crm-lead-board tbody > tr:last-child > td {
  border-bottom: 0;
}

/* ---- Job Cards page: Monday-style grouped list ---------------------------- */
.job-card-board .crm-lead-list-view {
  padding-block-start: 0.25rem;
}

table.job-card-table > :not(caption) > * > * {
  padding-block: 0.2rem;
  line-height: 1.25;
}

table.job-card-table thead th {
  padding-block: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.job-card-table {
  margin-bottom: 0 !important;
}

.lead-list-group-body > .table-responsive {
  margin-bottom: 0;
  padding-bottom: 0;
}

.job-card-table tbody > tr:last-child > td {
  border-bottom: 0;
}

.job-card-table .badge {
  padding: 0.28em 0.55em;
}

.job-card-table .btn-icon {
  inline-size: 1.6rem;
  block-size: 1.6rem;
}

.job-card-table .btn-icon .icon-base {
  font-size: 1.1rem;
}

.job-card-table .lead-timeline-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lead-group-color, var(--bs-secondary)) 14%, transparent);
  color: var(--bs-body-color);
  font-size: 0.7rem;
  white-space: nowrap;
}

.job-card-table .lead-empty-value {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

.job-card-table .job-card-empty-row td {
  padding-block: 0.6rem;
  background: color-mix(in srgb, var(--lead-group-color, var(--bs-secondary)) 4%, transparent);
}

@media (max-width: 767.98px) {
  .job-card-table thead {
    display: none;
  }
  .job-card-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    padding: 0.6rem 0.9rem;
    border-block-end: 1px solid var(--bs-border-color);
  }
  .job-card-table tbody td {
    display: block;
    padding: 0;
    border: 0;
  }
  .job-card-table tbody td.text-end {
    text-align: right;
  }
}

/* ---- Job card editor: visits span the full width under the timer tiles --- */
.job-card-basics-grid > .job-card-visits {
  grid-column: 1 / -1;
  min-width: 0;
}
.job-card-visits .job-card-visit-row:last-child {
  border-bottom: 0 !important;
}

/* ---- Board columns (app-board-columns.js) ---------------------------------- */
/* Monday-style headings: a menu on hover, drag to move, "+" to add a column. */
.crm-lead-board th.board-col-manageable {
  cursor: grab;
}
.crm-lead-board th.board-col-manageable.board-col-client {
  cursor: default;
}
.board-col-menu-btn,
.board-col-add-btn {
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-inline-start: 0.125rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--bs-secondary-color);
  vertical-align: middle;
  cursor: pointer;
}
.board-col-menu-btn {
  opacity: 0;
}
.crm-lead-board th:hover .board-col-menu-btn,
.board-col-menu-btn:focus-visible,
.board-col-menu-btn[aria-expanded="true"] {
  opacity: 1;
}
.board-col-menu-btn:hover,
.board-col-add-btn:hover,
.board-col-menu-btn:focus-visible,
.board-col-add-btn:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
  outline: 0;
}
.board-col-add-btn {
  margin-inline-end: 0.35rem;
  border: 1px dashed var(--bs-border-color);
}
.board-col-ghost {
  opacity: 0.4;
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
}
body.board-col-dragging,
body.board-col-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Popups: a heading's menu, the Columns panel, a cell's picker. */
.board-popup {
  position: fixed;
  z-index: 1085;
  max-width: calc(100vw - 1rem);
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bs-body-color);
}
.board-col-menu {
  width: 15rem;
  padding: 0.35rem;
}
.board-col-menu.board-rename {
  padding: 0.75rem;
}
.board-menu-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.5rem;
  font-weight: 600;
  color: var(--bs-heading-color);
  min-width: 0;
}
.board-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  text-align: start;
}
.board-menu-item:hover,
.board-menu-item:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.08);
  outline: 0;
}
.board-menu-divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--bs-border-color);
}

.board-columns-panel {
  width: 21rem;
  display: flex;
  flex-direction: column;
  max-height: min(34rem, calc(100vh - 2rem));
}
.board-columns-panel-head {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.9rem 0.5rem;
}
.board-columns-list {
  list-style: none;
  margin: 0;
  padding: 0 0.4rem;
  overflow-y: auto;
}
.board-columns-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.375rem;
}
.board-columns-item:hover {
  background: rgba(var(--bs-primary-rgb), 0.06);
}
.board-columns-item .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}
.board-columns-item.is-hidden .board-columns-name {
  color: var(--bs-secondary-color);
}
.board-columns-grip {
  display: inline-flex;
  color: var(--bs-secondary-color);
  cursor: grab;
}
.board-columns-item.is-fixed .board-columns-grip {
  cursor: default;
}
.board-columns-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.15rem 0.25rem;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  color: inherit;
  text-align: start;
}
.board-columns-name:hover {
  background: rgba(var(--bs-primary-rgb), 0.08);
}
.board-columns-icon {
  display: inline-flex;
  padding: 0.2rem;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  color: var(--bs-secondary-color);
}
.board-columns-icon:hover {
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
}
.board-columns-panel-foot {
  padding: 0.6rem 0.75rem 0.75rem;
  border-top: 1px solid var(--bs-border-color);
  margin-top: 0.35rem;
}

/* Add a column: what kind. */
.board-column-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}
.board-column-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-paper-bg);
  color: var(--bs-body-color);
  text-align: start;
}
.board-column-type .icon-base {
  color: var(--bs-primary);
  margin-bottom: 0.2rem;
}
.board-column-type small {
  color: var(--bs-secondary-color);
  line-height: 1.3;
}
.board-column-type:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.5);
}
.board-column-type.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.06);
}

/* Add a column → Existing field: the columns the board has but doesn't show. */
.board-existing-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 2px;
}
.board-existing-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-paper-bg);
  color: var(--bs-body-color);
  text-align: start;
}
.board-existing-field .icon-base {
  color: var(--bs-primary);
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.board-existing-field strong,
.board-existing-field small {
  display: block;
}
.board-existing-field small {
  color: var(--bs-secondary-color);
  line-height: 1.3;
}
.board-existing-field:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.5);
}
.board-existing-field.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.06);
}

/* Labels: name and colour, dragged into order. */
.board-labels-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.board-label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.board-label-grip {
  display: inline-flex;
  color: var(--bs-secondary-color);
  cursor: grab;
}
.board-label-swatch {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--swatch, #c4c4c4);
  flex: 0 0 auto;
}
.board-label-palette {
  width: 11.5rem;
  padding: 0.5rem;
}
.board-label-palette.show {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
}
.board-label-colour {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 0.3rem;
  background: var(--swatch);
}
.board-label-colour:hover {
  outline: 2px solid var(--bs-body-color);
  outline-offset: 1px;
}

/* A Dropdown or People cell's picker. */
.board-cell-picker {
  width: 16rem;
  padding: 0.6rem;
}
.board-cell-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 15rem;
  overflow-y: auto;
}
.board-cell-picker-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem;
  border-radius: 0.3rem;
  cursor: pointer;
  min-width: 0;
}
.board-cell-picker-option:hover {
  background: rgba(var(--bs-primary-rgb), 0.06);
}
.board-cell-picker-option .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}
.board-cell-picker-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--swatch);
  flex: 0 0 auto;
}

/* The added columns' cells. */
.crm-lead-board td.lead-custom-cell.is-saving {
  opacity: 0.6;
}
.lead-custom-inline {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  margin: -0.3rem -0.5rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  cursor: text;
  white-space: nowrap;
}
.lead-custom-inline:hover,
.lead-custom-inline:focus-visible {
  border-color: var(--bs-border-color);
  background-color: var(--bs-paper-bg);
  outline: none;
}
.lead-custom-inline.is-editing {
  overflow: visible;
  border-color: transparent;
  background: none;
}
.lead-custom-number .lead-custom-inline,
.lead-custom-number .lead-custom-text {
  text-align: end;
}
.lead-custom-editor {
  min-width: 9rem;
}
.lead-custom-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-height: 1.9rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background: none;
  overflow: hidden;
  color: inherit;
  text-align: start;
}
button.lead-custom-chips:hover,
button.lead-custom-chips:focus-visible {
  border-color: var(--bs-border-color);
  background-color: var(--bs-paper-bg);
  outline: none;
}
.lead-custom-chip,
.lead-custom-pill {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.55rem;
  border-radius: 0.25rem;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.lead-custom-person {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  min-width: 0;
  font-size: 0.8125rem;
}
.lead-custom-avatar {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.16);
  color: var(--bs-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  flex: 0 0 auto;
}
.lead-custom-empty {
  display: inline-flex;
  color: var(--bs-secondary-color);
  opacity: 0;
}
button.lead-custom-chips:hover .lead-custom-empty,
button.lead-custom-chips:focus-visible .lead-custom-empty {
  opacity: 1;
}
.lead-custom-checkbox {
  text-align: center;
}
.lead-custom-check {
  margin: 0;
  cursor: pointer;
}

/* ---- The board's toolbar, Monday-style (app-board-groups.js) ------------- */
.crm-leads-card > .board-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.board-header-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.board-views-button {
  max-width: 16rem;
  font-weight: 500;
}
.board-views-changed {
  margin-left: 0.25rem;
  color: var(--bs-warning);
  font-size: 1.1rem;
  line-height: 1;
}
.board-views-menu {
  min-width: 16rem;
  max-width: 22rem;
}
.board-views-item {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.35rem;
}
.board-views-item .dropdown-item {
  flex: 1;
  min-width: 0;
}
.board-views-item.is-current .dropdown-item {
  font-weight: 500;
}
.board-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.board-new .btn {
  white-space: nowrap;
}
.board-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0.25rem 0 0;
}
.board-search > .icon-base {
  position: absolute;
  left: 0.6rem;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
.board-search .form-control {
  width: 12rem;
  padding-left: 2rem;
}
.board-tool {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  white-space: nowrap;
}
.board-tool:hover,
.board-tool:focus-visible,
.board-tool[aria-expanded="true"] {
  background: var(--bs-gray-50, rgba(128, 128, 128, 0.1));
  color: var(--bs-heading-color);
}
.board-tool.is-on {
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  color: var(--bs-primary);
}
.board-tool-count {
  min-width: 1.15rem;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border-radius: 1rem;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.15rem;
  text-align: center;
}
.board-view-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}
.board-view-note .btn-link {
  font-size: inherit;
  vertical-align: baseline;
}
.board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  border-radius: 0.5rem;
  background: var(--bs-card-bg, var(--bs-paper-bg));
  color: var(--bs-secondary-color);
}
/* Searching: groups with nothing that matches step aside. */
.lead-list-group.board-search-miss {
  display: none;
}

/* The toolbar's panels (Filter, Sort, Hide, Group by): popups like the column menus. */
.board-tool-panel {
  width: min(34rem, calc(100vw - 1rem));
  padding: 0.75rem;
}
.board-sort-panel,
.board-hide-panel,
.board-group-panel {
  width: min(20rem, calc(100vw - 1rem));
}
.board-tool-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.6rem;
}
.board-tool-body {
  max-height: min(28rem, calc(100vh - 8rem));
  overflow-y: auto;
}
.board-filter-panel .board-tool-body {
  overflow: visible;
  max-height: none;
}
.board-hide-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.board-hide-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.4rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.board-hide-item:hover {
  background: var(--bs-gray-50, rgba(128, 128, 128, 0.08));
}
.board-hide-item .form-check-input {
  flex-shrink: 0;
  margin: 0;
}
.board-chart-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--dot, #c4c4c4);
}

/* A group's heading: what one of the board's own groups shows, and its menu. */
.lead-list-group-heading .lead-grid-summary {
  max-width: 24rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}
.lead-list-group-kind {
  color: var(--lead-group-color, var(--bs-secondary-color));
}
.lead-group-menu {
  margin-left: auto;
}
.lead-list-group-heading .lead-group-menu > .btn {
  opacity: 0.55;
}
.lead-list-group-heading:hover .lead-group-menu > .btn,
.lead-group-menu > .btn[aria-expanded="true"] {
  opacity: 1;
}

/* ---- Column menus, Monday-style: sub-menus, the drag grip, collapsed columns ---- */
.board-menu-item.has-submenu,
.board-menu-item.is-checked {
  position: relative;
}
.board-menu-item .board-menu-more {
  margin-left: auto;
  color: var(--bs-secondary-color);
}
.board-menu-item.has-submenu.is-open {
  background: var(--bs-gray-50, rgba(128, 128, 128, 0.1));
}
.board-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.board-submenu {
  position: fixed;
  z-index: 1086;
  min-width: 13rem;
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
}
th.board-col-manageable {
  cursor: grab;
}
th.board-col .board-col-grip {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
th.board-col-manageable:hover .board-col-grip {
  opacity: 0.8;
}
body.board-col-dragging,
body.board-col-dragging * {
  cursor: grabbing !important;
}
/* Collapsed (your view): a narrow strip; click its heading to open it. */
th.board-col-collapsed {
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  overflow: hidden;
  cursor: pointer !important;
}
th.board-col-collapsed .dt-column-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
th.board-col-collapsed .dt-column-filter,
th.board-col-collapsed .board-col-resize,
th.board-col-collapsed .board-col-grip {
  display: none !important;
}
td.board-cell-collapsed {
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  overflow: hidden;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(128, 128, 128, 0.07) 6px 12px);
}
td.board-cell-collapsed > * {
  visibility: hidden;
}

/* ---- The group editor ("New group of leads") and the filter builder ----- */
.lead-grid-colours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.lead-grid-colour {
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px var(--bs-paper-bg);
}
.lead-grid-colour.active {
  border-color: var(--swatch);
}
.lead-grid-rules {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.lead-grid-rule {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(10rem, 2fr) auto;
  gap: 0.5rem;
  align-items: start;
}
.lead-grid-choice-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--dot);
}

@media (max-width: 767.98px) {
  .board-search .form-control {
    width: 9rem;
  }
  .lead-list-group-heading {
    flex-wrap: wrap;
  }
  .lead-list-group-heading .lead-grid-summary {
    display: none;
  }
  .lead-grid-rule {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .lead-grid-rule .lead-grid-rule-value {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}