/**
 * C360 workbench + tasks — Journey v4 visual parity inside #content-container.
 * Reference: docs/C360_Cloud_Complete Initial Journey v4.html (s-home, s-tasks, team view).
 * My vs Team: body.c360-team-view + C360WorkbenchShell (same idea as Journey .tv-active).
 */

body.broker-c360-ui #content-container .c360-journey-page {
  background: var(--bg);
  min-height: min(100%, 480px);
}

/* Pager row: push page buttons right like Journey */
body.broker-c360-ui #content-container .tbl-pager {
  flex-wrap: wrap;
}

body.broker-c360-ui #content-container .tbl-pager .card-lnk {
  margin-left: 4px;
}

/* Neutralise Bootstrap card chrome where we use Journey card-h / card-b */
body.broker-c360-ui #content-container .c360-journey-page .card.c360-card {
  --bs-card-border-width: 0;
  --bs-card-bg: var(--surface);
  --bs-card-border-radius: var(--rad2);
  border-radius: var(--rad2);
  overflow: hidden;
}

body.broker-c360-ui #content-container .c360-wb-root .team-view-content {
  display: none;
}

body.broker-c360-ui.c360-team-view #content-container .c360-wb-root .my-view-content {
  display: none;
}

body.broker-c360-ui.c360-team-view #content-container .c360-wb-root .team-view-content {
  display: block;
  overflow-y: auto;
  padding: 18px 20px;
}

body.broker-c360-ui:not(.c360-team-view) #content-container .c360-wb-root .my-view-content {
  display: block;
}

body.broker-c360-ui:not(.c360-team-view) #content-container .c360-wb-root .team-view-content {
  display: none;
}

/* ── Task header count buttons (Journey home tasks card) ───────────── */
body.broker-c360-ui #content-container .c360-wb-count-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--fs);
  transition: border-color 0.15s, background 0.15s;
}

body.broker-c360-ui #content-container .c360-wb-count-btn--r {
  border-color: var(--rp);
  color: var(--r);
}

body.broker-c360-ui #content-container .c360-wb-count-btn--a {
  border-color: var(--ap);
  color: var(--a);
}

body.broker-c360-ui #content-container .c360-wb-count-btn:hover {
  background: var(--surface);
  box-shadow: var(--sh);
}

/* Home Tasks card — collapsed by default; header badges stay visible */
body.broker-c360-ui #content-container .c360-wb-tasks-card.is-collapsed .c360-wb-tasks-panel {
  display: none;
}

body.broker-c360-ui #content-container .c360-wb-tasks-card:not(.is-collapsed) .c360-wb-tasks-collapsed-bar {
  display: none;
}

body.broker-c360-ui #content-container .c360-wb-tasks-collapsed-bar {
  border-top: 1px solid var(--border);
}

body.broker-c360-ui #content-container .c360-wb-tasks-card--has-alerts.is-collapsed #c360-wb-tasks-collapsed-hint {
  color: var(--text);
  font-weight: 500;
}

body.broker-c360-ui #content-container .c360-wb-tasks-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--ch2);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

body.broker-c360-ui #content-container .c360-wb-tasks-toggle:hover {
  background: var(--surface);
  border-color: var(--ch3);
  color: var(--text);
}

body.broker-c360-ui #content-container .c360-wb-tasks-card:not(.is-collapsed) .c360-wb-tasks-toggle-icon {
  transform: rotate(180deg);
}

body.broker-c360-ui #content-container .c360-wb-tasks-toggle-icon {
  display: inline-block;
  font-size: 11px;
  transition: transform 0.15s ease;
}

body.broker-c360-ui #content-container .c360-wb-count-badge {
  background: var(--r);
  color: #fff;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10px;
  margin-left: 2px;
  min-width: 1.25rem;
  text-align: center;
}

body.broker-c360-ui #content-container .c360-wb-count-btn--a .c360-wb-count-badge {
  background: var(--a);
}

/* ── Task list rows ─────────────────────────────────────────────── */
body.broker-c360-ui #content-container .task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border2);
  transition: background 0.1s;
}

body.broker-c360-ui #content-container .task-item:hover {
  background: var(--tlt);
}

body.broker-c360-ui #content-container .task-item:last-child {
  border-bottom: none;
}

