/* admin-dfy-pipeline.css — brand tokens from quiz-app-tokens.css (body.quiz-app):
   dark #072B2E, main #5AB774, light #E8FCEC, accent #FEF3A4 */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.quiz-app {
    background: var(--qb-bg);
    color: var(--qb-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

/* Iframe embed (e.g. CRM /crm?section=pipeline): shell already provides navigation */
body.pipeline-embedded .pipeline-back-to-dfy,
body.pipeline-embedded .pipeline-crm-workspace-link {
    display: none !important;
}

/* Dark top bar — same tokens as quiz-app-shell /pages header (quiz-app-tokens.css) */
.pipeline-topbar {
    --pipeline-topbar-control-h: 40px;
    flex-shrink: 0;
    background: var(--qb-header-bg);
    border-bottom: 1px solid var(--qb-header-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    padding: 8px 16px;
    z-index: 100;
}

.pipeline-topbar .pipeline-header {
    margin-bottom: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.pipeline-topbar .pipeline-topbar-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
}

.pipeline-topbar .pipeline-title {
    color: var(--qb-header-text);
}

.pipeline-topbar .pipeline-topbar-chevron {
    color: var(--qb-header-text-muted);
}

.pipeline-topbar .pipeline-topbar-search-icon {
    color: var(--qb-header-text-muted);
}

.pipeline-topbar .pipeline-topbar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--qb-header-text-muted);
    white-space: nowrap;
    align-self: center;
}

.pipeline-topbar .form-input {
    background: var(--qb-header-control-bg);
    border-color: var(--qb-header-control-border);
    color: var(--qb-header-text);
}

.pipeline-topbar .pipeline-search-wrap .form-input {
    box-sizing: border-box;
    height: var(--pipeline-topbar-control-h);
    min-height: var(--pipeline-topbar-control-h);
    padding: 0 12px 0 32px;
    line-height: calc(var(--pipeline-topbar-control-h) - 2px);
}

.pipeline-topbar .form-input::placeholder {
    color: var(--qb-header-text-faint);
}

.pipeline-topbar .form-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 2px rgba(90, 183, 116, 0.35);
}

/* Match search, filters, and buttons to one height */
.pipeline-topbar .dfy-btn {
    box-sizing: border-box;
    min-height: var(--pipeline-topbar-control-h);
    height: var(--pipeline-topbar-control-h);
    padding-top: 0;
    padding-bottom: 0;
}

.pipeline-topbar .dfy-add-deal-split {
    height: var(--pipeline-topbar-control-h);
    min-height: var(--pipeline-topbar-control-h);
    align-items: stretch;
}

.pipeline-topbar .dfy-add-deal-split .dfy-btn {
    height: 100%;
    min-height: 0;
    align-self: stretch;
}

/* Dark chrome only — not dropdown panels inside the switcher (those need normal contrast on white) */
.pipeline-topbar .pipeline-topbar-tools .dfy-btn-secondary,
.pipeline-topbar .pipeline-header > div:first-child > a.dfy-btn-secondary {
    background: var(--qb-header-control-bg);
    color: var(--qb-header-text);
    border: 1px solid var(--qb-header-control-border);
}

.pipeline-topbar .pipeline-topbar-tools .dfy-btn-secondary:hover,
.pipeline-topbar .pipeline-header > div:first-child > a.dfy-btn-secondary:hover {
    background: var(--qb-header-control-bg-hover);
    border-color: rgba(255, 255, 255, 0.38);
}

/* Filters panel (tags + custom fields) is a light surface; Clear must not use header (light-on-light) chrome */
.pipeline-topbar .pipeline-filters-dropdown .dfy-btn-secondary {
    background: var(--qb-surface);
    color: var(--qb-text-secondary);
    border: 1px solid var(--qb-border);
}

.pipeline-topbar .pipeline-filters-dropdown .dfy-btn-secondary:hover {
    background: var(--qb-surface-muted);
    border-color: var(--qb-border-hover);
}

/* Header .form-input uses dark-bar colors; dropdown panels are white — restore readable text/background */
.pipeline-topbar .assigned-filter-list .form-input,
.pipeline-topbar .assigned-filter-list .form-select {
    background: #fff;
    color: #111827;
    border-color: #D1D5DB;
}

.pipeline-topbar .assigned-filter-list .form-input::placeholder {
    color: #9CA3AF;
}

.pipeline-topbar .assigned-filter-list .form-input:focus,
.pipeline-topbar .assigned-filter-list .form-select:focus {
    outline: none;
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
}

.pipeline-topbar #pipelineDropdown.assigned-filter-list.pipeline-dropdown-panel {
    color: var(--qb-text);
    width: min(320px, calc(100vw - 32px));
    min-width: 280px;
    /* Wider + taller than generic .assigned-filter-list (240px) so pipeline list + action buttons fit without scrolling in typical cases */
    max-height: min(75vh, 520px);
}

.pipeline-dropdown-actions {
    border-top: 1px solid #E5E7EB;
    padding: 8px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pipeline-dropdown-action-btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    white-space: nowrap;
}

.pipeline-topbar .form-select {
    background: var(--qb-header-control-bg);
    border-color: var(--qb-header-control-border);
    color: var(--qb-header-text);
    min-height: var(--pipeline-topbar-control-h);
    height: var(--pipeline-topbar-control-h);
}

.pipeline-topbar .form-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 2px rgba(90, 183, 116, 0.35);
}

.pipeline-select-toggle-btn-active {
    background: rgba(90, 183, 116, 0.18) !important;
    border-color: rgba(90, 183, 116, 0.55) !important;
    color: #F3FFF8 !important;
}

.pipeline-select-toggle-btn {
    min-width: 112px;
}

.pipeline-view-toggle {
    display: inline-flex;
    align-items: center;
    height: var(--pipeline-topbar-control-h);
    padding: 3px;
    border: 1px solid var(--qb-header-control-border);
    border-radius: 8px;
    background: var(--qb-header-control-bg);
}

.pipeline-view-toggle-btn {
    height: 32px;
    min-width: 76px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--qb-header-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.pipeline-view-toggle-btn.active {
    background: var(--qb-brand-primary);
    color: #072B2E;
}

.pipeline-view-toggle-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.pipeline-export-dropdown,
.pipeline-actions-dropdown {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.pipeline-export-menu,
.pipeline-actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 248px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
}

.pipeline-export-menu:not([hidden]),
.pipeline-actions-menu:not([hidden]) {
    display: block;
}

.pipeline-export-menu-item,
.pipeline-actions-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.pipeline-export-menu-item:hover:not(:disabled),
.pipeline-export-menu-item:focus-visible,
.pipeline-actions-menu-item:hover:not(:disabled),
.pipeline-actions-menu-item:focus-visible {
    background: #F3F4F6;
    outline: none;
}

.pipeline-export-menu-item:disabled,
.pipeline-actions-menu-item:disabled {
    color: #9CA3AF;
    cursor: not-allowed;
}

.pipeline-actions-trigger-caret {
    margin-left: 2px;
    font-size: 11px;
}

.pipeline-actions-menu {
    min-width: 250px;
}

.pipeline-actions-menu-item i {
    width: 15px;
    color: #6B7280;
    text-align: center;
}

.pipeline-actions-menu-item span {
    min-width: 0;
}

.pipeline-actions-menu-separator {
    height: 1px;
    margin: 4px 6px;
    background: #E5E7EB;
}

.pipeline-bulk-bar[hidden] {
    display: none !important;
}

.pipeline-analytics-view[hidden] {
    display: none !important;
}

.pipeline-analytics-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--qb-bg);
}

.pipeline-analytics-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--qb-surface);
    border-bottom: 1px solid var(--qb-border);
}

.pipeline-analytics-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.pipeline-analytics-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-toolbar .pipeline-analytics-select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: auto;
    min-width: 148px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background-color: var(--qb-surface);
    background-image: linear-gradient(45deg, transparent 50%, #64748B 50%), linear-gradient(135deg, #64748B 50%, transparent 50%);
    background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--qb-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 34px;
    box-shadow: none;
    cursor: pointer;
}

.pipeline-analytics-toolbar .pipeline-analytics-select:focus {
    outline: none;
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
}

.pipeline-analytics-metric-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(88px, 1fr));
    align-items: center;
    gap: 2px;
    width: 196px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: var(--qb-surface-muted);
    box-sizing: border-box;
}

.pipeline-analytics-metric-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--qb-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

.pipeline-analytics-metric-btn.active {
    background: var(--qb-surface);
    color: var(--qb-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.pipeline-analytics-refresh-btn {
    margin-left: auto;
    min-height: 36px;
    height: 36px;
}

.pipeline-analytics-content {
    padding: 16px;
}

.pipeline-analytics-state {
    display: grid;
    place-items: center;
    min-height: 280px;
    color: var(--qb-text-secondary);
    text-align: center;
}

.pipeline-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(128px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pipeline-analytics-kpi {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: var(--qb-surface);
}

.pipeline-analytics-kpi-label {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--qb-text-secondary);
    text-transform: uppercase;
}

.pipeline-analytics-kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.pipeline-analytics-panel {
    grid-column: span 6;
    min-width: 0;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: var(--qb-surface);
    overflow: hidden;
}

.pipeline-analytics-panel.wide {
    grid-column: span 12;
}

.pipeline-analytics-custom-body {
    padding: 16px;
}

.pipeline-analytics-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--qb-border);
}

.pipeline-analytics-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-panel-subtitle {
    font-size: 12px;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-chart-wrap {
    position: relative;
    min-height: 260px;
    padding: 14px;
}

.pipeline-analytics-chart-wrap canvas {
    width: 100% !important;
    height: 260px !important;
}

.pipeline-analytics-stage-flow-wrap {
    padding-top: 12px;
}

.pipeline-analytics-stage-flow {
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.pipeline-analytics-stage-segment {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex: 0 0 auto;
}

.pipeline-analytics-stage-card {
    width: clamp(220px, 24vw, 260px);
    min-height: 216px;
    padding: 16px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--qb-surface-muted) 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pipeline-analytics-stage-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pipeline-analytics-stage-step-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-stage-step-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(90, 183, 116, 0.14);
    color: #0F5132;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pipeline-analytics-stage-name {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-stage-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-stage-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-stage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pipeline-analytics-stage-stat {
    min-width: 0;
}

.pipeline-analytics-stage-stat span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--qb-text-secondary);
    text-transform: uppercase;
}

.pipeline-analytics-stage-stat strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-stage-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--qb-border);
    font-size: 11px;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-stage-connector {
    width: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
}

.pipeline-analytics-stage-connector-line {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, rgba(90, 183, 116, 0.22) 0%, rgba(90, 183, 116, 0.88) 100%);
}

.pipeline-analytics-stage-connector-line::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(90, 183, 116, 0.88);
    border-right: 2px solid rgba(90, 183, 116, 0.88);
    transform: translateY(-50%) rotate(45deg);
}

.pipeline-analytics-stage-connector-chip {
    font-size: 12px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-stage-connector-sub {
    font-size: 11px;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-table-wrap {
    max-height: 360px;
    overflow: auto;
    border-top: 1px solid var(--qb-border);
}

.pipeline-analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pipeline-analytics-table th,
.pipeline-analytics-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--qb-border);
    text-align: left;
    vertical-align: top;
}

.pipeline-analytics-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--qb-surface-muted);
    color: var(--qb-text-secondary);
    font-weight: 800;
}

.pipeline-analytics-table td.numeric,
.pipeline-analytics-table th.numeric {
    text-align: right;
    white-space: nowrap;
}

.pipeline-analytics-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pipeline-analytics-insight {
    padding: 14px;
    border: 1px solid var(--qb-border);
    border-left: 4px solid var(--qb-brand-primary);
    border-radius: 8px;
    background: var(--qb-surface);
}

.pipeline-analytics-insight-title {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text);
}

.pipeline-analytics-insight-body {
    font-size: 12px;
    line-height: 1.45;
    color: var(--qb-text-secondary);
}

