/* ============================================================
   Pipeline Board — Kanban drag-drop & Workflow Builder
   Sortable.js + Drawflow.js integration styles
   ============================================================ */


/* ── Kanban Pipeline Board ───────────────────────────────── */
.pipeline-board {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-height: 400px;
    scrollbar-width: thin;
}

.pipeline-board::-webkit-scrollbar { height: 5px; }
.pipeline-board::-webkit-scrollbar-track { background: transparent; }
.pipeline-board::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }

.pipeline-stage-column {
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #f7f8fb;
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.pipeline-stage-column:hover {
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.pipeline-stage-header {
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    background: transparent;
    position: relative;
}

.pipeline-stage-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--stage-color, var(--bs-primary));
    border-radius: 2px;
    opacity: 0.5;
}

.pipeline-stage-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pipeline-stage-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--stage-color, var(--bs-primary));
    background: color-mix(in srgb, var(--stage-color, var(--bs-primary)) 12%, transparent);
    width: 26px;
    height: 26px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-stage-body {
    flex: 1;
    padding: 0.625rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Sortable ghost/drag states */
.pipeline-stage-body .sortable-ghost {
    opacity: 0.35;
    background: rgba(91,141,239,0.06);
    border-radius: 0.75rem;
}

.pipeline-stage-body .sortable-chosen {
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
    transform: rotate(1.5deg);
}

.pipeline-stage-body .sortable-drag {
    opacity: 0.9;
}

/* ── Empty state ────────────────────────────────────────── */
.pipeline-stage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    opacity: 0.45;
}

/* ── Pipeline Card (individual item in column) ─────────── */
.pipeline-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.875rem;
    border: 1px solid rgba(0,0,0,0.04);
    cursor: grab;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

.pipeline-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.pipeline-card:active { cursor: grabbing; }

.pipeline-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.pipeline-card-subtitle {
    font-size: 0.6875rem;
    color: var(--text-sub);
    margin-bottom: 0.5rem;
    opacity: 0.75;
}

.pipeline-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pipeline-card-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
}

.pipeline-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pipeline-card-amount {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-heading-color);
}

.pipeline-card-risk {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.0625rem 0.375rem;
    border-radius: 2rem;
}

/* ── Stage color presets (soft pastels) ──────────────────── */
.stage-color-blue    { --stage-color: #5b8def; }
.stage-color-cyan    { --stage-color: #4fc3d9; }
.stage-color-green   { --stage-color: #34c9a2; }
.stage-color-yellow  { --stage-color: #f0c146; }
.stage-color-orange  { --stage-color: #f2976b; }
.stage-color-red     { --stage-color: #e87f99; }
.stage-color-purple  { --stage-color: #9882d4; }
.stage-color-gray    { --stage-color: #97a4b2; }


/* ── Pipeline Summary Bar ────────────────────────────────── */
.pipeline-summary-bar {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.pipeline-summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.pipeline-summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pipeline-summary-label {
    color: var(--text-sub);
    font-weight: 500;
}

.pipeline-summary-value {
    font-weight: 700;
    color: var(--bs-heading-color);
}


/* ── Drawflow Workflow Builder ───────────────────────────── */
.workflow-builder-shell {
    height: 560px;
    min-height: 420px;
}

.workflow-builder-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 0.875rem;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.workflow-builder-container.drop-target {
    background-color: rgba(0, 201, 167, 0.03);
}

.workflow-builder-container.drop-target-active {
    background-color: rgba(0, 201, 167, 0.08);
    box-shadow: inset 0 0 0 2px rgba(0, 201, 167, 0.45);
}

.workflow-builder-container.is-connecting {
    cursor: crosshair;
}

.workflow-builder-container.is-connecting .drawflow-node .input {
    box-shadow: 0 0 0 6px rgba(0, 105, 166, 0.18), 0 0 0 12px rgba(0, 105, 166, 0.08) !important;
    transform: scale(1.15);
}

/* Drawflow overrides for our design system */
.workflow-builder-container .drawflow {
    width: 100%;
    height: 100%;
}

.workflow-builder-container .drawflow .drawflow-node {
    border-radius: 0.75rem;
    border: 1.5px solid rgba(0,0,0,0.08);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 0;
    min-width: 200px;
    transition: box-shadow 0.2s ease;
}

.workflow-builder-container .drawflow .drawflow-node:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.workflow-builder-container .drawflow .drawflow-node.selected {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,105,166,0.15) !important;
    background: #fff !important;
}

/* Override Drawflow default red selected state */
.workflow-builder-container .drawflow .drawflow-node.selected .workflow-node-header-trigger {
    background: rgba(0, 105, 166, 0.08) !important;
}

.workflow-builder-container .drawflow .drawflow-node.selected .workflow-node-header-action {
    background: rgba(0, 201, 167, 0.08) !important;
}

.workflow-builder-container .drawflow .drawflow-node.selected .workflow-node-header-delay,
.workflow-builder-container .drawflow .drawflow-node.selected .workflow-node-header-condition {
    background: rgba(255, 137, 86, 0.08) !important;
}

.workflow-node-header {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem 0.75rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workflow-node-header-trigger  { background: rgba(0,105,166,0.06); color: var(--bs-primary); }
.workflow-node-header-condition { background: rgba(255,137,86,0.08); color: var(--bs-warning); }
.workflow-node-header-action   { background: rgba(0,201,167,0.06); color: var(--bs-success); }
.workflow-node-header-delay    { background: rgba(113,134,157,0.06); color: var(--bs-secondary); }

.workflow-node-body {
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--bs-heading-color);
    line-height: 1.4;
}

.workflow-node-body .node-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.workflow-node-body .node-description {
    font-size: 0.6875rem;
    color: var(--text-sub);
}

/* Connection lines — soft teal */
.workflow-builder-container .drawflow .connection .main-path {
    stroke: var(--bs-success, #00c9a7) !important;
    stroke-width: 2.5 !important;
    opacity: 0.75;
    fill: none !important;
    transition: stroke-width 0.15s ease, opacity 0.15s ease;
}

.workflow-builder-container .drawflow .connection .main-path:hover {
    stroke-width: 3.5 !important;
    opacity: 1;
}

.workflow-builder-container .drawflow .connection .main-path.selected {
    stroke: var(--bs-primary, #0069A6) !important;
    stroke-width: 3.5 !important;
    opacity: 1;
}

/* Input/Output ports — larger, clearer, easier to grab */
.workflow-builder-container .drawflow .drawflow-node .input,
.workflow-builder-container .drawflow .drawflow-node .output {
    width: 16px !important;
    height: 16px !important;
    border: 2.5px solid var(--bs-primary, #0069A6) !important;
    background: #fff !important;
    border-radius: 50%;
    cursor: crosshair !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    z-index: 3;
}

.workflow-builder-container .drawflow .drawflow-node .input {
    left: -22px !important;
    top: 2px !important;
}

.workflow-builder-container .drawflow .drawflow-node .output {
    right: -8px !important;
    top: 2px !important;
    border-color: var(--bs-success, #00c9a7) !important;
}

.workflow-builder-container .drawflow .drawflow-node .input:hover {
    transform: scale(1.25);
    background: var(--bs-primary, #0069A6) !important;
    box-shadow: 0 0 0 6px rgba(0, 105, 166, 0.18);
}

.workflow-builder-container .drawflow .drawflow-node .output:hover {
    transform: scale(1.25);
    background: var(--bs-success, #00c9a7) !important;
    box-shadow: 0 0 0 6px rgba(0, 201, 167, 0.2);
}

/* Subtle pulse on output ports so users notice them as interactive */
@keyframes wfPortPulse {
    0%   { box-shadow: 0 0 0 0    rgba(0, 201, 167, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(0, 201, 167, 0); }
    100% { box-shadow: 0 0 0 0    rgba(0, 201, 167, 0); }
}

.workflow-builder-container .drawflow .drawflow-node .output {
    animation: wfPortPulse 2.4s ease-out infinite;
}

.workflow-builder-container .drawflow .drawflow-node .output:hover {
    animation: none;
}

/* Remove Drawflow default red/blue backgrounds */
.workflow-builder-container .drawflow .drawflow-delete {
    display: none !important;
}

/* Empty-state hint on the canvas */
.workflow-canvas-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    color: var(--text-sub);
    max-width: 360px;
    z-index: 1;
}

.workflow-canvas-hint i {
    font-size: 1.75rem;
    color: var(--bs-primary);
    opacity: 0.6;
}

.workflow-canvas-hint .hint-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-top: 0.5rem;
}

.workflow-canvas-hint .hint-sub {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    line-height: 1.5;
}

.workflow-canvas-hint .hint-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bs-primary);
    background: #fff;
    vertical-align: middle;
    margin: 0 2px;
}

.workflow-canvas-hint .hint-dot-out {
    border-color: var(--bs-success);
}


/* ── Workflow Sidebar (node palette) ─────────────────────── */
.workflow-palette.wf-palette {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #fdfefe 0%, #f7fafb 100%);
    border-right: 1px solid rgba(0, 105, 166, 0.08);
    overflow: hidden;
    position: relative;
}

/* ── Palette Header (sticky top) ───────────────────────── */
.wf-palette-head {
    padding: 0.875rem 0.875rem 0.625rem;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    z-index: 2;
}

.wf-palette-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.wf-palette-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 105, 166, 0.12), rgba(0, 201, 167, 0.12));
    color: var(--bs-primary, #0069A6);
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(0, 105, 166, 0.08);
}

.wf-palette-brand-text { flex: 1; line-height: 1.15; min-width: 0; }

.wf-palette-brand-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bs-heading-color, #1a2732);
    letter-spacing: -0.01em;
}

.wf-palette-brand-sub {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-sub, #6b7b87);
    margin-top: 1px;
}

.wf-palette-brand-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bs-primary, #0069A6);
    background: rgba(0, 105, 166, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

/* Search */
.wf-palette-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem;
}

.wf-palette-search-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--text-sub, #8a97a1);
    font-size: 0.8125rem;
    pointer-events: none;
}

.wf-palette-search-input {
    width: 100%;
    padding: 0.4375rem 1.875rem 0.4375rem 1.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #fafcfd;
    color: var(--bs-heading-color);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
}

.wf-palette-search-input::placeholder { color: #9aa7b1; }

.wf-palette-search-input:focus {
    border-color: rgba(0, 105, 166, 0.35);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 105, 166, 0.1);
}

.wf-palette-search-clear {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: 0;
    color: #aab6c0;
    padding: 2px;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    transition: color 0.15s;
}

.wf-palette-search-clear:hover { color: var(--bs-primary); }

/* Filter tab pills */
.wf-palette-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 3px;
    background: #f1f5f7;
    border-radius: 10px;
}

.wf-palette-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0.375rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-sub, #6b7b87);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    overflow: hidden;
}

.wf-palette-tab i { font-size: 0.6875rem; }
.wf-palette-tab span { text-overflow: ellipsis; overflow: hidden; }

.wf-palette-tab:hover {
    color: var(--bs-heading-color);
    background: rgba(255, 255, 255, 0.6);
}

.wf-palette-tab.is-active {
    background: #fff;
    color: var(--bs-primary, #0069A6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 105, 166, 0.08);
}

/* ── Scroll area ───────────────────────────────────────── */
.wf-palette-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.625rem 0.625rem 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 105, 166, 0.25) transparent;
}

.wf-palette-scroll::-webkit-scrollbar { width: 6px; }
.wf-palette-scroll::-webkit-scrollbar-track { background: transparent; }
.wf-palette-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 105, 166, 0.18);
    border-radius: 999px;
}
.wf-palette-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 105, 166, 0.35); }

/* ── Category group (collapsible) ──────────────────────── */
.wf-palette-group {
    margin-bottom: 0.5rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
    position: relative;
}

.wf-palette-group::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.wf-palette-group:hover { border-color: rgba(0, 105, 166, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }

.wf-palette-group.is-open { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }

.wf-palette-group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.18s;
    position: relative;
}

.wf-palette-group-head:hover { background: rgba(0, 105, 166, 0.03); }

.wf-palette-group-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    flex-shrink: 0;
    transition: transform 0.18s;
}

.wf-palette-group:hover .wf-palette-group-icon { transform: scale(1.05); }

.wf-palette-group-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.wf-palette-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-heading-color, #1a2732);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-palette-group-sub {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sub, #8a97a1);
    margin-top: 1px;
}