/* Task row actions — ⋯ dropdown (Client Details pattern) */
body.broker-c360-ui #content-container .c360-task-row-actions {
  flex-shrink: 0;
  margin-left: auto;
}

body.broker-c360-ui #content-container .c360-task-row-actions .btn-reveal {
  color: var(--ch2);
  padding: 2px 6px;
}

body.broker-c360-ui #content-container .c360-task-row-actions .btn-reveal:hover,
body.broker-c360-ui #content-container .c360-task-row-actions .btn-reveal:focus-visible {
  color: var(--t);
}

body.broker-c360-ui #content-container .c360-task-row-actions .dropdown-menu {
  font-size: 12px;
  min-width: 12rem;
}

body.broker-c360-ui #content-container .c360-task-row-actions .dropdown-item {
  font-size: 12px;
  font-weight: 600;
}

body.broker-c360-ui #content-container .c360-tasks-table tbody tr {
  cursor: pointer;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-ts-actions {
  white-space: nowrap;
  text-align: end;
  vertical-align: middle;
  padding-inline-end: 8px;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-ts-actions-h {
  text-align: end;
  width: 1%;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-task-row-actions {
  margin-left: 0;
  display: inline-flex;
  justify-content: flex-end;
}

body.broker-c360-ui #content-container .c360-wb-te-toolbar .c360-task-row-actions {
  margin-left: 0;
}

body.broker-c360-ui #content-container .task-cb {
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

body.broker-c360-ui #content-container .task-title {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch);
}

body.broker-c360-ui #content-container .task-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

body.broker-c360-ui #content-container .task-meta {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch3);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Subtasks (port item 15): count pill on a parent task row. */
.wb-subtask-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #475569;
  background: #eef2f7;
  border: 1px solid #dbe3ec;
}

/* WB-013: child task marker — opens parent on click */
.wb-parent-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  cursor: pointer;
}
.wb-parent-pill:hover {
  background: #dbeafe;
  color: #1e40af;
}

body.broker-c360-ui #content-container .ovd {
  color: var(--r);
  font-weight: 600;
}

body.broker-c360-ui #content-container .tdy {
  color: var(--a);
  font-weight: 600;
}

/* Priority tags — Journey ptag (urgent / high / medium / low) with colour dot */
body.broker-c360-ui .ptag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--fs);
  border: 1px solid transparent;
  text-transform: none;
  white-space: nowrap;
  line-height: 1.35;
}

body.broker-c360-ui .ptag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

body.broker-c360-ui .ptag.urgent {
  background: var(--rp);
  color: var(--r);
  border-color: rgba(220, 38, 38, 0.2);
}

body.broker-c360-ui .ptag.high {
  background: var(--ap);
  color: var(--a);
  border-color: rgba(217, 119, 6, 0.2);
}

body.broker-c360-ui .ptag.medium {
  background: var(--bp);
  color: var(--b);
  border-color: rgba(37, 99, 235, 0.2);
}

body.broker-c360-ui .ptag.low {
  background: var(--gp);
  color: var(--g);
  border-color: rgba(5, 150, 105, 0.2);
}

body.broker-c360-ui #content-container .cchip {
  font-size: 12.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-transform: none;
}

body.broker-c360-ui #content-container .cchip.compliance {
  background: #e0e7ff;
  color: #3730a3;
}

body.broker-c360-ui #content-container .cchip.sales {
  background: #d1fae5;
  color: #065f46;
}

body.broker-c360-ui #content-container .cchip.claims {
  background: var(--rlt);
  color: var(--r);
}

body.broker-c360-ui #content-container .c360-ts-workflow {
  display: inline-block;
  max-width: 160px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ch);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

body.broker-c360-ui #content-container .c360-ts-workflow-cell {
  max-width: 180px;
}

/* Status badges — table cells */
body.broker-c360-ui #content-container .sbadge {
  font-size: 12.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--fs);
  text-transform: none;
  letter-spacing: 0;
}

body.broker-c360-ui #content-container .sbadge.active {
  background: var(--g);
  color: #fff;
}

body.broker-c360-ui #content-container .sbadge.pending {
  background: var(--a);
  color: #fff;
}

body.broker-c360-ui #content-container .sbadge.prs {
  background: var(--rp);
  color: var(--r);
}