.pipeline-analytics-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pipeline-analytics-tag {
    display: inline-flex;
    max-width: 120px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--qb-surface-muted);
    color: var(--qb-text-secondary);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .pipeline-analytics-kpis {
        grid-template-columns: repeat(3, minmax(128px, 1fr));
    }

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

@media (max-width: 820px) {
    .pipeline-analytics-content {
        padding: 12px;
    }

    .pipeline-analytics-stage-card {
        width: min(78vw, 260px);
    }

    .pipeline-analytics-kpis,
    .pipeline-analytics-insights {
        grid-template-columns: 1fr;
    }

    .pipeline-analytics-panel,
    .pipeline-analytics-panel.wide {
        grid-column: span 12;
    }

    .pipeline-analytics-refresh-btn {
        margin-left: 0;
        width: 100%;
    }

    .pipeline-analytics-toolbar-group {
        width: 100%;
    }

    .pipeline-analytics-toolbar .pipeline-analytics-select {
        width: 100%;
    }

    .pipeline-analytics-metric-toggle {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pipeline-bulk-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    flex-shrink: 0;
    padding: 10px 16px;
    background: linear-gradient(180deg, #F4FBF7 0%, #EEF8F3 100%);
    border-bottom: 1px solid #D9E8DF;
    box-shadow: 0 4px 16px rgba(7, 43, 46, 0.05);
}

.pipeline-bulk-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pipeline-bulk-bar-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 12px;
    flex: 1 1 680px;
}

.pipeline-bulk-bar-count {
    font-size: 13px;
    font-weight: 700;
    color: #123B35;
    min-width: 92px;
}

.pipeline-bulk-bar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pipeline-bulk-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pipeline-bulk-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: #4B675E;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pipeline-bulk-bar-select {
    min-width: 150px;
}

.pipeline-bulk-bar-select-pipeline {
    min-width: 170px;
}

.pipeline-bulk-bar .form-select {
    background: #FFFFFF;
    color: #123B35;
    border-color: #C8D8CF;
    min-height: 40px;
    height: 40px;
}

.pipeline-bulk-bar .form-select:focus {
    outline: none;
    border-color: var(--qb-brand-primary);
    box-shadow: 0 0 0 3px rgba(90, 183, 116, 0.16);
}

.pipeline-bulk-bar .dfy-btn-secondary {
    background: #FFFFFF;
    color: #123B35;
    border: 1px solid #C8D8CF;
}

.pipeline-bulk-bar .dfy-btn-secondary:hover:not(:disabled) {
    background: #F7FBF9;
    border-color: #9EC9B2;
}

.pipeline-bulk-bar-status {
    font-size: 12px;
    font-weight: 600;
    color: #2F6D5D;
}

.pipeline-bulk-delete-btn {
    border-color: #F3C0C6 !important;
    color: #991B1B !important;
}

.pipeline-bulk-delete-btn:hover {
    border-color: #E79CA6 !important;
    background: #FFF5F6 !important;
}

.pipeline-bulk-cancel-btn {
    min-width: 108px;
}

@media (max-width: 980px) {
    .pipeline-bulk-bar {
        padding: 10px 12px;
    }

    .pipeline-bulk-bar-inner {
        align-items: flex-start;
    }

    .pipeline-bulk-bar-group,
    .pipeline-bulk-bar-actions,
    .pipeline-bulk-bar-main {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.pipeline-topbar .dfy-btn-primary,
.pipeline-topbar .dfy-add-deal-split .dfy-btn-primary {
    background: var(--qb-header-cta-bg);
    color: var(--qb-header-cta-text);
}

.pipeline-topbar .dfy-btn-primary:hover,
.pipeline-topbar .dfy-add-deal-split .dfy-btn-primary:hover {
    background: var(--qb-header-cta-hover);
}

.pipeline-topbar .assigned-filter-trigger {
    background: var(--qb-header-control-bg);
    border-color: var(--qb-header-control-border);
    color: var(--qb-header-text);
    box-shadow: none;
    box-sizing: border-box;
    min-height: var(--pipeline-topbar-control-h);
    height: var(--pipeline-topbar-control-h);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 36px;
}

.pipeline-topbar .assigned-filter-trigger:hover {
    border-color: rgba(255, 255, 255, 0.38);
}

.pipeline-topbar .assigned-filter-trigger:focus {
    outline: none;
    border-color: var(--qb-brand-primary);
    box-shadow: 0 0 0 2px rgba(90, 183, 116, 0.35);
}

.pipeline-topbar .assigned-filter-caret {
    border-top-color: var(--qb-header-text-muted);
}

.pipeline-topbar .assigned-filter-clear {
    color: var(--qb-header-text-muted);
}

.pipeline-topbar .assigned-filter-clear:hover {
    color: var(--qb-header-text);
}

/* Dropdowns anchored in the top bar must stack above the board */
.pipeline-topbar .assigned-filter-list {
    z-index: 200;
}

body {
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* Button Styles - Matching admin-dfy.html */
.dfy-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-sizing: border-box;
}

.dfy-btn-primary {
    background: var(--qb-brand-primary);
    color: #fff;
}

.dfy-btn-primary:hover {
    background: var(--qb-primary-hover);
}

/* Split "+ Deal" + import dropdown */
.dfy-add-deal-split {
    display: inline-flex;
    align-items: stretch;
    position: relative;
    border-radius: 8px;
    overflow: visible;
    flex-shrink: 0;
}

.dfy-add-deal-split .dfy-add-deal-split-main {
    border-radius: 8px 0 0 8px;
    padding-left: 14px;
    padding-right: 14px;
}

.dfy-add-deal-split-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
    pointer-events: none;
}

.dfy-add-deal-split-dropdown-wrap {
    position: relative;
    display: flex;
}

.dfy-add-deal-split-caret {
    border-radius: 0 8px 8px 0;
    min-width: 40px;
    padding-left: 10px;
    padding-right: 12px;
}

.dfy-add-deal-split-caret .fa-chevron-down {
    font-size: 12px;
}

.dfy-add-deal-split-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 180px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
}

.dfy-add-deal-split-menu:not([hidden]) {
    display: block;
}

.dfy-add-deal-split-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s ease;
}

.dfy-add-deal-split-menu-item:hover {
    background: #F3F4F6;
}

.dfy-btn-secondary {
    background: var(--qb-surface);
    color: var(--qb-text-secondary);
    border: 1px solid var(--qb-border);
}

.dfy-btn-secondary:hover {
    background: var(--qb-surface-muted);
}

/* Ensure buttons have symmetric padding */
.dfy-btn i {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Ensure all buttons maintain symmetric horizontal padding */
.dfy-btn {
    text-align: center;
}

.pipeline-container {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pipeline-container[hidden],
.pipeline-container.is-hidden {
    display: none !important;
}

/* Loading (shared markup with admin-dfy; styles must live here — board is a row flex, so loader must flex-grow to center) */
.dfy-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    min-height: 200px;
}

.pipeline-board > .dfy-loading-container {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    min-height: 0;
    box-sizing: border-box;
}

.dfy-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #F3F4F6;
    border-top-color: var(--qb-brand-primary);
    border-radius: 50%;
    animation: dfy-loading-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes dfy-loading-spin {
    to { transform: rotate(360deg); }
}

.dfy-loading-text {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 12px;
}

.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    flex-shrink: 0;
}

.pipeline-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--qb-text-heading);
}

.pipeline-topbar .pipeline-title {
    font-size: 20px;
    font-weight: 700;
}

.assigned-filter-dropdown {
    position: relative;
    width: clamp(140px, 18vw, 220px);
}

.pipeline-assigned-filter-dropdown {
    width: 220px;
}

.pipeline-filters-dropdown {
    width: 210px;
}

#pipelineFiltersBtn,
#pipelineFiltersLabel {
    white-space: nowrap;
}

.pipeline-filters-dropdown .pipeline-filters-panel {
    position: fixed;
    top: var(--pipeline-filters-panel-top, 64px);
    left: var(--pipeline-filters-panel-left, 12px);
    right: auto;
    width: var(--pipeline-filters-panel-width, min(560px, calc(100vw - 24px)));
}

.pipeline-filters-dropdown .assigned-filter-list {
    overflow: visible;
    max-height: none;
}

.pipeline-filters-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

.pipeline-filter-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pipeline-filter-section + .pipeline-filter-section {
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}

.pipeline-filter-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pipeline-filter-current {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.pipeline-filter-inline-clear {
    border: none;
    background: transparent;
    color: #6B7280;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 0;
    cursor: pointer;
}

.pipeline-filter-inline-clear:hover {
    color: #374151;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pipeline-filter-inline-clear[hidden] {
    display: none !important;
}

.pipeline-filter-option-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    padding: 2px;
}

.pipeline-filter-option-list .assigned-filter-option {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid transparent;
}

.pipeline-filter-option-list .assigned-filter-option.active {
    border-color: rgba(90, 183, 116, 0.28);
}

.pipeline-filter-option-list .assigned-filter-option span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-booking-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.pipeline-booking-filter-row:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.pipeline-booking-filter-row input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--qb-brand-primary);
}

.pipeline-booking-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 12px;
}

.pipeline-filters-custom-section {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pipeline-filters-custom-title {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

.pipeline-custom-filter-rule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pipeline-custom-filter-empty {
    padding: 6px 0;
    font-size: 11px;
    color: #9CA3AF;
}

.pipeline-custom-filter-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    background: #FCFDFD;
}

.pipeline-custom-filter-rule .form-select {
    min-height: 42px;
    height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.25;
    font-size: 12px;
}

.pipeline-custom-filter-field-select {
    flex: 1 1 160px;
    min-width: 140px;
}

.pipeline-custom-filter-operator-select {
    flex: 0 1 132px;
    min-width: 118px;
}

.pipeline-custom-filter-value-wrap {
    flex: 1 1 220px;
    min-width: 180px;
}

.pipeline-custom-filter-value-wrap.is-hidden {
    display: none;
}

.pipeline-custom-filter-value-section {
    width: 100%;
}

.pipeline-custom-filter-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #fff;
    color: #6B7280;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pipeline-custom-filter-remove-btn:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
    color: #374151;
}

.pipeline-topbar .pipeline-custom-filter-add-btn {
    align-self: flex-start;
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
}

.pipeline-filters-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.pipeline-bulk-update-link {
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pipeline-bulk-update-link:hover {
    color: #374151;
}

#bulkUpdateDealsModal .bulk-update-modal-lead {
    font-size: 13px;
    color: #4B5563;
    line-height: 1.45;
    margin: 0 0 16px;
}

#bulkUpdateDealsModal .bulk-update-scope-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bulkUpdateDealsModal .bulk-update-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    line-height: 1.35;
}

#bulkUpdateDealsModal .bulk-update-radio-label input {
    margin-top: 3px;
    flex-shrink: 0;
}

#bulkUpdateDealsModal .bulk-update-hint {
    font-size: 11px;
    font-weight: 400;
    color: #9CA3AF;
}

#bulkUpdateDealsModal .bulk-update-check-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bulkUpdateDealsModal .bulk-update-preview {
    font-size: 12px;
    color: #4B5563;
    padding: 10px 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    min-height: 2.5em;
}

.bulk-custom-fields-modal {
    max-width: min(720px, 94vw);
    width: 720px;
}

#bulkCustomFieldDealsModal .modal-body.bulk-custom-fields-modal-body {
    display: block;
    max-height: min(78vh, 760px);
    overflow-y: auto;
}

.bulk-custom-fields-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bulk-custom-fields-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.bulk-custom-fields-picker-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bulk-custom-fields-picker-row .form-select {
    flex: 1 1 auto;
}

.bulk-custom-field-row {
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
}

.bulk-custom-field-row-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.bulk-custom-field-row-head-actions {
    display: flex;
    justify-content: flex-start;
}

.bulk-custom-field-row-label {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.bulk-custom-field-row-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #6B7280;
}

.bulk-custom-field-row-mode-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: none;
    width: 100%;
}