.wf-palette-group-count {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-sub, #6b7b87);
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.wf-palette-group-chev {
    color: #aab6c0;
    font-size: 0.75rem;
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.wf-palette-group.is-open .wf-palette-group-chev { transform: rotate(180deg); }

.wf-palette-group-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.24s ease;
}

.wf-palette-group.is-open .wf-palette-group-body { grid-template-rows: 1fr; }

.wf-palette-group-body > * {
    overflow: hidden;
    min-height: 0;
    padding: 0 0.375rem 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Accent colors per category */
.wf-palette-group[data-accent="primary"] .wf-palette-group-icon { background: rgba(0, 105, 166, 0.11); color: #0069A6; }
.wf-palette-group[data-accent="info"]    .wf-palette-group-icon { background: rgba(10, 165, 205, 0.12); color: #0aa5cd; }
.wf-palette-group[data-accent="warning"] .wf-palette-group-icon { background: rgba(255, 140, 60, 0.14); color: #e87a3a; }
.wf-palette-group[data-accent="amber"]   .wf-palette-group-icon { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.wf-palette-group[data-accent="success"] .wf-palette-group-icon { background: rgba(0, 201, 167, 0.14); color: #00a58a; }
.wf-palette-group[data-accent="teal"]    .wf-palette-group-icon { background: rgba(20, 184, 166, 0.13); color: #0d9488; }
.wf-palette-group[data-accent="purple"]  .wf-palette-group-icon { background: rgba(139, 92, 246, 0.13); color: #7c3aed; }
.wf-palette-group[data-accent="slate"]   .wf-palette-group-icon { background: rgba(100, 116, 139, 0.13); color: #475569; }

.wf-palette-group[data-accent="primary"].is-open { border-color: rgba(0, 105, 166, 0.18); }
.wf-palette-group[data-accent="info"].is-open    { border-color: rgba(10, 165, 205, 0.20); }
.wf-palette-group[data-accent="warning"].is-open { border-color: rgba(255, 140, 60, 0.22); }
.wf-palette-group[data-accent="amber"].is-open   { border-color: rgba(245, 158, 11, 0.22); }
.wf-palette-group[data-accent="success"].is-open { border-color: rgba(0, 201, 167, 0.22); }
.wf-palette-group[data-accent="teal"].is-open    { border-color: rgba(20, 184, 166, 0.22); }
.wf-palette-group[data-accent="purple"].is-open  { border-color: rgba(139, 92, 246, 0.22); }
.wf-palette-group[data-accent="slate"].is-open   { border-color: rgba(100, 116, 139, 0.20); }

/* Accent left-edge stripe when open (2027-style) */
.wf-palette-group.is-open[data-accent="primary"]::before { background: linear-gradient(180deg, #0069A6, #3AA0C6); }
.wf-palette-group.is-open[data-accent="info"]::before    { background: linear-gradient(180deg, #0aa5cd, #34d4f1); }
.wf-palette-group.is-open[data-accent="warning"]::before { background: linear-gradient(180deg, #e87a3a, #f5a962); }
.wf-palette-group.is-open[data-accent="amber"]::before   { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.wf-palette-group.is-open[data-accent="success"]::before { background: linear-gradient(180deg, #00a58a, #34d399); }
.wf-palette-group.is-open[data-accent="teal"]::before    { background: linear-gradient(180deg, #0d9488, #2dd4bf); }
.wf-palette-group.is-open[data-accent="purple"]::before  { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
.wf-palette-group.is-open[data-accent="slate"]::before   { background: linear-gradient(180deg, #475569, #94a3b8); }

/* ── Node pills ───────────────────────────────────────── */
.workflow-palette-node.wf-palette-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.5rem;
    border-radius: 8px;
    background: #fafcfd;
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: grab;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    transition: transform 0.15s ease, background 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
}

.workflow-palette-node.wf-palette-node:hover {
    background: #fff;
    border-color: rgba(0, 105, 166, 0.2);
    box-shadow: 0 2px 8px rgba(0, 105, 166, 0.08);
    transform: translateX(2px);
}

.workflow-palette-node.wf-palette-node:active { cursor: grabbing; }

.workflow-palette-node.wf-palette-node.dragging {
    opacity: 0.5;
    border-style: dashed;
    border-color: var(--bs-primary);
    background: var(--soft-primary-bg, rgba(0, 105, 166, 0.06));
}

.wf-palette-node-chip {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.workflow-palette-node.wf-palette-node:hover .wf-palette-node-chip { transform: scale(1.08); }

.wf-palette-node-label {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

.wf-palette-node-grip {
    color: #cfd6dc;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.workflow-palette-node.wf-palette-node:hover .wf-palette-node-grip { opacity: 1; color: var(--bs-primary); }

/* Node chip colors by kind */
.workflow-palette-node-trigger   .wf-palette-node-chip { background: rgba(0, 105, 166, 0.1);  color: #0069A6; }
.workflow-palette-node-condition .wf-palette-node-chip { background: rgba(245, 158, 11, 0.13); color: #b45309; }
.workflow-palette-node-action    .wf-palette-node-chip { background: rgba(0, 201, 167, 0.13); color: #00a58a; }
.workflow-palette-node-delay     .wf-palette-node-chip { background: rgba(100, 116, 139, 0.13); color: #475569; }

/* Back-compat: reset any old `node > i` treatment to avoid double-icons */
.workflow-palette-node.wf-palette-node > i:not([class*="wf-palette-node-"]) { display: none; }

/* ── Empty state ──────────────────────────────────────── */
.wf-palette-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-sub, #8a97a1);
}

.wf-palette-empty i {
    font-size: 1.5rem;
    opacity: 0.5;
    display: block;
    margin-bottom: 0.5rem;
}

.wf-palette-empty-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-heading-color);
}

.wf-palette-empty-sub {
    font-size: 0.6875rem;
    margin-top: 2px;
}

/* ── Footer hint ──────────────────────────────────────── */
.wf-palette-foot {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-sub, #6b7b87);
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.wf-palette-foot i { color: var(--bs-primary); font-size: 0.75rem; }

/* Responsive: narrow the palette on smaller screens */
@media (max-width: 1200px) {
    .workflow-palette.wf-palette { width: 232px; }
}

@media (max-width: 992px) {
    .workflow-palette.wf-palette { width: 210px; }
    .wf-palette-tab span { display: none; }
    .wf-palette-tab { padding: 0.4375rem 0.25rem; }
    .wf-palette-tab i { font-size: 0.8125rem; }
}


/* ── Pipeline Stage Flow Diagram (horizontal) ────────────── */
.stage-flow {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 0.75rem 0;
}

.stage-flow-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.stage-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1.125rem;
    background: color-mix(in srgb, var(--stage-color, var(--bs-primary)) 12%, #fff);
    color: var(--stage-color, var(--bs-primary));
    border-radius: 0.75rem;
    min-width: 110px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--stage-color, var(--bs-primary)) 18%, transparent);
}

.stage-flow-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--stage-color, var(--bs-primary)) 15%, transparent);
}

.stage-flow-node-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.stage-flow-node-count {
    font-size: 1.125rem;
    font-weight: 800;
}

.stage-flow-arrow {
    color: var(--text-sub);
    font-size: 1rem;
    padding: 0 0.25rem;
    opacity: 0.2;
}

.stage-flow-node.stage-entry {
    border-width: 2px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--stage-color, var(--bs-primary)) 35%, transparent);
}
.stage-flow-node.stage-exit  { opacity: 0.8; }
.stage-flow-node.stage-negative {
    background: color-mix(in srgb, var(--bs-danger) 12%, #fff);
    color: var(--bs-danger);
    border-color: color-mix(in srgb, var(--bs-danger) 18%, transparent);
}


/* ── Pipeline Stage Color Presets (soft pastel) ──────────── */
.pipeline-stage-column[style*="--stage-color"] .pipeline-stage-header::after {
    height: 2px;
}

/* ── Pipeline card improvements ──────────────────────────── */
.pipeline-card {
    border-left: 3px solid color-mix(in srgb, var(--stage-color, var(--bs-gray-300)) 50%, transparent);
}

.pipeline-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ── Pipeline description ────────────────────────────────── */
.pipeline-desc {
    font-size: 0.75rem;
    color: var(--text-sub);
    line-height: 1.4;
    margin-top: 0.25rem;
}


/* ════════════════════════════════════════════════════════════
   Clinic Onboarding Pipeline — multi-clinic list view
   Each card mirrors the per-clinic onboarding hub design from
   the detail page (.onboarding-hub) for a consistent feel.
   ════════════════════════════════════════════════════════════ */

.copl-toolbar,
.copl-list,
.copl-empty,
.copl-card {
    --copl-surface: #fff;
    --copl-surface-soft: #fafbfc;
    --copl-border: #eef0f3;
    --copl-border-strong: #e5e7eb;
    --copl-text: #0f172a;
    --copl-sub: #64748b;
    --copl-muted: #94a3b8;
    --copl-accent: #6366f1;
    --copl-accent-soft: #eef2ff;
    --copl-success: #10b981;
    --copl-success-soft: #ecfdf5;
    --copl-warn: #f59e0b;
    --copl-warn-soft: #fffbeb;
    --copl-danger: #ef4444;
    --copl-danger-soft: #fef2f2;
}

/* ── Toolbar ──
   Single-row, baseline-aligned control bar. All interactive elements share
   a 38px height so the bar reads as one unified piece of furniture. Logical
   groups (search · phase tabs · quick filters · view tools) are separated
   by spacing and a subtle divider before the tools cluster.
*/
.copl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .55rem;
    padding: .55rem .65rem;
    margin-bottom: 1rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px -26px rgba(15, 23, 42, .18);
}

.copl-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 320px;
}
.copl-toolbar-search > i {
    position: absolute;
    left: .9rem;
    color: var(--copl-muted);
    font-size: .85rem;
    pointer-events: none;
}
.copl-toolbar-search input {
    width: 100%;
    height: 38px;
    padding: 0 2.2rem 0 2.4rem;
    font-size: .8rem;
    border: 1px solid var(--copl-border-strong);
    border-radius: 10px;
    background: var(--copl-surface-soft);
    color: var(--copl-text);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    outline: none;
}
.copl-toolbar-search input::placeholder { color: var(--copl-muted); }
.copl-toolbar-search input:hover {
    border-color: rgba(15, 23, 42, .14);
    background: var(--copl-surface);
}
.copl-toolbar-search input:focus {
    border-color: rgba(99, 102, 241, .55);
    background: var(--copl-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
.copl-toolbar-clear {
    position: absolute;
    right: .6rem;
    color: var(--copl-muted);
    font-size: 1rem;
    line-height: 0;
    text-decoration: none;
    transition: color .15s ease;
}
.copl-toolbar-clear:hover { color: var(--copl-danger); }

.copl-phase-pills {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 38px;
    padding: 4px;
    background: var(--copl-surface-soft);
    border: 1px solid var(--copl-border);
    border-radius: 10px;
    flex-wrap: wrap;
}
.copl-phase-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 32px;
    padding: 0 .85rem;
    border-radius: 9px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--copl-sub);
    text-decoration: none;
    line-height: 1;
    background: transparent;
    transition: background .2s cubic-bezier(.4, 0, .2, 1),
                color .2s cubic-bezier(.4, 0, .2, 1),
                box-shadow .25s cubic-bezier(.4, 0, .2, 1),
                transform .2s cubic-bezier(.4, 0, .2, 1);
}
.copl-phase-pill i {
    font-size: .85rem;
    opacity: .65;
    transition: opacity .2s ease, color .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.copl-phase-pill:hover {
    color: var(--copl-text);
    background: rgba(15, 23, 42, .04);
}
.copl-phase-pill:hover i { opacity: .95; transform: scale(1.06); }
.copl-phase-pill.is-active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow:
        0 1px 2px rgba(99, 102, 241, .35),
        0 4px 12px -2px rgba(99, 102, 241, .42),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}
.copl-phase-pill.is-active i { opacity: 1; color: #fff; transform: scale(1.05); }
.copl-phase-pill-count {
    font-size: .63rem;
    font-weight: 700;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .07);
    color: var(--copl-sub);
    text-align: center;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease;
}
.copl-phase-pill.is-active .copl-phase-pill-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.copl-toolbar-flags {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.copl-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 36px;
    padding: 0 .95rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: -.005em;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid var(--copl-border-strong);
    color: var(--copl-sub);
    background: var(--copl-surface);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
    transition: background .2s cubic-bezier(.4, 0, .2, 1),
                color .2s cubic-bezier(.4, 0, .2, 1),
                border-color .2s cubic-bezier(.4, 0, .2, 1),
                box-shadow .25s cubic-bezier(.4, 0, .2, 1),
                transform .2s cubic-bezier(.4, 0, .2, 1);
}
.copl-flag i {
    font-size: .85rem;
    opacity: .85;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.copl-flag-count {
    background: rgba(15, 23, 42, .06);
    color: var(--copl-sub);
    font-size: .63rem;
    font-weight: 700;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    text-align: center;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.copl-flag:hover {
    color: var(--copl-text);
    background: var(--copl-surface-soft);
    border-color: rgba(15, 23, 42, .18);
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, .08), 0 1px 1px rgba(15, 23, 42, .04);
    transform: translateY(-1px);
}
.copl-flag:hover i { transform: scale(1.06); }

.copl-flag--warn { color: #b45309; border-color: rgba(245, 158, 11, .32); background: linear-gradient(180deg, #fff 0%, rgba(254, 243, 199, .35) 100%); }
.copl-flag--warn i { color: #f59e0b; opacity: 1; }
.copl-flag--warn:hover {
    background: linear-gradient(180deg, var(--copl-warn-soft) 0%, rgba(254, 215, 170, .45) 100%);
    color: #92400e;
    border-color: rgba(245, 158, 11, .55);
    box-shadow: 0 4px 12px -2px rgba(245, 158, 11, .25), 0 1px 2px rgba(245, 158, 11, .15);
}
.copl-flag--warn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: rgba(217, 119, 6, .8);
    box-shadow:
        0 1px 2px rgba(217, 119, 6, .35),
        0 4px 12px -2px rgba(245, 158, 11, .45),
        inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}
.copl-flag--warn.is-active i { color: #fff; }
.copl-flag--warn.is-active .copl-flag-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.copl-flag--ok { color: #047857; border-color: rgba(16, 185, 129, .32); background: linear-gradient(180deg, #fff 0%, rgba(209, 250, 229, .35) 100%); }
.copl-flag--ok i { color: #10b981; opacity: 1; }
.copl-flag--ok:hover {
    background: linear-gradient(180deg, var(--copl-success-soft) 0%, rgba(167, 243, 208, .45) 100%);
    color: #065f46;
    border-color: rgba(16, 185, 129, .55);
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, .25), 0 1px 2px rgba(16, 185, 129, .15);
}
.copl-flag--ok.is-active {
    color: #fff;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: rgba(5, 150, 105, .8);
    box-shadow:
        0 1px 2px rgba(5, 150, 105, .35),
        0 4px 12px -2px rgba(16, 185, 129, .45),
        inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}
.copl-flag--ok.is-active i { color: #fff; }
.copl-flag--ok.is-active .copl-flag-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Info variant — used by onboarding-category chips (Provisioning, Team,
   Listings, Activation). Same shape as warn/ok, indigo accent so the
   category surface reads as distinct from operational alerts. */
.copl-flag--info { color: #4338ca; border-color: rgba(99, 102, 241, .32); background: linear-gradient(180deg, #fff 0%, rgba(238, 242, 255, .55) 100%); }
.copl-flag--info i { color: #6366f1; opacity: 1; }
.copl-flag--info:hover {
    background: linear-gradient(180deg, var(--copl-accent-soft) 0%, rgba(199, 210, 254, .45) 100%);
    color: #3730a3;
    border-color: rgba(99, 102, 241, .55);
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, .28), 0 1px 2px rgba(99, 102, 241, .15);
}
.copl-flag--info.is-active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: rgba(124, 58, 237, .8);
    box-shadow:
        0 1px 2px rgba(99, 102, 241, .35),
        0 4px 12px -2px rgba(99, 102, 241, .42),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}
.copl-flag--info.is-active i { color: #fff; }
.copl-flag--info.is-active .copl-flag-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ── Unified directory toolbar (shared by comfortable + compact views) ──
   Single card-style container: search row + collapsible filter panel +
   chip strip. Renders identically in both view modes; only the layout-
   specific control (Group-by for cards, Columns for tables) changes. */
.cdir-toolbar {
    /* Design tokens — declared here so every cdir-toolbar-* descendant
       (buttons, dropdown menus, filter panel, chip strip) resolves
       `var(--copl-*)` to a real value. Without this scope the menu's
       background fell back to transparent and table-row content showed
       through the dropdown. Mirrors the .copl-toolbar block above. */
    --copl-surface: #fff;
    --copl-surface-soft: #fafbfc;
    --copl-border: #eef0f3;
    --copl-border-strong: #e5e7eb;
    --copl-text: #0f172a;
    --copl-sub: #64748b;
    --copl-muted: #94a3b8;
    --copl-accent: #6366f1;
    --copl-accent-soft: #eef2ff;
    --copl-success: #10b981;
    --copl-success-soft: #ecfdf5;
    --copl-warn: #f59e0b;
    --copl-warn-soft: #fffbeb;
    --copl-danger: #ef4444;
    --copl-danger-soft: #fef2f2;

    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cdir-toolbar-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.cdir-toolbar-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
    display: flex;
    align-items: center;
}
/* Compact variant — used by the clinic directory toolbar so the search box
   doesn't dominate the row when paired with the layout toggle. Caps growth
   so the actions cluster keeps a comfortable share of the toolbar width. */
.cdir-toolbar-search--compact {
    flex: 0 1 320px;
    max-width: 360px;
    min-width: 220px;
}
.cdir-toolbar-search > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--copl-muted);
    pointer-events: none;
    font-size: .9rem;
}
.cdir-toolbar-search input {
    width: 100%;
    height: 38px;
    padding: 0 2.4rem 0 2.4rem;
    border-radius: 10px;
    border: 1px solid var(--copl-border-strong);
    background: var(--copl-surface-soft);
    font-size: .85rem;
    color: var(--copl-text);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* When the search box hosts both a left mode-toggle group and a right
   submit button, reserve room on each side so text doesn't slide under them. */
.cdir-toolbar-search--ai input { padding-left: 8.5rem; padding-right: 3rem; }
/* AI search needs significantly more room than the regular compact search
   (placeholder is a full natural-language sentence). Let it grow to fill the
   row while still leaving the actions cluster room to breathe. */
.cdir-toolbar-search--compact.cdir-toolbar-search--ai {
    flex: 1 1 560px;
    max-width: none;
    min-width: 420px;
}
.cdir-toolbar-search input:focus {
    outline: none;
    background: var(--copl-surface);
    border-color: var(--copl-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.cdir-toolbar-search-clear {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--copl-muted);
    text-decoration: none;
    line-height: 1;
}
.cdir-toolbar-search-clear:hover { color: var(--copl-danger); }

/* ── AI search affordance ─────────────────────────────────────────────── */
/* Left-side mode toggle (Normal | AI). Segmented control sitting flush
   against the left edge of the search input. */
.cdir-toolbar-mode {
    position: absolute;
    left: .3rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: rgba(15, 23, 42, .05);
    border-radius: 8px;
    z-index: 1;
}
.cdir-toolbar-mode__btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 26px;
    padding: 0 .55rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--copl-sub);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.cdir-toolbar-mode__btn i { font-size: .8rem; }
.cdir-toolbar-mode__btn:hover { color: var(--copl-text); }
.cdir-toolbar-mode__btn.is-active {
    color: var(--copl-text);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cdir-toolbar-mode__btn[data-ai-mode="ai"].is-active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 2px 4px rgba(99, 102, 241, .25);
}
.cdir-toolbar-mode__label { letter-spacing: .02em; }

/* Right-side submit button — replaces implicit Enter-only behavior with a
   clear, clickable affordance. Inverts to gradient when AI mode is active so
   the user sees the same color signal across the strip. */
.cdir-toolbar-search-submit {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    color: var(--copl-sub);
    background: #fff;
    border: 1px solid var(--copl-border-strong);
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    z-index: 2;
}
.cdir-toolbar-search-submit:hover {
    color: var(--copl-accent);
    border-color: color-mix(in srgb, var(--copl-accent) 35%, var(--copl-border-strong));
    box-shadow: 0 1px 3px rgba(99, 102, 241, .12);
}
.cdir-toolbar-search-submit i { font-size: .9rem; }
.cdir-toolbar--ai-active .cdir-toolbar-search-submit {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(99, 102, 241, .25);
}

/* Pull the clear (x) icon left of the submit button so they don't overlap. */
.cdir-toolbar-search--ai .cdir-toolbar-search-clear { right: 2.6rem; }

.cdir-toolbar-ai-spinner {
    position: absolute;
    right: 2.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6366f1;
    display: inline-flex;
}
.cdir-toolbar-ai-spinner i {
    display: inline-block;
    animation: ai-spin .9s linear infinite;
}
@keyframes ai-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.cdir-toolbar--ai-active .cdir-toolbar-search input::placeholder {
    color: color-mix(in srgb, #6366f1 60%, var(--copl-sub, #94a3b8));
}
.cdir-toolbar--ai-active .cdir-toolbar-search-icon { color: #6366f1; }

/* ── AI preview-chip strip (above the toolbar) ──────────────────────── */
.ai-search-preview {
    margin-bottom: .85rem;
    padding: .9rem 1rem 1rem;
    background: linear-gradient(135deg,
                color-mix(in srgb, #6366f1 6%, #fff),
                color-mix(in srgb, #8b5cf6 4%, #fff));
    border: 1px solid color-mix(in srgb, #6366f1 18%, transparent);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .08);
}
.ai-search-preview__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .65rem;
}
.ai-search-preview__icon {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-radius: 9px;
    font-size: .85rem;
}
.ai-search-preview__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.ai-search-preview__eyebrow {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6366f1;
}
.ai-search-preview__query {
    font-size: .85rem;
    font-weight: 600;
    color: var(--copl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-search-preview__dismiss {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--copl-sub);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ai-search-preview__dismiss:hover {
    background: rgba(15, 23, 42, .05);
    color: var(--copl-text);
}
.ai-search-preview__body { margin-bottom: .75rem; }
.ai-search-preview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.ai-search-preview__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--copl-text);
    background: #fff;
    border: 1px solid color-mix(in srgb, #6366f1 22%, transparent);
    border-radius: 999px;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ai-search-preview__chip-group {
    font-size: .62rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ai-search-preview__chip-value { color: var(--copl-text); }
.ai-search-preview__empty {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    font-size: .75rem;
    color: var(--copl-sub);
    background: rgba(15, 23, 42, .03);
    border-radius: 8px;
}
.ai-search-preview__actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
.ai-search-preview__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease,
                box-shadow .15s ease, transform .15s ease;
}
.ai-search-preview__btn--ghost {
    color: var(--copl-text);
    background: rgba(15, 23, 42, .04);
}
.ai-search-preview__btn--ghost:hover {
    background: rgba(15, 23, 42, .08);
}
.ai-search-preview__btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 2px 6px rgba(99, 102, 241, .25);
}
.ai-search-preview__btn--primary:hover {
    box-shadow: 0 3px 10px rgba(99, 102, 241, .35);
    color: #fff;
    transform: translateY(-1px);
}
.ai-search-preview__error {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .65rem;
    padding: .45rem .65rem;
    font-size: .75rem;
    color: var(--copl-danger, #b91c1c);
    background: color-mix(in srgb, var(--copl-danger, #b91c1c) 10%, #fff);
    border-radius: 8px;
}
@media (max-width: 575px) {
    .cdir-toolbar-mode__label { display: none; }
    .cdir-toolbar-search--ai input { padding-left: 5.5rem; padding-right: 3rem; }
}
@media (max-width: 420px) {
    .cdir-toolbar-search--ai input { padding-left: 4.6rem; padding-right: 2.8rem; }
    .ai-search-preview { padding: .7rem .65rem; }
}

.cdir-toolbar-actions { flex-wrap: wrap; }
.cdir-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 .9rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--copl-sub);
    background: var(--copl-surface);
    border: 1px solid var(--copl-border-strong);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.cdir-toolbar-btn:hover {
    color: var(--copl-text);
    background: var(--copl-surface-soft);
    border-color: rgba(15, 23, 42, .18);
}
.cdir-toolbar-btn.is-active,
.cdir-toolbar-btn[aria-expanded="true"] {
    color: var(--copl-accent);
    background: var(--copl-accent-soft);
    border-color: rgba(99, 102, 241, .35);
}
.cdir-toolbar-btn i { font-size: .85rem; opacity: .85; }
.cdir-toolbar-btn-chev { font-size: .65rem !important; opacity: .55; margin-left: .15rem; }
.cdir-toolbar-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .07);
    color: var(--copl-sub);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease;
}
.cdir-toolbar-btn.is-active .cdir-toolbar-btn-count {
    background: rgba(99, 102, 241, .18);
    color: var(--copl-accent);
}
/* ── Toolbar dropdown menus ──
   Shared styling for the Phase / Sort / Group-by menus. The toggle buttons
   are narrow (~80px) but the menus need ~210px to fit labels + counts, so
   `dropdown-menu-end` aligns the right edges. To make that visual jump
   feel intentional rather than misaligned, we add a small caret that
   points up to the toggle's right side. */
.cdir-toolbar-dropdown { position: relative; }
.cdir-toolbar-dd {
    /* Stack above the directory table — pinned cells, sticky headers and
       row badges (Status pills, EHR Location text) otherwise bleed through
       the menu when it overlays them. 1080 sits above Bootstrap dropdowns
       (1000) and the table_column_manager panel (1080) shares the tier. */
    z-index: 1080;
    isolation: isolate;
    min-width: 232px;
    /* Toggles use ``data-bs-display="static"`` so Popper.js never sets an
       inline ``transform`` that would fight our open-animation transform
       (the cause of the visible "jump" the menu used to do on first open).
       The 10px margin restores the gap that the old ``data-bs-offset`` gave us. */
    margin-top: 10px;
    padding: .35rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    background: var(--copl-surface);
    /* Solid base layer prevents any rgba shadow from letting underlying
       row content show through the menu body. */
    background-clip: padding-box;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .18),
                0 4px 10px -4px rgba(15, 23, 42, .08),
                0 0 0 1px rgba(15, 23, 42, .02);
    overflow: hidden;
    animation: cdirToolbarDdIn .14s cubic-bezier(.22, 1, .36, 1);
    transform-origin: top right;
}
.cdir-toolbar-dd.show { z-index: 1080; }
.cdir-toolbar-dropdown.show,
.cdir-toolbar-dropdown:focus-within { z-index: 1080; }
@keyframes cdirToolbarDdIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Caret connecting the menu to its toggle button — sits above the menu's
   right edge so the eye traces from toggle to menu naturally. */
.cdir-toolbar-dd::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--copl-surface);
    border-top: 1px solid rgba(15, 23, 42, .08);
    border-left: 1px solid rgba(15, 23, 42, .08);
    transform: rotate(45deg);
    border-top-left-radius: 2px;
}
.cdir-toolbar-dd-header {
    padding: .45rem .65rem .35rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--copl-muted);
    border-bottom: 1px solid rgba(15, 23, 42, .05);
    margin-bottom: .25rem;
}
.cdir-toolbar-dd-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    margin: 1px 0;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--copl-text);
    transition: background .12s ease, color .12s ease;
}
.cdir-toolbar-dd-item:hover,
.cdir-toolbar-dd-item:focus {
    background: var(--copl-surface-soft);
    color: var(--copl-text);
}
.cdir-toolbar-dd-item.active {
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
}
.cdir-toolbar-dd-item.active:hover,
.cdir-toolbar-dd-item.active:focus {
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
}
.cdir-toolbar-dd-icon {
    flex: 0 0 auto;
    font-size: .9rem;
    opacity: .75;
    width: 16px;
    text-align: center;
}
.cdir-toolbar-dd-item.active .cdir-toolbar-dd-icon { opacity: 1; }
.cdir-toolbar-dd-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdir-toolbar-dd-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: var(--copl-sub);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.cdir-toolbar-dd-item.active .cdir-toolbar-dd-count {
    background: rgba(99, 102, 241, .18);
    color: var(--copl-accent);
}
.cdir-toolbar-dd-check {
    flex: 0 0 auto;
    font-size: .9rem;
    margin-left: .15rem;
    color: var(--copl-accent);
}
.cdir-toolbar-btn--ghost {
    background: transparent;
    border-color: var(--copl-border);
    color: var(--copl-muted);
}
.cdir-toolbar-btn--ghost:hover {
    color: var(--copl-danger);
    border-color: rgba(239, 68, 68, .35);
    background: var(--copl-danger-soft);
}

/* Square icon-only variant — for view density / list layout toggles. */
.cdir-toolbar-btn--icon {
    width: 38px;
    padding: 0;
    justify-content: center;
}
.cdir-toolbar-btn--icon i { font-size: .95rem; opacity: .9; }

/* Refresh affordance — neutral hover (the ghost variant otherwise hovers red,
   which reads as destructive). The data attribute keeps the override scoped. */
.cdir-toolbar-btn--ghost[data-cdir-refresh]:hover {
    color: var(--copl-accent);
    background: var(--copl-accent-soft);
    border-color: rgba(99, 102, 241, .28);
}

/* Success / danger active variants — used by status filter pills so the
   "Active" pill glows green and "Inactive" glows red instead of accent purple. */
.cdir-toolbar-btn--success.is-active {
    color: var(--copl-success);
    background: var(--copl-success-soft);
    border-color: rgba(16, 185, 129, .35);
}
.cdir-toolbar-btn--success.is-active .cdir-toolbar-btn-count {
    background: rgba(16, 185, 129, .18);
    color: var(--copl-success);
}
.cdir-toolbar-btn--danger.is-active {
    color: var(--copl-danger);
    background: var(--copl-danger-soft);
    border-color: rgba(239, 68, 68, .35);
}
.cdir-toolbar-btn--danger.is-active .cdir-toolbar-btn-count {
    background: rgba(239, 68, 68, .18);
    color: var(--copl-danger);
}

/* Vertical divider that sits between cdir-toolbar-btn clusters. */
.cdir-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--copl-border-strong);
    margin: 0 .15rem;
}

.cdir-filter-panel {
    margin-top: .25rem;
    padding-top: 1.15rem;
    border-top: 1px dashed var(--copl-border);
}

/* Three-section filter grid: General · CRM · EHR.
   Each section is a softly-tinted panel with its own accent so the
   admin can read the panel as three perspectives, not one long flat
   form. Field rows fluidly wrap from 1→4 columns based on viewport. */
.cdir-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.cdir-filter-group {
    --grp-color: #6366f1;
    --grp-soft: rgba(99, 102, 241, .08);
    --grp-edge: rgba(99, 102, 241, .18);
    padding: 1rem 1.15rem 1.1rem;
    background: linear-gradient(180deg, var(--grp-soft), #fff 80%);
    border: 1px solid var(--grp-edge);
    border-radius: 14px;
}
.cdir-filter-group--general {
    --grp-color: #475569;
    --grp-soft: rgba(100, 116, 139, .07);
    --grp-edge: rgba(100, 116, 139, .18);
}
.cdir-filter-group--crm {
    --grp-color: #3b82f6;
    --grp-soft: rgba(59, 130, 246, .08);
    --grp-edge: rgba(59, 130, 246, .22);
}
.cdir-filter-group--ehr {
    --grp-color: #8b5cf6;
    --grp-soft: rgba(139, 92, 246, .08);
    --grp-edge: rgba(139, 92, 246, .25);
}
.cdir-filter-group-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
}
.cdir-filter-group-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--grp-color);
    border: 1px solid var(--grp-edge);
    font-size: .85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cdir-filter-group-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grp-color);
}
.cdir-filter-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .85rem 1rem;
}
.cdir-filter-field { min-width: 0; display: flex; flex-direction: column; }
.cdir-filter-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--copl-sub);
    margin-bottom: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    letter-spacing: .01em;
}
.cdir-filter-label i { color: var(--grp-color); opacity: .85; font-size: .8rem; }
.cdir-filter-input {
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--copl-border-strong);
    background: #fff;
    font-size: .82rem;
    color: var(--copl-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cdir-filter-input::placeholder { color: var(--copl-sub, #94a3b8); opacity: .85; }
.cdir-filter-input:hover {
    border-color: var(--grp-edge);
    background: color-mix(in srgb, var(--grp-soft, transparent) 50%, #fff);
}
.cdir-filter-input:focus {
    outline: none;
    border-color: var(--grp-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--grp-color) 18%, transparent),
                0 1px 2px rgba(15, 23, 42, .04);
    background: #fff;
}
select.cdir-filter-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2rem;
}
select.cdir-filter-input[multiple] {
    height: auto;
    min-height: 132px;
    max-height: 200px;
    padding: .45rem .55rem;
    background-image: none;
    overflow-y: auto;
    line-height: 1.4;
    scrollbar-width: thin;
    scrollbar-color: var(--grp-edge, #cbd5e1) transparent;
}
select.cdir-filter-input[multiple] option {
    padding: .35rem .55rem;
    margin: .12rem 0;
    border-radius: 7px;
    font-size: .8rem;
    color: var(--copl-text);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
select.cdir-filter-input[multiple] option:hover {
    background: color-mix(in srgb, var(--grp-soft, transparent) 80%, #fff);
}
select.cdir-filter-input[multiple] option:checked {
    background: var(--grp-color, var(--copl-accent)) linear-gradient(0deg,
        var(--grp-color, var(--copl-accent)),
        var(--grp-color, var(--copl-accent)));
    color: #fff;
    font-weight: 600;
}
select.cdir-filter-input[multiple]::-webkit-scrollbar { width: 8px; }
select.cdir-filter-input[multiple]::-webkit-scrollbar-track {
    background: transparent;
}
select.cdir-filter-input[multiple]::-webkit-scrollbar-thumb {
    background: var(--grp-edge, #cbd5e1);
    border-radius: 6px;
}
.cdir-multi-hint {
    margin-top: .35rem;
    font-size: .68rem;
    color: var(--copl-sub);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.cdir-multi-hint i { opacity: .7; }
.cdir-multi-empty {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    font-size: .76rem;
    color: var(--copl-sub);
    background: color-mix(in srgb, var(--grp-soft, transparent) 50%, #fff);
    border: 1px dashed var(--grp-edge, var(--copl-border));
    border-radius: 10px;
    font-style: italic;
}
.cdir-multi-empty i { opacity: .7; }

.cdir-filter-field--full { grid-column: 1 / -1; }
.cdir-scope-toggle {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    height: 38px;
    padding: 4px;
    gap: 2px;
    background: color-mix(in srgb, var(--grp-soft, transparent) 70%, #fff);
    border: 1px solid var(--grp-edge, var(--copl-border-strong));
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.cdir-scope-toggle > input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.cdir-scope-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 0 .55rem;
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--copl-sub);
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    min-width: 0;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cdir-scope-option > i { font-size: .85rem; opacity: .75; flex: 0 0 auto; }
.cdir-scope-option__label { overflow: hidden; text-overflow: ellipsis; }
.cdir-scope-option:hover { color: var(--copl-text); background: rgba(255, 255, 255, .55); }
.cdir-scope-option__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 17px;
    padding: 0 .35rem;
    font-size: .65rem;
    font-weight: 700;
    color: var(--copl-sub);
    background: color-mix(in srgb, var(--copl-sub, #94a3b8) 14%, #fff);
    border-radius: 999px;
    line-height: 1;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease;
}
.cdir-scope-toggle > input[type="radio"]:checked + .cdir-scope-option {
    background: #fff;
    color: var(--grp-color, var(--copl-accent));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08),
                0 0 0 1px color-mix(in srgb, var(--grp-color, var(--copl-accent)) 35%, var(--grp-edge, var(--copl-border-strong)));
}
.cdir-scope-toggle > input[type="radio"]:checked + .cdir-scope-option > i { opacity: 1; }
.cdir-scope-toggle > input[type="radio"]:checked + .cdir-scope-option .cdir-scope-option__count {
    background: color-mix(in srgb, var(--grp-color, var(--copl-accent)) 14%, #fff);
    color: var(--grp-color, var(--copl-accent));
}
.cdir-scope-toggle > input[type="radio"]:focus-visible + .cdir-scope-option {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--grp-color, var(--copl-accent)) 24%, transparent),
                0 1px 2px rgba(15, 23, 42, .06);
}

@media (min-width: 992px) {
    .cdir-filter-grid {
        grid-template-columns: 1fr 1.4fr 1.4fr;
        gap: 1rem;
    }
    .cdir-filter-grid.cdir-filter-grid--two {
        grid-template-columns: 1fr 1.6fr;
    }
    .cdir-filter-grid.cdir-filter-grid--leads {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}
@media (min-width: 1400px) {
    .cdir-filter-grid.cdir-filter-grid--leads {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cdir-filter-group--engagement {
    --grp-color: #f97316;
    --grp-soft: rgba(249, 115, 22, .08);
    --grp-edge: rgba(249, 115, 22, .22);
}
.cdir-filter-group--acquisition {
    --grp-color: #10b981;
    --grp-soft: rgba(16, 185, 129, .08);
    --grp-edge: rgba(16, 185, 129, .22);
}
.cdir-filter-group--location {
    --grp-color: #0ea5e9;
    --grp-soft: rgba(14, 165, 233, .08);
    --grp-edge: rgba(14, 165, 233, .22);
}
.cdir-filter-group--audience {
    --grp-color: #ec4899;
    --grp-soft: rgba(236, 72, 153, .08);
    --grp-edge: rgba(236, 72, 153, .22);
}

.cdir-filter-label__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 .3rem;
    margin-left: .35rem;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    background: var(--grp-color, var(--copl-accent));
    border-radius: 999px;
    line-height: 1;
}
.cdir-filter-label__unit {
    margin-left: .25rem;
    font-weight: 600;
    color: var(--copl-sub);
    text-transform: lowercase;
    letter-spacing: 0;
}

.cdir-filter-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(180deg,
        rgba(99, 102, 241, .05), rgba(255, 255, 255, .9));
    border: 1px dashed rgba(99, 102, 241, .22);
    border-radius: 14px;
}
.cdir-filter-presets__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6366f1;
    margin-right: .25rem;
}
.cdir-filter-presets__label i { font-size: .9rem; }
.cdir-preset-chip {
    --chip-color: #6366f1;
    --chip-soft: rgba(99, 102, 241, .1);
    --chip-edge: rgba(99, 102, 241, .25);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--chip-color);
    background: #fff;
    border: 1px solid var(--chip-edge);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    line-height: 1.1;
    transition: background .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}
.cdir-preset-chip > input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.cdir-preset-chip i { font-size: .85rem; opacity: .85; }
.cdir-preset-chip:hover { background: var(--chip-soft); }
.cdir-preset-chip:has(input:checked) {
    color: #fff;
    background: var(--chip-color);
    border-color: var(--chip-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12),
                0 0 0 3px color-mix(in srgb, var(--chip-color) 18%, transparent);
}
.cdir-preset-chip--danger { --chip-color: #ef4444; --chip-soft: rgba(239, 68, 68, .1); --chip-edge: rgba(239, 68, 68, .25); }
.cdir-preset-chip--warning { --chip-color: #f59e0b; --chip-soft: rgba(245, 158, 11, .1); --chip-edge: rgba(245, 158, 11, .28); }
.cdir-preset-chip--info { --chip-color: #0ea5e9; --chip-soft: rgba(14, 165, 233, .1); --chip-edge: rgba(14, 165, 233, .25); }
.cdir-preset-chip--success { --chip-color: #10b981; --chip-soft: rgba(16, 185, 129, .1); --chip-edge: rgba(16, 185, 129, .25); }
.cdir-preset-chip--primary { --chip-color: #6366f1; --chip-soft: rgba(99, 102, 241, .1); --chip-edge: rgba(99, 102, 241, .25); }
.cdir-preset-chip--accent { --chip-color: #8b5cf6; --chip-soft: rgba(139, 92, 246, .1); --chip-edge: rgba(139, 92, 246, .25); }
.cdir-preset-chip--muted { --chip-color: #64748b; --chip-soft: rgba(100, 116, 139, .1); --chip-edge: rgba(100, 116, 139, .25); }
.cdir-preset-chip--clear { --chip-color: #94a3b8; }

.cdir-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--copl-border);
}

/* ── Directory quick-filter strip (rendered inside the unified toolbar) ─
   Two-row container: lifecycle phase pills on top, operational flags +
   onboarding-category chips on the bottom. Each row is a flex line that
   wraps gracefully on narrow viewports. */
.cdir-quick-filters {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: .25rem;
}
.cdir-quick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
.cdir-quick-row--chips { gap: .45rem; }
@media (prefers-reduced-motion: reduce) {
    .copl-phase-pill,
    .copl-phase-pill i,
    .copl-flag,
    .copl-flag i,
    .copl-flag-count,
    .copl-phase-pill-count {
        transition: none !important;
    }
    .copl-phase-pill.is-active,
    .copl-flag:hover,
    .copl-flag--warn.is-active,
    .copl-flag--ok.is-active,
    .copl-flag--info.is-active {
        transform: none !important;
    }
    .copl-phase-pill:hover i,
    .copl-flag:hover i,
    .copl-phase-pill.is-active i {
        transform: none !important;
    }
}

/* ── List wrapper ── */
.copl-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

/* ── Card — compact one-row layout ───────────────────────────
   Single horizontal row: ring · identity (name + inline meta chips) ·
   group progress · action (next-up + open arrow). Footer/header strips
   are gone; everything sits on one organized line.
   ───────────────────────────────────────────────────────────── */
.copl-card {
    background: #fff;
    border: 1px solid var(--copl-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
    overflow: hidden;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.copl-card:hover {
    border-color: var(--copl-border-strong);
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .12), 0 2px 4px -2px rgba(15, 23, 42, .04);
    transform: translateY(-1px);
}
.copl-card.is-stuck  { border-color: rgba(245, 158, 11, .35); }
.copl-card.is-ready  { border-color: rgba(16, 185, 129, .35); }

/* Single-row grid */
.copl-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1.25fr) minmax(0, 2.1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem .7rem 1rem;
}
@media (max-width: 1180px) {
    .copl-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .85rem;
    }
    .copl-row > .copl-groups { grid-column: 1 / -1; order: 5; }
}
@media (max-width: 640px) {
    .copl-row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .75rem;
        padding: .7rem .85rem;
    }
    .copl-row > .copl-card-end {
        grid-column: 1 / -1;
        justify-content: flex-end;
        order: 6;
    }
}

/* Progress ring — slimmer */
.copl-ring-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.copl-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.copl-ring circle {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}
.copl-ring-track { stroke: var(--copl-border-strong); opacity: .85; }
.copl-ring-fill {
    stroke: var(--copl-accent);
    transition: stroke-dasharray .8s cubic-bezier(.4, 0, .2, 1);
}
.copl-card.is-ready .copl-ring-fill { stroke: var(--copl-success); }
.copl-card.is-stuck .copl-ring-fill { stroke: var(--copl-warn); }
.copl-card[data-percent="100"] .copl-ring-fill { stroke: var(--copl-success); }
.copl-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.copl-ring-percent {
    font-size: .92rem;
    font-weight: 800;
    color: var(--copl-text);
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}
.copl-ring-percent span {
    font-size: .56rem;
    color: var(--copl-muted);
    font-weight: 700;
    margin-left: 1px;
}
.copl-ring-sub {
    margin-top: .15rem;
    font-size: .55rem;
    font-weight: 700;
    color: var(--copl-muted);
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

/* Identity column */
.copl-card-identity {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    min-width: 0;
}
.copl-card-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--copl-text);
    text-decoration: none;
    letter-spacing: -.015em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s ease;
}
.copl-card-name:hover { color: var(--copl-accent); }
.copl-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    row-gap: .25rem;
}

.copl-card-stage {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    color: var(--stage-color, var(--copl-accent));
    background: var(--stage-soft, var(--copl-accent-soft));
    line-height: 1.5;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.copl-card-stage i { font-size: .65rem; }

.copl-card-since {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0 .25rem;
    font-size: .6rem;
    font-weight: 600;
    color: var(--copl-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.copl-card-since i { color: var(--copl-muted); font-size: .62rem; }

.copl-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.5;
}
.copl-flag-badge i { font-size: .6rem; }
.copl-flag-badge--warn { background: rgba(245, 158, 11, .14); color: #b45309; }
.copl-flag-badge--ok   { background: rgba(16, 185, 129, .14); color: #047857; }

.copl-foot-meta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .65rem;
    color: var(--copl-sub);
    font-weight: 500;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copl-foot-meta i { color: var(--copl-muted); font-size: .65rem; flex-shrink: 0; }

.copl-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.55;
    text-decoration: none;
    border: 1px solid transparent;
    letter-spacing: .01em;
}
.copl-chip i { font-size: .62rem; }
.copl-chip--lead     { background: var(--copl-accent-soft); color: var(--copl-accent); border-color: rgba(99, 102, 241, .2); }
.copl-chip--assignee { background: rgba(14, 165, 233, .12); color: #0369a1; border-color: rgba(14, 165, 233, .2); }
.copl-chip--ehr      { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .2); }
.copl-chip--ehr.is-ok { background: var(--copl-success-soft); color: #047857; border-color: rgba(16, 185, 129, .2); }
.copl-chip--pending  { background: var(--copl-surface); color: var(--copl-sub); border-color: var(--copl-border-strong); }
.copl-chip--plan     { background: rgba(124, 58, 237, .12); color: #6d28d9; border-color: rgba(124, 58, 237, .2); }

/* Group progress — 4 compact horizontal pills */
.copl-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
    min-width: 0;
}
@media (max-width: 1180px) {
    .copl-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .copl-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .copl-groups { grid-template-columns: 1fr; }
}
.copl-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .5rem;
    row-gap: .35rem;
    padding: .5rem .65rem .55rem;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    transition: border-color .2s ease, background .2s ease;
    min-width: 0;
    min-height: 52px;
}
.copl-group:hover { border-color: #e5e7eb; background: #fafbfc; }
.copl-group-icon {
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    background: rgba(100, 116, 139, .12);
    color: #475569;
    flex-shrink: 0;
    align-self: start;
    margin-top: 1px;
    transition: background .2s ease, color .2s ease;
}
.copl-group-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    min-width: 0;
    line-height: 1.2;
}
.copl-group-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--copl-text);
    letter-spacing: -.005em;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
.copl-group-count {
    font-size: .62rem;
    font-weight: 700;
    color: var(--copl-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    line-height: 1;
}
.copl-group-count > span { color: var(--copl-muted); font-weight: 600; }
.copl-group-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 3px;
    background: rgba(15, 23, 42, .06);
    border-radius: 999px;
    overflow: hidden;
    align-self: end;
}
.copl-group-bar > span {
    display: block;
    height: 100%;
    background: var(--copl-accent);
    border-radius: 999px;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.copl-group.is-progress .copl-group-icon {
    background: rgba(99, 102, 241, .14);
    color: var(--copl-accent);
}
.copl-group.is-complete {
    border-color: rgba(16, 185, 129, .25);
    background: rgba(16, 185, 129, .05);
}
.copl-group.is-complete .copl-group-icon {
    background: rgba(16, 185, 129, .15);
    color: #047857;
}
.copl-group.is-complete .copl-group-label,
.copl-group.is-complete .copl-group-count { color: #047857; }
.copl-group.is-complete .copl-group-bar > span { background: var(--copl-success); }

/* Right-end action: next-up + open arrow */
.copl-card-end {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    min-width: 0;
}
.copl-next {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .45rem .75rem;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    min-width: 0;
    max-width: 220px;
    line-height: 1;
}
.copl-next:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(99, 102, 241, .25);
    box-shadow: 0 6px 14px -10px rgba(15, 23, 42, .12);
    color: inherit;
}
.copl-next-eyebrow {
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--copl-accent);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.copl-next-eyebrow i { font-size: .58rem; }
.copl-next-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--copl-text);
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .15rem;
}
.copl-next-title i { color: var(--copl-accent); font-size: .78rem; flex-shrink: 0; }
.copl-next-cta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .2rem;
    font-size: .58rem;
    font-weight: 700;
    color: var(--copl-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1;
}
.copl-next-cta i { font-size: .65rem; transition: transform .15s ease; }
.copl-next:hover .copl-next-cta i { transform: translateX(2px); }

.copl-next--done {
    background: rgba(16, 185, 129, .06);
    border-color: rgba(16, 185, 129, .25);
    cursor: default;
}
.copl-next--done .copl-next-eyebrow { color: #047857; }
.copl-next--done .copl-next-title i { color: #047857; }
.copl-next--done .copl-next-cta { color: #047857; }

/* Group completion checkmark — subtle "done" visual cue */
.copl-group.is-complete .copl-group-count::after {
    content: "\F26B"; /* bi-check2 */
    font-family: "bootstrap-icons";
    margin-left: .25rem;
    color: var(--copl-success);
    font-weight: 600;
    font-size: .78em;
    vertical-align: -.05em;
}

/* Card-wide overall progress strip — peripheral signal at bottom */
.copl-card-strip {
    height: 2px;
    background: rgba(15, 23, 42, .04);
    overflow: hidden;
}
.copl-card-strip > span {
    display: block;
    height: 100%;
    background: var(--copl-accent);
    border-radius: 0 999px 999px 0;
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
    opacity: .6;
}
.copl-card:hover .copl-card-strip > span { opacity: 1; }
.copl-card.is-ready .copl-card-strip > span { background: var(--copl-success); opacity: 1; }
.copl-card.is-stuck .copl-card-strip > span { background: var(--copl-warn); opacity: 1; }

.copl-card-open {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--copl-muted);
    background: transparent;
    border: 1px solid var(--copl-border);
    text-decoration: none;
    transition: all .2s ease;
    flex-shrink: 0;
    font-size: .85rem;
}
.copl-card-open:hover {
    color: #fff;
    border-color: var(--copl-accent);
    background: var(--copl-accent);
    transform: translateX(2px);
}

/* Empty state */
.copl-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--copl-surface);
    border: 1px dashed var(--copl-border-strong);
    border-radius: 16px;
    color: var(--copl-sub);
}
.copl-empty i {
    font-size: 2rem;
    color: var(--copl-muted);
    display: block;
    margin-bottom: .75rem;
    opacity: .6;
}
.copl-empty h6 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--copl-text);
    margin-bottom: .35rem;
}
.copl-empty p {
    font-size: .8rem;
    margin-bottom: 1rem;
}

.copl-empty--bridge {
    text-align: center;
    padding: 1.5rem 1.25rem 1.4rem;
    background: var(--copl-surface);
    border: 1px solid #e8edf5;
    border-radius: 14px;
}
.copl-empty--bridge h6 {
    font-size: .92rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--copl-text);
    letter-spacing: -.005em;
}
.copl-empty--bridge p {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--copl-sub);
    max-width: 460px;
    margin: 0 auto 1rem;
}
.copl-empty--bridge p:last-child { margin-bottom: 0; }

.copl-empty-medallion {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 1.2rem;
    line-height: 1;
    margin: 0 auto .85rem;
    border: 1px solid #e0e7ff;
}
.copl-empty-medallion > i { line-height: 1; }
.copl-empty-medallion-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    line-height: 1;
    border: 2px solid var(--copl-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.copl-empty-medallion-badge--info    { background: #2563eb; }
.copl-empty-medallion-badge--warning { background: #f59e0b; }
.copl-empty-medallion-badge--danger  { background: #dc2626; }

.copl-empty-chips:last-child { margin-bottom: 0; }
.copl-empty-chips {
    list-style: none;
    padding: 0;
    margin: 0 auto 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    max-width: 600px;
}
.copl-empty-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .65rem .25rem .25rem;
    border-radius: 100px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: .73rem;
    color: var(--copl-text);
}
.copl-empty-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}
.copl-empty-chip-avatar i { line-height: 1; }
.copl-empty-chip-name {
    font-weight: 600;
    color: var(--copl-text);
}
.copl-empty-chip-meta {
    color: #64748b;
    font-size: .68rem;
    font-weight: 500;
}
.copl-empty-chip--more {
    padding: .3rem .7rem;
    border-style: dashed;
    color: #64748b;
    background: transparent;
    font-weight: 500;
    font-size: .72rem;
}

.copl-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
}

.copl-empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    min-height: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--copl-text);
    text-decoration: none;
    font-size: .825rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
}
.copl-empty-action:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow: 0 4px 10px -8px rgba(15, 23, 42, .15);
    color: var(--copl-text);
}
.copl-empty-action > i.bi {
    font-size: 1rem;
    line-height: 1;
    color: #4f46e5;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: 1;
}
.copl-empty-action > span {
    line-height: 1.2;
}
.copl-empty-action--primary {
    background: #4f46e5;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 10px -6px rgba(79, 70, 229, .55);
}
.copl-empty-action--primary,
.copl-empty-action--primary > span,
.copl-empty-action--primary > i.bi { color: #fff; }
.copl-empty-action--primary:hover,
.copl-empty-action--primary:hover > span,
.copl-empty-action--primary:hover > i.bi { color: #fff; }
.copl-empty-action--primary:hover {
    background: #4338ca;
}




/* ── Pipeline Template Catalog — premium feature cards ──── */

.pt-card {
    --pt-tint: var(--bs-primary);
    --pt-tint-soft: rgba(0, 105, 166, 0.10);
    --pt-tint-ink: var(--bs-primary);
    --pt-tint-deep: #0058a3;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.pt-card::after {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-tint), var(--pt-tint-deep));
    opacity: 0;
    transform: scaleX(.4);
    transform-origin: 0 50%;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

.pt-card:hover,
.pt-card:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pt-tint) 28%, transparent);
    box-shadow:
        0 10px 30px -12px color-mix(in srgb, var(--pt-tint) 22%, rgba(15, 23, 42, 0.12)),
        0 2px 6px rgba(15, 23, 42, 0.04);
    text-decoration: none;
    color: inherit;
}
.pt-card:hover::after,
.pt-card:focus-visible::after { opacity: 1; transform: scaleX(1); }
.pt-card:focus-visible { outline: none; }
.pt-card:active { transform: translateY(-1px); }

/* Tint variants — drive the accent color used by icon, checks, CTA, hover */
.pt-card--primary   { --pt-tint: var(--bs-primary);  --pt-tint-soft: rgba(0, 105, 166, 0.10);  --pt-tint-ink: var(--bs-primary);  --pt-tint-deep: #00558a; }
.pt-card--success   { --pt-tint: var(--bs-success);  --pt-tint-soft: rgba(0, 201, 167, 0.12);  --pt-tint-ink: #0b8f78;            --pt-tint-deep: #019177; }
.pt-card--info      { --pt-tint: var(--bs-info);     --pt-tint-soft: rgba(9, 165, 190, 0.12);  --pt-tint-ink: #07879c;            --pt-tint-deep: #066f80; }
.pt-card--warning   { --pt-tint: var(--bs-warning);  --pt-tint-soft: rgba(255, 137, 86, 0.13); --pt-tint-ink: #c66a3a;            --pt-tint-deep: #b35424; }
.pt-card--danger    { --pt-tint: var(--bs-danger);   --pt-tint-soft: rgba(237, 76, 120, 0.12); --pt-tint-ink: #d04269;            --pt-tint-deep: #b32f56; }
.pt-card--purple    { --pt-tint: #7c3aed;            --pt-tint-soft: rgba(124, 58, 237, 0.12); --pt-tint-ink: #6d28d9;            --pt-tint-deep: #5b21b6; }
.pt-card--secondary { --pt-tint: #64748b;            --pt-tint-soft: rgba(100, 116, 139, 0.12);--pt-tint-ink: #475569;            --pt-tint-deep: #334155; }

/* Header — icon tile + pill stack */
.pt-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.pt-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, var(--pt-tint), var(--pt-tint-deep));
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow:
        0 6px 14px -6px color-mix(in srgb, var(--pt-tint) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    flex-shrink: 0;
}
.pt-card:hover .pt-card__icon { transform: translateY(-1px) scale(1.04); }

.pt-card__head-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.pt-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
}
.pt-card__pill .bi { font-size: 0.75rem; }
.pt-card__pill--accent {
    color: var(--pt-tint-ink);
    background: var(--pt-tint-soft);
}
.pt-card__pill--muted {
    color: #475569;
    background: rgba(100, 116, 139, 0.10);
}

/* Title + description */
.pt-card__title {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--bs-heading-color);
}

.pt-card__desc {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-sub);
}

/* Touchpoint chips — auto-derived from flow */
.pt-card__touchpoints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.875rem;
}
.pt-card__tp {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--pt-tint-ink);
    background: var(--pt-tint-soft);
    border: 1px solid color-mix(in srgb, var(--pt-tint) 18%, transparent);
    border-radius: 0.5rem;
    line-height: 1.3;
    letter-spacing: 0.005em;
    white-space: nowrap;
}
.pt-card__tp .bi {
    font-size: 0.75rem;
    line-height: 1;
}

/* Workflow-steps section — label + bulleted checklist */
.pt-card__steps {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
    flex: 1;
}
.pt-card__steps-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-sub);
}
.pt-card__steps-label .bi {
    color: var(--pt-tint-ink);
    font-size: 0.75rem;
}

.pt-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pt-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--bs-body-color);
}
.pt-card__features li .bi {
    color: var(--pt-tint-ink);
    font-size: 0.875rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.pt-card__features li span { min-width: 0; }

/* Footer — stats cluster + CTA pill */
.pt-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.10);
}

.pt-card__stats {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pt-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub);
}
.pt-card__stat .bi {
    color: var(--pt-tint-ink);
    font-size: 0.8125rem;
}
.pt-card__stat-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
}

.pt-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--pt-tint), var(--pt-tint-deep));
    border-radius: 0.625rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--pt-tint) 60%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pt-card__cta .bi {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}
.pt-card:hover .pt-card__cta {
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--pt-tint) 70%, transparent);
}
.pt-card:hover .pt-card__cta .bi { transform: translateX(2px); }

@media (max-width: 575.98px) {
    .pt-card { padding: 1.25rem 1.25rem 1rem; border-radius: 0.875rem; }
    .pt-card__icon { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 0.75rem; }
    .pt-card__title { font-size: 1rem; }
    .pt-card__footer { flex-wrap: wrap; }
}

/* ────────────────────────────────────────────────────────────────────────
   Catalog — Journey-style horizontal tab strip
   ──────────────────────────────────────────────────────────────────────── */
.wf-cat-tabs-wrap {
    padding: 1.25rem 1.5rem 0;
}

.wf-catalog--flat .wf-cat-tabs-wrap { padding-left: 0; padding-right: 0; padding-top: 0; }
.wf-catalog--flat .wf-cat-tabs-search { min-width: 220px; }

.wf-cat-tabs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.875rem;
}

.wf-cat-tabs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}
.wf-cat-tabs-kicker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 0.75rem;
}
.wf-cat-tabs-kicker-sep { opacity: 0.55; font-weight: 500; }
.wf-cat-tabs-kicker-meta {
    color: var(--text-sub);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.wf-cat-tabs-search {
    position: relative;
    min-width: 240px;
    max-width: 280px;
}
.wf-cat-tabs-search > .bi-search {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    color: var(--text-sub);
    opacity: 0.7;
    pointer-events: none;
}
.wf-cat-tabs-search .form-control {
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 0.5rem;
}
.wf-cat-tabs-search-clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.25rem;
    color: var(--text-sub);
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
}
.wf-cat-tabs-search-clear:hover { opacity: 1; }

.wf-cat-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}
.wf-cat-tabs::-webkit-scrollbar { height: 4px; }
.wf-cat-tabs::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 4px; }

.wf-cat-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem 0.875rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-sub);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease;
    border-radius: 0.5rem 0.5rem 0 0;
}
.wf-cat-tab:hover { background: rgba(15, 23, 42, 0.03); color: var(--bs-heading-color); }
.wf-cat-tab:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

.wf-cat-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(.2,.8,.2,1.2);
}
.wf-cat-tab:hover .wf-cat-tab-icon { transform: scale(1.05); }

.wf-cat-tab-label { letter-spacing: -0.005em; }

.wf-cat-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-sub);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Active tab — colored underline indicator + tinted count pill */
.wf-cat-tab.is-active { color: var(--bs-heading-color); }
.wf-cat-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: currentColor;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.wf-cat-tab[data-tint="primary"].is-active   { color: var(--bs-primary); }
.wf-cat-tab[data-tint="success"].is-active   { color: var(--bs-success); }
.wf-cat-tab[data-tint="info"].is-active      { color: var(--bs-info); }
.wf-cat-tab[data-tint="warning"].is-active   { color: var(--bs-warning); }
.wf-cat-tab[data-tint="danger"].is-active    { color: var(--bs-danger); }
.wf-cat-tab[data-tint="purple"].is-active    { color: #7c3aed; }

.wf-cat-tab.is-active .wf-cat-tab-count { color: inherit; }
.wf-cat-tab[data-tint="primary"].is-active .wf-cat-tab-count { background: rgba(0, 105, 166, 0.12); }
.wf-cat-tab[data-tint="success"].is-active .wf-cat-tab-count { background: rgba(0, 201, 167, 0.14); }
.wf-cat-tab[data-tint="info"].is-active    .wf-cat-tab-count { background: rgba(9, 165, 190, 0.14); }
.wf-cat-tab[data-tint="warning"].is-active .wf-cat-tab-count { background: rgba(255, 137, 86, 0.14); }
.wf-cat-tab[data-tint="danger"].is-active  .wf-cat-tab-count { background: rgba(237, 76, 120, 0.14); }
.wf-cat-tab[data-tint="purple"].is-active  .wf-cat-tab-count { background: rgba(124, 58, 237, 0.14); }

.wf-cat-tab.is-disabled,
.wf-cat-tab[data-empty="1"] {
    opacity: 0.4;
    pointer-events: none;
}

/* Panes — only the active one renders cards */
.wf-cat-panes { position: relative; }
.wf-cat-pane { display: none; }
.wf-cat-pane.is-active {
    display: block;
    animation: wfCatPaneIn 0.22s cubic-bezier(.2,.8,.2,1);
}
@keyframes wfCatPaneIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

[data-bs-theme="dark"] .wf-cat-tabs,
.dark-mode .wf-cat-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .wf-cat-tab:hover,
.dark-mode .wf-cat-tab:hover { background: rgba(255, 255, 255, 0.04); }
[data-bs-theme="dark"] .wf-cat-tab-count,
.dark-mode .wf-cat-tab-count { background: rgba(255, 255, 255, 0.08); }

@media (max-width: 575.98px) {
    .wf-cat-tabs-wrap { padding: 1rem 1rem 0; }
    .wf-cat-tab { padding: 0.625rem 0.625rem 0.75rem; font-size: 0.8125rem; }
    .wf-cat-tab-icon { width: 24px; height: 24px; }
    .wf-cat-tabs-search { min-width: 100%; max-width: 100%; }
}

/* Category section header — compact */
.wf-catalog-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.wf-catalog-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.wf-catalog-section-text { flex: 1; }

.wf-catalog-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.wf-catalog-section-subtitle {
    font-size: 0.6875rem;
    color: var(--text-sub);
}

.wf-catalog-section-count {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.0625rem 0.4375rem;
    border-radius: 2rem;
    line-height: 1.5;
}

/* ── Catalog header (search + controls) ─────────────────── */
.wf-catalog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.wf-catalog-header-title { min-width: 0; }

.wf-catalog-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wf-catalog-search {
    position: relative;
    min-width: 220px;
}

.wf-catalog-search > .bi-search {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    color: var(--text-sub);
    opacity: 0.7;
    pointer-events: none;
}

.wf-catalog-search .form-control {
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 0.5rem;
}

.wf-catalog-search-clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.25rem;
    color: var(--text-sub);
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
}
.wf-catalog-search-clear:hover { opacity: 1; }

.wf-catalog-toggle-all { border-radius: 0.5rem; font-weight: 500; }

.wf-catalog-empty {
    border: 1px dashed rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.015);
}
.wf-catalog-empty a { color: var(--bs-primary); text-decoration: none; font-weight: 600; }
.wf-catalog-empty a:hover { text-decoration: underline; }