body.broker-c360-ui #content-container .sbadge.lapsed {
  background: var(--rp);
  color: var(--r);
}

body.broker-c360-ui #content-container .mono {
  font-family: var(--fm);
}

/* tbl-pager right cluster */
body.broker-c360-ui #content-container .c360-wb-pager-btns {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
body.broker-c360-ui #content-container .c360-wb-pager-btns .pg-btn[disabled],
body.broker-c360-ui #content-container .c360-wb-pager-btns .pg-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
body.broker-c360-ui #content-container .c360-wb-pager-btns .pg-btn--ellipsis {
  border: none;
  background: transparent;
  color: var(--ch3);
  cursor: default;
  pointer-events: none;
}
body.broker-c360-ui #content-container .c360-wb-pager-btns .pg-btn--ellipsis:hover {
  background: transparent;
  color: var(--ch3);
  border-color: transparent;
}

/* Policy holders (workbench): name link */
body.broker-c360-ui #content-container #c360-wb-policies-tbody a.c360-wb-ph-client-link {
  color: var(--t);
  text-decoration: underline;
  font-weight: 600;
}

body.broker-c360-ui #content-container #c360-wb-policies-tbody a.c360-wb-ph-client-link.client-name-link-loading {
  cursor: wait;
  opacity: 0.55;
  pointer-events: none;
}

body.broker-c360-ui #content-container #c360-wb-policies-tbody a.c360-wb-ph-client-link.client-name-link-loading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 1.5px solid var(--ch3);
  border-top-color: var(--t);
  border-radius: 50%;
  animation: c360-wb-ph-link-spin 0.8s linear infinite;
  vertical-align: -1px;
}

@keyframes c360-wb-ph-link-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Policy holders (workbench) — match global .c360-tasks-table scale (c360-shell); badges align with client search. */
body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-policy-holders-scroll {
  position: relative;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-recent-clients-table tbody tr {
  cursor: default;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-recent-clients-table tbody tr a {
  cursor: pointer;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-recent-clients-table tbody td {
  /* Match .broker-c360-ui .c360-tasks-table tbody td — do not bump font-size (inherit 12.5px from table). */
  padding: 12px 14px 12px 12px;
  font-weight: 400;
  color: var(--ch);
  vertical-align: middle;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-rc-col--name {
  min-width: 200px;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-rc-col--id {
  min-width: 120px;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-rc-col--email {
  min-width: 160px;
}

body.broker-c360-ui #content-container #c360-wb-policy-holders-card .c360-wb-rc-col--mobile {
  min-width: 110px;
}

/* ── Tasks full page: filter bar (Journey fbar + fsrch) ──────────── */
body.broker-c360-ui #content-container .c360-tasks-fbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--surface);
}

body.broker-c360-ui #content-container .c360-tasks-fsrch {
  flex: 1;
  position: relative;
  min-width: 200px;
  max-width: 420px;
}

body.broker-c360-ui #content-container .c360-tasks-fsrch svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--ch3);
  pointer-events: none;
}

body.broker-c360-ui #content-container .c360-tasks-fsrch input {
  width: 100%;
  padding: 7px 12px 7px 30px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ch);
  background: var(--bg);
}

body.broker-c360-ui #content-container .c360-tasks-fsrch input:focus {
  outline: none;
  border-color: var(--t);
  box-shadow: 0 0 0 3px var(--tp);
}

body.broker-c360-ui #content-container .c360-tasks-inline-btn {
  padding: 5px 12px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--fs);
  color: var(--ch);
  cursor: default;
  opacity: 0.75;
}

body.broker-c360-ui #content-container .c360-tasks-inline-btn.c360-tasks-inline-btn--active {
  cursor: pointer;
  opacity: 1;
}

body.broker-c360-ui #content-container .c360-tasks-inline-btn.c360-tasks-inline-btn--active:hover {
  border-color: var(--t);
  background: var(--tlt);
}

body.broker-c360-ui #content-container #c360-tasks-columns-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.broker-c360-ui #content-container #c360-tasks-columns-toggle svg {
  flex-shrink: 0;
}

body.broker-c360-ui #content-container .c360-tasks-columns-toggle-label {
  line-height: 1;
}