.bulk-custom-field-row-mode-label {
    font-size: 11px;
    color: #374151;
}

.bulk-custom-field-row-input {
    margin-top: 12px;
}

.bulk-custom-field-row-input.is-hidden {
    display: none;
}

#bulkCustomFieldDealsModal .bulk-update-preview {
    margin-top: 16px;
    font-size: 12px;
    color: #4B5563;
    padding: 10px 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    min-height: 2.5em;
}

.duplicate-deals-modal {
    max-width: min(960px, 94vw);
    width: 960px;
    max-height: 88vh;
}

.duplicate-deals-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(88vh - 84px);
    overflow: hidden;
}

.duplicate-deals-summary,
.duplicate-deals-preview {
    font-size: 12px;
    color: #4B5563;
    padding: 10px 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
}

.duplicate-deals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.duplicate-deal-group {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
}

.duplicate-deal-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #F3F4F6;
}

.duplicate-deal-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.duplicate-deal-group-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #6B7280;
}

.duplicate-deal-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #ECFDF5;
    color: #047857;
}

.duplicate-deal-badge-review {
    background: #FEF3C7;
    color: #92400E;
}

.duplicate-deal-group-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #374151;
}

.duplicate-deal-warning {
    padding: 0 12px 10px;
    font-size: 11px;
    color: #92400E;
}

.duplicate-deal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.duplicate-deal-table th,
.duplicate-deal-table td {
    padding: 8px 10px;
    border-top: 1px solid #F3F4F6;
    text-align: left;
    vertical-align: top;
}

.duplicate-deal-table th {
    color: #6B7280;
    font-size: 11px;
    font-weight: 600;
    background: #F9FAFB;
}

.duplicate-deal-table label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.duplicate-deal-title-cell {
    max-width: 260px;
    color: #111827;
    font-weight: 500;
}

.duplicate-deals-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #E5E7EB;
    padding-top: 12px;
}

/* Custom field combobox (type-to-filter suggestions from pipeline deals + definition options) */
.cf-combobox-wrap {
    position: relative;
    width: 100%;
}

.cf-combobox-menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 500;
    max-height: min(220px, 42vh);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
}

.cf-combobox-menu[hidden] {
    display: none !important;
}

.cf-combobox-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
    line-height: 1.35;
}

.cf-combobox-item:hover {
    background: #F3F4F6;
}

.cf-combobox-empty {
    padding: 8px;
    font-size: 11px;
    color: #9CA3AF;
    text-align: center;
}

.tag-filter-section {
    position: relative;
}

.tag-filter-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 6px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #fff;
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tag-filter-select:focus-within {
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
}

.tag-filter-pills {
    display: contents;
}

.tag-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 140px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--qb-primary-soft);
    color: var(--buro-brand-dark-green);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    user-select: none;
}

.tag-filter-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tag-filter-pill-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 1px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--qb-brand-primary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.tag-filter-pill:hover .tag-filter-pill-x {
    opacity: 1;
}

.tag-filter-pill-x:hover {
    opacity: 1;
    background: rgba(90, 183, 116, 0.28);
    color: var(--buro-brand-dark-green);
}

.tag-filter-search {
    flex: 1 1 60px;
    min-width: 60px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #111827;
    padding: 2px 0;
}

.tag-filter-search::placeholder {
    color: #9CA3AF;
}

.tag-filter-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 100;
    max-height: min(320px, 50vh);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 4px;
}

.tag-filter-dropdown.open {
    display: block;
}

.tag-filter-dropdown-item {
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.tag-filter-dropdown-item:hover {
    background: #F3F4F6;
}

.tag-filter-dropdown-item.selected {
    background: var(--qb-brand-off);
    color: var(--qb-primary-hover);
    font-weight: 600;
}

.tag-filter-dropdown-empty {
    padding: 8px;
    font-size: 11px;
    color: #9CA3AF;
    text-align: center;
}

@media (max-width: 640px) {
    .pipeline-filters-panel {
        width: min(100vw - 24px, 520px);
    }

    .pipeline-custom-filter-field-select,
    .pipeline-custom-filter-operator-select,
    .pipeline-custom-filter-value-wrap {
        flex-basis: 100%;
        min-width: 0;
    }

    .pipeline-custom-filter-remove-btn {
        margin-left: auto;
    }
}

.assigned-filter-trigger {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #111827;
    padding: 10px 36px 10px 12px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 12px;
    position: relative;
}

.assigned-filter-trigger:focus {
    outline: none;
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
}

.assigned-filter-trigger:hover {
    border-color: #9CA3AF;
}

.assigned-filter-caret {
    position: absolute;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #6B7280;
}

.assigned-filter-clear {
    position: absolute;
    right: 26px;
    font-size: 14px;
    line-height: 1;
    color: #9CA3AF;
    display: none;
    pointer-events: auto;
}

.assigned-filter-clear:hover {
    color: #374151;
}

.assigned-filter-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    padding: 6px;
    display: none;
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
}

.assigned-filter-list.open {
    display: block;
}

.assigned-filter-option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #111827;
    cursor: pointer;
    white-space: nowrap;
}

.assigned-filter-option:hover {
    background: #F3F4F6;
}

.assigned-filter-option.active {
    background: var(--qb-brand-off);
    color: var(--qb-primary-hover);
    font-weight: 600;
}

.pipeline-dropdown-option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pipeline-dropdown-option:hover {
    background: #F3F4F6;
}

.pipeline-dropdown-option.selected {
    background: var(--qb-brand-off);
    color: var(--qb-primary-hover);
    font-weight: 600;
}

/* Deal custom fields modal — one column, three stacked rows: list | add form | buttons */
.custom-fields-modal .custom-fields-modal-content {
    max-width: 960px;
    width: 96vw;
}

.custom-fields-modal .modal-body {
    display: block;
}

.custom-fields-modal-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.custom-fields-block {
    padding: 16px 0;
}

.custom-fields-block:first-child {
    padding-top: 0;
}

.custom-fields-block:not(:first-child) {
    border-top: 1px solid #e5e7eb;
}

.custom-fields-block-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #374151;
}

.custom-fields-modal-intro {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.45;
}

.custom-fields-definitions-wrap {
    margin-bottom: 0;
    overflow-x: auto;
}

.custom-fields-form-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.custom-fields-form-column .form-group {
    margin-bottom: 12px;
}

.custom-fields-form-column .form-group:last-child {
    margin-bottom: 0;
}

.custom-fields-block-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0;
}

.custom-fields-def-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.custom-fields-def-table th,
.custom-fields-def-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.custom-fields-def-table th {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #f9fafb;
}

.custom-fields-def-table tr:last-child td {
    border-bottom: none;
}

.custom-fields-def-table td.cf-key {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: #374151;
}

.custom-fields-def-table td.cf-opts {
    color: #4b5563;
    font-size: 12px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-fields-def-table td.cf-actions {
    white-space: nowrap;
    text-align: right;
    width: 1%;
}

.custom-fields-def-empty {
    font-size: 13px;
    color: #6b7280;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px dashed #e5e7eb;
}

.custom-fields-field-hint {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

.assigned-user-color-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #E5E7EB;
    display: none;
    flex-shrink: 0;
}

.assigned-user-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assigned-user-color-btn,
.assigned-user-color-placeholder {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.assigned-user-color-btn {
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    padding: 0;
    background: var(--qb-brand-primary);
}

.assigned-user-color-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--qb-primary-ring);
}

.assigned-user-color-placeholder {
    border: 1px dashed #E5E7EB;
    background: transparent;
}

.assigned-user-color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.assigned-user-color-picker input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.pipeline-board {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    height: 100%;
}

/* Flush columns: single 1px divider between stages (no double border) */
.pipeline-board .pipeline-column + .pipeline-column {
    margin-left: -1px;
}

.pipeline-column {
    flex: 0 0 300px;
    /* Allow column to respect flex-basis; default min-width:auto uses content min-size and can widen the column */
    min-width: 0;
    background: #f9fafb;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e5e7eb;
}

/* Stage-specific background colors */
.pipeline-column.stage-won-closed {
    background: #f0fdf4;
}

.pipeline-column.stage-won-closed .column-header,
.pipeline-column.stage-won-closed .column-body,
.pipeline-column.stage-won-closed .column-footer {
    background: #f0fdf4;
}

.pipeline-column.stage-unqualified {
    background: #fefef3;
}

.pipeline-column.stage-unqualified .column-header,
.pipeline-column.stage-unqualified .column-body,
.pipeline-column.stage-unqualified .column-footer {
    background: #fefef3;
}

.pipeline-column.stage-lost {
    background: #fef2f2;
}

.pipeline-column.stage-lost .column-header,
.pipeline-column.stage-lost .column-body,
.pipeline-column.stage-lost .column-footer {
    background: #fef2f2;
}

.column-header {
    padding: 16px;
    color: #374151;
    display: flex;
    align-items: flex-start;
    background: #f9fafb;
    border-radius: 0;
    font-size: 14px;
}

.column-count {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.column-body {
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px; /* Drop target area */
    background: #f9fafb;
}

.column-footer {
    padding: 12px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-shrink: 0;
}

.add-deal-to-stage-btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 6px 12px;
    background: transparent !important;
    color: #6B7280 !important;
    border: 1px solid transparent !important;
    opacity: 0.6;
    transition: all 0.2s ease;
    font-weight: 400;
}

.add-deal-to-stage-btn:hover {
    opacity: 1;
    background: var(--qb-primary-soft) !important;
    color: var(--qb-brand-primary) !important;
    border-color: rgba(90, 183, 116, 0.28) !important;
}

.add-deal-to-stage-btn i {
    font-size: 11px;
    opacity: 0.7;
}

.add-deal-to-stage-btn:hover i {
    opacity: 1;
}

.deal-card {
    position: relative;
    min-width: 0;
    max-width: 100%;
    background: white;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    cursor: grab;
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Title row is inline-flex; min-width:0 lets .deal-title shrink/wrap instead of widening the column */
.deal-card > div:first-child {
    min-width: 0;
}

.deal-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.deal-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

body.pipeline-deal-select-mode .deal-card {
    cursor: pointer;
    padding-left: 38px;
}

body.pipeline-deal-select-mode .deal-card:hover {
    transform: none;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

.deal-card.selected {
    border-color: rgba(90, 183, 116, 0.75);
    background: #F4FFF8;
    box-shadow: 0 0 0 2px rgba(90, 183, 116, 0.18), 0 2px 6px rgba(90, 183, 116, 0.12);
}

.deal-card.selected:hover {
    transform: none;
    box-shadow: 0 0 0 2px rgba(90, 183, 116, 0.22), 0 3px 9px rgba(90, 183, 116, 0.14);
}

.deal-footer-icon-booking {
    color: #059669;
}

.deal-card-select-control {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.deal-card-select-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--qb-brand-primary);
}

.deal-card-select-checkbox:focus-visible {
    outline: 2px solid rgba(90, 183, 116, 0.35);
    outline-offset: 2px;
}

.deal-card.ghost-card {
    opacity: 0.4;
    border: 2px dashed var(--qb-brand-primary);
    background: var(--qb-primary-soft);
    cursor: grabbing;
    pointer-events: none;
    transform: none;
    box-shadow: 0 2px 8px rgba(90, 183, 116, 0.2);
}

.deal-card.ghost-card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(90, 183, 116, 0.2);
}

/* Simple indicator for same-stage reordering */
.drop-indicator {
    height: 3px;
    background: var(--qb-brand-primary);
    border-radius: 2px;
    margin: 4px 0;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(90, 183, 116, 0.4);
}

.deal-title {
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    margin-bottom: 1px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deal-value {
    font-size: 12px;
    color: #059669;
    font-weight: 500;
    margin-bottom: 6px;
}

.deal-assignment-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #EEF4F1;
    color: #4B675E;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.deal-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.deal-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}

.deal-meta-item i {
    font-size: 9px;
}

.deal-meta-item svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: inherit;
}