/* ── Catalog accordion panels (modern) ───────────────────── */
.wf-catalog-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.wf-catalog-panel {
    position: relative;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

/* colored side-rail indicator (gets bolder when the panel is open) */
.wf-catalog-panel::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: transparent;
    transition: background 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
.wf-catalog-panel[data-panel-key="acquisition"]::before { background: linear-gradient(180deg, var(--bs-primary), #3AA0C6); }
.wf-catalog-panel[data-panel-key="onboarding"]::before  { background: linear-gradient(180deg, var(--bs-success), #34d399); }
.wf-catalog-panel[data-panel-key="care"]::before        { background: linear-gradient(180deg, var(--bs-info), #22d3ee); }
.wf-catalog-panel[data-panel-key="retention"]::before   { background: linear-gradient(180deg, var(--bs-warning), #fbbf24); }
.wf-catalog-panel[data-panel-key="revenue"]::before     { background: linear-gradient(180deg, var(--bs-danger), #f87171); }
.wf-catalog-panel[data-panel-key="advocacy"]::before    { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
.wf-catalog-panel::before { opacity: 0; }
.wf-catalog-panel:hover::before,
.wf-catalog-panel.is-open::before { opacity: 1; top: 10px; bottom: 10px; }

.wf-catalog-panel:hover {
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.wf-catalog-panel.is-open {
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
}

.wf-catalog-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    border-radius: 1rem;
    transition: background-color 0.15s ease;
}
.wf-catalog-panel-header:hover { background: rgba(15, 23, 42, 0.025); }
.wf-catalog-panel-header:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}
.wf-catalog-panel.is-open > .wf-catalog-panel-header {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.02), transparent 60%);
    border-radius: 1rem 1rem 0 0;
}

.wf-catalog-panel-header .wf-catalog-section-icon {
    margin: 0;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.25s cubic-bezier(.2,.8,.2,1.2);
}
.wf-catalog-panel.is-open > .wf-catalog-panel-header .wf-catalog-section-icon {
    transform: scale(1.08) rotate(-4deg);
}

.wf-catalog-panel-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    flex: 1;
    min-width: 0;
}
.wf-catalog-panel-text .wf-catalog-section-title { margin: 0; font-size: 0.9375rem; letter-spacing: -0.01em; }
.wf-catalog-panel-text .wf-catalog-section-subtitle { margin: 0; }

.wf-catalog-chevron {
    font-size: 0.75rem;
    color: var(--text-sub);
    opacity: 0.55;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.04);
    transition: transform 0.25s cubic-bezier(.2,.8,.2,1), opacity 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
.wf-catalog-panel-header:hover .wf-catalog-chevron { opacity: 0.85; background: rgba(15, 23, 42, 0.07); }
.wf-catalog-panel-header[aria-expanded="true"] .wf-catalog-chevron {
    transform: rotate(180deg);
    opacity: 1;
    background: rgba(15, 23, 42, 0.08);
    color: var(--bs-heading-color);
}

/* Body — smooth height animation via grid trick (no JS measurements) */
.wf-catalog-panel-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(.2,.8,.2,1);
}
.wf-catalog-panel-body > .row {
    overflow: hidden;
    padding-left: 1.125rem;
    padding-right: 1.125rem;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease 0.05s, transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.wf-catalog-panel.is-open > .wf-catalog-panel-body {
    grid-template-rows: 1fr;
}
.wf-catalog-panel.is-open > .wf-catalog-panel-body > .row {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback for older browsers that don't support grid-template-rows animation */
@supports not (grid-template-rows: 0fr) {
    .wf-catalog-panel-body { display: block; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .wf-catalog-panel.is-open > .wf-catalog-panel-body { max-height: 2000px; }
    .wf-catalog-panel-body > .row { opacity: 1; transform: none; }
}

/* Purple accent — still used by the category tab strip */
.text-purple { color: #7c3aed !important; }

/* Responsive: stack header on small screens */
@media (max-width: 575.98px) {
    .wf-catalog-header { flex-direction: column; align-items: stretch; }
    .wf-catalog-header-controls { width: 100%; }
    .wf-catalog-search { flex: 1; min-width: 0; }
}


/* ============================================================
   Onboarding Pipeline — Clinic Portfolio panel
   Aggregate analytics card sitting above the toolbar.
   ============================================================ */

/* Universe pill strip — sits at the bottom of the portfolio hero and
   distils Synced / CRM-only / EHR-only into one compact row. */
.copl-universe-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem .95rem .85rem;
    border-top: 1px solid #eef0f3;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}
.copl-universe-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem .25rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease;
}
.copl-universe-pill:hover { border-color: #cbd5e1; background: #f8fafc; }
.copl-universe-pill strong {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.copl-universe-pill-lbl { color: #475569; }
.copl-universe-pill-pct {
    font-weight: 500;
    color: #94a3b8;
    font-size: .65rem;
}
.copl-universe-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--up-dot, #94a3b8);
}
.copl-universe-pill--synced { --up-dot: #10b981; }
.copl-universe-pill--synced strong { color: #047857; }
.copl-universe-pill--crm    { --up-dot: #3b82f6; }
.copl-universe-pill--crm strong    { color: #1d4ed8; }
.copl-universe-pill--ehr    { --up-dot: #8b5cf6; }
.copl-universe-pill--ehr strong    { color: #6d28d9; }

/* Attention bar — actionable counts (stuck / ready / complete) sitting
   between the hero and the onboarding-pipeline analytics block. */
.copl-attention {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .55rem;
    margin-bottom: 1rem;
}
.copl-attention-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .8rem;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.copl-attention-card:hover {
    transform: translateY(-1px);
    border-color: var(--ac-border, #e2e8f0);
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .18);
    text-decoration: none;
}
.copl-attention-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    background: var(--ac-icon-bg, rgba(99, 102, 241, .1));
    color: var(--ac-icon-fg, #4f46e5);
    flex-shrink: 0;
}
.copl-attention-text {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    line-height: 1.1;
    min-width: 0;
    flex: 1;
}
.copl-attention-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.copl-attention-lbl {
    font-size: .7rem;
    color: #64748b;
    font-weight: 600;
}
.copl-attention-arrow {
    color: #cbd5e1;
    font-size: .85rem;
    transition: transform .15s ease, color .15s ease;
}
.copl-attention-card:hover .copl-attention-arrow {
    transform: translateX(2px);
    color: var(--ac-icon-fg, #4f46e5);
}
.copl-attention-card--warn   { --ac-border: rgba(245, 158, 11, .35); --ac-icon-bg: rgba(245, 158, 11, .14); --ac-icon-fg: #b45309; }
.copl-attention-card--accent { --ac-border: rgba(124, 58, 237, .35); --ac-icon-bg: rgba(124, 58, 237, .12); --ac-icon-fg: #6d28d9; }
.copl-attention-card--ok     { --ac-border: rgba(16, 185, 129, .35); --ac-icon-bg: rgba(16, 185, 129, .14); --ac-icon-fg: #047857; }

.copl-overview {
    --copl-surface: #fff;
    --copl-surface-soft: #fafbfc;
    --copl-border: #eef0f3;
    --copl-border-strong: #e5e7eb;
    --copl-text: #0f172a;
    --copl-sub: #64748b;
    --copl-muted: #94a3b8;
    --copl-accent: #6366f1;
    --copl-accent-soft: #eef2ff;
    --copl-success: #10b981;
    --copl-success-soft: #ecfdf5;
    --copl-warn: #f59e0b;
    --copl-warn-soft: #fffbeb;
    --copl-info: #0ea5e9;
    --copl-info-soft: #f0f9ff;
    --copl-danger: #ef4444;
    --copl-danger-soft: #fef2f2;

    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 18px;
    margin-bottom: 1rem;
    overflow: hidden;
    /* Two-layer shadow: tight contact + soft far-field for depth without harsh edges */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 24px 48px -32px rgba(15, 23, 42, .22);
    position: relative;
}
/* Inner top highlight reads as a glass surface in light mode */
.copl-overview::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    pointer-events: none;
}

.copl-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--copl-border);
    background: linear-gradient(180deg, var(--copl-surface-soft) 0%, var(--copl-surface) 100%);
}
.copl-overview-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--copl-text);
    margin: 0;
    letter-spacing: -.015em;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.copl-overview-title i { color: var(--copl-accent); font-size: 1rem; }
.copl-overview-sub {
    font-size: .72rem;
    color: var(--copl-sub);
    margin-top: .15rem;
    display: block;
}

/* Hero: ring + 4 KPI tiles */
.copl-overview-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.75rem;
    padding: 1.35rem 1.35rem 1.1rem;
}
@media (max-width: 720px) {
    .copl-overview-hero { grid-template-columns: 1fr; gap: 1rem; }
    .copl-overview-ring-wrap { margin: 0 auto; }
}
.copl-overview-ring-wrap {
    position: relative;
    width: 116px;
    height: 116px;
    flex-shrink: 0;
}
.copl-overview-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.copl-overview-ring circle {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}
.copl-overview-ring-track { stroke: var(--copl-border-strong); opacity: .9; }
.copl-overview-ring-fill {
    stroke: var(--copl-accent);
    transition: stroke-dasharray .8s cubic-bezier(.4, 0, .2, 1);
}
.copl-overview-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.copl-overview-ring-percent {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--copl-text);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.copl-overview-ring-percent span {
    font-size: .85rem;
    color: var(--copl-muted);
    font-weight: 600;
    margin-left: 1px;
}
.copl-overview-ring-sub {
    margin-top: .25rem;
    font-size: .62rem;
    font-weight: 700;
    color: var(--copl-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.copl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .65rem;
}
.copl-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .85rem .95rem;
    border-radius: 14px;
    /* Subtle gradient: tile-tint variable lets per-variant rules below colour the wash */
    background:
        linear-gradient(135deg, var(--copl-tile-tint, transparent), transparent 70%),
        var(--copl-surface-soft);
    border: 1px solid var(--copl-border);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.copl-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 14px 28px -18px rgba(15, 23, 42, .22);
    border-color: var(--copl-border-strong);
}
.copl-tile-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .03);
}
.copl-tile-num {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--copl-text);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.copl-tile-lbl {
    font-size: .62rem;
    font-weight: 700;
    color: var(--copl-sub);
    margin-top: .25rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.copl-tile--primary { --copl-tile-tint: rgba(99, 102, 241, .07); }
.copl-tile--success { --copl-tile-tint: rgba(16, 185, 129, .07); }
.copl-tile--warn    { --copl-tile-tint: rgba(245, 158, 11, .07); }
.copl-tile--accent  { --copl-tile-tint: rgba(124, 58, 237, .07); }
.copl-tile--primary .copl-tile-icon { background: var(--copl-accent-soft); color: var(--copl-accent); }
.copl-tile--success .copl-tile-icon { background: var(--copl-success-soft); color: #047857; }
.copl-tile--warn    .copl-tile-icon { background: var(--copl-warn-soft); color: #b45309; }
.copl-tile--accent  .copl-tile-icon { background: rgba(124, 58, 237, .12); color: #7c3aed; }

/* Analytics grid — explicit 4-col on wide viewports so the four detail
   cards (Category health · Operational density · Specialty mix · Geographic
   reach) align in a single row. Wide bar blocks span 2 of those 4 cols
   via --double; full-width summary rows use --full. */
.copl-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}
@media (max-width: 1100px) {
    .copl-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .copl-overview-grid { grid-template-columns: 1fr; gap: .75rem; }
}
.copl-overview-block {
    background: linear-gradient(180deg, var(--copl-surface, #fff), var(--copl-surface-soft) 96%);
    border: 1px solid var(--copl-border);
    border-radius: 18px;
    padding: 1.25rem 1.25rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.copl-overview-block:hover {
    transform: translateY(-1px);
    border-color: var(--copl-border-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -16px rgba(15, 23, 42, .12);
}
/* Hairline separator between header and body for clearer visual hierarchy */
.copl-overview-block-head {
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--copl-border);
}
/* Span modifiers for the 4-col grid:
     --double      → 2 of 4 cols (wide bar blocks: Phase distribution, Activity tiers)
     --full        → full-row span (operational summaries like Stuck breakdown)
     --row-start   → forces this card to begin a fresh row (col 1), so the
                     four single-col detail cards stay aligned even when the
                     preceding wide-bar row is uneven (e.g. only one --double
                     block present). */
.copl-overview-block--double    { grid-column: span 2; }
.copl-overview-block--full      { grid-column: 1 / -1; }
.copl-overview-block--row-start { grid-column-start: 1; }
@media (max-width: 1100px) {
    .copl-overview-block--row-start { grid-column-start: auto; }
}
@media (max-width: 540px) {
    .copl-overview-block--double,
    .copl-overview-block--full { grid-column: auto; }
}

/* Equal-width pair row — locks two cards (e.g. Category health + Top clinics)
   into a guaranteed 50/50 split regardless of parent auto-placement. */
.copl-overview-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.copl-overview-pair > .copl-overview-block { grid-column: auto; }
@media (max-width: 540px) {
    .copl-overview-pair { grid-template-columns: 1fr; gap: .75rem; }
}
.copl-overview-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .15rem;
    flex-wrap: wrap;
}
.copl-overview-block-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--copl-text);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.copl-overview-block-title i { color: var(--copl-accent); font-size: .8rem; }
.copl-overview-block-sub {
    font-size: .65rem;
    color: var(--copl-muted);
    font-weight: 500;
}

/* Phase distribution bar */
.copl-phase-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 36px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--copl-border);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .04);
}
.copl-phase-bar-seg {
    background: var(--seg-color, var(--copl-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: width .8s cubic-bezier(.4, 0, .2, 1), filter .15s ease;
    white-space: nowrap;
    padding: 0 .5rem;
    overflow: hidden;
    min-width: 0;
}
.copl-phase-bar-seg:hover { filter: brightness(1.07); }
.copl-phase-bar-seg + .copl-phase-bar-seg { border-left: 2px solid var(--copl-surface); }
.copl-phase-bar-count {
    background: rgba(255, 255, 255, .25);
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .6rem;
    font-variant-numeric: tabular-nums;
}

.copl-overview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .35rem;
}
.copl-overview-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--copl-sub);
    font-weight: 500;
}
.copl-overview-legend-item strong {
    color: var(--copl-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.copl-overview-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.copl-overview-legend-pct {
    color: var(--copl-muted);
    font-size: .65rem;
    margin-left: .15rem;
}
.copl-overview-legend-range {
    color: var(--copl-muted);
    font-size: .62rem;
    font-weight: 500;
}

/* Group health rows */
.copl-group-health {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.copl-health-row,
a.copl-health-row {
    display: grid;
    grid-template-columns: 28px minmax(110px, 1fr) minmax(0, 1.2fr) auto auto;
    align-items: center;
    column-gap: .65rem;
    padding: .5rem .7rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-left: 3px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .18s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-align: left;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.copl-health-row:hover,
a.copl-health-row:hover {
    border-color: var(--copl-accent);
    border-left-color: var(--copl-accent);
    background: var(--copl-accent-soft);
    transform: translateX(2px);
    box-shadow: 0 6px 14px -10px rgba(15, 23, 42, .18);
}
.copl-health-row.is-active {
    background: var(--copl-accent-soft);
    border-color: var(--copl-accent);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .25);
}
.copl-health-row.is-complete {
    background: var(--copl-success-soft);
    border-color: rgba(16, 185, 129, .25);
}
.copl-health-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
}
.copl-health-row.is-complete .copl-health-icon { background: rgba(16, 185, 129, .15); color: #047857; }
.copl-health-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--copl-text);
    letter-spacing: -.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copl-health-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--copl-border);
    overflow: hidden;
}
.copl-health-bar > span {
    display: block;
    height: 100%;
    background: var(--copl-accent);
    border-radius: 999px;
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}
.copl-health-row.is-complete .copl-health-bar > span { background: var(--copl-success); }
.copl-health-num {
    font-size: .72rem;
    color: var(--copl-sub);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.copl-health-num strong { color: var(--copl-text); font-weight: 700; }
.copl-health-num span { color: var(--copl-muted); }
.copl-health-percent {
    font-size: .7rem;
    font-weight: 700;
    color: var(--copl-accent);
    background: var(--copl-accent-soft);
    padding: .1rem .5rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.copl-health-row.is-complete .copl-health-percent {
    color: #047857;
    background: rgba(16, 185, 129, .15);
}
@media (max-width: 540px) {
    .copl-health-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }
    .copl-health-bar, .copl-health-num { display: none; }
}

/* Completion buckets bar */
.copl-distrib {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--copl-border);
}
.copl-distrib-seg {
    background: var(--seg-color, var(--copl-accent));
    transition: width .6s cubic-bezier(.4, 0, .2, 1), filter .15s ease;
}
.copl-distrib-seg:hover { filter: brightness(1.08); }
.copl-distrib-seg + .copl-distrib-seg { border-left: 2px solid var(--copl-surface); }

/* Connectivity tiles */
.copl-connectivity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .55rem;
    margin-top: .65rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--copl-border);
}
.copl-conn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 10px;
}
.copl-conn > i {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.copl-conn--ehr > i    { background: var(--copl-warn-soft);    color: #b45309; }
.copl-conn--sub > i    { background: rgba(124, 58, 237, .12);  color: #7c3aed; }
.copl-conn--lead > i   { background: var(--copl-accent-soft);  color: var(--copl-accent); }
.copl-conn--assign > i { background: var(--copl-info-soft);    color: #0369a1; }
.copl-conn-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--copl-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.copl-conn-lbl {
    font-size: .65rem;
    font-weight: 600;
    color: var(--copl-sub);
    margin-top: 1px;
    display: block;
}

/* ── Operational density block (advanced analytics row) ──
   Ratio tiles (.copl-tile--ratio) show one decimal value with a small
   "per clinic" / "per provider" denom tag, re-using the existing tile
   chrome but with tighter typography so four can sit on one line on
   typical desktops without dominating the surface. */
.copl-density-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .65rem;
}
.copl-tile--ratio .copl-tile-num {
    font-size: 1.45rem;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
}
.copl-tile-denom {
    font-size: .62rem;
    font-weight: 700;
    color: var(--copl-sub);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.45;
}

/* Top-clinics ranked list — ordered list with positional badge, name,
   relative comparison bar, count, share %, and tiny providers/locations
   meta tail. Lays out as a single CSS grid so every column aligns. */
.copl-rank {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--copl-border);
}
.copl-rank-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}
.copl-rank-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--copl-text);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    letter-spacing: -.005em;
}
.copl-rank-title i { color: #b45309; }
.copl-rank-sub {
    font-size: .68rem;
    color: var(--copl-sub);
}
.copl-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.copl-rank-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1.4fr) minmax(80px, 1.6fr) auto auto auto;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.copl-rank-row:hover { border-color: var(--copl-border-strong); background: var(--copl-surface-soft); }
.copl-rank-pos {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 800;
    color: var(--copl-accent);
    background: var(--copl-accent-soft);
    font-variant-numeric: tabular-nums;
}
.copl-rank-row:nth-child(1) .copl-rank-pos { background: rgba(245, 158, 11, .14); color: #b45309; }
.copl-rank-name {
    text-decoration: none;
    color: var(--copl-text);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.copl-rank-name-main {
    font-size: .85rem;
    font-weight: 600;
    color: var(--copl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.005em;
}
.copl-rank-name-sub {
    font-size: .65rem;
    font-weight: 500;
    color: var(--copl-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.copl-rank-name:hover .copl-rank-name-main { color: var(--copl-accent); }
.copl-rank-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--copl-border);
    overflow: hidden;
    min-width: 60px;
}
.copl-rank-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--copl-accent), #818cf8);
    border-radius: inherit;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.copl-rank-num {
    font-size: .82rem;
    font-weight: 700;
    color: var(--copl-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.1;
}
.copl-rank-num strong { display: block; }
.copl-rank-num-sub {
    font-size: .6rem;
    font-weight: 600;
    color: var(--copl-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.copl-rank-share {
    font-size: .72rem;
    font-weight: 700;
    color: var(--copl-sub);
    background: var(--copl-surface-soft);
    border-radius: 999px;
    padding: 2px 9px;
    border: 1px solid var(--copl-border);
    font-variant-numeric: tabular-nums;
}
.copl-rank-meta {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: .7rem;
    color: var(--copl-sub);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.copl-rank-meta i { color: var(--copl-muted); margin-right: 2px; font-size: .75rem; }
@media (max-width: 760px) {
    .copl-rank-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
    .copl-rank-bar, .copl-rank-meta { display: none; }
}

/* ── Specialty mix block ──
   Horizontal bar chart for taxonomy distribution. Keeps the same row
   metaphor as ``.copl-rank`` but the comparison is intra-row (length =
   percent) rather than relative-to-leader, so we drop the position badge
   and tighten the column count. */
.copl-specbar-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.copl-specbar-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.3fr) minmax(80px, 2fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 10px;
}
.copl-specbar-row--other { background: var(--copl-surface-soft); }
.copl-specbar-row--other .copl-specbar-name { color: var(--copl-muted); font-style: italic; }
.copl-specbar-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--copl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.005em;
}
.copl-specbar-name i { color: var(--copl-muted); margin-right: 4px; }
.copl-specbar-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--copl-border);
    overflow: hidden;
}
.copl-specbar-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: inherit;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.copl-specbar-row--other .copl-specbar-bar > span {
    background: linear-gradient(90deg, var(--copl-muted), #cbd5e1);
}
.copl-specbar-num {
    font-size: .78rem;
    font-weight: 700;
    color: var(--copl-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
}
.copl-specbar-pct {
    font-size: .64rem;
    color: var(--copl-muted);
    font-weight: 600;
    background: var(--copl-surface-soft);
    border: 1px solid var(--copl-border);
    border-radius: 999px;
    padding: 1px 7px;
}
.copl-specbar-empty {
    padding: 1rem .25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Geographic reach block ──
   Headline city count + a horizontal multi/single/no-city split, then a
   compact "most-covered cities" pill list. Keeps to one column on
   mobile and side-by-side with the specialty block on desktop (its
   parent ``.copl-overview-grid`` already enforces that). */
.copl-geo-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding-bottom: .85rem;
    border-bottom: 1px dashed var(--copl-border);
}
.copl-geo-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.copl-geo-headline-num {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--copl-text);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--copl-accent), #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.copl-geo-headline-lbl {
    font-size: .62rem;
    font-weight: 700;
    color: var(--copl-sub);
    margin-top: .35rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.copl-geo-split {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.copl-geo-split-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.copl-geo-split-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
}
.copl-geo-split-dot--multi  { background: var(--copl-accent); }
.copl-geo-split-dot--single { background: var(--copl-info); }
.copl-geo-split-dot--none   { background: var(--copl-muted); }
.copl-geo-split-lbl {
    color: var(--copl-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copl-geo-split-num {
    color: var(--copl-text);
    font-weight: 700;
}
.copl-geo-split-of {
    color: var(--copl-muted);
    font-size: .68rem;
    font-weight: 600;
}
.copl-geo-cities {
    margin-top: .85rem;
}
.copl-geo-cities-title {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    color: var(--copl-sub);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .5rem;
}
.copl-geo-cities-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.copl-geo-city {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--copl-text);
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 999px;
    padding: 4px 10px 4px 9px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.copl-geo-city:hover {
    border-color: var(--copl-border-strong);
    background: var(--copl-surface-soft);
}
.copl-geo-city > i {
    color: var(--copl-accent);
    font-size: .8rem;
}
.copl-geo-city-name {
    color: var(--copl-text);
}
.copl-geo-city-count {
    color: var(--copl-accent);
    background: var(--copl-accent-soft);
    border-radius: 999px;
    padding: 0 7px;
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}
@media (max-width: 520px) {
    .copl-geo-summary { grid-template-columns: 1fr; gap: .85rem; }
    .copl-geo-headline { align-items: center; text-align: center; }
}

/* Stuck breakdown */
.copl-stuck-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .45rem;
}
.copl-stuck-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 10px;
}
.copl-stuck-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}
.copl-stuck-name {
    font-size: .75rem;
    font-weight: 600;
    color: var(--copl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copl-stuck-count {
    font-size: .7rem;
    font-weight: 700;
    color: #b45309;
    background: var(--copl-warn-soft);
    padding: .1rem .55rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Toolbar additions: sort + density + reset cluster
   The tools cluster is pushed to the right and visually separated
   from the filter groups by a hairline divider so the bar reads as
   two halves: filter (left) · view-controls (right).
   ============================================================ */

.copl-toolbar-tools {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    padding-left: .65rem;
    position: relative;
}
.copl-toolbar-tools::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--copl-border);
}
@media (max-width: 1100px) {
    .copl-toolbar-tools {
        margin-left: 0;
        padding-left: 0;
        flex-wrap: wrap;
    }
    .copl-toolbar-tools::before { display: none; }
}

.copl-sort { position: relative; }
.copl-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .85rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border-strong);
    border-radius: 10px;
    font-size: .73rem;
    font-weight: 600;
    color: var(--copl-text);
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.copl-sort-btn:hover {
    border-color: rgba(99, 102, 241, .45);
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}
.copl-sort-btn > i:first-child { color: var(--copl-muted); font-size: .85rem; }
.copl-sort-btn:hover > i:first-child { color: var(--copl-accent); }
.copl-sort-btn-label { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.copl-sort-btn-chev { font-size: .65rem; color: var(--copl-muted); transition: transform .15s ease; }
.copl-sort-btn[aria-expanded="true"] {
    border-color: rgba(99, 102, 241, .55);
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
}
.copl-sort-btn[aria-expanded="true"] .copl-sort-btn-chev { transform: rotate(180deg); color: var(--copl-accent); }

.copl-sort-menu {
    min-width: 220px;
    border: 1px solid var(--copl-border-strong);
    border-radius: 12px;
    padding: .35rem !important;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .04);
}
.copl-sort-header {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--copl-muted);
    padding: .4rem .65rem .25rem;
}
.copl-sort-item {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    border-radius: 8px;
    font-size: .76rem;
    color: var(--copl-text);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
}
.copl-sort-item:hover { background: var(--copl-accent-soft); color: var(--copl-accent); }
.copl-sort-item.is-active { background: var(--copl-accent-soft); color: var(--copl-accent); font-weight: 600; }
.copl-sort-item > i:first-child { font-size: .85rem; }
.copl-sort-item-tick { margin-left: auto; color: var(--copl-success); font-size: .9rem; }

.copl-density {
    display: inline-flex;
    align-items: center;
    height: 38px;
    background: var(--copl-surface-soft);
    border: 1px solid var(--copl-border);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}
.copl-density-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--copl-sub);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    font-size: .9rem;
}
.copl-density-btn:hover { color: var(--copl-text); }
.copl-density-btn.is-active {
    background: var(--copl-surface);
    color: var(--copl-accent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .04);
}

/* ── Directory view-mode toggle (Comfortable ↔ Compact) ───────
   Pill bar that flips the All Clinics page between cards and
   table. Sibling of `.copl-density` — same visual register but
   horizontal, right-aligned, and label-bearing. */
.cdir-view-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}
.cdir-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--copl-sub);
    background: var(--copl-surface);
    border: 1px solid var(--copl-border-strong);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.cdir-view-btn:first-child {
    border-radius: .5rem 0 0 .5rem;
    border-right-width: 0;
}
.cdir-view-btn:last-child {
    border-radius: 0 .5rem .5rem 0;
}
.cdir-view-btn:hover { color: #4338ca; background: #f5f7ff; }
.cdir-view-btn.is-active {
    color: #4338ca;
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .18);
}
.cdir-view-btn i { font-size: .95rem; }

.copl-toolbar-reset {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--copl-sub);
    background: var(--copl-surface);
    border: 1px solid var(--copl-border-strong);
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.copl-toolbar-reset:hover {
    color: var(--copl-danger);
    border-color: rgba(239, 68, 68, .55);
    background: var(--copl-danger-soft);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.copl-list-footer {
    margin-top: 1rem;
    padding: .6rem 1rem;
    text-align: center;
    font-size: .72rem;
    color: var(--copl-muted);
    background: var(--copl-surface-soft);
    border: 1px dashed var(--copl-border);
    border-radius: 10px;
}
.copl-list-footer strong {
    color: var(--copl-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Compact density mode — true one-liner row.
   Strips the row down to: small ring · name+stage · 4 micro
   progress pills · arrow. Hides next-up, progress bars, and
   secondary chips so each row collapses to ~50px tall.
   ============================================================ */

.copl-list.is-compact .copl-card { border-radius: 12px; }
.copl-list.is-compact .copl-row {
    grid-template-columns: auto minmax(160px, 1.05fr) minmax(0, 2fr) auto;
    gap: .75rem;
    padding: .45rem .7rem .45rem .8rem;
    align-items: center;
}

/* Ring — slimmer */
.copl-list.is-compact .copl-ring-wrap { width: 46px; height: 46px; }
.copl-list.is-compact .copl-ring circle { stroke-width: 11; }
.copl-list.is-compact .copl-ring-percent { font-size: .75rem; }
.copl-list.is-compact .copl-ring-percent span { font-size: .48rem; }
.copl-list.is-compact .copl-ring-sub { display: none; }

/* Identity — single line, only stage + flag badges visible */
.copl-list.is-compact .copl-card-identity { gap: .2rem; }
.copl-list.is-compact .copl-card-name { font-size: .82rem; }
.copl-list.is-compact .copl-card-meta {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: .25rem;
}
.copl-list.is-compact .copl-card-since,
.copl-list.is-compact .copl-foot-meta,
.copl-list.is-compact .copl-chip { display: none; }
.copl-list.is-compact .copl-card-stage,
.copl-list.is-compact .copl-flag-badge {
    padding: .08rem .42rem;
    font-size: .54rem;
}

/* Group pills — micro single-line: [icon] Label 1/4 */
.copl-list.is-compact .copl-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
}
.copl-list.is-compact .copl-group {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: .35rem;
    row-gap: 0;
    padding: .28rem .45rem;
    min-height: 0;
    border-radius: 7px;
}
.copl-list.is-compact .copl-group-icon {
    grid-column: 1; grid-row: 1;
    width: 18px; height: 18px;
    font-size: .58rem;
    border-radius: 5px;
    margin-top: 0;
    align-self: center;
}
.copl-list.is-compact .copl-group-text {
    grid-column: 2 / 4;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
}
.copl-list.is-compact .copl-group-label {
    font-size: .6rem;
    line-height: 1.3;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.copl-list.is-compact .copl-group-count { font-size: .58rem; }
.copl-list.is-compact .copl-group-bar { display: none; }

/* Hide next-up, the bottom strip, and the completion checkmark */
.copl-list.is-compact .copl-next,
.copl-list.is-compact .copl-card-strip { display: none; }
.copl-list.is-compact .copl-group.is-complete .copl-group-count::after { content: none; }
.copl-list.is-compact .copl-card-open {
    width: 26px; height: 26px;
    font-size: .75rem;
    border-radius: 7px;
}

@media (max-width: 1180px) {
    .copl-list.is-compact .copl-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}
@media (max-width: 820px) {
    .copl-list.is-compact .copl-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .copl-list.is-compact .copl-groups { grid-template-columns: 1fr; }
}

/* ── Pipeline stage card grab cursor ─────────────────────── */
.pipeline-stage-card {
    cursor: grab;
}
.pipeline-stage-card.sortable-chosen {
    cursor: grabbing;
}

/* ── Pipeline board toast ────────────────────────────────── */
.pipeline-board-toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    font-size: .8rem;
    z-index: 1090;
}
.pipeline-board-toast.toast-success {
    background: #e6f6ec;
    color: #1a7f4d;
}
.pipeline-board-toast.toast-error {
    background: #fee;
    color: #c33;
}

/* ── Empty board state ──────────────────────────────────── */
.empty-board-state {
    border: 1px dashed rgba(0,0,0,0.08);
    border-radius: 1rem;
    background: #fafbfc;
    padding: 2.5rem 1rem;
}
.empty-board-state h6 {
    font-weight: 600;
}



/* ============================================================
   Onboarding Pipeline — sectioned list (group-by stage / phase)
   ============================================================ */

.copl-list--sectioned {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.copl-section {
    background: var(--copl-surface, #fff);
    border: 1px solid var(--copl-border, #eef0f3);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.copl-section-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem 1rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--section-color, #6366f1) 8%, var(--copl-surface, #fff)) 0%,
        var(--copl-surface, #fff) 100%);
    border-bottom: 2px solid var(--section-color, var(--copl-accent, #6366f1));
    border-bottom-color: color-mix(in srgb, var(--section-color, #6366f1) 50%, transparent);
}
.copl-section-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--section-soft, var(--copl-accent-soft, #eef2ff));
    color: var(--section-color, var(--copl-accent, #6366f1));
}
.copl-section-title {
    flex: 1;
    font-size: .9rem;
    font-weight: 700;
    color: var(--copl-text, #0f172a);
    letter-spacing: -.005em;
}
.copl-section-count {
    font-size: .68rem;
    font-weight: 700;
    color: var(--section-color, var(--copl-accent, #6366f1));
    background: var(--section-soft, var(--copl-accent-soft, #eef2ff));
    padding: .15rem .55rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.copl-section-body {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--copl-surface-soft, #fafbfc);
}
.copl-section-body .copl-card { box-shadow: none; }

/* ============================================================
   Pagination control
   ============================================================ */

.copl-paginator {
    margin-top: .85rem;
}
.copl-page-list {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    background: var(--copl-surface, #fff);
    border: 1px solid var(--copl-border, #eef0f3);
    border-radius: 999px;
    padding: .25rem .35rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.copl-paginator { display: flex; justify-content: center; }

.copl-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--copl-sub, #64748b);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    font-size: .9rem;
}
.copl-page-btn:hover {
    background: var(--copl-accent-soft, #eef2ff);
    color: var(--copl-accent, #6366f1);
}
.copl-page-btn.is-disabled {
    color: var(--copl-muted, #94a3b8);
    opacity: .5;
    cursor: not-allowed;
}
.copl-page-info {
    padding: 0 .65rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--copl-sub, #64748b);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.copl-page-info strong {
    color: var(--copl-text, #0f172a);
    font-weight: 700;
}


/* ════ Portfolio overview CTA (2027) ════ */
/* Soft-pill link living in .copl-overview-head; arrow nudges on hover. */
.copl-overview-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem .45rem .75rem;
    border-radius: 999px;
    background: var(--copl-accent-soft, #eef2ff);
    color: var(--copl-accent, #6366f1);
    border: 1px solid transparent;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .005em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.copl-overview-cta i { font-size: .8rem; line-height: 1; }
.copl-overview-cta i:last-child { transition: transform .2s ease; }
.copl-overview-cta:hover {
    background: var(--copl-accent, #6366f1);
    color: #fff;
    border-color: var(--copl-accent, #6366f1);
    box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .55);
}
.copl-overview-cta:hover i:last-child { transform: translateX(3px); }
.copl-overview-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}


/* ════ Platform hub tabs (2027) ════ */
/* Three-tab nav above platform-admin hub pages. Card-row of icon + stacked text. */
.platform-hub-tabs {
    --copl-surface: #fff;
    --copl-surface-soft: #fafbfc;
    --copl-border: #eef0f3;
    --copl-border-strong: #e5e7eb;
    --copl-text: #0f172a;
    --copl-sub: #64748b;
    --copl-muted: #94a3b8;
    --copl-accent: #6366f1;
    --copl-accent-soft: #eef2ff;

    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem;
    margin-bottom: 1rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 18px 36px -28px rgba(15, 23, 42, .2);
}

.platform-hub-tab {
    flex: 1 1 200px;
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .75rem;
    padding: .65rem .9rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--copl-text);
    text-decoration: none;
    position: relative;
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        color .18s ease;
}
.platform-hub-tab-icon {
    grid-row: 1 / span 2;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .04);
    color: var(--copl-sub);
    font-size: 1rem;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .03);
}
.platform-hub-tab-label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--copl-text);
    /* Ellipsize at narrow widths so tabs keep a stable height */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.platform-hub-tab-sub {
    font-size: .65rem;
    font-weight: 500;
    color: var(--copl-muted);
    letter-spacing: .02em;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.platform-hub-tab:hover {
    background: var(--copl-surface-soft);
    transform: translateY(-1px);
    color: var(--copl-text);
}
.platform-hub-tab:hover .platform-hub-tab-icon {
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
}
.platform-hub-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}

.platform-hub-tab.is-active {
    background: var(--copl-surface-soft);
    border-color: rgba(99, 102, 241, .35);
    /* Accent left-stripe via inset shadow keeps border math intact */
    box-shadow:
        inset 3px 0 0 0 var(--copl-accent),
        0 1px 2px rgba(15, 23, 42, .04),
        0 10px 24px -16px rgba(99, 102, 241, .35);
    padding-left: 1.1rem;
}
.platform-hub-tab.is-active .platform-hub-tab-icon {
    background: var(--copl-accent-soft);
    color: var(--copl-accent);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .25);
}
.platform-hub-tab.is-active .platform-hub-tab-label { color: var(--copl-text); }

@media (max-width: 640px) {
    .platform-hub-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .platform-hub-tab { flex: initial; min-height: 56px; }
    /* Dashboard stays full-width on row 1 since it tends to be the hub default */
    .platform-hub-tab:first-child { grid-column: 1 / -1; }
    .platform-hub-tab-sub { display: none; }
}

/* ── Directory layout toggle (Card / Table) ───────────────────────────
   Segment switch that lives in the directory toolbar's actions cluster.
   Pure layout pivot — the same queryset feeds both segments, so swapping
   the active button just changes how each clinic is rendered. */
.cdir-layout-toggle,
.list-view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--copl-surface-soft);
    border: 1px solid var(--copl-border-strong);
    border-radius: 999px;
    gap: 2px;
}
.cdir-layout-toggle__btn,
.list-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 28px;
    padding: 0 .7rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--copl-sub);
    background: transparent;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.cdir-layout-toggle__btn { height: 30px; padding: 0 .8rem; font-size: .75rem; }
.cdir-layout-toggle__btn i,
.list-view-toggle__btn i { font-size: .8rem; opacity: .85; }
.cdir-layout-toggle__btn:hover,
.list-view-toggle__btn:hover { color: var(--copl-text); }
.cdir-layout-toggle__btn.is-active,
.list-view-toggle__btn.is-active {
    color: var(--copl-accent);
    background: var(--copl-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cdir-layout-toggle__btn.is-active i,
.list-view-toggle__btn.is-active i { opacity: 1; }

/* Floating header strip used above board/card views that lack a table card.
   Mirrors the look of .fb-feed-header so list pages feel consistent. */
.list-view-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    background: var(--copl-surface);
    border: 1px solid var(--copl-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.list-view-bar__title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.list-view-bar__title h6 { font-size: .9rem; }
.list-view-bar__title > i { font-size: 1rem; }
.list-view-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── Sync source flag pill (CRM / EHR / CRM > EHR / EHR > CRM) ────────
   Compact, directional badge that tags every directory row/card with
   where the data lives and which way it flows. Single-source variants
   show an icon + label; directional variants show two chips with an
   arrow between them. Shared across the table cell and card layouts. */
.sync-flag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 3px 8px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #fff;
    white-space: nowrap;
}
.sync-flag__icon { font-size: .72rem; opacity: .9; }
.sync-flag__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    background: rgba(255, 255, 255, .65);
}
.sync-flag__arrow {
    font-size: .7rem;
    opacity: .85;
}

.sync-flag--crm {
    color: #1d4ed8;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: rgba(59, 130, 246, .3);
}
.sync-flag--ehr {
    color: #6d28d9;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: rgba(139, 92, 246, .35);
}
.sync-flag--crm-to-ehr {
    color: #047857;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: rgba(16, 185, 129, .35);
}
.sync-flag--crm-to-ehr .sync-flag__chip { background: rgba(16, 185, 129, .15); }
.sync-flag--ehr-to-crm {
    color: #be185d;
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border-color: rgba(236, 72, 153, .35);
}
.sync-flag--ehr-to-crm .sync-flag__chip { background: rgba(236, 72, 153, .15); }


/* ── Directory card grid (Compact view, ?view=card) ───────────────────
   Premium-feel alternative to the dense table. Each card composes:
     • Soft surface with a flag-tinted ambient glow at the top edge
     • Identity row (avatar + name + monospace slug)
     • Sync-source flag + lifecycle badge
     • Three pastel stat tiles in the EHR-mirror visual family
       (sky / mint / peach), so the dashboard reads as one design
     • Meta lines (city, admin email, plan) with consistent iconography
     • Dashed footer CTA that nudges right on hover
   Every card is a stretched link target — the whole surface is clickable. */
.cdir-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.cdir-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.1rem .9rem;
    background: #fff;
    border: 1px solid var(--copl-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cdir-card:hover {
    border-color: var(--copl-border-strong);
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .10), 0 2px 4px -2px rgba(15, 23, 42, .04);
    transform: translateY(-1px);
}

/* No ambient glow — kept the element in markup so the layout is stable. */

/* ============================================================================
   Sales Leads · cards-view grid
   ============================================================================ */
.lead-grid .lead-card {
    border-radius: 18px;
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, .08));
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
    background: var(--bs-card-bg, #fff);
}
.lead-grid .lead-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .18), 0 4px 8px -4px rgba(15, 23, 42, .06);
    border-color: rgba(13, 110, 253, .25);
}

.lead-card__avatar {
    box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}
.lead-card__status {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: .22rem .55rem;
}
.lead-card__source,
.lead-card__loc {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .65rem;
    color: var(--text-sub, #6c757d);
    font-weight: 600;
}
.lead-card__source i,
.lead-card__loc i {
    font-size: .6rem;
    opacity: .8;
}
.lead-card__contact {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    font-size: .72rem;
    color: var(--text-heading, #1a1a2e);
    font-weight: 600;
    line-height: 1.3;
}
.lead-card__contact i { color: rgba(13, 110, 253, .8); font-size: .7rem; }
.lead-card__contact-name { color: var(--text-heading, #1a1a2e); }
.lead-card__contact-email { color: var(--text-sub, #6c757d); font-weight: 500; font-size: .65rem; }
.lead-card__contact-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--bs-border-color, rgba(15, 23, 42, .25));
}

.lead-card__stats { gap: .5rem; }
.lead-card__stat-icon {
    background: linear-gradient(135deg, rgba(13, 110, 253, .12), rgba(13, 202, 240, .1));
    color: #0d6efd;
}
.lead-card .lead-card__stat--score .lead-card__stat-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, .14), rgba(168, 85, 247, .12));
    color: #6366f1;
}
.lead-card .lead-card__stat--mrr .lead-card__stat-icon {
    background: linear-gradient(135deg, rgba(25, 135, 84, .14), rgba(13, 202, 240, .12));
    color: #198754;
}
.lead-card .lead-card__stat--size .lead-card__stat-icon {
    background: linear-gradient(135deg, rgba(253, 126, 20, .14), rgba(220, 53, 69, .1));
    color: #fd7e14;
}

.lead-card__score-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    overflow: hidden;
    position: relative;
    margin: .25rem 0 .1rem;
}
.lead-card__score-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}
.lead-card__score-fill.is-hot   { background: linear-gradient(90deg, #ef4444, #f97316); }
.lead-card__score-fill.is-warm  { background: linear-gradient(90deg, #f59e0b, #f97316); }
.lead-card__score-fill.is-cool  { background: linear-gradient(90deg, #06b6d4, #0d6efd); }
.lead-card__score-fill.is-cold  { background: linear-gradient(90deg, #94a3b8, #64748b); }

.lead-card__pipeline {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .6rem;
    border-radius: 10px;
    background: rgba(99, 102, 241, .07);
    border: 1px solid rgba(99, 102, 241, .14);
    font-size: .68rem;
    font-weight: 600;
}
.lead-card__pipeline-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.lead-card__pipeline-stage {
    color: var(--text-heading, #1a1a2e);
    font-weight: 700;
}
.lead-card__pipeline-pipe {
    margin-left: auto;
    color: var(--text-sub, #6c757d);
    font-weight: 500;
    font-size: .62rem;
}

.lead-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--bs-border-color, rgba(15, 23, 42, .08));
    font-size: .65rem;
    color: var(--text-sub, #6c757d);
}
.lead-card__assignee {
    display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
}
.lead-card__assignee-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #0069A6, #0d6efd);
    color: #fff; font-size: .55rem; font-weight: 800; letter-spacing: .02em;
    flex-shrink: 0;
}
.lead-card__assignee-avatar--unassigned {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--text-sub, #6c757d);
}
.lead-card__assignee-name {
    font-weight: 600;
    color: var(--text-heading, #1a1a2e);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-card__age {
    display: inline-flex; align-items: center; gap: .25rem;
    flex-shrink: 0;
}
.lead-card__age i { font-size: .6rem; }

/* ============================================================================
   Sales Lead Routing Rules · cards-view grid
   ============================================================================ */
.lead-rule-grid .rule-card {
    border-radius: 18px;
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, .08));
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    background: var(--bs-card-bg, #fff);
    overflow: hidden;
}
.lead-rule-grid .rule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .18), 0 4px 8px -4px rgba(15, 23, 42, .06);
    border-color: rgba(99, 102, 241, .28);
}
.lead-rule-grid .rule-card--paused { opacity: .8; }

.lead-rule-grid .rule-card__avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 6px 14px rgba(99, 102, 241, .25);
    position: relative;
}
.lead-rule-grid .rule-card__priority {
    position: absolute;
    top: -4px; right: -4px;
    background: #fff;
    color: #6366f1;
    font-size: .55rem;
    font-weight: 800;
    line-height: 1;
    padding: .2rem .35rem;
    border-radius: 999px;
    border: 1.5px solid #6366f1;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .1);
}

.lead-rule-grid .rule-card__strategy {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
}
.lead-rule-grid .rule-card__strategy i { font-size: .6rem; }
.lead-rule-grid .rule-card__strategy--round_robin {
    background: rgba(99, 102, 241, .12); color: #6366f1;
}
.lead-rule-grid .rule-card__strategy--least_loaded {
    background: rgba(13, 202, 240, .14); color: #0891b2;
}
.lead-rule-grid .rule-card__strategy--specific_user {
    background: rgba(253, 126, 20, .14); color: #fd7e14;
}

.lead-rule-grid .rule-card__desc {
    margin: .35rem 0 0;
    font-size: .72rem;
    color: var(--text-sub, #6c757d);
    line-height: 1.4;
}

.lead-rule-grid .rule-card__stats { gap: .5rem; }
.lead-rule-grid .rule-card__stat-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(168, 85, 247, .12));
    color: #6366f1;
}

.lead-rule-grid .rule-card__assignees {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, .03);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, .06));
}
.lead-rule-grid .rule-card__assignees--empty {
    color: var(--text-sub, #6c757d);
    font-size: .7rem;
    background: rgba(253, 126, 20, .06);
    border-color: rgba(253, 126, 20, .14);
}
.lead-rule-grid .rule-card__assignee-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #0069A6, #0d6efd);
    color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .02em;
    border: 2px solid var(--bs-card-bg, #fff);
    margin-left: -6px;
    flex-shrink: 0;
}
.lead-rule-grid .rule-card__assignee-avatar:first-child { margin-left: 0; }
.lead-rule-grid .rule-card__assignee-avatar--more {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--text-sub, #6c757d);
    font-weight: 700;
    font-size: .58rem;
}
.lead-rule-grid .rule-card__assignee-name {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-heading, #1a1a2e);
    margin-left: .3rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-rule-grid .rule-card__assignee-tag {
    margin-left: auto;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-sub, #6c757d);
    font-weight: 700;
    flex-shrink: 0;
}

.lead-rule-grid .rule-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--bs-border-color, rgba(15, 23, 42, .08));
    font-size: .65rem;
    color: var(--text-sub, #6c757d);
}
.lead-rule-grid .rule-card__last { display: inline-flex; align-items: center; gap: .25rem; }
.lead-rule-grid .rule-card__last i { font-size: .65rem; opacity: .8; }
.lead-rule-grid .rule-card__last strong { color: var(--text-heading, #1a1a2e); font-weight: 700; }
.lead-rule-grid .rule-card__edit {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    color: #6366f1;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, .1);
    transition: background .15s ease;
}
.lead-rule-grid .rule-card__edit:hover { background: rgba(99, 102, 241, .18); color: #4f46e5; }

/* ============================================================================
   Sales Pipelines · board cards (modernized)
   ============================================================================ */
.pipe-card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, .08));
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.pipe-card:hover {
    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .18), 0 2px 6px -2px rgba(15, 23, 42, .06);
    border-color: rgba(99, 102, 241, .22);
}

.pipe-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(15, 23, 42, .06));
    background:
        radial-gradient(circle at 10% 0%, rgba(99, 102, 241, .07), transparent 45%),
        radial-gradient(circle at 90% 100%, rgba(13, 202, 240, .06), transparent 50%),
        var(--bs-card-bg, #fff);
}
.pipe-head-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .3);
}
.pipe-head-text { flex: 1 1 auto; min-width: 0; }
.pipe-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-heading, #1a1a2e);
    line-height: 1.2;
}
.pipe-desc {
    margin: .15rem 0 0;
    font-size: .72rem;
    color: var(--text-sub, #6c757d);
    line-height: 1.4;
}
.pipe-head-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pipe-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-sub, #6c757d);
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, .08));
}
.pipe-stat-pill strong {
    color: var(--text-heading, #1a1a2e);
    font-weight: 800;
}
.pipe-stat-pill i { font-size: .65rem; opacity: .85; }

.pipe-type-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .3rem .65rem;
    border-radius: 999px;
}
.pipe-type-pill--new_business {
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
}
.pipe-type-pill--existing,
.pipe-type-pill--retention,
.pipe-type-pill--upsell {
    background: rgba(13, 202, 240, .14);
    color: #0891b2;
}

.stage-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    gap: .65rem;
    padding: 1.15rem 1.4rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.stage-row::-webkit-scrollbar { height: 6px; }
.stage-row::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .15); border-radius: 999px; }

.stage-col {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .6), transparent),
        color-mix(in srgb, var(--stage-color) 6%, var(--card-bg, #f8f9fa));
    border: 1px solid color-mix(in srgb, var(--stage-color) 18%, var(--bs-border-color, rgba(15, 23, 42, .08)));
    border-radius: 12px;
    padding: .8rem .8rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 160px;
    transition: transform .15s ease, box-shadow .2s ease;
}
.stage-col::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--stage-color);
    border-radius: 12px 12px 0 0;
}
.stage-col:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -10px rgba(15, 23, 42, .15);
}
.stage-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}
.stage-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .73rem;
    font-weight: 800;
    color: var(--text-heading, #1a1a2e);
    line-height: 1.2;
}
.stage-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--stage-color);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 18%, transparent);
}
.stage-count {
    font-size: .65rem;
    font-weight: 800;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--stage-color);
    color: #fff;
    line-height: 1.2;
}
.stage-value {
    font-size: .9rem;
    font-weight: 800;
    color: #198754;
    line-height: 1.2;
}
.stage-value small {
    color: var(--text-sub, #6c757d);
    font-weight: 600;
    font-size: .58rem;
}
.stage-meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .6rem;
    font-weight: 600;
    color: var(--text-sub, #6c757d);
}
.stage-meta i { font-size: .6rem; }
.stage-meta--won i { color: #198754; }
.stage-meta--lost i { color: #dc3545; }
.stage-meta--auto i { color: #0d6efd; }
.stage-bar {
    margin-top: auto;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    overflow: hidden;
    position: relative;
}
.stage-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--stage-color);
}

.pipe-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .8rem 1.4rem;
    border-top: 1px solid var(--bs-border-color, rgba(15, 23, 42, .06));
    background: rgba(15, 23, 42, .015);
    flex-wrap: wrap;
}
.pipe-foot__chips {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.pipe-foot__chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-sub, #6c757d);
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, .08));
}
.pipe-foot__chip strong {
    color: var(--text-heading, #1a1a2e);
    font-weight: 800;
}
.pipe-foot__chip i { font-size: .58rem; }
.pipe-foot__chip--state { padding-left: .55rem; }
.pipe-foot__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pipe-foot__chip--active .pipe-foot__dot { background: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .18); }
.pipe-foot__chip--paused .pipe-foot__dot { background: #adb5bd; }

.pipe-foot__actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pipe-foot__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    padding: .35rem .85rem;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    border: 1px solid transparent;
}
.pipe-foot__btn i { font-size: .68rem; }
.pipe-foot__btn--outline {
    color: #0d6efd;
    border-color: rgba(13, 110, 253, .35);
    background: var(--bs-card-bg, #fff);
}
.pipe-foot__btn--outline:hover {
    background: rgba(13, 110, 253, .08);
    border-color: rgba(13, 110, 253, .55);
}
.pipe-foot__btn--soft {
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
}
.pipe-foot__btn--soft:hover {
    background: rgba(99, 102, 241, .2);
    color: #4f46e5;
}

.pipe-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bs-card-bg, #fff);
    border: 1px dashed var(--bs-border-color, rgba(15, 23, 42, .14));
    border-radius: 18px;
}
.pipe-empty__icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(13, 202, 240, .1));
    color: #6366f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    margin-bottom: .85rem;
}
.pipe-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-heading, #1a1a2e);
}
.pipe-empty__desc {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--text-sub, #6c757d);
    line-height: 1.5;
}
.pipe-empty__desc code {
    font-size: .72rem;
    background: rgba(15, 23, 42, .05);
    padding: .1rem .35rem;
    border-radius: 5px;
}

/* Tighten the pipeline header on small screens */
@media (max-width: 768px) {
    .pipe-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .pipe-head-meta { width: 100%; }
    .pipe-foot { flex-direction: column; align-items: stretch; }
    .pipe-foot__actions { justify-content: flex-end; }
}

[data-theme="dark"] .pipe-card {
    background: var(--dark-bg-surface, #1a1d27);
    border-color: var(--dark-border, rgba(255, 255, 255, 0.08));
}
[data-theme="dark"] .pipe-title { color: var(--dark-text-primary, #f0f2f5); }
[data-theme="dark"] .pipe-desc { color: var(--dark-text-secondary, #9ba3b5); }
[data-theme="dark"] .pipe-stat-pill,
[data-theme="dark"] .pipe-type-pill {
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-text-secondary, #9ba3b5);
    border-color: var(--dark-border, rgba(255, 255, 255, 0.08));
}
[data-theme="dark"] .pipe-stat-pill strong { color: var(--dark-text-primary, #f0f2f5); }
[data-theme="dark"] .stage-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }

[data-theme="dark"] .stage-col {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
        color-mix(in srgb, var(--stage-color) 12%, var(--dark-bg-elevated, #222633));
    border-color: color-mix(in srgb, var(--stage-color) 28%, var(--dark-border, rgba(255, 255, 255, 0.08)));
}
[data-theme="dark"] .stage-col:hover {
    box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .stage-name { color: var(--dark-text-primary, #f0f2f5); }
[data-theme="dark"] .stage-value { color: #4ade80; }
[data-theme="dark"] .stage-value small { color: var(--dark-text-secondary, #9ba3b5); }
[data-theme="dark"] .stage-meta { color: var(--dark-text-secondary, #9ba3b5); }
[data-theme="dark"] .stage-meta--won i { color: #4ade80; }
[data-theme="dark"] .stage-meta--lost i { color: #f87171; }
[data-theme="dark"] .stage-meta--auto i { color: #60a5fa; }
[data-theme="dark"] .stage-bar { background: rgba(255, 255, 255, 0.08); }

[data-theme="dark"] .pipe-foot {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: var(--dark-border, rgba(255, 255, 255, 0.08));
}
[data-theme="dark"] .pipe-foot__chip {
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-text-secondary, #9ba3b5);
    border-color: var(--dark-border, rgba(255, 255, 255, 0.08));
}
[data-theme="dark"] .pipe-foot__chip strong { color: var(--dark-text-primary, #f0f2f5); }
[data-theme="dark"] .pipe-foot__chip--active .pipe-foot__dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22); }
[data-theme="dark"] .pipe-foot__chip--paused .pipe-foot__dot { background: #6b7280; }
[data-theme="dark"] .pipe-foot__btn--outline {
    background: rgba(255, 255, 255, 0.03);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.4);
}
[data-theme="dark"] .pipe-foot__btn--outline:hover {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.6);
}
[data-theme="dark"] .pipe-foot__btn--soft {
    background: rgba(129, 140, 248, 0.18);
    color: #a5b4fc;
}
[data-theme="dark"] .pipe-foot__btn--soft:hover {
    background: rgba(129, 140, 248, 0.28);
    color: #c7d2fe;
}

[data-theme="dark"] .pipe-empty {
    background: var(--dark-bg-surface, #1a1d27);
    border-color: var(--dark-border, rgba(255, 255, 255, 0.14));
}
[data-theme="dark"] .pipe-empty__title { color: var(--dark-text-primary, #f0f2f5); }
[data-theme="dark"] .pipe-empty__desc { color: var(--dark-text-secondary, #9ba3b5); }
[data-theme="dark"] .pipe-empty__desc code {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dark-text-primary, #f0f2f5);
}