/* Filter-bar dropdowns (Intent / Priority / Assignee) — match the inline buttons */
body.broker-c360-ui #content-container .c360-tasks-inline-select {
  padding: 5px 26px 5px 10px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--fs);
  color: var(--ch);
  accent-color: var(--t, #5cbdb4);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ch3) 50%),
                    linear-gradient(135deg, var(--ch3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 180px;
  min-width: 110px;
}
body.broker-c360-ui #content-container .c360-tasks-inline-select:hover {
  border-color: var(--t);
}
body.broker-c360-ui #content-container .c360-tasks-inline-select:focus {
  outline: 0;
  border-color: var(--t);
}

/* Due-date range input — sized to match the inline selects/buttons */
body.broker-c360-ui #content-container .c360-tasks-inline-daterange {
  width: 200px;
  min-height: 30px;
  border-radius: 5px;
  border-width: 1.5px;
}
body.broker-c360-ui #content-container .c360-tasks-inline-daterange .bp-daterange-input {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--fs);
  color: var(--ch);
}

/* ── c360-tasks: data table (C360 columns, workbench row fields) ─ */
body.broker-c360-ui #content-container .c360-tasks-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.broker-c360-ui #content-container .c360-tasks-table tbody tr.c360-tasks-row-highlight {
  background: rgba(13, 110, 253, 0.1);
  outline: 1px solid rgba(13, 110, 253, 0.35);
  outline-offset: -1px;
}

body.broker-c360-ui #content-container .c360-tasks-table tbody tr:hover {
  background: var(--tlt);
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-th-sortable {
  cursor: pointer;
  user-select: none;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-th-sortable:hover {
  color: var(--ch);
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-th-sort-active {
  color: var(--t);
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-sort-arrow {
  font-size: 9px;
  margin-left: 3px;
  opacity: 0.85;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-tt-title {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch);
  line-height: 1.35;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-tt-meta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-tt-ref {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch3);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

body.broker-c360-ui #content-container .c360-tasks-table .c360-tt-guid {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.35;
  word-break: break-all;
}

body.broker-c360-ui #content-container .c360-tasks-table tbody td {
  font-size: 12.5px;
  font-weight: 400;
}

body.broker-c360-ui #content-container .c360-tasks-table thead th {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

body.broker-c360-ui #content-container .c360-tasks-table tbody tr:focus {
  outline: 2px solid var(--t);
  outline-offset: -2px;
}

body.broker-c360-ui #content-container .c360-tasks-table-scroll--compact .c360-tasks-table thead th,
body.broker-c360-ui #content-container .c360-tasks-table-scroll--compact .c360-tasks-table tbody td {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 11.5px;
}

body.broker-c360-ui #content-container .c360-tasks-table-scroll--compact .c360-tasks-table .c360-tt-title,
body.broker-c360-ui #content-container .c360-tasks-table-scroll--compact .c360-tasks-table .c360-tt-ref,
body.broker-c360-ui #content-container .c360-tasks-table-scroll--compact .c360-tasks-table .c360-tt-guid {
  font-size: 11.5px;
}

body.broker-c360-ui #content-container .c360-tasks-table-scroll--compact .c360-tasks-table .c360-tt-meta {
  margin-top: 2px;
  gap: 1px;
}

/* Customise table modal */
body.broker-c360-ui .c360-tasks-columns-dialog {
  max-width: 420px;
}

body.broker-c360-ui .c360-tasks-columns-modal .modal-header,
body.broker-c360-ui .c360-tasks-columns-modal .modal-body,
body.broker-c360-ui .c360-tasks-columns-modal .modal-footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

body.broker-c360-ui .c360-tasks-columns-intro strong {
  font-weight: 600;
}

body.broker-c360-ui .c360-tasks-columns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.broker-c360-ui .c360-tasks-columns-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

body.broker-c360-ui .c360-tasks-columns-row--draggable {
  cursor: grab;
}

body.broker-c360-ui .c360-tasks-columns-row--dragging {
  opacity: 0.55;
}

body.broker-c360-ui .c360-tasks-columns-row--drop-target {
  border-color: var(--t);
  box-shadow: 0 0 0 2px var(--tp);
}

body.broker-c360-ui .c360-tasks-columns-row--locked {
  background: var(--bg);
}