.deal-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.tag {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    background: #e5e7eb;
    color: #374151;
}

.tag.high { background: #fee2e2; color: #991b1b; }
.tag.medium { background: #fef3c7; color: #92400e; }
.tag.low { background: #d1fae5; color: #065f46; }

.deal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
    min-width: 0;
}

.lead-name {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 40%;
    justify-content: flex-end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-name i {
    font-size: 10px;
}

.deal-footer .tag {
    flex-shrink: 0;
}

.pipeline-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
    min-width: 0;
    max-width: 100%;
}

.pipeline-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background: #F9FAFB;
    color: #374151;
    font-size: 11px;
    line-height: 1.25;
    padding: 4px 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.pipeline-tag-chip-remove {
    border: none;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

.pipeline-tag-chip-remove:hover {
    color: #111827;
}

.pipeline-tag-empty {
    font-size: 12px;
    color: #9CA3AF;
}

.pipeline-tags-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pipeline-tag-add-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.pipeline-tag-add-field .form-input {
    width: 100%;
}

#dealModal .pipeline-tag-add-field:has(.tag-filter-dropdown.open) {
    z-index: 12040;
}

#dealModal .pipeline-tag-add-field .tag-filter-dropdown.open {
    z-index: 12050;
}

.pipeline-tags-input-row .dfy-btn {
    flex: 0 0 auto;
}

.deal-split-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.deal-split-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bulk-round-robin-user-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
}

.bulk-round-robin-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.bulk-round-robin-user-row input {
    margin: 0;
    flex-shrink: 0;
}

.deal-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) 96px 88px 36px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
}

.deal-split-row .form-select,
.deal-split-row .form-input {
    min-height: 38px;
    height: 38px;
    font-size: 12px;
}

.deal-split-primary-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 8px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
}

.deal-split-primary-toggle input {
    margin: 0;
}

.deal-split-remove-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #6B7280;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.deal-split-remove-btn:hover {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
}

.deal-split-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.deal-split-inline-btn {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
}

.deal-split-save-btn {
    min-width: 110px;
}

.deal-split-status {
    min-height: 18px;
    margin-top: 8px;
    font-size: 12px;
    color: #4B675E;
}

.deal-split-status.is-error {
    color: #B91C1C;
}

.deal-split-status.is-success {
    color: #047857;
}

.deal-split-empty {
    padding: 12px;
    border: 1px dashed #D1D5DB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #6B7280;
    font-size: 12px;
}

.deal-footer-icon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #6b7280;
    flex-shrink: 0;
}

.deal-footer-icon svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: inherit;
}

/* Modal Styles - Matching admin-dfy.html */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active,
.modal-overlay.open {
    display: flex;
}

#commentEditModal.modal-overlay {
    z-index: 1010;
}

@media (max-width: 640px) {
    .deal-split-row {
        grid-template-columns: 1fr;
    }

    .deal-split-actions,
    .deal-split-section-header {
        align-items: stretch;
    }
}

/* No extra scrim on shell — same as .stage-automation-drawer-shell (backdrop carries tint + blur) */
#dealModal.deal-modal-drawer-shell.modal-overlay {
    display: block;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
}

#dealModal.deal-modal-drawer-shell {
    position: fixed;
    inset: var(--deal-drawer-top-offset, 0px) 0 0 0;
    z-index: 1000;
    height: auto;
    min-height: 0;
}

#dealModal.deal-modal-drawer-shell.is-mounted {
    visibility: visible;
    pointer-events: auto;
}

/* Shared with stage automations drawer — one visual for pipeline dim + blur */
.stage-automation-drawer-backdrop,
.deal-modal-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.24s ease;
    will-change: opacity;
}

#dealModal.deal-modal-drawer-shell.open .deal-modal-drawer-backdrop,
#dealModal.deal-modal-drawer-shell.active .deal-modal-drawer-backdrop {
    opacity: 1;
}

.deal-modal-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(1420px, calc(100vw - 20px));
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background:
        radial-gradient(circle at top left, rgba(90, 183, 116, 0.16), transparent 34%),
        linear-gradient(180deg, #F6FBF7 0%, #FFFFFF 18%, #FFFFFF 100%);
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    transform: translate3d(100%, 0, 0);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

#dealModal.open .deal-modal-drawer-panel,
#dealModal.active .deal-modal-drawer-panel {
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .deal-modal-drawer-backdrop,
    .deal-modal-drawer-panel {
        transition: none;
    }
}

@media (max-width: 960px) {
    .deal-modal-drawer-panel {
        width: 100%;
    }
}

#dealModal .deal-modal-drawer-inner.modal-content {
    max-width: none;
    width: 100%;
    max-height: none;
    height: 100%;
    min-height: 0;
    flex: 1;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.modal-container,
.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: visible;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Deal drawer inner card: fills panel (width rules live on .deal-modal-drawer-inner above) */

/* Ensure modal-content works the same */
.modal-content {
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2,
.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.modal-close,
.create-lead-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6B7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover,
.create-lead-close:hover {
    background: #F3F4F6;
    color: #111827;
}

.modal-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    display: flex;
    gap: 24px;
    position: relative;
}

/* Manage Pipelines should be single-column: list above add form */
#pipelinesModal .modal-body {
    display: block;
}

/* Manage Stages should be single-column: list above add form */
#stagesModal .modal-body {
    display: block;
}

/* Pipeline IDs modal */
.pipeline-lookup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.pipeline-lookup-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}

.pipeline-lookup-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.pipeline-lookup-note {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
}

.pipeline-lookup-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pipeline-api-docs {
    display: grid;
    gap: 12px;
}

.pipeline-api-docs pre {
    background: #111827;
    color: #f9fafb;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    overflow-x: auto;
    margin: 0;
}

.pipeline-api-docs code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.pipeline-lookup-table th,
.pipeline-lookup-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.pipeline-lookup-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
}

.pipeline-lookup-empty {
    font-size: 12px;
    color: #9ca3af;
    padding: 8px 0;
}

/* New Deal modal: two columns; scroll the overlay (not .modal-body) so overflow stays visible and absolute dropdowns are not clipped */
#addDealModal.modal-overlay.open,
#addDealModal.modal-overlay.active {
    align-items: flex-start;
    justify-content: center;
    padding: min(40px, 6vh) max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

#addDealModal .modal-content.add-deal-modal-content {
    max-width: min(920px, calc(100vw - 32px));
    width: 100%;
    max-height: none;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
}

#addDealModal .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
    display: block;
}

#addDealModal form {
    width: 100%;
    position: relative;
}

#addDealModal .add-deal-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#addDealModal .add-deal-form-col {
    min-width: 0;
    max-width: 100%;
}

#addDealModal .add-deal-form-col .form-group:last-child {
    margin-bottom: 0;
}

#addDealModal .add-deal-form-actions {
    margin-top: 24px;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

#addDealModal .add-deal-custom-fields-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 720px) {
    #addDealModal .add-deal-form-grid {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
}

.modal-main {
    flex: 2;
}

.modal-sidebar {
    flex: 1;
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
}

.detail-group {
    margin-bottom: 20px;
    overflow: visible;
}

.detail-label,
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.detail-value {
    font-size: 14px;
    color: #111827;
}

/* Form inputs matching admin-dfy */
.form-input,
.form-textarea,
.form-select,
.search-input,
.filter-select,
.custom-dropdown-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    display: block;
}

/* Ensure form inputs in modals are full width */
#addDealModal .form-input,
#addDealModal .form-select,
#addDealModal .form-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* New Deal modal: one consistent control height (match title field) */
#addDealModal #addDealForm .form-input,
#addDealModal #addDealForm .form-select {
    min-height: 42px;
    box-sizing: border-box;
    line-height: 1.25;
}

#addDealModal #addDealForm #newDealTagSelect.tag-filter-select {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
}

#addDealModal #addDealForm #newDealTagSelect .tag-filter-search {
    font-size: 14px;
    line-height: 1.25;
    padding: 0;
    min-height: 0;
}

#addDealModal #addDealForm .add-deal-assign-dropdown .assigned-filter-trigger {
    min-height: 42px;
    padding: 10px 36px 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.25;
    box-shadow: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.search-input:focus,
.filter-select:focus,
.custom-dropdown-input:focus {
    outline: none;
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Form group matching admin-dfy */
.form-group {
    margin-bottom: 20px;
    overflow: visible;
    width: 100%;
    position: relative;
}

/* Ensure form groups in modals take full width */
#addDealModal .form-group {
    width: 100%;
}

/* Custom dropdown styling */
.custom-dropdown {
    position: relative;
    width: 100%;
    display: block;
    z-index: 1;
}

/* Ensure dropdowns in modals have proper z-index stacking */
.modal-overlay .custom-dropdown {
    z-index: auto;
}

/* Ensure custom dropdown in add deal modal is full width */
#addDealModal .custom-dropdown {
    width: 100%;
}

/* Add deal: tag combobox + assign trigger (match pipeline toolbar filters) */
#addDealModal .add-deal-assign-dropdown,
#addDealModal .add-deal-tag-section {
    width: 100%;
    max-width: 100%;
}

#addDealModal .add-deal-assign-dropdown {
    position: relative;
}

/* Lead search, tag picker, assign list, custom-field combobox: paint above modal card/backdrop */
#addDealModal .custom-dropdown:has(.custom-dropdown-list.show),
#addDealModal .cf-combobox-wrap:has(.cf-combobox-menu:not([hidden])),
#addDealModal .add-deal-tag-section:has(.tag-filter-dropdown.open),
#addDealModal .add-deal-assign-dropdown:has(.assigned-filter-list.open) {
    z-index: 12040;
}

#addDealModal .custom-dropdown-list.show,
#addDealModal .cf-combobox-menu:not([hidden]),
#addDealModal .tag-filter-dropdown.open,
#addDealModal .add-deal-assign-dropdown .assigned-filter-list.open {
    z-index: 12050;
}

.tag-filter-dropdown-item--add {
    font-size: 12px;
    color: #4b5563;
}

.tag-filter-dropdown-item--add strong {
    color: var(--qb-brand-primary, #059669);
    font-weight: 600;
}

/* Ensure create lead modal form fields use full modal width */
#createLeadModal .modal-body {
    display: block;
    overflow: visible;
}

#createLeadModal form {
    width: 100%;
}

#createLeadModal .form-group,
#createLeadModal .form-input,
#createLeadModal .form-select,
#createLeadModal .form-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.custom-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10001;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-dropdown-list.show {
    display: block;
}

.custom-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
}

.custom-dropdown-item:hover {
    background: #F9FAFB;
}

.custom-dropdown-item.selected {
    background: var(--qb-brand-off);
    color: var(--qb-primary-hover);
}

.recordings-list, .bookings-list, .applications-list, .tasks-list, .comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recording-item, .booking-item, .application-item, .task-item, .comment-item {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    transition: all 0.2s;
}

.booking-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.booking-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.booking-status-btn {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 28px;
}

.booking-status-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.task-item:hover, .comment-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.task-item.task-completed {
    opacity: 0.7;
    background: #f9fafb;
}

.task-overdue {
    color: #DC2626 !important;
    font-weight: 600;
}

.task-edit-btn, .task-delete-btn, .comment-edit-btn, .comment-delete-btn {
    padding: 6px 10px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    height: 32px;
    position: relative;
}

.task-edit-btn svg, .task-delete-btn svg, .comment-edit-btn svg, .comment-delete-btn svg {
    width: 12px;
    height: 12px;
    display: block;
    flex-shrink: 0;
}

.task-edit-btn, .task-delete-btn, .comment-edit-btn, .comment-delete-btn {
    padding: 6px 10px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    height: 32px;
    position: relative;
    line-height: 1;
}

