/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Pages/Crm/CrmAccountEdit.razor.rz.scp.css */
.crm-edit[b-k7efqqy8xt] {
    padding: 16px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

/* Separate the destructive Delete button from the Add/Edit group in the child-grid toolbars
   (mirrors .ss-delete-btn on the Settings lookup pages). ::deep reaches the Telerik-rendered
   button, which doesn't carry this component's scope attribute. */
.crm-edit[b-k7efqqy8xt]  .crm-del-btn {
    margin-left: 1.5em;
}

.crm-hint[b-k7efqqy8xt] {
    color: var(--kendo-color-subtle, #6c757d);
    font-style: italic;
    padding: 12px 0;
}

.crm-attachments-drop[b-k7efqqy8xt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.crm-attachments-drop .crm-hint[b-k7efqqy8xt] {
    padding: 0;
}

.crm-timeline[b-k7efqqy8xt] {
    list-style: none;
    margin: 0;
    padding: 8px 0 8px 8px;
    border-left: 2px solid var(--kendo-color-border, #dee2e6);
}

.crm-timeline-item[b-k7efqqy8xt] {
    position: relative;
    padding: 0 0 18px 18px;
}

.crm-timeline-dot[b-k7efqqy8xt] {
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--kendo-color-primary, #ff6358);
    border: 2px solid var(--kendo-color-surface, #fff);
}

.crm-timeline-head[b-k7efqqy8xt] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.crm-timeline-kind[b-k7efqqy8xt] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kendo-color-subtle, #6c757d);
}

.crm-timeline-date[b-k7efqqy8xt] {
    font-size: .8rem;
    color: var(--kendo-color-subtle, #6c757d);
    white-space: nowrap;
}

.crm-timeline-title[b-k7efqqy8xt] {
    font-weight: 600;
    margin-top: 2px;
}

.crm-timeline-detail[b-k7efqqy8xt] {
    font-size: .9rem;
    margin-top: 4px;
}

.crm-timeline-status[b-k7efqqy8xt] {
    display: inline-block;
    margin-top: 6px;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--kendo-color-base-hover, #eef0f2);
    color: var(--kendo-color-subtle, #6c757d);
}
/* /Components/Pages/Crm/CrmAccounts.razor.rz.scp.css */
/* Presence strip above the accounts grid (who currently has an account open for edit). */
.crm-accounts-bar[b-9s2xe9mko0] {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 8px;
}

/* Editor avatar shown on a row when another user has that account open for edit. */
.crm-row-editor[b-9s2xe9mko0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kendo-color-warning, #ed6c02);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}
/* /Components/Pages/Crm/CrmDashboard.razor.rz.scp.css */
.crm-dashboard[b-qq5n4b6out] {
    padding: 16px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.crm-page-title[b-qq5n4b6out] {
    margin: 0 0 16px 0;
}

.crm-kpi-row[b-qq5n4b6out] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.crm-kpi-card[b-qq5n4b6out] {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--kendo-color-surface, #fff);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.crm-kpi-label[b-qq5n4b6out] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kendo-color-subtle, #6c757d);
}

.crm-kpi-value[b-qq5n4b6out] {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--kendo-color-primary, #ff6358);
}

.crm-kpi-danger[b-qq5n4b6out] {
    border-color: var(--kendo-color-error, #d51923);
}

.crm-kpi-danger .crm-kpi-value[b-qq5n4b6out] {
    color: var(--kendo-color-error, #d51923);
}

.crm-chart-row[b-qq5n4b6out] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.crm-panel[b-qq5n4b6out] {
    flex: 1 1 320px;
    padding: 16px;
    background: var(--kendo-color-surface, #fff);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.crm-panel-wide[b-qq5n4b6out] {
    flex: 2 1 520px;
}

.crm-panel-title[b-qq5n4b6out] {
    font-weight: 600;
    margin-bottom: 12px;
}

.crm-overdue[b-qq5n4b6out] {
    color: var(--kendo-color-error, #d51923);
    font-weight: 600;
}

.crm-empty[b-qq5n4b6out] {
    color: var(--kendo-color-subtle, #6c757d);
    font-style: italic;
}

.crm-activity-list[b-qq5n4b6out] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
}

.crm-activity-item[b-qq5n4b6out] {
    padding: 10px 12px;
    border-left: 3px solid var(--kendo-color-primary, #ff6358);
    background: var(--kendo-color-base, #f8f9fa);
    border-radius: 4px;
}

.crm-activity-head[b-qq5n4b6out] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.crm-activity-title[b-qq5n4b6out] {
    font-weight: 600;
}

.crm-activity-date[b-qq5n4b6out] {
    font-size: .8rem;
    color: var(--kendo-color-subtle, #6c757d);
    white-space: nowrap;
}

.crm-activity-detail[b-qq5n4b6out] {
    font-size: .9rem;
    color: var(--kendo-color-on-app-surface, #333);
    margin-top: 4px;
}

.crm-activity-status[b-qq5n4b6out] {
    display: inline-block;
    margin-top: 6px;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--kendo-color-base-hover, #eef0f2);
    color: var(--kendo-color-subtle, #6c757d);
}
/* /Components/Pages/Crm/CrmPipeline.razor.rz.scp.css */
.crm-pipeline[b-2x75hsoths] {
    padding: 16px;
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-pipeline-header[b-2x75hsoths] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.crm-pipeline-title[b-2x75hsoths] {
    margin: 0;
}

.crm-pipeline-summary[b-2x75hsoths] {
    display: flex;
    gap: 24px;
}

.crm-summary-item[b-2x75hsoths] {
    display: flex;
    flex-direction: column;
}

.crm-summary-label[b-2x75hsoths] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kendo-color-subtle, #6c757d);
}

.crm-summary-value[b-2x75hsoths] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--kendo-color-primary, #ff6358);
}

.crm-board[b-2x75hsoths] {
    display: flex;
    gap: 14px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.crm-board-column[b-2x75hsoths] {
    flex: 0 0 245px;
    display: flex;
    flex-direction: column;
    background: var(--kendo-color-base, #f3f4f6);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}

.crm-column-header[b-2x75hsoths] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--kendo-color-surface, #fff);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
}

.crm-column-name[b-2x75hsoths] {
    font-weight: 600;
}

.crm-column-count[b-2x75hsoths] {
    min-width: 22px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--kendo-color-primary, #ff6358);
    color: var(--kendo-color-on-primary, #fff);
}

.crm-column-total[b-2x75hsoths] {
    padding: 6px 12px;
    font-size: .85rem;
    color: var(--kendo-color-subtle, #6c757d);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
}

.crm-column-cards[b-2x75hsoths] {
    flex: 1;
    overflow: hidden;
    padding: 10px;
}

/* ── Telerik ListBox host: strip ALL its chrome so the board matches the plain version ── */
.crm-column-cards[b-2x75hsoths]  .k-listbox,
.crm-column-cards[b-2x75hsoths]  .k-list,
.crm-column-cards[b-2x75hsoths]  .k-list-scroller,
.crm-column-cards[b-2x75hsoths]  .k-list-content {
    height: 100%;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* Connected ListBoxes show a transfer/reorder toolbar by default — drag is the only
   interaction we want, so hide it. */
.crm-column-cards[b-2x75hsoths]  .k-listbox-actions,
.crm-column-cards[b-2x75hsoths]  .k-listbox-toolbar {
    display: none;
}

.crm-column-cards[b-2x75hsoths]  .k-list-ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Let our .crm-card own the look; clear every bit of the ListBox item's own box,
   selection, focus-ring and hover styling. */
.crm-column-cards[b-2x75hsoths]  .k-list-item,
.crm-column-cards[b-2x75hsoths]  .k-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    min-height: 0;
}

.crm-column-cards[b-2x75hsoths]  .k-list-item::before,
.crm-column-cards[b-2x75hsoths]  .k-item::before {
    display: none;
}

/* Kendo wraps the ItemTemplate in this span and clips it (nowrap + ellipsis) and
   doesn't stretch it — that shrank the cards. Make it a full-width, unclipped block. */
.crm-column-cards[b-2x75hsoths]  .k-list-item-text {
    display: block;
    width: 100%;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.crm-column-cards[b-2x75hsoths]  .k-list-item.k-selected,
.crm-column-cards[b-2x75hsoths]  .k-list-item:hover,
.crm-column-cards[b-2x75hsoths]  .k-list-item.k-focus,
.crm-column-cards[b-2x75hsoths]  .k-list-item:focus,
.crm-column-cards[b-2x75hsoths]  .k-item.k-selected,
.crm-column-cards[b-2x75hsoths]  .k-item:hover,
.crm-column-cards[b-2x75hsoths]  .k-item.k-focus,
.crm-column-cards[b-2x75hsoths]  .k-item:focus {
    background: transparent;
    color: inherit;
    box-shadow: none;
    outline: none;
}

/* Empty column: a quiet drop target, no placeholder text. */
.crm-empty-zone[b-2x75hsoths] {
    min-height: 80px;
}

/* Source card while it's being dragged (class toggled by crm-pipeline-drag.js):
   keep its place in the column but fade it so the lifted clue reads as "the" card. */
.crm-column-cards[b-2x75hsoths]  .k-list-item.crm-drag-source .crm-card {
    opacity: .35;
    box-shadow: none;
}

.crm-card[b-2x75hsoths] {
    background: var(--kendo-color-surface, #fff);
    border-left: 3px solid var(--kendo-color-primary, #ff6358);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: box-shadow .12s ease, transform .12s ease;
}

.crm-card:hover[b-2x75hsoths] {
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.crm-card:active[b-2x75hsoths] {
    cursor: grabbing;
}

.crm-card-title[b-2x75hsoths] {
    font-weight: 600;
}

.crm-card-customer[b-2x75hsoths] {
    font-size: .85rem;
    color: var(--kendo-color-subtle, #6c757d);
    margin-top: 2px;
}

.crm-card-meta[b-2x75hsoths] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.crm-card-value[b-2x75hsoths] {
    font-weight: 600;
}

.crm-card-prob[b-2x75hsoths] {
    font-size: .8rem;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--kendo-color-base-hover, #eef0f2);
    color: var(--kendo-color-subtle, #6c757d);
}

.crm-card-empty[b-2x75hsoths] {
    font-size: .85rem;
    font-style: italic;
    color: var(--kendo-color-subtle, #6c757d);
    text-align: center;
    padding: 12px 0;
}

/* A card another user currently has open for edit (live presence). */
.crm-card-editing[b-2x75hsoths] {
    outline: 2px solid var(--kendo-color-warning, #ed6c02);
    outline-offset: 1px;
}

.crm-card-editor[b-2x75hsoths] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.crm-card-editor-avatar[b-2x75hsoths] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--kendo-color-warning, #ed6c02);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    flex-shrink: 0;
}

.crm-card-editor-name[b-2x75hsoths] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--kendo-color-warning, #ed6c02);
}
/* /Components/Shared/CrmAttachments.razor.rz.scp.css */
.crm-attachments-drop[b-rxygm347zj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.crm-attachments-progress[b-rxygm347zj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.crm-attachments-bar[b-rxygm347zj] {
    width: 100%;
}

.crm-hint[b-rxygm347zj] {
    color: var(--kendo-color-subtle, #6c757d);
    font-style: italic;
}
/* /Components/Shared/CrmTasksPanel.razor.rz.scp.css */
/* ── Filter bar (moved here from the old CrmTasks.razor.css when the markup became this panel) ── */
.crm-tasks[b-62fgt555l9] {
    padding: 16px;
}

.crm-filter-bar[b-62fgt555l9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-filter-label[b-62fgt555l9] {
    font-size: .85rem;
    color: var(--kendo-color-subtle, #6c757d);
}

.crm-overdue[b-62fgt555l9] {
    color: var(--kendo-color-error, #d51923);
    font-weight: 600;
}

.crm-dialog-field[b-62fgt555l9] {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Active column filter funnel — coloured + tinted so a filtered column reads at a glance. */
.crm-tasks[b-62fgt555l9]  .k-grid-header .k-grid-filter-menu.k-active,
.crm-tasks[b-62fgt555l9]  .k-grid-header .k-grid-header-menu.k-active {
    color: var(--kendo-color-primary, #ff6358);
    background-color: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 14%, transparent);
    border-radius: 4px;
}

/* Active server-side toolbar dropdown filter. */
.crm-filter-bar[b-62fgt555l9]  .crm-filter-active.k-dropdownlist {
    border-color: var(--kendo-color-primary, #ff6358);
    box-shadow: 0 0 0 1px var(--kendo-color-primary, #ff6358);
}

.crm-filter-chk-active[b-62fgt555l9] {
    color: var(--kendo-color-primary, #ff6358);
    font-weight: 600;
}

/* View toggle (List / Board) sits alone at the far-right end of the filter bar, vertically
   centred with the rest of the row. */
.crm-view-toggle[b-62fgt555l9] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crm-board-toolbar[b-62fgt555l9] {
    padding: 4px 0 10px;
}

/* ── Kanban board (status swimlanes) — adapted from the CRM Pipeline board ── */
.crm-board[b-62fgt555l9] {
    display: flex;
    gap: 14px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.crm-board-column[b-62fgt555l9] {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: var(--kendo-color-base, #f3f4f6);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}

.crm-column-header[b-62fgt555l9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--kendo-color-surface, #fff);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
}

.crm-column-name[b-62fgt555l9] {
    font-weight: 600;
}

.crm-column-count[b-62fgt555l9] {
    min-width: 22px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--kendo-color-primary, #ff6358);
    color: var(--kendo-color-on-primary, #fff);
}

.crm-column-cards[b-62fgt555l9] {
    flex: 1;
    overflow: hidden;
    padding: 10px;
}

/* Strip ALL the Telerik ListBox chrome so the lane reads as a plain card column. */
.crm-column-cards[b-62fgt555l9]  .k-listbox,
.crm-column-cards[b-62fgt555l9]  .k-list,
.crm-column-cards[b-62fgt555l9]  .k-list-scroller,
.crm-column-cards[b-62fgt555l9]  .k-list-content {
    height: 100%;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* Connected ListBoxes show a transfer/reorder toolbar by default — drag is the only
   interaction we want, so hide it. */
.crm-column-cards[b-62fgt555l9]  .k-listbox-actions,
.crm-column-cards[b-62fgt555l9]  .k-listbox-toolbar {
    display: none;
}

.crm-column-cards[b-62fgt555l9]  .k-list-ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-column-cards[b-62fgt555l9]  .k-list-item,
.crm-column-cards[b-62fgt555l9]  .k-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    min-height: 0;
}

.crm-column-cards[b-62fgt555l9]  .k-list-item::before,
.crm-column-cards[b-62fgt555l9]  .k-item::before {
    display: none;
}

.crm-column-cards[b-62fgt555l9]  .k-list-item-text {
    display: block;
    width: 100%;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.crm-column-cards[b-62fgt555l9]  .k-list-item.k-selected,
.crm-column-cards[b-62fgt555l9]  .k-list-item:hover,
.crm-column-cards[b-62fgt555l9]  .k-list-item.k-focus,
.crm-column-cards[b-62fgt555l9]  .k-list-item:focus,
.crm-column-cards[b-62fgt555l9]  .k-item.k-selected,
.crm-column-cards[b-62fgt555l9]  .k-item:hover,
.crm-column-cards[b-62fgt555l9]  .k-item.k-focus,
.crm-column-cards[b-62fgt555l9]  .k-item:focus {
    background: transparent;
    color: inherit;
    box-shadow: none;
    outline: none;
}

.crm-empty-zone[b-62fgt555l9] {
    min-height: 80px;
}

.crm-card[b-62fgt555l9] {
    background: var(--kendo-color-surface, #fff);
    border-left: 3px solid var(--kendo-color-primary, #ff6358);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: box-shadow .12s ease, transform .12s ease;
}

.crm-card:hover[b-62fgt555l9] {
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.crm-card:active[b-62fgt555l9] {
    cursor: grabbing;
}

.crm-card-title[b-62fgt555l9] {
    font-weight: 600;
}

/* A card another user currently has open for edit. */
.crm-card-editing[b-62fgt555l9] {
    outline: 2px solid var(--kendo-color-warning, #ed6c02);
    outline-offset: 1px;
}

/* Editor avatar shown on a list row / dialog title when a user has the task open. */
.crm-row-editor[b-62fgt555l9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kendo-color-warning, #ed6c02);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.crm-row-editor-me[b-62fgt555l9] {
    background: var(--kendo-color-success, #2e7d32);
}

.crm-dialog-title[b-62fgt555l9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-card-editor[b-62fgt555l9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.crm-card-editor-avatar[b-62fgt555l9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--kendo-color-warning, #ed6c02);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    flex-shrink: 0;
}

.crm-card-editor-name[b-62fgt555l9] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--kendo-color-warning, #ed6c02);
}

.crm-card-customer[b-62fgt555l9] {
    font-size: .85rem;
    color: var(--kendo-color-subtle, #6c757d);
    margin-top: 2px;
}

.crm-card-meta[b-62fgt555l9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: .8rem;
    color: var(--kendo-color-subtle, #6c757d);
}

.crm-card-due.crm-overdue[b-62fgt555l9] {
    color: var(--kendo-color-error, #d9534f);
    font-weight: 600;
}