body.broker-c360-ui .c360-tasks-columns-drag {
  color: var(--ch3);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

body.broker-c360-ui .c360-tasks-columns-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ch);
  cursor: pointer;
}

body.broker-c360-ui .c360-tasks-columns-row--locked .c360-tasks-columns-check {
  cursor: default;
  opacity: 0.72;
}

body.broker-c360-ui .c360-tasks-columns-check input {
  margin: 0;
  flex-shrink: 0;
}

body.broker-c360-ui .c360-tasks-columns-density-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ch3);
  margin-bottom: 8px;
}

body.broker-c360-ui .c360-tasks-columns-density-options {
  display: flex;
  gap: 16px;
}

body.broker-c360-ui .c360-tasks-columns-density-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ch);
  cursor: pointer;
}

body.broker-c360-ui .c360-tasks-columns-density-opt input {
  margin: 0;
}

body.broker-c360-ui #content-container .c360-tasks-card-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

body.broker-c360-ui #content-container .c360-tasks-inline-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 5px;
  border: 1.5px solid var(--rp);
  background: transparent;
  color: var(--r);
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--fs);
}

body.broker-c360-ui #content-container .c360-tasks-inline-count--due {
  border-color: var(--ap);
  color: var(--a);
}

body.broker-c360-ui #content-container .c360-tasks-inline-count span {
  background: var(--r);
  color: #fff;
  padding: 0 4px;
  border-radius: 99px;
  font-size: 9.5px;
  margin-left: 2px;
}

body.broker-c360-ui #content-container .c360-tasks-inline-count--due span {
  background: var(--a);
}

/* ── Team view — Journey tv-* ─────────────────────────────────────── */
body.broker-c360-ui #content-container .tv-pipeline {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

body.broker-c360-ui #content-container .tv-pipe-card {
  flex: 1;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad2);
  padding: 14px 16px;
  box-shadow: var(--sh);
  text-align: center;
}

body.broker-c360-ui #content-container .tv-pipe-val {
  font-family: var(--fs);
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
}

body.broker-c360-ui #content-container .tv-pipe-lbl {
  font-size: 11px;
  color: var(--ch2);
  font-family: var(--fs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}

body.broker-c360-ui #content-container .tv-pipe-sub {
  font-size: 11px;
  color: var(--ch3);
  margin-top: 2px;
}

body.broker-c360-ui #content-container .tv-workload {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

body.broker-c360-ui #content-container .tv-member {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  flex: 1;
  min-width: 150px;
  cursor: default;
  transition: all 0.15s;
  box-shadow: var(--sh);
}

body.broker-c360-ui #content-container .tv-member-name {
  font-family: var(--fs);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

body.broker-c360-ui #content-container .tv-member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

body.broker-c360-ui #content-container .tv-member-stats {
  display: flex;
  gap: 8px;
}

body.broker-c360-ui #content-container .tv-member-stat {
  text-align: center;
  flex: 1;
}

body.broker-c360-ui #content-container .tv-member-stat-val {
  font-family: var(--fs);
  font-size: 16px;
  font-weight: 600;
}

body.broker-c360-ui #content-container .tv-member-stat-lbl {
  font-size: 10px;
  color: var(--ch3);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fs);
  font-weight: 600;
}

body.broker-c360-ui #content-container .tv-bar {
  height: 4px;
  border-radius: 99px;
  background: var(--bg);
  margin-top: 6px;
  overflow: hidden;
}

body.broker-c360-ui #content-container .tv-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s;
}

body.broker-c360-ui #content-container .tv-activity {
  max-height: 280px;
  overflow-y: auto;
}

body.broker-c360-ui #content-container .c360-wb-team-tasks {
  max-height: min(420px, 55vh);
  overflow-y: auto;
}

/* Team Tasks (team view): Journey-style row — chevron right; accordion = activity + Open task */
body.broker-c360-ui #content-container .c360-wb-team-task-summary.task-item {
  border-bottom: none;
  cursor: pointer;
}

body.broker-c360-ui #content-container .c360-wb-team-task-chevron-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ch2);
  opacity: 0.85;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s,
    opacity 0.12s;
}

body.broker-c360-ui #content-container .c360-wb-team-task-summary.task-item:hover .c360-wb-team-task-chevron-btn {
  opacity: 1;
  border-color: var(--t);
  color: var(--t);
}