.task-edit-btn i, .task-delete-btn i, .comment-edit-btn i, .comment-delete-btn i {
    font-size: 12px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

.task-edit-btn {
    background: var(--qb-brand-off);
    color: var(--qb-primary-hover);
}

.task-edit-btn:hover {
    background: var(--qb-success-bg);
    color: var(--buro-brand-dark-green);
}

.task-edit-btn i {
    color: inherit;
}

.task-delete-btn {
    background: #FEE2E2;
    color: #DC2626;
}

.task-delete-btn:hover {
    background: #FECACA;
    color: #B91C1C;
}

.task-delete-btn i {
    color: inherit;
}

.comment-edit-btn {
    background: var(--qb-brand-off);
    color: var(--qb-primary-hover);
}

.comment-edit-btn:hover {
    background: var(--qb-success-bg);
    color: var(--buro-brand-dark-green);
}

.comment-edit-btn i {
    color: inherit;
}

.comment-delete-btn {
    background: #FEE2E2;
    color: #DC2626;
}

.comment-delete-btn:hover {
    background: #FECACA;
    color: #B91C1C;
}

.comment-delete-btn i {
    color: inherit;
}

.recording-title {
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--qb-primary-hover);
    cursor: pointer;
}

.recording-meta {
    font-size: 12px;
    color: #6b7280;
}

/* Tabs in Modal */
.modal-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.modal-tab {
    padding: 8px 0;
    cursor: pointer;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-tab.active {
    color: var(--qb-brand-primary);
    border-bottom-color: var(--qb-brand-primary);
}

.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}

.sales-email-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.sales-email-unread-badge[hidden] {
    display: none !important;
}

.sales-email-unread-badge-tab {
    min-height: 20px;
}

.sales-email-unread-badge-thread {
    background: #fef3c7;
    color: #92400e;
}

/* Stage Management Styles */
.stage-item {
    padding: 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    margin-bottom: 0;
    transition: all 0.2s;
    cursor: grab;
    position: relative;
}

.stage-item:hover {
    background: #FFFFFF;
    border-color: #D1D5DB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stage-item:active {
    cursor: grabbing;
}

.stage-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: rotate(2deg);
}

.stage-item.drag-over {
    border-top: 3px solid var(--qb-brand-primary);
    padding-top: 9px; /* Adjust to maintain spacing */
}

.stage-item.editing {
    background: #FFFFFF;
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
    cursor: default;
}

.stage-drag-handle {
    cursor: grab;
    color: #9CA3AF;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    user-select: none;
}

.stage-item.dragging .stage-drag-handle {
    cursor: grabbing;
}

.stage-drop-zone {
    height: 4px;
    margin: 2px 0;
    border-radius: 2px;
    transition: all 0.2s;
    background: transparent;
}

.stage-drop-zone.drag-over {
    height: 8px;
    background: var(--qb-brand-primary);
    margin: 4px 0;
    border-radius: 4px;
}

.stage-name-text {
    font-weight: 500;
    color: #111827;
    font-size: 14px;
}

.stage-name-input {
    width: 100%;
}

.stage-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Deal Email List Styles */
.deal-email-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #F9FAFB;
    border-radius: 4px;
    margin-bottom: 4px;
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
}

.deal-email-item:hover {
    background: #FFFFFF;
    border-color: #D1D5DB;
}

.deal-email-text {
    font-size: 13px;
    color: #111827;
    flex: 1;
}

.deal-email-remove-btn {
    background: none;
    border: none;
    color: #DC2626;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
}

.deal-email-item:hover .deal-email-remove-btn {
    opacity: 1;
    visibility: visible;
    background: #FEE2E2;
    color: #991B1B;
}

.deal-email-remove-btn:hover {
    background: #FECACA !important;
    color: #B91C1C !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.deal-email-remove-text {
    font-size: 11px;
    font-weight: 500;
}

.deal-email-remove-btn i {
    font-size: 11px;
    display: inline-block;
}

/* Import Bookings Table Styles */
.import-bookings-table {
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    font-size: 13px;
    table-layout: auto;
}

.import-bookings-table thead {
    background: #F9FAFB;
    border-bottom: 2px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 10;
}

.import-bookings-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #E5E7EB;
    background: #F9FAFB;
    position: relative;
}

/* First column (checkbox) - no longer sticky */
.import-bookings-table th:first-child,
.import-bookings-table td:first-child {
    background: white;
}

.import-bookings-table thead th:first-child {
    background: #F9FAFB;
}

/* Second column (#) - no longer sticky */
.import-bookings-table th:nth-child(2),
.import-bookings-table td:nth-child(2) {
    background: white;
}

.import-bookings-table thead th:nth-child(2) {
    background: #F9FAFB;
}

.import-bookings-table tbody tr {
    border-bottom: 1px solid #E5E7EB;
    transition: all 0.2s;
    background: white;
}

.import-bookings-table tbody tr:hover {
    background: #F9FAFB;
}

/* Hover states handled by row-level styles */

.import-bookings-table tbody tr.selected {
    background: var(--qb-brand-off);
    border-left: 3px solid var(--qb-brand-primary);
}

.import-bookings-table tbody tr.selected:hover {
    background: var(--qb-success-bg);
}

/* Ensure all cells in selected row get the selected background */
.import-bookings-table tbody tr.selected td {
    background: var(--qb-brand-off);
}

.import-bookings-table tbody tr.selected:hover td {
    background: var(--qb-success-bg);
}

.import-bookings-table td {
    padding: 12px 8px;
    vertical-align: middle;
    background: white;
}

/* Ensure table wrapper allows horizontal scrolling */
#importBookingsList > div {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
}

.booking-status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #E5E7EB;
    color: #374151;
}

.booking-status-badge.noshow {
    background: #FEE2E2;
    color: #B91C1C;
}

.booking-status-badge.show {
    background: #DCFCE7;
    color: #166534;
}

#importBookingsList {
    background: white;
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
}

/* Ensure table container allows horizontal scroll */
#importBookingsList > div {
    width: 100%;
    max-width: 100%;
}

/* Import Bookings Search */
#importBookingsSearch {
    width: 100%;
}

#importBookingsSearch:focus {
    border-color: var(--qb-brand-primary);
    box-shadow: var(--ui-focus-ring);
}

/* JSON Viewer Styles */
.json-viewer-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.json-viewer-container:hover {
    background: var(--qb-primary-soft);
}

.json-viewer-icon {
    color: #6B7280;
    transition: color 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.json-viewer-container:hover .json-viewer-icon {
    color: var(--qb-brand-primary);
}

/* Ensure icon is visible in selected rows */
.import-bookings-table tbody tr.selected .json-viewer-icon {
    color: var(--qb-primary-hover);
}

.import-bookings-table tbody tr.selected .json-viewer-container:hover .json-viewer-icon {
    color: var(--buro-brand-dark-green);
}

.json-tooltip {
    position: fixed;
    background: #1F2937;
    color: #F9FAFB;
    padding: 0 16px 16px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 600px;
    max-height: 500px;
    overflow: auto;
    z-index: 999999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left !important;
    display: none;
    cursor: default;
}

/* Show tooltip when visible */
.json-tooltip.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block;
    cursor: text;
}

.json-tooltip-content {
    margin: 0 !important;
    padding: 16px 0 0 0 !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #F9FAFB;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
    text-align: left !important;
    direction: ltr;
    tab-size: 2;
    display: block;
    width: 100%;
    text-indent: 0;
    border: none;
    background: transparent;
}

/* Ensure tooltip doesn't interfere with row selection */
.json-viewer-container {
    position: relative;
}

.json-viewer-container:hover {
    z-index: 999999;
}

/* Lead Details Modal */
.lead-details-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
    gap: 16px;
}

.lead-details-left-column,
.lead-details-right-column {
    min-width: 0;
}

.lead-details-right-column .lead-json-block {
    margin-top: 0;
}

.lead-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.lead-top-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.lead-top-section {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 12px;
}

.lead-top-title {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.lead-top-row {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 8px;
    align-items: start;
    padding: 4px 0;
}

.lead-top-key {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lead-top-value {
    font-size: 13px;
    color: #111827;
    word-break: break-word;
    line-height: 1.4;
}

.lead-top-value.empty {
    color: #9CA3AF;
}

.lead-details-item {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 12px;
}

.lead-details-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6B7280;
    margin-bottom: 4px;
}

.lead-details-value {
    font-size: 13px;
    color: #111827;
    white-space: pre-wrap;
    word-break: break-word;
}

.lead-details-value.empty {
    color: #9CA3AF;
}

.lead-json-block {
    margin-top: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
}

.lead-json-header {
    background: #F9FAFB;
    padding: 10px 12px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.lead-json-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lead-activities-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lead-activities-sync-btn {
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    color: #374151;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    cursor: pointer;
}

.lead-activities-sync-btn:hover {
    background: #F3F4F6;
}

.lead-activities-sync-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.getsales-fetch-btn {
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    color: #374151;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    cursor: pointer;
}

.getsales-fetch-btn:hover {
    background: #F3F4F6;
}

.getsales-fetch-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lead-json-pre {
    margin: 0;
    padding: 12px;
    max-height: 420px;
    overflow: auto;
    background: #111827;
    color: #F9FAFB;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 11px;
    line-height: 1.5;
}

.lead-activities-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #FFFFFF;
}

.lead-activities-timeline {
    position: relative;
    padding-left: 24px;
}

.lead-activities-timeline::before {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 20px;
    width: 2px;
    background: #E5E7EB;
}

.lead-activity-timeline-item {
    position: relative;
}

.lead-activity-timeline-dot {
    position: absolute;
    left: -7px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--qb-brand-primary);
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px var(--qb-h-primary-border-soft);
}

.lead-activity-item {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
    overflow: hidden;
}

.lead-activity-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.lead-activity-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.lead-activity-time {
    margin-top: 3px;
    font-size: 11px;
    color: #6B7280;
}

.lead-activity-badges {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lead-activity-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--qb-h-primary-border-soft);
    background: var(--qb-brand-off);
    color: var(--buro-brand-dark-green);
    font-size: 11px;
    font-weight: 600;
}

.lead-activity-badge-muted {
    border-color: #E5E7EB;
    background: #F3F4F6;
    color: #4B5563;
    font-weight: 500;
}

.lead-activity-meta {
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
}

.lead-activity-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

.lead-activity-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: baseline;
}

.lead-activity-row-label {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.lead-activity-row-value {
    font-size: 12px;
    color: #111827;
    word-break: break-word;
    white-space: pre-line;
}

.lead-activity-details {
    border: none;
    background: transparent;
}

.lead-activity-details summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
    list-style: none;
    user-select: none;
}

.lead-activity-details summary:hover {
    color: #374151;
}

.lead-activity-details summary::-webkit-details-marker {
    display: none;
}

.lead-activity-details summary::before {
    content: '▸';
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    font-size: 10px;
    color: #9CA3AF;
}

.lead-activity-details[open] summary::before {
    transform: rotate(90deg);
}

.lead-activity-details[open] {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
}

.lead-activity-details[open] summary {
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.lead-activity-data {
    margin: 0;
    padding: 8px 10px;
    max-height: 220px;
    overflow: auto;
    background: #111827;
    color: #F9FAFB;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 11px;
    line-height: 1.45;
}

.lead-activities-empty {
    padding: 12px;
    font-size: 13px;
    color: #6B7280;
    background: #FFFFFF;
}

.lead-activities-feed {
    padding: 10px 12px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lead-activity-day-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lead-activity-day-label {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.lead-activity-day-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-activity-feed-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
}

.lead-activity-feed-time {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    line-height: 1.35;
    padding-top: 1px;
}

.lead-activity-feed-content {
    min-width: 0;
}

.lead-activity-feed-main {
    font-size: 12px;
    color: #111827;
    line-height: 1.45;
}

.lead-activity-subline {
    margin-top: 4px;
    font-size: 12px;
    color: #374151;
    line-height: 1.45;
    white-space: pre-line;
}

.lead-activity-links {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lead-activity-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--qb-primary-hover);
    text-decoration: none;
}

.lead-activity-link:hover {
    text-decoration: underline;
}

.lead-structured-content {
    padding: 12px;
    max-height: 420px;
    overflow: auto;
    background: #FFFFFF;
}

.lead-structured-object {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lead-structured-field {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px 10px;
    background: #F9FAFB;
}

.lead-structured-key {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.lead-structured-value {
    font-size: 13px;
    color: #111827;
    line-height: 1.45;
    word-break: break-word;
}

.lead-structured-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-structured-list li {
    margin: 0;
}

.lead-structured-empty {
    color: #9CA3AF;
    font-style: italic;
}

.lead-special-section + .lead-special-section {
    margin-top: 14px;
}

.lead-special-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.lead-special-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lead-special-card {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
    padding: 10px 12px;
}

.lead-special-main {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.lead-special-sub {
    font-size: 12px;
    color: #374151;
    margin-top: 2px;
}

.lead-special-meta {
    font-size: 11px;
    color: #6B7280;
    margin-top: 4px;
}

.lead-special-description {
    font-size: 12px;
    color: #374151;
    margin-top: 6px;
    white-space: pre-wrap;
}

.lead-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lead-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--buro-brand-dark-green);
    background: var(--qb-brand-off);
    border: 1px solid var(--qb-h-primary-border-soft);
}

@media (max-width: 1200px) {
    .lead-details-columns {
        grid-template-columns: 1fr;
    }
}

/* Pipeline HTTP API keys modal */
a.pipeline-api-docs-link {
    color: var(--qb-h-primary, #5AB774);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.pipeline-api-docs-link:hover {
    opacity: 0.9;
}

button.pipeline-api-docs-open-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--qb-h-primary, #5AB774);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
button.pipeline-api-docs-open-btn:hover {
    opacity: 0.9;
}

.pipeline-api-docs-modal {
    z-index: 1100;
}

.pipeline-api-docs-modal .pipeline-api-docs-modal-content {
    max-width: min(960px, 96vw);
    width: 96%;
    max-height: 90vh;
}

.pipeline-api-docs-modal .pipeline-api-docs-modal-body {
    display: block;
    overflow: auto;
    max-height: min(78vh, calc(90vh - 88px));
    padding-top: 16px;
}

.pipeline-api-docs-loading {
    font-size: 13px;
    color: #6B7280;
}

.pipeline-api-docs-error {
    font-size: 13px;
    color: #B91C1C;
}

.pipeline-api-docs-markdown {
    font-size: 14px;
    line-height: 1.55;
    color: #1f2937;
}

.pipeline-api-docs-markdown h1,
.pipeline-api-docs-markdown h2,
.pipeline-api-docs-markdown h3 {
    margin: 1.1em 0 0.5em;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
}

.pipeline-api-docs-markdown h1 { font-size: 1.35rem; margin-top: 0; }
.pipeline-api-docs-markdown h2 { font-size: 1.15rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.35em; }
.pipeline-api-docs-markdown h3 { font-size: 1.05rem; }

.pipeline-api-docs-markdown p { margin: 0.65em 0; }
.pipeline-api-docs-markdown ul,
.pipeline-api-docs-markdown ol { margin: 0.5em 0; padding-left: 1.35em; }
.pipeline-api-docs-markdown li { margin: 0.25em 0; }

.pipeline-api-docs-markdown code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.pipeline-api-docs-markdown pre {
    margin: 0.75em 0;
    padding: 12px 14px;
    background: #111827;
    color: #f9fafb;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.45;
}

.pipeline-api-docs-markdown pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.pipeline-api-docs-markdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0.75em 0;
}

.pipeline-api-docs-markdown th,
.pipeline-api-docs-markdown td {
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.pipeline-api-docs-markdown th {
    background: #f9fafb;
    font-weight: 600;
}

.pipeline-api-docs-markdown details {
    margin: 0.75em 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafafa;
}

.pipeline-api-docs-markdown summary {
    cursor: pointer;
    font-weight: 600;
    color: #374151;
}

.pipeline-api-docs-markdown blockquote {
    margin: 0.75em 0;
    padding-left: 12px;
    border-left: 3px solid #d1d5db;
    color: #4b5563;
}

.pipeline-api-keys-curl-wrap {
    margin-bottom: 12px;
}

.pipeline-api-keys-curl {
    margin: 0;
    padding: 10px 12px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-all;
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.pipeline-api-keys-reveal {
    margin-bottom: 12px;
    padding: 12px;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 8px;
}

.pipeline-api-keys-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.pipeline-api-keys-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FAFAFA;
}

.pipeline-api-keys-row-main {
    flex: 1;
    min-width: 0;
}

.pipeline-api-keys-row-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.pipeline-api-keys-row-meta {
    font-size: 11px;
    color: #6B7280;
    margin-top: 4px;
}

.pipeline-api-keys-row-actions {
    flex-shrink: 0;
}

.pipeline-api-keys-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.pipeline-api-keys-badge-revoked {
    background: #FEE2E2;
    color: #991B1B;
}

.pipeline-api-keys-loading,
.pipeline-api-keys-empty,
.pipeline-api-keys-error {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
}

.pipeline-api-keys-error {
    color: #B91C1C;
}

/* Deal modal — History tab: fill main column height; list scrolls inside */
#dealModal .modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

#dealModal .modal-main {
    flex: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

#dealModal .modal-tabs {
    flex-shrink: 0;
}

#dealModal .modal-sidebar {
    min-height: 0;
    overflow-y: auto;
}

#dealModal #tab-history.tab-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#dealModal .deal-history-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

#dealModal .deal-history-load-more {
    flex-shrink: 0;
    width: 100%;
    margin-top: 12px;
    display: none;
}

.deal-history-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    line-height: 1.45;
    min-height: 0;
    box-sizing: border-box;
}

.deal-history-row:last-child {
    border-bottom: none;
}

.deal-history-time {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #6b7280;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    padding-top: 1px;
}

.deal-history-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.deal-history-line {
    color: #111827;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deal-history-cf-changes {
    padding: 8px 10px;
    margin: 0 0 2px 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #374151;
}

.deal-history-cf-line + .deal-history-cf-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.deal-history-cf-key {
    display: block;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.deal-history-cf-change {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.stage-automation-header-tools {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.stage-select-all-btn {
    border: 1px solid #D5DDE6;
    background: #FFFFFF;
    color: #23443D;
    border-radius: 999px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.stage-select-all-btn:hover:not(:disabled) {
    border-color: #84C4A8;
    background: #F4FBF7;
    transform: translateY(-1px);
}

.stage-select-all-btn:focus-visible {
    outline: 2px solid rgba(90, 183, 116, 0.35);
    outline-offset: 2px;
}

.stage-select-all-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.stage-automations-btn {
    border: 1px solid #D5DDE6;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F8F6 100%);
    color: #123B35;
    border-radius: 999px;
    padding: 5px 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.stage-automations-btn:hover {
    border-color: #84C4A8;
    transform: translateY(-1px);
}

.stage-automations-btn:focus-visible {
    outline: 2px solid rgba(90, 183, 116, 0.35);
    outline-offset: 2px;
}

.stage-automations-btn-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.stage-automations-badge {
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #123B35;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
}

.stage-automation-summary-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 236px;
    max-width: min(236px, calc(100vw - 24px));
    padding: 8px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(90, 183, 116, 0.14), transparent 42%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FBF9 100%);
    border: 1px solid rgba(18, 59, 53, 0.12);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
    z-index: 30;
}

.stage-automation-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.stage-automation-summary-copy {
    font-size: 9px;
    color: #64748B;
    line-height: 1.2;
}

.stage-automation-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stage-automation-summary-item {
    padding: 6px 4px;
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.stage-automation-summary-item:last-child {
    border-bottom: none;
}

.stage-automation-summary-item strong {
    display: block;
    font-size: 10px;
    color: #0F172A;
    margin-bottom: 1px;
    line-height: 1.2;
    font-weight: 700;
}

.stage-automation-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 9px;
    color: #64748B;
    line-height: 1.2;
}

.stage-automation-summary-status {
    font-weight: 700;
}

.stage-automation-summary-status.is-live {
    color: #166534;
}

.stage-automation-summary-status.is-draft {
    color: #92400E;
}

.stage-automation-summary-status.is-paused {
    color: #374151;
}

.stage-automation-summary-empty {
    padding: 8px 4px 2px;
    font-size: 10px;
    color: #64748B;
}

.stage-automation-drawer-shell {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
}

.stage-automation-drawer-shell.is-mounted {
    visibility: visible;
    pointer-events: auto;
}

.stage-automation-drawer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(1420px, calc(100vw - 20px));
    height: 100%;
    background:
        radial-gradient(circle at top left, rgba(90, 183, 116, 0.16), transparent 34%),
        linear-gradient(180deg, #F6FBF7 0%, #FFFFFF 18%, #FFFFFF 100%);
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.stage-automation-drawer-shell.open .stage-automation-drawer,
.stage-automation-drawer-shell.active .stage-automation-drawer {
    transform: translate3d(0, 0, 0);
}

.stage-automation-drawer-shell.open .stage-automation-drawer-backdrop,
.stage-automation-drawer-shell.active .stage-automation-drawer-backdrop {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .stage-automation-drawer-backdrop,
    .stage-automation-drawer {
        transition: none;
    }
}

.stage-automation-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 24px 10px;
}

.stage-automation-drawer-head-main {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.stage-automation-drawer-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    color: #102A26;
    min-width: 0;
    flex: 1 1 260px;
}

.stage-automation-drawer-subtitle {
    display: none;
}

.stage-automation-close-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #D5DDE6;
    background: #FFFFFF;
    color: #102A26;
    font-size: 22px;
    cursor: pointer;
}

.stage-automation-section-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    font-weight: 800;
    color: #2F6D5D;
}

.stage-automation-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border-radius: var(--qb-radius-sm);
    border: 1px solid var(--qb-border);
    background: var(--qb-tab-track);
    box-sizing: border-box;
    width: min(100%, 300px);
    min-height: 40px;
    flex-shrink: 0;
}

.stage-automation-tab {
    min-width: 0;
    width: 100%;
    border: 1px solid transparent;
    background: none;
    color: var(--qb-text-secondary);
    border-radius: 4px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
    text-align: center;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.stage-automation-tab:hover {
    color: var(--qb-text);
}

.stage-automation-tab.is-active {
    background: var(--lmpb-tab-active-bg);
    color: var(--qb-text);
    border-color: var(--qb-h-primary-border-mid);
    box-shadow: 0 1px 2px rgba(7, 43, 46, 0.1);
    font-weight: 600;
}

.stage-automation-drawer-body {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stage-automation-tab-panel {
    display: none;
    min-height: 0;
    flex: 1;
}

.stage-automation-tab-panel.is-active {
    display: flex;
    flex-direction: column;
}

.stage-automation-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0;
    padding: 0 0 18px;
}

.stage-automation-list-rail,
.stage-automation-canvas-shell,
.stage-automation-runs-head,
.stage-automation-runs-list {
    min-width: 0;
}

.stage-automation-list-rail {
    border: 1px solid #DCE6E0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.90);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.stage-automation-list-head {
    padding: 10px;
    border-bottom: 1px solid #E6ECE8;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stage-automation-create-btn {
    width: 100%;
}

.stage-automation-list {
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stage-automation-list-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-automation-list-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60736D;
    padding: 0 4px;
}

.stage-automation-list-card {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 10px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.stage-automation-list-card:hover {
    border-color: #9EC9B2;
    transform: translateY(-1px);
}

.stage-automation-list-card.is-selected {
    border-color: #2F6D5D;
    background: #F8FCFA;
}

.stage-automation-list-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.stage-automation-list-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.stage-automation-status-pill,
.stage-automation-trigger-pill,
.stage-automation-inline-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
}

.stage-automation-status-pill.is-live,
.stage-automation-meta-chip.is-live,
.stage-automation-inline-pill.is-live {
    background: #DCFCE7;
    color: #166534;
}

.stage-automation-status-pill.is-draft,
.stage-automation-meta-chip.is-draft,
.stage-automation-inline-pill.is-draft {
    background: #FEF3C7;
    color: #92400E;
}

.stage-automation-status-pill.is-paused,
.stage-automation-meta-chip.is-paused,
.stage-automation-inline-pill.is-paused {
    background: #E5E7EB;
    color: #374151;
}

.stage-automation-trigger-pill,
.stage-automation-inline-pill,
.stage-automation-meta-chip.is-muted {
    background: #EFF6F3;
    color: #31574D;
}

.stage-automation-inline-pill.is-accent {
    background: #DBEAFE;
    color: #1D4ED8;
}

.stage-automation-inline-pill.is-warning {
    background: #FEF3C7;
    color: #92400E;
}

.stage-automation-list-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.stage-automation-list-card-copy {
    font-size: 11px;
    color: #60736D;
    line-height: 1.45;
}

.stage-automation-list-card-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.stage-automation-list-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stage-automation-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #D7E0DA;
    background: #FFFFFF;
    color: #375851;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.stage-automation-icon-btn svg {
    display: block;
    flex-shrink: 0;
}