body.broker-c360-ui #content-container .c360-wb-team-task-chevron-ico {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 11px;
  line-height: 1;
}

/* Task accordion expand — matches Journey v4 .task-exp + .te-toolbar / .te-tool */
body.broker-c360-ui #content-container .c360-wb-team-task-expand {
  border-top: 1px solid var(--border2);
  background: var(--bg);
  padding: 14px 16px 12px;
  box-sizing: border-box;
}

/* Journey v4: .te-toolbar + .te-tool (outline action buttons, not .ab-btn.pr) */
body.broker-c360-ui #content-container .c360-wb-te-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

body.broker-c360-ui #content-container .c360-wb-te-tool {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--ch);
  cursor: pointer;
  background: var(--surface);
  transition: all 0.15s;
  font-family: var(--fs, inherit);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

body.broker-c360-ui #content-container .c360-wb-te-tool:hover {
  border-color: var(--t);
  color: var(--t);
}

body.broker-c360-ui #content-container .c360-wb-te-tool svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

body.broker-c360-ui.dark-mode #content-container .c360-wb-te-tool,
html[data-bs-theme='dark'] body.broker-c360-ui #content-container .c360-wb-te-tool {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .c360-wb-te-tool:hover,
html[data-bs-theme='dark'] body.broker-c360-ui #content-container .c360-wb-te-tool:hover {
  border-color: var(--t);
  color: var(--t);
}

body.broker-c360-ui #content-container .c360-wb-team-act-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--border2);
}

body.broker-c360-ui #content-container .c360-wb-team-act-item .c360-wb-activity-title,
body.broker-c360-ui #content-container .c360-wb-team-act-item .c360-wb-activity-meta {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}

body.broker-c360-ui #content-container .c360-wb-team-act-item .c360-wb-activity-meta {
  color: var(--ch3);
}

body.broker-c360-ui #content-container .c360-wb-team-act-item:last-child {
  border-bottom: none;
}

body.broker-c360-ui #content-container .c360-wb-team-act-list {
  margin: 0;
}

body.broker-c360-ui #content-container .tv-act-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
}

body.broker-c360-ui #content-container .tv-act-item:last-child {
  border-bottom: none;
}

body.broker-c360-ui #content-container .tv-act-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

body.broker-c360-ui #content-container .tv-act-text {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch);
  flex: 1;
}

body.broker-c360-ui #content-container .tv-act-text strong {
  color: var(--navy);
  font-weight: 600;
}

body.broker-c360-ui #content-container .tv-act-time {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ch3);
  white-space: nowrap;
  flex-shrink: 0;
}

body.broker-c360-ui.dark-mode #content-container .tv-member {
  background: var(--surface);
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .tv-pipe-card {
  background: var(--surface);
  border-color: var(--border);
}

/* ═══ Create / Edit Task + Task Detail modals — Journey v4 (.clm-*) parity ═══
   Partials append to document.body (task_workflow_workbench.js). */

/*
 * Pin the modal shell to the viewport — scroll inside .modal-body only.
 * Without modal-dialog-scrollable + these rules, Bootstrap scrolls the outer
 * .modal overlay and modal-dialog-centered makes the sheet drift up/down.
 */
#wb-task-modal.modal {
  overflow: hidden;
}

#wb-task-modal .modal-dialog.modal-dialog-scrollable {
  max-height: calc(100dvh - 2rem);
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
}

#wb-task-modal .modal-dialog.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#wb-task-modal .modal-dialog.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#wb-task-modal .modal-dialog.modal-dialog-scrollable .modal-header,
#wb-task-modal .modal-dialog.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

#wb-task-detail-modal.modal {
  overflow: hidden;
}

#wb-task-detail-modal .modal-dialog.modal-dialog-scrollable {
  max-height: calc(100dvh - 2rem);
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
}

#wb-task-detail-modal .modal-dialog.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#wb-task-detail-modal .modal-dialog.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#wb-task-detail-modal .modal-dialog.modal-dialog-scrollable .modal-header,
#wb-task-detail-modal .modal-dialog.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

body.broker-c360-ui #wb-task-modal .modal-dialog {
  max-width: 820px;
}