.stage-automation-icon-btn[data-automation-delete]:hover,
.stage-automation-icon-btn[data-automation-delete]:focus-visible {
    background: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

.stage-automation-canvas-shell {
    border: 1px solid #DCE6E0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.86);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stage-automation-empty-state {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    color: #546965;
}

.stage-automation-empty-state[hidden],
.stage-automation-empty-state.is-hidden,
.stage-automation-editor[hidden],
.stage-automation-editor.is-hidden {
    display: none !important;
}

.stage-automation-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: linear-gradient(180deg, #123B35 0%, #2F6D5D 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}

.stage-automation-empty-state h3 {
    margin: 0 0 10px;
    color: #102A26;
    font-size: 22px;
}

.stage-automation-empty-state p {
    margin: 0;
    max-width: 520px;
    line-height: 1.6;
}

.stage-automation-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.stage-automation-editor-topbar {
    padding: 14px 16px;
    border-bottom: 1px solid #E6ECE8;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stage-automation-editor-main-meta {
    min-width: 0;
    flex: 1;
}

.stage-automation-name-input {
    width: min(520px, 100%);
    height: 36px;
    min-height: 36px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #102A26;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 36px;
    box-sizing: border-box;
}

.stage-automation-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

#stageAutomationPauseBtn[hidden] {
    display: none !important;
}

.stage-automation-meta-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
}

.stage-automation-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.stage-automation-toolbar-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stage-automation-toolbar-icon-btn i {
    font-size: 13px;
}

.stage-automation-workbench {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 28vw, 420px);
}

.stage-automation-flow-board-wrap {
    min-height: 0;
    overflow: auto;
    padding: 16px 14px 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(18, 59, 53, 0.05), transparent 30%),
        linear-gradient(180deg, #FBFDFC 0%, #F7FBF8 100%);
}

.stage-automation-flow-board {
    min-height: 100%;
}

.stage-automation-sequence {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-automation-card {
    border: 1px solid #D6E0DB;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 10px 11px;
    position: relative;
}

.stage-automation-card.is-selected {
    border-color: #2F6D5D;
}

.stage-automation-card.is-start {
    background: linear-gradient(180deg, #123B35 0%, #1F544B 100%);
    color: #FFFFFF;
}

.stage-automation-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.stage-automation-card-main {
    min-width: 0;
}

.stage-automation-card.is-start .stage-automation-card-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 28px;
}

.stage-automation-card.is-start .stage-automation-card-topline {
    margin-bottom: 0;
}

.stage-automation-card-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    opacity: 0.78;
    line-height: 1.1;
}

.stage-automation-card-title {
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    line-height: 1.25;
}

.stage-automation-card-copy {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.4;
    color: inherit;
}

.stage-automation-card-validation {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.stage-automation-card-validation-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
}

.stage-automation-card-validation-pill.is-warning {
    background: #FFF7ED;
    color: #C2410C;
}

.stage-automation-card-validation-pill.is-error {
    background: #FEE2E2;
    color: #B91C1C;
}

.stage-automation-card-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stage-automation-card-btn {
    border: 1px solid #D7E0DA;
    background: #FFFFFF;
    color: #28453F;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.1;
}

.stage-automation-card-icon-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stage-automation-card-icon-btn i {
    font-size: 10px;
}

.stage-automation-card-btn[data-automation-remove-step]:hover,
.stage-automation-card-btn[data-automation-remove-step]:focus-visible,
.stage-automation-card-btn[data-condition-remove]:hover,
.stage-automation-card-btn[data-condition-remove]:focus-visible {
    background: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

.stage-automation-card.is-start .stage-automation-card-btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

.stage-automation-add-slot {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stage-automation-add-slot::before,
.stage-automation-add-slot::after {
    content: '';
    height: 1px;
    background: #D7E0DA;
    flex: 1;
}

.stage-automation-add-btn {
    border: 1px dashed #9CB8AD;
    background: rgba(255, 255, 255, 0.72);
    color: #23423B;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.stage-automation-add-btn:hover,
.stage-automation-add-btn:focus-visible {
    background: #EAF6F0;
    border-color: #5FAE88;
    color: #153A33;
    transform: translateY(-1px);
}

.stage-automation-add-menu {
    position: absolute;
    z-index: 520;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid #DCE6E0;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
    padding: 12px;
}

.stage-automation-add-menu-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 10px;
    color: #5B6F69;
    font-size: 11px;
}

.stage-automation-add-menu-section {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64746F;
    padding: 10px 6px 6px;
}

.stage-automation-add-menu-item {
    width: 100%;
    border: 1px solid transparent;
    background: #FFFFFF;
    color: #17332D;
    border-radius: 16px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    cursor: pointer;
    text-align: left;
}

.stage-automation-add-menu-item:hover {
    background: #F7FBF8;
    border-color: #D8E5DE;
}

.stage-automation-add-menu-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.stage-automation-add-menu-item small {
    display: block;
    color: #61716C;
    font-size: 11px;
    line-height: 1.45;
}

.stage-automation-add-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #F0F8F4;
    color: #245247;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.stage-automation-add-menu-note {
    padding: 10px 6px 2px;
    color: #64746F;
    font-size: 12px;
    line-height: 1.55;
}

.stage-automation-branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.stage-automation-branch {
    border: 1px solid #E3EBE7;
    background: #F9FCFA;
    border-radius: 13px;
    padding: 8px;
    min-width: 0;
}

.stage-automation-branch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.stage-automation-branch-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stage-automation-branch-title {
    font-size: 11px;
    font-weight: 800;
    color: #23423B;
}

.stage-automation-rejoin {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5E6F6A;
    font-size: 10px;
    font-weight: 700;
}

.stage-automation-branch-collapsed {
    padding: 8px 10px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px dashed #D7E0DA;
    color: #60736D;
    font-size: 11px;
}

.stage-automation-inspector {
    border-left: 1px solid #E6ECE8;
    background: #FFFFFF;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 16px;
}

.stage-automation-inspector-head {
    margin-bottom: 12px;
}

.stage-automation-inspector-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stage-automation-inspector-group {
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 10px 12px;
    background: #FBFDFC;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-automation-inspector-group-title {
    font-size: 11px;
    font-weight: 800;
    color: #1F3D36;
}

.stage-automation-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stage-automation-inline-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.stage-automation-grid-span-full {
    grid-column: 1 / -1;
}

.stage-automation-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stage-automation-choice-chip {
    border: 1px solid #D5DDE6;
    background: #FFFFFF;
    color: #264740;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.stage-automation-choice-chip.is-active {
    background: #123B35;
    border-color: #123B35;
    color: #FFFFFF;
}

.stage-automation-helper-copy {
    font-size: 11px;
    color: #667A75;
    line-height: 1.45;
}

.stage-automation-inline-actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.stage-automation-condition-row {
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 10px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-automation-condition-row-actions {
    display: flex;
    justify-content: flex-end;
}

.stage-automation-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #1F3D36;
    font-weight: 600;
}

.stage-automation-inspector .form-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.stage-automation-inspector .form-input,
.stage-automation-inspector .form-select {
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
}

.stage-automation-inspector .form-textarea {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.45;
}

.stage-automation-test-summary {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #F8FBF9;
    border: 1px solid #DCE6E0;
    color: #40554F;
    font-size: 12px;
    line-height: 1.55;
}

.stage-automation-condition-test-result {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #DCE6E0;
    background: #F8FBF9;
    color: #40554F;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.stage-automation-condition-test-result.is-yes {
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.stage-automation-condition-test-result.is-no {
    border-color: #FDE68A;
    background: #FFFBEB;
}

.stage-automation-condition-test-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-automation-condition-test-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.stage-automation-runs-head {
    padding: 0 26px 18px;
    border-bottom: 1px solid #E6ECE8;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.stage-automation-runs-head-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.stage-automation-runs-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stage-automation-run-card {
    border: 1px solid #DFE7E2;
    border-radius: 22px;
    background: #FFFFFF;
    padding: 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.stage-automation-run-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.stage-automation-run-title {
    font-size: 15px;
    font-weight: 700;
    color: #102A26;
}

.stage-automation-run-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: #5F706B;
}

.stage-automation-step-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.stage-automation-step-log-item {
    padding: 10px 12px;
    border-radius: 14px;
    background: #F8FBF9;
    border: 1px solid #DFE7E2;
}

.stage-automation-step-log-item strong {
    display: block;
    font-size: 12px;
    color: #102A26;
    margin-bottom: 4px;
}

.stage-automation-step-log-copy {
    font-size: 12px;
    line-height: 1.55;
    color: #566A64;
}

.stage-automation-step-log-meta {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #D7E0DA;
    font-size: 11px;
    line-height: 1.5;
    color: #60736D;
}

.stage-automation-empty-list {
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    color: #64748B;
}

@media (max-width: 1180px) {
    .stage-automation-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .stage-automation-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .stage-automation-inspector {
        border-left: none;
        border-top: 1px solid #E6ECE8;
        max-height: 34vh;
    }
}

@media (max-width: 960px) {
    .stage-automation-drawer {
        width: 100%;
    }

    .stage-automation-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .stage-automation-list-rail {
        max-height: 36vh;
    }

    .stage-automation-branches {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .stage-automation-drawer-head,
    .stage-automation-runs-head,
    .stage-automation-runs-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .stage-automation-drawer-head-main {
        align-items: stretch;
    }

    .stage-automation-runs-head {
        flex-direction: column;
        align-items: stretch;
    }

    .stage-automation-tabs {
        width: 100%;
    }

    .stage-automation-editor-topbar {
        padding: 16px;
        flex-direction: column;
    }

    .stage-automation-editor-actions {
        width: 100%;
    }

    .stage-automation-editor-actions .dfy-btn {
        flex: 1;
    }

    .stage-automation-branches,
    .stage-automation-inline-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stage-automation-summary-popover {
        right: -8px;
        width: min(245px, calc(100vw - 24px));
    }
}

/* Deal modal — sales email composer (rich text + variables) */
.sales-email-editor-stack {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

.sales-email-composer-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px 4px;
    padding: 6px 8px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0;
    background: #EEF1F6;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.sales-email-composer-toolbar::-webkit-scrollbar {
    height: 6px;
}

.sales-email-composer-toolbar::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.sales-email-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.sales-email-tb-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #334155;
}

.sales-email-tb-sep {
    flex-shrink: 0;
    width: 1px;
    height: 18px;
    background: #CBD5E1;
    margin: 0 3px;
}

.sales-email-tb-format,
.sales-email-var-select {
    display: inline-block;
    width: auto;
    flex-shrink: 0;
    min-width: 0;
    max-width: 140px;
    padding: 2px 6px;
    font-size: 12px;
    height: 28px;
    min-height: 28px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #475569;
    box-sizing: border-box;
}

.sales-email-var-select {
    max-width: 132px;
}

.sales-email-body-editor {
    min-height: 160px;
    max-height: 360px;
    overflow-y: auto;
    padding: 12px 14px;
    border: none;
    border-radius: 0;
    background: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    outline: none;
}

.stage-automation-inspector .sales-email-editor-stack {
    border-radius: 6px;
}

.stage-automation-inspector .sales-email-composer-toolbar {
    padding: 4px 6px;
}

.stage-automation-inspector .sales-email-tb-btn {
    min-width: 24px;
    height: 24px;
    font-size: 11px;
    padding: 0 5px;
}

.stage-automation-inspector .sales-email-tb-sep {
    margin: 0 2px;
}

.stage-automation-inspector .sales-email-tb-format,
.stage-automation-inspector .sales-email-var-select {
    max-width: 118px;
    height: 24px;
    min-height: 24px;
    padding: 0 4px;
    font-size: 11px;
}

.stage-automation-inspector .sales-email-body-editor {
    min-height: 116px;
    max-height: 220px;
    padding: 10px 12px;
    font-size: 13px;
}

.sales-email-body-editor[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: #9CA3AF;
    pointer-events: none;
}

.sales-email-body-editor:focus {
    border-color: #5AB774;
    box-shadow: 0 0 0 2px rgba(90, 183, 116, 0.15);
}

.sales-email-body-editor h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5em 0;
}

.sales-email-body-editor h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0.5em 0;
}

.sales-email-body-editor h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5em 0;
}

.sales-email-body-editor ul,
.sales-email-body-editor ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.sales-email-rendered-html {
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    word-break: break-word;
}

.sales-email-rendered-html a {
    color: #2563EB;
}

.sales-email-sent-copy-note {
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #FFF7ED;
    color: #9A3412;
    font-size: 12px;
    line-height: 1.4;
}

.sales-email-sent-copy-note-failed {
    background: #FEF2F2;
    color: #991B1B;
}

/* CRM iframe polish: keep the standalone pipeline chrome untouched. */
body.pipeline-embedded {
    --pipeline-embed-bg: #F5F7FA;
    --pipeline-embed-surface: #FFFFFF;
    --pipeline-embed-surface-muted: #F8FAFC;
    --pipeline-embed-border: #E3E8EF;
    --pipeline-embed-border-strong: #D7DEE8;
    --pipeline-embed-text: #12201B;
    --pipeline-embed-muted: #65746E;
    --pipeline-embed-soft-green: #EDF8F0;
    --pipeline-embed-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    background: var(--pipeline-embed-bg);
}

body.pipeline-embedded .pipeline-topbar {
    --pipeline-topbar-control-h: 38px;
    background: var(--pipeline-embed-surface);
    border-bottom: 1px solid var(--pipeline-embed-border);
    box-shadow: none;
    padding: 10px 14px;
}

body.pipeline-embedded .pipeline-topbar .pipeline-header {
    gap: 10px;
}

body.pipeline-embedded .pipeline-topbar .pipeline-topbar-tools {
    gap: 7px;
}

body.pipeline-embedded .pipeline-topbar .pipeline-title {
    color: var(--pipeline-embed-text);
    font-size: 18px;
    letter-spacing: 0;
}

body.pipeline-embedded .pipeline-topbar .pipeline-topbar-chevron,
body.pipeline-embedded .pipeline-topbar .pipeline-topbar-search-icon,
body.pipeline-embedded .pipeline-topbar .pipeline-topbar-label {
    color: var(--pipeline-embed-muted);
}

body.pipeline-embedded .pipeline-topbar .form-input,
body.pipeline-embedded .pipeline-topbar .form-select,
body.pipeline-embedded .pipeline-topbar .assigned-filter-trigger,
body.pipeline-embedded .pipeline-view-toggle,
body.pipeline-embedded .pipeline-topbar .pipeline-topbar-tools .dfy-btn-secondary,
body.pipeline-embedded .pipeline-topbar .pipeline-header > div:first-child > a.dfy-btn-secondary {
    background: var(--pipeline-embed-surface-muted);
    border-color: var(--pipeline-embed-border);
    color: var(--pipeline-embed-text);
    box-shadow: none;
}

body.pipeline-embedded .pipeline-topbar .form-input::placeholder {
    color: #96A29D;
}

body.pipeline-embedded .pipeline-topbar .form-input:focus,
body.pipeline-embedded .pipeline-topbar .form-select:focus,
body.pipeline-embedded .pipeline-topbar .assigned-filter-trigger:focus {
    border-color: rgba(90, 183, 116, 0.65);
    box-shadow: 0 0 0 3px rgba(90, 183, 116, 0.14);
}

body.pipeline-embedded .pipeline-topbar .assigned-filter-trigger:hover,
body.pipeline-embedded .pipeline-topbar .pipeline-topbar-tools .dfy-btn-secondary:hover,
body.pipeline-embedded .pipeline-topbar .pipeline-header > div:first-child > a.dfy-btn-secondary:hover {
    background: #FFFFFF;
    border-color: var(--pipeline-embed-border-strong);
}

body.pipeline-embedded .pipeline-topbar .assigned-filter-caret {
    border-top-color: var(--pipeline-embed-muted);
}

body.pipeline-embedded .pipeline-topbar .assigned-filter-clear {
    color: var(--pipeline-embed-muted);
}

body.pipeline-embedded .pipeline-topbar .dfy-btn-primary,
body.pipeline-embedded .pipeline-topbar .dfy-add-deal-split .dfy-btn-primary {
    background: #377F4F;
    color: #FFFFFF;
    border-color: #377F4F;
}

body.pipeline-embedded .pipeline-topbar .dfy-btn-primary:hover,
body.pipeline-embedded .pipeline-topbar .dfy-add-deal-split .dfy-btn-primary:hover {
    background: #2F7045;
    border-color: #2F7045;
}

body.pipeline-embedded .pipeline-view-toggle {
    padding: 3px;
}

body.pipeline-embedded .pipeline-view-toggle-btn {
    color: var(--pipeline-embed-muted);
}

body.pipeline-embedded .pipeline-view-toggle-btn.active {
    background: #FFFFFF;
    color: #1F5F38;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

body.pipeline-embedded .pipeline-select-toggle-btn-active {
    background: var(--pipeline-embed-soft-green) !important;
    border-color: rgba(90, 183, 116, 0.45) !important;
    color: #1F5F38 !important;
}

body.pipeline-embedded .pipeline-topbar .assigned-filter-list,
body.pipeline-embedded .pipeline-export-menu,
body.pipeline-embedded .pipeline-actions-menu,
body.pipeline-embedded .dfy-add-deal-split-menu {
    background: #FFFFFF;
    border: 1px solid var(--pipeline-embed-border);
    box-shadow: var(--pipeline-embed-shadow);
}

body.pipeline-embedded .pipeline-filters-panel-body {
    padding: 10px;
}

body.pipeline-embedded .pipeline-filters-actions {
    border-top-color: var(--pipeline-embed-border);
}

body.pipeline-embedded .pipeline-bulk-bar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pipeline-embed-border);
    box-shadow: none;
}

body.pipeline-embedded .pipeline-board {
    gap: 10px;
    padding: 12px;
    background: var(--pipeline-embed-bg);
    box-sizing: border-box;
}

body.pipeline-embedded .pipeline-board .pipeline-column + .pipeline-column {
    margin-left: 0;
}

body.pipeline-embedded .pipeline-column {
    flex-basis: 304px;
    background: var(--pipeline-embed-surface-muted);
    border: 1px solid var(--pipeline-embed-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.pipeline-embedded .pipeline-column.stage-won-closed,
body.pipeline-embedded .pipeline-column.stage-won-closed .column-header,
body.pipeline-embedded .pipeline-column.stage-won-closed .column-body,
body.pipeline-embedded .pipeline-column.stage-won-closed .column-footer {
    background: #F3FBF5;
}

body.pipeline-embedded .pipeline-column.stage-unqualified,
body.pipeline-embedded .pipeline-column.stage-unqualified .column-header,
body.pipeline-embedded .pipeline-column.stage-unqualified .column-body,
body.pipeline-embedded .pipeline-column.stage-unqualified .column-footer {
    background: #FFFBEA;
}

body.pipeline-embedded .pipeline-column.stage-lost,
body.pipeline-embedded .pipeline-column.stage-lost .column-header,
body.pipeline-embedded .pipeline-column.stage-lost .column-body,
body.pipeline-embedded .pipeline-column.stage-lost .column-footer {
    background: #FFF5F5;
}

body.pipeline-embedded .column-header {
    padding: 13px 14px;
    background: var(--pipeline-embed-surface-muted);
    border-bottom: 1px solid var(--pipeline-embed-border);
    color: var(--pipeline-embed-text);
}

body.pipeline-embedded .column-count {
    color: var(--pipeline-embed-muted);
}

body.pipeline-embedded .column-body {
    padding: 10px;
    gap: 8px;
    background: var(--pipeline-embed-surface-muted);
}

body.pipeline-embedded .column-footer {
    padding: 10px;
    background: var(--pipeline-embed-surface-muted);
    border-top: 1px solid var(--pipeline-embed-border);
}

body.pipeline-embedded .deal-card {
    border-color: var(--pipeline-embed-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.pipeline-embedded .deal-card:hover {
    transform: translateY(-1px);
    border-color: var(--pipeline-embed-border-strong);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}

body.pipeline-embedded .deal-title {
    color: var(--pipeline-embed-text);
}

body.pipeline-embedded .deal-meta-item,
body.pipeline-embedded .tag {
    background: #F1F5F3;
    color: #52645D;
}

body.pipeline-embedded .deal-footer {
    border-top-color: #EEF2F0;
}

body.pipeline-embedded .pipeline-analytics-view {
    background: var(--pipeline-embed-bg);
}

body.pipeline-embedded .pipeline-analytics-toolbar,
body.pipeline-embedded .pipeline-analytics-kpi,
body.pipeline-embedded .pipeline-analytics-panel,
body.pipeline-embedded .pipeline-analytics-insight {
    background: #FFFFFF;
    border-color: var(--pipeline-embed-border);
    box-shadow: none;
}

body.pipeline-embedded .pipeline-analytics-content {
    padding: 12px;
}

body.pipeline-embedded .pipeline-analytics-metric-toggle,
body.pipeline-embedded .pipeline-analytics-toolbar .pipeline-analytics-select {
    background-color: var(--pipeline-embed-surface-muted);
    border-color: var(--pipeline-embed-border);
}

body.pipeline-embedded .pipeline-analytics-metric-btn.active {
    color: #1F5F38;
    background: #FFFFFF;
}

.deal-linked-leads-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.deal-linked-leads-list:empty {
    display: none;
}

.deal-linked-leads-heading {
    margin: 0 0 2px;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.deal-linked-lead-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
}

.deal-linked-lead-item.is-primary {
    border-color: rgba(90, 183, 116, 0.45);
    background: #F3FBF5;
}

.deal-linked-lead-main {
    min-width: 0;
}

.deal-linked-lead-name {
    color: #0F172A;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.deal-linked-lead-meta {
    margin-top: 3px;
    color: #64748B;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.deal-linked-lead-email {
    margin-top: 3px;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.deal-linked-lead-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(90, 183, 116, 0.16);
    color: #1F5F38;
    font-size: 11px;
    font-weight: 700;
}

.deal-linked-lead-actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.deal-linked-lead-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    background: #FFFFFF;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.deal-linked-lead-action:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
}

.deal-linked-lead-action.is-danger {
    border-color: #FECACA;
    color: #B91C1C;
}

.deal-linked-lead-action.is-danger:hover {
    background: #FEF2F2;
}

@media (max-width: 760px) {
    body.pipeline-embedded .pipeline-topbar {
        padding: 10px;
    }

    body.pipeline-embedded .pipeline-board {
        padding: 10px;
    }

    body.pipeline-embedded .pipeline-column {
        flex-basis: min(300px, calc(100vw - 28px));
    }

    .deal-linked-lead-item {
        align-items: stretch;
        flex-direction: column;
    }

    .deal-linked-lead-actions {
        justify-content: flex-start;
    }
}