body.broker-c360-ui #wb-task-detail-modal .modal-dialog {
  max-width: min(1140px, 98vw);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-sheet {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-head {
  background: var(--navy);
  padding: 18px 22px;
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(92, 189, 180, 0.2);
  border: 1.5px solid rgba(92, 189, 180, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-h2 {
  font-family: var(--fs);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-sub:not(:empty) {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px !important;
  font-family: var(--fb);
}

body.broker-c360-ui #wb-task-detail-modal .wbdet-modal-task-id-row {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px !important;
  font-family: var(--fb);
}

body.broker-c360-ui #wb-task-detail-modal .wbdet-modal-task-id-row .wb-task-form-label--header-task-id {
  color: rgba(255, 255, 255, 0.45);
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-modal-task-id-short {
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
}

/* Journey v4 .clm-close — task detail modal only (create task uses .btn-close-white + system shell) */
body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-close {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: transparent none !important;
  background-image: none !important;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  filter: none;
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0;
  line-height: 0;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-close::before {
  content: none !important;
  display: none !important;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-close::after {
  content: "\00d7";
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: inherit;
  display: block;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-close:hover {
  border-color: var(--r);
  color: var(--r);
  background: rgba(220, 38, 38, 0.1) !important;
  opacity: 1;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-body {
  padding: 22px;
  background: var(--surface);
}

/* Outlined “What to do” callout — create + edit task modals */
body.broker-c360-ui #wb-task-modal #wb-task-modal-create-hint.wb-task-form-cta,
body.broker-c360-ui #wb-task-detail-modal #wbdet-create-hint.wb-task-form-cta {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 12px 14px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

body.broker-c360-ui #wb-task-modal #wb-task-modal-create-hint .wb-task-form-cta-title,
body.broker-c360-ui #wb-task-detail-modal #wbdet-create-hint .wb-task-form-cta-title {
  color: var(--ch2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
}

body.broker-c360-ui #wb-task-modal #wb-task-modal-create-hint .wb-task-form-cta-steps,
body.broker-c360-ui #wb-task-detail-modal #wbdet-create-hint .wb-task-form-cta-steps {
  color: var(--ch2);
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-ro-box {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ch);
  box-sizing: border-box;
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-client-resolved {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  margin-top: 4px;
  padding: 14px 16px;
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-client-name {
  color: var(--ch);
  font-family: var(--fs);
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-client-resolved-sub {
  color: var(--ch3);
  font-family: var(--fb);
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-client-badge--c360 {
  background: var(--tp);
  color: var(--t2);
}

body.broker-c360-ui #wb-task-modal .c360-wb-task-section {
  margin-bottom: 20px;
}

body.broker-c360-ui #wb-task-modal .c360-wb-task-section:last-child {
  margin-bottom: 0;
}

body.broker-c360-ui #wb-task-modal .c360-wb-task-section-title {
  font-family: var(--fs);
  font-size: 11px;
  font-weight: 600;
  color: var(--ch3);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
}

body.broker-c360-ui #wb-task-modal .form-label,
body.broker-c360-ui #wb-task-detail-modal .form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ch3);
  font-family: var(--fs);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 4px;
}

/* standard field labels — task detail manager edit; create task uses policies_register_claim_modals_c360 */
body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-label {
  font-family: var(--fs);
  font-weight: 600;
  font-size: 12px;
  color: var(--ch2);
  letter-spacing: 0;
  text-transform: none;
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-hint,
body.broker-c360-ui #wb-task-modal .wb-task-form-task-form .wb-task-form-hint {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--ch3);
  line-height: 1.45;
}

body.broker-c360-ui #wb-task-modal .form-label .text-danger,
body.broker-c360-ui #wb-task-detail-modal .form-label .text-danger {
  color: var(--r) !important;
}

body.broker-c360-ui #wb-task-modal .form-control,
body.broker-c360-ui #wb-task-modal .form-select,
body.broker-c360-ui #wb-task-detail-modal .form-control,
body.broker-c360-ui #wb-task-detail-modal .form-select {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 11px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  color: var(--ch);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

body.broker-c360-ui #wb-task-modal .form-control:focus,
body.broker-c360-ui #wb-task-modal .form-select:focus,
body.broker-c360-ui #wb-task-detail-modal .form-control:focus,
body.broker-c360-ui #wb-task-detail-modal .form-select:focus {
  border-color: var(--t);
  box-shadow: 0 0 0 3px var(--tp);
  outline: none;
}

body.broker-c360-ui #wb-task-modal textarea.form-control,
body.broker-c360-ui #wb-task-detail-modal textarea.form-control {
  font-weight: 400;
  resize: vertical;
  min-height: 72px;
}

body.broker-c360-ui #wb-task-modal .input-group-text,
body.broker-c360-ui #wb-task-detail-modal .input-group-text {
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--ch2);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-footer {
  padding: 14px 22px;
  background: var(--bg);
  border-top: 1.5px solid var(--border) !important;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-footer-note {
  font-size: 11.5px;
  color: var(--ch3);
  font-family: var(--fs);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-footer-cancel {
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--fs);
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--ch);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-footer-cancel:hover {
  border-color: var(--ch2);
  color: var(--navy);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-footer-save {
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--fs);
  background: var(--t);
  color: #fff !important;
  border: 1.5px solid var(--t);
  box-shadow: 0 2px 8px var(--tp);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-footer-save:hover {
  background: var(--t2);
  border-color: var(--t2);
  color: #fff !important;
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-sheet,
body.broker-c360-ui.dark-mode #wb-task-detail-modal .c360-wb-task-modal-sheet {
  background: var(--surface);
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-modal-head,
body.broker-c360-ui.dark-mode #wb-task-detail-modal .c360-wb-task-modal-head {
  background: #0d1117;
  border-bottom: 1px solid var(--border);
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-modal .form-control,
html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-modal .form-select,
html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal .form-control,
html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal .form-select,
body.broker-c360-ui.dark-mode #wb-task-modal .form-control,
body.broker-c360-ui.dark-mode #wb-task-modal .form-select,
body.broker-c360-ui.dark-mode #wb-task-detail-modal .form-control,
body.broker-c360-ui.dark-mode #wb-task-detail-modal .form-select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-modal #wb-task-modal-create-hint.wb-task-form-cta,
body.broker-c360-ui.dark-mode #wb-task-modal #wb-task-modal-create-hint.wb-task-form-cta,
html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal #wbdet-create-hint.wb-task-form-cta,
body.broker-c360-ui.dark-mode #wb-task-detail-modal #wbdet-create-hint.wb-task-form-cta {
  background: var(--surface);
  border-color: var(--border);
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-ro-box,
body.broker-c360-ui.dark-mode #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-ro-box {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-client-resolved,
body.broker-c360-ui.dark-mode #wb-task-detail-modal #wbdet-manager-edit .wb-task-form-client-resolved {
  background: var(--surface);
  border-color: var(--border);
}

html[data-bs-theme='dark'] body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-footer-cancel,
body.broker-c360-ui.dark-mode #wb-task-detail-modal .c360-wb-task-footer-cancel {
  background: var(--surface);
}

/* Task detail: header subtitle carries title — hide duplicate h4 in read-only summary */
body.broker-c360-ui #wb-task-detail-modal #wbdet-readonly-summary #wbdet-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-detail-section-h {
  font-family: var(--fs);
  font-size: 11px;
  font-weight: 600;
  color: var(--ch3);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-detail-activity-card {
  border-radius: var(--rad2, 12px);
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: var(--sh, 0 1px 3px rgba(0, 0, 0, 0.08));
  background: var(--surface);
}

body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-detail-activity-head {
  background: var(--bg) !important;
  border-bottom: 1.5px solid var(--border);
}

/* Activity log: fixed-height scroll region (card-body scrolls; avoids stretched column / ul quirks) */
body.broker-c360-ui #wb-task-detail-modal .c360-wb-task-detail-activity-body {
  max-height: min(500px, 150vh);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-activity-list li.border-bottom {
  border-color: var(--border2) !important;
}

/* Activity log: same type size/weight as task grids */
body.broker-c360-ui #wb-task-detail-modal #wbdet-activity-list li .c360-wb-activity-title,
body.broker-c360-ui #wb-task-detail-modal #wbdet-activity-list li .c360-wb-activity-meta {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}

body.broker-c360-ui #wb-task-detail-modal #wbdet-activity-list li .c360-wb-activity-meta {
  color: var(--ch3);
}